playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
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
a5246480e6
commit
54ce0835a2
13 changed files with 109 additions and 219 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 10
      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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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;
} }

10
lib/sass/push.scss
Unescape View File

@ -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,13 +11,13 @@
.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;
transition: transform .25s ease-in-out; transition: transform .25s ease-in-out;
} }
.content.slide.left { .content.slide.left {
-webkit-transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0);

10
lib/sass/segmented-controllers.scss
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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);

Write Preview
Loading…
Cancel
Save