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 11 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
Split 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;
margin: 0; }
/* Table views
-------------------------------------------------- */
.table-view {
list-style: none;
background-color: #fff; }
.table-view li {
position: relative;
padding: 11px 60px 11px 0;
margin-left: 15px;
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:last-child {
border-bottom: 0; }
.table-view li > a:not([class*="button"]) {
position: relative;
display: block;
padding: inherit;
margin: -11px -60px -11px 0;
color: inherit; }
/* Inset table view
-------------------------------------------------- */
.table-view.inset {
width: auto;
margin-right: 10px;
margin-left: 10px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 6px;
box-sizing: border-box; }
.table-view.inset li:first-child {
border-top-width: 0; }
.table-view.inset li:last-child {
border-bottom-width: 0; }
/* table view dividers
-------------------------------------------------- */
.table-view .table-view-divider {
position: relative;
top: -1px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
margin-left: 0;
font-weight: bold;
line-height: 18px;
background-color: #f8f8f8;
border-top: 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 */
.table-view.inset .table-view-divider:first-child {
top: 0;
border-top-width: 0;
border-radius: 6px 6px 0 0; }
/* Rounding last divider on inset table views */
.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)
-------------------------------------------------- */
.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 */ }
.table-view li {
position: relative;
padding: 11px 60px 11px 0;
margin-left: 15px;
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:last-child {
border-bottom: 0; }
.table-view li > a:not([class*="button"]) {
position: relative;
display: block;
padding: inherit;
margin: -11px -60px -11px 0;
color: inherit; }
.table-view.inset {
width: auto;
margin-right: 10px;
margin-left: 10px;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 6px;
box-sizing: border-box; }
.table-view.inset li:first-child {
border-top-width: 0; }
.table-view.inset li:last-child {
border-bottom-width: 0; }
.table-view .table-view-divider {
position: relative;
top: -1px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
margin-left: 0;
font-weight: bold;
line-height: 18px;
background-color: #f8f8f8;
border-top: 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 last divider on inset table views */ }
.table-view .table-view-divider :first-child {
top: 0;
border-top-width: 0;
border-radius: 6px 6px 0 0; }
.table-view .table-view-divider :last-child {
border-radius: 0 0 6px 6px; }
.table-view .chevron,
.table-view [class*="button"],
.table-view [class*="count"],
.table-view .toggle {
position: absolute;
top: 50%;
right: 10px; }
.table-view .chevron,
.table-view [class*="count"] {
margin-top: -10px; }
.table-view .chevron + [class*="count"] {
right: 30px; }
.table-view [class*="button"] {
left: auto;
margin-top: -14px; }
.table-view .toggle {
margin-top: -15px; }
/* Forms
-------------------------------------------------- */
@ -875,8 +845,6 @@ button.button-block {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
/* Slider styles (to be used with sliders.js)
-------------------------------------------------- */
.slider,
.slider > li {
width: 100%;
@ -885,25 +853,20 @@ button.button-block {
.slider {
overflow: hidden;
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 {
position: relative;
width: 45px;
@ -911,29 +874,26 @@ button.button-block {
background-color: #fff;
border: 2px solid #e6e6e6;
border-radius: 20px; }
.toggle-handle {
position: absolute;
top: -1px;
left: -1px;
z-index: 2;
width: 28px;
height: 28px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 100px;
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;
transition: transform 0.1s ease-in-out, border 0.1s ease-in-out; }
.toggle.active {
background-color: #4cd964;
border: 2px solid #4cd964; }
.toggle.active .toggle-handle {
border-color: #4cd964;
-webkit-transform: translate3d(17px, 0, 0);
transform: translate3d(17px, 0, 0); }
.toggle .toggle-handle {
position: absolute;
top: -1px;
left: -1px;
z-index: 2;
width: 28px;
height: 28px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 100px;
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;
transition: transform 0.1s ease-in-out, border 0.1s ease-in-out; }
.toggle.active {
background-color: #4cd964;
border: 2px solid #4cd964; }
.toggle.active .toggle-handle {
border-color: #4cd964;
-webkit-transform: translate3d(17px, 0, 0);
transform: translate3d(17px, 0, 0); }
/* 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
.slider,
@ -12,26 +13,26 @@
.slider {
overflow: hidden;
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 */
.slider > ul > li {
display: inline-block;
vertical-align: top; // Ensure that li always aligns to top
width: 100%;
height: 100%;
}
// Inner wrapper for slider (width of all slides together)
> 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
> 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
.slider > ul > li > * {
font-size: 14px;
// Required reset of font-size to same as standard body
> * {
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 {
list-style: none;
list-style: none; // Remove usual bullet styles from table view
background-color: #fff;
}
// Pad each table view item and add dividers
.table-view li {
position: relative;
padding: 11px 60px 11px 0; // Given extra right padding to accomodate counts, chevrons or buttons
margin-left: 15px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
// Give top border to first list items
.table-view li:first-child {
border-top: 1px solid rgba(0, 0, 0, .1);
}
// Remove the border from the last list item
.table-view li:last-child {
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)
.table-view li > a:not([class*="button"]) {
position: relative;
display: block;
padding: inherit;
margin: -11px -60px -11px 0;
color: inherit;
}
/* Inset table view
-------------------------------------------------- */
.table-view.inset {
width: auto;
margin-right: 10px;
margin-left: 10px;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 6px;
box-sizing: border-box;
}
// Remove border from first/last standard list items to avoid double border at top/bottom of table views
.table-view.inset li:first-child {
border-top-width: 0;
}
.table-view.inset li:last-child {
border-bottom-width: 0;
}
/* table view dividers
-------------------------------------------------- */
.table-view .table-view-divider {
position: relative;
top: -1px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
margin-left: 0;
font-weight: bold;
line-height: 18px;
background-color: #f8f8f8;
border-top: 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 */
.table-view.inset .table-view-divider:first-child {
top: 0;
border-top-width: 0;
border-radius: 6px 6px 0 0;
}
/* Rounding last divider on inset table views */
.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)
-------------------------------------------------- */
.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"] {
// Pad each table view item and add dividers
li {
position: relative;
padding: 11px 60px 11px 0; // Given extra right padding to accomodate counts, chevrons or buttons
margin-left: 15px;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
// Give top border to first list items
li:first-child {
border-top: 1px solid rgba(0, 0, 0, .1);
}
// Remove the border from the last list item
li:last-child {
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)
li > a:not([class*="button"]) {
position: relative;
display: block;
padding: inherit;
margin: -11px -60px -11px 0;
color: inherit;
}
// Inset table views
// --------------------------------------------------
&.inset {
width: auto;
margin-right: 10px;
margin-left: 10px;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 6px;
box-sizing: border-box;
// Remove border from first/last standard list items to avoid double border at top/bottom of table views
li:first-child {
border-top-width: 0;
}
li:last-child {
border-bottom-width: 0;
}
}
// Table view dividers
// --------------------------------------------------
.table-view-divider {
position: relative;
top: -1px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
margin-left: 0;
font-weight: bold;
line-height: 18px;
background-color: #f8f8f8;
border-top: 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 */
:first-child {
top: 0;
border-top-width: 0;
border-radius: 6px 6px 0 0;
}
/* Rounding last divider on inset table views */
:last-child {
border-radius: 0 0 6px 6px;
}
}
// Right-aligned subcontent in table views (chevrons, buttons, counts and toggles)
// -------------------------------------------------------------------------------
.chevron,
[class*="button"],
[class*="count"],
.toggle {
position: absolute;
top: 50%;
right: 10px;
}
// Position chevrons/counts vertically centered on the right in table view items
.chevron,
[class*="count"] {
margin-top: -10px; // Half height of chevron
}
// Push count over if there's a sibling chevron
.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 */
}
// Position buttons vertically centered on the right in table view items
[class*="button"] {
left: auto;
margin-top: -14px; // Half height of button
}
.table-view .toggle {
margin-top: -15px; /* Half height of toggle */
.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 {
position: relative;
@ -8,33 +9,33 @@
background-color: #fff;
border: 2px solid #e6e6e6;
border-radius: 20px;
}
// Sliding handle
.toggle-handle {
position: absolute;
top: -1px;
left: -1px;
z-index: 2;
width: 28px;
height: 28px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 100px;
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;
transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
}
// Sliding handle
.toggle-handle {
position: absolute;
top: -1px;
left: -1px;
z-index: 2;
width: 28px;
height: 28px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 100px;
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;
transition: transform 0.1s ease-in-out, border 0.1s ease-in-out;
}
// Active state for toggle
.toggle.active {
background-color: #4cd964;
border: 2px solid #4cd964;
}
// Active state for toggle
&.active {
background-color: #4cd964;
border: 2px solid #4cd964;
}
// Active state for toggle handle
.toggle.active .toggle-handle {
border-color: #4cd964;
-webkit-transform: translate3d(17px,0,0);
transform: translate3d(17px,0,0);
// Active state for toggle handle
&.active .toggle-handle {
border-color: #4cd964;
-webkit-transform: translate3d(17px,0,0);
transform: translate3d(17px,0,0);
}
}
Write Preview
Loading…
Cancel
Save