removed old Icon code for announcements

removed old Icon code for announcements

/*
 * Announcements component theme overrides
 *------------------------------------------------------------------------------------------
 */

blockquote {

    //TODO  blockquote h4 margin adjustment
    h4{
        margin: 5px 0;
    }

    //TODO  blockquote h4 margin adjustment
    &.blockquote-icon {
        border: none;
        padding-left: 56px !important;
    }

    &.blockquote {
        &-blue {
            border-color: @dell-blue;
        }
        &-green {
            border-color: @dell-green;
        }
        &-purple {
            border-color: @dell-purple;
        }
        &-orange {
            border-color: @dell-orange;
        }
        &-berry {
            border-color: @dell-berry;
        }
        &-red {
            border-color: @dell-red;
        }
        &-red-dark {
            border-color: @dell-red-dark;
        }
        &-dark-blue {
            border-color: @dell-dark-blue;
        }
        &-gray-dark {
            border-color: @dell-gray-dark;
        }
    }

    li {
        padding-top: 5px;
        padding-bottom: 5px;
        a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }

    .blockquote-links {
        li + li::before {
            content: " | ";
            padding-right: 10px;
            color: @dell-blue;
        }
    }
}

@media (max-width: @screen-xs-max) {
    blockquote {

        .blockquote-links {
            li {
                width: 100%;
            }
            li + li::before {
                content: "";
                padding-right: 0;
            }
        }
    }
}

.blockquote-dell-advantage {
    display: block;
    width: 40px;
    height: 40px;
    margin-left: -42px;
    margin-top: 2px;
    background: url('announcements/dell-advantage-star.svg') no-repeat;
    background-size: 30px 30px;
    float: left;

    &.pull-right {
        display: block;
        width: 40px;
        height: 40px;
        margin-right: -51px;
        margin-top: 2px;
        background-size: 30px 30px;
        float: right;
    }
}

.blockquote-dell-dpa {
    display: block;
    width: 40px;
    height: 40px;
    margin-left: -45px;
    margin-top: -5px;
    background: url('announcements/dell-preferred-account.svg') no-repeat;
    background-size: 35px 35px;
    float: left;

    &.pull-right {
        display: block;
        width: 40px;
        height: 40px;
        margin-right: -50px;
        margin-top: -5px;
        background: url('announcements/dell-preferred-account.svg') no-repeat;
        background-size: 35px 35px;
        float: left;
    }
}

/*
 * Announcements component theme overrides
 *------------------------------------------------------------------------------------------
 */

blockquote {

    //TODO  blockquote h4 margin adjustment
    h4{
        margin: 5px 0;
    }

    //TODO  blockquote h4 margin adjustment
    &.blockquote-icon {
        border: none;
        padding-left: 56px !important;
    }

    &.blockquote {
        &-blue {
            border-color: @dell-blue;
        }
        &-green {
            border-color: @dell-green;
        }
        &-purple {
            border-color: @dell-purple;
        }
        &-orange {
            border-color: @dell-orange;
        }
        &-berry {
            border-color: @dell-berry;
        }
        &-red {
            border-color: @dell-red;
        }
        &-red-dark {
            border-color: @dell-red-dark;
        }
        &-dark-blue {
            border-color: @dell-dark-blue;
        }
        &-gray-dark {
            border-color: @dell-gray-dark;
        }
        &-icon {
            border: none;
            padding-left: 55px;
            [class*="icon"] {
                display: none;
            }
            //TODO these icons do not exist in dell-ui-bootstrap and need to be added - probably images?
            .icon-large-dell-dpa-card,
            .icon-large-dell-advantage-star {
                display: block;
                position: absolute;
                top: 15px;
                left: 15px;
                max-width: 30px;
            }

            &.pull-right {
                padding-left: 15px;
                padding-right: 55px;
                .icon-large-dell-dpa-card,
                .icon-large-dell-advantage-star {
                    position: absolute;
                    top: 15px;
                    right: 15px;
                    left: auto;
                }
            }
        }
    }

    li {
        padding-top: 5px;
        padding-bottom: 5px;
        a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }

    .blockquote-links {
        li + li::before {
            content: " | ";
            padding-right: 10px;
            color: @dell-blue;
        }
    }
}

@media (max-width: @screen-xs-max) {
    blockquote {

        .blockquote-links {
            li {
                width: 100%;
            }
            li + li::before {
                content: "";
                padding-right: 0;
            }
        }
    }
}

.blockquote-dell-advantage {
    display: block;
    width: 40px;
    height: 40px;
    margin-left: -42px;
    margin-top: 2px;
    background: url('announcements/dell-advantage-star.svg') no-repeat;
    background-size: 30px 30px;
    float: left;

    &.pull-right {
        display: block;
        width: 40px;
        height: 40px;
        margin-right: -51px;
        margin-top: 2px;
        background-size: 30px 30px;
        float: right;
    }
}

.blockquote-dell-dpa {
    display: block;
    width: 40px;
    height: 40px;
    margin-left: -45px;
    margin-top: -5px;
    background: url('announcements/dell-preferred-account.svg') no-repeat;
    background-size: 35px 35px;
    float: left;

    &.pull-right {
        display: block;
        width: 40px;
        height: 40px;
        margin-right: -50px;
        margin-top: -5px;
        background: url('announcements/dell-preferred-account.svg') no-repeat;
        background-size: 35px 35px;
        float: left;
    }
}


Adds styling for dropndown ui components.

Signed-off-by: Pedro Correia <ea87d330e838ea1d1c28897d886562e876dfb364@co.sapo.pt>

.ink-dropdown {

            position: absolute;
            background: @white;
            z-index: @layer-30;
            border: 1px solid @grey-20;
            height: auto;
            width: 14em;
            #ink > #border-radius > .all (5px);
            #ink > #shadows > .box-shadow (0,0,3px,0,rgba(100,100,100,0.3));
            padding: 0.3em 0;

            ul {

                display: block;
                margin-left: 0px;
                overflow: hidden;
                padding: 0;

                li {
                    #ink > #shadows > .no-box-shadow ();
                    #ink > #border-radius > .none ();
                    width: auto;
                    height: auto;
                    min-height: auto;
                    display: list-item;
                    float: none;
                    margin: 0;
                    text-align: left;
                    text-transform: none;
                    font-size: 1em;
                    padding: 0;

                    &.separator {

                        &.above {
                            padding-top: .5em;
                            margin-top: .5em;
                            border-top: 1px solid @grey-20;
                        }
                        &.below {
                            padding-bottom: .5em;
                            margin-bottom: .5em;
                            border-bottom: 1px solid @grey-20;
                        }
                    }

                    a {
                        color: #444;
                        padding: 0.5em 0.8em;
                        display: block;
                        &:hover {
                            background: @grey-5;
                            text-decoration: none;
                        }
                    }

                    &.active {
                        a {
                            background: @blue;
                            color: @white;
                        }
                    }
                }
            }
        }

error: pathspec 'less/navigation.dropdown.less' did not match any file(s) known to git


Fixed a missing selector wrapper

Fixed a missing selector wrapper

.setLineHeightScaling(
    @selector            : body,
    @hdFull              : @font-line-height,
    @hdReady             : @font-line-height,
    @tabletLandscape     : @font-line-height,
    @tabletPortrait      : @font-line-height,
    @smartphoneLandscape : @font-line-height,
    @smartphonePortrait  : @font-line-height
    ) {

    ._setLineHeightScaling(@from-smartphone-portrait,  @selector, @smartphonePortrait,  @use-smartphone-portrait);
    ._setLineHeightScaling(@from-smartphone-landscape, @selector, @smartphoneLandscape, @use-smartphone-landscape);
    ._setLineHeightScaling(@from-tablet-portrait,      @selector, @tabletPortrait,      @use-tablet-portrait);
    ._setLineHeightScaling(@from-tablet-landscape,     @selector, @tabletLandscape,     @use-tablet-landscape);
    ._setLineHeightScaling(@from-hd-ready,             @selector, @hdReady,             @use-hd-ready);
    ._setLineHeightScaling(@from-hd-full,              @selector, @hdFull,              @use-hd-full);
}

._setLineHeightScaling(@viewport, @selector, @lineHeight, @viewportEnabled) when (@viewportEnabled = true) {
    @media @viewport {
        @{selector} {
            line-height : @lineHeight;
        }
    }
}

