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

clean up

pull/253/head
connors 11 years ago
parent
e3aa933a8c
commit
2ff0dfcfc1
27 changed files with 284 additions and 377 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. 2
      LICENSE
  2. 10
      README.md
  3. 2
      _config.yml
  4. 14
      dist/android-theme.css
  5. 7
      dist/ios-theme.css
  6. 145
      dist/ratchet.css
  7. 2
      dist/ratchet.js
  8. 19
      docs/assets/css/docs.css
  9. 14
      docs/dist/android-theme.css
  10. 7
      docs/dist/ios-theme.css
  11. 145
      docs/dist/ratchet.css
  12. 4
      docs/dist/ratchet.js
  13. 0
      docs/favicon.ico
  14. 2
      package.json
  15. 62
      sass/bars.scss
  16. 24
      sass/base.scss
  17. 8
      sass/buttons.scss
  18. 15
      sass/cards.scss
  19. 27
      sass/forms.scss
  20. 8
      sass/popovers.scss
  21. 12
      sass/segmented-controls.scss
  22. 10
      sass/sliders.scss
  23. 80
      sass/table-views.scss
  24. 12
      sass/theme-android.scss
  25. 4
      sass/theme-ios.scss
  26. 24
      sass/type.scss
  27. 2
      sass/variables.scss

2
LICENSE
Unescape View File

@ -1,6 +1,6 @@
The MIT License (MIT)
Copyright (c) 2014 CONNORS, DHG, FAT and other contributors
Copyright (c) 2014 CONNORS, DHG, FAT, and other contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in

10
README.md
Unescape View File

