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

sassy

pull/214/head
connors 12 years ago
parent
a3ea9d660e
commit
db85bb2625
4 changed files with 261 additions and 297 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. 56
      dist/ratchet.css
  2. 19
      lib/sass/sliders.scss
  3. 82
      lib/sass/table-views.scss
  4. 11
      lib/sass/toggles.scss

56
dist/ratchet.css vendored
Unescape View File

@ -346,49 +346,35 @@ a {
height: 32px; height: 32px;
margin: 0; } margin: 0; }
/* Table views
-------------------------------------------------- */
.table-view { .table-view {
list-style: none; list-style: none;
background-color: #fff; } background-color: #fff; }
.table-view li { .table-view li {
position: relative; position: relative;
padding: 11px 60px 11px 0; padding: 11px 60px 11px 0;
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); }
.table-view li:first-child { .table-view li:first-child {
border-top: 1px solid rgba(0, 0, 0, 0.1); } border-top: 1px solid rgba(0, 0, 0, 0.1); }
.table-view li:last-child { .table-view li:last-child {
border-bottom: 0; } border-bottom: 0; }
.table-view li > a:not([class*="button"]) { .table-view li > 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 view
-------------------------------------------------- */
.table-view.inset { .table-view.inset {
width: auto; width: auto;
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 6px; border-radius: 6px;
box-sizing: border-box; } box-sizing: border-box; }
.table-view.inset li:first-child { .table-view.inset li:first-child {
border-top-width: 0; } border-top-width: 0; }
.table-view.inset li:last-child { .table-view.inset li:last-child {
border-bottom-width: 0; } border-bottom-width: 0; }
/* table view dividers
-------------------------------------------------- */
.table-view .table-view-divider { .table-view .table-view-divider {
position: relative; position: relative;
top: -1px; top: -1px;
@ -401,20 +387,14 @@ a {
background-color: #f8f8f8; background-color: #f8f8f8;
border-top: 1px solid rgba(0, 0, 0, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4); }
/* Rounding first divider on inset lists and remove border on the top */ /* Rounding first divider on inset lists and remove border on the top */
.table-view.inset .table-view-divider:first-child { /* Rounding last divider on inset table views */ }
.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 {
/* Rounding last divider on inset table views */
.table-view.inset .table-view-divider:last-child {
border-radius: 0 0 6px 6px; } border-radius: 0 0 6px 6px; }
/* Right-aligned subcontent in table views (chevrons, buttons, counts and toggles)
-------------------------------------------------- */
.table-view .chevron, .table-view .chevron,
.table-view [class*="button"], .table-view [class*="button"],
.table-view [class*="count"], .table-view [class*="count"],
@ -422,26 +402,16 @@ a {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 10px; } right: 10px; }
/* Position chevrons/counts vertically centered on the right in table view items */
.table-view .chevron, .table-view .chevron,
.table-view [class*="count"] { .table-view [class*="count"] {
margin-top: -10px; margin-top: -10px; }
/* Half height of chevron */ }
/* Push count over if there's a sibling chevron */
.table-view .chevron + [class*="count"] { .table-view .chevron + [class*="count"] {
right: 30px; } right: 30px; }
/* Position buttons vertically centered on the right in table view items */
.table-view [class*="button"] { .table-view [class*="button"] {
left: auto; left: auto;
margin-top: -14px; margin-top: -14px; }
/* Half height of button */ }
.table-view .toggle { .table-view .toggle {
margin-top: -15px; margin-top: -15px; }
/* Half height of toggle */ }
/* Forms /* Forms
-------------------------------------------------- */ -------------------------------------------------- */
@ -875,8 +845,6 @@ button.button-block {
-webkit-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); } transform: translate3d(0, 0, 0); }
/* Slider styles (to be used with sliders.js)
-------------------------------------------------- */
.slider, .slider,
.slider > li { .slider > li {
width: 100%; width: 100%;
@ -885,25 +853,20 @@ button.button-block {
.slider { .slider {
overflow: hidden; overflow: hidden;
background-color: #000; } background-color: #000; }
.slider > ul { .slider > ul {
position: relative; position: relative;
font-size: 0; font-size: 0;
white-space: nowrap; white-space: nowrap;
-webkit-transition: all 0 linear; -webkit-transition: all 0 linear;
transition: all 0 linear; } transition: all 0 linear; }
.slider > ul > li { .slider > ul > li {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
width: 100%; width: 100%;
height: 100%; } height: 100%; }
.slider > ul > li > * { .slider > ul > li > * {
font-size: 14px; } font-size: 14px; }
/* Toggle styles (to be used with toggles.js)
-------------------------------------------------- */
.toggle { .toggle {
position: relative; position: relative;
width: 45px; width: 45px;
@ -911,8 +874,7 @@ button.button-block {
background-color: #fff; background-color: #fff;
border: 2px solid #e6e6e6; border: 2px solid #e6e6e6;
border-radius: 20px; } border-radius: 20px; }
.toggle .toggle-handle {
.toggle-handle {
position: absolute; position: absolute;
top: -1px; top: -1px;
left: -1px; left: -1px;
@ -925,11 +887,9 @@ button.button-block {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
-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; }
.toggle.active { .toggle.active {
background-color: #4cd964; background-color: #4cd964;
border: 2px solid #4cd964; } border: 2px solid #4cd964; }
.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);

19
lib/sass/sliders.scss
Unescape View File

@ -1,5 +1,6 @@
/* 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,
@ -12,26 +13,26 @@
.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 { > 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 { > 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 > * { > * {
font-size: 14px; font-size: 14px;
} }
}
}
}

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

@ -1,14 +1,13 @@
/* Table views //
-------------------------------------------------- */ // Table views
// --------------------------------------------------
// Remove usual bullet styles from table view
.table-view { .table-view {
list-style: none; list-style: none; // Remove usual bullet styles from table view
background-color: #fff; background-color: #fff;
}
// Pad each table view item and add dividers // Pad each table view item and add dividers
.table-view li { 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;
@ -16,17 +15,17 @@
} }
// Give top border to first list items // Give top border to first list items
.table-view li:first-child { 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
.table-view li:last-child { li: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 table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
.table-view li > a:not([class*="button"]) { li > a:not([class*="button"]) {
position: relative; position: relative;
display: block; display: block;
padding: inherit; padding: inherit;
@ -34,31 +33,32 @@
color: inherit; color: inherit;
} }
/* Inset table view
-------------------------------------------------- */
.table-view.inset { // Inset table views
// --------------------------------------------------
&.inset {
width: auto; width: auto;
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
border: 1px solid rgba(0, 0, 0, .1); border: 1px solid rgba(0, 0, 0, .15);
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 table views // Remove border from first/last standard list items to avoid double border at top/bottom of table views
.table-view.inset li:first-child { li:first-child {
border-top-width: 0; border-top-width: 0;
} }
.table-view.inset li:last-child { li:last-child {
border-bottom-width: 0; border-bottom-width: 0;
} }
}
/* table view dividers // Table view dividers
-------------------------------------------------- */ // --------------------------------------------------
.table-view .table-view-divider { .table-view-divider {
position: relative; position: relative;
top: -1px; top: -1px;
padding-top: 6px; padding-top: 6px;
@ -70,49 +70,51 @@
background-color: #f8f8f8; background-color: #f8f8f8;
border-top: 1px solid rgba(0, 0, 0, .1); border-top: 1px solid rgba(0, 0, 0, .1);
border-bottom: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4);
}
/* Rounding first divider on inset lists and remove border on the top */ /* Rounding first divider on inset lists and remove border on the top */
.table-view.inset .table-view-divider: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 */
.table-view.inset .table-view-divider:last-child { :last-child {
border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
} }
}
/* Right-aligned subcontent in table views (chevrons, buttons, counts and toggles) // Right-aligned subcontent in table views (chevrons, buttons, counts and toggles)
-------------------------------------------------- */ // -------------------------------------------------------------------------------
.table-view .chevron,
.table-view [class*="button"], .chevron,
.table-view [class*="count"], [class*="button"],
.table-view .toggle { [class*="count"],
.toggle {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 10px; right: 10px;
} }
/* Position chevrons/counts vertically centered on the right in table view items */ // Position chevrons/counts vertically centered on the right in table view items
.table-view .chevron, .chevron,
.table-view [class*="count"] { [class*="count"] {
margin-top: -10px; /* Half height of chevron */ margin-top: -10px; // Half height of chevron
} }
/* Push count over if there's a sibling chevron */ // Push count over if there's a sibling chevron
.table-view .chevron + [class*="count"] { .chevron + [class*="count"] {
right: 30px; right: 30px;
} }
/* Position buttons vertically centered on the right in table view items */ // Position buttons vertically centered on the right in table view items
.table-view [class*="button"] { [class*="button"] {
left: auto; left: auto;
margin-top: -14px; /* Half height of button */ margin-top: -14px; // Half height of button
} }
.table-view .toggle { .toggle {
margin-top: -15px; /* Half height of toggle */ margin-top: -15px; // Half height of toggle
}
} }

11
lib/sass/toggles.scss
Unescape View File

@ -1,5 +1,6 @@
/* Toggle styles (to be used with toggles.js) //
-------------------------------------------------- */ // Toggle styles (to be used with toggles.js)
// --------------------------------------------------
.toggle { .toggle {
position: relative; position: relative;
@ -8,7 +9,6 @@
background-color: #fff; background-color: #fff;
border: 2px solid #e6e6e6; border: 2px solid #e6e6e6;
border-radius: 20px; border-radius: 20px;
}
// Sliding handle // Sliding handle
.toggle-handle { .toggle-handle {
@ -27,14 +27,15 @@
} }
// Active state for toggle // Active state for toggle
.toggle.active { &.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 { &.active .toggle-handle {
border-color: #4cd964; border-color: #4cd964;
-webkit-transform: translate3d(17px,0,0); -webkit-transform: translate3d(17px,0,0);
transform: translate3d(17px,0,0); transform: translate3d(17px,0,0);
} }
}
Write Preview
Loading…
Cancel
Save