.setFontScaling(
    @selector            ,
    @hdFull              : (@font-size + (@font-size/2)),
    @hdReady             : (@font-size + (@font-size/4)),
    @tabletLandscape     : @font-size,
    @tabletPortrait      : @font-size,
    @smartphoneLandscape : @font-size,
    @smartphonePortrait  : @font-size
    ) {
    ._setFontScaling(@from-smartphone-portrait,  @selector, @smartphonePortrait,  @use-smartphone-portrait);
    ._setFontScaling(@from-smartphone-landscape, @selector, @smartphoneLandscape, @use-smartphone-landscape);
    ._setFontScaling(@from-tablet-portrait,      @selector, @tabletPortrait,      @use-tablet-portrait);
    ._setFontScaling(@from-tablet-landscape,     @selector, @tabletLandscape,     @use-tablet-landscape);
    ._setFontScaling(@from-hd-ready,             @selector, @hdReady,             @use-hd-ready);
    ._setFontScaling(@from-hd-full,              @selector, @hdFull,              @use-hd-full);
}

._setFontScaling(@viewport, @selector, @fontSize, @viewportEnabled) when (@viewportEnabled = true) {
    @media @viewport {
        @{selector} {
            font-size : @fontSize;
        }
    }
}

.addMultipleFontsRule(
    @selector             : with-small-fonts,
    @fontFamilyHd         : @font-small,
    @fontSizeHd           : 14px,
    @fontFamilyTablet     : @font-small,
    @fontSizeTablet       : 14px,
    @fontFamilySmartphone : @font-small,
    @fontSizeSmartphone   : 12px,
    @antialias            : subpixel-antialiased
    ) {

    ._addMultipleFontsRule(@from-smartphone-portrait, @selector, @fontFamilySmartphone, @fontSizeSmartphone, @use-smartphone-portrait);
    ._addMultipleFontsRule(@from-tablet-portrait,     @selector, @fontFamilyTablet,     @fontSizeTablet,     @use-tablet-portrait);
    ._addMultipleFontsRule(@from-hd-ready,            @selector, @fontFamilyHd,         @fontSizeHd,         @use-hd-ready);

    .@{selector} {
        .font-smoothing(@antialias);
    }
}

._addMultipleFontsRule(@viewport, @selector, @fontFamily, @fontSize, @viewportEnabled) when (@viewportEnabled = true) {
    @media @viewport {
        .@{selector} {
            .property(font-family, @fontFamily);
            .property(font-size, @fontSize);
        }
    }
}

.setHeadingFont(
    @hdFullMultiplier              : 1.5,
    @hdReadyMultiplier             : 1.25,
    @tabletLandscapeMultiplier     : 1,
    @tabletPortraitMultiplier      : 1,
    @smartphoneLandscapeMultiplier : 1,
    @smartphonePortraitMultiplier  : 1,
    @marginBottom                  : unit((@global-step / 4), px)
    ) {

    ._setHeadingFont(@from-smartphone-portrait,  @smartphonePortraitMultiplier,  @marginBottom, @use-smartphone-portrait);
    ._setHeadingFont(@from-smartphone-landscape, @smartphoneLandscapeMultiplier, @marginBottom, @use-smartphone-landscape);
    ._setHeadingFont(@from-tablet-portrait,      @tabletPortraitMultiplier,      @marginBottom, @use-tablet-portrait);
    ._setHeadingFont(@from-tablet-landscape,     @tabletLandscapeMultiplier,     @marginBottom, @use-tablet-landscape);
    ._setHeadingFont(@from-hd-ready,             @hdReadyMultiplier,             @marginBottom, @use-hd-ready);
    ._setHeadingFont(@from-hd-full,              @hdFullMultiplier,              @marginBottom, @use-hd-full);
}

._setHeadingFont(@viewport, @multiplier, @margin, @viewportEnabled) when (@viewportEnabled = true) {
    @media @viewport {
        h1 {
            font-size : round(unit((@h1 * @multiplier), px));
        }
        h2 {
            font-size : round(unit((@h2 * @multiplier), px));
        }
        h3 {
            font-size : round(unit((@h3 * @multiplier), px));
        }
        h4 {
            font-size : round(unit((@h4 * @multiplier), px));
        }
        h5 {
            font-size : round(unit((@h5 * @multiplier), px));
        }
        h6 {
            font-size : round(unit((@h6 * @multiplier), px));
        }
        h1, h2, h3, h4, h5, h6 {
            margin-bottom : round(unit((@margin * @multiplier), px));
        }
    }
}

.addFontRule(
    @selector                    ,
    @fontFamily                  : @font-default,
    @hdFullFontSize              : @font-size,
    @hdReadyFontSize             : @hdFullFontSize,
    @tabletLandscapeFontSize     : @hdReadyFontSize,
    @tabletPortraitFontSize      : @tabletLandscapeFontSize,
    @smartphoneLandscapeFontSize : @tabletPortraitFontSize,
    @smartphonePortraitFontSize  : @smartphoneLandscapeFontSize,
    @lineHeightMultiplier        : false,
    @antialias                   : false
    ) {
    // Media queries for selectors active from the smaller resolution to a specific one
    .@{selector} {
        font-family : @fontFamily;
        .property(line-height, @lineHeightMultiplier);
        .font-smoothing(@antialias);
    }

    ._addFontRule(@from-hd-full,              @selector, @hdFullFontSize,              @use-hd-full);
    ._addFontRule(@till-hd-full,              @selector, @hdReadyFontSize,             @use-hd-ready);
    ._addFontRule(@till-hd-ready,             @selector, @tabletLandscapeFontSize,     @use-tablet-landscape);
    ._addFontRule(@till-tablet-landscape,     @selector, @tabletPortraitFontSize,      @use-tablet-portrait);
    ._addFontRule(@till-tablet-portrait,      @selector, @smartphoneLandscapeFontSize, @use-smartphone-landscape);
    ._addFontRule(@till-smartphone-landscape, @selector, @smartphonePortraitFontSize,  @use-smartphone-portrait);
}

._addFontRule(@viewport, @selector, @fontSize, @viewportEnabled) when (@viewportEnabled = true) {
    @media @viewport {
        .@{selector} {
            font-size : @fontSize !important;
        }
    }
}

.setViewportsFontSize(
    @hdFullFontSize              : 16px,
    @hdReadyFontSize             : 16px,
    @tabletLandscapeFontSize     : 16px,
    @tabletPortraitFontSize      : 16px,
    @smartphoneLandscapeFontSize : 16px,
    @smartphonePortraitFontSize  : 16px,
    @lineHeightMultiplier        : false,
    @useImportant                : true
    ) {

    .property(line-height, @lineHeightMultiplier);

    ._setViewportsFontSize(@from-hd-full,              @hdFullFontSize,              @useImportant, @use-hd-full);
    ._setViewportsFontSize(@till-hd-full,              @hdReadyFontSize,             @useImportant, @use-hd-ready);
    ._setViewportsFontSize(@till-hd-ready,             @tabletLandscapeFontSize,     @useImportant, @use-tablet-landscape);
    ._setViewportsFontSize(@till-tablet-landscape,     @tabletPortraitFontSize,      @useImportant, @use-tablet-portrait);
    ._setViewportsFontSize(@till-tablet-portrait,      @smartphoneLandscapeFontSize, @useImportant, @use-smartphone-landscape);
    ._setViewportsFontSize(@till-smartphone-landscape, @smartphonePortraitFontSize,  @useImportant, @use-smartphone-portrait);

}

._setViewportsFontSize(@viewport, @fontSize, @useImportant, @viewportEnabled) when (@viewportEnabled = true) and (@useImportant = true) {
    @media @viewport {
        font-size : @fontSize !important;
    }
}._setViewportsFontSize(@viewport, @fontSize, @useImportant, @viewportEnabled) when (@viewportEnabled = true) and not (@useImportant = true) {
    @media @viewport {
        font-size : @fontSize;
    }
}

.setLineHeightScaling(
    @selector            : body,
    @hdFull              : @font-line-height,
    @hdReady             : @font-line-height,
    @tabletLandscape     : @font-line-height,
    @tabletPortrait      : @font-line-height,
    @smartphoneLandscape : @font-line-height,
    @smartphonePortrait  : @font-line-height
    ) {

    ._setLineHeightScaling(@from-smartphone-portrait,  @selector, @smartphonePortrait,  @use-smartphone-portrait);
    ._setLineHeightScaling(@from-smartphone-landscape, @selector, @smartphoneLandscape, @use-smartphone-landscape);
    ._setLineHeightScaling(@from-tablet-portrait,      @selector, @tabletPortrait,      @use-tablet-portrait);
    ._setLineHeightScaling(@from-tablet-landscape,     @selector, @tabletLandscape,     @use-tablet-landscape);
    ._setLineHeightScaling(@from-hd-ready,             @selector, @hdReady,             @use-hd-ready);
    ._setLineHeightScaling(@from-hd-full,              @selector, @hdFull,              @use-hd-full);
}