@ -41,22 +41,16 @@ A small list of "gotchas" are provided below for designers and developers starti
- Ratchet uses XHR requests to fetch additional pages inside the application. Due to security concerns, modern browsers prevent XHR requests when opening files locally (aka using the file:/// protocol); consequently, Ratchet does not work when opened directly as a file.
- A common solution to this is to simply serve the files from a local server. One convenient way to achieve this is to run ```python -m SimpleHTTPServer <port>``` to serve up the files in the current directory to ```http://localhost:<port>```
## Authors
## Maintainer
Connor Sears
- <https://twitter.com/connors>
- <https://github.com/connors>
Dave Gamache
- <https://twitter.com/dhg>
- <https://github.com/dhg>
Jacob Thornton
- <https://twitter.com/fat>
- <https://github.com/fat>
Created by Connor Sears, Dave Gamache, and Jacob Thornton
## License

2
_config.yml
Unescape View File

@ -1,5 +1,5 @@
name: Ratchet
authors: Connor Sears, Dave Gamache, and Jacob Thornton
authors: Connor Sears
description: Prototype iPhone apps with simple HTML, CSS, and JS components.
pygments: true

14
dist/android-theme.css vendored
Unescape View File

@ -1,7 +1,7 @@
/*
* =====================================================
* Ratchet v2.0.0
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
* Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT
*
* Designed and built by @connors, @dhg, and @fat.
@ -183,6 +183,9 @@ a:active {
height: 50px;
border-top: 0;
}
.bar-tab .tab-item {
color: #929292;
}
.bar-tab .tab-item.active {
color: #33b5e5;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5;
@ -194,7 +197,8 @@ a:active {
}
.bar-tab .tab-item .icon {
top: 3px;
padding: 0;
padding-top: 0;
padding-bottom: 0;
}
.title {
@ -206,9 +210,9 @@ a:active {
}
.bar .btn {
margin-top: 7px;
padding-top: 9px;
padding-bottom: 9px;
margin-top: 4px;
padding-top: 10px;
padding-bottom: 10px;
}
.bar .btn-link {
margin-top: 0;

7
dist/ios-theme.css vendored
Unescape View File

@ -1,7 +1,7 @@
/*
* =====================================================
* Ratchet v2.0.0
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
* Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT
*
* Designed and built by @connors, @dhg, and @fat.
@ -133,11 +133,14 @@ p {
}
.bar-tab {
border-top: 1px solid rgba(247, 247, 247, 0.98);
border-top: 0;
-webkit-box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85);
box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85);
}
.tab-item {
color: #929292;
}
.tab-item.active, .tab-item:active {
color: #007aff;
}

145
dist/ratchet.css vendored
Unescape View File

@ -1,7 +1,7 @@
/*
* =====================================================
* Ratchet v2.0.0
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
* Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT
*
* Designed and built by @connors, @dhg, and @fat.
@ -229,8 +229,8 @@ th {
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@ -256,10 +256,6 @@ a:active {
color: #3071a9;
}
strong {
font-weight: 500;
}
.content {
position: fixed;
top: 0;
@ -272,8 +268,8 @@ strong {
}
.content > * {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.bar-nav ~ .content {
@ -305,6 +301,10 @@ strong {
padding-left: 15px;
}
.content-padded {
margin: 10px;
}
.pull-left {
float: left;
}
@ -314,7 +314,8 @@ strong {
}
h1, h2, h3, h4, h5, h6 {
margin: 10px 10px;
margin-top: 0;
margin-bottom: 10px;
line-height: 1;
}
@ -345,27 +346,17 @@ h6, .h6 {
}
p {
margin: 10px 10px;
margin-top: 0;
margin-bottom: 10px;
font-size: 14px;
color: #777;
}
.container > h1,
.container > h2,
.container > h3,
.container > h4,
.container > h5,
.container > h6,
.container > p {
margin-left: 0;
margin-right: 0;
}
.btn {
position: relative;
display: inline-block;
padding: 5px 8px;
margin: 0;
margin-bottom: 0;
font-size: 12px;
font-weight: 400;
line-height: 1;
@ -439,7 +430,7 @@ p {
padding-bottom: 6px;
color: #428bca;
background-color: transparent;
border: none;
border: 0;
}
.btn-link:active, .btn-link.active {
color: #3071a9;
@ -499,16 +490,20 @@ input[type="button"] {
border-bottom: 1px solid #dddddd;
background-color: white;
}
.bar.bar-header-secondary {
.bar-header-secondary {
top: 44px;
}
.bar.bar-footer {
.bar-footer {
bottom: 0;
}
.bar.bar-footer-secondary {
.bar-footer-secondary {
bottom: 44px;
}
.bar.bar-footer-secondary-tab {
.bar-footer-secondary-tab {
bottom: 50px;
}
@ -521,10 +516,7 @@ input[type="button"] {
display: block;
width: 100%;
padding: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: -10px;
margin-right: -10px;
margin: 0 -10px;
font-size: 17px;
font-weight: 500;
line-height: 44px;
@ -532,15 +524,16 @@ input[type="button"] {
text-align: center;
white-space: nowrap;
}
.title .title a {
.title a {
color: inherit;
}
.bar-tab {
display: table;
bottom: 0;
height: 50px;
width: 100%;
height: 50px;
padding: 0;
border-top: 1px solid #dddddd;
border-bottom: 0;
@ -561,7 +554,8 @@ input[type="button"] {
top: 2px;
width: 24px;
height: 24px;
padding: 0;
padding-top: 0;
padding-bottom: 0;
}
.bar-tab .tab-item .icon ~ .tab-label {
display: block;
@ -616,12 +610,13 @@ input[type="button"] {
.bar .icon {
position: relative;
padding: 10px 0;
z-index: 20;
padding-top: 10px;
padding-bottom: 10px;
font-size: 24px;
}
.bar .btn .icon {
top: 2px;
top: 3px;
padding: 0;
}
.bar .title .icon {
@ -681,30 +676,26 @@ input[type="button"] {
}
.card {
width: auto;
overflow: hidden;
margin: 10px;
background-color: white;
border: 1px solid #dddddd;
border-radius: 6px;
}
.card p {
margin: inherit;
font-size: inherit;
color: inherit;
}
.card .table-view {
margin: 0;
margin-bottom: 0;
border-top: 0;
border-bottom: 0;
}
.card .table-view .table-view-divider:first-child {
top: 0;
border-radius: 6px 6px 0 0;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.card .table-view .table-view-divider:last-child {
border-radius: 0 0 6px 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.card .table-view-cell:last-child {
@ -712,23 +703,25 @@ input[type="button"] {
}
.table-view {
padding: 0;
margin: 0 0 15px 0;
padding-left: 0;
margin-top: 0;
margin-bottom: 15px;
list-style: none;
background-color: #fff;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.table-view .table-view-cell {
.table-view-cell {
position: relative;
overflow: hidden;
padding: 11px 65px 11px 15px;
border-bottom: 1px solid #dddddd;
}
.table-view .table-view-cell:last-child {
.table-view-cell:last-child {
border-bottom: 0;
}
.table-view .table-view-cell > a:not(.btn) {
.table-view-cell > a:not(.btn) {
position: relative;
display: block;
overflow: hidden;
@ -736,13 +729,14 @@ input[type="button"] {
margin: -11px -65px -11px -15px;
color: inherit;
}
.table-view .table-view-cell > a:not(.btn):active {
.table-view-cell > a:not(.btn):active {
background-color: #eee;
}
.table-view .table-view-cell p {
margin: 0;
.table-view-cell p {
margin-bottom: 0;
}
.table-view .table-view-divider {
.table-view-divider {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
@ -823,8 +817,7 @@ input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
input[type="color"] {
width: 100%;
height: 35px;
padding: 0 15px;
@ -860,20 +853,10 @@ select {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
.input-group {
width: auto;
height: auto;
padding: 0;
border-left: 0;
border-right: 0;
border-radius: 0;
}
.input-group input,
.input-group textarea {
margin-bottom: 0;
background-color: transparent;
border-bottom: 1px solid #dddddd;
border-top: 0;
border-left: 0;
border-right: 0;
@ -882,19 +865,11 @@ select {
box-shadow: none;
}
.input-group input:last-child {
border-bottom: 0;
}
.input-row {
overflow: hidden;
border-bottom: 1px solid #dddddd;
}
.input-row:last-child {
border-bottom: 0;
}
.input-row label {
float: left;
width: 35%;
@ -903,7 +878,7 @@ select {
line-height: 1.1;
}
.input-row label + input {
.input-row input {
float: right;
width: 65%;
padding-left: 0;
@ -914,11 +889,9 @@ select {
.segmented-control {
position: relative;
display: table;
padding: 0;
overflow: hidden;
font-size: 12px;
font-weight: 400;
list-style: none;
background-color: white;
border: 1px solid #ccc;
border-radius: 4px;
@ -947,7 +920,7 @@ select {
}
.segmented-control-primary {
border: 1px solid #428bca;
border-color: #428bca;
}
.segmented-control-primary .control-item {
color: #428bca;
@ -962,7 +935,7 @@ select {
}
.segmented-control-positive {
border: 1px solid #5cb85c;
border-color: #5cb85c;
}
.segmented-control-positive .control-item {
color: #5cb85c;
@ -977,7 +950,7 @@ select {
}
.segmented-control-negative {
border: 1px solid #d9534f;
border-color: #d9534f;
}
.segmented-control-negative .control-item {
color: #d9534f;
@ -1059,17 +1032,15 @@ select {
.popover .bar-nav {
border-bottom: 1px solid #dddddd;
border-radius: 12px 12px 0 0;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
-webkit-box-shadow: none;
box-shadow: none;
}
.popover .table-view {
width: auto;
max-height: 300px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
overflow: auto;
background-color: #fff;
border-top: 0;
@ -1105,8 +1076,7 @@ select {
transition: -webkit-transform 0.25s;
}
.slider,
.slider > li {
.slider {
width: 100%;
}
@ -1116,7 +1086,6 @@ select {
}
.slider .slide-group {
position: relative;
padding: 0;
font-size: 0;
white-space: nowrap;
-webkit-transition: all 0 linear;
@ -1128,8 +1097,6 @@ select {
vertical-align: top;
width: 100%;
height: 100%;
}
.slider .slide-group .slide > * {
font-size: 14px;
}

2
dist/ratchet.js vendored
Unescape View File

@ -1,7 +1,7 @@
/*
* =====================================================
* Ratchet v2.0.0
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
* Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT
*
* Designed and built by @connors, @dhg, and @fat.

19
docs/assets/css/docs.css
Unescape View File

@ -1,7 +1,7 @@
/*
* =====================================================
* Ratchet v2.0.0
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
* Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT
*
* Designed and built by @connors, @dhg, and @fat.
@ -909,10 +909,13 @@ hr {
bottom: 50px;
}
.platform-ios .bar-tab {
border-top: 1px solid rgba(247, 247, 247, 0.98);
border-top: 0;
-webkit-box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85);
box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85);
}
.platform-ios .tab-item {
color: #929292;
}
.platform-ios .tab-item.active, .platform-ios .tab-item:active {
color: #007aff;
}
@ -1364,6 +1367,9 @@ hr {
height: 50px;
border-top: 0;
}
.platform-android .bar-tab .tab-item {
color: #929292;
}
.platform-android .bar-tab .tab-item.active {
color: #33b5e5;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5;
@ -1375,7 +1381,8 @@ hr {
}
.platform-android .bar-tab .tab-item .icon {
top: 3px;
padding: 0;
padding-top: 0;
padding-bottom: 0;
}
.platform-android .title {
position: static;
@ -1385,9 +1392,9 @@ hr {
text-align: left;
}
.platform-android .bar .btn {
margin-top: 7px;
padding-top: 9px;
padding-bottom: 9px;
margin-top: 4px;
padding-top: 10px;
padding-bottom: 10px;
}
.platform-android .bar .btn-link {
margin-top: 0;

14
docs/dist/android-theme.css vendored
Unescape View File

@ -1,7 +1,7 @@
/*
* =====================================================
* Ratchet v2.0.0
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
* Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT
*
* Designed and built by @connors, @dhg, and @fat.
@ -183,6 +183,9 @@ a:active {
height: 50px;
border-top: 0;
}
.bar-tab .tab-item {
color: #929292;
}
.bar-tab .tab-item.active {
color: #33b5e5;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5;
@ -194,7 +197,8 @@ a:active {
}
.bar-tab .tab-item .icon {
top: 3px;
padding: 0;
padding-top: 0;
padding-bottom: 0;
}
.title {
@ -206,9 +210,9 @@ a:active {
}
.bar .btn {
margin-top: 7px;
padding-top: 9px;
padding-bottom: 9px;
margin-top: 4px;
padding-top: 10px;
padding-bottom: 10px;
}
.bar .btn-link {
margin-top: 0;

7
docs/dist/ios-theme.css vendored
Unescape View File

@ -1,7 +1,7 @@
/*
* =====================================================
* Ratchet v2.0.0
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
* Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT
*
* Designed and built by @connors, @dhg, and @fat.
@ -133,11 +133,14 @@ p {
}
.bar-tab {
border-top: 1px solid rgba(247, 247, 247, 0.98);
border-top: 0;
-webkit-box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85);
box-shadow: 0 0 -1px rgba(0, 0, 0, 0.85);
}
.tab-item {
color: #929292;
}
.tab-item.active, .tab-item:active {
color: #007aff;
}

145
docs/dist/ratchet.css vendored
Unescape View File

@ -1,7 +1,7 @@
/*
* =====================================================
* Ratchet v2.0.0
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
* Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT
*
* Designed and built by @connors, @dhg, and @fat.
@ -229,8 +229,8 @@ th {
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@ -256,10 +256,6 @@ a:active {
color: #3071a9;
}
strong {
font-weight: 500;
}
.content {
position: fixed;
top: 0;
@ -272,8 +268,8 @@ strong {
}
.content > * {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.bar-nav ~ .content {
@ -305,6 +301,10 @@ strong {
padding-left: 15px;
}
.content-padded {
margin: 10px;
}
.pull-left {
float: left;
}
@ -314,7 +314,8 @@ strong {
}
h1, h2, h3, h4, h5, h6 {
margin: 10px 10px;
margin-top: 0;
margin-bottom: 10px;
line-height: 1;
}
@ -345,27 +346,17 @@ h6, .h6 {
}
p {
margin: 10px 10px;
margin-top: 0;
margin-bottom: 10px;
font-size: 14px;
color: #777;
}
.container > h1,
.container > h2,
.container > h3,
.container > h4,
.container > h5,
.container > h6,
.container > p {
margin-left: 0;
margin-right: 0;
}
.btn {
position: relative;
display: inline-block;
padding: 5px 8px;
margin: 0;
margin-bottom: 0;
font-size: 12px;
font-weight: 400;
line-height: 1;
@ -439,7 +430,7 @@ p {
padding-bottom: 6px;
color: #428bca;
background-color: transparent;
border: none;
border: 0;
}
.btn-link:active, .btn-link.active {
color: #3071a9;
@ -499,16 +490,20 @@ input[type="button"] {
border-bottom: 1px solid #dddddd;
background-color: white;
}
.bar.bar-header-secondary {
.bar-header-secondary {
top: 44px;
}
.bar.bar-footer {
.bar-footer {
bottom: 0;
}
.bar.bar-footer-secondary {
.bar-footer-secondary {
bottom: 44px;
}
.bar.bar-footer-secondary-tab {
.bar-footer-secondary-tab {
bottom: 50px;
}
@ -521,10 +516,7 @@ input[type="button"] {
display: block;
width: 100%;
padding: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: -10px;
margin-right: -10px;
margin: 0 -10px;
font-size: 17px;
font-weight: 500;
line-height: 44px;
@ -532,15 +524,16 @@ input[type="button"] {
text-align: center;
white-space: nowrap;
}
.title .title a {
.title a {
color: inherit;
}
.bar-tab {
display: table;
bottom: 0;
height: 50px;
width: 100%;
height: 50px;
padding: 0;
border-top: 1px solid #dddddd;
border-bottom: 0;
@ -561,7 +554,8 @@ input[type="button"] {
top: 2px;
width: 24px;
height: 24px;
padding: 0;
padding-top: 0;
padding-bottom: 0;
}
.bar-tab .tab-item .icon ~ .tab-label {
display: block;
@ -616,12 +610,13 @@ input[type="button"] {
.bar .icon {
position: relative;
padding: 10px 0;
z-index: 20;
padding-top: 10px;
padding-bottom: 10px;
font-size: 24px;
}
.bar .btn .icon {
top: 2px;
top: 3px;
padding: 0;
}
.bar .title .icon {
@ -681,30 +676,26 @@ input[type="button"] {
}
.card {
width: auto;
overflow: hidden;
margin: 10px;
background-color: white;
border: 1px solid #dddddd;
border-radius: 6px;
}
.card p {
margin: inherit;
font-size: inherit;
color: inherit;
}
.card .table-view {
margin: 0;
margin-bottom: 0;
border-top: 0;
border-bottom: 0;
}
.card .table-view .table-view-divider:first-child {
top: 0;
border-radius: 6px 6px 0 0;
border-top-right-radius: 6px;
border-top-left-radius: 6px;
}
.card .table-view .table-view-divider:last-child {
border-radius: 0 0 6px 6px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 6px;
}
.card .table-view-cell:last-child {
@ -712,23 +703,25 @@ input[type="button"] {
}
.table-view {
padding: 0;
margin: 0 0 15px 0;
padding-left: 0;
margin-top: 0;
margin-bottom: 15px;
list-style: none;
background-color: #fff;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.table-view .table-view-cell {
.table-view-cell {
position: relative;
overflow: hidden;
padding: 11px 65px 11px 15px;
border-bottom: 1px solid #dddddd;
}
.table-view .table-view-cell:last-child {
.table-view-cell:last-child {
border-bottom: 0;
}
.table-view .table-view-cell > a:not(.btn) {
.table-view-cell > a:not(.btn) {
position: relative;
display: block;
overflow: hidden;
@ -736,13 +729,14 @@ input[type="button"] {
margin: -11px -65px -11px -15px;
color: inherit;
}
.table-view .table-view-cell > a:not(.btn):active {
.table-view-cell > a:not(.btn):active {
background-color: #eee;
}
.table-view .table-view-cell p {
margin: 0;
.table-view-cell p {
margin-bottom: 0;
}
.table-view .table-view-divider {
.table-view-divider {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
@ -823,8 +817,7 @@ input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
input[type="color"] {
width: 100%;
height: 35px;
padding: 0 15px;
@ -860,20 +853,10 @@ select {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}
.input-group {
width: auto;
height: auto;
padding: 0;
border-left: 0;
border-right: 0;
border-radius: 0;
}
.input-group input,
.input-group textarea {
margin-bottom: 0;
background-color: transparent;
border-bottom: 1px solid #dddddd;
border-top: 0;
border-left: 0;
border-right: 0;
@ -882,19 +865,11 @@ select {
box-shadow: none;
}
.input-group input:last-child {
border-bottom: 0;
}
.input-row {
overflow: hidden;
border-bottom: 1px solid #dddddd;
}
.input-row:last-child {
border-bottom: 0;
}
.input-row label {
float: left;
width: 35%;
@ -903,7 +878,7 @@ select {
line-height: 1.1;
}
.input-row label + input {
.input-row input {
float: right;
width: 65%;
padding-left: 0;
@ -914,11 +889,9 @@ select {
.segmented-control {
position: relative;
display: table;
padding: 0;
overflow: hidden;
font-size: 12px;
font-weight: 400;
list-style: none;
background-color: white;
border: 1px solid #ccc;
border-radius: 4px;
@ -947,7 +920,7 @@ select {
}
.segmented-control-primary {
border: 1px solid #428bca;
border-color: #428bca;
}
.segmented-control-primary .control-item {
color: #428bca;
@ -962,7 +935,7 @@ select {
}
.segmented-control-positive {
border: 1px solid #5cb85c;
border-color: #5cb85c;
}
.segmented-control-positive .control-item {
color: #5cb85c;
@ -977,7 +950,7 @@ select {
}
.segmented-control-negative {
border: 1px solid #d9534f;
border-color: #d9534f;
}
.segmented-control-negative .control-item {
color: #d9534f;
@ -1059,17 +1032,15 @@ select {
.popover .bar-nav {
border-bottom: 1px solid #dddddd;
border-radius: 12px 12px 0 0;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
-webkit-box-shadow: none;
box-shadow: none;
}
.popover .table-view {
width: auto;
max-height: 300px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
overflow: auto;
background-color: #fff;
border-top: 0;
@ -1105,8 +1076,7 @@ select {
transition: -webkit-transform 0.25s;
}
.slider,
.slider > li {
.slider {
width: 100%;
}
@ -1116,7 +1086,6 @@ select {
}
.slider .slide-group {
position: relative;
padding: 0;
font-size: 0;
white-space: nowrap;
-webkit-transition: all 0 linear;
@ -1128,8 +1097,6 @@ select {
vertical-align: top;
width: 100%;
height: 100%;
}
.slider .slide-group .slide > * {
font-size: 14px;
}

4
docs/dist/ratchet.js vendored
Unescape View File

@ -1,7 +1,7 @@
/*
* =====================================================
* Ratchet v2.0.0
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
* Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT
*
* Designed and built by @connors, @dhg, and @fat.
@ -10,7 +10,7 @@
/*
* =====================================================
* Ratchet v2.0.0
* Copyright 2014 Connor Sears, Dave Gamache, and Jacob Thornton
* Copyright 2014 Connor Sears
* Licensed under http://www.opensource.org/licenses/MIT
*
* Designed and built by @connors, @dhg, and @fat.

0
favicon.ico → docs/favicon.ico
Unescape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.2 KiB

After

Width:  |  Height:  |  Size: 8.2 KiB

2
package.json
Unescape View File

@ -10,7 +10,7 @@
"prototype"
],
"homepage": "http://maker.github.com/ratchet/",
"author": "Connor Sears, Dave Gamache, and Jacob Thornton",
"author": "Connor Sears",
"style": "./dist/ratchet.css",
"sass": "./lib/sass/ratchet.scss",
"repository": {

62
sass/bars.scss
Unescape View File

@ -12,27 +12,26 @@
padding-left: $bar-side-spacing;
border-bottom: $border-default;
background-color: $chrome-color;
}
// Modifier class to dock any bar below .bar-nav
.bar-header-secondary {
top: $bar-base-height;
}
// Modifier class to dock any bar below .bar-nav
&.bar-header-secondary {
top: $bar-base-height;
}
// Modifier class to dock any bar to the bottom of the viewport
&.bar-footer {
bottom: 0;
}
// Modifier class to dock any bar to the bottom of the viewport
.bar-footer {
bottom: 0;
}
// Modifier class to dock any bar above a standard bar
&.bar-footer-secondary {
bottom: $bar-base-height;
}
// Modifier class to dock any bar above a standard bar
.bar-footer-secondary {
bottom: $bar-base-height;
}
// Modifier class to dock any bar above a .bar-tab
&.bar-footer-secondary-tab {
bottom: $bar-tab-height;
}
// Modifier class to dock any bar above a .bar-tab
.bar-footer-secondary-tab {
bottom: $bar-tab-height;
}
@ -52,21 +51,17 @@
display: block;
width: 100%;
padding: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: -$bar-side-spacing;
margin-right: -$bar-side-spacing;
margin: 0 (-$bar-side-spacing);
font-size: $font-size-default;
font-weight: $font-weight;
line-height: $bar-base-height;
color: #000;
text-align: center;
white-space: nowrap;
// Retain specified title color
.title a {
color: inherit;
}
}
// Retain specified title color
.title a {
color: inherit;
}
@ -77,14 +72,14 @@
.bar-tab {
display: table;
bottom: 0;
height: $bar-tab-height;
width: 100%;
height: $bar-tab-height;
padding: 0;
border-top: $border-default;
border-bottom: 0;
table-layout: fixed;
// Navigational tab
// Navigational tab (Nested to be more specific for the icons in tab-items)
.tab-item {
display: table-cell;
width: 1%;
@ -101,10 +96,11 @@
// Tab icon
.icon {
top: 2px;
top: 3px;
width: 24px;
height: 24px;
padding: 0;
padding-top: 0;
padding-bottom: 0;
// Make the text smaller if it's used with an icon
~ .tab-label {
@ -115,7 +111,6 @@
}
}
// Bars with buttons
// --------------------------------------------------
@ -187,14 +182,15 @@
.bar {
.icon {
position: relative;
padding: 10px 0;
z-index: 20; // Position the buttons on top of .title
padding-top: 10px;
padding-bottom: 10px;
font-size: 24px;
}
// Vertical center the larger icons in btns.
.btn .icon {
top: 2px;
top: 3px;
padding: 0;
}

24
sass/base.scss
Unescape View File

@ -3,7 +3,11 @@
// --------------------------------------------------
// Use box sizing on all the things!
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
// We fix position the body and scroll `.content`.
body {
@ -23,15 +27,12 @@ body {
a {
color: $primary-color;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links in webkit browsers.
-webkit-tap-highlight-color: rgba(0,0,0,0); // Removes the dark touch outlines on links in webkit browsers.
&:active {
color: darken($primary-color, 10%);
}
}
strong {
font-weight: $font-weight;
}
// Wrapper to be used around all content not in .bar-title and .bar-tab
.content {
@ -48,8 +49,8 @@ strong {
// Hack to force all relatively and absolutely positioned elements still render while scrolling
// Note: This is a bug for "-webkit-overflow-scrolling: touch"
.content > * {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
// Pad top/bottom of content so it doesn't hide behind bars.
@ -58,7 +59,7 @@ strong {
padding-top: $bar-base-height;
}
.bar-header-secondary ~ .content {
padding-top: $bar-base-height*2;
padding-top: ($bar-base-height*2);
}
// Footer bar padding
@ -66,7 +67,7 @@ strong {
padding-bottom: $bar-base-height;
}
.bar-footer-secondary ~ .content {
padding-bottom: $bar-base-height*2;
padding-bottom: ($bar-base-height*2);
}
// Tab bar padding
@ -74,7 +75,7 @@ strong {
padding-bottom: $bar-tab-height;
}
.bar-footer-secondary-tab ~ .content {
padding-bottom: $bar-tab-height+$bar-base-height;
padding-bottom: ($bar-tab-height+$bar-base-height);
}
// Utility classes
@ -82,6 +83,9 @@ strong {
padding-right: 15px;
padding-left: 15px;
}
.content-padded {
margin: $bar-side-spacing;
}
.pull-left {
float: left;
}

8
sass/buttons.scss
Unescape View File

@ -6,10 +6,10 @@
position: relative;
display: inline-block;
padding: 5px 8px;
margin: 0;
margin-bottom: 0; // For input.btn
font-size: $button-font-size;
font-weight: $font-weight-light;
line-height: 1; // Center button text on the phone.
line-height: 1;
color: #333;
text-align: center;
vertical-align: top;
@ -21,7 +21,7 @@
// Active & filled button styles
&:active,
&.active {
color: inherit;
color: inherit; // Overriding the gloabl style for all anchors.
background-color: #ccc;
}
@ -105,7 +105,7 @@
padding-bottom: 6px;
color: $primary-color;
background-color: transparent;
border: none;
border: 0;
&:active,
&.active {

15
sass/cards.scss
Unescape View File

@ -3,37 +3,32 @@
// --------------------------------------------------
.card {
width: auto;
overflow: hidden;
margin: $bar-side-spacing;
background-color: $card-bg;
border: $border-default;
border-radius: $border-radius;
p {
margin: inherit;
font-size: inherit;
color: inherit;
}
}
// Cards with table-views
// --------------------------------------------------
.card .table-view {
margin: 0;
margin-bottom: 0;
border-top: 0;
border-bottom: 0;
// Rounding first divider on carded lists and remove border on the top
.table-view-divider:first-child {
top: 0;
border-radius: $border-radius $border-radius 0 0;
border-top-right-radius: $border-radius;
border-top-left-radius: $border-radius;
}
// Rounding last divider on carded table views
.table-view-divider:last-child {
border-radius: 0 0 $border-radius $border-radius;
border-bottom-right-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
}
// Remove the bottom border from last table cell

27
sass/forms.scss
Unescape View File

@ -27,8 +27,7 @@ input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
input[type="color"] {
width: 100%;
height: 35px;
padding: 0 15px;
@ -69,22 +68,11 @@ select {
// Input groups (cluster multiple inputs together into a single group)
// -------------------------------------------------------------------
// Reset from initial form setup styles
.input-group {
width: auto;
height: auto;
padding: 0;
border-left: 0; // Side borders are removed because the form is full width.
border-right: 0;
border-radius: 0;
}
// Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input
.input-group input,
.input-group textarea {
margin-bottom: 0;
background-color: transparent;
border-bottom: $border-default;
border-top: 0;
border-left: 0;
border-right: 0;
@ -92,12 +80,6 @@ select {
@include box-shadow(none);
}
// Remove bottom border on last input to avoid double bottom border
.input-group input:last-child {
border-bottom: 0;
}
// Input groups with labels
// --------------------------------------------------
@ -107,11 +89,6 @@ select {
border-bottom: $border-default;
}
// Remove bottom border on last input-row to avoid double bottom border
.input-row:last-child {
border-bottom: 0;
}
// Labels get floated left with a set percentage width
.input-row label {
float: left;
@ -122,7 +99,7 @@ select {
}
// Actual inputs float to right of labels and also have a set percentage
.input-row label + input {
.input-row input {
float: right;
width: 65%;
padding-left: 0;

8
sass/popovers.scss
Unescape View File

@ -55,7 +55,7 @@
bottom: 0;
left: 0;
z-index: 15;
background-color: rgba(0,0,0,0.3);
background-color: rgba(0,0,0,.3);
}
// Block level buttons in popovers
@ -76,7 +76,8 @@
.popover .bar-nav {
border-bottom: $border-default;
border-radius: 12px 12px 0 0;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
@include box-shadow(none);
}
@ -85,11 +86,8 @@
// --------------------------------------------------
.popover .table-view {
width: auto;
max-height: 300px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
overflow: auto;
background-color: #fff;
border-top: 0;

12
sass/segmented-controls.scss
Unescape View File

@ -5,11 +5,9 @@
.segmented-control {
position: relative;
display: table;
padding: 0;
overflow: hidden;
font-size: 12px;
font-weight: $font-weight-light;
list-style: none;
background-color: $chrome-color;
border: 1px solid #ccc;
border-radius: 4px;
@ -33,10 +31,12 @@
border-left-width: 0;
}
// Active states of segmented controller
// Tap state of segmented controller
&:active {
background-color: #eee;
}
// Selected state of segmented controller
&.active {
background-color: #ccc;
}
@ -48,7 +48,7 @@
// Primary
.segmented-control-primary {
border: 1px solid $primary-color;
border-color: $primary-color;
.control-item {
color: $primary-color;
@ -66,7 +66,7 @@
// Positive
.segmented-control-positive {
border: 1px solid $positive-color;
border-color: $positive-color;
.control-item {
color: $positive-color;
@ -84,7 +84,7 @@
// Negative
.segmented-control-negative {
border: 1px solid $negative-color;
border-color: $negative-color;
.control-item {
color: $negative-color;

10
sass/sliders.scss
Unescape View File

@ -3,8 +3,7 @@
// --------------------------------------------------
// Width of slider
.slider,
.slider > li {
.slider {
width: 100%;
}
@ -16,7 +15,6 @@
// Inner wrapper for slider (width of all slides together)
.slide-group {
position: relative;
padding: 0;
font-size: 0; // Remove spaces from inline-block children
white-space: nowrap;
@include transition(all 0 linear);
@ -27,11 +25,7 @@
vertical-align: top; // Ensure that li always aligns to top
width: 100%;
height: 100%;
// Required reset of font-size to same as standard body
> * {
font-size: 14px;
}
font-size: 14px;
}
}
}

80
sass/table-views.scss
Unescape View File

@ -3,57 +3,59 @@
// --------------------------------------------------
.table-view {
padding: 0;
margin: 0 0 15px 0;
padding-left: 0;
margin-top: 0;
margin-bottom: 15px;
list-style: none; // Remove usual bullet styles from table view
background-color: #fff;
border-top: $border-default;
border-bottom: $border-default;
}
// Pad each table view item and add dividers
.table-view-cell {
position: relative;
overflow: hidden;
padding: 11px 65px 11px 15px;
border-bottom: $border-default;
// Pad each table view item and add dividers
.table-view-cell {
// Remove the border from the last table view item
&:last-child {
border-bottom: 0;
}
// If it's 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)
> a:not(.btn) {
position: relative;
display: block;
overflow: hidden;
padding: 11px 65px 11px 15px;
border-bottom: $border-default;
// Remove the border from the last table view item
&:last-child {
border-bottom: 0;
}
// If it's 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)
> a:not(.btn) {
position: relative;
display: block;
overflow: hidden;
padding: inherit;
margin: -11px -65px -11px -15px; // Make the entire list item tappable.
color: inherit;
padding: inherit;
margin: -11px -65px -11px -15px; // Make the entire list item tappable.
color: inherit;
&:active {
background-color: #eee;
}
}
p {
margin: 0;
&:active {
background-color: #eee;
}
}
p {
margin-bottom: 0;
}
}
// Table view dividers
// --------------------------------------------------
.table-view-divider {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
margin-top: -1px; // Hides the border of the previous list item
margin-left: 0;
color: #999;
font-weight: $font-weight;
border-top: $border-default;
border-bottom: $border-default;
background-color: #fafafa;
}
// Table view dividers
// --------------------------------------------------
.table-view-divider {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 15px;
margin-top: -1px; // Hides the border of the previous list item
margin-left: 0;
color: #999;
font-weight: $font-weight;
border-top: $border-default;
border-bottom: $border-default;
background-color: #fafafa;
}

12
sass/theme-android.scss
Unescape View File

@ -259,6 +259,8 @@ a {
border-top: 0;
.tab-item {
color: #929292;
// Active states for the tab bar
&.active {
color: $primary-color;
@ -271,7 +273,8 @@ a {
}
.icon {
top: 3px;
padding: 0;
padding-top: 0;
padding-bottom: 0;
}
}
}
@ -288,9 +291,9 @@ a {
// Bars with buttons
.bar {
.btn {
margin-top: 7px;
padding-top: 9px;
padding-bottom: 9px;
margin-top: 4px;
padding-top: 10px;
padding-bottom: 10px;
}
.btn-link {
margin-top: 0;
@ -325,7 +328,6 @@ a {
padding-top: 13px;
padding-bottom: 13px;
}
// Handle carets in the titles
.title .icon {
padding: 0;

4
sass/theme-ios.scss
Unescape View File

@ -202,10 +202,12 @@ p {
// Tab bar
.bar-tab {
border-top: 1px solid $chrome-color;
border-top: 0;
@include box-shadow(0 0 -1px rgba(0,0,0,.85));
}
.tab-item {
color: #929292;
// Active states for the tab bar
&.active,
&:active {

24
sass/type.scss
Unescape View File

@ -3,33 +3,21 @@
// --------------------------------------------------
h1, h2, h3, h4, h5, h6 {
margin: 10px $bar-side-spacing;
margin-top: 0;
margin-bottom: 10px;
line-height: 1;
}
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; margin-top: 20px }
h6, .h6 { font-size: 12px; margin-top: 20px }
h5, .h5 { font-size: 14px; margin-top: 20px; }
h6, .h6 { font-size: 12px; margin-top: 20px; }
// Paragraphs
p {
margin: 10px $bar-side-spacing;
margin-top: 0;
margin-bottom: 10px;
font-size: 14px;
color: #777;
}
// Take on the container's side spacing
.container {
> h1,
> h2,
> h3,
> h4,
> h5,
> h6,
> p {
margin-left: 0;
margin-right: 0;
}
}

2
sass/variables.scss
Unescape View File

@ -48,7 +48,7 @@ $button-font-size: 12px;
// Transitions
// --------------------------------------------------
$timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
$timing-fuction: cubic-bezier(.1,.5,.1,1); // Inspired by @c2prods
// Borders

Write Preview
Loading…
Cancel
Save