mirror of https://github.com/twbs/ratchet.git
connors
11 years ago
15 changed files with 302 additions and 46 deletions
@ -0,0 +1,112 @@ |
|||||||
|
/* |
||||||
|
* ===================================================== |
||||||
|
* Ratchet v2.0.0 |
||||||
|
* Copyright 2013 Connor Sears, Dave Gamache, and Jacob Thornton |
||||||
|
* Licensed under http://www.opensource.org/licenses/MIT |
||||||
|
* |
||||||
|
* Designed and built by @connors, @dhg, and @fat. |
||||||
|
* ===================================================== |
||||||
|
*/ |
||||||
|
|
||||||
|
[class*="bar-"] { |
||||||
|
background-color: rgba(30, 176, 233, 0.98); |
||||||
|
} |
||||||
|
[class*="bar-"].bar-standard, [class*="bar-"].bar-footer-secondary { |
||||||
|
background-color: rgba(238, 238, 238, 0.98); |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.tab-label { |
||||||
|
color: rgba(255, 255, 255, 0.5); |
||||||
|
} |
||||||
|
|
||||||
|
.tab-item.active .tab-label { |
||||||
|
color: white; |
||||||
|
} |
||||||
|
|
||||||
|
[class*="button"] { |
||||||
|
color: rgba(0, 0, 0, 0.3); |
||||||
|
border-color: rgba(0, 0, 0, 0.3); |
||||||
|
} |
||||||
|
[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled { |
||||||
|
background-color: rgba(0, 0, 0, 0.3); |
||||||
|
} |
||||||
|
|
||||||
|
.button-primary { |
||||||
|
color: #1eb0e9; |
||||||
|
border-color: #1eb0e9; |
||||||
|
} |
||||||
|
.button-primary:active, .button-primary.active, .button-primary.button-filled { |
||||||
|
background-color: #1eb0e9; |
||||||
|
} |
||||||
|
|
||||||
|
.button-positive { |
||||||
|
color: #34ba15; |
||||||
|
border-color: #34ba15; |
||||||
|
} |
||||||
|
.button-positive:active, .button-positive.active, .button-positive.button-filled { |
||||||
|
background-color: #34ba15; |
||||||
|
} |
||||||
|
|
||||||
|
.button-negative { |
||||||
|
color: #e71e1e; |
||||||
|
border-color: #e71e1e; |
||||||
|
} |
||||||
|
.button-negative:active, .button-negative.active, .button-negative.button-filled { |
||||||
|
background-color: #e71e1e; |
||||||
|
} |
||||||
|
|
||||||
|
.bar-title [class*="button"] { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.bar-title .button:active, |
||||||
|
.bar-title .button.active, |
||||||
|
.bar-title .button-prev:active, |
||||||
|
.bar-title .button-prev.active, |
||||||
|
.bar-title .button-next:active, |
||||||
|
.bar-title .button-next.active, |
||||||
|
.bar-title .button-primary:active, |
||||||
|
.bar-title .button-primary.active { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.bar-title .button-prev:before, |
||||||
|
.bar-title .button-prev:after, |
||||||
|
.bar-title .button-next:before, |
||||||
|
.bar-title .button-next:after { |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.segmented-controller { |
||||||
|
border: -color #1eb0e9; |
||||||
|
} |
||||||
|
.segmented-controller li { |
||||||
|
border-color: #1eb0e9; |
||||||
|
} |
||||||
|
.segmented-controller li > a { |
||||||
|
color: #1eb0e9; |
||||||
|
} |
||||||
|
.segmented-controller li.active { |
||||||
|
background-color: #1eb0e9; |
||||||
|
} |
||||||
|
|
||||||
|
.bar-title .segmented-controller { |
||||||
|
border-color: #fff; |
||||||
|
} |
||||||
|
.bar-title .segmented-controller li { |
||||||
|
border-color: #fff; |
||||||
|
} |
||||||
|
.bar-title .segmented-controller li > a { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.bar-title .segmented-controller li.active { |
||||||
|
background-color: rgba(255, 255, 255, 0.4); |
||||||
|
} |
||||||
|
|
||||||
|
input[type=search] { |
||||||
|
color: #555; |
||||||
|
background-color: rgba(0, 0, 0, 0.1); |
||||||
|
border-radius: 17px; |
||||||
|
} |
||||||
@ -0,0 +1,169 @@ |
|||||||
|
// |
||||||
|
// Variable overrides |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
// Color overrides |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
// Main theme colors |
||||||
|
$primary-color: #1eb0e9; |
||||||
|
$chrome-color: rgba(30,176,233,.98); |
||||||
|
|
||||||
|
// Action colors |
||||||
|
$default-color: rgba(0, 0, 0, .3); |
||||||
|
$positive-color: #34ba15; |
||||||
|
$negative-color: #e71e1e; |
||||||
|
|
||||||
|
|
||||||
|
// Bars |
||||||
|
// -------------------------------------------------- |
||||||
|
[class*="bar-"] { |
||||||
|
background-color: $chrome-color; |
||||||
|
|
||||||
|
&.bar-standard, |
||||||
|
&.bar-footer-secondary { |
||||||
|
background-color: rgba(238,238,238,.98); |
||||||
|
} |
||||||
|
} |
||||||
|
.title { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
.tab-label { |
||||||
|
color: rgba(255,255,255,.5); |
||||||
|
} |
||||||
|
.tab-item.active .tab-label { |
||||||
|
color: rgba(255,255,255,1); |
||||||
|
} |
||||||
|
|
||||||
|
// Buttons |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
[class*="button"] { |
||||||
|
color: $default-color; |
||||||
|
border-color: $default-color; |
||||||
|
|
||||||
|
&:active, |
||||||
|
&.active, |
||||||
|
&.button-filled { |
||||||
|
background-color: $default-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Primary button (Default color is blue) |
||||||
|
.button-primary { |
||||||
|
color: $primary-color; |
||||||
|
border-color: $primary-color; |
||||||
|
|
||||||
|
&:active, |
||||||
|
&.active, |
||||||
|
&.button-filled { |
||||||
|
background-color: $primary-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Positive button (Default color is green) |
||||||
|
.button-positive { |
||||||
|
color: $positive-color; |
||||||
|
border-color: $positive-color; |
||||||
|
|
||||||
|
&:active, |
||||||
|
&.active, |
||||||
|
&.button-filled { |
||||||
|
background-color: $positive-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Negative button (Default color is red) |
||||||
|
.button-negative { |
||||||
|
color: $negative-color; |
||||||
|
border-color: $negative-color; |
||||||
|
|
||||||
|
&:active, |
||||||
|
&.active, |
||||||
|
&.button-filled { |
||||||
|
background-color: $negative-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bar-title { |
||||||
|
|
||||||
|
// Generic style for all buttons in .bar-title |
||||||
|
[class*="button"] { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
// Override standard button active states |
||||||
|
.button:active, |
||||||
|
.button.active, |
||||||
|
.button-prev:active, |
||||||
|
.button-prev.active, |
||||||
|
.button-next:active, |
||||||
|
.button-next.active, |
||||||
|
.button-primary:active, |
||||||
|
.button-primary.active { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Directional buttons in nav bars |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.button-prev:before, |
||||||
|
.button-prev:after, |
||||||
|
.button-next:before, |
||||||
|
.button-next:after { |
||||||
|
background-color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Segmented controllers |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.segmented-controller { |
||||||
|
border:-color $primary-color; |
||||||
|
|
||||||
|
li { |
||||||
|
border-color: $primary-color; |
||||||
|
|
||||||
|
// Link that fills each section |
||||||
|
> a { |
||||||
|
color: $primary-color; |
||||||
|
} |
||||||
|
|
||||||
|
// Active segment of controller |
||||||
|
&.active { |
||||||
|
background-color: $primary-color; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Segmented controller in all bars |
||||||
|
// -------------------------------------------------- |
||||||
|
.bar-title .segmented-controller { |
||||||
|
border-color: #fff; |
||||||
|
|
||||||
|
li { |
||||||
|
border-color: #fff; |
||||||
|
|
||||||
|
// Link that fills each section |
||||||
|
> a { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
// Active segment of controller |
||||||
|
&.active { |
||||||
|
background-color: rgba(255,255,255,.4); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Forms |
||||||
|
// -------------------------------------------------- |
||||||
|
// Fully round search input |
||||||
|
input[type=search] { |
||||||
|
color: #555; |
||||||
|
background-color: rgba(0,0,0,.1); |
||||||
|
border-radius: 17px; |
||||||
|
} |
||||||
Loading…
Reference in new issue