._setLineHeightScaling(@viewport, @selector, @lineHeight, @viewportEnabled) when (@viewportEnabled = true) {
    @media @viewport {
        @{selector} {
            line-height : @lineHeight;
        }
    }
}

.setFontScaling(
    @selector            ,
    @hdFull              : (@font-size + (@font-size/2)),
    @hdReady             : (@font-size + (@font-size/4)),
    @tabletLandscape     : @font-size,
    @tabletPortrait      : @font-size,
    @smartphoneLandscape : @font-size,
    @smartphonePortrait  : @font-size
    ) {
    ._setFontScaling(@from-smartphone-portrait,  @selector, @smartphonePortrait,  @use-smartphone-portrait);
    ._setFontScaling(@from-smartphone-landscape, @selector, @smartphoneLandscape, @use-smartphone-landscape);
    ._setFontScaling(@from-tablet-portrait,      @selector, @tabletPortrait,      @use-tablet-portrait);
    ._setFontScaling(@from-tablet-landscape,     @selector, @tabletLandscape,     @use-tablet-landscape);
    ._setFontScaling(@from-hd-ready,             @selector, @hdReady,             @use-hd-ready);
    ._setFontScaling(@from-hd-full,              @selector, @hdFull,              @use-hd-full);
}

._setFontScaling(@viewport, @selector, @fontSize, @viewportEnabled) when (@viewportEnabled = true) {
    @media @viewport {
        @{selector} {
            font-size : @fontSize;
        }
    }
}

.addMultipleFontsRule(
    @selector             : with-small-fonts,
    @fontFamilyHd         : @font-small,
    @fontSizeHd           : 14px,
    @fontFamilyTablet     : @font-small,
    @fontSizeTablet       : 14px,
    @fontFamilySmartphone : @font-small,
    @fontSizeSmartphone   : 12px,
    @antialias            : subpixel-antialiased
    ) {

    ._addMultipleFontsRule(@from-smartphone-portrait, @selector, @fontFamilySmartphone, @fontSizeSmartphone, @use-smartphone-portrait);
    ._addMultipleFontsRule(@from-tablet-portrait,     @selector, @fontFamilyTablet,     @fontSizeTablet,     @use-tablet-portrait);
    ._addMultipleFontsRule(@from-hd-ready,            @selector, @fontFamilyHd,         @fontSizeHd,         @use-hd-ready);
    .font-smoothing(@antialias);
}

._addMultipleFontsRule(@viewport, @selector, @fontFamily, @fontSize, @viewportEnabled) when (@viewportEnabled = true) {
    @media @viewport {
        .@{selector} {
            .property(font-family, @fontFamily);
            .property(font-size, @fontSize);
        }
    }
}

.setHeadingFont(
    @hdFullMultiplier              : 1.5,
    @hdReadyMultiplier             : 1.25,
    @tabletLandscapeMultiplier     : 1,
    @tabletPortraitMultiplier      : 1,
    @smartphoneLandscapeMultiplier : 1,
    @smartphonePortraitMultiplier  : 1,
    @marginBottom                  : unit((@global-step / 4), px)
    ) {

    ._setHeadingFont(@from-smartphone-portrait,  @smartphonePortraitMultiplier,  @marginBottom, @use-smartphone-portrait);
    ._setHeadingFont(@from-smartphone-landscape, @smartphoneLandscapeMultiplier, @marginBottom, @use-smartphone-landscape);
    ._setHeadingFont(@from-tablet-portrait,      @tabletPortraitMultiplier,      @marginBottom, @use-tablet-portrait);
    ._setHeadingFont(@from-tablet-landscape,     @tabletLandscapeMultiplier,     @marginBottom, @use-tablet-landscape);
    ._setHeadingFont(@from-hd-ready,             @hdReadyMultiplier,             @marginBottom, @use-hd-ready);
    ._setHeadingFont(@from-hd-full,              @hdFullMultiplier,              @marginBottom, @use-hd-full);
}

._setHeadingFont(@viewport, @multiplier, @margin, @viewportEnabled) when (@viewportEnabled = true) {
    @media @viewport {
        h1 {
            font-size : round(unit((@h1 * @multiplier), px));
        }
        h2 {
            font-size : round(unit((@h2 * @multiplier), px));
        }
        h3 {
            font-size : round(unit((@h3 * @multiplier), px));
        }
        h4 {
            font-size : round(unit((@h4 * @multiplier), px));
        }
        h5 {
            font-size : round(unit((@h5 * @multiplier), px));
        }
        h6 {
            font-size : round(unit((@h6 * @multiplier), px));
        }
        h1, h2, h3, h4, h5, h6 {
            margin-bottom : round(unit((@margin * @multiplier), px));
        }
    }
}

.addFontRule(
    @selector                    ,
    @fontFamily                  : @font-default,
    @hdFullFontSize              : @font-size,
    @hdReadyFontSize             : @hdFullFontSize,
    @tabletLandscapeFontSize     : @hdReadyFontSize,
    @tabletPortraitFontSize      : @tabletLandscapeFontSize,
    @smartphoneLandscapeFontSize : @tabletPortraitFontSize,
    @smartphonePortraitFontSize  : @smartphoneLandscapeFontSize,
    @lineHeightMultiplier        : false,
    @antialias                   : false
    ) {
    // Media queries for selectors active from the smaller resolution to a specific one
    .@{selector} {
        font-family : @fontFamily;
        .property(line-height, @lineHeightMultiplier);
        .font-smoothing(@antialias);
    }

    ._addFontRule(@from-hd-full,              @selector, @hdFullFontSize,              @use-hd-full);
    ._addFontRule(@till-hd-full,              @selector, @hdReadyFontSize,             @use-hd-ready);
    ._addFontRule(@till-hd-ready,             @selector, @tabletLandscapeFontSize,     @use-tablet-landscape);
    ._addFontRule(@till-tablet-landscape,     @selector, @tabletPortraitFontSize,      @use-tablet-portrait);
    ._addFontRule(@till-tablet-portrait,      @selector, @smartphoneLandscapeFontSize, @use-smartphone-landscape);
    ._addFontRule(@till-smartphone-landscape, @selector, @smartphonePortraitFontSize,  @use-smartphone-portrait);
}

._addFontRule(@viewport, @selector, @fontSize, @viewportEnabled) when (@viewportEnabled = true) {
    @media @viewport {
        .@{selector} {
            font-size : @fontSize !important;
        }
    }
}

.setViewportsFontSize(
    @hdFullFontSize              : 16px,
    @hdReadyFontSize             : 16px,
    @tabletLandscapeFontSize     : 16px,
    @tabletPortraitFontSize      : 16px,
    @smartphoneLandscapeFontSize : 16px,
    @smartphonePortraitFontSize  : 16px,
    @lineHeightMultiplier        : false,
    @useImportant                : true
    ) {

    .property(line-height, @lineHeightMultiplier);

    ._setViewportsFontSize(@from-hd-full,              @hdFullFontSize,              @useImportant, @use-hd-full);
    ._setViewportsFontSize(@till-hd-full,              @hdReadyFontSize,             @useImportant, @use-hd-ready);
    ._setViewportsFontSize(@till-hd-ready,             @tabletLandscapeFontSize,     @useImportant, @use-tablet-landscape);
    ._setViewportsFontSize(@till-tablet-landscape,     @tabletPortraitFontSize,      @useImportant, @use-tablet-portrait);
    ._setViewportsFontSize(@till-tablet-portrait,      @smartphoneLandscapeFontSize, @useImportant, @use-smartphone-landscape);
    ._setViewportsFontSize(@till-smartphone-landscape, @smartphonePortraitFontSize,  @useImportant, @use-smartphone-portrait);

}

._setViewportsFontSize(@viewport, @fontSize, @useImportant, @viewportEnabled) when (@viewportEnabled = true) and (@useImportant = true) {
    @media @viewport {
        font-size : @fontSize !important;
    }
}._setViewportsFontSize(@viewport, @fontSize, @useImportant, @viewportEnabled) when (@viewportEnabled = true) and not (@useImportant = true) {
    @media @viewport {
        font-size : @fontSize;
    }
}


fixed size of close button

fixed size of close button

@inspector-background-color: #221e1c;
@inspector-region-background-color: #282828;
@inspector-divider-bottom: rgba(0, 0, 0, 0.3);
@inspector-divider-top: rgba(255, 255, 255, 0.05);
@inspector-status-border-color: #E2E2E2;
@inspector-subtitle-color: #555555;

