BTS 새로운 변수 스킨에 추가

BTS 새로운 변수 스킨에 추가

//
// Variables
// --------------------------------------------------

// Global values
// --------------------------------------------------
@text-color-inverse: #FFF;

// Grays
// -------------------------

@gray-darker:            lighten(#000, 13.5%); // #222
@gray-dark:              lighten(#000, 20%);   // #333
@gray:                   lighten(#000, 33.5%); // #555
@gray-light:             lighten(#000, 60%);   // #999
@gray-lighter:           lighten(#000, 93.5%); // #eee

// Brand colors
// -------------------------

@brand-primary:         @navbarBackground;
@brand-success:         #5cb85c;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;
@brand-info:            #5bc0de;

// Scaffolding
// -------------------------

@body-bg:               @white;
@text-color:            @gray-dark;

// Links
// -------------------------

@link-color:            @brand-primary;
@link-hover-color:      darken(@link-color, 15%);

// Typography
// -------------------------

@font-family-sans-serif:  "NanumGothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil(@font-size-base * 1.25); // ~18px
@font-size-small:         ceil(@font-size-base * 0.85); // ~12px
@font-size-mini:          ceil(@font-size-base * 0.75); // ~11px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor(@font-size-base * @line-height-base); // ~20px

@headings-font-family:    @font-family-base;
@headings-font-weight:    500;
@headings-line-height:    1.1;

// Components
// -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start)

@padding-base-vertical:          8px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         14px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-bg:            @brand-primary;

// Tables
// -------------------------

@table-cell-padding:                 8px;
@table-condensed-cell-padding:       5px;

@table-bg:                           transparent; // overall background-color
@table-bg-accent:                    #f9f9f9; // for striping
@table-bg-hover:                     #f5f5f5;
@table-bg-active:                    @table-bg-hover;

@table-border-color:                 #ddd; // table and cell border

// Buttons
// -------------------------

@btn-default-color:              @text-color;
@btn-default-bg:                 @btnBackground;
@btn-default-border:             @btnBackgroundHighlight;

@btn-primary-color:              lighten(@btnPrimaryBackground, 50%);
@btn-primary-bg:                 @btnPrimaryBackground;
@btn-primary-border:             @btn-primary-bg;

@btn-success-color:              lighten(@btnSuccessBackground, 50%);
@btn-success-bg:                 @btnSuccessBackground;
@btn-success-border:             @btn-success-bg;

@btn-warning-color:              lighten(@link-color, 50%);
@btn-warning-bg:                 @brand-warning;
@btn-warning-border:             @btn-warning-bg;

@btn-danger-color:               lighten(@btnDangerBackground, 50%);
@btn-danger-bg:                  @btnDangerBackground;
@btn-danger-border:              @btn-danger-bg;

@btn-info-color:                 lighten(@btnInfoBackground, 50%);
@btn-info-bg:                    @btnInfoBackground;
@btn-info-border:                @btn-info-bg;

@btn-hover-color:                @btn-default-color;

// Forms
// -------------------------

@input-bg:                       #fff;
@input-bg-disabled:              @gray-lighter;

@input-border:                   #ccc;
@input-border-radius:            @border-radius-base;

@input-color-placeholder:        @gray-light;

@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2));
@input-height-large:             (@line-height-computed + (@padding-large-vertical * 2));
@input-height-small:             (@line-height-computed + (@padding-small-vertical * 2));

@legend-border-color:            #e5e5e5;

@input-group-addon-border-color: @input-border;

// Dropdowns
// -------------------------

@dropdown-bg:                    #fff;
@dropdown-border:                rgba(0,0,0,.15);
@dropdown-fallback-border:       #ccc;
@dropdown-divider-bg:            #e5e5e5;

@dropdown-link-active-color:     #fff;
@dropdown-link-active-bg:        @component-active-bg;

@dropdown-link-color:            @gray-dark;
@dropdown-link-hover-color:      #fff;
@dropdown-link-hover-bg:         @dropdown-link-active-bg;

@dropdown-caret-color:           #000;

// COMPONENT VARIABLES
// --------------------------------------------------

// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)

@zindex-dropdown:          1000;
@zindex-popover:           1010;
@zindex-tooltip:           1030;
@zindex-navbar-fixed:      1030;
@zindex-modal-background:  1040;
@zindex-modal:             1050;

// Glyphicons font path
// -------------------------
@glyphicons-font-path:          "./fonts";

// Navbar
// -------------------------

// Basics of a navbar
@navbar-height:                    50px;
@navbar-color:                     #777;
@navbar-bg:                        @brand-primary;
@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);  // ~15px
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);

// Navbar links
@navbar-link-color:                @navbarLinkColor;
@navbar-link-hover-color:          @navbarLinkColorHover;
@navbar-link-hover-bg:             @navbarLinkBackgroundHover;
@navbar-link-active-color:         @navbarLinkColorActive;
@navbar-link-active-bg:            @navbarLinkBackgroundActive;
@navbar-link-disabled-color:       #ccc;
@navbar-link-disabled-bg:          transparent;

// Navbar brand label
@navbar-brand-color:               @navbarBrandColor;
@navbar-brand-hover-color:         darken(@navbar-brand-color, 10%);
@navbar-brand-hover-bg:            transparent;

// Inverted navbar
@navbar-inverse-color:                      @navbarLinkColor;
@navbar-inverse-bg:                         @navbarInverseBackground;

// Inverted navbar links
@navbar-inverse-link-color:                 @navbarInverseLinkColor;
@navbar-inverse-link-hover-color:           @navbarInverseLinkColorHover;
@navbar-inverse-link-hover-bg:              darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-active-color:          @navbarInverseLinkColorActive;
@navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-disabled-color:        #444;
@navbar-inverse-link-disabled-bg:           transparent;

// Inverted navbar brand label
@navbar-inverse-brand-color:                @navbarInverseBrandColor;
@navbar-inverse-brand-hover-color:          darken(@navbar-inverse-brand-color, 10%);;
@navbar-inverse-brand-hover-bg:             transparent;

// Inverted navbar search
// Normal navbar needs no special styles or vars
@navbar-inverse-search-bg:                  lighten(@navbar-inverse-bg, 25%);
@navbar-inverse-search-bg-focus:            #fff;
@navbar-inverse-search-border:              @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color:   #ccc;

// Pagination
// -------------------------

@pagination-bg:                        #fff;
@pagination-border:                    #ddd;
@pagination-active-bg:                 #f5f5f5;

// Jumbotron
// -------------------------

@jumbotron-bg:                   @gray-lighter;
@jumbotron-heading-color:        inherit;
@jumbotron-lead-color:           inherit;

// Form states and alerts
// -------------------------

@state-warning-text:             #c09853;
@state-warning-bg:               #fcf8e3;
@state-warning-border:           darken(spin(@state-warning-bg, -10), 3%);

@state-danger-text:              #b94a48;
@state-danger-bg:                #f2dede;
@state-danger-border:            darken(spin(@state-danger-bg, -10), 3%);

@state-success-text:             #468847;
@state-success-bg:               #dff0d8;
@state-success-border:           darken(spin(@state-success-bg, -10), 5%);

@state-info-text:                #3a87ad;
@state-info-bg:                  #d9edf7;
@state-info-border:              darken(spin(@state-info-bg, -10), 7%);

// Tooltips and popovers
// -------------------------
@tooltip-color:               #fff;
@tooltip-bg:                  rgba(0,0,0,.9);
@tooltip-arrow-width:         5px;
@tooltip-arrow-color:         @tooltip-bg;

@popover-bg:                  #fff;
@popover-arrow-width:         10px;
@popover-arrow-color:         #fff;
@popover-title-bg:            darken(@popover-bg, 3%);

// Special enhancement for popovers
@popover-arrow-outer-width:   (@popover-arrow-width + 1);
@popover-arrow-outer-color:   rgba(0,0,0,.25);

// Labels
// -------------------------
@label-success-bg:            @brand-success;
@label-info-bg:               @brand-info;
@label-warning-bg:            @brand-warning;
@label-danger-bg:             @brand-danger;

@label-color:                 #fff;
@label-link-hover-color:      #fff;

// Modals
// -------------------------
@modal-inner-padding:         20px;

@modal-title-padding:         15px;
@modal-title-line-height:     @line-height-base;

// Alerts
// -------------------------
@alert-bg:                    @state-warning-bg;
@alert-text:                  @state-warning-text;
@alert-border:                @state-warning-border;
@alert-border-radius:         @border-radius-base;

@alert-success-bg:            @state-success-bg;
@alert-success-text:          @state-success-text;
@alert-success-border:        @state-success-border;

@alert-danger-bg:             @state-danger-bg;
@alert-danger-text:           @state-danger-text;
@alert-danger-border:         @state-danger-border;

@alert-info-bg:               @state-info-bg;
@alert-info-text:             @state-info-text;
@alert-info-border:           @state-info-border;

// Progress bars
// -------------------------
@progress-bg:                 #f5f5f5;
@progress-bar-bg:             @brand-primary;
@progress-bar-success-bg:     @brand-success;
@progress-bar-warning-bg:     @brand-warning;
@progress-bar-danger-bg:      @brand-danger;
@progress-bar-info-bg:        @brand-info;

// List group
// -------------------------
@list-group-bg:               #fff;
@list-group-border:           #ddd;
@list-group-border-radius:    @border-radius-base;

@list-group-hover-bg:         #f5f5f5;
@list-group-active-color:     #fff;
@list-group-active-bg:        @component-active-bg;
@list-group-active-border:    @list-group-active-bg;

@list-group-link-color:          #555;
@list-group-link-heading-color:  #333;

// Panels
// -------------------------
@panel-bg:                    #fff;
@panel-border:                #ddd;
@panel-border-radius:         @border-radius-base;
@panel-heading-bg:            #f5f5f5;
@panel-footer-bg:             #f5f5f5;

@panel-primary-text:          #fff;
@panel-primary-border:        @brand-primary;
@panel-primary-heading-bg:    @brand-primary;

@panel-success-text:          @state-success-text;
@panel-success-border:        @state-success-border;
@panel-success-heading-bg:    @state-success-bg;

@panel-warning-text:          @state-warning-text;
@panel-warning-border:        @state-warning-border;
@panel-warning-heading-bg:    @state-warning-bg;

@panel-danger-text:           @state-danger-text;
@panel-danger-border:         @state-danger-border;
@panel-danger-heading-bg:     @state-danger-bg;

@panel-info-text:             @state-info-text;
@panel-info-border:           @state-info-border;
@panel-info-heading-bg:       @state-info-bg;

// Thumbnails
// -------------------------
@thumbnail-caption-color:     @text-color;
@thumbnail-bg:                @body-bg;
@thumbnail-border:            #ddd;
@thumbnail-border-radius:     @border-radius-base;

// Wells
// -------------------------
@well-bg:                     #f5f5f5;

// Accordion
// -------------------------
@accordion-border-color:      #e5e5e5;

// Badges
// -------------------------
@badge-color:                 #fff;
@badge-link-hover-color:      #fff;

@badge-bg:                    #f5f5f5;
@badge-active-color:          @link-color;
@badge-active-bg:             #fff;

// Breadcrumbs
// -------------------------
@breadcrumb-bg:               #f5f5f5;
@breadcrumb-color:            #ccc;
@breadcrumb-active-color:     @gray-light;

// Carousel
// ------------------------
@carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);

