mirror of https://github.com/twbs/ratchet.git
connors
11 years ago
33 changed files with 2170 additions and 837 deletions
@ -0,0 +1,277 @@ |
|||||||
|
/* |
||||||
|
* ===================================================== |
||||||
|
* 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. |
||||||
|
* ===================================================== |
||||||
|
*/ |
||||||
|
|
||||||
|
.content { |
||||||
|
background: #111111; |
||||||
|
background: -moz-linear-gradient(top, #111111 0%, #2b2b2b 100%); |
||||||
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #111111), color-stop(100%, #2b2b2b)); |
||||||
|
background: -webkit-linear-gradient(top, #111111 0%, #2b2b2b 100%); |
||||||
|
background: -o-linear-gradient(top, #111111 0%, #2b2b2b 100%); |
||||||
|
background: -ms-linear-gradient(top, #111111 0%, #2b2b2b 100%); |
||||||
|
background: linear-gradient(to bottom, #111111 0%, #2b2b2b 100%); |
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$color-form', endColorstr='$color-to',GradientType=0 ); |
||||||
|
} |
||||||
|
|
||||||
|
[class*="bar-"] { |
||||||
|
height: 50px; |
||||||
|
background-color: #111111; |
||||||
|
border-bottom: 1px solid #565656; |
||||||
|
} |
||||||
|
[class*="bar-"].bar-header-secondary { |
||||||
|
top: 51px; |
||||||
|
} |
||||||
|
|
||||||
|
.bar-tab { |
||||||
|
height: 70px; |
||||||
|
border-top: 1px solid #565656; |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
position: static; |
||||||
|
padding-left: 10px; |
||||||
|
line-height: 50px; |
||||||
|
color: white; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.popover .bar-nav { |
||||||
|
border-bottom: 1px solid #565656; |
||||||
|
} |
||||||
|
|
||||||
|
.table-view .table-view-cell { |
||||||
|
border-bottom: 1px solid #565656; |
||||||
|
} |
||||||
|
.table-view .table-view-cell:last-child { |
||||||
|
background-image: none; |
||||||
|
} |
||||||
|
.table-view .table-view-divider { |
||||||
|
border-top: 0; |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.popover .table-view { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
select, |
||||||
|
textarea, |
||||||
|
input[type="text"], |
||||||
|
input[type=search], |
||||||
|
input[type="password"], |
||||||
|
input[type="datetime"], |
||||||
|
input[type="datetime-local"], |
||||||
|
input[type="date"], |
||||||
|
input[type="month"], |
||||||
|
input[type="time"], |
||||||
|
input[type="week"], |
||||||
|
input[type="number"], |
||||||
|
input[type="email"], |
||||||
|
input[type="url"], |
||||||
|
input[type="tel"], |
||||||
|
input[type="color"], |
||||||
|
.input-group { |
||||||
|
height: 40px; |
||||||
|
padding: 10px 15px; |
||||||
|
border: 1px solid rgba(0, 0, 0, 0.2); |
||||||
|
} |
||||||
|
|
||||||
|
input[type=search] { |
||||||
|
height: 34px; |
||||||
|
text-align: center; |
||||||
|
background-color: rgba(0, 0, 0, 0.1); |
||||||
|
border: 0; |
||||||
|
border-radius: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
input[type=search]:focus { |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
select, |
||||||
|
textarea, |
||||||
|
.input-group { |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.input-group { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.input-group input { |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.input-group input:last-child { |
||||||
|
background-image: none; |
||||||
|
} |
||||||
|
|
||||||
|
.input-row { |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.input-row:last-child, |
||||||
|
.input-row label + input { |
||||||
|
background-image: none; |
||||||
|
} |
||||||
|
|
||||||
|
[class*="button"] { |
||||||
|
border: 1px solid #565656; |
||||||
|
color: white; |
||||||
|
background-color: #111111; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
[class*="button"]:active, [class*="button"].active { |
||||||
|
color: #fff; |
||||||
|
background-color: white; |
||||||
|
} |
||||||
|
|
||||||
|
[class*="bar-"] [class*="button"] { |
||||||
|
padding-top: 9px; |
||||||
|
padding-bottom: 9px; |
||||||
|
} |
||||||
|
[class*="bar-"] .button-link { |
||||||
|
padding: 0; |
||||||
|
color: #33b5e5; |
||||||
|
line-height: 50px; |
||||||
|
} |
||||||
|
[class*="bar-"] .button-link:active, [class*="bar-"] .button-link.active { |
||||||
|
color: #1a9bcb; |
||||||
|
} |
||||||
|
|
||||||
|
.button-primary { |
||||||
|
color: #fff; |
||||||
|
border: 1px solid #33b5e5; |
||||||
|
background-color: #33b5e5; |
||||||
|
} |
||||||
|
.button-primary:active, .button-primary.active { |
||||||
|
border: 1px solid #1a9bcb; |
||||||
|
background-color: #1a9bcb; |
||||||
|
} |
||||||
|
|
||||||
|
.button-positive { |
||||||
|
color: #fff; |
||||||
|
border: 1px solid #81c700; |
||||||
|
background-color: #81c700; |
||||||
|
} |
||||||
|
.button-positive:active, .button-positive.active { |
||||||
|
border: 1px solid #609400; |
||||||
|
background-color: #609400; |
||||||
|
} |
||||||
|
|
||||||
|
.button-negative { |
||||||
|
color: #fff; |
||||||
|
border: 1px solid #f20754; |
||||||
|
background-color: #f20754; |
||||||
|
} |
||||||
|
.button-negative:active, .button-negative.active { |
||||||
|
border: 1px solid #c00643; |
||||||
|
background-color: #c00643; |
||||||
|
} |
||||||
|
|
||||||
|
.button-outlined { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
.button-outlined.button-primary { |
||||||
|
color: #33b5e5; |
||||||
|
} |
||||||
|
.button-outlined.button-positive { |
||||||
|
color: #81c700; |
||||||
|
} |
||||||
|
.button-outlined.button-negative { |
||||||
|
color: #f20754; |
||||||
|
} |
||||||
|
.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.button-link { |
||||||
|
color: #33b5e5; |
||||||
|
background-color: transparent; |
||||||
|
border: none; |
||||||
|
} |
||||||
|
.button-link:active, .button-link.active { |
||||||
|
color: #1a9bcb; |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.bar-nav .button-link { |
||||||
|
color: #33b5e5; |
||||||
|
} |
||||||
|
.bar-nav .button-link:active { |
||||||
|
color: #33b5e5; |
||||||
|
opacity: .6; |
||||||
|
} |
||||||
|
|
||||||
|
[class*="badge"].badge-inverted { |
||||||
|
color: white; |
||||||
|
} |
||||||
|
|
||||||
|
.badge-primary { |
||||||
|
color: #fff; |
||||||
|
background-color: #33b5e5; |
||||||
|
} |
||||||
|
.badge-primary.badge-inverted { |
||||||
|
color: #33b5e5; |
||||||
|
} |
||||||
|
|
||||||
|
.badge-positive { |
||||||
|
color: #fff; |
||||||
|
background-color: #81c700; |
||||||
|
} |
||||||
|
.badge-positive.badge-inverted { |
||||||
|
color: #81c700; |
||||||
|
} |
||||||
|
|
||||||
|
.badge-negative { |
||||||
|
color: #fff; |
||||||
|
background-color: #f20754; |
||||||
|
} |
||||||
|
.badge-negative.badge-inverted { |
||||||
|
color: #f20754; |
||||||
|
} |
||||||
|
|
||||||
|
.segmented-controller { |
||||||
|
background-color: transparent; |
||||||
|
border: 1px solid #33b5e5; |
||||||
|
border-radius: 3px; |
||||||
|
} |
||||||
|
.segmented-controller li { |
||||||
|
border-left: 1px solid #33b5e5; |
||||||
|
} |
||||||
|
.segmented-controller li > a { |
||||||
|
padding-top: 9px; |
||||||
|
padding-bottom: 10px; |
||||||
|
color: #33b5e5; |
||||||
|
} |
||||||
|
.segmented-controller li.selected { |
||||||
|
background-color: #33b5e5; |
||||||
|
} |
||||||
|
|
||||||
|
.popover { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
.popover:after { |
||||||
|
border-bottom: 15px solid #111111; |
||||||
|
} |
||||||
|
|
||||||
|
.toggle .toggle-handle { |
||||||
|
border: 1px solid #565656; |
||||||
|
} |
||||||
|
.toggle:active .toggle-handle { |
||||||
|
width: 35px; |
||||||
|
} |
||||||
|
.toggle.active { |
||||||
|
border: 2px solid #81c700; |
||||||
|
background-color: #81c700; |
||||||
|
} |
||||||
|
.toggle.active .toggle-handle { |
||||||
|
border-color: #81c700; |
||||||
|
} |
||||||
@ -0,0 +1,350 @@ |
|||||||
|
/* |
||||||
|
* ===================================================== |
||||||
|
* 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. |
||||||
|
* ===================================================== |
||||||
|
*/ |
||||||
|
|
||||||
|
.content { |
||||||
|
background-color: #efeff4; |
||||||
|
} |
||||||
|
|
||||||
|
[class*="bar-"] { |
||||||
|
border-bottom: 0; |
||||||
|
background-color: rgba(247, 247, 247, 0.98); |
||||||
|
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); |
||||||
|
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85); |
||||||
|
} |
||||||
|
[class*="bar-"].bar-header-secondary { |
||||||
|
top: 44px; |
||||||
|
} |
||||||
|
[class*="bar-"].bar-footer-secondary { |
||||||
|
bottom: 44px; |
||||||
|
} |
||||||
|
[class*="bar-"].bar-footer-secondary-tab { |
||||||
|
bottom: 50px; |
||||||
|
} |
||||||
|
|
||||||
|
.bar-tab { |
||||||
|
border-top: 0; |
||||||
|
-webkit-box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); |
||||||
|
box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85); |
||||||
|
} |
||||||
|
|
||||||
|
.popover .bar-nav { |
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.15); |
||||||
|
} |
||||||
|
|
||||||
|
.table-view .table-view-cell { |
||||||
|
border-bottom: 0; |
||||||
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); |
||||||
|
background-position: 15px 100%; |
||||||
|
background-repeat: no-repeat; |
||||||
|
} |
||||||
|
.table-view .table-view-cell:last-child { |
||||||
|
background-image: none; |
||||||
|
} |
||||||
|
.table-view .table-view-divider { |
||||||
|
border-top: 0; |
||||||
|
border-bottom: 0; |
||||||
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); |
||||||
|
background-position: 0 100%, 0 0%; |
||||||
|
background-repeat: no-repeat; |
||||||
|
} |
||||||
|
|
||||||
|
.popover .table-view { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.card .table-view li:last-child { |
||||||
|
background-image: none; |
||||||
|
} |
||||||
|
|
||||||
|
select, |
||||||
|
textarea, |
||||||
|
input[type="text"], |
||||||
|
input[type=search], |
||||||
|
input[type="password"], |
||||||
|
input[type="datetime"], |
||||||
|
input[type="datetime-local"], |
||||||
|
input[type="date"], |
||||||
|
input[type="month"], |
||||||
|
input[type="time"], |
||||||
|
input[type="week"], |
||||||
|
input[type="number"], |
||||||
|
input[type="email"], |
||||||
|
input[type="url"], |
||||||
|
input[type="tel"], |
||||||
|
input[type="color"], |
||||||
|
.input-group { |
||||||
|
height: 40px; |
||||||
|
padding: 10px 15px; |
||||||
|
border: 1px solid rgba(0, 0, 0, 0.2); |
||||||
|
} |
||||||
|
|
||||||
|
input[type=search] { |
||||||
|
height: 34px; |
||||||
|
text-align: center; |
||||||
|
background-color: rgba(0, 0, 0, 0.1); |
||||||
|
border: 0; |
||||||
|
border-radius: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
input[type=search]:focus { |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
select, |
||||||
|
textarea, |
||||||
|
.input-group { |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.input-group { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.input-group input { |
||||||
|
border: 0; |
||||||
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); |
||||||
|
background-position: 15px 100%; |
||||||
|
background-repeat: no-repeat; |
||||||
|
} |
||||||
|
|
||||||
|
.input-group input:last-child { |
||||||
|
background-image: none; |
||||||
|
} |
||||||
|
|
||||||
|
.input-row { |
||||||
|
border-bottom: 0; |
||||||
|
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"); |
||||||
|
background-position: 15px 100%; |
||||||
|
background-repeat: no-repeat; |
||||||
|
} |
||||||
|
|
||||||
|
.input-row:last-child, |
||||||
|
.input-row label + input { |
||||||
|
background-image: none; |
||||||
|
} |
||||||
|
|
||||||
|
[class*="button"] { |
||||||
|
border: 1px solid #929292; |
||||||
|
color: #929292; |
||||||
|
background-color: rgba(247, 247, 247, 0.98); |
||||||
|
-webkit-transition: all; |
||||||
|
transition: all; |
||||||
|
-webkit-transition-duration: 0.2s; |
||||||
|
transition-duration: 0.2s; |
||||||
|
-webkit-transition-timing-function: linear; |
||||||
|
transition-timing-function: linear; |
||||||
|
} |
||||||
|
[class*="button"]:active, [class*="button"].active { |
||||||
|
color: #fff; |
||||||
|
background-color: #929292; |
||||||
|
} |
||||||
|
|
||||||
|
.button-primary { |
||||||
|
color: #fff; |
||||||
|
border: 1px solid #007aff; |
||||||
|
background-color: #007aff; |
||||||
|
} |
||||||
|
.button-primary:active, .button-primary.active { |
||||||
|
border: 1px solid #0062cc; |
||||||
|
background-color: #0062cc; |
||||||
|
} |
||||||
|
|
||||||
|
.button-positive { |
||||||
|
color: #fff; |
||||||
|
border: 1px solid #4cd964; |
||||||
|
background-color: #4cd964; |
||||||
|
} |
||||||
|
.button-positive:active, .button-positive.active { |
||||||
|
border: 1px solid #2ac845; |
||||||
|
background-color: #2ac845; |
||||||
|
} |
||||||
|
|
||||||
|
.button-negative { |
||||||
|
color: #fff; |
||||||
|
border: 1px solid #dd524d; |
||||||
|
background-color: #dd524d; |
||||||
|
} |
||||||
|
.button-negative:active, .button-negative.active { |
||||||
|
border: 1px solid #cf2d28; |
||||||
|
background-color: #cf2d28; |
||||||
|
} |
||||||
|
|
||||||
|
.button-outlined { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
.button-outlined.button-primary { |
||||||
|
color: #007aff; |
||||||
|
} |
||||||
|
.button-outlined.button-positive { |
||||||
|
color: #4cd964; |
||||||
|
} |
||||||
|
.button-outlined.button-negative { |
||||||
|
color: #dd524d; |
||||||
|
} |
||||||
|
.button-outlined.button-primary:active, .button-outlined.button-positive:active, .button-outlined.button-negative:active { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.button-link { |
||||||
|
color: #007aff; |
||||||
|
background-color: transparent; |
||||||
|
border: none; |
||||||
|
} |
||||||
|
.button-link:active, .button-link.active { |
||||||
|
color: #0062cc; |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.bar-nav .button-link { |
||||||
|
color: #007aff; |
||||||
|
} |
||||||
|
.bar-nav .button-link:active { |
||||||
|
color: #007aff; |
||||||
|
opacity: .6; |
||||||
|
} |
||||||
|
|
||||||
|
[class*="badge"].badge-inverted { |
||||||
|
color: #929292; |
||||||
|
} |
||||||
|
|
||||||
|
.badge-primary { |
||||||
|
color: #fff; |
||||||
|
background-color: #007aff; |
||||||
|
} |
||||||
|
.badge-primary.badge-inverted { |
||||||
|
color: #007aff; |
||||||
|
} |
||||||
|
|
||||||
|
.badge-positive { |
||||||
|
color: #fff; |
||||||
|
background-color: #4cd964; |
||||||
|
} |
||||||
|
.badge-positive.badge-inverted { |
||||||
|
color: #4cd964; |
||||||
|
} |
||||||
|
|
||||||
|
.badge-negative { |
||||||
|
color: #fff; |
||||||
|
background-color: #dd524d; |
||||||
|
} |
||||||
|
.badge-negative.badge-inverted { |
||||||
|
color: #dd524d; |
||||||
|
} |
||||||
|
|
||||||
|
.segmented-controller { |
||||||
|
background-color: transparent; |
||||||
|
border: 1px solid #007aff; |
||||||
|
} |
||||||
|
.segmented-controller li { |
||||||
|
border-left: 1px solid #007aff; |
||||||
|
-webkit-transition: background-color 0.1s linear; |
||||||
|
transition: background-color 0.1s linear; |
||||||
|
} |
||||||
|
.segmented-controller li > a { |
||||||
|
color: #007aff; |
||||||
|
} |
||||||
|
.segmented-controller li.selected { |
||||||
|
background-color: #007aff; |
||||||
|
} |
||||||
|
|
||||||
|
.popover { |
||||||
|
border-radius: 12px; |
||||||
|
-webkit-transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; |
||||||
|
transition: -webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out; |
||||||
|
} |
||||||
|
.popover:after { |
||||||
|
border-bottom: 15px solid rgba(247, 247, 247, 0.98); |
||||||
|
} |
||||||
|
|
||||||
|
.modal { |
||||||
|
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
||||||
|
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
||||||
|
} |
||||||
|
.modal.active { |
||||||
|
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
||||||
|
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
||||||
|
} |
||||||
|
|
||||||
|
.toggle { |
||||||
|
width: 47px; |
||||||
|
border: 2px solid #e6e6e6; |
||||||
|
-webkit-box-shadow: inset 0 0 0 0 #e1e1e1; |
||||||
|
box-shadow: inset 0 0 0 0 #e1e1e1; |
||||||
|
-webkit-transition-property: box-shadow, border; |
||||||
|
transition-property: box-shadow, border; |
||||||
|
-webkit-transition-duration: 0.2s; |
||||||
|
transition-duration: 0.2s; |
||||||
|
} |
||||||
|
.toggle .toggle-handle { |
||||||
|
border: 1px solid rgba(0, 0, 0, 0.2); |
||||||
|
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); |
||||||
|
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); |
||||||
|
-webkit-transition-property: -webkit-transform, border, width; |
||||||
|
transition-property: -webkit-transform, border, width; |
||||||
|
} |
||||||
|
.toggle:before { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.toggle:active .toggle-handle { |
||||||
|
width: 35px; |
||||||
|
} |
||||||
|
.toggle.active { |
||||||
|
border: 2px solid #4cd964; |
||||||
|
background-color: transparent; |
||||||
|
-webkit-box-shadow: inset 0 0 0 13px #4cd964; |
||||||
|
box-shadow: inset 0 0 0 13px #4cd964; |
||||||
|
} |
||||||
|
.toggle.active .toggle-handle { |
||||||
|
-webkit-transform: translate3d(17px, 0, 0); |
||||||
|
transform: translate3d(17px, 0, 0); |
||||||
|
} |
||||||
|
.toggle.active:active .toggle-handle, |
||||||
|
.toggle.active .toggle-handle:active { |
||||||
|
-webkit-transform: translate3d(10px, 0, 0) !important; |
||||||
|
transform: translate3d(10px, 0, 0) !important; |
||||||
|
} |
||||||
|
.toggle.active .toggle-handle { |
||||||
|
border-color: #4cd964; |
||||||
|
} |
||||||
|
|
||||||
|
.content.fade { |
||||||
|
-webkit-transition: opacity 0.2s ease-in-out; |
||||||
|
transition: opacity 0.2s ease-in-out; |
||||||
|
} |
||||||
|
.content.slide { |
||||||
|
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
||||||
|
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); |
||||||
|
} |
||||||
|
.content.slide.sliding-in, .content.slide.right:not([class*="sliding-in"]) { |
||||||
|
-webkit-animation-name: fadeOverlay; |
||||||
|
animation-name: fadeOverlay; |
||||||
|
-webkit-animation-duration: 0.4s; |
||||||
|
animation-duration: 0.4s; |
||||||
|
} |
||||||
|
.content.slide.right:not([class*="sliding-in"]) { |
||||||
|
-webkit-animation-direction: reverse; |
||||||
|
animation-direction: reverse; |
||||||
|
} |
||||||
|
.content.slide.left { |
||||||
|
-webkit-transform: translate3d(-20%, 0, 0); |
||||||
|
transform: translate3d(-20%, 0, 0); |
||||||
|
} |
||||||
|
|
||||||
|
@-webkit-keyframes fadeOverlay { |
||||||
|
from { |
||||||
|
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); |
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0), -320px 0 0 rgba(0, 0, 0, 0); |
||||||
|
} |
||||||
|
|
||||||
|
to { |
||||||
|
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); |
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), -320px 0 0 rgba(0, 0, 0, 0.1); |
||||||
|
} |
||||||
|
} |
||||||
@ -1,36 +0,0 @@ |
|||||||
/* ---------------------------------- |
|
||||||
* ALERT v0.0.1 |
|
||||||
* Licensed under The MIT License |
|
||||||
* http://opensource.org/licenses/MIT
|
|
||||||
* ---------------------------------- */ |
|
||||||
|
|
||||||
!function () { |
|
||||||
var findAlerts = function (target) { |
|
||||||
var i, alerts = document.querySelectorAll('a'); |
|
||||||
for (; target && target !== document; target = target.parentNode) { |
|
||||||
for (i = alerts.length; i--;) { if (alerts[i] === target) return target; } |
|
||||||
} |
|
||||||
}; |
|
||||||
|
|
||||||
var onAlertHidden = function () { |
|
||||||
var alert = getAlert(event); |
|
||||||
|
|
||||||
alert.style.display = 'none'; |
|
||||||
alert.removeEventListener('webkitTransitionEnd', onAlertHidden); |
|
||||||
} |
|
||||||
|
|
||||||
var getAlert = function (event) { |
|
||||||
var alertDismiss = findAlerts(event.target); |
|
||||||
if (alertDismiss && alertDismiss.hash) return document.querySelector(alertDismiss.hash); |
|
||||||
}; |
|
||||||
|
|
||||||
window.addEventListener('click', function (event) { |
|
||||||
var alert = getAlert(event); |
|
||||||
|
|
||||||
if (alert) { |
|
||||||
if (alert && alert.classList.contains('alert')) alert.classList.add('dismiss'); |
|
||||||
alert.addEventListener('webkitTransitionEnd', onAlertHidden); |
|
||||||
event.preventDefault(); |
|
||||||
} |
|
||||||
}); |
|
||||||
}(); |
|
||||||
@ -1,52 +0,0 @@ |
|||||||
// |
|
||||||
// Alerts |
|
||||||
// -------------------------------------------------- |
|
||||||
|
|
||||||
.alert { |
|
||||||
position: fixed; |
|
||||||
right: 15px; |
|
||||||
left: 15px; |
|
||||||
bottom: $bar-tab-height + 15px; |
|
||||||
padding: 15px; |
|
||||||
color: #fff; |
|
||||||
border-radius: 3px; |
|
||||||
z-index: 10; |
|
||||||
@include transition(opacity); |
|
||||||
@include transition-duration(.2s); |
|
||||||
@include transition-timing-function(linear); |
|
||||||
|
|
||||||
.close { |
|
||||||
position: relative; |
|
||||||
top: -2px; |
|
||||||
float: right; |
|
||||||
color: inherit; |
|
||||||
cursor: pointer; |
|
||||||
@include transition(opacity); |
|
||||||
@include transition-duration(.2s); |
|
||||||
@include transition-timing-function(linear); |
|
||||||
|
|
||||||
&:active { |
|
||||||
opacity: .6; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
&.dismiss { |
|
||||||
opacity: 0; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Positive alert (Default color is green) |
|
||||||
.alert-positive { |
|
||||||
background-color: transparentize($positive-color, .03); |
|
||||||
} |
|
||||||
|
|
||||||
// Negative alert (Default color is red) |
|
||||||
.alert-negative { |
|
||||||
background-color: transparentize($negative-color, .03); |
|
||||||
} |
|
||||||
|
|
||||||
// Inline alert |
|
||||||
.alert-inline { |
|
||||||
position: static; |
|
||||||
margin: 15px; |
|
||||||
} |
|
||||||
@ -0,0 +1,12 @@ |
|||||||
|
// |
||||||
|
// Cards |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.card { |
||||||
|
width: auto; |
||||||
|
overflow: hidden; |
||||||
|
margin: $bar-side-spacing; |
||||||
|
background-color: $card-bg; |
||||||
|
border: $border-default; |
||||||
|
border-radius: $border-radius; |
||||||
|
} |
||||||
@ -0,0 +1,409 @@ |
|||||||
|
@import "mixins.scss"; |
||||||
|
|
||||||
|
// |
||||||
|
// Android theme |
||||||
|
// The visual and interaction styles for Android |
||||||
|
// |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
|
||||||
|
// Variables |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
// Type (Change to Roboto) |
||||||
|
$font-family-default: "Helvetica Neue", Helvetica, sans-serif; |
||||||
|
$font-size-default: 17px; |
||||||
|
$font-weight: 500; |
||||||
|
$font-weight-light: 400; |
||||||
|
$line-height-default: 21px; |
||||||
|
|
||||||
|
// Colors |
||||||
|
// Main theme colors |
||||||
|
$primary-color: #33b5e5; |
||||||
|
$chrome-color: #111; |
||||||
|
|
||||||
|
// Action colors |
||||||
|
$default-color: #fff; |
||||||
|
$positive-color: #81c700; |
||||||
|
$negative-color: #f20754; |
||||||
|
|
||||||
|
// Bars |
||||||
|
$bar-base-height: 50px; |
||||||
|
$bar-tab-height: 70px; |
||||||
|
|
||||||
|
// Borders |
||||||
|
$border-default: 1px solid #565656; |
||||||
|
$border-radius: 0; |
||||||
|
|
||||||
|
|
||||||
|
// Base |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.content { |
||||||
|
@include gradient($chrome-color,lighten($chrome-color, 10%)); |
||||||
|
} |
||||||
|
|
||||||
|
// Bars |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
[class*="bar-"] { |
||||||
|
height: $bar-base-height; |
||||||
|
background-color: $chrome-color; |
||||||
|
border-bottom: $border-default; |
||||||
|
|
||||||
|
// Modifier class to dock any bar below .bar-nav |
||||||
|
&.bar-header-secondary { |
||||||
|
top: $bar-base-height + 1; |
||||||
|
} |
||||||
|
} |
||||||
|
.bar-tab { |
||||||
|
height: $bar-tab-height; |
||||||
|
border-top: $border-default; |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
// Left aligned text in the .bar-nav |
||||||
|
.title { |
||||||
|
position: static; |
||||||
|
padding-left: 10px; |
||||||
|
line-height: $bar-base-height; |
||||||
|
color: $default-color; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Nav bar in popovers |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.popover .bar-nav { |
||||||
|
border-bottom: $border-default; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Table views |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.table-view { |
||||||
|
.table-view-cell { |
||||||
|
border-bottom: $border-default; |
||||||
|
|
||||||
|
// Remove the border from the last table view item |
||||||
|
&:last-child { |
||||||
|
background-image: none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Table view dividers |
||||||
|
.table-view-divider { |
||||||
|
border-top: 0; |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.popover .table-view { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Forms |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
select, |
||||||
|
textarea, |
||||||
|
input[type="text"], |
||||||
|
input[type=search], |
||||||
|
input[type="password"], |
||||||
|
input[type="datetime"], |
||||||
|
input[type="datetime-local"], |
||||||
|
input[type="date"], |
||||||
|
input[type="month"], |
||||||
|
input[type="time"], |
||||||
|
input[type="week"], |
||||||
|
input[type="number"], |
||||||
|
input[type="email"], |
||||||
|
input[type="url"], |
||||||
|
input[type="tel"], |
||||||
|
input[type="color"], |
||||||
|
.input-group { |
||||||
|
height: 40px; |
||||||
|
padding: 10px 15px; border: 1px solid rgba(0, 0, 0, .2); |
||||||
|
} |
||||||
|
|
||||||
|
// Rounded search input |
||||||
|
input[type=search] { |
||||||
|
height: 34px; |
||||||
|
text-align: center; |
||||||
|
background-color: rgba(0,0,0,.1); |
||||||
|
border: 0; |
||||||
|
border-radius: 6px; |
||||||
|
} |
||||||
|
input[type=search]:focus { |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
select, |
||||||
|
textarea, |
||||||
|
.input-group { |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
// Input groups (cluster multiple inputs together into a single group) |
||||||
|
// ------------------------------------------------------------------- |
||||||
|
.input-group { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
.input-group input { |
||||||
|
border: 0; |
||||||
|
} |
||||||
|
// Remove bottom border on last input to avoid double bottom border |
||||||
|
.input-group input:last-child { |
||||||
|
background-image: none; |
||||||
|
} |
||||||
|
|
||||||
|
// Input groups with labels |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
// To use labels with input groups, wrap a label and an input in an .input-row |
||||||
|
.input-row { |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
// Remove bottom border on last input-row to avoid double bottom border |
||||||
|
.input-row:last-child, |
||||||
|
.input-row label + input { |
||||||
|
background-image: none; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Buttons |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
[class*="button"] { |
||||||
|
border: $border-default; |
||||||
|
color: $default-color; |
||||||
|
background-color: $chrome-color; |
||||||
|
border-radius: 3px; |
||||||
|
|
||||||
|
// Active & filled button styles |
||||||
|
&:active, |
||||||
|
&.active { |
||||||
|
color: #fff; |
||||||
|
background-color: $default-color; |
||||||
|
} |
||||||
|
} |
||||||
|
[class*="bar-"] { |
||||||
|
[class*="button"] { |
||||||
|
padding-top: 9px; |
||||||
|
padding-bottom: 9px; |
||||||
|
} |
||||||
|
.button-link { |
||||||
|
padding: 0; |
||||||
|
color: $primary-color; |
||||||
|
line-height: $bar-base-height; |
||||||
|
|
||||||
|
&:active, |
||||||
|
&.active { |
||||||
|
color: darken($primary-color, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Other button types |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
// Primary button (Default color is blue) |
||||||
|
.button-primary { |
||||||
|
color: #fff; |
||||||
|
border: 1px solid $primary-color; |
||||||
|
background-color: $primary-color; |
||||||
|
|
||||||
|
&:active, |
||||||
|
&.active { |
||||||
|
border: 1px solid darken($primary-color, 10%); |
||||||
|
background-color: darken($primary-color, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Positive button (Default color is green) |
||||||
|
.button-positive { |
||||||
|
color: #fff; |
||||||
|
border: 1px solid $positive-color; |
||||||
|
background-color: $positive-color; |
||||||
|
|
||||||
|
&:active, |
||||||
|
&.active { |
||||||
|
border: 1px solid darken($positive-color, 10%); |
||||||
|
background-color: darken($positive-color, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Negative button (Default color is red) |
||||||
|
.button-negative { |
||||||
|
color: #fff; |
||||||
|
border: 1px solid $negative-color; |
||||||
|
background-color: $negative-color; |
||||||
|
|
||||||
|
&:active, |
||||||
|
&.active { |
||||||
|
border: 1px solid darken($negative-color, 10%); |
||||||
|
background-color: darken($negative-color, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Outlined buttons |
||||||
|
.button-outlined { |
||||||
|
background-color: transparent; |
||||||
|
|
||||||
|
&.button-primary { |
||||||
|
color: $primary-color; |
||||||
|
} |
||||||
|
&.button-positive { |
||||||
|
color: $positive-color; |
||||||
|
} |
||||||
|
&.button-negative { |
||||||
|
color: $negative-color; |
||||||
|
} |
||||||
|
// Active states |
||||||
|
&.button-primary:active, |
||||||
|
&.button-positive:active, |
||||||
|
&.button-negative:active { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Link button (Buttons that look like links) |
||||||
|
.button-link { |
||||||
|
color: $primary-color; |
||||||
|
background-color: transparent; |
||||||
|
border: none; |
||||||
|
|
||||||
|
&:active, |
||||||
|
&.active { |
||||||
|
color: darken($primary-color, 10%); |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Buttons in nav bars |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.bar-nav { |
||||||
|
.button-link { |
||||||
|
color: $primary-color; |
||||||
|
|
||||||
|
&:active { |
||||||
|
color: $primary-color; |
||||||
|
opacity: .6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// |
||||||
|
// Badges |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
[class*="badge"] { |
||||||
|
&.badge-inverted { |
||||||
|
color: $default-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Badge modifiers |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
// Main badge |
||||||
|
.badge-primary { |
||||||
|
color: #fff; |
||||||
|
background-color: $primary-color; |
||||||
|
|
||||||
|
&.badge-inverted { |
||||||
|
color: $primary-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Positive badge |
||||||
|
.badge-positive { |
||||||
|
color: #fff; |
||||||
|
background-color: $positive-color; |
||||||
|
|
||||||
|
&.badge-inverted { |
||||||
|
color: $positive-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Negative badge |
||||||
|
.badge-negative { |
||||||
|
color: #fff; |
||||||
|
background-color: $negative-color; |
||||||
|
|
||||||
|
&.badge-inverted { |
||||||
|
color: $negative-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// |
||||||
|
// Segmented controllers |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.segmented-controller { |
||||||
|
background-color: transparent; |
||||||
|
border: 1px solid $primary-color; |
||||||
|
border-radius: 3px; |
||||||
|
|
||||||
|
li { |
||||||
|
border-left: 1px solid $primary-color; |
||||||
|
|
||||||
|
// Link that fills each section |
||||||
|
> a { |
||||||
|
padding-top: 9px; |
||||||
|
padding-bottom: 10px; |
||||||
|
color: $primary-color; |
||||||
|
} |
||||||
|
|
||||||
|
// Selected segment of controller |
||||||
|
&.selected { |
||||||
|
background-color: $primary-color; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// |
||||||
|
// Popovers |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.popover { |
||||||
|
border-radius: 12px; |
||||||
|
|
||||||
|
&:after { |
||||||
|
border-bottom: 15px solid $chrome-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// |
||||||
|
// Modal styles |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
// |
||||||
|
// Toggles styles |
||||||
|
// -------------------------------------------------- |
||||||
|
.toggle { |
||||||
|
// Sliding handle |
||||||
|
.toggle-handle { |
||||||
|
border: $border-default; |
||||||
|
} |
||||||
|
&:active .toggle-handle { |
||||||
|
width: 35px; |
||||||
|
} |
||||||
|
// Active state for toggle |
||||||
|
&.active { |
||||||
|
border: 2px solid $positive-color; |
||||||
|
background-color: $positive-color; |
||||||
|
|
||||||
|
.toggle-handle { |
||||||
|
border-color: $positive-color; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,465 @@ |
|||||||
|
@import "mixins.scss"; |
||||||
|
|
||||||
|
// |
||||||
|
// iOS theme |
||||||
|
// The visual and interaction styles from iOS |
||||||
|
// |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
|
||||||
|
// Variables |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
// Colors |
||||||
|
// Main theme colors |
||||||
|
$primary-color: #007aff; |
||||||
|
$chrome-color: rgba(247,247,247,.98); |
||||||
|
|
||||||
|
// Action colors |
||||||
|
$default-color: #929292; |
||||||
|
$positive-color: #4cd964; |
||||||
|
$negative-color: #dd524d; |
||||||
|
|
||||||
|
// Bars |
||||||
|
$bar-base-height: 44px; |
||||||
|
$bar-tab-height: 50px; |
||||||
|
|
||||||
|
// iOS style transitions |
||||||
|
$timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods |
||||||
|
|
||||||
|
|
||||||
|
// Base |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.content { |
||||||
|
background-color: #efeff4; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Bars |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
[class*="bar-"] { |
||||||
|
border-bottom: 0; |
||||||
|
background-color: $chrome-color; |
||||||
|
@include box-shadow(0 0 1px rgba(0,0,0,.85)); |
||||||
|
|
||||||
|
// Modifier class to dock any bar below .bar-nav |
||||||
|
&.bar-header-secondary { |
||||||
|
top: $bar-base-height; |
||||||
|
} |
||||||
|
|
||||||
|
// Modifier class to dock any bar above a standard bar |
||||||
|
&.bar-footer-secondary { |
||||||
|
bottom: $bar-base-height; |
||||||
|
} |
||||||
|
|
||||||
|
// Modifier class to dock any bar above a .bar-tab |
||||||
|
&.bar-footer-secondary-tab { |
||||||
|
bottom: $bar-tab-height; |
||||||
|
} |
||||||
|
} |
||||||
|
.bar-tab { |
||||||
|
border-top: 0; |
||||||
|
@include box-shadow(0 0 -1px rgba(0,0,0,.85)); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Nav bar in popovers |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.popover .bar-nav { |
||||||
|
border-bottom: 1px solid rgba(0,0,0,.15); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Table views |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.table-view { |
||||||
|
.table-view-cell { |
||||||
|
border-bottom: 0; |
||||||
|
@include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset. |
||||||
|
|
||||||
|
// Remove the border from the last table view item |
||||||
|
&:last-child { |
||||||
|
background-image: none; |
||||||
|
} |
||||||
|
} |
||||||
|
// Table view dividers |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.table-view-divider { |
||||||
|
border-top: 0; |
||||||
|
border-bottom: 0; |
||||||
|
@include hairline(double, #c8c7cc, 0); // Double (top and bottom) grey border with no offset. |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.popover .table-view { |
||||||
|
border-radius: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.card .table-view li:last-child { |
||||||
|
background-image: none; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Forms |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
select, |
||||||
|
textarea, |
||||||
|
input[type="text"], |
||||||
|
input[type=search], |
||||||
|
input[type="password"], |
||||||
|
input[type="datetime"], |
||||||
|
input[type="datetime-local"], |
||||||
|
input[type="date"], |
||||||
|
input[type="month"], |
||||||
|
input[type="time"], |
||||||
|
input[type="week"], |
||||||
|
input[type="number"], |
||||||
|
input[type="email"], |
||||||
|
input[type="url"], |
||||||
|
input[type="tel"], |
||||||
|
input[type="color"], |
||||||
|
.input-group { |
||||||
|
height: 40px; |
||||||
|
padding: 10px 15px; border: 1px solid rgba(0, 0, 0, .2); |
||||||
|
} |
||||||
|
|
||||||
|
// Rounded search input |
||||||
|
input[type=search] { |
||||||
|
height: 34px; |
||||||
|
text-align: center; |
||||||
|
background-color: rgba(0,0,0,.1); |
||||||
|
border: 0; |
||||||
|
border-radius: 6px; |
||||||
|
} |
||||||
|
input[type=search]:focus { |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
select, |
||||||
|
textarea, |
||||||
|
.input-group { |
||||||
|
height: auto; |
||||||
|
} |
||||||
|
|
||||||
|
// Input groups (cluster multiple inputs together into a single group) |
||||||
|
// ------------------------------------------------------------------- |
||||||
|
.input-group { |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
.input-group input { |
||||||
|
border: 0; |
||||||
|
@include hairline(single, #c8c7cc, 15px); |
||||||
|
} |
||||||
|
// Remove bottom border on last input to avoid double bottom border |
||||||
|
.input-group input:last-child { |
||||||
|
background-image: none; |
||||||
|
} |
||||||
|
|
||||||
|
// Input groups with labels |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
// To use labels with input groups, wrap a label and an input in an .input-row |
||||||
|
.input-row { |
||||||
|
border-bottom: 0; |
||||||
|
@include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset. |
||||||
|
} |
||||||
|
// Remove bottom border on last input-row to avoid double bottom border |
||||||
|
.input-row:last-child, |
||||||
|
.input-row label + input { |
||||||
|
background-image: none; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Buttons |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
[class*="button"] { |
||||||
|
border: 1px solid $default-color; |
||||||
|
color: $default-color; |
||||||
|
background-color: $chrome-color; |
||||||
|
@include transition(all); |
||||||
|
@include transition-duration(.2s); |
||||||
|
@include transition-timing-function(linear); |
||||||
|
|
||||||
|
// Active & filled button styles |
||||||
|
&:active, |
||||||
|
&.active { |
||||||
|
color: #fff; |
||||||
|
background-color: $default-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Other button types |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
// Primary button (Default color is blue) |
||||||
|
.button-primary { |
||||||
|
color: #fff; |
||||||
|
border: 1px solid $primary-color; |
||||||
|
background-color: $primary-color; |
||||||
|
|
||||||
|
&:active, |
||||||
|
&.active { |
||||||
|
border: 1px solid darken($primary-color, 10%); |
||||||
|
background-color: darken($primary-color, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Positive button (Default color is green) |
||||||
|
.button-positive { |
||||||
|
color: #fff; |
||||||
|
border: 1px solid $positive-color; |
||||||
|
background-color: $positive-color; |
||||||
|
|
||||||
|
&:active, |
||||||
|
&.active { |
||||||
|
border: 1px solid darken($positive-color, 10%); |
||||||
|
background-color: darken($positive-color, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Negative button (Default color is red) |
||||||
|
.button-negative { |
||||||
|
color: #fff; |
||||||
|
border: 1px solid $negative-color; |
||||||
|
background-color: $negative-color; |
||||||
|
|
||||||
|
&:active, |
||||||
|
&.active { |
||||||
|
border: 1px solid darken($negative-color, 10%); |
||||||
|
background-color: darken($negative-color, 10%); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Outlined buttons |
||||||
|
.button-outlined { |
||||||
|
background-color: transparent; |
||||||
|
|
||||||
|
&.button-primary { |
||||||
|
color: $primary-color; |
||||||
|
} |
||||||
|
&.button-positive { |
||||||
|
color: $positive-color; |
||||||
|
} |
||||||
|
&.button-negative { |
||||||
|
color: $negative-color; |
||||||
|
} |
||||||
|
// Active states |
||||||
|
&.button-primary:active, |
||||||
|
&.button-positive:active, |
||||||
|
&.button-negative:active { |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Link button (Buttons that look like links) |
||||||
|
.button-link { |
||||||
|
color: $primary-color; |
||||||
|
background-color: transparent; |
||||||
|
border: none; |
||||||
|
|
||||||
|
&:active, |
||||||
|
&.active { |
||||||
|
color: darken($primary-color, 10%); |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Buttons in nav bars |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.bar-nav { |
||||||
|
.button-link { |
||||||
|
color: $primary-color; |
||||||
|
|
||||||
|
&:active { |
||||||
|
color: $primary-color; |
||||||
|
opacity: .6; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// |
||||||
|
// Badges |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
[class*="badge"] { |
||||||
|
&.badge-inverted { |
||||||
|
color: $default-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// Badge modifiers |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
// Main badge |
||||||
|
.badge-primary { |
||||||
|
color: #fff; |
||||||
|
background-color: $primary-color; |
||||||
|
|
||||||
|
&.badge-inverted { |
||||||
|
color: $primary-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Positive badge |
||||||
|
.badge-positive { |
||||||
|
color: #fff; |
||||||
|
background-color: $positive-color; |
||||||
|
|
||||||
|
&.badge-inverted { |
||||||
|
color: $positive-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Negative badge |
||||||
|
.badge-negative { |
||||||
|
color: #fff; |
||||||
|
background-color: $negative-color; |
||||||
|
|
||||||
|
&.badge-inverted { |
||||||
|
color: $negative-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// |
||||||
|
// Segmented controllers |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.segmented-controller { |
||||||
|
background-color: transparent; |
||||||
|
border: 1px solid $primary-color; |
||||||
|
|
||||||
|
li { |
||||||
|
border-left: 1px solid $primary-color; |
||||||
|
@include transition(background-color .1s linear); |
||||||
|
|
||||||
|
// Link that fills each section |
||||||
|
> a { |
||||||
|
color: $primary-color; |
||||||
|
} |
||||||
|
|
||||||
|
// Selected segment of controller |
||||||
|
&.selected { |
||||||
|
background-color: $primary-color; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// |
||||||
|
// Popovers |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.popover { |
||||||
|
border-radius: 12px; |
||||||
|
@include transition(-webkit-transform 0.2s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out); |
||||||
|
|
||||||
|
&:after { |
||||||
|
border-bottom: 15px solid $chrome-color; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// |
||||||
|
// Modal styles |
||||||
|
// -------------------------------------------------- |
||||||
|
|
||||||
|
.modal { |
||||||
|
@include transition-timing-function($timing-fuction); |
||||||
|
|
||||||
|
// Active modal |
||||||
|
&.active { |
||||||
|
@include transition-timing-function($timing-fuction); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// |
||||||
|
// Toggles styles |
||||||
|
// -------------------------------------------------- |
||||||
|
.toggle { |
||||||
|
width: 47px; |
||||||
|
border: 2px solid #e6e6e6; |
||||||
|
@include box-shadow(inset 0 0 0 0 #e1e1e1); |
||||||
|
@include transition-property(box-shadow, border); |
||||||
|
@include transition-duration(.2s); |
||||||
|
|
||||||
|
// Sliding handle |
||||||
|
.toggle-handle { |
||||||
|
border: 1px solid rgba(0, 0, 0, .2); |
||||||
|
@include box-shadow(0 3px 3px rgba(0,0,0,.08)); |
||||||
|
@include transition-property(-webkit-transform, border, width); |
||||||
|
} |
||||||
|
&:before { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
&:active .toggle-handle { |
||||||
|
width: 35px; |
||||||
|
} |
||||||
|
// Active state for toggle |
||||||
|
&.active { |
||||||
|
border: 2px solid $positive-color; |
||||||
|
background-color: transparent; |
||||||
|
@include box-shadow(inset 0 0 0 13px $positive-color); |
||||||
|
|
||||||
|
.toggle-handle { |
||||||
|
@include transform(translate3d(17px,0,0)); |
||||||
|
} |
||||||
|
|
||||||
|
// When the handle and the container is active |
||||||
|
&:active .toggle-handle, |
||||||
|
.toggle-handle:active { |
||||||
|
@include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js. |
||||||
|
} |
||||||
|
|
||||||
|
.toggle-handle { |
||||||
|
border-color: $positive-color; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
// |
||||||
|
// Push styles |
||||||
|
// -------------------------------------------------- |
||||||
|
.content { |
||||||
|
|
||||||
|
// Fade animation |
||||||
|
&.fade { |
||||||
|
@include transition(opacity .2s ease-in-out); |
||||||
|
} |
||||||
|
// Slide animation |
||||||
|
&.slide { |
||||||
|
@include transition-timing-function ($timing-fuction); |
||||||
|
|
||||||
|
// Adding the overlay |
||||||
|
&.sliding-in, |
||||||
|
&.right:not([class*="sliding-in"]) { |
||||||
|
@include animation-name(fadeOverlay); |
||||||
|
@include animation-duration(.4s); |
||||||
|
} |
||||||
|
|
||||||
|
&.right:not([class*="sliding-in"]) { |
||||||
|
@include animation-direction(reverse); |
||||||
|
} |
||||||
|
|
||||||
|
&.left { |
||||||
|
@include transform(translate3d(-20%, 0, 0)); // Creates the parallax effect |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Overlay animation for the slide transition |
||||||
|
@-webkit-keyframes fadeOverlay { |
||||||
|
from { @include box-shadow(0 0 10px rgba(0,0,0,0), -320px 0 0 rgba(0,0,0,0)); } |
||||||
|
to { @include box-shadow(0 0 10px rgba(0,0,0,.3), -320px 0 0 rgba(0,0,0,.1)); } |
||||||
|
} |
||||||
Loading…
Reference in new issue