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

Adding normalize and box-sizing broke a lot of things. Fixing those things. Forms and docs still broken.

pull/214/head
connors 11 years ago
parent
69d19f9c1a
commit
edfa250d00
11 changed files with 357 additions and 337 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. 271
      dist/ratchet.css
  2. 199
      lib/sass/bars.scss
  3. 2
      lib/sass/base.scss
  4. 130
      lib/sass/buttons.scss
  5. 10
      lib/sass/forms.scss
  6. 4
      lib/sass/popovers.scss
  7. 6
      lib/sass/ratchet.scss
  8. 33
      lib/sass/segmented-controllers.scss
  9. 1
      lib/sass/sliders.scss
  10. 2
      lib/sass/table-views.scss
  11. 36
      lib/sass/variables.scss

271
dist/ratchet.css vendored
Unescape View File

@ -284,22 +284,18 @@ a {
left: 0;
z-index: 10;
height: 44px;
padding: 5px;
padding: 0 10px;
background-color: rgba(247, 247, 247, 0.98);
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
}
.bar-header-secondary {
[class*="bar-"].bar-header-secondary {
top: 44px;
}
.bar-footer {
[class*="bar-"].bar-footer {
bottom: 0;
}
.bar-footer.bar-standard,
.bar-footer-secondary.bar-standard {
box-shadow: 0 0px 1px rgba(0, 0, 0, 0.85);
[class*="bar-"].bar-footer.bar-standard, [class*="bar-"].bar-footer-secondary.bar-standard {
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
}
.bar-title {
@ -310,12 +306,14 @@ a {
box-orient: horizontal;
}
.bar-title .title {
.title {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
padding: 0;
margin: 0;
font-size: 18px;
font-weight: 500;
line-height: 44px;
@ -324,13 +322,13 @@ a {
white-space: nowrap;
}
.bar-title > a:not([class*="button"]) {
> a:not([class*="button"]) {
display: block;
width: 100%;
height: 100%;
}
.bar-title .title a {
.title a {
color: inherit;
}
@ -345,6 +343,8 @@ a {
display: -webkit-box;
display: box;
height: 100%;
padding: 0;
margin: 0;
list-style: none;
-webkit-box-orient: horizontal;
box-orient: horizontal;
@ -375,127 +375,9 @@ a {
color: #007aff;
}
.bar-title [class*="button"] {
position: relative;
z-index: 10;
padding-left: 5px;
padding-right: 5px;
font-size: 16px;
font-weight: 400;
line-height: 29px;
color: #007aff;
border: 0;
transition: opacity .2s linear;
-webkit-box-flex: 0;
box-flex: 0;
}
.bar-title .title + [class*="button"]:last-child,
.bar-title .button + [class*="button"]:last-child,
.bar-title [class*="button"].pull-right {
position: absolute;
top: 5px;
right: 5px;
}
.bar-title .button:active,
.bar-title .button-prev:active,
.bar-title .button-next:active {
color: #007aff;
background-color: transparent;
opacity: .3;
}
.bar-title .button-prev:before,
.bar-title .button-prev:after,
.bar-title .button-next:before,
.bar-title .button-next:after {
position: absolute;
display: block;
width: 15px;
height: 3px;
background-color: #007aff;
content: '';
}
.bar-title .button-prev {
padding-left: 22px;
}
.bar-title .button-next {
padding-right: 22px;
}
.bar-title .button-prev:before,
.bar-title .button-prev:after {
left: 0;
}
.bar-title .button-next:before,
.bar-title .button-next:after {
right: 0;
}
.bar-title .button-prev:before,
.bar-title .button-next:before {
top: 12px;
}
.bar-title .button-prev:after,
.bar-title .button-next:after {
top: 21px;
}
.bar-title .button-prev:before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.bar-title .button-prev:after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.bar-title .button-next:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.bar-title .button-next:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
[class*="bar"] .button-block {
padding: 7px 0;
margin-bottom: 0;
}
[class*="bar"] .button-block:active {
padding: 7px 0;
}
[class*="bar-"] .segmented-controller {
margin-bottom: 0;
}
[class*="bar-"] .segmented-controller + [class*="button"],
[class*="bar-"] [class*="button"] + .segmented-controller {
margin-left: 5px;
}
.bar-title .segmented-controller {
line-height: 18px;
-webkit-box-flex: 1;
box-flex: 1;
}
.bar-standard input[type=search] {
height: 32px;
margin: 0;
}
.table-view {
padding: 0;
margin: 0;
list-style: none;
background-color: #fff;
}
@ -672,26 +554,31 @@ select {
border-bottom: 0;
}
.bar-standard input[type=search] {
height: 32px;
margin: 0;
}
[class*="button"] {
position: relative;
display: inline-block;
padding: 4px 12px;
margin: 0;
font-weight: 500;
font-weight: 400;
line-height: 1;
color: #333;
color: #929292;
text-align: center;
vertical-align: top;
cursor: pointer;
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 0.2);
border: 1px solid #929292;
border-radius: 4px;
}
[class*="button"]:active, [class*="button"].active, [class*="button"].button-filled {
color: #fff;
background-color: #333;
-webkit-transition: background-color .1s linear;
transition: background-color .1s linear;
background-color: #929292;
-webkit-transition: background-color .1s linear, opacity .1s linear;
transition: background-color .1s linear, opacity .1s linear;
}
[class*="button"]:disabled, [class*="button"].disabled, [class*="button"].button-filled:active {
opacity: .6;
@ -728,10 +615,92 @@ select {
font-size: 16px;
}
.bar-title [class*="button"] {
position: relative;
z-index: 10;
padding: 0;
font-size: 16px;
font-weight: 400;
line-height: 44px;
color: #007aff;
border: 0;
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear;
-webkit-box-flex: 0;
box-flex: 0;
}
.bar-title .title + [class*="button"]:last-child,
.bar-title .button + [class*="button"]:last-child,
.bar-title [class*="button"].pull-right {
position: absolute;
top: 0;
right: 10px;
}
.bar-title .button:active,
.bar-title .button-prev:active,
.bar-title .button-next:active {
color: #007aff;
background-color: transparent;
opacity: .3;
}
.bar-title .button-prev:before,
.bar-title .button-prev:after,
.bar-title .button-next:before,
.bar-title .button-next:after {
position: absolute;
display: block;
width: 15px;
height: 3px;
background-color: #007aff;
content: '';
}
.bar-title .button-prev {
padding-left: 20px;
margin-left: -5px;
}
.bar-title .button-next {
padding-right: 20px;
margin-right: -5px;
}
.bar-title .button-prev:before,
.bar-title .button-prev:after {
left: 0;
}
.bar-title .button-next:before,
.bar-title .button-next:after {
right: 0;
}
.bar-title .button-prev:before,
.bar-title .button-next:before {
top: 16px;
}
.bar-title .button-prev:after,
.bar-title .button-next:after {
top: 25px;
}
.bar-title .button-prev:before,
.bar-title .button-next:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.bar-title .button-prev:after,
.bar-title .button-next:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
[class*="bar"] .button-block {
padding: 7px 0;
margin-top: 6px;
margin-bottom: 0;
}
[class*="bar"] .button-block:active {
padding: 7px 0;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
.button-block {
input[type="button"] {
width: 100%;
}
@ -800,10 +769,11 @@ input[type="button"],
.segmented-controller {
display: -webkit-box;
display: box;
padding: 0;
margin-bottom: 10px;
overflow: hidden;
font-size: 12px;
font-weight: bold;
font-weight: 400;
list-style: none;
background-color: transparent;
border: 1px solid #007aff;
@ -821,9 +791,9 @@ input[type="button"],
}
.segmented-controller li > a {
display: block;
padding: 8px 16px;
padding: 7px 16px;
overflow: hidden;
line-height: 15px;
line-height: 1;
color: #007aff;
text-overflow: ellipsis;
}
@ -845,6 +815,18 @@ input[type="button"],
display: block;
}
[class*="bar-"] .segmented-controller {
margin-top: 9px;
margin-bottom: 8px;
-webkit-box-flex: 1;
box-flex: 1;
}
[class*="bar-"] .segmented-controller + [class*="button"],
[class*="bar-"] [class*="button"] + .segmented-controller {
margin-left: 10px;
}
.popover {
position: fixed;
top: 55px;
@ -994,6 +976,7 @@ input[type="button"],
}
.slider > ul {
position: relative;
padding: 0;
font-size: 0;
white-space: nowrap;
-webkit-transition: all 0 linear;

199
lib/sass/bars.scss
Unescape View File

@ -7,28 +7,29 @@
right: 0;
left: 0;
z-index: 10;
height: 44px;
padding: 5px;
height: $bar-base-height;
padding: 0 $bar-side-spacing;
background-color: $chrome-color;
box-shadow: 0 0px 1px rgba(0,0,0,.85);
}
box-shadow: 0 0 1px rgba(0,0,0,.85);
// Modifier class to dock any bar below .bar-title
.bar-header-secondary {
top: 44px;
}
// Modifier class to dock any bar below .bar-title
&.bar-header-secondary {
top: $bar-base-height;
}
// Modifier class to dock any bar to bottom of viewport
.bar-footer {
bottom: 0;
}
// Modifier class to dock any bar to bottom of viewport
&.bar-footer {
bottom: 0;
}
// Flip border position to top for footer bars
.bar-footer.bar-standard,
.bar-footer-secondary.bar-standard {
box-shadow: 0 0px 1px rgba(0,0,0,.85);
// Flip border position to top for footer bars
&.bar-footer.bar-standard,
&.bar-footer-secondary.bar-standard {
box-shadow: 0 0 1px rgba(0,0,0,.85);
}
}
// Nav bar
// --------------------------------------------------
@ -42,38 +43,41 @@
}
// Centered text in the .bar-title
.bar-title .title {
.title {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
padding: 0;
margin: 0;
font-size: 18px;
font-weight: 500;
line-height: 44px;
line-height: $bar-base-height;
color: #000;
text-align: center;
white-space: nowrap;
}
.bar-title > a:not([class*="button"]) {
> a:not([class*="button"]) {
display: block;
width: 100%;
height: 100%;
}
//Retain specified title color
.bar-title .title a {
.title a {
color: inherit;
}
// Tab bar
// --------------------------------------------------
// Bar docked to bottom used for primary app navigation
.bar-tab {
bottom: 0;
height: 50px;
height: $bar-tab-height;
padding: 0;
box-shadow: 0 0px 1px rgba(0,0,0,.85);
}
@ -83,6 +87,8 @@
display: -webkit-box;
display: box;
height: 100%;
padding: 0;
margin: 0;
list-style: none;
-webkit-box-orient: horizontal;
box-orient: horizontal;
@ -109,155 +115,8 @@
margin-top: 1px;
font-size: 11px;
font-weight: 400;
color: #929292;
color: $default-color;
}
.tab-item.active .tab-label {
color: $app-color;
}
// Buttons in nav bars
// --------------------------------------------------
// Generic style for all buttons in .bar-title
.bar-title [class*="button"] {
position: relative;
z-index: 10; // Places buttons over full width title
padding-left: 5px;
padding-right: 5px;
font-size: 16px;
font-weight: 400;
line-height: 29px;
color: $app-color;
border: 0;
transition: opacity .2s linear;
-webkit-box-flex: 0;
box-flex: 0;
}
// Hacky way to right align buttons outside of flex-box system
// Note: is only absolutely positioned button, would be better if flex-box had an "align right" option
.bar-title .title + [class*="button"]:last-child,
.bar-title .button + [class*="button"]:last-child,
.bar-title [class*="button"].pull-right {
position: absolute;
top: 5px;
right: 5px;
}
// Override standard button active states
.bar-title .button:active,
.bar-title .button-prev:active,
.bar-title .button-next:active {
color: $app-color;
background-color: transparent;
opacity: .3;
}
// Directional buttons in nav bars
// --------------------------------------------------
.bar-title .button-prev:before,
.bar-title .button-prev:after,
.bar-title .button-next:before,
.bar-title .button-next:after {
position: absolute;
display: block;
width: 15px;
height: 3px;
background-color: $app-color;
content: '';
}
// Prev/next button base styles
.bar-title .button-prev {
padding-left: 22px; // Push over to make room for chevrons
}
.bar-title .button-next {
padding-right: 22px; // Push over to make room for chevrons
}
// Position the chevrons horizontally
.bar-title .button-prev:before,
.bar-title .button-prev:after {
left: 0;
}
.bar-title .button-next:before,
.bar-title .button-next:after {
right: 0;
}
// Position the chevrons vertically
.bar-title .button-prev:before,
.bar-title .button-next:before {
top: 12px;
}
.bar-title .button-prev:after,
.bar-title .button-next:after {
top: 21px;
}
// Rotate the chevrons
.bar-title .button-prev:before {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.bar-title .button-prev:after {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.bar-title .button-next:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.bar-title .button-next:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
// Block buttons in all bars
// --------------------------------------------------
// Add proper padding and replace buttons normal dropshadow with a shine from bar
[class*="bar"] .button-block {
padding: 7px 0;
margin-bottom: 0;
}
// Override standard padding changes for .button-blocks
[class*="bar"] .button-block:active {
padding: 7px 0;
}
// Segmented controller in all bars
// --------------------------------------------------
// Remove standard segmented bottom margin
[class*="bar-"] .segmented-controller {
margin-bottom: 0;
}
// Add margins between segmented controllers and buttons
[class*="bar-"] .segmented-controller + [class*="button"],
[class*="bar-"] [class*="button"] + .segmented-controller {
margin-left: 5px;
}
// Segmented controller in a nav bars
// --------------------------------------------------
.bar-title .segmented-controller {
line-height: 18px;
-webkit-box-flex: 1;
box-flex: 1;
}
// Search forms in standard bar
// --------------------------------------------------
// Position/size search bar within the bar
.bar-standard input[type=search] {
height: 32px;
margin: 0;
color: $primary-color;
}

2
lib/sass/base.scss
Unescape View File

@ -18,7 +18,7 @@ body {
// Universal link styling
a {
color: #007aff;
color: $primary-color;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links
}

130
lib/sass/buttons.scss
Unescape View File

@ -7,14 +7,14 @@
display: inline-block;
padding: 4px 12px;
margin: 0;
font-weight: 500;
font-weight: $font-weight-light;
line-height: 1;
color: #333;
color: $default-color;
text-align: center;
vertical-align: top;
cursor: pointer;
background-color: transparent;
border: 1px solid rgba(0, 0, 0, .2);
border: 1px solid $default-color;
border-radius: 4px;
// Active & filled button styles
@ -22,7 +22,7 @@
&.active,
&.button-filled {
color: #fff;
background-color: #333;
background-color: $default-color;
-webkit-transition: background-color .1s linear, opacity .1s linear;
transition: background-color .1s linear, opacity .1s linear;
}
@ -41,13 +41,13 @@
// Primary button (Default color is blue)
.button-primary {
color: $app-color;
border: 1px solid $app-color;
color: $primary-color;
border: 1px solid $primary-color;
&:active,
&.active,
&.button-filled {
background-color: $app-color;
background-color: $primary-color;
}
}
@ -83,11 +83,123 @@
font-size: 16px;
}
// Buttons in nav bars
// --------------------------------------------------
.bar-title {
// Generic style for all buttons in .bar-title
[class*="button"] {
position: relative;
z-index: 10; // Places buttons over full width title
padding: 0;
font-size: 16px;
font-weight: 400;
line-height: $bar-base-height;
color: $primary-color;
border: 0;
-webkit-transition: opacity .2s linear;
transition: opacity .2s linear;
-webkit-box-flex: 0;
box-flex: 0;
}
// Hacky way to right align buttons outside of flex-box system
// Note: is only absolutely positioned button, would be better if flex-box had an "align right" option
.title + [class*="button"]:last-child,
.button + [class*="button"]:last-child,
[class*="button"].pull-right {
position: absolute;
top: 0;
right: $bar-side-spacing;
}
// Override standard button active states
.button:active,
.button-prev:active,
.button-next:active {
color: $primary-color;
background-color: transparent;
opacity: .3;
}
// Directional buttons in nav bars
// --------------------------------------------------
.button-prev:before,
.button-prev:after,
.button-next:before,
.button-next:after {
position: absolute;
display: block;
width: 15px;
height: 3px;
background-color: $primary-color;
content: '';
}
// Prev/next button base styles
.button-prev {
padding-left: $button-directional-padding;
margin-left: $button-directional-margin;
}
.button-next {
padding-right: $button-directional-padding;
margin-right: $button-directional-margin;
}
// Position the chevrons horizontally
.button-prev:before,
.button-prev:after {
left: 0;
}
.button-next:before,
.button-next:after {
right: 0;
}
// Position the chevrons vertically
.button-prev:before,
.button-next:before {
top: 16px;
}
.button-prev:after,
.button-next:after {
top: 25px;
}
// Rotate the chevrons
.button-prev:before,
.button-next:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.button-prev:after,
.button-next:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
// Block buttons in all bars
// --------------------------------------------------
// Add proper padding and replace buttons normal dropshadow with a shine from bar
[class*="bar"] .button-block {
padding: 7px 0;
margin-top: 6px;
margin-bottom: 0;
&:active {
padding: 7px 0;
}
}
// Button overrides
// --------------------------------------------------
input[type="submit"],
input[type="reset"],
input[type="button"],
.button-block {
input[type="button"] {
width: 100%;
}

10
lib/sass/forms.scss
Unescape View File

@ -121,3 +121,13 @@ select {
margin-bottom: 0;
border-bottom: 0;
}
// Search forms in standard bar
// --------------------------------------------------
// Position/size search bar within the bar
.bar-standard input[type=search] {
height: 32px;
margin: 0;
}

4
lib/sass/popovers.scss
Unescape View File

@ -63,7 +63,7 @@
font-size: 16px;
font-weight: 400;
line-height: 29px;
color: $app-color;
color: $primary-color;
border: 0;
transition: opacity .2s linear;
-webkit-box-flex: 0;
@ -82,7 +82,7 @@
// Active state for popover header buttons
.popover-header .button:active {
color: $app-color;
color: $primary-color;
background-color: transparent;
opacity: .3;
}

6
lib/sass/ratchet.scss
Unescape View File

@ -1,8 +1,6 @@
// Variables
$app-color: #007aff;
$chrome-color: rgba(247,247,247,.98);
$positive-color: #4cd964;
$negative-color: #dd524d;
@import "variables.scss";
// Normalize & Base CSS
@import "normalize.scss";

33
lib/sass/segmented-controllers.scss
Unescape View File

@ -5,13 +5,14 @@
.segmented-controller {
display: -webkit-box;
display: box;
padding: 0;
margin-bottom: 10px;
overflow: hidden;
font-size: 12px;
font-weight: bold;
font-weight: $font-weight-light;
list-style: none;
background-color: transparent;
border: 1px solid $app-color;
border: 1px solid $primary-color;
border-radius: 4px;
-webkit-box-orient: horizontal;
box-orient: horizontal;
@ -21,17 +22,17 @@
overflow: hidden;
text-align: center;
white-space: nowrap;
border-left: 1px solid $app-color;
border-left: 1px solid $primary-color;
-webkit-box-flex: 1;
box-flex: 1;
// Link that fills each section
> a {
display: block;
padding: 8px 16px;
padding: 7px 16px;
overflow: hidden;
line-height: 15px;
color: $app-color;
line-height: 1;
color: $primary-color;
text-overflow: ellipsis;
}
@ -42,7 +43,7 @@
// Active segment of controller
&.active {
background-color: $app-color;
background-color: $primary-color;
transition: background-color .2s linear;
// Set color of links to white
@ -60,3 +61,21 @@
display: block;
}
}
// Segmented controller in all bars
// --------------------------------------------------
// Remove standard segmented bottom margin
[class*="bar-"] .segmented-controller {
margin-top: 9px; // Optically center the controller
margin-bottom: 8px;
-webkit-box-flex: 1;
box-flex: 1;
}
// Add margins between segmented controllers and buttons
[class*="bar-"] .segmented-controller + [class*="button"],
[class*="bar-"] [class*="button"] + .segmented-controller {
margin-left: $bar-side-spacing; // Equal to the right and left padding on buttons & icons
}

1
lib/sass/sliders.scss
Unescape View File

@ -17,6 +17,7 @@
// Inner wrapper for slider (width of all slides together)
> ul {
position: relative;
padding: 0;
font-size: 0; // Remove spaces from inline-block children
white-space: nowrap;
-webkit-transition: all 0 linear;

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

@ -3,6 +3,8 @@
// --------------------------------------------------
.table-view {
padding: 0;
margin: 0;
list-style: none; // Remove usual bullet styles from table view
background-color: #fff;

36
lib/sass/variables.scss
Unescape View File

@ -0,0 +1,36 @@
//
// Variables
// --------------------------------------------------
// Type
// --------------------------------------------------
$font-weight: 500;
$font-weight-bold: 600;
$font-weight-light: 400;
// Colors
// --------------------------------------------------
// Main theme colors
$primary-color: #007aff;
$chrome-color: rgba(247,247,247,.98);
// Action colors
$default-color: #929292;
$positive-color: #4cd964;
$negative-color: #dd524d;
// Bars
// --------------------------------------------------
$bar-base-height: 44px;
$bar-tab-height: 50px;
$bar-side-spacing: 10px;
// Buttons
// --------------------------------------------------
$button-directional-padding: 20px;
$button-directional-margin: -($bar-side-spacing/2);
Write Preview
Loading…
Cancel
Save