@carousel-control-color:                      #fff;

@carousel-indicator-border-color:             #fff;
@carousel-indicator-active-bg:                #fff;

@carousel-caption-color:                      #fff;

// Close
// ------------------------
@close-color:                 #000;
@close-text-shadow:           0 1px 0 #fff;

// Code
// ------------------------
@code-color:                  #c7254e;
@code-bg:                     #f9f2f4;

@pre-bg:                      #f5f5f5;
@pre-border-color:            #ccc;

// Type
// ------------------------
@text-muted:                  @gray-light;
@abbr-border-color:           @gray-light;
@headings-small-color:        @gray-light;
@blockquote-small-color:      @gray-light;
@blockquote-border-color:     @gray-lighter;
@page-header-border-color:    @gray-lighter;

// Miscellaneous
// -------------------------

// Hr border color
@hr-border:                   @gray-lighter;

// Horizontal forms & lists
@component-offset-horizontal: 180px;

// Media queries breakpoints
// --------------------------------------------------

// Tiny screen / phone
@screen-tiny:                480px;
@screen-phone:               @screen-tiny;

// Small screen / tablet
@screen-small:               768px;
@screen-tablet:              @screen-small;

// Medium screen / desktop
@screen-medium:              992px;
@screen-desktop:             @screen-medium;

// So media queries don't overlap when required, provide a maximum
@screen-small-max:           (@screen-medium - 1);
@screen-tablet-max:          @screen-small-max;

// Large screen / wide desktop
@screen-large:               1200px;
@screen-large-desktop:       @screen-large;

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:          728px;

// Medium screen / desktop
@container-desktop:         940px;

// Large screen / wide desktop
@container-large-desktop:   1170px;

// Grid system
// --------------------------------------------------

// Number of columns in the grid system
@grid-columns:              12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width:         30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-tablet;

//
// Cornerstone Variables
// --------------------------------------------------

// Range Input
// --------------------------------------------------
@slider-outer-bg: rgba(84, 84, 84, 0.14);
@slider-outer-radius: 15px;
@slider-inner-bg: @gray;
@slider-inner-radius: 20px;

@slider-handle-outer-bg: @gray-lighter;
@slider-handle-inner-bg: @brand-primary;
@slider-handle-radius: 50px;

@slider-progress-bg: @brand-primary;

//
// Variables
// --------------------------------------------------

// Global values
// --------------------------------------------------
@text-color-inverse: #FFF;

// Grays
// -------------------------

@gray-darker:            lighten(#000, 13.5%); // #222
@gray-dark:              lighten(#000, 20%);   // #333
@gray:                   lighten(#000, 33.5%); // #555
@gray-light:             lighten(#000, 60%);   // #999
@gray-lighter:           lighten(#000, 93.5%); // #eee

// Brand colors
// -------------------------

@brand-primary:         @navbarBackground;
@brand-success:         #5cb85c;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;
@brand-info:            #5bc0de;

// Scaffolding
// -------------------------

@body-bg:               @white;
@text-color:            @gray-dark;

// Links
// -------------------------

@link-color:            @brand-primary;
@link-hover-color:      darken(@link-color, 15%);

// Typography
// -------------------------

@font-family-sans-serif:  "NanumGothic", "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil(@font-size-base * 1.25); // ~18px
@font-size-small:         ceil(@font-size-base * 0.85); // ~12px
@font-size-mini:          ceil(@font-size-base * 0.75); // ~11px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor(@font-size-base * @line-height-base); // ~20px

@headings-font-family:    @font-family-base;
@headings-font-weight:    500;
@headings-line-height:    1.1;

// Components
// -------------------------
// Based on 14px font-size and 1.428 line-height (~20px to start)

@padding-base-vertical:          8px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         14px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-bg:            @brand-primary;

// Tables
// -------------------------

@table-cell-padding:                 8px;
@table-condensed-cell-padding:       5px;

@table-bg:                           transparent; // overall background-color
@table-bg-accent:                    #f9f9f9; // for striping
@table-bg-hover:                     #f5f5f5;
@table-bg-active:                    @table-bg-hover;

@table-border-color:                 #ddd; // table and cell border

// Buttons
// -------------------------

@btn-default-color:              @text-color;
@btn-default-bg:                 @btnBackground;
@btn-default-border:             @btnBackgroundHighlight;

@btn-primary-color:              lighten(@btnPrimaryBackground, 50%);
@btn-primary-bg:                 @btnPrimaryBackground;
@btn-primary-border:             @btn-primary-bg;

@btn-success-color:              lighten(@btnSuccessBackground, 50%);
@btn-success-bg:                 @btnSuccessBackground;
@btn-success-border:             @btn-success-bg;

@btn-warning-color:              lighten(@link-color, 50%);
@btn-warning-bg:                 @brand-warning;
@btn-warning-border:             @btn-warning-bg;

@btn-danger-color:               lighten(@btnDangerBackground, 50%);
@btn-danger-bg:                  @btnDangerBackground;
@btn-danger-border:              @btn-danger-bg;

@btn-info-color:                 lighten(@btnInfoBackground, 50%);
@btn-info-bg:                    @btnInfoBackground;
@btn-info-border:                @btn-info-bg;

@btn-hover-color:                @btn-default-color;

// Forms
// -------------------------

@input-bg:                       #fff;
@input-bg-disabled:              @gray-lighter;

@input-border:                   #ccc;
@input-border-radius:            @border-radius-base;

@input-color-placeholder:        @gray-light;

@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2));
@input-height-large:             (@line-height-computed + (@padding-large-vertical * 2));
@input-height-small:             (@line-height-computed + (@padding-small-vertical * 2));

@legend-border-color:            #e5e5e5;

@input-group-addon-border-color: @input-border;

// Dropdowns
// -------------------------

@dropdown-bg:                    #fff;
@dropdown-border:                rgba(0,0,0,.15);
@dropdown-fallback-border:       #ccc;
@dropdown-divider-bg:            #e5e5e5;

@dropdown-link-active-color:     #fff;
@dropdown-link-active-bg:        @component-active-bg;

@dropdown-link-color:            @gray-dark;
@dropdown-link-hover-color:      #fff;
@dropdown-link-hover-bg:         @dropdown-link-active-bg;

@dropdown-caret-color:           #000;

// COMPONENT VARIABLES
// --------------------------------------------------

// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)

@zindex-dropdown:          1000;
@zindex-popover:           1010;
@zindex-tooltip:           1030;
@zindex-navbar-fixed:      1030;
@zindex-modal-background:  1040;
@zindex-modal:             1050;

// Glyphicons font path
// -------------------------
@glyphicons-font-path:          "./fonts";

// Navbar
// -------------------------

// Basics of a navbar
@navbar-height:                    50px;
@navbar-color:                     #777;
@navbar-bg:                        @brand-primary;
@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);  // ~15px
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);

// Navbar links
@navbar-link-color:                @navbarLinkColor;
@navbar-link-hover-color:          @navbarLinkColorHover;
@navbar-link-hover-bg:             @navbarLinkBackgroundHover;
@navbar-link-active-color:         @navbarLinkColorActive;
@navbar-link-active-bg:            @navbarLinkBackgroundActive;
@navbar-link-disabled-color:       #ccc;
@navbar-link-disabled-bg:          transparent;

// Navbar brand label
@navbar-brand-color:               @navbarBrandColor;
@navbar-brand-hover-color:         darken(@navbar-brand-color, 10%);
@navbar-brand-hover-bg:            transparent;

// Inverted navbar
@navbar-inverse-color:                      @navbarLinkColor;
@navbar-inverse-bg:                         @navbarInverseBackground;

// Inverted navbar links
@navbar-inverse-link-color:                 @navbarInverseLinkColor;
@navbar-inverse-link-hover-color:           @navbarInverseLinkColorHover;
@navbar-inverse-link-hover-bg:              darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-active-color:          @navbarInverseLinkColorActive;
@navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
@navbar-inverse-link-disabled-color:        #444;
@navbar-inverse-link-disabled-bg:           transparent;

// Inverted navbar brand label
@navbar-inverse-brand-color:                @navbarInverseBrandColor;
@navbar-inverse-brand-hover-color:          darken(@navbar-inverse-brand-color, 10%);;
@navbar-inverse-brand-hover-bg:             transparent;

// Inverted navbar search
// Normal navbar needs no special styles or vars
@navbar-inverse-search-bg:                  lighten(@navbar-inverse-bg, 25%);
@navbar-inverse-search-bg-focus:            #fff;
@navbar-inverse-search-border:              @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color:   #ccc;

// Pagination
// -------------------------

@pagination-bg:                        #fff;
@pagination-border:                    #ddd;
@pagination-active-bg:                 #f5f5f5;

// Jumbotron
// -------------------------

@jumbotron-bg:                   @gray-lighter;
@jumbotron-heading-color:        inherit;
@jumbotron-lead-color:           inherit;

// Form states and alerts
// -------------------------

@state-warning-text:             #c09853;
@state-warning-bg:               #fcf8e3;
@state-warning-border:           darken(spin(@state-warning-bg, -10), 3%);

@state-danger-text:              #b94a48;
@state-danger-bg:                #f2dede;
@state-danger-border:            darken(spin(@state-danger-bg, -10), 3%);

@state-success-text:             #468847;
@state-success-bg:               #dff0d8;
@state-success-border:           darken(spin(@state-success-bg, -10), 5%);

@state-info-text:                #3a87ad;
@state-info-bg:                  #d9edf7;
@state-info-border:              darken(spin(@state-info-bg, -10), 7%);

// Tooltips and popovers
// -------------------------
@tooltip-color:               #fff;
@tooltip-bg:                  rgba(0,0,0,.9);
@tooltip-arrow-width:         5px;
@tooltip-arrow-color:         @tooltip-bg;

@popover-bg:                  #fff;
@popover-arrow-width:         10px;
@popover-arrow-color:         #fff;
@popover-title-bg:            darken(@popover-bg, 3%);

// Special enhancement for popovers
@popover-arrow-outer-width:   (@popover-arrow-width + 1);
@popover-arrow-outer-color:   rgba(0,0,0,.25);

// Labels
// -------------------------
@label-success-bg:            @brand-success;
@label-info-bg:               @brand-info;
@label-warning-bg:            @brand-warning;
@label-danger-bg:             @brand-danger;

@label-color:                 #fff;
@label-link-hover-color:      #fff;

// Modals
// -------------------------
@modal-inner-padding:         20px;

@modal-title-padding:         15px;
@modal-title-line-height:     @line-height-base;

// Alerts
// -------------------------
@alert-bg:                    @state-warning-bg;
@alert-text:                  @state-warning-text;
@alert-border:                @state-warning-border;
@alert-border-radius:         @border-radius-base;

@alert-success-bg:            @state-success-bg;
@alert-success-text:          @state-success-text;
@alert-success-border:        @state-success-border;

@alert-danger-bg:             @state-danger-bg;
@alert-danger-text:           @state-danger-text;
@alert-danger-border:         @state-danger-border;

@alert-info-bg:               @state-info-bg;
@alert-info-text:             @state-info-text;
@alert-info-border:           @state-info-border;

// Progress bars
// -------------------------
@progress-bg:                 #f5f5f5;
@progress-bar-bg:             @brand-primary;
@progress-bar-success-bg:     @brand-success;
@progress-bar-warning-bg:     @brand-warning;
@progress-bar-danger-bg:      @brand-danger;
@progress-bar-info-bg:        @brand-info;

// List group
// -------------------------
@list-group-bg:               #fff;
@list-group-border:           #ddd;
@list-group-border-radius:    @border-radius-base;

@list-group-hover-bg:         #f5f5f5;
@list-group-active-color:     #fff;
@list-group-active-bg:        @component-active-bg;
@list-group-active-border:    @list-group-active-bg;

@list-group-link-color:          #555;
@list-group-link-heading-color:  #333;

// Panels
// -------------------------
@panel-bg:                    #fff;
@panel-border:                #ddd;
@panel-border-radius:         @border-radius-base;
@panel-heading-bg:            #f5f5f5;
@panel-footer-bg:             #f5f5f5;

@panel-primary-text:          #fff;
@panel-primary-border:        @brand-primary;
@panel-primary-heading-bg:    @brand-primary;

@panel-success-text:          @state-success-text;
@panel-success-border:        @state-success-border;
@panel-success-heading-bg:    @state-success-bg;

@panel-warning-text:          @state-warning-text;
@panel-warning-border:        @state-warning-border;
@panel-warning-heading-bg:    @state-warning-bg;

@panel-danger-text:           @state-danger-text;
@panel-danger-border:         @state-danger-border;
@panel-danger-heading-bg:     @state-danger-bg;

@panel-info-text:             @state-info-text;
@panel-info-border:           @state-info-border;
@panel-info-heading-bg:       @state-info-bg;

// Thumbnails
// -------------------------
@thumbnail-caption-color:     @text-color;
@thumbnail-bg:                @body-bg;
@thumbnail-border:            #ddd;
@thumbnail-border-radius:     @border-radius-base;

// Wells
// -------------------------
@well-bg:                     #f5f5f5;

// Accordion
// -------------------------
@accordion-border-color:      #e5e5e5;

// Badges
// -------------------------
@badge-color:                 #fff;
@badge-link-hover-color:      #fff;

@badge-bg:                    #f5f5f5;
@badge-active-color:          @link-color;
@badge-active-bg:             #fff;

// Breadcrumbs
// -------------------------
@breadcrumb-bg:               #f5f5f5;
@breadcrumb-color:            #ccc;
@breadcrumb-active-color:     @gray-light;

// Carousel
// ------------------------
@carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);

