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

Merge pull request #534 from twbs/prop-order 

Property order
pull/536/head
Connor Sears 11 years ago
parent
e5a8c6dd41 230b3d1c57
commit
44e710c216
17 changed files with 119 additions and 119 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. 10
      sass/bars.scss
  2. 16
      sass/buttons.scss
  3. 6
      sass/cards.scss
  4. 56
      sass/docs.scss
  5. 4
      sass/forms.scss
  6. 2
      sass/mixins.scss
  7. 4
      sass/modals.scss
  8. 30
      sass/normalize.scss
  9. 6
      sass/popovers.scss
  10. 4
      sass/push.scss
  11. 6
      sass/ratchicons.scss
  12. 4
      sass/segmented-controls.scss
  13. 2
      sass/sliders.scss
  14. 8
      sass/table-views.scss
  15. 44
      sass/theme-android.scss
  16. 22
      sass/theme-ios.scss
  17. 6
      sass/toggles.scss

10
sass/bars.scss
Unescape View File

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

16
sass/buttons.scss
Unescape View File

@ -12,8 +12,8 @@
line-height: 1;
color: #333;
text-align: center;
vertical-align: top;
white-space: nowrap;
vertical-align: top;
cursor: pointer;
background-color: $chrome-color;
border: 1px solid #ccc;
@ -40,42 +40,42 @@
// Primary button (Default color is blue)
.btn-primary {
color: #fff;
border: 1px solid $primary-color;
background-color: $primary-color;
border: 1px solid $primary-color;
&:active,
&.active {
color: #fff;
border: 1px solid darken($primary-color, 10%);
background-color: darken($primary-color, 10%);
border: 1px solid darken($primary-color, 10%);
}
}
// Positive button (Default color is green)
.btn-positive {
color: #fff;
border: 1px solid $positive-color;
background-color: $positive-color;
border: 1px solid $positive-color;
&:active,
&.active {
color: #fff;
border: 1px solid darken($positive-color, 10%);
background-color: darken($positive-color, 10%);
border: 1px solid darken($positive-color, 10%);
}
}
// Negative button (Default color is red)
.btn-negative {
color: #fff;
border: 1px solid $negative-color;
background-color: $negative-color;
border: 1px solid $negative-color;
&:active,
&.active {
color: #fff;
border: 1px solid 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
.btn .badge {
font-size: 12px;
margin: -2px -4px -2px 4px;
font-size: 12px;
background-color: rgba(0,0,0,.15);
}

6
sass/cards.scss
Unescape View File

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

56
sass/docs.scss
Unescape View File

@ -16,9 +16,9 @@ body {
position: relative !important; // Overrides the fixed positioning of body in Ratchet
font: 400 14px/1.5 "Open Sans", sans-serif;
color: #333;
-webkit-text-size-adjust: 100%;
background-color: #fff;
-webkit-font-smoothing: antialiased; // Fix for webkit rendering
-webkit-text-size-adjust: 100%;
}
// Typography
@ -91,9 +91,9 @@ body {
}
.docs-header-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
left: 0;
}
// Desktop jumbotron
@media screen and (min-width: 768px) {
@ -104,8 +104,8 @@ body {
.carbonad {
left: 50% !important;
width: 330px !important;
margin-left: -165px !important;
margin-bottom: 60px !important;
margin-left: -165px !important;
}
}
@ -129,10 +129,10 @@ body {
.docs-title {
position: absolute;
left: 50%;
z-index: 20;
margin-bottom: 0;
font-size: 22px;
font-weight: 400;
z-index: 20;
@include transform(translateX(-50%));
}
.docs-nav {
@ -147,11 +147,11 @@ body {
.docs-nav-group {
position: absolute;
top: 40px;
left: 0;
right: 0;
left: 0;
z-index: 20;
overflow: hidden;
height: 0;
overflow: hidden;
background-color: rgba(0,0,0,.9);
opacity: 0;
@ -229,8 +229,8 @@ body {
opacity: .5;
}
.icon-list {
font-size: 16px;
margin-right: 3px;
font-size: 16px;
}
.icon-caret {
position: relative;
@ -292,16 +292,16 @@ body {
// "Build mobile apps using simple..."
.docs-header-content {
position: relative;
text-align: center;
padding: 50px 10px;
text-align: center;
@include animation-name(fadeintext);
@include animation-duration(2s);
.btn {
display: block;
padding: 15px 60px 16px; // Creates a button that's 330px wide.
font-size: 18px;
margin-bottom: 0;
font-size: 18px;
color: #0a1855;
background-color: #fff;
border: 0;
@ -320,9 +320,9 @@ body {
max-width: 750px;
margin: 0 auto 20px;
font-size: 28px;
color: #fff;
line-height: 38px;
font-weight: 300;
line-height: 38px;
color: #fff;
}
// Desktop header content
@ -411,12 +411,12 @@ body {
font-weight: 300;
}
.page-title {
font-size: 40px;
margin-bottom: 5px;
font-size: 40px;
}
.page-description {
color: #fff;
font-size: 24px;
color: #fff;
opacity: .7;
}
}
@ -452,8 +452,8 @@ body {
// Docs modules
.docs-module {
margin-top: 20px;
padding: 20px;
margin-top: 20px;
border: $border-default;
border-radius: 3px;
@ -464,8 +464,8 @@ body {
.version {
margin-top: 10px;
margin-bottom: 0;
color: #777;
font-size: 90%;
color: #777;
}
@ -474,11 +474,11 @@ body {
.docs-footer {
border-top: 1px solid #ddd;
margin-top: 50px;
padding: 30px 20px;
color: #777;
margin-top: 50px;
font-size: 14px;
text-align: center;
color: #777;
.social {
padding: 0 0 20px;
@ -486,8 +486,8 @@ body {
list-style: none;
li {
height: 20px;
display: inline-block;
height: 20px;
vertical-align: top;
}
.twitter-follow-button {
@ -508,9 +508,9 @@ body {
@media screen and (min-width: 768px) {
.docs-footer-text {
width: 550px;
margin: 0 auto;
padding-left: 0;
padding-right: 0;
margin: 0 auto;
}
}
.docs-footer-links {
@ -549,8 +549,6 @@ body {
// --------------------------------------------------
.docs-component-toolbar {
padding-top: 8px;
padding-bottom: 8px;
position: fixed;
top: 0;
bottom: auto;
@ -558,6 +556,8 @@ body {
right: 0;
z-index: 20;
height: 44px;
padding-top: 8px;
padding-bottom: 8px;
background-color: #fff;
border-bottom: 1px solid #ddd;
-webkit-transition: -webkit-transform .5s;
@ -590,9 +590,9 @@ body {
.example {
display: block;
overflow: hidden;
padding: 3px;
width: 100%;
padding: 3px;
overflow: hidden;
border: $border-default;
border-radius: 3px;
}
@ -644,8 +644,8 @@ code {
font-size: 16px;
}
.component-example {
font-family: $font-family-default;
font-size: $font-size-default;
font-family: $font-family-default;
line-height: $line-height-default;
}
.component-example,
@ -691,10 +691,10 @@ code {
top: 45%;
left: 0;
width: 100%;
color: #fff;
text-align: center;
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
color: #fff;
}
.component-example-fullbleed,
.highlight {
@ -705,10 +705,10 @@ code {
padding: 0;
}
.highlight pre {
margin-top: 15px;
padding: 15px;
font-size: 13px;
margin-top: 15px;
overflow-x: auto;
font-size: 13px;
color: #777;
background-color: #fafafa;
border-top: 1px solid #ddd;
@ -884,8 +884,8 @@ code {
.device {
display: none;
font-family: $font-family-default;
font-size: $font-size-default;
font-family: $font-family-default;
line-height: $line-height-default;
}
@media screen and (min-width: 768px) {

4
sass/forms.scss
Unescape View File

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

2
sass/mixins.scss
Unescape View File

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

4
sass/modals.scss
Unescape View File

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

30
sass/normalize.scss vendored
Unescape View File

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

6
sass/popovers.scss
Unescape View File

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

4
sass/push.scss
Unescape View File

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

6
sass/ratchicons.scss
Unescape View File

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

4
sass/segmented-controls.scss
Unescape View File

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

2
sass/sliders.scss
Unescape View File

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

8
sass/table-views.scss
Unescape View File

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

44
sass/theme-android.scss
Unescape View File

@ -96,8 +96,8 @@ a {
&:active,
&.active {
color: $text-color;
border: 0;
background-color: $default-color;
border: 0;
@include box-shadow(inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2));
}
}
@ -109,8 +109,8 @@ a {
// Primary button (Default color is blue)
.btn-primary {
color: #fff;
border: 0;
background-color: $primary-color;
border: 0;
&:active,
&.active {
@ -123,69 +123,69 @@ a {
// Positive button (Default color is green)
.btn-positive {
color: #fff;
border: 0;
background-color: $positive-color;
border: 0;
&:active,
&.active {
color: #fff;
border: 0;
background-color: darken($positive-color, 10%);
border: 0;
}
}
// Negative button (Default color is red)
.btn-negative {
color: #fff;
border: 0;
background-color: $negative-color;
border: 0;
&:active,
&.active {
color: #fff;
border: 0;
background-color: darken($negative-color, 10%);
border: 0;
}
}
// Outlined buttons
.btn-outlined {
border: 1px solid $default-color;
background-color: transparent;
border: 1px solid $default-color;
@include box-shadow(none);
&.btn-primary {
border: 1px solid $primary-color;
color: $primary-color;
border: 1px solid $primary-color;
&:active {
border: 1px solid $primary-color;
background-color: $primary-color;
border: 1px solid $primary-color;
}
}
&.btn-positive {
border: 1px solid $positive-color;
color: $positive-color;
border: 1px solid $positive-color;
&:active {
border: 1px solid $positive-color;
background-color: $positive-color;
border: 1px solid $positive-color;
}
}
&.btn-negative {
border: 1px solid $negative-color;
color: $negative-color;
border: 1px solid $negative-color;
&:active {
border: 1px solid $negative-color;
background-color: $negative-color;
border: 1px solid $negative-color;
}
}
// Active states
&:active {
border: 1px solid $default-color;
background-color: $default-color;
border: 1px solid $default-color;
@include box-shadow(none);
}
&.btn-primary:active,
@ -262,8 +262,8 @@ a {
.bar-footer,
.bar-footer-secondary,
.bar-footer-secondary-tab {
border-bottom: 0;
border-top: $border-default;
border-bottom: 0;
@include box-shadow(inset 0 -2px 0 $primary-color);
}
}
@ -313,9 +313,9 @@ a {
.btn-link {
top: 0;
padding: 0;
color: $primary-color;
font-size: $font-size-default;
line-height: 49px;
color: $primary-color;
&:active,
&.active {
@ -415,9 +415,9 @@ a {
// --------------------------------------------------
.card {
background-color: transparent;
border-color: #d9d9d9;
border-radius: $border-radius;
background-color: transparent;
}
@ -450,9 +450,9 @@ a {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
background-color: transparent;
border-top: 0;
border-bottom: 2px solid #a9a9a9;
background-color: transparent;
}
}
@ -674,9 +674,9 @@ textarea,
.toggle {
width: 104px;
height: 28px;
background-color: #d7d7d7;
border: 2px solid #d7d7d7;
border-radius: 0;
background-color: #d7d7d7;
// Sliding handle
.toggle-handle {
@ -684,9 +684,9 @@ textarea,
left: 0;
width: 50px;
height: 24px;
background-color: #bebebe;
border: 1px solid #b5b5b5;
border-radius: 2px;
background-color: #bebebe;
@include box-shadow(inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.1));
}
&:before {
@ -699,8 +699,8 @@ textarea,
// Active state for toggle
&.active {
border: 2px solid #d7d7d7;
background-color: #d7d7d7;
border: 2px solid #d7d7d7;
.toggle-handle {
margin-right: 2px;
@ -709,8 +709,8 @@ textarea,
@include transform(translate3d(50px,0,0));
}
&:before {
left: auto;
right: 14px;
left: auto;
color: #fff;
}
}

22
sass/theme-ios.scss
Unescape View File

@ -66,9 +66,9 @@ p {
// --------------------------------------------------
.btn {
border: 1px solid $default-color;
color: $default-color;
background-color: $chrome-color;
border: 1px solid $default-color;
@include transition(all);
@include transition-duration(.2s);
@include transition-timing-function(linear);
@ -88,39 +88,39 @@ p {
// Primary button (Default color is blue)
.btn-primary {
color: #fff;
border: 1px solid $primary-color;
background-color: $primary-color;
border: 1px solid $primary-color;
&:active,
&.active {
border: 1px solid darken($primary-color, 10%);
background-color: darken($primary-color, 10%);
border: 1px solid darken($primary-color, 10%);
}
}
// Positive button (Default color is green)
.btn-positive {
color: #fff;
border: 1px solid $positive-color;
background-color: $positive-color;
border: 1px solid $positive-color;
&:active,
&.active {
border: 1px solid darken($positive-color, 10%);
background-color: darken($positive-color, 10%);
border: 1px solid darken($positive-color, 10%);
}
}
// Negative button (Default color is red)
.btn-negative {
color: #fff;
border: 1px solid $negative-color;
background-color: $negative-color;
border: 1px solid $negative-color;
&:active,
&.active {
border: 1px solid darken($negative-color, 10%);
background-color: darken($negative-color, 10%);
border: 1px solid darken($negative-color, 10%);
}
}
@ -180,8 +180,8 @@ p {
// Default bar
.bar {
border-bottom: 0;
background-color: $chrome-color;
border-bottom: 0;
@include box-shadow(0 0 1px rgba(0,0,0,.85));
// Modifier class to dock any bar below .bar-nav
@ -497,10 +497,10 @@ textarea,
border-bottom: 1px solid rgba(0,0,0,.15);
}
// Popovers with `table-views1
// Popovers with `table-views`
.popover .table-view {
border-radius: 12px;
background-image: none;
border-radius: 12px;
}
@ -539,8 +539,8 @@ textarea,
}
// Active state for toggle
&.active {
border: 2px solid $positive-color;
background-color: transparent;
border: 2px solid $positive-color;
@include box-shadow(inset 0 0 0 13px $positive-color);
.toggle-handle {

6
sass/toggles.scss
Unescape View File

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

Write Preview
Loading…
Cancel
Save