From 14c61be7fa8145279f527e4b36ab70d19c0abd5c Mon Sep 17 00:00:00 2001 From: Thomas Park Date: Sat, 17 Aug 2013 09:37:53 -0700 Subject: update themes to 3.0.0-rc2 --- custom/index.html | 121 ++++++++++++++++++--------------- custom/variables.less | 181 +++++++++++++++++++++++++++++++------------------- 2 files changed, 179 insertions(+), 123 deletions(-) mode change 100644 => 100755 custom/variables.less (limited to 'custom') diff --git a/custom/index.html b/custom/index.html index f4a36f3d..5aeae58b 100644 --- a/custom/index.html +++ b/custom/index.html @@ -24,16 +24,19 @@ +
- Bootswatch - - @@ -116,13 +113,15 @@
- - Brand -
+
+ + Brand +
+
-
+
-
    + -
    +
    -
      +
      • Link
      • Dropdown @@ -312,10 +313,10 @@

        - + - - + +

        @@ -640,7 +641,7 @@
- +
@@ -648,7 +649,7 @@
- +
@@ -845,7 +846,7 @@

Alerts

-
+

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

@@ -855,19 +856,19 @@
-
+
Oh snap! Change a few things up and try submitting again.
-
+
Well done! You successfully read this important alert message.
-
+
Heads up! This alert needs your attention, but it's not super important.
@@ -877,7 +878,7 @@

Labels

- Default + Default Success Warning Danger @@ -1048,14 +1049,20 @@
- Basic panel +
+ Basic panel +
Panel heading
- Panel content +
+ Panel content +
- Panel content +
+ Panel content +
Panel footer
@@ -1064,13 +1071,17 @@

Panel primary

- Panel content +
+ Panel content +

Panel success

- Panel content +
+ Panel content +
@@ -1084,13 +1095,17 @@

Panel danger

- Panel content +
+ Panel content +

Panel info

- Panel content +
+ Panel content +
diff --git a/custom/variables.less b/custom/variables.less old mode 100644 new mode 100755 index ab53d125..07a0227b --- a/custom/variables.less +++ b/custom/variables.less @@ -60,21 +60,26 @@ // ------------------------- // Based on 14px font-size and 1.428 line-height (~20px to start) -@padding-base-vertical: 8px; +@padding-base-vertical: 6px; @padding-base-horizontal: 12px; -@padding-large-vertical: 14px; +@padding-large-vertical: 10px; @padding-large-horizontal: 16px; @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,31 +98,33 @@ // Buttons // ------------------------- -@btn-default-color: #fff; -@btn-default-bg: #474949; -@btn-default-border: @btn-default-bg; +@btn-font-weight: bold; + +@btn-default-color: #333; +@btn-default-bg: #fff; +@btn-default-border: #ccc; -@btn-primary-color: @btn-default-color; +@btn-primary-color: #fff; @btn-primary-bg: @brand-primary; -@btn-primary-border: @btn-primary-bg; +@btn-primary-border: darken(@btn-primary-bg, 5%); -@btn-success-color: @btn-default-color; +@btn-success-color: #fff; @btn-success-bg: @brand-success; -@btn-success-border: @btn-success-bg; +@btn-success-border: darken(@btn-success-bg, 5%); -@btn-warning-color: @btn-default-color; +@btn-warning-color: #fff; @btn-warning-bg: @brand-warning; -@btn-warning-border: @btn-warning-bg; +@btn-warning-border: darken(@btn-warning-bg, 5%); -@btn-danger-color: @btn-default-color; +@btn-danger-color: #fff; @btn-danger-bg: @brand-danger; -@btn-danger-border: @btn-danger-bg; +@btn-danger-border: darken(@btn-danger-bg, 5%); -@btn-info-color: @btn-default-color; +@btn-info-color: #fff; @btn-info-bg: @brand-info; -@btn-info-border: @btn-info-bg; +@btn-info-border: darken(@btn-info-bg, 5%); -@btn-hover-color: @btn-default-color; +@btn-link-disabled-color: @gray-light; // Forms @@ -126,17 +133,21 @@ @input-bg: #fff; @input-bg-disabled: @gray-lighter; +@input-color: @gray; @input-border: #ccc; @input-border-radius: @border-radius-base; +@input-border-focus: #66afe9; @input-color-placeholder: @gray-light; @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); -@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); +@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); +@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); +@legend-color: @gray-dark; @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: @gray-light; + +@dropdown-header-color: @gray-light; + @dropdown-caret-color: #000; @@ -174,15 +189,54 @@ @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: #eee; -@navbar-padding-horizontal: floor(@grid-gutter-width / 2); // ~15px +@navbar-bg: #f8f8f8; +@navbar-border: darken(@navbar-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 links @@ -190,7 +244,7 @@ @navbar-link-hover-color: #333; @navbar-link-hover-bg: transparent; @navbar-link-active-color: #555; -@navbar-link-active-bg: darken(@navbar-bg, 10%); +@navbar-link-active-bg: darken(@navbar-bg, 6.5%); @navbar-link-disabled-color: #ccc; @navbar-link-disabled-bg: transparent; @@ -210,6 +264,7 @@ // Reset inverted navbar basics @navbar-inverse-color: @gray-light; @navbar-inverse-bg: #222; +@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); // Inverted navbar links @navbar-inverse-link-color: @gray-light; @@ -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-active-bg: #f5f5f5; -@pagination-active-color: @gray-light; + +@pagination-hover-bg: @gray-lighter; + +@pagination-active-bg: @brand-primary; +@pagination-active-color: #fff; + @pagination-disabled-color: @gray-light; + // Pager // ------------------------- @@ -314,7 +375,7 @@ // ------------------------- @tooltip-max-width: 200px; @tooltip-color: #fff; -@tooltip-bg: rgba(0,0,0,.9); +@tooltip-bg: #000; @tooltip-arrow-width: 5px; @tooltip-arrow-color: @tooltip-bg; @@ -339,6 +400,9 @@ // Labels // ------------------------- + +@label-default-bg: @gray-light; +@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,49 +596,14 @@ @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; +@container-tablet: 720px; // 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; +@container-large-desktop: 1140px; -- cgit v1.2.3