@carousel-control-color:                      #fff;

@carousel-indicator-border-color:             #fff;
@carousel-indicator-active-bg:                #fff;

@carousel-caption-color:                      #fff;

// Close
// ------------------------
@close-color:                 #000;
@close-text-shadow:           0 1px 0 #fff;

// Code
// ------------------------
@code-color:                  #c7254e;
@code-bg:                     #f9f2f4;

@pre-bg:                      #f5f5f5;
@pre-border-color:            #ccc;

// Miscellaneous
// -------------------------

// Hr border color
@hr-border:                   @gray-lighter;

// Horizontal forms & lists
@component-offset-horizontal: 180px;

// Media queries breakpoints
// --------------------------------------------------

// Tiny screen / phone
@screen-tiny:                480px;
@screen-phone:               @screen-tiny;

// Small screen / tablet
@screen-small:               768px;
@screen-tablet:              @screen-small;

// Medium screen / desktop
@screen-medium:              992px;
@screen-desktop:             @screen-medium;

// So media queries don't overlap when required, provide a maximum
@screen-small-max:           (@screen-medium - 1);
@screen-tablet-max:          @screen-small-max;

// Large screen / wide desktop
@screen-large:               1200px;
@screen-large-desktop:       @screen-large;

// Container sizes
// --------------------------------------------------

// Small screen / tablet
@container-tablet:          728px;

// Medium screen / desktop
@container-desktop:         940px;

// Large screen / wide desktop
@container-large-desktop:   1170px;

// Grid system
// --------------------------------------------------

// Number of columns in the grid system
@grid-columns:              12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width:         30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-tablet;

//
// Cornerstone Variables
// --------------------------------------------------

// Range Input
// --------------------------------------------------
@slider-outer-bg: rgba(84, 84, 84, 0.14);
@slider-outer-radius: 15px;
@slider-inner-bg: @gray;
@slider-inner-radius: 20px;

@slider-handle-outer-bg: @gray-lighter;
@slider-handle-inner-bg: @brand-primary;
@slider-handle-radius: 50px;

@slider-progress-bg: @brand-primary;


[INTERNAL][FIX] sap.m.CheckBox: Fixed incorrect height in form

Visual test caught wrong sap.m.CheckBox height when the control is placed inside form.

BCP: n/a
Change-Id: I8cabf89c8883749ca6d8db4d6420d135d47e317e

/* =============================== */
/* CSS for control sap.m/CheckBox  */
/* Base theme                      */
/* =============================== */

.sapMCb {
	display: inline-block;
	position: relative;
	white-space: normal;
	box-sizing: border-box;
	height: 3rem;
	line-height: 3rem;
	vertical-align: top;
	text-align: left;
	padding: 0 0 0 3rem;

	&:not(.sapMCbBgDis):not(.sapMCbDisplayOnly) {
		&:hover,
		.sapMCbLabel:hover {
			cursor: pointer;
		}
		&.sapMCbHasLabel:focus:before {
			pointer-events: none;
		}
	}

	&.sapMCbDisplayOnly {
		&.sapMCbErr,
		&.sapMCbInfo,
		&.sapMCbWarn,
		&.sapMCbSucc {
			.sapMCbBg {
				border: none;
				&.sapMCbMarkChecked:before {
					color: @sapUiBaseText;
				}
				&.sapMCbMarkPartiallyChecked{
					border: solid 0.0625rem #89919a
				}

			}
		}
	}
}

.sapUiForm:not(.sapUiFormEdit-CTX) .sapMCb.sapMCbDisplayOnly {
	height: 1.125rem;
	line-height: 1.125rem;

	&:not(.sapMCbBgDis) {
		padding-left: 1.625rem;
	}

	.sapMCbBg {
		top: 0;
		margin: 0;
	}
	&.sapMCbWrapped.sapMCbHasLabel > .sapMLabel.sapMLabelWrapped {
		margin: 0;
		line-height: 1.125rem;
	}
}

.sapMCb.sapMCbWrapped.sapMCbHasLabel {
	height: auto;
	> .sapMLabel.sapMLabelWrapped {
		margin: 0.875rem 0;
		line-height: 1.4rem;
	}
}

.sapMCb.sapMCbDisplayOnly:not(.sapMCbBgDis) {
	padding-left: 2.375rem;
}

.sapUiFormEdit-CTX .sapMCb.sapMCbWrapped.sapMCbHasLabel > .sapMLabel.sapMLabelWrapped {
	margin: 0.75rem 0;
}

html[dir="rtl"] .sapMCb {
	text-align: right;
}

.sapMCb .sapMLabel {
	cursor: default;
	line-height: inherit;

	&.sapMLabelNoText {
		position: absolute;
		visibility: hidden;
		left: -10000px;
		top: -10000px;
	}
}

.sapMCb>label {
	vertical-align: top;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	width : 100% /* If you put a CB in a form the with has to be 100% in rtl for text align */
}

.sapMCbBg { /* check box itself */
	background-color: @sapUiFieldBackground;
	border: solid 0.125rem @sapUiFieldBorderColor;
	display: inline-block;
	position: absolute;
	left: 0.8125rem;
	top: 0.8125rem;
	height: 1.125rem;
	width: 1.125rem;
	line-height: 1.125rem;
	padding: 0;
	text-align: center;
	font-size: 1rem;

	// note: some browsers like Samsung Galaxy S4 with Android 4.2 does not support the "border-radius" shorthand property
	// but does support the long-hand properties for each corner like "border-top-left-radius"
	border-top-left-radius: 0.125rem;
	border-top-right-radius: 0.125rem;
	border-bottom-right-radius: 0.125rem;
	border-bottom-left-radius: 0.125rem;
	-webkit-focus-ring-color: none;
}

.sapMCbBg > .sapMCbMark,
.sapMCbBg.sapMCbMark > input{
	font-size: inherit;
}

