playground
/
ratchet
mirror of https://github.com/twbs/ratchet.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Starting the rewrite into sass

pull/214/head
connors 11 years ago
parent
db85bb2625
commit
44c849d098
12 changed files with 259 additions and 324 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. 110
      dist/ratchet.css
  2. 37
      lib/sass/bars.scss
  3. 5
      lib/sass/base.scss
  4. 15
      lib/sass/buttons.scss
  5. 23
      lib/sass/chevrons.scss
  6. 16
      lib/sass/counts.scss
  7. 14
      lib/sass/forms.scss
  8. 13
      lib/sass/modals.scss
  9. 21
      lib/sass/popovers.scss
  10. 34
      lib/sass/push.scss
  11. 45
      lib/sass/segmented-controllers.scss
  12. 14
      lib/sass/table-views.scss

110
dist/ratchet.css vendored
Unescape View File

@ -8,8 +8,6 @@
* ===================================================== * =====================================================
*/ */
/* Hard reset
-------------------------------------------------- */
html, html,
body, body,
div, div,
@ -143,8 +141,6 @@ a {
.bar-header-secondary ~ .content { .bar-header-secondary ~ .content {
padding-top: 88px; } padding-top: 88px; }
/* General bar styles
-------------------------------------------------- */
[class*="bar-"] { [class*="bar-"] {
position: fixed; position: fixed;
right: 0; right: 0;
@ -166,8 +162,6 @@ a {
.bar-footer-secondary.bar-standard { .bar-footer-secondary.bar-standard {
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); } box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85); }
/* Title bar
-------------------------------------------------- */
.bar-title { .bar-title {
top: 0; top: 0;
display: -webkit-box; display: -webkit-box;
@ -196,8 +190,6 @@ a {
.bar-title .title a { .bar-title .title a {
color: inherit; } color: inherit; }
/* Tab bar
-------------------------------------------------- */
.bar-tab { .bar-tab {
bottom: 0; bottom: 0;
height: 50px; height: 50px;
@ -234,8 +226,6 @@ a {
.tab-item.active .tab-label { .tab-item.active .tab-label {
color: #007aff; } color: #007aff; }
/* Buttons in title bars
-------------------------------------------------- */
.bar-title [class*="button"] { .bar-title [class*="button"] {
position: relative; position: relative;
z-index: 10; z-index: 10;
@ -264,8 +254,6 @@ a {
background-color: transparent; background-color: transparent;
opacity: .3; } opacity: .3; }
/* Directional buttons in title bars
-------------------------------------------------- */
.bar-title .button-prev:before, .bar-title .button-prev:before,
.bar-title .button-prev:after, .bar-title .button-prev:after,
.bar-title .button-next:before, .bar-title .button-next:before,
@ -315,8 +303,6 @@ a {
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
/* Block buttons in any bar
-------------------------------------------------- */
[class*="bar"] .button-block { [class*="bar"] .button-block {
padding: 7px 0; padding: 7px 0;
margin-bottom: 0; } margin-bottom: 0; }
@ -324,8 +310,6 @@ a {
[class*="bar"] .button-block:active { [class*="bar"] .button-block:active {
padding: 7px 0; } padding: 7px 0; }
/* Segmented controller in any bar
-------------------------------------------------- */
[class*="bar-"] .segmented-controller { [class*="bar-"] .segmented-controller {
margin-bottom: 0; } margin-bottom: 0; }
@ -333,15 +317,11 @@ a {
[class*="bar-"] [class*="button"] + .segmented-controller { [class*="bar-"] [class*="button"] + .segmented-controller {
margin-left: 5px; } margin-left: 5px; }
/* Segmented controller in a title bar
-------------------------------------------------- */
.bar-title .segmented-controller { .bar-title .segmented-controller {
line-height: 18px; line-height: 18px;
-webkit-box-flex: 1; -webkit-box-flex: 1;
box-flex: 1; } box-flex: 1; }
/* Search forms in standard bar
-------------------------------------------------- */
.bar-standard input[type=search] { .bar-standard input[type=search] {
height: 32px; height: 32px;
margin: 0; } margin: 0; }
@ -389,11 +369,11 @@ a {
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
/* Rounding first divider on inset lists and remove border on the top */ /* Rounding first divider on inset lists and remove border on the top */
/* Rounding last divider on inset table views */ } /* Rounding last divider on inset table views */ }
.table-view .table-view-divider :first-child { .table-view .table-view-divider:first-child {
top: 0; top: 0;
border-top-width: 0; border-top-width: 0;
border-radius: 6px 6px 0 0; } border-radius: 6px 6px 0 0; }
.table-view .table-view-divider :last-child { .table-view .table-view-divider:last-child {
border-radius: 0 0 6px 6px; } border-radius: 0 0 6px 6px; }
.table-view .chevron, .table-view .chevron,
.table-view [class*="button"], .table-view [class*="button"],
@ -413,8 +393,6 @@ a {
.table-view .toggle { .table-view .toggle {
margin-top: -15px; } margin-top: -15px; }
/* Forms
-------------------------------------------------- */
input, input,
textarea, textarea,
button, button,
@ -468,8 +446,6 @@ select {
background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%); background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
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-group { .input-group {
width: auto; width: auto;
height: auto; height: auto;
@ -486,8 +462,6 @@ select {
.input-group input:last-child { .input-group input:last-child {
border-bottom-width: 0; } border-bottom-width: 0; }
/* Input groups with labels
-------------------------------------------------- */
.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); }
@ -508,8 +482,6 @@ select {
margin-bottom: 0; margin-bottom: 0;
border-bottom: 0; } border-bottom: 0; }
/* General button styles
-------------------------------------------------- */
[class*="button"] { [class*="button"] {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -524,13 +496,10 @@ select {
background-color: transparent; background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.5);
border-radius: 4px; } border-radius: 4px; }
[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-main, .button-main,
.button-positive, .button-positive,
.button-negative { .button-negative {
@ -590,33 +559,25 @@ button.button-block {
padding-bottom: 4px; padding-bottom: 4px;
margin-right: 10px; } margin-right: 10px; }
/* Chevrons
-------------------------------------------------- */
.chevron { .chevron {
display: block; display: block;
height: 20px; } height: 20px; }
.chevron:before, .chevron:after {
.chevron:before,
.chevron:after {
position: relative; position: relative;
display: block; display: block;
width: 10px; width: 10px;
height: 3px; height: 3px;
background-color: #c7c7cc; background-color: #c7c7cc;
content: ''; } content: ''; }
.chevron:before {
.chevron:before {
top: 6px; top: 6px;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg); } transform: rotate(45deg); }
.chevron:after {
.chevron:after {
top: 8px; top: 8px;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
/* General count styles
-------------------------------------------------- */
[class*="count"] { [class*="count"] {
display: inline-block; display: inline-block;
padding: 4px 9px; padding: 4px 9px;
@ -627,13 +588,6 @@ button.button-block {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
border-radius: 100px; } border-radius: 100px; }
/* Count modifiers
-------------------------------------------------- */
.count-main,
.count-positive,
.count-negative {
color: #fff; }
.count-main { .count-main {
background-color: #1eafe7; } background-color: #1eafe7; }
@ -643,8 +597,6 @@ button.button-block {
.count-negative { .count-negative {
background-color: #e71e1e; } background-color: #e71e1e; }
/* Segmented controllers
-------------------------------------------------- */
.segmented-controller { .segmented-controller {
display: -webkit-box; display: -webkit-box;
display: box; display: box;
@ -658,41 +610,32 @@ button.button-block {
border-radius: 4px; border-radius: 4px;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
box-orient: horizontal; } box-orient: horizontal; }
.segmented-controller li {
.segmented-controller li {
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
border-left: 1px solid #007aff; border-left: 1px solid #007aff;
-webkit-box-flex: 1; -webkit-box-flex: 1;
box-flex: 1; } box-flex: 1; }
.segmented-controller li > a {
.segmented-controller li > a {
display: block; display: block;
padding: 8px 16px; padding: 8px 16px;
overflow: hidden; overflow: hidden;
line-height: 15px; line-height: 15px;
color: #007aff; color: #007aff;
text-overflow: ellipsis; } text-overflow: ellipsis; }
.segmented-controller li:first-child {
.segmented-controller li:first-child {
border-left-width: 0; } border-left-width: 0; }
.segmented-controller li.active {
.segmented-controller li.active {
background-color: #007aff; background-color: #007aff;
transition: background-color .2s linear; } transition: background-color .2s linear; }
.segmented-controller li.active > a {
.segmented-controller li.active > a {
color: #fff; } color: #fff; }
.segmented-controller .segmented-controller-item {
.segmented-controller-item {
display: none; } display: none; }
.segmented-controller .segmented-controller-item.active {
.segmented-controller-item.active {
display: block; } display: block; }
/* Popovers (to be used with popovers.js)
-------------------------------------------------- */
.popover { .popover {
position: fixed; position: fixed;
top: 55px; top: 55px;
@ -779,15 +722,11 @@ button.button-block {
color: #fff; color: #fff;
background-color: #0876b1; } background-color: #0876b1; }
/* Popover animation
-------------------------------------------------- */
.popover.visible { .popover.visible {
opacity: 1; opacity: 1;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } transform: translate3d(0, 0, 0); }
/* Backdrop (used as invisible touch escape)
-------------------------------------------------- */
.backdrop { .backdrop {
position: fixed; position: fixed;
top: 0; top: 0;
@ -796,8 +735,6 @@ button.button-block {
left: 0; left: 0;
z-index: 10; } z-index: 10; }
/* Block level buttons in popovers
-------------------------------------------------- */
.popover .button-block { .popover .button-block {
margin-bottom: 5px; margin-bottom: 5px;
border: 1px solid #111; } border: 1px solid #111; }
@ -805,8 +742,6 @@ button.button-block {
.popover .button-block:last-child { .popover .button-block:last-child {
margin-bottom: 0; } margin-bottom: 0; }
/* Lists in popovers
-------------------------------------------------- */
.popover .table-view { .popover .table-view {
width: auto; width: auto;
max-height: 250px; max-height: 250px;
@ -819,8 +754,6 @@ button.button-block {
border-radius: 3px; border-radius: 3px;
-webkit-overflow-scrolling: touch; } -webkit-overflow-scrolling: touch; }
/* Modals
-------------------------------------------------- */
.modal { .modal {
position: fixed; position: fixed;
top: 0; top: 0;
@ -834,10 +767,7 @@ button.button-block {
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
transition: transform .25s ease-in-out, opacity 1ms .25s; } transition: transform .25s ease-in-out, opacity 1ms .25s; }
.modal.active {
/* Modal - When active
-------------------------------------------------- */
.modal.active {
opacity: 1; opacity: 1;
height: 100%; height: 100%;
-webkit-transition: -webkit-transform .25s ease-in-out; -webkit-transition: -webkit-transform .25s ease-in-out;
@ -895,28 +825,22 @@ button.button-block {
-webkit-transform: translate3d(17px, 0, 0); -webkit-transform: translate3d(17px, 0, 0);
transform: translate3d(17px, 0, 0); } transform: translate3d(17px, 0, 0); }
/* Push styles (to be used with push.js)
-------------------------------------------------- */
.content.fade { .content.fade {
left: 0; left: 0;
opacity: 0; opacity: 0;
-webkit-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out; } transition: opacity .2s ease-in-out; }
.content.fade.in {
.content.fade.in {
opacity: 1; } opacity: 1; }
.content.slide { .content.slide {
-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;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); } -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
.content.slide.left {
.content.slide.left {
-webkit-transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); } transform: translate3d(-100%, 0, 0); }
.content.slide.right {
.content.slide.right {
-webkit-transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); } transform: translate3d(100%, 0, 0); }

37
lib/sass/bars.scss
Unescape View File

@ -1,5 +1,6 @@
/* General bar styles //
-------------------------------------------------- */ // Bars
// --------------------------------------------------
[class*="bar-"] { [class*="bar-"] {
position: fixed; position: fixed;
@ -29,8 +30,8 @@
box-shadow: 0 0px 1px rgba(0,0,0,.85); box-shadow: 0 0px 1px rgba(0,0,0,.85);
} }
/* Title bar // Nav 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 {
@ -67,8 +68,8 @@
color: inherit; color: inherit;
} }
/* 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 {
@ -116,8 +117,8 @@
color: $app-color; color: $app-color;
} }
/* Buttons in title bars // Buttons in nav 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"] {
@ -155,8 +156,8 @@
opacity: .3; opacity: .3;
} }
/* Directional buttons in title bars // Directional buttons in nav bars
-------------------------------------------------- */ // --------------------------------------------------
.bar-title .button-prev:before, .bar-title .button-prev:before,
.bar-title .button-prev:after, .bar-title .button-prev:after,
@ -216,8 +217,8 @@
transform: rotate(-45deg); transform: rotate(-45deg);
} }
/* Block buttons in any bar // Block buttons in all bars
-------------------------------------------------- */ // --------------------------------------------------
// 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 {
@ -230,8 +231,8 @@
padding: 7px 0; padding: 7px 0;
} }
/* Segmented controller in any bar // Segmented controller in all bars
-------------------------------------------------- */ // --------------------------------------------------
// Remove standard segmented bottom margin // Remove standard segmented bottom margin
[class*="bar-"] .segmented-controller { [class*="bar-"] .segmented-controller {
@ -244,8 +245,8 @@
margin-left: 5px; margin-left: 5px;
} }
/* Segmented controller in a title bar // Segmented controller in a nav bars
-------------------------------------------------- */ // --------------------------------------------------
.bar-title .segmented-controller { .bar-title .segmented-controller {
line-height: 18px; line-height: 18px;
@ -254,8 +255,8 @@
} }
/* 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] {

5
lib/sass/base.scss
Unescape View File

@ -1,5 +1,6 @@
/* Hard reset //
-------------------------------------------------- */ // Hard reset
// --------------------------------------------------
html, html,
body, body,

15
lib/sass/buttons.scss
Unescape View File

@ -1,5 +1,6 @@
/* General button styles //
-------------------------------------------------- */ // Buttons
// --------------------------------------------------
[class*="button"] { [class*="button"] {
position: relative; position: relative;
@ -15,16 +16,16 @@
background-color: transparent; background-color: transparent;
border: 1px solid rgba(0, 0, 0, .5); border: 1px solid rgba(0, 0, 0, .5);
border-radius: 4px; border-radius: 4px;
}
// Active // Active
[class*="button"]:active { &:active {
background-color: #333; background-color: #333;
transition: background-color .1s linear; transition: background-color .1s linear;
}
} }
/* Button modifiers // Buttons modifiers
-------------------------------------------------- */ // --------------------------------------------------
// Overriding styles for buttons with modifiers // Overriding styles for buttons with modifiers
.button-main, .button-main,

23
lib/sass/chevrons.scss
Unescape View File

@ -1,30 +1,31 @@
/* Chevrons //
-------------------------------------------------- */ // Chevrons
// --------------------------------------------------
.chevron { .chevron {
display: block; display: block;
height: 20px; height: 20px;
}
// Base styles for both 1/2's of the chevron // Base styles for both halves of the chevron
.chevron:before, &:before,
.chevron:after { &:after {
position: relative; position: relative;
display: block; display: block;
width: 10px; width: 10px;
height: 3px; height: 3px;
background-color: #c7c7cc; background-color: #c7c7cc;
content: ''; content: '';
} }
// Position and rotate respective 1/2's of the chevron // Position and rotate respective halves of the chevron
.chevron:before { &:before {
top: 6px; top: 6px;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg);
transform: rotate(45deg); transform: rotate(45deg);
} }
.chevron:after { &:after {
top: 8px; top: 8px;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); transform: rotate(-45deg);
}
} }

16
lib/sass/counts.scss
Unescape View File

@ -1,5 +1,6 @@
/* General count styles //
-------------------------------------------------- */ // Counts
// --------------------------------------------------
[class*="count"] { [class*="count"] {
display: inline-block; display: inline-block;
@ -12,15 +13,8 @@
border-radius: 100px; border-radius: 100px;
} }
/* Count modifiers // Count modifiers
-------------------------------------------------- */ // --------------------------------------------------
// Overriding styles for counts with modifiers
.count-main,
.count-positive,
.count-negative {
color: #fff;
}
// Main count // Main count
.count-main { .count-main {

14
lib/sass/forms.scss
Unescape View File

@ -1,5 +1,6 @@
/* Forms //
-------------------------------------------------- */ // Forms
// --------------------------------------------------
// Force form elements to inherit font styles // Force form elements to inherit font styles
input, input,
@ -65,8 +66,8 @@ 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 {
@ -90,8 +91,9 @@ select {
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 // To use labels with input groups, wrap a label and an input in an .input-row
.input-row { .input-row {

13
lib/sass/modals.scss
Unescape View File

@ -1,5 +1,7 @@
/* Modals //
-------------------------------------------------- */ // Modals
// --------------------------------------------------
.modal { .modal {
position: fixed; position: fixed;
top: 0; top: 0;
@ -13,15 +15,14 @@
transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
transition: transform .25s ease-in-out, opacity 1ms .25s; transition: transform .25s ease-in-out, opacity 1ms .25s;
}
/* Modal - When active // Active modal
-------------------------------------------------- */ &.active {
.modal.active {
opacity: 1; opacity: 1;
height: 100%; height: 100%;
-webkit-transition: -webkit-transform .25s ease-in-out; -webkit-transition: -webkit-transform .25s ease-in-out;
transition: transform .25 ease-in-out; transition: transform .25 ease-in-out;
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
} }

21
lib/sass/popovers.scss
Unescape View File

@ -1,5 +1,6 @@
/* Popovers (to be used with popovers.js) //
-------------------------------------------------- */ // Popovers (to be used with popovers.js)
// --------------------------------------------------
.popover { .popover {
position: fixed; position: fixed;
@ -101,8 +102,8 @@
background-color: #0876b1; background-color: #0876b1;
} }
/* Popover animation // Popover animation
-------------------------------------------------- */ // --------------------------------------------------
.popover.visible { .popover.visible {
opacity: 1; opacity: 1;
@ -110,8 +111,8 @@
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
} }
/* Backdrop (used as invisible touch escape) // Backdrop (used as invisible touch escape)
-------------------------------------------------- */ // --------------------------------------------------
.backdrop { .backdrop {
position: fixed; position: fixed;
@ -122,8 +123,8 @@
z-index: 10; z-index: 10;
} }
/* 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 {
@ -136,8 +137,8 @@
margin-bottom: 0; margin-bottom: 0;
} }
/* Lists in popovers // Table views in popovers
-------------------------------------------------- */ // --------------------------------------------------
.popover .table-view { .popover .table-view {
width: auto; width: auto;

34
lib/sass/push.scss
Unescape View File

@ -1,29 +1,37 @@
/* Push styles (to be used with push.js) //
-------------------------------------------------- */ // Push styles (to be used with push.js)
// --------------------------------------------------
// Fade animation .content {
.content.fade {
// Fade animation
&.fade {
left: 0; left: 0;
opacity: 0; opacity: 0;
-webkit-transition: opacity .2s ease-in-out; -webkit-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out;
}
.content.fade.in { &.in {
opacity: 1; opacity: 1;
} }
// Slide animation iOS7 }
.content.slide {
// Slide animation iOS7
&.slide {
-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;
-webkit-transition-timing-function: cubic-bezier(.1, .7, .1, 1); //Thanks to @c2prods -webkit-transition-timing-function: cubic-bezier(.1, .7, .1, 1); //Thanks to @c2prods
}
.content.slide.left { &.left {
-webkit-transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);
} }
.content.slide.right {
&.right {
-webkit-transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);
}
}
} }

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

@ -1,5 +1,6 @@
/* Segmented controllers //
-------------------------------------------------- */ // Segmented controllers
// --------------------------------------------------
.segmented-controller { .segmented-controller {
display: -webkit-box; display: -webkit-box;
@ -14,47 +15,47 @@
border-radius: 4px; border-radius: 4px;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
box-orient: horizontal; box-orient: horizontal;
}
// Section within controller // Section within controller
.segmented-controller li { li {
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
border-left: 1px solid $app-color; border-left: 1px solid $app-color;
-webkit-box-flex: 1; -webkit-box-flex: 1;
box-flex: 1; box-flex: 1;
}
// Link that fills each section // Link that fills each section
.segmented-controller li > a { > a {
display: block; display: block;
padding: 8px 16px; padding: 8px 16px;
overflow: hidden; overflow: hidden;
line-height: 15px; line-height: 15px;
color: $app-color; color: $app-color;
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 { &:first-child {
border-left-width: 0; border-left-width: 0;
} }
// Active segment of controller // Active segment of controller
.segmented-controller li.active { &.active {
background-color: $app-color; background-color: $app-color;
transition: background-color .2s linear; transition: background-color .2s linear;
}
// Set color of links to white
.segmented-controller li.active > a {
color: #fff;
}
.segmented-controller-item { // Set color of links to white
> a {
color: #fff;
}
}
}
.segmented-controller-item {
display: none; display: none;
}
.segmented-controller-item.active { &.active {
display: block; display: block;
}
}
} }

14
lib/sass/table-views.scss
Unescape View File

@ -12,26 +12,26 @@
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
li:first-child { &: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
li:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
// If a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though) // If a it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
li > a:not([class*="button"]) { > a:not([class*="button"]) {
position: relative; position: relative;
display: block; display: block;
padding: inherit; padding: inherit;
margin: -11px -60px -11px 0; margin: -11px -60px -11px 0;
color: inherit; color: inherit;
} }
}
// Inset table views // Inset table views
@ -72,14 +72,14 @@
border-bottom: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1);
/* Rounding first divider on inset lists and remove border on the top */ /* Rounding first divider on inset lists and remove border on the top */
:first-child { &:first-child {
top: 0; top: 0;
border-top-width: 0; border-top-width: 0;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
} }
/* Rounding last divider on inset table views */ /* Rounding last divider on inset table views */
:last-child { &:last-child {
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
} }
} }

Write Preview
Loading…
Cancel
Save