.yui3-juju-inspector {
    .customize-scrollbar;

    .left-breakout {
        position: absolute;
        top: 20px;
        overflow-y: auto;
        overflow-x: hidden;
        right: 327px;
        width: 500px;
        color: rgb(80, 80, 80);
        background-color: rgb(255, 255, 255);

        &.with-charm {
            width: 750px;
        }

        .close-slot {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
            font-weight: bold;
            line-height: 18px;
            cursor: pointer;
            color: @inspector-background-color;
            z-index: 10;
        }
    }

    .juju-inspector {
        .create-border-radius(@border-radius);
        position: absolute;
        top: 20px;
        right: 35px;
        width: 292px;
        min-height: 250px;
        border: 0;
        background-color: @inspector-background-color;
        color: #fff;
        /* Can be removed once the old inspector styles are removed. */
        margin: 0;

        h1, h2, h3, h4, h5, h6 {
            background-color: @inspector-region-background-color;
            padding-left: 1em;
        }
        .settings-wrapper {
            position: relative;
            width: 268px;

            label {
                font-size: 14px;
                margin: 14px 0 7px 0;
                font-weight: bold;
            }

            textarea {
                width: 260px;
            }

            .settings-description {
                font-style: italic;
                font-size: 12px;

                /* below hyphenation code was taken from:
                http://www.newnet-soft.com/blog/csstypography */
                -ms-word-break: break-all;
                word-break: break-all;

                // Non standard for webkit
                word-break: break-word;

                -webkit-hyphens: auto;
                -moz-hyphens: auto;
                hyphens: auto;

                -webkit-hyphenate-before: 2;
                -webkit-hyphenate-after: 3;
                hyphenate-lines: 3;
            }

            .warning-message {
                color: red;
                padding: 1em;
            }
            .conflicted {
                position: absolute;
                border: 1px solid grey;
                margin-top: -140px;
                background-color: white;
            }
        }

        .config-file {
            padding: 10px 5px 10px 5px;

            input {
                position: absolute;
                top: 0;
                left: 0;
                visibility: hidden;
                z-index: 0;
            }

            .fakebutton {
                .create-border-radius(@border-radius);
                font-family: @font-family-medium;
                border: 1px solid #6B6B6B;
                color: white;
                font-size: 14px;
                font-weight: bold;
                padding: 5px;
                z-index: 2;
                cursor: pointer;
            }
        }

        .ghost {
            .header-slot {
                header {
                    margin-bottom: 0;
                    border-bottom: none;
                }
            }
            .ghost-config-header {
                font-size: 17px;
                height: 35px;
                line-height: 35px;
                padding-left: 35px;
            }
            .ghost-config-content {
                padding: 15px 10px;
                background-color: @inspector-region-background-color;

                input[name=number-units] {
                    display: inline-block;
                    width: 120px;
                    margin-bottom: 0;
                }
                label[for=number-units] {
                    display: inline-block;
                    margin-left: 25px;
                    vertical-align: middle;
                }

                .default-config-toggle {
                    font-size: 12px;

                    span {
                        display: inline-block;
                    }

                    .toggle-switch {
                        height: 20px;
                        width: 40px;
                        background-color: @inspector-background-color;
                        .create-border-radius(@border-radius);
                        display: inline-block;
                    }
                }
            }
        }

        /* Resetting panel styles. Can be removed after old inspector styles are
           removed. */
        .charm-panel-configure {
            background: transparent;
            float: none;
            border: 0;
            height: auto;
            width: auto;
            padding: 0 20px;

            .title {
                font-size: 20px;
                font-weight: 300;
                line-height: 1.2;
                margin: 0;
            }
            .name {
                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
            }
        }

        .control-description,
        .control-label {
            font-size: 14px;
            font-weight: 300;
        }
        .control-label {
            margin-bottom: 10px;
        }
        .charm-panel-configure-buttons {
            background: transparent;
            border-bottom: 1px solid @inspector-divider-bottom;
            float: none;
            height: auto;
            width: auto;
            padding: 0 20px 10px;
        }

        .control-group {
            margin: 0;
            padding: 20px;
            border-bottom: 1px solid @inspector-divider-bottom;
            border-top: 1px solid @inspector-divider-top;

            .well {
                background-color: transparent;
                border: 0;
                margin-bottom: 10px;
                min-height: 20px;
                padding: 0;
            }
        }

        .viewlet-container {
            overflow-y: auto;
            border-top: 1px solid @inspector-divider-top;
            /* overwritten by the recalculateHeight() method in
               viewlet-manager.js. Important to avoid flash of incorrectly
               calculated height */
            max-height: 250px;
        }

        .content {
            margin: 1em;
        }

        .header-slot {
            header {
                background-color: @inspector-region-background-color;
                border-bottom: 1px solid #1C1817;
                padding: 15px;
                margin-bottom: 6px;

                .service-charm {
                    color: @charm-panel-background-color;
                    width: 100%;

                    .service-name {
                        font-size: 20px;
                        font-weight: 300;
                        line-height: 1.2;
                    }
                    input.service-name {
                        width: 150px;
                    }
                    .charm-icon {
                        width: 64px;
                        height: 64px;
                        margin-right: 1em;
                        background: transparent url(/juju-ui/assets/images/charm_64.png) left top no-repeat;
                        img {
                            /* bootstrap sets this to middle */
                            vertical-align: baseline;
                        }
                    }
                    .charm-url {
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 1.3;
                        cursor: pointer;
                        text-decoration: underline;
                    }
                    .close {
                        /* required to overwrite bootstrap styles */
                        text-shadow: none;
                        color: #cbcbcb;
                        font-weight: normal;
                        opacity: 1;
                        font-size: 40px;
                    }
                    div {
                        display: inline-block;
                    }
                }
            }
        }

        .viewlet-manager-navigation {
            background-color: @inspector-region-background-color;
        }

        .view-container {
            border-top: 1px solid @inspector-divider-top;
            overflow: auto;

            &.settings-config {

                .controls {
                    text-align: center;

                    button {
                        .create-border-radius(@border-radius);
                        width: 115px;
                        height: 25px;
                        margin: 10px 0;
                        border: none;
                        color: white;
                        font-weight: bold;

                        &.cancel {
                            background-color: #A3A3A3;
                        }

                        &.confirm {
                            background-color: #DD4814;
                            &:disabled {
                                background-color: #802E0E;
                                color: #eee;
                            }
                        }
                    }
                }
            }

            h2 {
                font-size: 18px;
                padding-left: 0;
            }

            .toggle-settings-help {
                padding: 0 20px 20px;
                cursor: pointer;
            }

            .toggle-expose {
                cursor: pointer;

                img {
                    position: relative;
                    margin-left: 70px;
                }
                .on {
                    font-size: 12px;
                    position: absolute;
                    right: 40px;
                }
                .off {
                    font-size: 12px;
                    color: black;
                    position: absolute;
                    right: 60px;
                }
            }

            .settings-wrapper {
                position: relative;

                label {
                    font-size: 14px;
                    margin: 14px 0 7px 0;
                    font-weight: bold;
                }

                .settings-description {
                    font-style: italic;
                    font-size: 12px;
                    text-align: justify;
                }

                .warning-message {
                    color: red;
                    padding: 1em;
                }
                .conflicted {
                    position: absolute;
                    border: 1px solid grey;
                    margin-top: -140px;
                    background-color: white;
                }
            }

            .control-expose {
                padding: 20px;
            }

        }

        .status {
            display: inline-block;
            width: 33%;
            text-align: center;
            &.running {
                background-color: #00b711;
            }
            &.pending {
                background-color: #ede837;
            }
            &.error {
                background-color: #ba0000;
            }
        }

        .destroy-service-icon {
            cursor: pointer;
            float: right;
            width: 20px;
            height: 24px;
            padding: 0;
            /* Make sure the destroy icon is below the close-the-inspector. */
            clear: both;
            margin-bottom: 1ex;
            background-position: center;
            background-repeat: no-repeat;
            background-image:
                url("/juju-ui/assets/images/inspector-destroy-service.png");
        }

        .destroy-service-prompt {
            overflow: hidden;
            height: 95px;
            background-color: @inspector-region-background-color;
            margin-bottom: 10px;
            -moz-transition: .3s, height .3s;
            -webkit-transition: .25s, height .3s;
            transition: .3s, height .3s;

            /* Make sure the prompt box is below the icon. */
            clear: both;

            .message {
                margin: 5px 15px;
            }

            .buttons {
                a {
                    .create-border-radius(@border-radius);
                    .create-box-shadow(0 2px 2px -2px #777 inset);
                    box-shadow: 0 2px 2px -2px #777777 inset;
                    color: #fff;
                    background: #dd4814;
                    padding: 5px 0;
                    text-decoration: none;
                    text-align: center;
                    margin-top: 10px;
                    width: 110px;
                    float: left;
                    margin-left: 13px;
                }

                a:last-of-type {
                    mergin-right: 0;
                }

                .grey {
                    background: #999;
                }
            }
        }

        .destroy-service-prompt.closed {
            height: 0;
        }

        .viewlet-wrapper{
            h3, h2, legend {
                border-bottom: 1px solid @inspector-divider-bottom;
                border-top: 1px solid @inspector-divider-top;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
                padding: 10px 20px;
                color: @charm-panel-configure-title-color;
                margin-bottom: 0;
                width: auto;
            }

            .content {
                border-bottom: 1px solid @inspector-divider-bottom;
                border-top: 1px solid @inspector-divider-top;
                margin: 0;
                padding: 10px;
            }
        }

        .overview-unit-list {
            margin-left: 0;

            .action-button-wrapper {
                height: 50px;
            }

            .status-unit-header {
                background-color: @inspector-region-background-color;
                padding: 15px 15px 15px 40px;
                font-size: 14px;
                cursor: pointer;
                border-bottom: 1px solid @inspector-divider-bottom;
                border-top: 1px solid @inspector-divider-top;
                background-position: 20px center;
                background-repeat: no-repeat;
                span {
                    margin-right: 5px;
                }

                ul {
                    background: white;
                }

                .chevron {
                    display: inline-block;
                    height: 9px;
                    margin-left: 5px;
                    width: 12px;
                    background: url("/juju-ui/assets/images/chevron_down.png") no-repeat;
                }
            }

            .closed-unit-list .chevron {
                background: url("/juju-ui/assets/images/chevron_up.png") no-repeat;
            }

            .status-unit-header.error {
                background-image: url("/juju-ui/assets/images/inspector-charm-error.png");
            }
            .status-unit-header.running {
                background-image: url("/juju-ui/assets/images/inspector-charm-running.png");
            }
            .status-unit-header.pending {
                background-image: url("/juju-ui/assets/images/inspector-charm-pending.png");
            }

            .status-unit-content {
                -moz-transition: .3s, max-height .3s;
                -webkit-transition: .25s, max-height .3s;
                transition: .3s, max-height .3s;
                overflow: hidden;
                background: @charm-panel-background-color;
                /*
                 * The height of each list is 35px so setting this to help the auto max height script.
                 */
                font-size: 35px;
                /* max height is being set inline in views/service.js.
                It is calculated on the number of units in the list.  */

                &.close-unit {
                    max-height: 0px !important;
                }

                a {
                    cursor: pointer;
                    color: @text-colour;
                    text-decoration: underline;
                }

                ul {
                    margin-left: 0;
                    border-bottom: 1px solid @charm-panel-border-color;
                }

                li {
                    list-style-type: none;
                    padding: 7px 0 7px 10px;
                    border-top: 1px solid @inspector-status-border-color;
                    font-size: 13px;
                }

                input[type="checkbox"] {
                    margin-right: 30px;
                }

                button.unit-action-button,
                input[type="checkbox"] {
                    .create-border-radius(@border-radius);
                    .create-box-shadow(0 2px 2px -2px #777 inset);
                    background: @charm-panel-series-color;
                }

                button.unit-action-button {
                    border: 0;
                    padding: 5px;
                    width: 70px;
                    text-align: center;
                    margin: 20px 3px 0;
                }
                button.resolve {
                    margin-left: 25px;
                }
            }

            .status-unit-content.running ul li {
                background: url("/juju-ui/assets/images/inspector-charm-running.png") no-repeat scroll 35px center;
            }
            .status-unit-content.pending ul li {
                background: url("/juju-ui/assets/images/inspector-charm-pending-list.png") no-repeat scroll 35px center;
            }
            .status-unit-content.error ul li {
                background: url("/juju-ui/assets/images/inspector-charm-error.png") no-repeat scroll 35px center;
            }
        }

    }

}

@inspector-background-color: #221e1c;
@inspector-region-background-color: #282828;
@inspector-divider-bottom: rgba(0, 0, 0, 0.3);
@inspector-divider-top: rgba(255, 255, 255, 0.05);
@inspector-status-border-color: #E2E2E2;
@inspector-subtitle-color: #555555;

.yui3-juju-inspector {
    .customize-scrollbar;

    .left-breakout {
        position: absolute;
        top: 20px;
        overflow-y: auto;
        overflow-x: hidden;
        right: 327px;
        width: 500px;
        color: rgb(80, 80, 80);
        background-color: rgb(255, 255, 255);

        &.with-charm {
            width: 750px;
        }

        .close-slot {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
            font-weight: bold;
            line-height: 18px;
            cursor: pointer;
            color: @inspector-background-color;
            z-index: 10;
        }
    }

    .juju-inspector {
        .create-border-radius(@border-radius);
        position: absolute;
        top: 20px;
        right: 35px;
        width: 292px;
        min-height: 250px;
        border: 0;
        background-color: @inspector-background-color;
        color: #fff;
        /* Can be removed once the old inspector styles are removed. */
        margin: 0;

        h1, h2, h3, h4, h5, h6 {
            background-color: @inspector-region-background-color;
            padding-left: 1em;
        }
        .settings-wrapper {
            position: relative;
            width: 268px;

            label {
                font-size: 14px;
                margin: 14px 0 7px 0;
                font-weight: bold;
            }

            textarea {
                width: 260px;
            }

            .settings-description {
                font-style: italic;
                font-size: 12px;

                /* below hyphenation code was taken from:
                http://www.newnet-soft.com/blog/csstypography */
                -ms-word-break: break-all;
                word-break: break-all;

                // Non standard for webkit
                word-break: break-word;

                -webkit-hyphens: auto;
                -moz-hyphens: auto;
                hyphens: auto;

                -webkit-hyphenate-before: 2;
                -webkit-hyphenate-after: 3;
                hyphenate-lines: 3;
            }

            .warning-message {
                color: red;
                padding: 1em;
            }
            .conflicted {
                position: absolute;
                border: 1px solid grey;
                margin-top: -140px;
                background-color: white;
            }
        }

        .config-file {
            padding: 10px 5px 10px 5px;

            input {
                position: absolute;
                top: 0;
                left: 0;
                visibility: hidden;
                z-index: 0;
            }

            .fakebutton {
                .create-border-radius(@border-radius);
                font-family: @font-family-medium;
                border: 1px solid #6B6B6B;
                color: white;
                font-size: 14px;
                font-weight: bold;
                padding: 5px;
                z-index: 2;
                cursor: pointer;
            }
        }

        .ghost {
            .header-slot {
                header {
                    margin-bottom: 0;
                    border-bottom: none;
                }
            }
            .ghost-config-header {
                font-size: 17px;
                height: 35px;
                line-height: 35px;
                padding-left: 35px;
            }
            .ghost-config-content {
                padding: 15px 10px;
                background-color: @inspector-region-background-color;

                input[name=number-units] {
                    display: inline-block;
                    width: 120px;
                    margin-bottom: 0;
                }
                label[for=number-units] {
                    display: inline-block;
                    margin-left: 25px;
                    vertical-align: middle;
                }

                .default-config-toggle {
                    font-size: 12px;

                    span {
                        display: inline-block;
                    }

                    .toggle-switch {
                        height: 20px;
                        width: 40px;
                        background-color: @inspector-background-color;
                        .create-border-radius(@border-radius);
                        display: inline-block;
                    }
                }
            }
        }

        /* Resetting panel styles. Can be removed after old inspector styles are
           removed. */
        .charm-panel-configure {
            background: transparent;
            float: none;
            border: 0;
            height: auto;
            width: auto;
            padding: 0 20px;

            .title {
                font-size: 20px;
                font-weight: 300;
                line-height: 1.2;
                margin: 0;
            }
            .name {
                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
            }
        }

        .control-description,
        .control-label {
            font-size: 14px;
            font-weight: 300;
        }
        .control-label {
            margin-bottom: 10px;
        }
        .charm-panel-configure-buttons {
            background: transparent;
            border-bottom: 1px solid @inspector-divider-bottom;
            float: none;
            height: auto;
            width: auto;
            padding: 0 20px 10px;
        }

        .control-group {
            margin: 0;
            padding: 20px;
            border-bottom: 1px solid @inspector-divider-bottom;
            border-top: 1px solid @inspector-divider-top;

            .well {
                background-color: transparent;
                border: 0;
                margin-bottom: 10px;
                min-height: 20px;
                padding: 0;
            }
        }

        .viewlet-container {
            overflow-y: auto;
            border-top: 1px solid @inspector-divider-top;
            /* overwritten by the recalculateHeight() method in
               viewlet-manager.js. Important to avoid flash of incorrectly
               calculated height */
            max-height: 250px;
        }

        .content {
            margin: 1em;
        }

        .header-slot {
            header {
                background-color: @inspector-region-background-color;
                border-bottom: 1px solid #1C1817;
                padding: 15px;
                margin-bottom: 6px;

                .service-charm {
                    color: @charm-panel-background-color;
                    width: 100%;

                    .service-name {
                        font-size: 20px;
                        font-weight: 300;
                        line-height: 1.2;
                    }
                    input.service-name {
                        width: 150px;
                    }
                    .charm-icon {
                        width: 64px;
                        height: 64px;
                        margin-right: 1em;
                        background: transparent url(/juju-ui/assets/images/charm_64.png) left top no-repeat;
                        img {
                            /* bootstrap sets this to middle */
                            vertical-align: baseline;
                        }
                    }
                    .charm-url {
                        font-size: 14px;
                        font-weight: 400;
                        line-height: 1.3;
                        cursor: pointer;
                        text-decoration: underline;
                    }
                    .close {
                        /* required to overwrite bootstrap styles */
                        text-shadow: none;
                        color: #cbcbcb;
                        font-weight: normal;
                        opacity: 1;
                    }
                    div {
                        display: inline-block;
                    }
                }
            }
        }

        .viewlet-manager-navigation {
            background-color: @inspector-region-background-color;
        }

        .view-container {
            border-top: 1px solid @inspector-divider-top;
            overflow: auto;

            &.settings-config {

                .controls {
                    text-align: center;

                    button {
                        .create-border-radius(@border-radius);
                        width: 115px;
                        height: 25px;
                        margin: 10px 0;
                        border: none;
                        color: white;
                        font-weight: bold;

                        &.cancel {
                            background-color: #A3A3A3;
                        }

                        &.confirm {
                            background-color: #DD4814;
                            &:disabled {
                                background-color: #802E0E;
                                color: #eee;
                            }
                        }
                    }
                }
            }

            h2 {
                font-size: 18px;
                padding-left: 0;
            }

            .toggle-settings-help {
                padding: 0 20px 20px;
                cursor: pointer;
            }

            .toggle-expose {
                cursor: pointer;

                img {
                    position: relative;
                    margin-left: 70px;
                }
                .on {
                    font-size: 12px;
                    position: absolute;
                    right: 40px;
                }
                .off {
                    font-size: 12px;
                    color: black;
                    position: absolute;
                    right: 60px;
                }
            }

            .settings-wrapper {
                position: relative;

                label {
                    font-size: 14px;
                    margin: 14px 0 7px 0;
                    font-weight: bold;
                }

                .settings-description {
                    font-style: italic;
                    font-size: 12px;
                    text-align: justify;
                }

                .warning-message {
                    color: red;
                    padding: 1em;
                }
                .conflicted {
                    position: absolute;
                    border: 1px solid grey;
                    margin-top: -140px;
                    background-color: white;
                }
            }

            .control-expose {
                padding: 20px;
            }

        }

        .status {
            display: inline-block;
            width: 33%;
            text-align: center;
            &.running {
                background-color: #00b711;
            }
            &.pending {
                background-color: #ede837;
            }
            &.error {
                background-color: #ba0000;
            }
        }

        .destroy-service-icon {
            cursor: pointer;
            float: right;
            width: 20px;
            height: 24px;
            padding: 0;
            /* Make sure the destroy icon is below the close-the-inspector. */
            clear: both;
            margin-bottom: 1ex;
            background-position: center;
            background-repeat: no-repeat;
            background-image:
                url("/juju-ui/assets/images/inspector-destroy-service.png");
        }

        .destroy-service-prompt {
            overflow: hidden;
            height: 95px;
            background-color: @inspector-region-background-color;
            margin-bottom: 10px;
            -moz-transition: .3s, height .3s;
            -webkit-transition: .25s, height .3s;
            transition: .3s, height .3s;

            /* Make sure the prompt box is below the icon. */
            clear: both;

            .message {
                margin: 5px 15px;
            }

            .buttons {
                a {
                    .create-border-radius(@border-radius);
                    .create-box-shadow(0 2px 2px -2px #777 inset);
                    box-shadow: 0 2px 2px -2px #777777 inset;
                    color: #fff;
                    background: #dd4814;
                    padding: 5px 0;
                    text-decoration: none;
                    text-align: center;
                    margin-top: 10px;
                    width: 110px;
                    float: left;
                    margin-left: 13px;
                }

                a:last-of-type {
                    mergin-right: 0;
                }

                .grey {
                    background: #999;
                }
            }
        }

        .destroy-service-prompt.closed {
            height: 0;
        }

        .viewlet-wrapper{
            h3, h2, legend {
                border-bottom: 1px solid @inspector-divider-bottom;
                border-top: 1px solid @inspector-divider-top;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.5;
                padding: 10px 20px;
                color: @charm-panel-configure-title-color;
                margin-bottom: 0;
                width: auto;
            }

            .content {
                border-bottom: 1px solid @inspector-divider-bottom;
                border-top: 1px solid @inspector-divider-top;
                margin: 0;
                padding: 10px;
            }
        }

        .overview-unit-list {
            margin-left: 0;

            .action-button-wrapper {
                height: 50px;
            }

            .status-unit-header {
                background-color: @inspector-region-background-color;
                padding: 15px 15px 15px 40px;
                font-size: 14px;
                cursor: pointer;
                border-bottom: 1px solid @inspector-divider-bottom;
                border-top: 1px solid @inspector-divider-top;
                background-position: 20px center;
                background-repeat: no-repeat;
                span {
                    margin-right: 5px;
                }

                ul {
                    background: white;
                }

                .chevron {
                    display: inline-block;
                    height: 9px;
                    margin-left: 5px;
                    width: 12px;
                    background: url("/juju-ui/assets/images/chevron_down.png") no-repeat;
                }
            }

            .closed-unit-list .chevron {
                background: url("/juju-ui/assets/images/chevron_up.png") no-repeat;
            }

            .status-unit-header.error {
                background-image: url("/juju-ui/assets/images/inspector-charm-error.png");
            }
            .status-unit-header.running {
                background-image: url("/juju-ui/assets/images/inspector-charm-running.png");
            }
            .status-unit-header.pending {
                background-image: url("/juju-ui/assets/images/inspector-charm-pending.png");
            }

            .status-unit-content {
                -moz-transition: .3s, max-height .3s;
                -webkit-transition: .25s, max-height .3s;
                transition: .3s, max-height .3s;
                overflow: hidden;
                background: @charm-panel-background-color;
                /*
                 * The height of each list is 35px so setting this to help the auto max height script.
                 */
                font-size: 35px;
                /* max height is being set inline in views/service.js.
                It is calculated on the number of units in the list.  */

                &.close-unit {
                    max-height: 0px !important;
                }

                a {
                    cursor: pointer;
                    color: @text-colour;
                    text-decoration: underline;
                }

                ul {
                    margin-left: 0;
                    border-bottom: 1px solid @charm-panel-border-color;
                }

                li {
                    list-style-type: none;
                    padding: 7px 0 7px 10px;
                    border-top: 1px solid @inspector-status-border-color;
                    font-size: 13px;
                }

                input[type="checkbox"] {
                    margin-right: 30px;
                }

                button.unit-action-button,
                input[type="checkbox"] {
                    .create-border-radius(@border-radius);
                    .create-box-shadow(0 2px 2px -2px #777 inset);
                    background: @charm-panel-series-color;
                }

                button.unit-action-button {
                    border: 0;
                    padding: 5px;
                    width: 70px;
                    text-align: center;
                    margin: 20px 3px 0;
                }
                button.resolve {
                    margin-left: 25px;
                }
            }

            .status-unit-content.running ul li {
                background: url("/juju-ui/assets/images/inspector-charm-running.png") no-repeat scroll 35px center;
            }
            .status-unit-content.pending ul li {
                background: url("/juju-ui/assets/images/inspector-charm-pending-list.png") no-repeat scroll 35px center;
            }
            .status-unit-content.error ul li {
                background: url("/juju-ui/assets/images/inspector-charm-error.png") no-repeat scroll 35px center;
            }
        }

    }

}


Geo object editor styles

Geo object editor styles

error: pathspec 'src/styles/GeoObjectEditor.less' did not match any file(s) known to git


CAL-135 add a new mixin for flex-flow

CAL-135 add a new mixin for flex-flow

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/heroandtn3/openpaas-esn.git/'


Remove font smoothing

Remove font smoothing

fatal: unable to access 'https://github.com/inflex-io/inflex.git/': The requested URL returned error: 403


Fix toggle name

Fix toggle name

/* === Accordion === */
.list-block {
    .accordion-item-toggle {
        cursor: pointer;
        .transition(300ms);
        .item-inner {
            padding-right: 35px;
            background: no-repeat -webkit-calc(~"100% - 15px") center;
            background: no-repeat calc(~"100% - 15px") center;
            background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' fill='%23c7c7cc'/></svg>");
            background-size: 10px 20px;

        }
        html:not(.watch-active-state) &:active, &.active-state {
            .transition(0ms);
            background-color: #d9d9d9;
            > .item-inner {
                border-bottom-color: transparent;

            }
        }
    }
    .accordion-item-toggle, .accordion-item > .item-link {
        .item-inner {
            .transition(300ms);
            -webkit-transition-property: background-color, border-color;
            transition-property: background-color, border-color;
        }
    }
    .accordion-item-expanded {
        .accordion-item-toggle .item-inner, > .item-link .item-inner {
            background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' transform='translate(115, 30) rotate(90)' fill='%23c7c7cc'/></svg>");
            background-size: 20px 20px;
            border-bottom-color: transparent;
        }
    }
    .accordion-item {
        .content-block, .list-block {
            margin-top: 0;
            margin-bottom: 0;
        }
        ul {
            padding-left: 0;
        }
    }
}
.accordion-item-content {
    position: relative;
    overflow: hidden;
    height: 0;
    font-size: 14px;
    .transition(300ms);
    .transform(translate3d(0,0,0));
    .accordion-item-expanded & {
        height: auto;
    }
}

/* === Accordion === */
.list-block {
    .accordion-item-toggle {
        cursor: pointer;
        .transition(300ms);
        .item-inner {
            padding-right: 35px;
            background: no-repeat -webkit-calc(~"100% - 15px") center;
            background: no-repeat calc(~"100% - 15px") center;
            background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' fill='%23c7c7cc'/></svg>");
            background-size: 10px 20px;

        }
        html:not(.watch-active-state) &:active, &.active-state {
            .transition(0ms);
            background-color: #d9d9d9;
            > .item-inner {
                border-bottom-color: transparent;

            }
        }
    }
    .accordion-item-toggle, .accordion-item > .item-link {
        .item-inner {
            .transition(300ms);
            -webkit-transition-property: background-color, border-color;
            transition-property: background-color, border-color;
        }
    }
    .accordion-item-expanded {
        .accordion-toggle .item-inner, > .item-link .item-inner {
            background-image: url("data:image/svg+xml;charset=utf-8,<svg viewBox='0 0 60 120' xmlns='http://www.w3.org/2000/svg'><path d='m60 61.5-38.25 38.25-9.75-9.75 29.25-28.5-29.25-28.5 9.75-9.75z' transform='translate(115, 30) rotate(90)' fill='%23c7c7cc'/></svg>");
            background-size: 20px 20px;
            border-bottom-color: transparent;
        }
    }
    .accordion-item {
        .content-block, .list-block {
            margin-top: 0;
            margin-bottom: 0;
        }
        ul {
            padding-left: 0;
        }
    }
}
.accordion-item-content {
    position: relative;
    overflow: hidden;
    height: 0;
    font-size: 14px;
    .transition(300ms);
    .transform(translate3d(0,0,0));
    .accordion-item-expanded & {
        height: auto;
    }
}


article margins

article margins

@import "../../defaults/common.less";

.blog-entry-title {
  font-size: 2em;
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin-bottom: 35px;
}

.blog-entry-title h1 {
  display: block;
}

.blog-entry-title a:hover {
  text-decoration: none;
}

.blog-entry-date {
  float: right;
  font-size: 10px;
  color: @red_shadow;
}

.blog-entry-brief {
  margin-bottom: 45px;
}

.blog-entry-brief h1,
.blog-entry-text h1,
.blog-entry h2,
.blog-entry h3,
.blog-entry h4 {
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 25px;
  font-weight: bold;
  color: @strong;
}

.blog-entry pre {
  padding: 12px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.blog-entry pre code {
  display: block;
}

.blog-entry p {
  line-height: 1.3em;
  margin-bottom: 15px;
}

.blog-entry ul {
  margin: 20px 0;
}

.blog-entry ul li {
  line-height: 1.6em;
  list-style-position:inside;
  list-style-type: disc;
  list-style-type: hiragana-iroha;
}

.blog-entry ul li:before {
  content: '';
  padding-right: 3px;
}

.blog-entry blockquote {
  .box-radius(8px);

  padding: 12px;
  margin: 25px 0 15px 0;
  background-color: @light;

  border: 1px solid @grayish;
  border-top: 2px solid @light;
  border-left: 2px solid @light;

  min-height: 24px;

  .box-gradient(@light, @moderate);
}

.blog-entry blockquote:before {
  content: '{ }';
  color: @strong + #777;
  text-shadow: 0 1px @strong;
  font-size: 30px;
  font-weight: bold;

  float: left;

  position: relative;
  top: -8px;
  left: 0;
  margin-bottom: 12px;
  margin-right: 12px;
}

.blog-entry section a {
  color: @pink;
  font-weight: bold;
}

.blog-entries .blog-entry:first-child {
  margin-top: inherit;
}

.blog-entries .blog-entry {
  margin-top: 65px;
  padding-bottom: 20px;
  border-bottom: 3px double @strong;
  border-bottom-right-radius: 12px;
}

.blog-entries .blog-entry:last-child {
   border-bottom: none;
   padding-bottom: 0;
 }

@import "../../defaults/common.less";

.blog-entry-title {
  font-size: 2em;
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin-bottom: 35px;
}

.blog-entry-title h1 {
  display: block;
}

.blog-entry-title a:hover {
  text-decoration: none;
}

.blog-entry-date {
  float: right;
  font-size: 10px;
  color: @red_shadow;
}

.blog-entry-brief {
  margin-bottom: 45px;
}

.blog-entry-brief h1,
.blog-entry-text h1,
.blog-entry h2,
.blog-entry h3,
.blog-entry h4 {
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 25px;
  font-weight: bold;
  color: @strong;
}

.blog-entry pre {
  padding: 12px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.blog-entry pre code {
  display: block;
}

.blog-entry p {
  line-height: 1.3em;
  margin-bottom: 15px;
}

.blog-entry ul {
  margin: 20px 0;
}

.blog-entry ul li {
  line-height: 1.6em;
  list-style-position:inside;
  list-style-type: disc;
  list-style-type: hiragana-iroha;
}

.blog-entry ul li:before {
  content: '';
  padding-right: 3px;
}

.blog-entry blockquote {
  .box-radius(8px);

  padding: 12px;
  margin: 25px 0 15px 0;
  background-color: @light;

  border: 1px solid @grayish;
  border-top: 2px solid @light;
  border-left: 2px solid @light;

  min-height: 24px;

  .box-gradient(@light, @moderate);
}

.blog-entry blockquote:before {
  content: '{ }';
  color: @strong + #777;
  text-shadow: 0 1px @strong;
  font-size: 30px;
  font-weight: bold;

  float: left;

  position: relative;
  top: -8px;
  left: 0;
  margin-bottom: 12px;
  margin-right: 12px;
}

.blog-entry section a {
  color: @pink;
  font-weight: bold;
}

.blog-entries .blog-entry:first-child {
  margin-top: inherit;
}

.blog-entries .blog-entry {
  margin-top: 40px;
  padding-bottom: 20px;
  border-bottom: 3px double @strong;
}


fix indentation

fix indentation

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/hevnly/asset-bazaar.git/'


[修复分享显示哆嗦数量]

[修复分享显示哆嗦数量]

(cherry picked from commit fc5448b)

fatal: unable to access 'https://github.com/psychokiller666/heishi.git/': The requested URL returned error: 403


set line height on bool-FormField to set it middle

error: pathspec 'layout/default/FormField/Boolean/default.less' did not match any file(s) known to git


mixins.less - updated .column-properties; removed word-wrap in favor of word-break and removed position.  Removed commented out code. grid.less - removed commented out code.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/alzuniga/flexil-grid.git/'


Small refactor to use a var and also add a semicolon where needed

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Thinkful/ui.git/'


added base rules for profiler

added base rules for profiler

ul.profiler {
	position: relative;
	width: 100%;
	padding: 0px;
	margin: 0px 0px 20px;
	list-style-type: none;

	> li {
		border: 1px solid @google-orange-shade;
		box-shadow: 0px 0px 5px rgb(51, 51, 51);
		box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
	}
}

error: pathspec 'less/profiler-base.less' did not match any file(s) known to git


site: update page background

site: update page background

fatal: unable to access 'https://github.com/zheeeng/ant-design.git/': The requested URL returned error: 403


Add panel.less

Add panel.less

.panel-transparent {
    .border-transparent;
    box-shadow: none;
    .panel-heading {
        .panel-transarent-no-l-r-padding;
        border-width: 2px;
        padding-top: 0;
        padding-bottom: @grid-gutter-width/3;
        background: transparent;
    }
    .panel-body {
        padding: 0; // text-align: right;
    }
    .panel-value-xs {
        display: inline-block;
        vertical-align: bottom;
        margin: @grid-gutter-width/6 0;
    }
}

.panel-title {
    font-size: @font-size-h4;
    color: @keitaro-green-gray-d-10;
}

.panel-title-icon {
    max-width: 2vw;
    margin-right: @grid-gutter-width/6;
}

.panel-transarent-no-l-r-padding {
    padding-left: 0;
    padding-right: 0;
}

.main-panel-title {
    margin-bottom: @grid-gutter-width/2;
}

.panel-value-lg {
    font-size: @font-size-h3;
}

.panel-value-xl {
    font-size: @font-size-h2;
}

.panel-value-xs {
    .text-uppercase;
    font-size: @font-size-small;
}

.panel-value-important {
    font-weight: 500;
    color: @keitaro-green-dark;
}

error: pathspec 'assets/less/panel.less' did not match any file(s) known to git


Fix header bar color

Fix header bar color


add ownprofile.import.less style file

add ownprofile.import.less style file

fatal: unable to access 'https://github.com/Openki/Openki.git/': The requested URL returned error: 403


Quicker panel transition

Quicker panel transition

/* === Panels === */
@panelWidth:260px;
@panelsDuration: 300ms;
.panel-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    opacity: 0;
    z-index: 5999;
    display: none;
    .transform(translate3d(0,0,0));
    .transition(@panelsDuration);
}
.panel {
    z-index: 1000;
    display: none;
    background: #fff;
    box-sizing: border-box;
    .scrollable();
    position: absolute;
    width: @panelWidth;
    top: 0;
    height: 100%;
    .translate3d(0);
    .transition(@panelsDuration);

    &.panel-left {

        &.panel-cover {
            z-index: 6000;
            left: -@panelWidth;
        }
        &.panel-reveal {
            left: 0;
        }
    }
    &.panel-right {
        &.panel-cover {
            z-index: 6000;
            right: -@panelWidth;
        }
        &.panel-reveal {
            right: 0;
        }
    }
}
body.with-panel-left-cover, body.with-panel-right-cover {
    .panel {
        box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
    }
    .views {
        .translate3d(0);
    }
    .panel-overlay {
        display: block;
        opacity: 1;
    }
}
body.with-panel-left-reveal, body.with-panel-right-reveal {
    .views {
        box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
        .transition(@panelsDuration);
        -webkit-transition-property: -webkit-transform, box-shadow;
        -moz-transition-property: -moz-transform, box-shadow;
        transition-property: transform, box-shadow;
    }
    .panel-overlay {
        background: rgba(0,0,0,0);
        display: block;
        opacity: 0;
    }
}
body.with-panel-left-reveal {
    .views {
        .translate3d(@panelWidth);
    }
    .panel-overlay {
        .translate3d(@panelWidth);
    }
}
body.with-panel-left-cover {
    .panel-left {
        .translate3d(@panelWidth);
    }
}
body.with-panel-right-reveal {
    .views {
        .translate3d(-@panelWidth);
    }
    .panel-overlay {
        .translate3d(-@panelWidth);
    }
}
body.with-panel-right-cover {
    .panel-right {
        .translate3d(-@panelWidth);
    }
}
body.panel-closing {
    .panel-overlay {
        display: block;
    }
    .views {
        .transition(@panelsDuration);
        -webkit-transition-property: -webkit-transform, box-shadow;
        -moz-transition-property: -moz-transform, box-shadow;
        transition-property: transform, box-shadow;
    }
}

/* === Panels === */
@panelWidth:260px;
@panelsDuration: 400ms;
.panel-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    opacity: 0;
    z-index: 5999;
    display: none;
    .transform(translate3d(0,0,0));
    .transition(@panelsDuration);
}
.panel {
    z-index: 1000;
    display: none;
    background: #fff;
    box-sizing: border-box;
    .scrollable();
    position: absolute;
    width: @panelWidth;
    top: 0;
    height: 100%;
    .translate3d(0);
    .transition(@panelsDuration);

    &.panel-left {

        &.panel-cover {
            z-index: 6000;
            left: -@panelWidth;
        }
        &.panel-reveal {
            left: 0;
        }
    }
    &.panel-right {
        &.panel-cover {
            z-index: 6000;
            right: -@panelWidth;
        }
        &.panel-reveal {
            right: 0;
        }
    }
}
body.with-panel-left-cover, body.with-panel-right-cover {
    .panel {
        box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
    }
    .views {
        .translate3d(0);
    }
    .panel-overlay {
        display: block;
        opacity: 1;
    }
}
body.with-panel-left-reveal, body.with-panel-right-reveal {
    .views {
        box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
        .transition(@panelsDuration);
        -webkit-transition-property: -webkit-transform, box-shadow;
        -moz-transition-property: -moz-transform, box-shadow;
        transition-property: transform, box-shadow;
    }
    .panel-overlay {
        background: rgba(0,0,0,0);
        display: block;
        opacity: 0;
    }
}
body.with-panel-left-reveal {
    .views {
        .translate3d(@panelWidth);
    }
    .panel-overlay {
        .translate3d(@panelWidth);
    }
}
body.with-panel-left-cover {
    .panel-left {
        .translate3d(@panelWidth);
    }
}
body.with-panel-right-reveal {
    .views {
        .translate3d(-@panelWidth);
    }
    .panel-overlay {
        .translate3d(-@panelWidth);
    }
}
body.with-panel-right-cover {
    .panel-right {
        .translate3d(-@panelWidth);
    }
}
body.panel-closing {
    .panel-overlay {
        display: block;
    }
    .views {
        .transition(@panelsDuration);
        -webkit-transition-property: -webkit-transform, box-shadow;
        -moz-transition-property: -moz-transform, box-shadow;
        transition-property: transform, box-shadow;
    }
}


update in 8.28

update in 8.28

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/earthaYan/lagou.git/'


fix full screen background color in firefox

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/bmesuere/uni-test.git/'


fixed width variables

fixed width variables

fatal: unable to access 'https://github.com/aoimedia/uikit.git/': The requested URL returned error: 403


MessageConfirm.js 添加 .btn.btn-primary 样式

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/yyssc/ssc30-admin.git/'


Oops. Removed debug (red) color

Oops. Removed debug (red) color

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/ttrobisch/insomnia.git/'


Release build decoration - custom CSS

Release build decoration - custom CSS

fatal: unable to access 'https://github.com/nemerosa/ontrack.git/': The requested URL returned error: 403


added basic styles for the sidebar list

added basic styles for the sidebar list

fatal: unable to access 'https://github.com/alextegelid/twominds-wp-base-theme.git/': The requested URL returned error: 403


fixed alignment of search input

fixed alignment of search input

@import (reference) "./variables.less";

.topnav-layout {
  .left {
    position: absolute;
    width: @left-width;
    margin-left: 16px;

    @media @small {
      margin-left: 0;
    }
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: @right-width;
    margin-right: 16px;

    @media @small {
      margin-right: 0;
    }
  }

  .center {
    display: none;
    width: 100%;

    @media @small {
      display: block;
      width: calc(100% ~"-" (@right-width + 2 * @margin));
      margin-right: @right-width + @margin;
    }

    @media @medium {
      width: calc(100% ~"-" (@left-width + @right-width + 2 * @margin));
      margin-left: @left-width + @margin;
    }
  }
}

@import (reference) "./variables.less";

.topnav-layout {
  .left {
    position: absolute;
    width: @left-width;
    margin-left: 16px;

    @media @small {
      margin-left: 0;
    }
  }

  .right {
    position: absolute;
    top: 0;
    right: 0;
    width: @right-width;
    margin-right: 16px;

    @media @small {
      margin-right: 0;
    }
  }

  .center {
    display: none;
    width: 100%;

    @media @small {
      display: block;
      width: calc(100% ~"-" (@right-width + @margin));
      margin-right: @right-width + @margin;
    }

    @media @medium {
      width: calc(100% ~"-" (@left-width + @right-width + 2 * @margin));
      margin-left: @left-width + @margin;
    }
  }
}