.sapMCbBg.sapMCbMarkChecked:before {
	content: "\e05b";
	font-family: "SAP-icons";
	display: inline-block;
}

.sapMCbBg.sapMCbMarkChecked.sapMCbMarkPartiallyChecked:before{
	content: "";
	width: 100%;
	height: 100%;
	background-color: currentColor;
	border: 0.1875rem solid transparent;
	box-sizing: border-box;
	background-clip: padding-box;
}

.sapUiSizeCompact.sapMCb .sapMCbMarkChecked.sapMCbMarkPartiallyChecked:before,
.sapUiSizeCompact .sapMCbBg.sapMCbMarkChecked.sapMCbMarkPartiallyChecked:before {
	border-width: 0.125rem;
}

.sapMCbBg > input {
	left: 0;
	-webkit-appearance: none;
	visibility: hidden;
}

html[data-sap-ui-browser^=ff] .sapMCbBg > input {
	/* in FF the input needs to be positioned exactly behind the visible checkbox for the focus outline */
	position: absolute;
}

/* Read only */
.sapMCbRo .sapMCbBg {
	background-color: @sapUiFieldReadOnlyBackground;
	border-color: @sapUiFieldReadOnlyBorderColor;
}

.sapMCbRo > .sapMCbBg.sapMCbMarkChecked:before {
	color: @sapUiContentNonInteractiveIconColor;
}

/* Display only */
.sapMCbDisplayOnly {
	font-family: "SAP-icons";

	.sapMCbBg.sapMCbMark.sapMCbMarkChecked.sapMCbMarkPartiallyChecked{
		border-radius: 0.0625rem;
		border: 1px solid @sapUiBaseText ;

		&:before {
			background-color: @sapUiBaseText;
		}
	}

	.sapMCbBg:not(.sapMCbMarkPartiallyChecked) {
		background-color: initial;
		border: none;
		margin: 0.125rem;

		&:before {
			content: "\e19a";
			font-size: 1rem;
		}

		&.sapMCbMarkChecked:before {
			color: @sapUiBaseText;
			content: "\e03f";
		}
	}
}

/* Compact size */
.sapUiSizeCompact {

	.sapMCb {
		height: 2rem;
		line-height: 2rem;
		padding-left: 2rem;
	}

	.sapMCb.sapMCbWrapped.sapMCbHasLabel {
		height: auto;
		> .sapMLabel.sapMLabelWrapped {
			margin: 0.3rem 0;
		}
	}

	.sapUiFormEdit-CTX .sapMCb.sapMCbWrapped.sapMCbHasLabel > .sapMLabel.sapMLabelWrapped {
		margin: 0.25rem 0;
	}

	.sapMCbBg { /* check box itself */
		left: 0.5rem;
		top: 0.5rem;
		height: 0.75rem;
		width: 0.75rem;
		line-height: 0.75rem;
		font-size: 0.75rem;
		border-radius: 0;
	}

	.sapMLIBSelectM > .sapMCb {
		width: 2rem;
	}

	.sapUiForm:not(.sapUiFormEdit-CTX) .sapMCb.sapMCbDisplayOnly .sapMCbBg {
		top: 0.1875rem;
	}

	.sapMCb.sapMCbDisplayOnly:not(.sapMCbBgDis) {
		padding-left: 2rem;
	}
}

/* Condensed size */
.sapUiSizeCondensed.sapUiTable,
.sapUiSizeCondensed .sapUiTable {

	.sapMCb {
		height: 1.5rem;
		line-height: 1.5rem;
		padding-left: 1.5rem;
	}

	.sapUiTableDataCell > .sapUiTableCellInner > .sapMCb {
		margin-left: 0.25rem;
		padding-left: 1.75rem;
	}

	.sapMCbBg { /* check box itself */
		left: 0.25rem;
		top: 0.25rem;
		height: 0.75rem;
		width: 0.75rem;
		line-height: 0.75rem;
		font-size: 0.625rem;
		border-radius: 0;
	}
}

html[data-sap-ui-browser^="sf"] .sapMCbBg > .sapMCbMark, .sapMCbBg.sapMCbMark > input {
	margin: 0;
}

/* =============================== */
/* CSS for control sap.m/CheckBox  */
/* Base theme                      */
/* =============================== */

.sapMCb {
	display: inline-block;
	position: relative;
	white-space: normal;
	box-sizing: border-box;
	height: 3rem;
	line-height: 3rem;
	vertical-align: top;
	text-align: left;
	padding: 0 0 0 3rem;

	&:not(.sapMCbBgDis):not(.sapMCbDisplayOnly) {
		&:hover,
		.sapMCbLabel:hover {
			cursor: pointer;
		}
		&.sapMCbHasLabel:focus:before {
			pointer-events: none;
		}
	}

	&.sapMCbDisplayOnly {
		&.sapMCbErr,
		&.sapMCbInfo,
		&.sapMCbWarn,
		&.sapMCbSucc {
			.sapMCbBg {
				border: none;
				&.sapMCbMarkChecked:before {
					color: @sapUiBaseText;
				}
				&.sapMCbMarkPartiallyChecked{
					border: solid 0.0625rem #89919a
				}

			}
		}
	}
}

.sapUiForm .sapMCb {
	display: table-cell;
}

.sapUiForm:not(.sapUiFormEdit-CTX) .sapMCb.sapMCbDisplayOnly {
	height: 1.125rem;
	line-height: 1.125rem;

	&:not(.sapMCbBgDis) {
		padding-left: 1.625rem;
	}

	.sapMCbBg {
		top: 0;
		margin: 0;
	}
	&.sapMCbWrapped.sapMCbHasLabel > .sapMLabel.sapMLabelWrapped {
		margin: 0;
		line-height: 1.125rem;
	}
}

.sapMCb.sapMCbWrapped.sapMCbHasLabel {
	height: auto;
	> .sapMLabel.sapMLabelWrapped {
		margin: 0.875rem 0;
		line-height: 1.4rem;
	}
}

.sapMCb.sapMCbDisplayOnly:not(.sapMCbBgDis) {
	padding-left: 2.375rem;
}

.sapUiFormEdit-CTX .sapMCb.sapMCbWrapped.sapMCbHasLabel > .sapMLabel.sapMLabelWrapped {
	margin: 0.75rem 0;
}

html[dir="rtl"] .sapMCb {
	text-align: right;
}

.sapMCb .sapMLabel {
	cursor: default;
	line-height: inherit;

	&.sapMLabelNoText {
		position: absolute;
		visibility: hidden;
		left: -10000px;
		top: -10000px;
	}
}

.sapMCb>label {
	vertical-align: top;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	width : 100% /* If you put a CB in a form the with has to be 100% in rtl for text align */
}

.sapMCbBg { /* check box itself */
	background-color: @sapUiFieldBackground;
	border: solid 0.125rem @sapUiFieldBorderColor;
	display: inline-block;
	position: absolute;
	left: 0.8125rem;
	top: 0.8125rem;
	height: 1.125rem;
	width: 1.125rem;
	line-height: 1.125rem;
	padding: 0;
	text-align: center;
	font-size: 1rem;

	// note: some browsers like Samsung Galaxy S4 with Android 4.2 does not support the "border-radius" shorthand property
	// but does support the long-hand properties for each corner like "border-top-left-radius"
	border-top-left-radius: 0.125rem;
	border-top-right-radius: 0.125rem;
	border-bottom-right-radius: 0.125rem;
	border-bottom-left-radius: 0.125rem;
	-webkit-focus-ring-color: none;
}

.sapMCbBg > .sapMCbMark,
.sapMCbBg.sapMCbMark > input{
	font-size: inherit;
}

.sapMCbBg.sapMCbMarkChecked:before {
	content: "\e05b";
	font-family: "SAP-icons";
	display: inline-block;
}

.sapMCbBg.sapMCbMarkChecked.sapMCbMarkPartiallyChecked:before{
	content: "";
	width: 100%;
	height: 100%;
	background-color: currentColor;
	border: 0.1875rem solid transparent;
	box-sizing: border-box;
	background-clip: padding-box;
}

.sapUiSizeCompact.sapMCb .sapMCbMarkChecked.sapMCbMarkPartiallyChecked:before,
.sapUiSizeCompact .sapMCbBg.sapMCbMarkChecked.sapMCbMarkPartiallyChecked:before {
	border-width: 0.125rem;
}

.sapMCbBg > input {
	left: 0;
	-webkit-appearance: none;
	visibility: hidden;
}

html[data-sap-ui-browser^=ff] .sapMCbBg > input {
	/* in FF the input needs to be positioned exactly behind the visible checkbox for the focus outline */
	position: absolute;
}

/* Read only */
.sapMCbRo .sapMCbBg {
	background-color: @sapUiFieldReadOnlyBackground;
	border-color: @sapUiFieldReadOnlyBorderColor;
}

.sapMCbRo > .sapMCbBg.sapMCbMarkChecked:before {
	color: @sapUiContentNonInteractiveIconColor;
}

/* Display only */
.sapMCbDisplayOnly {
	font-family: "SAP-icons";

	.sapMCbBg.sapMCbMark.sapMCbMarkChecked.sapMCbMarkPartiallyChecked{
		border-radius: 0.0625rem;
		border: 1px solid @sapUiBaseText ;

		&:before {
			background-color: @sapUiBaseText;
		}
	}

	.sapMCbBg:not(.sapMCbMarkPartiallyChecked) {
		background-color: initial;
		border: none;
		margin: 0.125rem;

		&:before {
			content: "\e19a";
			font-size: 1rem;
		}

		&.sapMCbMarkChecked:before {
			color: @sapUiBaseText;
			content: "\e03f";
		}
	}
}

/* Compact size */
.sapUiSizeCompact {

	.sapMCb {
		height: 2rem;
		line-height: 2rem;
		padding-left: 2rem;
	}

	.sapMCb.sapMCbWrapped.sapMCbHasLabel {
		height: auto;
		> .sapMLabel.sapMLabelWrapped {
			margin: 0.3rem 0;
		}
	}

	.sapUiFormEdit-CTX .sapMCb.sapMCbWrapped.sapMCbHasLabel > .sapMLabel.sapMLabelWrapped {
		margin: 0.25rem 0;
	}

	.sapMCbBg { /* check box itself */
		left: 0.5rem;
		top: 0.5rem;
		height: 0.75rem;
		width: 0.75rem;
		line-height: 0.75rem;
		font-size: 0.75rem;
		border-radius: 0;
	}

	.sapMLIBSelectM > .sapMCb {
		width: 2rem;
	}

	.sapUiForm:not(.sapUiFormEdit-CTX) .sapMCb.sapMCbDisplayOnly .sapMCbBg {
		top: 0.1875rem;
	}

	.sapMCb.sapMCbDisplayOnly:not(.sapMCbBgDis) {
		padding-left: 2rem;
	}
}

