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. 232
      dist/ratchet.css
  2. 45
      lib/sass/sliders.scss
  3. 224
      lib/sass/table-views.scss
  4. 57
      lib/sass/toggles.scss

232
dist/ratchet.css vendored
Unescape View File

@ -346,102 +346,72 @@ 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 {
border-top: 1px solid rgba(0, 0, 0, 0.1); }
.table-view li:first-child { .table-view li:last-child {
border-top: 1px solid rgba(0, 0, 0, 0.1); } border-bottom: 0; }
.table-view li > a:not([class*="button"]) {
.table-view li:last-child { position: relative;
border-bottom: 0; } display: block;
padding: inherit;
.table-view li > a:not([class*="button"]) { margin: -11px -60px -11px 0;
position: relative; color: inherit; }
display: block; .table-view.inset {
padding: inherit; width: auto;
margin: -11px -60px -11px 0; margin-right: 10px;
color: inherit; } margin-left: 10px;
border: 1px solid rgba(0, 0, 0, 0.15);
/* Inset table view border-radius: 6px;
-------------------------------------------------- */ box-sizing: border-box; }
.table-view.inset { .table-view.inset li:first-child {
width: auto; border-top-width: 0; }
margin-right: 10px; .table-view.inset li:last-child {
margin-left: 10px; border-bottom-width: 0; }
border: 1px solid rgba(0, 0, 0, 0.1); .table-view .table-view-divider {
border-radius: 6px; position: relative;
box-sizing: border-box; } top: -1px;
padding-top: 6px;
.table-view.inset li:first-child { padding-bottom: 6px;
border-top-width: 0; } padding-left: 15px;
margin-left: 0;
.table-view.inset li:last-child { font-weight: bold;
border-bottom-width: 0; } line-height: 18px;
background-color: #f8f8f8;
/* table view dividers border-top: 1px solid rgba(0, 0, 0, 0.1);
-------------------------------------------------- */ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
.table-view .table-view-divider { /* Rounding first divider on inset lists and remove border on the top */
position: relative; /* Rounding last divider on inset table views */ }
top: -1px; .table-view .table-view-divider :first-child {
padding-top: 6px; top: 0;
padding-bottom: 6px; border-top-width: 0;
padding-left: 15px; border-radius: 6px 6px 0 0; }
margin-left: 0; .table-view .table-view-divider :last-child {
font-weight: bold; border-radius: 0 0 6px 6px; }
line-height: 18px; .table-view .chevron,
background-color: #f8f8f8; .table-view [class*="button"],
border-top: 1px solid rgba(0, 0, 0, 0.1); .table-view [class*="count"],
border-bottom: 1px solid rgba(0, 0, 0, 0.1); .table-view .toggle {
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4); } position: absolute;
top: 50%;
/* Rounding first divider on inset lists and remove border on the top */ right: 10px; }
.table-view.inset .table-view-divider:first-child { .table-view .chevron,
top: 0; .table-view [class*="count"] {
border-top-width: 0; margin-top: -10px; }
border-radius: 6px 6px 0 0; } .table-view .chevron + [class*="count"] {
right: 30px; }
/* Rounding last divider on inset table views */ .table-view [class*="button"] {
.table-view.inset .table-view-divider:last-child { left: auto;
border-radius: 0 0 6px 6px; } margin-top: -14px; }
.table-view .toggle {
/* Right-aligned subcontent in table views (chevrons, buttons, counts and toggles) margin-top: -15px; }
-------------------------------------------------- */
.table-view .chevron,
.table-view [class*="button"],
.table-view [class*="count"],
.table-view .toggle {
position: absolute;
top: 50%;
right: 10px; }
/* Position chevrons/counts vertically centered on the right in table view items */
.table-view .chevron,
.table-view [class*="count"] {
margin-top: -10px;
/* Half height of chevron */ }
/* Push count over if there's a sibling chevron */
.table-view .chevron + [class*="count"] {
right: 30px; }
/* Position buttons vertically centered on the right in table view items */
.table-view [class*="button"] {
left: auto;
margin-top: -14px;
/* Half height of button */ }
.table-view .toggle {
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 {
position: relative;
font-size: 0;
white-space: nowrap;
-webkit-transition: all 0 linear;
transition: all 0 linear; }
.slider > ul > li {
display: inline-block;
vertical-align: top;
width: 100%;
height: 100%; }
.slider > ul > li > * {
font-size: 14px; }
.slider > ul {
position: relative;
font-size: 0;
white-space: nowrap;
-webkit-transition: all 0 linear;
transition: all 0 linear; }
.slider > ul > li {
display: inline-block;
vertical-align: top;
width: 100%;
height: 100%; }
.slider > ul > li > * {
font-size: 14px; }
/* Toggle styles (to be used with toggles.js)
-------------------------------------------------- */
.toggle { .toggle {
position: relative; position: relative;
width: 45px; width: 45px;
@ -911,29 +874,26 @@ 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; z-index: 2;
z-index: 2; width: 28px;
width: 28px; height: 28px;
height: 28px; background-color: #fff;
background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 100px;
border-radius: 100px; 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 {
background-color: #4cd964;
.toggle.active { border: 2px solid #4cd964; }
background-color: #4cd964; .toggle.active .toggle-handle {
border: 2px solid #4cd964; } border-color: #4cd964;
-webkit-transform: translate3d(17px, 0, 0);
.toggle.active .toggle-handle { transform: translate3d(17px, 0, 0); }
border-color: #4cd964;
-webkit-transform: translate3d(17px, 0, 0);
transform: translate3d(17px, 0, 0); }
/* Push styles (to be used with push.js) /* Push styles (to be used with push.js)
-------------------------------------------------- */ -------------------------------------------------- */

45
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)
.slider > ul {
position: relative;
font-size: 0; // Remove spaces from inline-block children
white-space: nowrap;
-webkit-transition: all 0 linear;
transition: all 0 linear;
}
// Individual slide */ // Inner wrapper for slider (width of all slides together)
.slider > ul > li { > ul {
display: inline-block; position: relative;
vertical-align: top; // Ensure that li always aligns to top font-size: 0; // Remove spaces from inline-block children
width: 100%; white-space: nowrap;
height: 100%; -webkit-transition: all 0 linear;
} transition: all 0 linear;
// Individual slide
> li {
display: inline-block;
vertical-align: top; // Ensure that li always aligns to top
width: 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;
}
}
}
} }

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

@ -1,118 +1,120 @@
/* 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 li {
.table-view 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 li:first-child {
.table-view 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 li:last-child {
.table-view 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) 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 // Inset table views
-------------------------------------------------- */ // --------------------------------------------------
.table-view.inset { &.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 li:first-child {
.table-view.inset li:first-child { border-top-width: 0;
border-top-width: 0; }
} li:last-child {
.table-view.inset 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;
padding-bottom: 6px; padding-bottom: 6px;
padding-left: 15px; padding-left: 15px;
margin-left: 0; margin-left: 0;
font-weight: bold; font-weight: bold;
line-height: 18px; line-height: 18px;
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 */
:first-child {
/* Rounding first divider on inset lists and remove border on the top */ top: 0;
.table-view.inset .table-view-divider:first-child { border-top-width: 0;
top: 0; border-radius: 6px 6px 0 0;
border-top-width: 0; }
border-radius: 6px 6px 0 0;
} /* Rounding last divider on inset table views */
:last-child {
/* Rounding last divider on inset table views */ border-radius: 0 0 6px 6px;
.table-view.inset .table-view-divider:last-child { }
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"],
position: absolute; .toggle {
top: 50%; position: absolute;
right: 10px; top: 50%;
} right: 10px;
}
/* Position chevrons/counts vertically centered on the right in table view items */
.table-view .chevron, // Position chevrons/counts vertically centered on the right in table view items
.table-view [class*="count"] { .chevron,
margin-top: -10px; /* Half height of chevron */ [class*="count"] {
} margin-top: -10px; // Half height of chevron
}
/* Push count over if there's a sibling chevron */
.table-view .chevron + [class*="count"] { // Push count over if there's a sibling chevron
.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
}
} }

57
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,33 +9,33 @@
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 {
position: absolute; position: absolute;
top: -1px; top: -1px;
left: -1px; left: -1px;
z-index: 2; z-index: 2;
width: 28px; width: 28px;
height: 28px; height: 28px;
background-color: #fff; background-color: #fff;
border: 1px solid rgba(0, 0, 0, .1); border: 1px solid rgba(0, 0, 0, .1);
border-radius: 100px; border-radius: 100px;
box-shadow: 0 3px 3px rgba(0,0,0,.08); box-shadow: 0 3px 3px rgba(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;
} }
// 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