Browse Source

Setting up the basic SASS and changing up the commenting strategy. Still need to convert to CSS to SASS.

pull/214/head
connors 11 years ago
parent
commit
54ce0835a2
  1. 114
      dist/ratchet.css
  2. 59
      lib/sass/bars.scss
  3. 18
      lib/sass/base.scss
  4. 25
      lib/sass/buttons.scss
  5. 4
      lib/sass/chevrons.scss
  6. 8
      lib/sass/counts.scss
  7. 28
      lib/sass/forms.scss
  8. 14
      lib/sass/lists.scss
  9. 18
      lib/sass/popovers.scss
  10. 6
      lib/sass/push.scss
  11. 10
      lib/sass/segmented-controllers.scss
  12. 14
      lib/sass/sliders.scss
  13. 6
      lib/sass/toggles.scss

114
dist/ratchet.css vendored

@ -91,7 +91,6 @@ video {
margin: 0; margin: 0;
border: 0; } border: 0; }
/* Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) */
html { html {
-webkit-text-size-adjust: 100%; } -webkit-text-size-adjust: 100%; }
@ -107,14 +106,11 @@ body {
color: #000; color: #000;
background-color: #fff; } background-color: #fff; }
/* Universal link styling */
a { a {
color: #007aff; color: #007aff;
text-decoration: none; text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
/* Removes the dark touch outlines on links */ }
/* Wrapper to be used around all content not in .bar-title and .bar-tab */
.content { .content {
position: fixed; position: fixed;
top: 0; top: 0;
@ -131,18 +127,13 @@ a {
transition-timing-function: linear, linear; transition-timing-function: linear, linear;
-webkit-overflow-scrolling: touch; } -webkit-overflow-scrolling: touch; }
/* Hack to force all relatively and absolutely positioned elements still render while scrolling
Note: This is a bug for "-webkit-overflow-scrolling: touch" */
.content > * { .content > * {
-webkit-transform: translateZ(0px); -webkit-transform: translateZ(0px);
transform: translateZ(0px); } transform: translateZ(0px); }
/* Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed */
.content-padded { .content-padded {
padding: 10px; } padding: 10px; }
/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
Note: For these to work, content must come after both bars in the markup */
.bar-title ~ .content { .bar-title ~ .content {
padding-top: 44px; } padding-top: 44px; }
@ -163,27 +154,20 @@ a {
padding: 5px; padding: 5px;
background-color: rgba(247, 247, 247, 0.98); background-color: rgba(247, 247, 247, 0.98);
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
/*border-bottom: 1px solid rgba(0,0,0,.3);*/
box-sizing: border-box; } box-sizing: border-box; }
/* Modifier class to dock any bar below .bar-title */
.bar-header-secondary { .bar-header-secondary {
top: 44px; } top: 44px; }
/* Modifier class to dock any bar to bottom of viewport */
.bar-footer { .bar-footer {
bottom: 0; } bottom: 0; }
/* Flip border position to top for footer bars */
.bar-footer.bar-standard, .bar-footer.bar-standard,
.bar-footer-secondary.bar-standard { .bar-footer-secondary.bar-standard {
/*border-top: 1px solid #aaa;
border-bottom-width: 0;*/
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); } box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); }
/* Title bar /* Title bar
-------------------------------------------------- */ -------------------------------------------------- */
/* Bar docked to top of viewport for showing page title and actions */
.bar-title { .bar-title {
top: 0; top: 0;
display: -webkit-box; display: -webkit-box;
@ -191,7 +175,6 @@ a {
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
box-orient: horizontal; } box-orient: horizontal; }
/* Centered text in the .bar-title */
.bar-title .title { .bar-title .title {
position: absolute; position: absolute;
top: 0; top: 0;
@ -210,22 +193,17 @@ a {
width: 100%; width: 100%;
height: 100%; } height: 100%; }
/* Retain specified title color */
.bar-title .title a { .bar-title .title a {
color: inherit; } color: inherit; }
/* Tab bar /* Tab bar
-------------------------------------------------- */ -------------------------------------------------- */
/* Bar docked to bottom used for primary app navigation */
.bar-tab { .bar-tab {
bottom: 0; bottom: 0;
height: 50px; height: 50px;
padding: 0; padding: 0;
/*border-top: 1px solid rgba(0,0,0,.3);
border-bottom-width: 0;*/
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); } box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); }
/* Wrapper for individual tab */
.tab-inner { .tab-inner {
display: -webkit-box; display: -webkit-box;
display: box; display: box;
@ -234,7 +212,6 @@ a {
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
box-orient: horizontal; } box-orient: horizontal; }
/* Navigational tab */
.tab-item { .tab-item {
height: 100%; height: 100%;
padding-top: 9px; padding-top: 9px;
@ -243,13 +220,11 @@ a {
-webkit-box-flex: 1; -webkit-box-flex: 1;
box-flex: 1; } box-flex: 1; }
/* Icon for tab */
.tab-icon { .tab-icon {
display: block; display: block;
height: 18px; height: 18px;
margin: 0 auto; } margin: 0 auto; }
/* Label for tab */
.tab-label { .tab-label {
margin-top: 1px; margin-top: 1px;
font-size: 11px; font-size: 11px;
@ -261,11 +236,9 @@ a {
/* Buttons in title bars /* Buttons in title bars
-------------------------------------------------- */ -------------------------------------------------- */
/* Generic style for all buttons in .bar-title */
.bar-title [class*="button"] { .bar-title [class*="button"] {
position: relative; position: relative;
z-index: 10; z-index: 10;
/* Places buttons over full width title */
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
font-size: 16px; font-size: 16px;
@ -277,8 +250,6 @@ a {
-webkit-box-flex: 0; -webkit-box-flex: 0;
box-flex: 0; } box-flex: 0; }
/* Hacky way to right align buttons outside of flex-box system
Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
.bar-title .title + [class*="button"]:last-child, .bar-title .title + [class*="button"]:last-child,
.bar-title .button + [class*="button"]:last-child, .bar-title .button + [class*="button"]:last-child,
.bar-title [class*="button"].pull-right { .bar-title [class*="button"].pull-right {
@ -286,7 +257,6 @@ a {
top: 5px; top: 5px;
right: 5px; } right: 5px; }
/* Override standard button active states */
.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 {
@ -307,16 +277,12 @@ a {
background-color: #007aff; background-color: #007aff;
content: ''; } content: ''; }
/* Prev/next button base styles */
.bar-title .button-prev { .bar-title .button-prev {
padding-left: 22px; padding-left: 22px; }
/* Push over to make room for chevrons */ }
.bar-title .button-next { .bar-title .button-next {
padding-right: 22px; padding-right: 22px; }
/* Push over to make room for chevrons */ }
/* Position the chevrons horizontally */
.bar-title .button-prev:before, .bar-title .button-prev:before,
.bar-title .button-prev:after { .bar-title .button-prev:after {
left: 0; } left: 0; }
@ -325,7 +291,6 @@ a {
.bar-title .button-next:after { .bar-title .button-next:after {
right: 0; } right: 0; }
/* Position the chevrons vertically */
.bar-title .button-prev:before, .bar-title .button-prev:before,
.bar-title .button-next:before { .bar-title .button-next:before {
top: 12px; } top: 12px; }
@ -334,7 +299,6 @@ a {
.bar-title .button-next:after { .bar-title .button-next:after {
top: 21px; } top: 21px; }
/* Rotate the chevrons */
.bar-title .button-prev:before { .bar-title .button-prev:before {
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
@ -353,22 +317,18 @@ a {
/* Block buttons in any bar /* Block buttons in any bar
-------------------------------------------------- */ -------------------------------------------------- */
/* Add proper padding and replace buttons normal dropshadow with a shine from bar */
[class*="bar"] .button-block { [class*="bar"] .button-block {
padding: 7px 0; padding: 7px 0;
margin-bottom: 0; } margin-bottom: 0; }
/* Override standard padding changes for .button-blocks */
[class*="bar"] .button-block:active { [class*="bar"] .button-block:active {
padding: 7px 0; } padding: 7px 0; }
/* Segmented controller in any bar /* Segmented controller in any bar
-------------------------------------------------- */ -------------------------------------------------- */
/* Remove standard segmented bottom margin */
[class*="bar-"] .segmented-controller { [class*="bar-"] .segmented-controller {
margin-bottom: 0; } margin-bottom: 0; }
/* Add margins between segmented controllers and buttons */
[class*="bar-"] .segmented-controller + [class*="button"], [class*="bar-"] .segmented-controller + [class*="button"],
[class*="bar-"] [class*="button"] + .segmented-controller { [class*="bar-"] [class*="button"] + .segmented-controller {
margin-left: 5px; } margin-left: 5px; }
@ -382,35 +342,28 @@ a {
/* Search forms in standard bar /* Search forms in standard bar
-------------------------------------------------- */ -------------------------------------------------- */
/* Position/size search bar within the bar */
.bar-standard input[type=search] { .bar-standard input[type=search] {
height: 32px; height: 32px;
margin: 0; } margin: 0; }
/* Lists /* Lists
-------------------------------------------------- */ -------------------------------------------------- */
/* Remove usual bullet styles from list */
.list { .list {
list-style: none; list-style: none;
background-color: #fff; } background-color: #fff; }
/* Pad each list item and add dividers */
.list li { .list li {
position: relative; position: relative;
padding: 11px 60px 11px 0; padding: 11px 60px 11px 0;
/* Given extra right padding to accomodate counts, chevrons or buttons */
margin-left: 15px; margin-left: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); } border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
/* Give top border to first list items */
.list li:first-child { .list li:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.1); } border-top: 1px solid rgba(0, 0, 0, 0.1); }
/* Remove the border from the last list item*/
.list li:last-child { .list li:last-child {
border-bottom: 0; } border-bottom: 0; }
/* If a list of links, make sure the child <a> takes up full list item tap area (want to avoid selecting child buttons though) */
.list li > a:not([class*="button"]) { .list li > a:not([class*="button"]) {
position: relative; position: relative;
display: block; display: block;
@ -428,7 +381,6 @@ a {
border-radius: 6px; border-radius: 6px;
box-sizing: border-box; } box-sizing: border-box; }
/* Remove border from first/last standard list items to avoid double border at top/bottom of lists */
.list.inset li:first-child { .list.inset li:first-child {
border-top-width: 0; } border-top-width: 0; }
@ -493,7 +445,6 @@ a {
/* Forms /* Forms
-------------------------------------------------- */ -------------------------------------------------- */
/* Force form elements to inherit font styles */
input, input,
textarea, textarea,
button, button,
@ -501,7 +452,6 @@ select {
font-family: inherit; font-family: inherit;
font-size: inherit; } font-size: inherit; }
/* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */
select, select,
textarea, textarea,
input[type="text"], input[type="text"],
@ -530,7 +480,6 @@ input[type="color"],
box-sizing: border-box; box-sizing: border-box;
outline: none; } outline: none; }
/* Fully round search input */
input[type=search] { input[type=search] {
height: 34px; height: 34px;
font-size: 14px; font-size: 14px;
@ -538,11 +487,9 @@ input[type=search] {
border-width: 0; border-width: 0;
background-color: rgba(0, 0, 0, 0.1); } background-color: rgba(0, 0, 0, 0.1); }
/* Allow text area's height to grow larger than a normal input */
textarea { textarea {
height: auto; } height: auto; }
/* Style select button to look like part of the Ratchet's style */
select { select {
height: auto; height: auto;
font-size: 14px; font-size: 14px;
@ -552,14 +499,12 @@ select {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); } box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1); }
/* Input groups (cluster multiple inputs together into a single group) /* Input groups (cluster multiple inputs together into a single group)
-------------------------------------------------- */ ---------------------------------------------------------------------- */
/* Reset from initial form setup styles */
.input-group { .input-group {
width: auto; width: auto;
height: auto; height: auto;
padding: 0; } padding: 0; }
/* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */
.input-group input { .input-group input {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
@ -568,30 +513,24 @@ select {
border-radius: 0; border-radius: 0;
box-shadow: none; } box-shadow: none; }
/* Remove bottom border on last input to avoid double bottom border */
.input-group input:last-child { .input-group input:last-child {
border-bottom-width: 0; } border-bottom-width: 0; }
/* Input groups with labels /* Input groups with labels
-------------------------------------------------- */ -------------------------------------------------- */
/* To use labels with input groups, wrap a label and an input in an .input-row */
.input-row { .input-row {
overflow: hidden; overflow: hidden;
border-bottom: 1px solid rgba(0, 0, 0, 0.2); } border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
/* Remove bottom border on last input-row to avoid double bottom border */
.input-row:last-child { .input-row:last-child {
border-bottom-width: 0; } border-bottom-width: 0; }
/* Labels get floated left with a set percentage width */
.input-row label { .input-row label {
float: left; float: left;
width: 25%; width: 25%;
padding: 11px 10px 9px 13px; padding: 11px 10px 9px 13px;
/* Optimizing the baseline for mobile. */
font-weight: bold; } font-weight: bold; }
/* Actual inputs float to right of labels and also have a set percentage */
.input-row label + input { .input-row label + input {
float: right; float: right;
width: 65%; width: 65%;
@ -616,35 +555,29 @@ select {
border: 1px solid rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 4px; } border-radius: 4px; }
/* Active */
[class*="button"]:active { [class*="button"]:active {
background-color: #333; background-color: #333;
transition: background-color .1s linear; } transition: background-color .1s linear; }
/* Button modifiers /* Button modifiers
-------------------------------------------------- */ -------------------------------------------------- */
/* Overriding styles for buttons with modifiers */
.button-main, .button-main,
.button-positive, .button-positive,
.button-negative { .button-negative {
color: #fff; } color: #fff; }
/* Main button */
.button-main { .button-main {
color: #007aff; color: #007aff;
border: 1px solid #007aff; } border: 1px solid #007aff; }
/* Positive button */
.button-positive { .button-positive {
color: #4cd964; color: #4cd964;
border: 1px solid #4cd964; } border: 1px solid #4cd964; }
/* Negative button */
.button-negative { .button-negative {
color: #e71e1e; color: #e71e1e;
border: 1px solid #b51a1a; } border: 1px solid #b51a1a; }
/* Active state for buttons with modifiers */
[class*="button"]:active, [class*="button"]:active,
.button-main:active, .button-main:active,
.button-positive:active, .button-positive:active,
@ -662,20 +595,17 @@ select {
.button-negative:active { .button-negative:active {
background-color: #b21a1a; } background-color: #b21a1a; }
/* Block level buttons (full width buttons) */
.button-block { .button-block {
display: block; display: block;
padding: 11px 0 13px; padding: 11px 0 13px;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 16px; } font-size: 16px; }
/* Make button elements go full width when given .button-block class */
button.button-block { button.button-block {
width: 100%; } width: 100%; }
/* Counts in buttons /* Counts in buttons
-------------------------------------------------- */ -------------------------------------------------- */
/* Generic styles for all counts within buttons */
[class*="button"] [class*="count"] { [class*="button"] [class*="count"] {
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
@ -683,9 +613,6 @@ button.button-block {
margin-left: 4px; margin-left: 4px;
background-color: rgba(0, 0, 0, 0.1); } background-color: rgba(0, 0, 0, 0.1); }
/* Position counts within block level buttons
Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
stays at true center of button */
.button-block [class*="count"] { .button-block [class*="count"] {
position: absolute; position: absolute;
right: 0; right: 0;
@ -699,7 +626,6 @@ button.button-block {
display: block; display: block;
height: 20px; } height: 20px; }
/* Base styles for both 1/2's of the chevron */
.chevron:before, .chevron:before,
.chevron:after { .chevron:after {
position: relative; position: relative;
@ -709,7 +635,6 @@ button.button-block {
background-color: #c7c7cc; background-color: #c7c7cc;
content: ''; } content: ''; }
/* Position and rotate respective 1/2's of the chevron */
.chevron:before { .chevron:before {
top: 6px; top: 6px;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
@ -734,21 +659,17 @@ button.button-block {
/* Count modifiers /* Count modifiers
-------------------------------------------------- */ -------------------------------------------------- */
/* Overriding styles for counts with modifiers */
.count-main, .count-main,
.count-positive, .count-positive,
.count-negative { .count-negative {
color: #fff; } color: #fff; }
/* Main count */
.count-main { .count-main {
background-color: #1eafe7; } background-color: #1eafe7; }
/* Positive count */
.count-positive { .count-positive {
background-color: #4cd964; } background-color: #4cd964; }
/* Negative count */
.count-negative { .count-negative {
background-color: #e71e1e; } background-color: #e71e1e; }
@ -768,7 +689,6 @@ button.button-block {
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
box-orient: horizontal; } box-orient: horizontal; }
/* Section within controller */
.segmented-controller li { .segmented-controller li {
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
@ -777,7 +697,6 @@ button.button-block {
-webkit-box-flex: 1; -webkit-box-flex: 1;
box-flex: 1; } box-flex: 1; }
/* Link that fills each section */
.segmented-controller li > a { .segmented-controller li > a {
display: block; display: block;
padding: 8px 16px; padding: 8px 16px;
@ -786,16 +705,13 @@ button.button-block {
color: #007aff; color: #007aff;
text-overflow: ellipsis; } text-overflow: ellipsis; }
/* Remove border-left and shadow from first section */
.segmented-controller li:first-child { .segmented-controller li:first-child {
border-left-width: 0; } border-left-width: 0; }
/* Active segment of controller */
.segmented-controller li.active { .segmented-controller li.active {
background-color: #007aff; background-color: #007aff;
transition: background-color .2s linear; } transition: background-color .2s linear; }
/* Set color of links to white */
.segmented-controller li.active > a { .segmented-controller li.active > a {
color: #fff; } color: #fff; }
@ -828,7 +744,6 @@ button.button-block {
-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out; -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; }
/* Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) */
.popover:before, .popover:before,
.popover:after { .popover:after {
position: absolute; position: absolute;
@ -851,14 +766,12 @@ button.button-block {
border-bottom: 20px solid #555; border-bottom: 20px solid #555;
border-left: 20px solid transparent; } border-left: 20px solid transparent; }
/* Wrapper for a title and buttons */
.popover-header { .popover-header {
display: -webkit-box; display: -webkit-box;
display: box; display: box;
height: 34px; height: 34px;
margin-bottom: 5px; } margin-bottom: 5px; }
/* Centered title for popover */
.popover-header .title { .popover-header .title {
position: absolute; position: absolute;
top: 0; top: 0;
@ -872,7 +785,6 @@ button.button-block {
text-align: center; text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5); } text-shadow: 0 -1px rgba(0, 0, 0, 0.5); }
/* Generic style for all buttons in .popover-header */
.popover-header [class*="button"] { .popover-header [class*="button"] {
z-index: 25; z-index: 25;
font-size: 12px; font-size: 12px;
@ -886,8 +798,6 @@ button.button-block {
-webkit-box-flex: 0; -webkit-box-flex: 0;
box-flex: 0; } box-flex: 0; }
/* Hacky way to right align buttons outside of flex-box system
Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */
.popover-header .title + [class*="button"]:last-child, .popover-header .title + [class*="button"]:last-child,
.popover-header .button + [class*="button"]:last-child, .popover-header .button + [class*="button"]:last-child,
.popover-header [class*="button"].pull-right { .popover-header [class*="button"].pull-right {
@ -895,7 +805,6 @@ button.button-block {
top: 5px; top: 5px;
right: 5px; } right: 5px; }
/* Active state for popover header buttons */
.popover-header .button:active { .popover-header .button:active {
color: #fff; color: #fff;
background-color: #0876b1; } background-color: #0876b1; }
@ -919,12 +828,10 @@ button.button-block {
/* Block level buttons in popovers /* Block level buttons in popovers
-------------------------------------------------- */ -------------------------------------------------- */
/* Positioning and giving darker border to look sharp against dark popover */
.popover .button-block { .popover .button-block {
margin-bottom: 5px; margin-bottom: 5px;
border: 1px solid #111; } border: 1px solid #111; }
/* Remove extra margin on bottom of last button */
.popover .button-block:last-child { .popover .button-block:last-child {
margin-bottom: 0; } margin-bottom: 0; }
@ -970,35 +877,28 @@ button.button-block {
/* Slider styles (to be used with sliders.js) /* Slider styles (to be used with sliders.js)
-------------------------------------------------- */ -------------------------------------------------- */
/* Width/height of slider */
.slider, .slider,
.slider > li { .slider > li {
width: 100%; width: 100%;
height: 200px; } height: 200px; }
/* Outer wrapper for slider */
.slider { .slider {
overflow: hidden; overflow: hidden;
background-color: #000; } background-color: #000; }
/* Inner wrapper for slider (width of all slides together) */
.slider > ul { .slider > ul {
position: relative; position: relative;
font-size: 0; font-size: 0;
/* Remove spaces from inline-block children */
white-space: nowrap; white-space: nowrap;
-webkit-transition: all 0 linear; -webkit-transition: all 0 linear;
transition: all 0 linear; } transition: all 0 linear; }
/* Individual slide */
.slider > ul > li { .slider > ul > li {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
/* Ensure that li always aligns to top */
width: 100%; width: 100%;
height: 100%; } height: 100%; }
/* Required reset of font-size to same as standard body */
.slider > ul > li > * { .slider > ul > li > * {
font-size: 14px; } font-size: 14px; }
@ -1012,7 +912,6 @@ button.button-block {
border: 2px solid #e6e6e6; border: 2px solid #e6e6e6;
border-radius: 20px; } border-radius: 20px; }
/* Sliding handle */
.toggle-handle { .toggle-handle {
position: absolute; position: absolute;
top: -1px; top: -1px;
@ -1027,12 +926,10 @@ button.button-block {
-webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out; -webkit-transition: -webkit-transform 0.1s ease-in-out, border 0.1s ease-in-out;
transition: transform 0.1s ease-in-out, border 0.1s ease-in-out; } transition: transform 0.1s ease-in-out, border 0.1s ease-in-out; }
/* Active state for toggle */
.toggle.active { .toggle.active {
background-color: #4cd964; background-color: #4cd964;
border: 2px solid #4cd964; } border: 2px solid #4cd964; }
/* Active state for toggle handle */
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
border-color: #4cd964; border-color: #4cd964;
-webkit-transform: translate3d(17px, 0, 0); -webkit-transform: translate3d(17px, 0, 0);
@ -1040,7 +937,6 @@ button.button-block {
/* Push styles (to be used with push.js) /* Push styles (to be used with push.js)
-------------------------------------------------- */ -------------------------------------------------- */
/* Fade animation */
.content.fade { .content.fade {
left: 0; left: 0;
opacity: 0; opacity: 0;
@ -1050,8 +946,8 @@ button.button-block {
.content.fade.in { .content.fade.in {
opacity: 1; } opacity: 1; }
/* Slide animation */
.content.slide { .content.slide {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform .25s ease-in-out; -webkit-transition: -webkit-transform .25s ease-in-out;

59
lib/sass/bars.scss

@ -10,32 +10,29 @@
padding: 5px; padding: 5px;
background-color: rgba(247,247,247,.98); background-color: rgba(247,247,247,.98);
box-shadow: 0 0px 1px rgba(0,0,0,.85); box-shadow: 0 0px 1px rgba(0,0,0,.85);
/*border-bottom: 1px solid rgba(0,0,0,.3);*/
box-sizing: border-box; box-sizing: border-box;
} }
/* Modifier class to dock any bar below .bar-title */ // Modifier class to dock any bar below .bar-title
.bar-header-secondary { .bar-header-secondary {
top: 44px; top: 44px;
} }
/* Modifier class to dock any bar to bottom of viewport */ // Modifier class to dock any bar to bottom of viewport
.bar-footer { .bar-footer {
bottom: 0; bottom: 0;
} }
/* Flip border position to top for footer bars */ // Flip border position to top for footer bars
.bar-footer.bar-standard, .bar-footer.bar-standard,
.bar-footer-secondary.bar-standard { .bar-footer-secondary.bar-standard {
/*border-top: 1px solid #aaa;
border-bottom-width: 0;*/
box-shadow: 0 0px 1px rgba(0,0,0,.85); box-shadow: 0 0px 1px rgba(0,0,0,.85);
} }
/* Title bar /* Title bar
-------------------------------------------------- */ -------------------------------------------------- */
/* Bar docked to top of viewport for showing page title and actions */ // Bar docked to top of viewport for showing page title and actions
.bar-title { .bar-title {
top: 0; top: 0;
display: -webkit-box; display: -webkit-box;
@ -44,7 +41,7 @@
box-orient: horizontal; box-orient: horizontal;
} }
/* Centered text in the .bar-title */ // Centered text in the .bar-title
.bar-title .title { .bar-title .title {
position: absolute; position: absolute;
top: 0; top: 0;
@ -65,7 +62,7 @@
height: 100%; height: 100%;
} }
/* Retain specified title color */ //Retain specified title color
.bar-title .title a { .bar-title .title a {
color: inherit; color: inherit;
} }
@ -73,17 +70,15 @@
/* Tab bar /* Tab bar
-------------------------------------------------- */ -------------------------------------------------- */
/* Bar docked to bottom used for primary app navigation */ // Bar docked to bottom used for primary app navigation
.bar-tab { .bar-tab {
bottom: 0; bottom: 0;
height: 50px; height: 50px;
padding: 0; padding: 0;
/*border-top: 1px solid rgba(0,0,0,.3);
border-bottom-width: 0;*/
box-shadow: 0 0px 1px rgba(0,0,0,.85); box-shadow: 0 0px 1px rgba(0,0,0,.85);
} }
/* Wrapper for individual tab */ // Wrapper for individual tab
.tab-inner { .tab-inner {
display: -webkit-box; display: -webkit-box;
display: box; display: box;
@ -93,7 +88,7 @@
box-orient: horizontal; box-orient: horizontal;
} }
/* Navigational tab */ // Navigational tab
.tab-item { .tab-item {
height: 100%; height: 100%;
padding-top: 9px; padding-top: 9px;
@ -103,14 +98,14 @@
box-flex: 1; box-flex: 1;
} }
/* Icon for tab */ // Icon for tab
.tab-icon { .tab-icon {
display: block; display: block;
height: 18px; height: 18px;
margin: 0 auto; margin: 0 auto;
} }
/* Label for tab */ // Label for tab
.tab-label { .tab-label {
margin-top: 1px; margin-top: 1px;
font-size: 11px; font-size: 11px;
@ -124,10 +119,10 @@
/* Buttons in title bars /* Buttons in title bars
-------------------------------------------------- */ -------------------------------------------------- */
/* Generic style for all buttons in .bar-title */ // Generic style for all buttons in .bar-title
.bar-title [class*="button"] { .bar-title [class*="button"] {
position: relative; position: relative;
z-index: 10; /* Places buttons over full width title */ z-index: 10; // Places buttons over full width title
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
font-size: 16px; font-size: 16px;
@ -141,8 +136,8 @@
} }
/* Hacky way to right align buttons outside of flex-box system // Hacky way to right align buttons outside of flex-box system
Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */ // Note: is only absolutely positioned button, would be better if flex-box had an "align right" option
.bar-title .title + [class*="button"]:last-child, .bar-title .title + [class*="button"]:last-child,
.bar-title .button + [class*="button"]:last-child, .bar-title .button + [class*="button"]:last-child,
.bar-title [class*="button"].pull-right { .bar-title [class*="button"].pull-right {
@ -151,7 +146,7 @@
right: 5px; right: 5px;
} }
/* Override standard button active states */ // Override standard button active states
.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 {
@ -175,15 +170,15 @@
content: ''; content: '';
} }
/* Prev/next button base styles */ // Prev/next button base styles
.bar-title .button-prev { .bar-title .button-prev {
padding-left: 22px; /* Push over to make room for chevrons */ padding-left: 22px; // Push over to make room for chevrons
} }
.bar-title .button-next { .bar-title .button-next {
padding-right: 22px; /* Push over to make room for chevrons */ padding-right: 22px; // Push over to make room for chevrons
} }
/* Position the chevrons horizontally */ // Position the chevrons horizontally
.bar-title .button-prev:before, .bar-title .button-prev:before,
.bar-title .button-prev:after { .bar-title .button-prev:after {
left: 0; left: 0;
@ -193,7 +188,7 @@
right: 0; right: 0;
} }
/* Position the chevrons vertically */ // Position the chevrons vertically
.bar-title .button-prev:before, .bar-title .button-prev:before,
.bar-title .button-next:before { .bar-title .button-next:before {
top: 12px; top: 12px;
@ -203,7 +198,7 @@
top: 21px; top: 21px;
} }
/* Rotate the chevrons */ // Rotate the chevrons
.bar-title .button-prev:before { .bar-title .button-prev:before {
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); transform: rotate(-45deg);
@ -224,13 +219,13 @@
/* Block buttons in any bar /* Block buttons in any bar
-------------------------------------------------- */ -------------------------------------------------- */
/* Add proper padding and replace buttons normal dropshadow with a shine from bar */ // Add proper padding and replace buttons normal dropshadow with a shine from bar
[class*="bar"] .button-block { [class*="bar"] .button-block {
padding: 7px 0; padding: 7px 0;
margin-bottom: 0; margin-bottom: 0;
} }
/* Override standard padding changes for .button-blocks */ // Override standard padding changes for .button-blocks
[class*="bar"] .button-block:active { [class*="bar"] .button-block:active {
padding: 7px 0; padding: 7px 0;
} }
@ -238,12 +233,12 @@
/* Segmented controller in any bar /* Segmented controller in any bar
-------------------------------------------------- */ -------------------------------------------------- */
/* Remove standard segmented bottom margin */ // Remove standard segmented bottom margin
[class*="bar-"] .segmented-controller { [class*="bar-"] .segmented-controller {
margin-bottom: 0; margin-bottom: 0;
} }
/* Add margins between segmented controllers and buttons */ // Add margins between segmented controllers and buttons
[class*="bar-"] .segmented-controller + [class*="button"], [class*="bar-"] .segmented-controller + [class*="button"],
[class*="bar-"] [class*="button"] + .segmented-controller { [class*="bar-"] [class*="button"] + .segmented-controller {
margin-left: 5px; margin-left: 5px;
@ -262,7 +257,7 @@
/* Search forms in standard bar /* Search forms in standard bar
-------------------------------------------------- */ -------------------------------------------------- */
/* Position/size search bar within the bar */ // Position/size search bar within the bar
.bar-standard input[type=search] { .bar-standard input[type=search] {
height: 32px; height: 32px;
margin: 0; margin: 0;

18
lib/sass/base.scss

@ -83,7 +83,7 @@ video {
border: 0; border: 0;
} }
/* Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas) */ // Prevents iOS text size adjust after orientation change, without disabling (Thanks to @necolas)
html { html {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
@ -102,14 +102,14 @@ body {
background-color: #fff; background-color: #fff;
} }
/* Universal link styling */ // Universal link styling
a { a {
color: #007aff; color: #007aff;
text-decoration: none; text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* Removes the dark touch outlines on links */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links
} }
/* Wrapper to be used around all content not in .bar-title and .bar-tab */ // Wrapper to be used around all content not in .bar-title and .bar-tab
.content { .content {
position: fixed; position: fixed;
top: 0; top: 0;
@ -127,20 +127,20 @@ a {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
/* Hack to force all relatively and absolutely positioned elements still render while scrolling // Hack to force all relatively and absolutely positioned elements still render while scrolling
Note: This is a bug for "-webkit-overflow-scrolling: touch" */ // Note: This is a bug for "-webkit-overflow-scrolling: touch"
.content > * { .content > * {
-webkit-transform: translateZ(0px); -webkit-transform: translateZ(0px);
transform: translateZ(0px); transform: translateZ(0px);
} }
/* Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed */ // Utility wrapper to pad in components like forms, block buttons and segmented-controllers so they're not full-bleed
.content-padded { .content-padded {
padding: 10px; padding: 10px;
} }
/* Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab. // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
Note: For these to work, content must come after both bars in the markup */ // Note: For these to work, content must come after both bars in the markup
.bar-title ~ .content { .bar-title ~ .content {
padding-top: 44px; padding-top: 44px;
} }

25
lib/sass/buttons.scss

@ -17,7 +17,7 @@
border-radius: 4px; border-radius: 4px;
} }
/* Active */ // Active
[class*="button"]:active { [class*="button"]:active {
background-color: #333; background-color: #333;
transition: background-color .1s linear; transition: background-color .1s linear;
@ -26,32 +26,32 @@
/* Button modifiers /* Button modifiers
-------------------------------------------------- */ -------------------------------------------------- */
/* Overriding styles for buttons with modifiers */ // Overriding styles for buttons with modifiers
.button-main, .button-main,
.button-positive, .button-positive,
.button-negative { .button-negative {
color: #fff; color: #fff;
} }
/* Main button */ // Main button
.button-main { .button-main {
color: #007aff; color: #007aff;
border: 1px solid #007aff; border: 1px solid #007aff;
} }
/* Positive button */ // Positive button
.button-positive { .button-positive {
color: #4cd964; color: #4cd964;
border: 1px solid #4cd964; border: 1px solid #4cd964;
} }
/* Negative button */ // Negative button
.button-negative { .button-negative {
color: #e71e1e; color: #e71e1e;
border: 1px solid #b51a1a; border: 1px solid #b51a1a;
} }
/* Active state for buttons with modifiers */ // Active state for buttons with modifiers
[class*="button"]:active, [class*="button"]:active,
.button-main:active, .button-main:active,
.button-positive:active, .button-positive:active,
@ -70,7 +70,7 @@
background-color: #b21a1a; background-color: #b21a1a;
} }
/* Block level buttons (full width buttons) */ // Block level buttons (full width buttons)
.button-block { .button-block {
display: block; display: block;
padding: 11px 0 13px; padding: 11px 0 13px;
@ -78,8 +78,7 @@
font-size: 16px; font-size: 16px;
} }
// Make button elements go full width when given .button-block class
/* Make button elements go full width when given .button-block class */
button.button-block { button.button-block {
width: 100%; width: 100%;
} }
@ -87,7 +86,7 @@ button.button-block {
/* Counts in buttons /* Counts in buttons
-------------------------------------------------- */ -------------------------------------------------- */
/* Generic styles for all counts within buttons */ // Generic styles for all counts within buttons
[class*="button"] [class*="count"] { [class*="button"] [class*="count"] {
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
@ -96,9 +95,9 @@ button.button-block {
background-color: rgba(0, 0, 0, .1); background-color: rgba(0, 0, 0, .1);
} }
/* Position counts within block level buttons // Position counts within block level buttons
Note: These are absolutely positioned so that text of button isn't "pushed" by count and always // Note: These are absolutely positioned so that text of button isn't "pushed" by count and always
stays at true center of button */ // stays at true center of button
.button-block [class*="count"] { .button-block [class*="count"] {
position: absolute; position: absolute;
right: 0; right: 0;

4
lib/sass/chevrons.scss

@ -6,7 +6,7 @@
height: 20px; height: 20px;
} }
/* Base styles for both 1/2's of the chevron */ // Base styles for both 1/2's of the chevron
.chevron:before, .chevron:before,
.chevron:after { .chevron:after {
position: relative; position: relative;
@ -17,7 +17,7 @@
content: ''; content: '';
} }
/* Position and rotate respective 1/2's of the chevron */ // Position and rotate respective 1/2's of the chevron
.chevron:before { .chevron:before {
top: 6px; top: 6px;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);

8
lib/sass/counts.scss

@ -15,24 +15,24 @@
/* Count modifiers /* Count modifiers
-------------------------------------------------- */ -------------------------------------------------- */
/* Overriding styles for counts with modifiers */ // Overriding styles for counts with modifiers
.count-main, .count-main,
.count-positive, .count-positive,
.count-negative { .count-negative {
color: #fff; color: #fff;
} }
/* Main count */ // Main count
.count-main { .count-main {
background-color: #1eafe7; background-color: #1eafe7;
} }
/* Positive count */ // Positive count
.count-positive { .count-positive {
background-color: #4cd964; background-color: #4cd964;
} }
/* Negative count */ // Negative count
.count-negative { .count-negative {
background-color: #e71e1e; background-color: #e71e1e;
} }

28
lib/sass/forms.scss

@ -1,7 +1,7 @@
/* Forms /* Forms
-------------------------------------------------- */ -------------------------------------------------- */
/* Force form elements to inherit font styles */ // Force form elements to inherit font styles
input, input,
textarea, textarea,
button, button,
@ -10,7 +10,7 @@ select {
font-size: inherit; font-size: inherit;
} }
/* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */ // Stretch inputs/textareas to full width and add height to maintain a consistent baseline
select, select,
textarea, textarea,
input[type="text"], input[type="text"],
@ -40,7 +40,7 @@ input[type="color"],
outline: none; outline: none;
} }
/* Fully round search input */ // Fully round search input
input[type=search] { input[type=search] {
height: 34px; height: 34px;
font-size: 14px; font-size: 14px;
@ -49,12 +49,12 @@ input[type=search] {
background-color: rgba(0,0,0,.1); background-color: rgba(0,0,0,.1);
} }
/* Allow text area's height to grow larger than a normal input */ // Allow text area's height to grow larger than a normal input
textarea { textarea {
height: auto; height: auto;
} }
/* Style select button to look like part of the Ratchet's style */ // Style select button to look like part of the Ratchet's style
select { select {
height: auto; height: auto;
font-size: 14px; font-size: 14px;
@ -66,16 +66,16 @@ select {
/* Input groups (cluster multiple inputs together into a single group) /* Input groups (cluster multiple inputs together into a single group)
-------------------------------------------------- */ ---------------------------------------------------------------------- */
/* Reset from initial form setup styles */ // Reset from initial form setup styles
.input-group { .input-group {
width: auto; width: auto;
height: auto; height: auto;
padding: 0; padding: 0;
} }
/* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */ // Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input
.input-group input { .input-group input {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
@ -85,7 +85,7 @@ select {
box-shadow: none; box-shadow: none;
} }
/* Remove bottom border on last input to avoid double bottom border */ // Remove bottom border on last input to avoid double bottom border
.input-group input:last-child { .input-group input:last-child {
border-bottom-width: 0; border-bottom-width: 0;
} }
@ -93,26 +93,26 @@ select {
/* Input groups with labels /* Input groups with labels
-------------------------------------------------- */ -------------------------------------------------- */
/* To use labels with input groups, wrap a label and an input in an .input-row */ // To use labels with input groups, wrap a label and an input in an .input-row
.input-row { .input-row {
overflow: hidden; overflow: hidden;
border-bottom: 1px solid rgba(0, 0, 0, .2); border-bottom: 1px solid rgba(0, 0, 0, .2);
} }
/* Remove bottom border on last input-row to avoid double bottom border */ // Remove bottom border on last input-row to avoid double bottom border
.input-row:last-child { .input-row:last-child {
border-bottom-width: 0; border-bottom-width: 0;
} }
/* Labels get floated left with a set percentage width */ // Labels get floated left with a set percentage width
.input-row label { .input-row label {
float: left; float: left;
width: 25%; width: 25%;
padding: 11px 10px 9px 13px; /* Optimizing the baseline for mobile. */ padding: 11px 10px 9px 13px; // Optimizing the baseline for mobile.
font-weight: bold; font-weight: bold;
} }
/* Actual inputs float to right of labels and also have a set percentage */ // Actual inputs float to right of labels and also have a set percentage
.input-row label + input { .input-row label + input {
float: right; float: right;
width: 65%; width: 65%;

14
lib/sass/lists.scss

@ -1,31 +1,31 @@
/* Lists /* Lists
-------------------------------------------------- */ -------------------------------------------------- */
/* Remove usual bullet styles from list */ // Remove usual bullet styles from list
.list { .list {
list-style: none; list-style: none;
background-color: #fff; background-color: #fff;
} }
/* Pad each list item and add dividers */ // Pad each list item and add dividers
.list li { .list li {
position: relative; position: relative;
padding: 11px 60px 11px 0; /* Given extra right padding to accomodate counts, chevrons or buttons */ padding: 11px 60px 11px 0; // Given extra right padding to accomodate counts, chevrons or buttons
margin-left: 15px; margin-left: 15px;
border-bottom: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1);
} }
/* Give top border to first list items */ // Give top border to first list items
.list li:first-child { .list li:first-child {
border-top: 1px solid rgba(0, 0, 0, .1); border-top: 1px solid rgba(0, 0, 0, .1);
} }
/* Remove the border from the last list item*/ // Remove the border from the last list item
.list li:last-child { .list li:last-child {
border-bottom: 0; border-bottom: 0;
} }
/* If a list of links, make sure the child <a> takes up full list item tap area (want to avoid selecting child buttons though) */ // If a list of links, make sure the child <a> takes up full list item tap area (want to avoid selecting child buttons though)
.list li > a:not([class*="button"]) { .list li > a:not([class*="button"]) {
position: relative; position: relative;
display: block; display: block;
@ -46,7 +46,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
/* Remove border from first/last standard list items to avoid double border at top/bottom of lists */ // Remove border from first/last standard list items to avoid double border at top/bottom of lists
.list.inset li:first-child { .list.inset li:first-child {
border-top-width: 0; border-top-width: 0;
} }

18
lib/sass/popovers.scss

@ -23,7 +23,7 @@
transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
} }
/* Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution) */ // Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution)
.popover:before, .popover:before,
.popover:after { .popover:after {
position: absolute; position: absolute;
@ -47,7 +47,7 @@
border-left: 20px solid transparent; border-left: 20px solid transparent;
} }
/* Wrapper for a title and buttons */ // Wrapper for a title and buttons
.popover-header { .popover-header {
display: -webkit-box; display: -webkit-box;
display: box; display: box;
@ -55,7 +55,7 @@
margin-bottom: 5px; margin-bottom: 5px;
} }
/* Centered title for popover */ // Centered title for popover
.popover-header .title { .popover-header .title {
position: absolute; position: absolute;
top: 0; top: 0;
@ -70,7 +70,7 @@
text-shadow: 0 -1px rgba(0, 0, 0, .5); text-shadow: 0 -1px rgba(0, 0, 0, .5);
} }
/* Generic style for all buttons in .popover-header */ // Generic style for all buttons in .popover-header
.popover-header [class*="button"] { .popover-header [class*="button"] {
z-index: 25; z-index: 25;
font-size: 12px; font-size: 12px;
@ -85,8 +85,8 @@
box-flex: 0; box-flex: 0;
} }
/* Hacky way to right align buttons outside of flex-box system // Hacky way to right align buttons outside of flex-box system
Note: is only absolutely positioned button, would be better if flex-box had an "align right" option */ // Note: is only absolutely positioned button, would be better if flex-box had an "align right" option
.popover-header .title + [class*="button"]:last-child, .popover-header .title + [class*="button"]:last-child,
.popover-header .button + [class*="button"]:last-child, .popover-header .button + [class*="button"]:last-child,
.popover-header [class*="button"].pull-right { .popover-header [class*="button"].pull-right {
@ -95,7 +95,7 @@
right: 5px; right: 5px;
} }
/* Active state for popover header buttons */ // Active state for popover header buttons
.popover-header .button:active { .popover-header .button:active {
color: #fff; color: #fff;
background-color: #0876b1; background-color: #0876b1;
@ -125,13 +125,13 @@
/* Block level buttons in popovers /* Block level buttons in popovers
-------------------------------------------------- */ -------------------------------------------------- */
/* Positioning and giving darker border to look sharp against dark popover */ // Positioning and giving darker border to look sharp against dark popover
.popover .button-block { .popover .button-block {
margin-bottom: 5px; margin-bottom: 5px;
border: 1px solid #111; border: 1px solid #111;
} }
/* Remove extra margin on bottom of last button */ // Remove extra margin on bottom of last button
.popover .button-block:last-child { .popover .button-block:last-child {
margin-bottom: 0; margin-bottom: 0;
} }

6
lib/sass/push.scss

@ -1,7 +1,7 @@
/* Push styles (to be used with push.js) /* Push styles (to be used with push.js)
-------------------------------------------------- */ -------------------------------------------------- */
/* Fade animation */ // Fade animation
.content.fade { .content.fade {
left: 0; left: 0;
opacity: 0; opacity: 0;
@ -11,9 +11,9 @@
.content.fade.in { .content.fade.in {
opacity: 1; opacity: 1;
} }
// Slide animation iOS7
/* Slide animation */
.content.slide { .content.slide {
-webkit-transition-timing-function: cubic-bezier(.1, .7, .1, 1); //Thanks to @c2prods
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform .25s ease-in-out; -webkit-transition: -webkit-transform .25s ease-in-out;

10
lib/sass/segmented-controllers.scss

@ -16,7 +16,7 @@
box-orient: horizontal; box-orient: horizontal;
} }
/* Section within controller */ // Section within controller
.segmented-controller li { .segmented-controller li {
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
@ -26,7 +26,7 @@
box-flex: 1; box-flex: 1;
} }
/* Link that fills each section */ // Link that fills each section
.segmented-controller li > a { .segmented-controller li > a {
display: block; display: block;
padding: 8px 16px; padding: 8px 16px;
@ -36,17 +36,17 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
/* Remove border-left and shadow from first section */ // Remove border-left and shadow from first section
.segmented-controller li:first-child { .segmented-controller li:first-child {
border-left-width: 0; border-left-width: 0;
} }
/* Active segment of controller */ // Active segment of controller
.segmented-controller li.active { .segmented-controller li.active {
background-color: #007aff; background-color: #007aff;
transition: background-color .2s linear; transition: background-color .2s linear;
} }
/* Set color of links to white */ // Set color of links to white
.segmented-controller li.active > a { .segmented-controller li.active > a {
color: #fff; color: #fff;
} }

14
lib/sass/sliders.scss

@ -1,37 +1,37 @@
/* Slider styles (to be used with sliders.js) /* Slider styles (to be used with sliders.js)
-------------------------------------------------- */ -------------------------------------------------- */
/* Width/height of slider */ // Width/height of slider
.slider, .slider,
.slider > li { .slider > li {
width: 100%; width: 100%;
height: 200px; height: 200px;
} }
/* Outer wrapper for slider */ // Outer wrapper for slider
.slider { .slider {
overflow: hidden; overflow: hidden;
background-color: #000; background-color: #000;
} }
/* Inner wrapper for slider (width of all slides together) */ // Inner wrapper for slider (width of all slides together)
.slider > ul { .slider > ul {
position: relative; position: relative;
font-size: 0; /* Remove spaces from inline-block children */ font-size: 0; // Remove spaces from inline-block children
white-space: nowrap; white-space: nowrap;
-webkit-transition: all 0 linear; -webkit-transition: all 0 linear;
transition: all 0 linear; transition: all 0 linear;
} }
/* Individual slide */ // Individual slide */
.slider > ul > li { .slider > ul > li {
display: inline-block; display: inline-block;
vertical-align: top; /* Ensure that li always aligns to top */ vertical-align: top; // Ensure that li always aligns to top
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/* Required reset of font-size to same as standard body */ // Required reset of font-size to same as standard body
.slider > ul > li > * { .slider > ul > li > * {
font-size: 14px; font-size: 14px;
} }

6
lib/sass/toggles.scss

@ -10,7 +10,7 @@
border-radius: 20px; border-radius: 20px;
} }
/* Sliding handle */ // Sliding handle
.toggle-handle { .toggle-handle {
position: absolute; position: absolute;
top: -1px; top: -1px;
@ -26,13 +26,13 @@
transition: transform 0.1s ease-in-out, border 0.1s ease-in-out; transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
} }
/* Active state for toggle */ // Active state for toggle
.toggle.active { .toggle.active {
background-color: #4cd964; background-color: #4cd964;
border: 2px solid #4cd964; border: 2px solid #4cd964;
} }
/* Active state for toggle handle */ // Active state for toggle handle
.toggle.active .toggle-handle { .toggle.active .toggle-handle {
border-color: #4cd964; border-color: #4cd964;
-webkit-transform: translate3d(17px,0,0); -webkit-transform: translate3d(17px,0,0);

Loading…
Cancel
Save