/* Condensed size */
.sapUiSizeCondensed.sapUiTable,
.sapUiSizeCondensed .sapUiTable {

	.sapMCb {
		height: 1.5rem;
		line-height: 1.5rem;
		padding-left: 1.5rem;
	}

	.sapUiTableDataCell > .sapUiTableCellInner > .sapMCb {
		margin-left: 0.25rem;
		padding-left: 1.75rem;
	}

	.sapMCbBg { /* check box itself */
		left: 0.25rem;
		top: 0.25rem;
		height: 0.75rem;
		width: 0.75rem;
		line-height: 0.75rem;
		font-size: 0.625rem;
		border-radius: 0;
	}
}

html[data-sap-ui-browser^="sf"] .sapMCbBg > .sapMCbMark, .sapMCbBg.sapMCbMark > input {
	margin: 0;
}


Lighten discussion list hover color

Lighten discussion list hover color

When the list is shown in the side-pane, the background of the currently-selected discussion is the @control-bg. The hover color shouldn't be quite as strong as that.

.DiscussionListItem {
  .tooltip .tooltip-inner {
    max-width: none;
  }
}
.DiscussionListItem--hidden {
  .DiscussionListItem-content {
    opacity: 0.5;
  }
}

.DiscussionListItem a {
  text-decoration: none;
}
.DiscussionListItem-content {
  position: relative;
  color: @muted-color;
}
.DiscussionListItem-main {
  color: inherit;
  text-decoration: none;
}
.DiscussionListItem-author {
  float: left;
  margin-top: 13px;
}
.DiscussionListItem-badges {
  float: left;
  margin-top: 10px;
  text-align: right;
  white-space: nowrap;
  pointer-events: none;

  .Badge {
    margin-left: -10px;
    position: relative;
    pointer-events: auto;
  }
}
.DiscussionListItem-main {
  display: inline-block;
  width: 100%;
  padding: 12px 0;
}
.DiscussionListItem-title {
  margin: 0 0 3px;
  line-height: 1.3;
  color: @heading-color;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;

  .read & {
    color: mix(@heading-color, @body-bg, 55%);
  }
  .unread & {
    font-weight: 600;
  }
}
.DiscussionListItem-info {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 12px;

  > li {
    display: inline;
    opacity: 0.7;
    .transition(opacity 0.2s);

    .DiscussionListItem:hover &, .DiscussionListItem.active & {
      opacity: 1;
    }
  }
  .username {
    font-weight: bold;
  }
  .item-terminalPost .icon {
    font-size: 11px;
    margin-right: -1px;
  }
}
.DiscussionListItem-count {
  float: right;
  margin-top: 12px;
  text-decoration: none;

  .unread & {
    cursor: pointer;
  }
}
.DiscussionListItem-relevantPosts {
  padding-bottom: 15px;

  @media @phone {
    margin-left: -45px;
    margin-right: -35px;
  }

  .PostPreview {
    background: @control-bg;
    display: block;
    padding: 10px 15px;
    border-bottom: 2px dotted @body-bg;
    color: @muted-color;
    transition: border-color 0.2s;

    .DiscussionListItem:hover & {
      border-color: lighten(@control-bg, 3%);
    }

    .Avatar, time {
      display: none;
    }
    .PostPreview-content {
      padding-left: 0;
    }
    &:first-child {
      border-radius: @border-radius @border-radius 0 0;
    }
    &:hover {
      background: darken(@control-bg, 3%);
      text-decoration: none;
    }
  }
}

