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

general cleanup

pull/253/head
connors 11 years ago
parent
3e7c55d3ce
commit
e3aa933a8c
17 changed files with 147 additions and 107 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. 19
      dist/android-theme.css
  2. 30
      dist/ratchet.css
  3. 18
      docs/assets/css/docs.css
  4. 19
      docs/dist/android-theme.css
  5. 30
      docs/dist/ratchet.css
  6. 27
      docs/examples/app-ios-mail/inbox.html
  7. 1
      sass/badges.scss
  8. 29
      sass/bars.scss
  9. 3
      sass/base.scss
  10. 2
      sass/buttons.scss
  11. 5
      sass/cards.scss
  12. 3
      sass/forms.scss
  13. 6
      sass/mixins.scss
  14. 5
      sass/popovers.scss
  15. 1
      sass/segmented-controls.scss
  16. 36
      sass/theme-android.scss
  17. 8
      sass/type.scss

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

@ -45,12 +45,14 @@ a:active {
background-color: #cecece;
border: 0;
border-radius: 2px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
}
.btn:active, .btn.active {
color: #222222;
border: 0;
background-color: #999999;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
@ -90,6 +92,7 @@ a:active {
.btn-outlined {
border: 1px solid #999999;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-outlined.btn-primary {
@ -119,10 +122,12 @@ a:active {
.btn-outlined:active {
border: 1px solid #999999;
background-color: #999999;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}
@ -130,11 +135,13 @@ a:active {
color: #33b5e5;
background-color: transparent;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-link:active, .btn-link.active {
color: #1a9bcb;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
@ -157,6 +164,7 @@ a:active {
height: 50px;
background-color: #dddddd;
border-bottom: 1px solid #b1b1b1;
-webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
}
.bar.bar-header-secondary {
@ -177,6 +185,7 @@ a:active {
}
.bar-tab .tab-item.active {
color: #33b5e5;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5;
box-shadow: inset 0 -2px 0 #33b5e5;
}
.bar-tab .tab-item:active {
@ -319,6 +328,7 @@ input[type="color"],
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
@ -340,6 +350,7 @@ textarea,
.input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
-webkit-box-shadow: none;
box-shadow: none;
}
@ -361,6 +372,7 @@ textarea,
background-color: #cecece;
border: 0;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.segmented-control .control-item {
@ -368,6 +380,7 @@ textarea,
padding-bottom: 10px;
color: #222222;
border-left: 1px solid #999;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.segmented-control .control-item:first-child {
@ -420,6 +433,7 @@ textarea,
margin-left: 0;
border: 1px solid #9b9b9b;
border-radius: 0;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
@ -437,6 +451,10 @@ textarea,
transform: scale(1);
}
.backdrop {
background-color: none;
}
.popover .bar {
border-radius: 0;
}
@ -463,6 +481,7 @@ textarea,
border: 1px solid #b5b5b5;
border-radius: 2px;
background-color: #bebebe;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.toggle:before {

30
dist/ratchet.css vendored
Unescape View File

@ -350,7 +350,13 @@ p {
color: #777;
}
.container > h1, .container > h2, .container > h3, .container > h4, .container > h5, .container > h6, .container > p {
.container > h1,
.container > h2,
.container > h3,
.container > h4,
.container > h5,
.container > h6,
.container > p {
margin-left: 0;
margin-right: 0;
}
@ -362,7 +368,7 @@ p {
margin: 0;
font-size: 12px;
font-weight: 400;
line-height: 1.15;
line-height: 1;
color: #333;
text-align: center;
vertical-align: top;
@ -526,14 +532,7 @@ input[type="button"] {
text-align: center;
white-space: nowrap;
}
> a:not(.btn) {
display: block;
width: 100%;
height: 100%;
}
.title a {
.title .title a {
color: inherit;
}
@ -549,8 +548,8 @@ input[type="button"] {
}
.bar-tab .tab-item {
display: table-cell;
height: 50px;
width: 1%;
height: 50px;
vertical-align: middle;
color: #929292;
text-align: center;
@ -572,7 +571,7 @@ input[type="button"] {
.bar .btn {
position: relative;
z-index: 20;
padding: 6px 12px;
padding: 6px 12px 7px;
margin-top: 8px;
font-weight: 400;
}
@ -708,8 +707,8 @@ input[type="button"] {
border-radius: 0 0 6px 6px;
}
.card .table-view li:last-child {
border: 0;
.card .table-view-cell:last-child {
border-bottom: 0;
}
.table-view {
@ -1010,6 +1009,7 @@ select {
background-color: white;
border-radius: 6px;
opacity: 0;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
-webkit-transform: translate3d(0, -15px, 0);
-ms-transform: translate3d(0, -15px, 0);
@ -1047,7 +1047,7 @@ select {
bottom: 0;
left: 0;
z-index: 15;
background-color: none;
background-color: rgba(0, 0, 0, 0.3);
}
.popover .btn-block {

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

@ -1235,12 +1235,14 @@ hr {
background-color: #cecece;
border: 0;
border-radius: 2px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
}
.platform-android .btn:active, .platform-android .btn.active {
color: #222222;
border: 0;
background-color: #999999;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.platform-android .btn-primary {
@ -1276,6 +1278,7 @@ hr {
.platform-android .btn-outlined {
border: 1px solid #999999;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.platform-android .btn-outlined.btn-primary {
@ -1305,21 +1308,25 @@ hr {
.platform-android .btn-outlined:active {
border: 1px solid #999999;
background-color: #999999;
-webkit-box-shadow: none;
box-shadow: none;
}
.platform-android .btn-outlined.btn-primary:active, .platform-android .btn-outlined.btn-positive:active, .platform-android .btn-outlined.btn-negative:active {
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}
.platform-android .btn-link {
color: #33b5e5;
background-color: transparent;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.platform-android .btn-link:active, .platform-android .btn-link.active {
color: #1a9bcb;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.platform-android .btn-block {
@ -1339,6 +1346,7 @@ hr {
height: 50px;
background-color: #dddddd;
border-bottom: 1px solid #b1b1b1;
-webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
}
.platform-android .bar.bar-header-secondary {
@ -1358,6 +1366,7 @@ hr {
}
.platform-android .bar-tab .tab-item.active {
color: #33b5e5;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5;
box-shadow: inset 0 -2px 0 #33b5e5;
}
.platform-android .bar-tab .tab-item:active {
@ -1488,6 +1497,7 @@ hr {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.platform-android input[type="search"] {
@ -1505,6 +1515,7 @@ hr {
.platform-android .input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
-webkit-box-shadow: none;
box-shadow: none;
}
.platform-android .input-group input:last-child {
@ -1522,6 +1533,7 @@ hr {
background-color: #cecece;
border: 0;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.platform-android .segmented-control .control-item {
@ -1529,6 +1541,7 @@ hr {
padding-bottom: 10px;
color: #222222;
border-left: 1px solid #999;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.platform-android .segmented-control .control-item:first-child {
@ -1577,6 +1590,7 @@ hr {
margin-left: 0;
border: 1px solid #9b9b9b;
border-radius: 0;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
@ -1593,6 +1607,9 @@ hr {
-ms-transform: scale(1);
transform: scale(1);
}
.platform-android .backdrop {
background-color: none;
}
.platform-android .popover .bar {
border-radius: 0;
}
@ -1617,6 +1634,7 @@ hr {
border: 1px solid #b5b5b5;
border-radius: 2px;
background-color: #bebebe;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.platform-android .toggle:before {

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

@ -45,12 +45,14 @@ a:active {
background-color: #cecece;
border: 0;
border-radius: 2px;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.25);
}
.btn:active, .btn.active {
color: #222222;
border: 0;
background-color: #999999;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
@ -90,6 +92,7 @@ a:active {
.btn-outlined {
border: 1px solid #999999;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-outlined.btn-primary {
@ -119,10 +122,12 @@ a:active {
.btn-outlined:active {
border: 1px solid #999999;
background-color: #999999;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
color: #fff;
-webkit-box-shadow: none;
box-shadow: none;
}
@ -130,11 +135,13 @@ a:active {
color: #33b5e5;
background-color: transparent;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn-link:active, .btn-link.active {
color: #1a9bcb;
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
@ -157,6 +164,7 @@ a:active {
height: 50px;
background-color: #dddddd;
border-bottom: 1px solid #b1b1b1;
-webkit-box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0, 0, 0, 0.07);
}
.bar.bar-header-secondary {
@ -177,6 +185,7 @@ a:active {
}
.bar-tab .tab-item.active {
color: #33b5e5;
-webkit-box-shadow: inset 0 -2px 0 #33b5e5;
box-shadow: inset 0 -2px 0 #33b5e5;
}
.bar-tab .tab-item:active {
@ -319,6 +328,7 @@ input[type="color"],
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
@ -340,6 +350,7 @@ textarea,
.input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
-webkit-box-shadow: none;
box-shadow: none;
}
@ -361,6 +372,7 @@ textarea,
background-color: #cecece;
border: 0;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
.segmented-control .control-item {
@ -368,6 +380,7 @@ textarea,
padding-bottom: 10px;
color: #222222;
border-left: 1px solid #999;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.segmented-control .control-item:first-child {
@ -420,6 +433,7 @@ textarea,
margin-left: 0;
border: 1px solid #9b9b9b;
border-radius: 0;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
@ -437,6 +451,10 @@ textarea,
transform: scale(1);
}
.backdrop {
background-color: none;
}
.popover .bar {
border-radius: 0;
}
@ -463,6 +481,7 @@ textarea,
border: 1px solid #b5b5b5;
border-radius: 2px;
background-color: #bebebe;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.toggle:before {

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

@ -350,7 +350,13 @@ p {
color: #777;
}
.container > h1, .container > h2, .container > h3, .container > h4, .container > h5, .container > h6, .container > p {
.container > h1,
.container > h2,
.container > h3,
.container > h4,
.container > h5,
.container > h6,
.container > p {
margin-left: 0;
margin-right: 0;
}
@ -362,7 +368,7 @@ p {
margin: 0;
font-size: 12px;
font-weight: 400;
line-height: 1.15;
line-height: 1;
color: #333;
text-align: center;
vertical-align: top;
@ -526,14 +532,7 @@ input[type="button"] {
text-align: center;
white-space: nowrap;
}
> a:not(.btn) {
display: block;
width: 100%;
height: 100%;
}
.title a {
.title .title a {
color: inherit;
}
@ -549,8 +548,8 @@ input[type="button"] {
}
.bar-tab .tab-item {
display: table-cell;
height: 50px;
width: 1%;
height: 50px;
vertical-align: middle;
color: #929292;
text-align: center;
@ -572,7 +571,7 @@ input[type="button"] {
.bar .btn {
position: relative;
z-index: 20;
padding: 6px 12px;
padding: 6px 12px 7px;
margin-top: 8px;
font-weight: 400;
}
@ -708,8 +707,8 @@ input[type="button"] {
border-radius: 0 0 6px 6px;
}
.card .table-view li:last-child {
border: 0;
.card .table-view-cell:last-child {
border-bottom: 0;
}
.table-view {
@ -1010,6 +1009,7 @@ select {
background-color: white;
border-radius: 6px;
opacity: 0;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
-webkit-transform: translate3d(0, -15px, 0);
-ms-transform: translate3d(0, -15px, 0);
@ -1047,7 +1047,7 @@ select {
bottom: 0;
left: 0;
z-index: 15;
background-color: none;
background-color: rgba(0, 0, 0, 0.3);
}
.popover .btn-block {

27
docs/examples/app-ios-mail/inbox.html
Unescape View File

@ -19,11 +19,6 @@
<h1 class="title">All inboxes</h1>
</header>
<div class="bar bar-footer">
<a class="icon icon-compose pull-right" href="#composeModal"></a>
<small class="updated-text">Updated just now</small>
</div>
<div class="content">
<ul class="table-view">
@ -89,27 +84,5 @@
</li>
</ul>
</div><!-- /.content -->
<!-- Compose modal -->
<div id="composeModal" class="modal">
<header class="bar bar-nav">
<a class="btn btn-link pull-right" href="#composeModal">
<strong>Send</strong>
</a>
<a class="btn btn-link pull-left" href="#composeModal">
Cancel
</a>
<h1 class="title">New message</h1>
</header>
<div class="content">
<form class="input-group">
<input type="text" placeholder="To:">
<input type="email" placeholder="From:">
<input type="text" placeholder="Subject:">
<textarea rows="20"></textarea>
</form>
</div>
</div><!-- /.modal -->
</body>
</html>

1
sass/badges.scss
Unescape View File

@ -11,6 +11,7 @@
background-color: rgba(0,0,0,.15);
border-radius: 100px;
// Inverted badges have no background.
&.badge-inverted {
padding: 0 5px 0 0;
background-color: transparent;

29
sass/bars.scss
Unescape View File

@ -19,7 +19,7 @@
top: $bar-base-height;
}
// Modifier class to dock any bar to bottom of viewport
// Modifier class to dock any bar to the bottom of the viewport
&.bar-footer {
bottom: 0;
}
@ -45,6 +45,8 @@
}
// Centered text in the .bar-nav
//
// We position the absolutely to make sure the title is always centered
.title {
position: absolute;
display: block;
@ -60,24 +62,18 @@
color: #000;
text-align: center;
white-space: nowrap;
}
> a:not(.btn) {
display: block;
width: 100%;
height: 100%;
}
// Retain specified title color
.title a {
color: inherit;
}
}
// Tab bar
// --------------------------------------------------
// Bar docked to bottom used for primary app navigation
// Bar docked to bottom and used for primary app navigation
.bar-tab {
display: table;
bottom: 0;
@ -91,8 +87,8 @@
// Navigational tab
.tab-item {
display: table-cell;
height: $bar-tab-height;
width: 1%;
height: $bar-tab-height;
vertical-align: middle;
color: #929292;
text-align: center;
@ -110,7 +106,7 @@
height: 24px;
padding: 0;
// Make the label smaller if it's used with an icon
// Make the text smaller if it's used with an icon
~ .tab-label {
display: block;
font-size: 11px;
@ -126,10 +122,11 @@
.bar .btn {
position: relative;
z-index: 20; // Position the buttons on top of .title
padding: 6px 12px;
padding: 6px 12px 7px;
margin-top: 8px;
font-weight: $font-weight-light;
// Give buttons that are floated left and right side margin
&.pull-right {
margin-left: $bar-side-spacing;
}
@ -154,6 +151,7 @@
}
// Bars with block buttons
//
// Add proper padding
.bar .btn-block {
padding: 7px 0 6px;
@ -164,7 +162,7 @@
// Nav buttons (Only applicable within bars)
//
// Buttons inside bar that sit closer against the viewport.
// Buttons inside bars that sit closer against the viewport.
.bar .btn-nav {
&.pull-left {
margin-left: -5px;
@ -194,7 +192,7 @@
font-size: 24px;
}
// Handle the larger icons in btns.
// Vertical center the larger icons in btns.
.btn .icon {
top: 2px;
padding: 0;
@ -204,6 +202,7 @@
.title .icon {
padding: 0;
// Specific postioning of the caret icon within a title. Used with popover.js.
&.icon-caret {
top: 4px;
margin-left: -5px;
@ -225,7 +224,7 @@
// Bars with segmented controls
// --------------------------------------------------
// Remove standard segmented bottom margin
// Position the control correctly inside a bar.
.bar .segmented-control {
top: 8px;
margin: 0 auto;

3
sass/base.scss
Unescape View File

@ -5,6 +5,7 @@
// Use box sizing on all the things!
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
// We fix position the body and scroll `.content`.
body {
position: fixed;
top: 0;
@ -22,7 +23,7 @@ body {
a {
color: $primary-color;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // Removes the dark touch outlines on links
-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%);

2
sass/buttons.scss
Unescape View File

@ -9,7 +9,7 @@
margin: 0;
font-size: $button-font-size;
font-weight: $font-weight-light;
line-height: 1.15; // Center button text on the phone.
line-height: 1; // Center button text on the phone.
color: #333;
text-align: center;
vertical-align: top;

5
sass/cards.scss
Unescape View File

@ -36,6 +36,7 @@
border-radius: 0 0 $border-radius $border-radius;
}
}
.card .table-view li:last-child {
border: 0;
// Remove the bottom border from last table cell
.card .table-view-cell:last-child {
border-bottom: 0;
}

3
sass/forms.scss
Unescape View File

@ -74,7 +74,7 @@ select {
width: auto;
height: auto;
padding: 0;
border-left: 0;
border-left: 0; // Side borders are removed because the form is full width.
border-right: 0;
border-radius: 0;
}
@ -97,6 +97,7 @@ select {
border-bottom: 0;
}
// Input groups with labels
// --------------------------------------------------

6
sass/mixins.scss
Unescape View File

@ -6,12 +6,6 @@
// General
// --------------------------------------------------
// Box orient
@mixin box-orient($orient) {
-webkit-box-orient: $orient;
box-orient: $orient;
}
// Box shadow
@mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow;

5
sass/popovers.scss
Unescape View File

@ -13,7 +13,7 @@
background-color: $chrome-color;
border-radius: $border-radius;
opacity: 0;
box-shadow: 0 0 15px rgba(0, 0, 0, .1);
@include box-shadow(0 0 15px rgba(0, 0, 0, .1));
@include transform(translate3d(0, -15px, 0));
@include transition(all .25s linear);
@ -39,6 +39,7 @@
@include transform(translate3d(0, 0, 0));
}
// Give correct spacing to the content if there is a bar inside the popover.
.bar ~ .table-view {
padding-top: $bar-base-height;
}
@ -54,7 +55,7 @@
bottom: 0;
left: 0;
z-index: 15;
background-color: none;
background-color: rgba(0,0,0,0.3);
}
// Block level buttons in popovers

1
sass/segmented-controls.scss
Unescape View File

@ -100,6 +100,7 @@
}
}
// This is used to by the js to show and hide content tide to the segmented control.
.control-content {
display: none;

36
sass/theme-android.scss
Unescape View File

@ -84,7 +84,7 @@ a {
background-color: #cecece;
border: 0;
border-radius: $border-radius;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.25);
@include box-shadow(inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 1px rgba(0,0,0,.25));
// Active & filled button styles
&:active,
@ -92,7 +92,7 @@ a {
color: $text-color;
border: 0;
background-color: $default-color;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
@include box-shadow(inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2));
}
}
@ -146,7 +146,8 @@ a {
.btn-outlined {
border: 1px solid $default-color;
background-color: transparent;
box-shadow: none;
@include box-shadow(none);
&.btn-primary {
border: 1px solid $primary-color;
@ -179,13 +180,13 @@ a {
&:active {
border: 1px solid $default-color;
background-color: $default-color;
box-shadow: none;
@include box-shadow(none);
}
&.btn-primary:active,
&.btn-positive:active,
&.btn-negative:active {
color: #fff;
box-shadow: none;
@include box-shadow(none);
}
}
@ -194,13 +195,13 @@ a {
color: $primary-color;
background-color: transparent;
border: none;
box-shadow: none;
@include box-shadow(none);
&:active,
&.active {
color: darken($primary-color, 10%);
background-color: transparent;
box-shadow: none;
@include box-shadow(none);
}
}
@ -234,7 +235,7 @@ a {
height: $bar-base-height;
background-color: $chrome-color;
border-bottom: $border-default;
box-shadow: inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0,0,0,.07);
@include box-shadow(inset 0 -2px 0 #d2d2d2, 0 3px 3px rgba(0,0,0,.07));
// Modifier class to dock any bar below .bar-nav
&.bar-header-secondary {
@ -261,7 +262,7 @@ a {
// Active states for the tab bar
&.active {
color: $primary-color;
box-shadow: inset 0 -2px 0 $primary-color;
@include box-shadow(inset 0 -2px 0 $primary-color);
}
//Pressed state
&:active {
@ -457,7 +458,7 @@ input[type="color"],
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0,0,0,.1);
@include box-shadow(0 1px 1px rgba(0,0,0,.1));
}
input[type="search"] {
@ -479,7 +480,7 @@ textarea,
.input-group input {
border: 0;
border-bottom: 1px solid #d9d9d9;
box-shadow: none;
@include box-shadow(none);
}
// Remove bottom border on last input to avoid double bottom border
.input-group input:last-child {
@ -508,14 +509,14 @@ textarea,
background-color: #cecece;
border: 0;
border-radius: $border-radius;
box-shadow: 0 1px 1px rgba(0,0,0,.25);
@include box-shadow(0 1px 1px rgba(0,0,0,.25));
.control-item {
padding-top: 10px;
padding-bottom: 10px;
color: $text-color;
border-left: 1px solid #999;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2);
@include box-shadow(inset 0 -1px 0 rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.2));
// Remove border-left and shadow from first section
&:first-child {
@ -592,7 +593,7 @@ textarea,
margin-left: 0;
border: 1px solid #9b9b9b;
border-radius: 0;
box-shadow: 0 0 3px rgba(0,0,0,.2);
@include box-shadow(0 0 3px rgba(0,0,0,.2));
@include transform(scale(.75));
@include transition(-webkit-transform 0.1s ease-in-out, transform 0.2s ease-in-out, opacity 0.2s ease-in-out);
@ -604,6 +605,11 @@ textarea,
}
}
// Remove the popover's backdrop
.backdrop {
background-color: none;
}
// Popovers with bars
.popover {
.bar {
@ -641,7 +647,7 @@ textarea,
border: 1px solid #b5b5b5;
border-radius: 2px;
background-color: #bebebe;
box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.1);
@include box-shadow(inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.1));
}
&:before {
top: 1px;

8
sass/type.scss
Unescape View File

@ -22,7 +22,13 @@ p {
// Take on the container's side spacing
.container {
> h1, > h2, > h3, > h4, > h5, > h6, > p {
> h1,
> h2,
> h3,
> h4,
> h5,
> h6,
> p {
margin-left: 0;
margin-right: 0;
}

Write Preview
Loading…
Cancel
Save