diff options
Diffstat (limited to 'amelia/variables.less')
| -rw-r--r-- | amelia/variables.less | 103 |
1 files changed, 60 insertions, 43 deletions
diff --git a/amelia/variables.less b/amelia/variables.less index e83c75f0..8a0f2bc2 100644 --- a/amelia/variables.less +++ b/amelia/variables.less @@ -1,4 +1,4 @@ -// Amelia 3.0.0 +// Amelia 3.0.1 // Variables // -------------------------------------------------- @@ -48,12 +48,21 @@ @font-size-large: ceil(@font-size-base * 1.25); // ~18px @font-size-small: ceil(@font-size-base * 0.85); // ~12px +@font-size-h1: floor(@font-size-base * 2.6); // ~36px +@font-size-h2: floor(@font-size-base * 2.15); // ~30px +@font-size-h3: ceil(@font-size-base * 1.7); // ~24px +@font-size-h4: ceil(@font-size-base * 1.25); // ~18px +@font-size-h5: @font-size-base; +@font-size-h6: ceil(@font-size-base * 0.85); // ~12px + @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-family: 'Lobster', cursive; @headings-font-weight: 500; @headings-line-height: 1.1; +@headings-color: inherit; + // Iconography // ------------------------- @@ -82,6 +91,7 @@ @border-radius-large: 6px; @border-radius-small: 3px; +@component-active-color: #fff; @component-active-bg: lighten(@body-bg, 10%); @caret-width-base: 4px; @@ -165,13 +175,13 @@ @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-link-active-color: #fff; +@dropdown-link-active-bg: @component-active-bg; + @dropdown-link-disabled-color: @gray-lighter; @dropdown-header-color: @text-muted; @@ -200,25 +210,33 @@ // -------------------------------------------------- // Extra small screen / phone +// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1 @screen-xs: 480px; -@screen-phone: @screen-xs; +@screen-xs-min: @screen-xs; +@screen-phone: @screen-xs-min; // Small screen / tablet +// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1 @screen-sm: 768px; -@screen-tablet: @screen-sm; +@screen-sm-min: @screen-sm; +@screen-tablet: @screen-sm-min; // Medium screen / desktop +// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1 @screen-md: 992px; -@screen-desktop: @screen-md; +@screen-md-min: @screen-md; +@screen-desktop: @screen-md-min; // Large screen / wide desktop +// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 @screen-lg: 1200px; -@screen-lg-desktop: @screen-lg; +@screen-lg-min: @screen-lg; +@screen-lg-desktop: @screen-lg-min; // So media queries don't overlap when required, provide a maximum -@screen-xs-max: (@screen-sm - 1); -@screen-sm-max: (@screen-md - 1); -@screen-md-max: (@screen-lg - 1); +@screen-xs-max: (@screen-sm-min - 1); +@screen-sm-max: (@screen-md-min - 1); +@screen-md-max: (@screen-lg-min - 1); // Grid system @@ -229,7 +247,7 @@ // 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; +@grid-float-breakpoint: @screen-sm-min; // Navbar @@ -238,13 +256,14 @@ // Basics of a navbar @navbar-height: 50px; @navbar-margin-bottom: @line-height-computed; -@navbar-default-color: @gray-light; -@navbar-default-bg: @brand-primary; -@navbar-default-border: darken(@navbar-default-bg, 6.5%); @navbar-border-radius: @border-radius-base; @navbar-padding-horizontal: floor(@grid-gutter-width / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); +@navbar-default-color: @gray-light; +@navbar-default-bg: @brand-primary; +@navbar-default-border: darken(@navbar-default-bg, 6.5%); + // Navbar links @navbar-default-link-color: #fff; @navbar-default-link-hover-color: #fff; @@ -286,13 +305,6 @@ @navbar-inverse-brand-hover-color: #fff; @navbar-inverse-brand-hover-bg: none; -// 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; - // Inverted navbar toggle @navbar-inverse-toggle-hover-bg: @navbar-inverse-link-hover-bg; @navbar-inverse-toggle-icon-bar-bg: #fff; @@ -305,8 +317,8 @@ @nav-link-padding: 10px 15px; @nav-link-hover-bg: lighten(@body-bg, 10%); -@nav-disabled-link-color: @gray-light; -@nav-disabled-link-hover-color: @gray-light; +@nav-disabled-link-color: @gray-lighter; +@nav-disabled-link-hover-color: @gray-lighter; @nav-open-link-hover-color: @nav-link-hover-bg; @nav-open-caret-border-color: @nav-link-hover-bg; @@ -324,6 +336,7 @@ @nav-tabs-justified-active-link-border-color: transparent; // Pills +@nav-pills-border-radius: @border-radius-base; @nav-pills-active-link-hover-bg: @component-active-bg; @nav-pills-active-link-hover-color: #fff; @@ -334,7 +347,7 @@ @pagination-bg: lighten(@body-bg, 5%); @pagination-border: transparent; -@pagination-hover-bg: @gray-lighter; +@pagination-hover-bg: @component-active-bg; @pagination-active-bg: lighten(@body-bg, 10%); @pagination-active-color: #fff; @@ -346,7 +359,7 @@ // ------------------------- @pager-border-radius: 15px; -@pager-disabled-color: #fff; +@pager-disabled-color: @gray-lighter; // Jumbotron @@ -355,21 +368,13 @@ @jumbotron-padding: 30px; @jumbotron-color: inherit; @jumbotron-bg: darken(@body-bg, 5%); - @jumbotron-heading-color: inherit; +@jumbotron-font-size: ceil(@font-size-base * 1.5); // Form states and alerts // ------------------------- -@state-warning-text: #fff; -@state-warning-bg: @brand-warning; -@state-warning-border: darken(spin(@state-warning-bg, -10), 3%); - -@state-danger-text: #fff; -@state-danger-bg: @brand-danger; -@state-danger-border: darken(spin(@state-danger-bg, -10), 3%); - @state-success-text: #fff; @state-success-bg: @brand-success; @state-success-border: darken(spin(@state-success-bg, -10), 5%); @@ -378,6 +383,14 @@ @state-info-bg: @brand-info; @state-info-border: darken(spin(@state-info-bg, -10), 7%); +@state-warning-text: #fff; +@state-warning-bg: @brand-warning; +@state-warning-border: darken(spin(@state-warning-bg, -10), 3%); + +@state-danger-text: #fff; +@state-danger-bg: @brand-danger; +@state-danger-border: darken(spin(@state-danger-bg, -10), 3%); + // Tooltips // ------------------------- @@ -478,7 +491,7 @@ @list-group-border-radius: @border-radius-base; @list-group-hover-bg: lighten(@body-bg, 10%); -@list-group-active-color: #fff; +@list-group-active-color: @component-active-color; @list-group-active-bg: @component-active-bg; @list-group-active-border: @list-group-border; @@ -493,7 +506,7 @@ @panel-border-radius: @border-radius-base; @panel-footer-bg: @panel-default-heading-bg; -@panel-default-text: @gray-dark; +@panel-default-text: #fff; @panel-default-border: darken(@body-bg, 5%); @panel-default-heading-bg: lighten(@body-bg, 15%); @@ -551,8 +564,9 @@ // Breadcrumbs // ------------------------- @breadcrumb-bg: lighten(@body-bg, 5%); -@breadcrumb-color: #ccc; +@breadcrumb-color: @gray-lighter; @breadcrumb-active-color: #fff; +@breadcrumb-separator: "/"; // Carousel @@ -573,8 +587,8 @@ // Close // ------------------------ -@close-color: #000; @close-font-weight: bold; +@close-color: #000; @close-text-shadow: 0 1px 0 #fff; @@ -611,10 +625,13 @@ // -------------------------------------------------- // Small screen / tablet -@container-tablet: ((720px + @grid-gutter-width)); +@container-tablet: ((720px + @grid-gutter-width)); +@container-sm: @container-tablet; // Medium screen / desktop -@container-desktop: ((940px + @grid-gutter-width)); +@container-desktop: ((940px + @grid-gutter-width)); +@container-md: @container-desktop; // Large screen / wide desktop -@container-lg-desktop: ((1140px + @grid-gutter-width)); +@container-large-desktop: ((1140px + @grid-gutter-width)); +@container-lg: @container-large-desktop; |