@media @phone {
  .DiscussionListItem-controls {
    display: none;
  }
  .DiscussionListItem-content {
    padding-left: 15px + 45px;
    padding-right: 15px + 35px;

    &:active {
      background: @control-bg;
    }
  }
  .DiscussionListItem-author {
    margin-left: -45px;

    .Avatar {
      .Avatar--size(32px);
    }
  }
  .DiscussionListItem-badges {
    margin-left: -45px;
    width: 38px;

    .badge {
      .Badge--size(20px);
      margin-left: -13px;
    }
  }
  .DiscussionListItem-main {
    margin-right: -45px;
  }
  .DiscussionListItem-title {
    font-size: 14px;
    text-decoration: none !important;
  }
  .DiscussionListItem-info {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .DiscussionListItem-count {
    margin-right: -35px;
    background: @control-bg;
    color: @control-color;
    border-radius: @border-radius;
    font-size: 12px;
    padding: 2px 6px;

    .unread & {
      background: @primary-color;
      color: #fff;
      font-weight: bold;

      &:active {
        opacity: 0.5;
      }
    }
  }
}

@media @tablet-up {
  .DiscussionListItem {
    position: relative;
    margin-right: -15px;
    padding-right: 25px;
    padding-left: 15px;
    margin-left: -15px;
    border-radius: @border-radius;
    transition: background 0.2s;

    &:hover {
      background: mix(@control-bg, @body-bg, 50%);
    }
    &:hover .DiscussionListItem-controls,
    .DiscussionListItem-controls.open {
      opacity: 1;
    }
    .DiscussionListItem-controls.open {
      z-index: 3;
    }
  }
  .DiscussionListItem-controls {
    position: absolute;
    right: 5px;
    top: 15px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s;

    .Dropdown-toggle {
      display: block;
    }
    .Dropdown-menu {
      right: 0;
      left: auto;
    }
  }
  .DiscussionListItem-content {
    padding-left: 52px;
    padding-right: 80px;
  }
  .DiscussionListItem-author {
    margin-left: -52px;

    .Avatar {
      .Avatar--size(36px);
    }
  }
  .DiscussionListItem-badges {
    margin-left: -55px;
    width: 48px;
  }
  .DiscussionListItem-main {
    margin-right: -65px;
  }
  .DiscussionListItem-title {
    font-size: 15px;
  }
  .DiscussionListItem-count {
    margin-top: 21px;
    margin-right: -70px;
    width: 55px;
    color: @muted-color;
    font-size: 14px;
    padding-left: 21px;

    &:before {
      .fa();
      content: @fa-var-comment-o;
      float: left;
      margin-left: -21px;
      margin-top: 3px;
    }
    .unread & {
      color: @heading-color;
      font-weight: bold;

      &:before {
        content: @fa-var-comment;
      }
      &:hover:before {
        content: @fa-var-check;
      }
    }
  }
}

.DiscussionListItem {
  .tooltip .tooltip-inner {
    max-width: none;
  }
}
.DiscussionListItem--hidden {
  .DiscussionListItem-content {
    opacity: 0.5;
  }
}

.DiscussionListItem a {
  text-decoration: none;
}
.DiscussionListItem-content {
  position: relative;
  color: @muted-color;
}
.DiscussionListItem-main {
  color: inherit;
  text-decoration: none;
}
.DiscussionListItem-author {
  float: left;
  margin-top: 13px;
}
.DiscussionListItem-badges {
  float: left;
  margin-top: 10px;
  text-align: right;
  white-space: nowrap;
  pointer-events: none;

  .Badge {
    margin-left: -10px;
    position: relative;
    pointer-events: auto;
  }
}
.DiscussionListItem-main {
  display: inline-block;
  width: 100%;
  padding: 12px 0;
}
.DiscussionListItem-title {
  margin: 0 0 3px;
  line-height: 1.3;
  color: @heading-color;
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;

  .read & {
    color: mix(@heading-color, @body-bg, 55%);
  }
  .unread & {
    font-weight: 600;
  }
}
.DiscussionListItem-info {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 12px;

  > li {
    display: inline;
    opacity: 0.7;
    .transition(opacity 0.2s);

    .DiscussionListItem:hover &, .DiscussionListItem.active & {
      opacity: 1;
    }
  }
  .username {
    font-weight: bold;
  }
  .item-terminalPost .icon {
    font-size: 11px;
    margin-right: -1px;
  }
}
.DiscussionListItem-count {
  float: right;
  margin-top: 12px;
  text-decoration: none;

  .unread & {
    cursor: pointer;
  }
}
.DiscussionListItem-relevantPosts {
  padding-bottom: 15px;

  @media @phone {
    margin-left: -45px;
    margin-right: -35px;
  }

  .PostPreview {
    background: @control-bg;
    display: block;
    padding: 10px 15px;
    border-bottom: 2px dotted @body-bg;
    color: @muted-color;
    transition: border-color 0.2s;

    .DiscussionListItem:hover & {
      border-color: lighten(@control-bg, 3%);
    }

    .Avatar, time {
      display: none;
    }
    .PostPreview-content {
      padding-left: 0;
    }
    &:first-child {
      border-radius: @border-radius @border-radius 0 0;
    }
    &:hover {
      background: darken(@control-bg, 3%);
      text-decoration: none;
    }
  }
}

@media @phone {
  .DiscussionListItem-controls {
    display: none;
  }
  .DiscussionListItem-content {
    padding-left: 15px + 45px;
    padding-right: 15px + 35px;

    &:active {
      background: @control-bg;
    }
  }
  .DiscussionListItem-author {
    margin-left: -45px;

    .Avatar {
      .Avatar--size(32px);
    }
  }
  .DiscussionListItem-badges {
    margin-left: -45px;
    width: 38px;

    .badge {
      .Badge--size(20px);
      margin-left: -13px;
    }
  }
  .DiscussionListItem-main {
    margin-right: -45px;
  }
  .DiscussionListItem-title {
    font-size: 14px;
    text-decoration: none !important;
  }
  .DiscussionListItem-info {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .DiscussionListItem-count {
    margin-right: -35px;
    background: @control-bg;
    color: @control-color;
    border-radius: @border-radius;
    font-size: 12px;
    padding: 2px 6px;

    .unread & {
      background: @primary-color;
      color: #fff;
      font-weight: bold;

      &:active {
        opacity: 0.5;
      }
    }
  }
}

@media @tablet-up {
  .DiscussionListItem {
    position: relative;
    margin-right: -15px;
    padding-right: 25px;
    padding-left: 15px;
    margin-left: -15px;
    border-radius: @border-radius;
    transition: background 0.2s;

    &:hover {
      background: @control-bg;
    }
    &:hover .DiscussionListItem-controls,
    .DiscussionListItem-controls.open {
      opacity: 1;
    }
    .DiscussionListItem-controls.open {
      z-index: 3;
    }
  }
  .DiscussionListItem-controls {
    position: absolute;
    right: 5px;
    top: 15px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s;

    .Dropdown-toggle {
      display: block;
    }
    .Dropdown-menu {
      right: 0;
      left: auto;
    }
  }
  .DiscussionListItem-content {
    padding-left: 52px;
    padding-right: 80px;
  }
  .DiscussionListItem-author {
    margin-left: -52px;

    .Avatar {
      .Avatar--size(36px);
    }
  }
  .DiscussionListItem-badges {
    margin-left: -55px;
    width: 48px;
  }
  .DiscussionListItem-main {
    margin-right: -65px;
  }
  .DiscussionListItem-title {
    font-size: 15px;
  }
  .DiscussionListItem-count {
    margin-top: 21px;
    margin-right: -70px;
    width: 55px;
    color: @muted-color;
    font-size: 14px;
    padding-left: 21px;

    &:before {
      .fa();
      content: @fa-var-comment-o;
      float: left;
      margin-left: -21px;
      margin-top: 3px;
    }
    .unread & {
      color: @heading-color;
      font-weight: bold;

      &:before {
        content: @fa-var-comment;
      }
      &:hover:before {
        content: @fa-var-check;
      }
    }
  }
}


For #1238: modify selector for it to work on Chrome

// Copyright (C) 2020 Orbeon, Inc.
//
// This program is free software; you can redistribute it and/or modify it under the terms of the
// GNU Lesser General Public License as published by the Free Software Foundation; either version
// 2.1 of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
// without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
// See the GNU Lesser General Public License for more details.
//
// The full text of the license is available at http://www.gnu.org/copyleft/lesser.html

.orbeon .xbl-fr-attachment {
    .xforms-upload:not(.xforms-upload-state-progress):not(.xforms-upload-state-file) {
        display: none;
    }
    :not(.xforms-upload-state-empty) + .btn {
        display: none;
    }
}

// Copyright (C) 2020 Orbeon, Inc.
//
// This program is free software; you can redistribute it and/or modify it under the terms of the
// GNU Lesser General Public License as published by the Free Software Foundation; either version
// 2.1 of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
// without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
// See the GNU Lesser General Public License for more details.
//
// The full text of the license is available at http://www.gnu.org/copyleft/lesser.html

.orbeon .xbl-fr-attachment {
    .xforms-upload:not(.xforms-upload-state-progress, .xforms-upload-state-file) {
        display: none;
    }
    :not(.xforms-upload-state-empty) + .btn {
        display: none;
    }
}


CSS : on place le clean des autocomplete 1px plus haut.

git-svn-id: fce87830442b47284c88b98f498bb381ff6d45ea@1865 d3474844-eb8e-4abc-b058-2b321fed648b

.ow-autocomplete {
	display: inline-block;

	.ow-autocomplete-clean {
		position: absolute;
		top: 4px;
		right: 5px;
	}
}

.ow-autocomplete {
	display: inline-block;

	.ow-autocomplete-clean {
		position: absolute;
		top: 5px;
		right: 5px;
	}
}


Override du "max-width: 100%" de Bootstrap sur les images.

git-svn-id: fce87830442b47284c88b98f498bb381ff6d45ea@1492 d3474844-eb8e-4abc-b058-2b321fed648b

* {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Verdana, Arial, sans;
}

select, input, textarea, td, th {
	font-family: inherit;
	color: inherit;
	font-size: inherit;
}

img {
	max-width: none;
}


Fixes for tab bar links

Fixes for tab bar links

/* === Toolbars === */
@navbarBg : #f7f7f8;
@navbarBorderColor: #c4c4c4;
@toolbarBg: @navbarBg;
@toolbarBorderColor: @navbarBorderColor;
@navbarLinksColor: @blue;
@tabbarLinksColor: #929292;
@tabbarActiveLinksColor: @blue;

.navbar-inner, .toolbar-inner {
    .full-size();
    padding: 0 8px;
    .border-box();
    .flexbox();
    .justify-content(space-between);
    .align-items(center);
}
.navbar, .toolbar {
    height: 44px;
    width: 100%;
    .border-box();
    font-size: 17px;
    position: relative;
    margin: 0;
    z-index: 500;
    b {
        font-weight: 500;
    }
    a.link {
        line-height: 44px;
        height: 44px;
        color: @navbarLinksColor;
        text-decoration: none;
        position: relative;
        .flexbox();
        .justify-content(flex-start);
        .align-items(center);
        .transition(300ms);
        &:active{
            opacity: 0.3;
            .transition(0ms);
        }
        i+span, i+i, span+i, span+span {
            margin-left: 7px;
        }
    }
    a.icon-only {
        min-width: 44px;
        .flexbox();
        .justify-content(center);
        .align-items(center);
        margin: 0;
    }
    i.icon {
        display: block;
    }
}
.navbar {
    left: 0;
    top: 0;
    background: @navbarBg;
    border-bottom: 1px solid @navbarBorderColor;
    .center {
        font-size: 17px;
        font-weight: 500;
        text-align: center;
        margin: 0;
        position: relative;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        line-height: 44px;
        .flex-shrink(10);
        .flexbox();
        .align-items(center);
    }
    .left, .right {
        .flex-shrink(0);
        .flexbox();
        .justify-content(flex-start);
        .align-items(center);
        .translate3d(0,0,0);
        a+a {
            margin-left: 15px;
        }
    }
    .left {
        margin-right: 10px;
    }
    .right {
        margin-left: 10px;
    }

}
.toolbar {
    left: 0;
    bottom: 0;
    background: @toolbarBg;
    border-top: 1px solid @toolbarBorderColor;
    a {
        .flex-shrink(1);
        position: relative;
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow: hidden;
    }
}

// Tabbar
.tabbar {
    color: @tabbarLinksColor;
    z-index: 5001;
    a {
        color: @tabbarLinksColor;
    }
    a.active {
        color: @tabbarActiveLinksColor;
    }
    a.tab-link, a.link {
        height: 100%;
        width: 100%;
        .border-box();
        .flexbox();
        .justify-content(center);
        .align-items(center);
        overflow: visible;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}
.tabbar-labels {
    height: 50px;
    a.tab-link, a.link {
        padding-top: 4px;
        padding-bottom: 4px;
        height: 100%;
        .justify-content(space-between);
    }
    span.tabbar-label {
        line-height: 1;
        display: block;
        letter-spacing: 0.01em;
        font-size: 10px;
        position: relative;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
@media all and (min-width:768px) {
    .tabbar {
        .toolbar-inner {
            .justify-content(center);
        }
        a.tab-link, a.link {
            width: auto;
            min-width: 105px;
        }
    }
    .tabbar-labels {
        height: 55px;
        span.tabbar-label {
            font-size: 14px;
        }
    }
}

// Bars animations
@toolbarDuration: 400ms;

.navbar-from-right-to-center {
    .left, .right, .center {
        .animation(navbarElementFadeIn @toolbarDuration forwards);
    }
    .sliding {
        opacity: 1;
    }

}
.navbar-from-center-to-right {
    .left, .right, .center {
        .animation(navbarElementFadeOut @toolbarDuration forwards);
    }
    .sliding {
        opacity: 0;
    }
}
@-webkit-keyframes navbarElementFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes navbarElementFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.navbar-from-center-to-left {
    .left, .right, .center {
        .animation(navbarElementFadeOut @toolbarDuration forwards);
    }
    .sliding {
        opacity: 0;
    }
}
.navbar-from-left-to-center {
    .left, .right, .center {
        .animation(navbarElementFadeIn @toolbarDuration forwards);
    }
    .sliding {
        opacity: 1;
    }
}
.navbar-on-left {
    .left, .right, .center {
        opacity: 0;
    }
    .sliding {
        opacity: 0;
    }
}
.navbar-on-right {
    .left, .right, .center {
        opacity: 0;
    }
    .sliding {
        opacity: 0;
    }
}
@-webkit-keyframes navbarElementFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes navbarElementFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.navbar-from-right-to-center, .navbar-from-center-to-right, .navbar-from-center-to-left, .navbar-from-left-to-center {
    .left.sliding .back.link .icon {
        .transition(@toolbarDuration);
    }
    .sliding {
        .transition(@toolbarDuration);
        .animation(none);
    }
}

/* === Toolbars === */
@navbarBg : #f7f7f8;
@navbarBorderColor: #c4c4c4;
@toolbarBg: @navbarBg;
@toolbarBorderColor: @navbarBorderColor;
@navbarLinksColor: @blue;
@tabbarLinksColor: #929292;
@tabbarActiveLinksColor: @blue;

.navbar-inner, .toolbar-inner {
    .full-size();
    padding: 0 8px;
    .border-box();
    .flexbox();
    .justify-content(space-between);
    .align-items(center);
}
.navbar, .toolbar {
    height: 44px;
    width: 100%;
    .border-box();
    font-size: 17px;
    position: relative;
    margin: 0;
    z-index: 500;
    b {
        font-weight: 500;
    }
    a.link {
        line-height: 44px;
        height: 44px;
        color: @navbarLinksColor;
        text-decoration: none;
        position: relative;
        .flexbox();
        .justify-content(flex-start);
        .align-items(center);
        .transition(300ms);
        &:active{
            opacity: 0.3;
            .transition(0ms);
        }
        i+span, i+i, span+i, span+span {
            margin-left: 7px;
        }
    }
    a.icon-only {
        min-width: 44px;
        .flexbox();
        .justify-content(center);
        .align-items(center);
        margin: 0;
    }
    i.icon {
        display: block;
    }
}
.navbar {
    left: 0;
    top: 0;
    background: @navbarBg;
    border-bottom: 1px solid @navbarBorderColor;
    .center {
        font-size: 17px;
        font-weight: 500;
        text-align: center;
        margin: 0;
        position: relative;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        line-height: 44px;
        .flex-shrink(10);
        .flexbox();
        .align-items(center);
    }
    .left, .right {
        .flex-shrink(0);
        .flexbox();
        .justify-content(flex-start);
        .align-items(center);
        .translate3d(0,0,0);
        a+a {
            margin-left: 15px;
        }
    }
    .left {
        margin-right: 10px;
    }
    .right {
        margin-left: 10px;
    }

}
.toolbar {
    left: 0;
    bottom: 0;
    background: @toolbarBg;
    border-top: 1px solid @toolbarBorderColor;
    a {
        .flex-shrink(1);
        position: relative;
        white-space: nowrap;
        text-overflow:ellipsis;
        overflow: hidden;
    }
}

// Tabbar
.tabbar {
    color: @tabbarLinksColor;
    z-index: 5001;
    a {
        color: @tabbarLinksColor;
    }
    a.active {
        color: @tabbarActiveLinksColor;
    }
    a.tab-link {
        width: 100%;
        .border-box();
        .flexbox();
        .justify-content(space-between);
        .align-items(center);
        overflow: visible;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}
.tabbar-labels {
    height: 50px;
    a.tab-link {
        padding-top: 4px;
        padding-bottom: 4px;
        height: 100%;
    }
    span.tabbar-label {
        line-height: 1;
        display: block;
        letter-spacing: 0.01em;
        font-size: 10px;
        position: relative;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
@media all and (min-width:768px) {
    .tabbar {
        .toolbar-inner {
            .justify-content(center);
        }
        a.tab-link {
            width: auto;
            min-width: 105px;
        }
    }
    .tabbar-labels {
        height: 55px;
        span.tabbar-label {
            font-size: 14px;
        }
    }
}

// Bars animations
@toolbarDuration: 400ms;

.navbar-from-right-to-center {
    .left, .right, .center {
        .animation(navbarElementFadeIn @toolbarDuration forwards);
    }
    .sliding {
        opacity: 1;
    }

}
.navbar-from-center-to-right {
    .left, .right, .center {
        .animation(navbarElementFadeOut @toolbarDuration forwards);
    }
    .sliding {
        opacity: 0;
    }
}
@-webkit-keyframes navbarElementFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes navbarElementFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.navbar-from-center-to-left {
    .left, .right, .center {
        .animation(navbarElementFadeOut @toolbarDuration forwards);
    }
    .sliding {
        opacity: 0;
    }
}
.navbar-from-left-to-center {
    .left, .right, .center {
        .animation(navbarElementFadeIn @toolbarDuration forwards);
    }
    .sliding {
        opacity: 1;
    }
}
.navbar-on-left {
    .left, .right, .center {
        opacity: 0;
    }
    .sliding {
        opacity: 0;
    }
}
.navbar-on-right {
    .left, .right, .center {
        opacity: 0;
    }
    .sliding {
        opacity: 0;
    }
}
@-webkit-keyframes navbarElementFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes navbarElementFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.navbar-from-right-to-center, .navbar-from-center-to-right, .navbar-from-center-to-left, .navbar-from-left-to-center {
    .left.sliding .back.link .icon {
        .transition(@toolbarDuration);
    }
    .sliding {
        .transition(@toolbarDuration);
        .animation(none);
    }
}


Update to Bootstrap 3.0

Update to Bootstrap 3.0

// Bootstrap v3.0
// Responsive Tables

@table-float-breakpoint: 35%;
@table-caption-bg: transparent;
@table-caption-color: @headings-color;

.table {
  > caption {
    background: @table-caption-bg;
    padding: @table-cell-padding;
    color: @table-caption-color;
    text-align: left;
    font-weight: 700;
    font-size: @font-size-large;
  }
  [data-toggle="collapse"] {
    display: none;
  }
  @media (max-width: @grid-float-breakpoint) {
    [data-toggle="collapse"] {
      display: block;
      position: relative;
      float: right;
    }
    display: block;
    > caption {
      display: block;
      .clearfix();
    }
    > thead, tfoot {
      display: none;
    }
    > tbody {
      border-top: 2px solid @table-border-color;
      display: block;
      > tr {
        display: block;
        > td {
          &:first-child {
            border-left: none;
            border-right: none;
            border-bottom: none;
          }
          &:not(:first-child) {
            border: none;
          }
          display: block;
          &[role]:before {
            content: attr(role);
            display: block;
            float: left;
            margin-left: -@table-cell-padding;
            margin-top: -@table-cell-padding;
            margin-right: @table-cell-padding;
            padding: @table-cell-padding;
            font-weight: 700;
            width: @table-float-breakpoint;
          }
        }
      }
      &.table-collapse {
        height: 0;
        overflow-y: hidden;
      }
    }
    &.table-bordered {
      > tbody > tr > td {
        &:not(:first-child) {
          border-top: 1px dashed @table-border-color;
        }
        &[role]:before {
          border-right: 1px solid @table-border-color;
        }
      }
    }
    &.table-condensed {
      > tbody > tr > td[role]:before {
        margin-left: -@table-condensed-cell-padding;
        margin-top: -@table-condensed-cell-padding;
        margin-right: @table-condensed-cell-padding;
        padding: @table-condensed-cell-padding;
      }
    }
    &.table-striped > tbody > tr:nth-child(odd) > td {
      &[role]:before {
        background-color: darken(@table-bg-accent, 6.5%);
      }
    }
  }
}

.table-collapse {
  .clearfix();
  @media (min-width: @grid-float-breakpoint) {
    width: auto;
    border-top: 0;
    box-shadow: none;

    &.collapse {
      display: table-row-group !important;
      height: auto !important;
      padding-bottom: 0; // Override default setting
      overflow: visible !important;
    }

    &.in {
      overflow-y: visible;
    }
  }
}

/*!
 * Responsive table
 *
 * Copyright 2013 alcaeus@alcaeus.org
 * Styles based on Twitter Bootstrap 2.3
 */

//
// Responsive: Large desktop and up
// --------------------------------------------------
// BASELINE STYLES
// ---------------

.table-responsive {
    display: table;
    width: 100%;
    background-color: @tableBackground;
    margin-bottom: @baseLineHeight;
    border-collapse: collapse;
    border-spacing: 0;

    // Groups
    .caption {
        display: table-caption;
    }
    .thead {
        display: table-header-group;
    }
    .tbody {
        display: table-row-group;
    }
    .tfoot {
        display: table-footer-group;
    }
    .rowgroup {
        display: table-row-group;
    }
    .colgroup {
        display: table-column-group;
    }
    // Rows
    dl {
        display: table-row;
        width: 100%;
        margin: 0;
    }
    // Cells
    dt,
    dd {
        display: table-cell;
        padding: 8px;
        margin: 0;
        line-height: @baseLineHeight;
        text-align: left;
        vertical-align: top;
        border-top: 1px solid @tableBorder;
    }
    dt.collapse,
    dd.collapse {
        height: auto;
    }
    dt {
        font-weight: bold;
    }
    // Bottom align for column headings
    .thead dt {
        vertical-align: bottom;
    }
    // Hide all dts in .tbody
    .tbody dt {
        display: none;
    }
    // Remove top border from thead by default
    .caption + .thead dl:first-child dt,
    .caption + .thead dl:first-child dd,
    .colgroup + .thead dl:first-child dt,
    .colgroup + .thead dl:first-child dd,
    .thead:first-child dl:first-child dt,
    .thead:first-child dl:first-child dd {
        border-top: 0;
    }
    // Account for multiple tbody instances
    .tbody + .tbody {
        border-top: 2px solid @tableBorder;
    }

    // Nesting
    .table {
        background-color: @bodyBackground;
    }

    // Toggle button
    dl .collapse-toggle {
        padding-right: @baseLineHeight / 2;
        padding-top: @baseLineHeight / 2;
        display: none;
        float: right;
    }
}

// CONDENSED TABLE W/ HALF PADDING
// -------------------------------

.table-responsive-condensed {
    dt,
    dd {
        padding: 4px 5px;
    }
}

// BORDERED VERSION
// ----------------

.table-responsive-bordered {
    border: 1px solid @tableBorder;
    border-collapse: separate; // Done so we can round those corners!
    *border-collapse: collapse; // IE7 can't round corners anyway
    border-left: 0;
    .border-radius(@baseBorderRadius);
    dt,
    dd {
        border-left: 1px solid @tableBorder;
        &.collapse-toggle {
            border-left: none;
        }
    }
    // Prevent a double border
    .caption + .thead dl:first-child dt,
    .caption + .tbody dl:first-child dt,
    .caption + .tbody dl:first-child dd,
    .colgroup + .thead dl:first-child dt,
    .colgroup + .tbody dl:first-child dt,
    .colgroup + .tbody dl:first-child dd,
    .thead:first-child dl:first-child dt,
    .tbody:first-child dl:first-child dt,
    .tbody:first-child dl:first-child dd {
        border-top: 0;
    }
    // For first dt/dd in the first row in the first .thead or .tbody
    .thead:first-child dl:first-child > dt:first-child,
    .tbody:first-child dl:first-child > dd:first-child,
    .tbody:first-child dl:first-child > dt:first-child {
        .border-top-left-radius(@baseBorderRadius);
    }
    // For last dt/dd in the first row in the first .thead or .tbody
    .thead:first-child dl:first-child > dt:last-child,
    .tbody:first-child dl:first-child > dd:last-child,
    .tbody:first-child dl:first-child > dt:last-child {
        .border-top-right-radius(@baseBorderRadius);
    }
    // For first dt/dd (can be either) in the last row in the last .thead, .tbody, and .tfoot
    .thead:last-child dl:last-child > dt:first-child,
    .tbody:last-child dl:last-child > dd:first-child,
    .tbody:last-child dl:last-child > dt:first-child,
    .tfoot:last-child dl:last-child > dd:first-child,
    .tfoot:last-child dl:last-child > dt:first-child {
        .border-bottom-left-radius(@baseBorderRadius);
    }
    // For last dt/dd (can be either) in the last row in the last .thead, .tbody, and .tfoot
    .thead:last-child dl:last-child > dt:last-child,
    .tbody:last-child dl:last-child > dd:last-child,
    .tbody:last-child dl:last-child > dt:last-child,
    .tfoot:last-child dl:last-child > dd:last-child,
    .tfoot:last-child dl:last-child > dt:last-child {
        .border-bottom-right-radius(@baseBorderRadius);
    }

    // Clear border-radius for first and last dd in the last row in the last .tbody for table with .tfoot
    .tfoot + .tbody:last-child dl:last-child dd:first-child {
        .border-bottom-left-radius(0);
    }
    .tfoot + .tbody:last-child dl:last-child dd:last-child {
        .border-bottom-right-radius(0);
    }

    // Special fixes to round the left border on the first dd/dt
    .caption + .thead dl:first-child dt:first-child,
    .caption + .tbody dl:first-child dd:first-child,
    .colgroup + .thead dl:first-child dt:first-child,
    .colgroup + .tbody dl:first-child dd:first-child {
        .border-top-left-radius(@baseBorderRadius);
    }
    .caption + .thead dl:first-child dt:last-child,
    .caption + .tbody dl:first-child dd:last-child,
    .colgroup + .thead dl:first-child dt:last-child,
    .colgroup + .tbody dl:first-child dd:last-child {
        .border-top-right-radius(@baseBorderRadius);
    }
}

// ZEBRA-STRIPING
// --------------

// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-responsive-striped {
    .tbody {
        > dl:nth-child(odd) > dd,
        > dl:nth-child(odd) > dt,
        > dl:nth-child(odd) .collapse-toggle {
            background-color: @tableBackgroundAccent;
        }
    }
}

// HOVER EFFECT
// ------------
// Placed here since it has to come after the potential zebra striping
.table-responsive-hover {
    .tbody {
        dl:hover > dd,
        dl:hover > dt,
        dl:hover .collapse-toggle {
            background-color: @tableBackgroundHover;
        }
    }
}

// TABLE CELL SIZING
// -----------------

// Reset default grid behavior
.table-responsive dd[class*="span"],
.table-responsive dt[class*="span"],
.row-fluid .table-responsive dd[class*="span"],
.row-fluid .table-responsive dt[class*="span"] {
    display: table-cell;
    float: none; // undo default grid column styles
    margin-left: 0; // undo default grid column styles
}

// Change the column widths to account for td/th padding
.table-responsive dd,
.table-responsive dt {
    &.span1 { .tableColumns(1);
    }
    &.span2 { .tableColumns(2);
    }
    &.span3 { .tableColumns(3);
    }
    &.span4 { .tableColumns(4);
    }
    &.span5 { .tableColumns(5);
    }
    &.span6 { .tableColumns(6);
    }
    &.span7 { .tableColumns(7);
    }
    &.span8 { .tableColumns(8);
    }
    &.span9 { .tableColumns(9);
    }
    &.span10 { .tableColumns(10);
    }
    &.span11 { .tableColumns(11);
    }
    &.span12 { .tableColumns(12);
    }
}

// TABLE BACKGROUNDS
// -----------------
// Exact selectors below required to override .table-responsive-striped

.table-responsive .tbody dl {
    &.success > dd {
        background-color: @successBackground;
    }
    &.error > dd {
        background-color: @errorBackground;
    }
    &.warning > dd {
        background-color: @warningBackground;
    }
    &.info > dd {
        background-color: @infoBackground;
    }
}

// Striped states for .table-responsive-striped
.table-responsive-striped .tbody dl:nth-child(odd) {
    &.success:hover > dd {
        background-color: darken(@successBackground, 5%);
    }
    &.error:hover > dd {
        background-color: darken(@errorBackground, 5%);
    }
    &.warning:hover > dd {
        background-color: darken(@warningBackground, 5%);
    }
    &.info:hover > dd {
        background-color: darken(@infoBackground, 5%);
    }
}

// Hover states for .table-responsive-hover
// Placed here since it has to come after the potential zebra striping
.table-responsive-hover .tbody dl {
    &.success:hover > dd {
        background-color: darken(@successBackground, 5%);
    }
    &.error:hover > dd {
        background-color: darken(@errorBackground, 5%);
    }
    &.warning:hover > dd {
        background-color: darken(@warningBackground, 5%);
    }
    &.info:hover > dd {
        background-color: darken(@infoBackground, 5%);
    }
}

//
// Responsive: Landscape phone to desktop/tablet
// --------------------------------------------------

@media (max-width: 767px) {
    // BASELINE STYLES
    // ---------------
    .table-responsive {
        display: block;
        // Groups
        .caption {
            display: block;
        }
        .thead {
            display: none;
        }
        .tbody {
            display: block;
        }
        .tfoot {
            display: none;
        }
        .rowgroup {
            display: block;
        }
        .colgroup {
            display: block;
        }
        // Rows
        dl {
            display: list-item;
            list-style-type: none;
            margin: 0;
        }
        // Cells
        dt,
        dd {
            display: list-item;
            padding: 0 @baseLineHeight / 2;
            border-top: 0;
        }
        dt.collapse,
        dd.collapse {
            height: 0;
        }
        dl dt:first-of-type {
            padding-top: @baseLineHeight / 2;
        }
        dd.collapse {
            padding-bottom: 0;
        }
        dd,
        dd.collapse.in {
            padding-left: @baseLineHeight;
            padding-bottom: @baseLineHeight / 2;
        }
        // Show all dts in .tbody
        .tbody dt {
            display: list-item;
        }
        .tbody dl dt:last-child,
        .tbody dl dd:last-child {
            border-bottom: 1px solid @tableBorder;
        }
        .tbody dl:last-child dt:last-child,
        .tbody dl:last-child dd:last-child {
            border-bottom: 0;
        }

        // Toggle button
        dl .collapse-toggle {
            display: block;
        }
    }
}

@media (max-width: 767px) {
  .table-responsive dl dt {
    &:after {
      content: ":";
    }
    &.collapse-toggle:after {
      content: "";
    }
  }
}


fix wrapping really long lines with no spaces

@import "variables";

.messages {
  flex: 1;
  overflow: auto;
  position: absolute;
  top: 0;
  bottom: 42px;
  left: 0;
  right: 4px;
  margin: 0;
  font-size: 12px;
  overflow-y: auto;
}

.message {
  margin-bottom: 4px;
  margin-top: 2px;
  word-wrap: break-word;
}

.lobby-messages {
  height: 400px;
  font-size: 12px;
  overflow-y: auto;
}

.chat {
  width: 307px;
  position: absolute;
  top: 317px;
  bottom: 0;
}

.chat > form {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 4px;
}

.chat > form input {
  width: 100%;
}

.message-list {
  height: 200px;
  width: 100%;
  border: 1px solid @brand-primary;
  border-radius: 4px;
  margin-bottom: 5px;
  overflow: auto;
  padding: 5px 10px;
}

.user-list {
  >div {
    margin-bottom: 5px;
  }

  height: 400px;
  margin-left: 0px;
  margin-right: 0px;
  overflow-y: scroll;
}

.chat-box {
  margin-left: 5px;
}

@import "variables";

.messages {
  flex: 1;
  overflow: auto;
  position: absolute;
  top: 0;
  bottom: 42px;
  left: 0;
  right: 4px;
  margin: 0;
  font-size: 12px;
  overflow-y: auto;
}

.message {
  margin-bottom: 4px;
  margin-top: 2px;
}

.lobby-messages {
  height: 400px;
  font-size: 12px;
  overflow-y: auto;
}

.chat {
  width: 307px;
  position: absolute;
  top: 317px;
  bottom: 0;
}

.chat > form {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 4px;
}

.chat > form input {
  width: 100%;
}

.message-list {
  height: 200px;
  width: 100%;
  border: 1px solid @brand-primary;
  border-radius: 4px;
  margin-bottom: 5px;
  overflow: auto;
  padding: 5px 10px;
}

.user-list {
  >div {
    margin-bottom: 5px;
  }

  height: 400px;
  margin-left: 0px;
  margin-right: 0px;
  overflow-y: scroll;
}

.chat-box {
  margin-left: 5px;
}


code.less: also set default monospace font for `<kbd>` and `<samp>`

//
// Code (inline and blocK)
// --------------------------------------------------

// Inline and block code styles
code,
kdb,
pre,
samp {
  font-family: @font-family-monospace;
}

// Inline code
code {
  padding: 2px 4px;
  font-size: 90%;
  color: @code-color;
  background-color: @code-bg;
  white-space: nowrap;
  border-radius: @border-radius-base;
}

// Blocks of code
pre {
  display: block;
  padding: ((@line-height-computed - 1) / 2);
  margin: 0 0 (@line-height-computed / 2);
  font-size: (@font-size-base - 1); // 14px to 13px
  line-height: @line-height-base;
  word-break: break-all;
  word-wrap: break-word;
  color: @pre-color;
  background-color: @pre-bg;
  border: 1px solid @pre-border-color;
  border-radius: @border-radius-base;

  // Make prettyprint styles more spaced out for readability
  &.prettyprint {
    margin-bottom: @line-height-computed;
  }

  // Account for some code outputs that place code tags in pre tags
  code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border: 0;
  }
}

// Enable scrollable blocks of code
.pre-scrollable {
  max-height: @pre-scrollable-max-height;
  overflow-y: scroll;
}

//
// Code (inline and blocK)
// --------------------------------------------------

// Inline and block code styles
code,
pre {
  font-family: @font-family-monospace;
}

// Inline code
code {
  padding: 2px 4px;
  font-size: 90%;
  color: @code-color;
  background-color: @code-bg;
  white-space: nowrap;
  border-radius: @border-radius-base;
}

// Blocks of code
pre {
  display: block;
  padding: ((@line-height-computed - 1) / 2);
  margin: 0 0 (@line-height-computed / 2);
  font-size: (@font-size-base - 1); // 14px to 13px
  line-height: @line-height-base;
  word-break: break-all;
  word-wrap: break-word;
  color: @pre-color;
  background-color: @pre-bg;
  border: 1px solid @pre-border-color;
  border-radius: @border-radius-base;

  // Make prettyprint styles more spaced out for readability
  &.prettyprint {
    margin-bottom: @line-height-computed;
  }

  // Account for some code outputs that place code tags in pre tags
  code {
    padding: 0;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border: 0;
  }
}

// Enable scrollable blocks of code
.pre-scrollable {
  max-height: @pre-scrollable-max-height;
  overflow-y: scroll;
}