diff options
Diffstat (limited to 'cerulean/variables.less')
| -rw-r--r-- | cerulean/variables.less | 131 |
1 files changed, 86 insertions, 45 deletions
diff --git a/cerulean/variables.less b/cerulean/variables.less index 97eb346e..f755da77 100644 --- a/cerulean/variables.less +++ b/cerulean/variables.less @@ -69,12 +69,17 @@ @padding-small-vertical: 5px; @padding-small-horizontal: 10px; +@line-height-large: 1.33; +@line-height-small: 1.5; + @border-radius-base: 4px; @border-radius-large: 6px; @border-radius-small: 3px; @component-active-bg: @brand-primary; +@caret-width-base: 4px; +@caret-width-large: 5px; // Tables // ------------------------- @@ -93,6 +98,8 @@ // Buttons // ------------------------- +@btn-font-weight: bold; + @btn-default-color: @text-color; @btn-default-bg: #fff; @btn-default-border: rgba(0, 0, 0, 0.1); @@ -117,7 +124,7 @@ @btn-info-bg: @brand-info; @btn-info-border: @btn-info-bg; -@btn-hover-color: #fff; +@btn-link-disabled-color: @gray-light; // Forms @@ -126,8 +133,10 @@ @input-bg: #fff; @input-bg-disabled: @gray-lighter; +@input-color: @text-color; @input-border: #ccc; @input-border-radius: @border-radius-base; +@input-border-focus: #66afe9; @input-color-placeholder: @gray-light; @@ -135,8 +144,10 @@ @input-height-large: (ceil(@font-size-large * @line-height-base) + (@padding-large-vertical * 2) + 2); @input-height-small: (ceil(@font-size-small * @line-height-base) + (@padding-small-vertical * 2) + 2); +@legend-color: @text-color; @legend-border-color: #e5e5e5; +@input-group-addon-bg: @gray-lighter; @input-group-addon-border-color: @input-border; @@ -155,6 +166,10 @@ @dropdown-link-hover-color: #fff; @dropdown-link-hover-bg: @dropdown-link-active-bg; +@dropdown-link-disabled-color: @text-muted; + +@dropdown-header-color: @text-muted; + @dropdown-caret-color: #fff; @@ -174,14 +189,53 @@ @zindex-modal-background: 1040; @zindex-modal: 1050; +// Media queries breakpoints +// -------------------------------------------------- + +// Extra small screen / phone +@screen-xsmall: 480px; +@screen-phone: @screen-xsmall; + +// Small screen / tablet +@screen-small: 768px; +@screen-tablet: @screen-small; + +// Medium screen / desktop +@screen-medium: 992px; +@screen-desktop: @screen-medium; + +// Large screen / wide desktop +@screen-large: 1200px; +@screen-large-desktop: @screen-large; + +// So media queries don't overlap when required, provide a maximum +@screen-phone-max: (@screen-small - 1); +@screen-small-max: (@screen-medium - 1); +@screen-tablet-max: (@screen-desktop - 1); +@screen-desktop-max: (@screen-large-desktop - 1); + + +// 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; + // Navbar // ------------------------- // Basics of a navbar @navbar-height: 50px; +@navbar-margin-bottom: @line-height-computed; @navbar-color: #777; @navbar-bg: @brand-primary; +@navbar-border: darken(@navbar-bg, 6.5%); +@navbar-border-radius: @border-radius-base; @navbar-padding-horizontal: floor(@grid-gutter-width / 2); // ~15px @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @@ -210,6 +264,7 @@ // Reset inverted navbar basics @navbar-inverse-color: #fff; @navbar-inverse-bg: @brand-info; +@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); // Inverted navbar links @navbar-inverse-link-color: #fff; @@ -241,6 +296,7 @@ // Navs // ------------------------- +@nav-link-padding: 10px 15px; @nav-link-hover-bg: @gray-lighter; @nav-disabled-link-color: @gray-light; @@ -271,10 +327,15 @@ @pagination-bg: #fff; @pagination-border: #ddd; + +@pagination-hover-bg: @gray-lighter; + @pagination-active-bg: #f5f5f5; @pagination-active-color: @gray-light; + @pagination-disabled-color: @gray-light; + // Pager // ------------------------- @@ -339,6 +400,9 @@ // Labels // ------------------------- + +@label-default-bg: @btn-default-bg; +@label-primary-bg: @brand-primary; @label-success-bg: @brand-success; @label-info-bg: @brand-info; @label-warning-bg: @brand-warning; @@ -366,10 +430,13 @@ // Alerts // ------------------------- +@alert-padding: 15px; +@alert-border-radius: @border-radius-base; +@alert-link-font-weight: bold; + @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; @@ -442,31 +509,33 @@ // Thumbnails // ------------------------- -@thumbnail-caption-color: @text-color; +@thumbnail-padding: 4px; @thumbnail-bg: @body-bg; @thumbnail-border: #ddd; @thumbnail-border-radius: @border-radius-base; +@thumbnail-caption-color: @text-color; +@thumbnail-caption-padding: 9px; + // Wells // ------------------------- @well-bg: #f5f5f5; -// Accordion -// ------------------------- -@accordion-border-color: #e5e5e5; - - // Badges // ------------------------- @badge-color: #fff; @badge-link-hover-color: #fff; - @badge-bg: @gray-light; + @badge-active-color: @link-color; @badge-active-bg: #fff; +@badge-font-weight: bold; +@badge-line-height: 1; +@badge-border-radius: 10px; + // Breadcrumbs // ------------------------- @@ -477,12 +546,16 @@ // Carousel // ------------------------ + @carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); @carousel-control-color: #fff; +@carousel-control-width: 15%; +@carousel-control-opacity: .5; +@carousel-control-font-size: 20px; -@carousel-indicator-border-color: #fff; @carousel-indicator-active-bg: #fff; +@carousel-indicator-border-color: #fff; @carousel-caption-color: #fff; @@ -490,6 +563,7 @@ // Close // ------------------------ @close-color: #000; +@close-font-weight: bold; @close-text-shadow: 0 1px 0 #fff; @@ -499,7 +573,9 @@ @code-bg: #f9f2f4; @pre-bg: #f5f5f5; +@pre-color: @gray-dark; @pre-border-color: #ccc; +@pre-scrollable-max-height: 340px; // Type // ------------------------ @@ -520,30 +596,6 @@ @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 // -------------------------------------------------- @@ -555,14 +607,3 @@ // 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; |