Browse Source

fixing prop order in the lib scss

pull/534/head
connors 11 years ago
parent
commit
d3e98c27c6
  1. 10
      sass/bars.scss
  2. 16
      sass/buttons.scss
  3. 6
      sass/cards.scss
  4. 4
      sass/forms.scss
  5. 2
      sass/mixins.scss
  6. 4
      sass/modals.scss
  7. 30
      sass/normalize.scss
  8. 6
      sass/popovers.scss
  9. 4
      sass/push.scss
  10. 6
      sass/ratchicons.scss
  11. 4
      sass/segmented-controls.scss
  12. 2
      sass/sliders.scss
  13. 8
      sass/table-views.scss
  14. 6
      sass/toggles.scss

10
sass/bars.scss

@ -10,8 +10,8 @@
height: $bar-base-height; height: $bar-base-height;
padding-right: $bar-side-spacing; padding-right: $bar-side-spacing;
padding-left: $bar-side-spacing; padding-left: $bar-side-spacing;
border-bottom: $border-default;
background-color: $chrome-color; background-color: $chrome-color;
border-bottom: $border-default;
} }
// Modifier class to dock any bar below .bar-nav // Modifier class to dock any bar below .bar-nav
@ -38,8 +38,8 @@
.bar-footer, .bar-footer,
.bar-footer-secondary, .bar-footer-secondary,
.bar-footer-secondary-tab { .bar-footer-secondary-tab {
border-bottom: 0;
border-top: $border-default; border-top: $border-default;
border-bottom: 0;
} }
@ -83,18 +83,18 @@
width: 100%; width: 100%;
height: $bar-tab-height; height: $bar-tab-height;
padding: 0; padding: 0;
table-layout: fixed;
border-top: $border-default; border-top: $border-default;
border-bottom: 0; border-bottom: 0;
table-layout: fixed;
// Navigational tab (Nested to be more specific for the icons in tab-items) // Navigational tab (Nested to be more specific for the icons in tab-items)
.tab-item { .tab-item {
display: table-cell; display: table-cell;
width: 1%; width: 1%;
height: $bar-tab-height; height: $bar-tab-height;
vertical-align: middle;
color: #929292; color: #929292;
text-align: center; text-align: center;
vertical-align: middle;
// Active states for the tab bar // Active states for the tab bar
&.active, &.active,
@ -144,8 +144,8 @@
top: 0; top: 0;
padding: 0; padding: 0;
font-size: 16px; font-size: 16px;
color: $primary-color;
line-height: $bar-base-height; line-height: $bar-base-height;
color: $primary-color;
border: 0; border: 0;
&:active, &:active,

16
sass/buttons.scss

@ -12,8 +12,8 @@
line-height: 1; line-height: 1;
color: #333; color: #333;
text-align: center; text-align: center;
vertical-align: top;
white-space: nowrap; white-space: nowrap;
vertical-align: top;
cursor: pointer; cursor: pointer;
background-color: $chrome-color; background-color: $chrome-color;
border: 1px solid #ccc; border: 1px solid #ccc;
@ -40,42 +40,42 @@
// Primary button (Default color is blue) // Primary button (Default color is blue)
.btn-primary { .btn-primary {
color: #fff; color: #fff;
border: 1px solid $primary-color;
background-color: $primary-color; background-color: $primary-color;
border: 1px solid $primary-color;
&:active, &:active,
&.active { &.active {
color: #fff; color: #fff;
border: 1px solid darken($primary-color, 10%);
background-color: darken($primary-color, 10%); background-color: darken($primary-color, 10%);
border: 1px solid darken($primary-color, 10%);
} }
} }
// Positive button (Default color is green) // Positive button (Default color is green)
.btn-positive { .btn-positive {
color: #fff; color: #fff;
border: 1px solid $positive-color;
background-color: $positive-color; background-color: $positive-color;
border: 1px solid $positive-color;
&:active, &:active,
&.active { &.active {
color: #fff; color: #fff;
border: 1px solid darken($positive-color, 10%);
background-color: darken($positive-color, 10%); background-color: darken($positive-color, 10%);
border: 1px solid darken($positive-color, 10%);
} }
} }
// Negative button (Default color is red) // Negative button (Default color is red)
.btn-negative { .btn-negative {
color: #fff; color: #fff;
border: 1px solid $negative-color;
background-color: $negative-color; background-color: $negative-color;
border: 1px solid $negative-color;
&:active, &:active,
&.active { &.active {
color: #fff; color: #fff;
border: 1px solid darken($negative-color, 10%);
background-color: darken($negative-color, 10%); background-color: darken($negative-color, 10%);
border: 1px solid darken($negative-color, 10%);
} }
} }
@ -140,8 +140,8 @@ input[type="button"] {
// Generic styles for all badges within default buttons // Generic styles for all badges within default buttons
.btn .badge { .btn .badge {
font-size: 12px;
margin: -2px -4px -2px 4px; margin: -2px -4px -2px 4px;
font-size: 12px;
background-color: rgba(0,0,0,.15); background-color: rgba(0,0,0,.15);
} }

6
sass/cards.scss

@ -3,8 +3,8 @@
// -------------------------------------------------- // --------------------------------------------------
.card { .card {
overflow: hidden;
margin: $bar-side-spacing; margin: $bar-side-spacing;
overflow: hidden;
background-color: $card-bg; background-color: $card-bg;
border: $border-default; border: $border-default;
border-radius: $border-radius; border-radius: $border-radius;
@ -21,14 +21,14 @@
// Rounding first divider on carded lists and remove border on the top // Rounding first divider on carded lists and remove border on the top
.table-view-divider:first-child { .table-view-divider:first-child {
top: 0; top: 0;
border-top-right-radius: $border-radius;
border-top-left-radius: $border-radius; border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
} }
// Rounding last divider on carded table views // Rounding last divider on carded table views
.table-view-divider:last-child { .table-view-divider:last-child {
border-bottom-right-radius: $border-radius;
border-bottom-left-radius: $border-radius; border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
} }
} }
// Remove the bottom border from last table cell // Remove the bottom border from last table cell

4
sass/forms.scss

@ -30,6 +30,7 @@ input[type="tel"],
input[type="color"] { input[type="color"] {
width: 100%; width: 100%;
height: 35px; height: 35px;
-webkit-appearance: none;
padding: 0 15px; padding: 0 15px;
margin-bottom: 15px; margin-bottom: 15px;
line-height: $line-height-default; line-height: $line-height-default;
@ -37,7 +38,6 @@ input[type="color"] {
border: $border-default; border: $border-default;
border-radius: 3px; border-radius: 3px;
outline: none; outline: none;
-webkit-appearance: none;
} }
// Rounded search input // Rounded search input
@ -80,8 +80,8 @@ select {
margin-bottom: 0; margin-bottom: 0;
background-color: transparent; background-color: transparent;
border-top: 0; border-top: 0;
border-left: 0;
border-right: 0; border-right: 0;
border-left: 0;
border-radius: 0; border-radius: 0;
@include box-shadow(none); @include box-shadow(none);
} }

2
sass/mixins.scss

@ -22,8 +22,8 @@
@mixin clearfix() { @mixin clearfix() {
&:before, &:before,
&:after { &:after {
content: " "; // 1
display: table; // 2 display: table; // 2
content: " "; // 1
} }
&:after { &:after {
clear: both; clear: both;

4
sass/modals.scss

@ -5,12 +5,12 @@
.modal { .modal {
position: fixed; position: fixed;
top: 0; top: 0;
opacity: 0;
z-index: 11; z-index: 11;
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s; -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-moz-transition: -moz-transform .25s, opacity 1ms .25s; -moz-transition: -moz-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s; transition: transform .25s, opacity 1ms .25s;
@ -18,8 +18,8 @@
// Active modal // Active modal
&.active { &.active {
opacity: 1;
height: 100%; height: 100%;
opacity: 1;
-webkit-transition: -webkit-transform .25s; -webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s; -moz-transition: -moz-transform .25s;
transition: transform .25s; transition: transform .25s;

30
sass/normalize.scss vendored

@ -131,8 +131,8 @@ dfn {
// //
h1 { h1 {
font-size: 2em;
margin: 0.67em 0; margin: 0.67em 0;
font-size: 2em;
} }
// //
@ -140,8 +140,8 @@ h1 {
// //
mark { mark {
background: #ff0;
color: #000; color: #000;
background: #ff0;
} }
// //
@ -158,18 +158,18 @@ small {
sub, sub,
sup { sup {
position: relative;
font-size: 75%; font-size: 75%;
line-height: 0; line-height: 0;
position: relative;
vertical-align: baseline; vertical-align: baseline;
} }
sup { sup {
top: -0.5em; top: -.5em;
} }
sub { sub {
bottom: -0.25em; bottom: -.25em;
} }
// Embedded content // Embedded content
@ -207,9 +207,9 @@ figure {
// //
hr { hr {
height: 0;
-moz-box-sizing: content-box; -moz-box-sizing: content-box;
box-sizing: content-box; box-sizing: content-box;
height: 0;
} }
// //
@ -252,9 +252,9 @@ input,
optgroup, optgroup,
select, select,
textarea { textarea {
margin: 0; // 3
color: inherit; // 1 color: inherit; // 1
font: inherit; // 2 font: inherit; // 2
margin: 0; // 3
} }
// //
@ -308,8 +308,8 @@ html input[disabled] {
button::-moz-focus-inner, button::-moz-focus-inner,
input::-moz-focus-inner { input::-moz-focus-inner {
border: 0;
padding: 0; padding: 0;
border: 0;
} }
// //
@ -331,8 +331,8 @@ input {
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {
box-sizing: border-box; // 1
padding: 0; // 2 padding: 0; // 2
box-sizing: border-box; // 1
} }
// //
@ -353,10 +353,10 @@ input[type="number"]::-webkit-outer-spin-button {
// //
input[type="search"] { input[type="search"] {
-webkit-appearance: textfield; // 1
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; // 2 -webkit-box-sizing: content-box; // 2
-moz-box-sizing: content-box;
box-sizing: content-box; box-sizing: content-box;
-webkit-appearance: textfield; // 1
} }
// //
@ -375,9 +375,9 @@ input[type="search"]::-webkit-search-decoration {
// //
fieldset { fieldset {
border: 1px solid #c0c0c0; padding: .35em .625em .75em;
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; border: 1px solid #c0c0c0;
} }
// //
@ -386,8 +386,8 @@ fieldset {
// //
legend { legend {
border: 0; // 1
padding: 0; // 2 padding: 0; // 2
border: 0; // 1
} }
// //
@ -415,8 +415,8 @@ optgroup {
// //
table { table {
border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
border-collapse: collapse;
} }
td, td,

6
sass/popovers.scss

@ -25,10 +25,10 @@
width: 0; width: 0;
height: 0; height: 0;
margin-left: -15px; margin-left: -15px;
content: '';
border-right: 15px solid transparent; border-right: 15px solid transparent;
border-bottom: 15px solid $chrome-color; border-bottom: 15px solid $chrome-color;
border-left: 15px solid transparent; border-left: 15px solid transparent;
content: '';
} }
// Popover transition // Popover transition
@ -76,8 +76,8 @@
.popover .bar-nav { .popover .bar-nav {
border-bottom: $border-default; border-bottom: $border-default;
border-top-right-radius: 12px;
border-top-left-radius: 12px; border-top-left-radius: 12px;
border-top-right-radius: 12px;
@include box-shadow(none); @include box-shadow(none);
} }
@ -89,9 +89,9 @@
max-height: 300px; max-height: 300px;
margin-bottom: 0; margin-bottom: 0;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch;
background-color: #fff; background-color: #fff;
border-top: 0; border-top: 0;
border-bottom: 0; border-bottom: 0;
border-radius: $border-radius; border-radius: $border-radius;
-webkit-overflow-scrolling: touch;
} }

4
sass/push.scss

@ -42,11 +42,11 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
display: inline-block; display: inline-block;
color: #bbb;
font-family: Ratchicons; font-family: Ratchicons;
font-size: inherit; font-size: inherit;
text-decoration: none;
line-height: 1; line-height: 1;
color: #bbb;
text-decoration: none;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@include transform(translateY(-50%)); @include transform(translateY(-50%));
} }

6
sass/ratchicons.scss

@ -4,21 +4,21 @@
@font-face { @font-face {
font-family: Ratchicons; font-family: Ratchicons;
font-weight: normal;
font-style: normal;
src: url('../fonts/ratchicons.eot'); src: url('../fonts/ratchicons.eot');
src: url('../fonts/ratchicons.eot?#iefix') format('embedded-opentype'), src: url('../fonts/ratchicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/ratchicons.woff') format('woff'), url('../fonts/ratchicons.woff') format('woff'),
url('../fonts/ratchicons.ttf') format('truetype'), url('../fonts/ratchicons.ttf') format('truetype'),
url('../fonts/ratchicons.svg#svgFontName') format('svg'); url('../fonts/ratchicons.svg#svgFontName') format('svg');
font-weight: normal;
font-style: normal;
} }
.icon { .icon {
display: inline-block; display: inline-block;
font-family: Ratchicons; font-family: Ratchicons;
font-size: 24px; font-size: 24px;
text-decoration: none;
line-height: 1; line-height: 1;
text-decoration: none;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }

4
sass/segmented-controls.scss

@ -15,15 +15,15 @@
// Section within controller // Section within controller
.control-item { .control-item {
display: table-cell; display: table-cell;
overflow: hidden;
width: 1%; width: 1%;
padding-top: 6px; padding-top: 6px;
padding-bottom: 7px; padding-bottom: 7px;
overflow: hidden;
line-height: 1; line-height: 1;
color: #333; color: #333;
text-align: center; text-align: center;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap;
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
// Remove border-left and shadow from first section // Remove border-left and shadow from first section

2
sass/sliders.scss

@ -22,10 +22,10 @@
// Individual slide // Individual slide
.slide { .slide {
display: inline-block; display: inline-block;
vertical-align: top; // Ensure that li always aligns to top
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: 14px; font-size: 14px;
vertical-align: top; // Ensure that li always aligns to top
} }
} }
} }

8
sass/table-views.scss

@ -15,8 +15,8 @@
// Pad each table view item and add dividers // Pad each table view item and add dividers
.table-view-cell { .table-view-cell {
position: relative; position: relative;
overflow: hidden;
padding: 11px 65px 11px 15px; padding: 11px 65px 11px 15px;
overflow: hidden;
border-bottom: $border-default; border-bottom: $border-default;
// Remove the border from the last table view item // Remove the border from the last table view item
@ -27,9 +27,9 @@
> a:not(.btn) { > a:not(.btn) {
position: relative; position: relative;
display: block; display: block;
overflow: hidden;
padding: inherit; padding: inherit;
margin: -11px -65px -11px -15px; // Make the entire list item tappable. margin: -11px -65px -11px -15px; // Make the entire list item tappable.
overflow: hidden;
color: inherit; color: inherit;
&:active { &:active {
@ -51,11 +51,11 @@
padding-left: 15px; padding-left: 15px;
margin-top: -1px; // Hides the border of the previous list item margin-top: -1px; // Hides the border of the previous list item
margin-left: 0; margin-left: 0;
color: #999;
font-weight: $font-weight; font-weight: $font-weight;
color: #999;
background-color: #fafafa;
border-top: $border-default; border-top: $border-default;
border-bottom: $border-default; border-bottom: $border-default;
background-color: #fafafa;
} }

6
sass/toggles.scss

@ -3,8 +3,8 @@
// -------------------------------------------------- // --------------------------------------------------
.toggle { .toggle {
display: block;
position: relative; position: relative;
display: block;
width: 74px; width: 74px;
height: 30px; height: 30px;
background-color: #fff; background-color: #fff;
@ -33,16 +33,16 @@
position: absolute; position: absolute;
top: 3px; top: 3px;
right: 11px; right: 11px;
color: #999;
font-size: 13px; font-size: 13px;
color: #999;
text-transform: uppercase; text-transform: uppercase;
content: "Off"; content: "Off";
} }
// Active state for toggle // Active state for toggle
&.active { &.active {
border: 2px solid $positive-color;
background-color: $positive-color; background-color: $positive-color;
border: 2px solid $positive-color;
.toggle-handle { .toggle-handle {
border-color: $positive-color; border-color: $positive-color;

Loading…
Cancel
Save