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

organizing the ios theme

pull/253/head
connors 11 years ago
parent
6a7984de5a
commit
4e51015438
4 changed files with 416 additions and 423 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 258
      dist/ios-theme.css
  2. 225
      docs-assets/css/docs.css
  3. 8
      lib/sass/theme-android.scss
  4. 348
      lib/sass/theme-ios.scss

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

@ -16,130 +16,6 @@ a {
background-color: #efeff4; background-color: #efeff4;
} }
.bar {
border-bottom: 0;
background-color: rgba(247, 247, 247, 0.98);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
}
.bar.bar-header-secondary {
top: 44px;
}
.bar.bar-footer-secondary {
bottom: 44px;
}
.bar.bar-footer-secondary-tab {
bottom: 50px;
}
.bar-tab {
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.active .tab-label,
.tab-item.active .icon, .tab-item:active .tab-label,
.tab-item:active .icon {
color: #007aff;
}
.popover .bar-nav {
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.table-view .table-view-cell {
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
}
.table-view .table-view-cell:last-child {
background-image: none;
}
.table-view .table-view-divider {
border-top: 0;
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat;
}
.popover .table-view {
border-radius: 12px;
}
.card .table-view li:last-child {
background-image: none;
}
select,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
input[type="search"] {
height: 34px;
text-align: center;
background-color: rgba(0, 0, 0, 0.1);
border: 0;
border-radius: 6px;
}
input[type="search"]:focus {
text-align: left;
}
select,
textarea,
.input-group {
height: auto;
}
.input-group {
padding: 0;
}
.input-group input {
border: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
}
.input-group input:last-child {
background-image: none;
}
.input-row {
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
}
.input-row:last-child,
.input-row label + input {
background-image: none;
}
.btn { .btn {
border: 1px solid #929292; border: 1px solid #929292;
color: #929292; color: #929292;
@ -212,6 +88,44 @@ textarea,
background-color: transparent; background-color: transparent;
} }
.btn .badge {
background-color: rgba(0, 0, 0, 0.15);
}
.btn .badge.badge-inverted {
background-color: transparent;
}
.btn:active .badge {
color: #fff;
}
.bar {
border-bottom: 0;
background-color: rgba(247, 247, 247, 0.98);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.85);
}
.bar.bar-header-secondary {
top: 44px;
}
.bar.bar-footer-secondary {
bottom: 44px;
}
.bar.bar-footer-secondary-tab {
bottom: 50px;
}
.bar-tab {
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.active .tab-label,
.tab-item.active .icon, .tab-item:active .tab-label,
.tab-item:active .icon {
color: #007aff;
}
.bar-nav .btn-link { .bar-nav .btn-link {
color: #007aff; color: #007aff;
} }
@ -252,14 +166,92 @@ textarea,
background-color: transparent; background-color: transparent;
} }
.btn .badge { .card .table-view-cell:last-child {
background-color: rgba(0, 0, 0, 0.15); background-image: none;
} }
.btn .badge.badge-inverted {
background-color: transparent; .table-view .table-view-cell {
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
} }
.btn:active .badge { .table-view .table-view-cell:last-child {
color: #fff; background-image: none;
}
.table-view .table-view-divider {
border-top: 0;
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat;
}
select,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
input[type="search"] {
height: 34px;
text-align: center;
background-color: rgba(0, 0, 0, 0.1);
border: 0;
border-radius: 6px;
}
input[type="search"]:focus {
text-align: left;
}
select,
textarea,
.input-group {
height: auto;
}
.input-group {
padding: 0;
}
.input-group input {
border: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
}
.input-group input:last-child {
background-image: none;
}
.input-row {
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
}
.input-row:last-child,
.input-row label + input {
background-image: none;
} }
.segmented-control { .segmented-control {
@ -347,14 +339,20 @@ textarea,
.popover:before { .popover:before {
border-bottom: 15px solid rgba(247, 247, 247, 0.98); border-bottom: 15px solid rgba(247, 247, 247, 0.98);
} }
.popover .bar { .popover .bar {
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.popover .bar-nav { .popover .bar-nav {
border-bottom: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, 0.15);
} }
.popover .table-view {
border-radius: 12px;
}
.modal { .modal {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);

225
docs-assets/css/docs.css
Unescape View File

@ -798,114 +798,6 @@ hr {
.platform-ios .content { .platform-ios .content {
background-color: #efeff4; background-color: #efeff4;
} }
.platform-ios .bar {
border-bottom: 0;
background-color: rgba(247, 247, 247, 0.98);
-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 .bar.bar-header-secondary {
top: 44px;
}
.platform-ios .bar.bar-footer-secondary {
bottom: 44px;
}
.platform-ios .bar.bar-footer-secondary-tab {
bottom: 50px;
}
.platform-ios .bar-tab {
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.active .tab-label,
.platform-ios .tab-item.active .icon, .platform-ios .tab-item:active .tab-label,
.platform-ios .tab-item:active .icon {
color: #007aff;
}
.platform-ios .popover .bar-nav {
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.platform-ios .table-view .table-view-cell {
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
}
.platform-ios .table-view .table-view-cell:last-child {
background-image: none;
}
.platform-ios .table-view .table-view-divider {
border-top: 0;
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat;
}
.platform-ios .popover .table-view {
border-radius: 12px;
}
.platform-ios .card .table-view li:last-child {
background-image: none;
}
.platform-ios select,
.platform-ios textarea,
.platform-ios input[type="text"],
.platform-ios input[type="search"],
.platform-ios input[type="password"],
.platform-ios input[type="datetime"],
.platform-ios input[type="datetime-local"],
.platform-ios input[type="date"],
.platform-ios input[type="month"],
.platform-ios input[type="time"],
.platform-ios input[type="week"],
.platform-ios input[type="number"],
.platform-ios input[type="email"],
.platform-ios input[type="url"],
.platform-ios input[type="tel"],
.platform-ios input[type="color"],
.platform-ios .input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.platform-ios input[type="search"] {
height: 34px;
text-align: center;
background-color: rgba(0, 0, 0, 0.1);
border: 0;
border-radius: 6px;
}
.platform-ios input[type="search"]:focus {
text-align: left;
}
.platform-ios select,
.platform-ios textarea,
.platform-ios .input-group {
height: auto;
}
.platform-ios .input-group {
padding: 0;
}
.platform-ios .input-group input {
border: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
}
.platform-ios .input-group input:last-child {
background-image: none;
}
.platform-ios .input-row {
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
}
.platform-ios .input-row:last-child,
.platform-ios .input-row label + input {
background-image: none;
}
.platform-ios .btn { .platform-ios .btn {
border: 1px solid #929292; border: 1px solid #929292;
color: #929292; color: #929292;
@ -972,6 +864,40 @@ hr {
color: #0062cc; color: #0062cc;
background-color: transparent; background-color: transparent;
} }
.platform-ios .btn .badge {
background-color: rgba(0, 0, 0, 0.15);
}
.platform-ios .btn .badge.badge-inverted {
background-color: transparent;
}
.platform-ios .btn:active .badge {
color: #fff;
}
.platform-ios .bar {
border-bottom: 0;
background-color: rgba(247, 247, 247, 0.98);
-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 .bar.bar-header-secondary {
top: 44px;
}
.platform-ios .bar.bar-footer-secondary {
bottom: 44px;
}
.platform-ios .bar.bar-footer-secondary-tab {
bottom: 50px;
}
.platform-ios .bar-tab {
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.active .tab-label,
.platform-ios .tab-item.active .icon, .platform-ios .tab-item:active .tab-label,
.platform-ios .tab-item:active .icon {
color: #007aff;
}
.platform-ios .bar-nav .btn-link { .platform-ios .bar-nav .btn-link {
color: #007aff; color: #007aff;
} }
@ -1007,14 +933,82 @@ hr {
color: #dd524d; color: #dd524d;
background-color: transparent; background-color: transparent;
} }
.platform-ios .btn .badge { .platform-ios .card .table-view-cell:last-child {
background-color: rgba(0, 0, 0, 0.15); background-image: none;
} }
.platform-ios .btn .badge.badge-inverted { .platform-ios .table-view .table-view-cell {
background-color: transparent; border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
} }
.platform-ios .btn:active .badge { .platform-ios .table-view .table-view-cell:last-child {
color: #fff; background-image: none;
}
.platform-ios .table-view .table-view-divider {
border-top: 0;
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 0 100%, 0 0%;
background-repeat: no-repeat;
}
.platform-ios select,
.platform-ios textarea,
.platform-ios input[type="text"],
.platform-ios input[type="search"],
.platform-ios input[type="password"],
.platform-ios input[type="datetime"],
.platform-ios input[type="datetime-local"],
.platform-ios input[type="date"],
.platform-ios input[type="month"],
.platform-ios input[type="time"],
.platform-ios input[type="week"],
.platform-ios input[type="number"],
.platform-ios input[type="email"],
.platform-ios input[type="url"],
.platform-ios input[type="tel"],
.platform-ios input[type="color"],
.platform-ios .input-group {
height: 40px;
padding: 10px 15px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.platform-ios input[type="search"] {
height: 34px;
text-align: center;
background-color: rgba(0, 0, 0, 0.1);
border: 0;
border-radius: 6px;
}
.platform-ios input[type="search"]:focus {
text-align: left;
}
.platform-ios select,
.platform-ios textarea,
.platform-ios .input-group {
height: auto;
}
.platform-ios .input-group {
padding: 0;
}
.platform-ios .input-group input {
border: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
}
.platform-ios .input-group input:last-child {
background-image: none;
}
.platform-ios .input-row {
border-bottom: 0;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#c8c7cc' x='0' y='0' width='100%' height='0.5'/></svg>");
background-position: 15px 100%;
background-repeat: no-repeat;
}
.platform-ios .input-row:last-child,
.platform-ios .input-row label + input {
background-image: none;
} }
.platform-ios .segmented-control { .platform-ios .segmented-control {
color: #929292; color: #929292;
@ -1104,6 +1098,9 @@ hr {
.platform-ios .popover .bar-nav { .platform-ios .popover .bar-nav {
border-bottom: 1px solid rgba(0, 0, 0, 0.15); border-bottom: 1px solid rgba(0, 0, 0, 0.15);
} }
.platform-ios .popover .table-view {
border-radius: 12px;
}
.platform-ios .modal { .platform-ios .modal {
-webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1);

8
lib/sass/theme-android.scss
Unescape View File

@ -2,14 +2,14 @@
// //
// Android theme // Android theme
// The visual and interaction styles for Android // Visuals and interactions in the style of Android
// //
// -------------------------------------------------- // --------------------------------------------------
// Variables // Variables
// -------------------------------------------------- // --------------------------------------------------
// Type (Change to Roboto) // Type
$font-family-default: 'Roboto', sans-serif; $font-family-default: 'Roboto', sans-serif;
$font-size-default: 18px; $font-size-default: 18px;
$font-weight: 500; $font-weight: 500;
@ -28,8 +28,8 @@ $positive-color: #99cc00;
$negative-color: #ff4444; $negative-color: #ff4444;
// Bars // Bars
$bar-base-height: 50px; $bar-base-height: 50px;
$bar-tab-height: 50px; $bar-tab-height: 50px;
// Borders // Borders
$border-default: 1px solid #b1b1b1; $border-default: 1px solid #b1b1b1;

348
lib/sass/theme-ios.scss
Unescape View File

@ -2,7 +2,7 @@
// //
// iOS theme // iOS theme
// The visual and interaction styles from iOS // Visuals and interactions in the style of iOS
// //
// -------------------------------------------------- // --------------------------------------------------
@ -21,8 +21,8 @@ $positive-color: #4cd964;
$negative-color: #dd524d; $negative-color: #dd524d;
// Bars // Bars
$bar-base-height: 44px; $bar-base-height: 44px;
$bar-tab-height: 50px; $bar-tab-height: 50px;
// iOS style transitions // iOS style transitions
$timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods $timing-fuction: cubic-bezier(.1, .5, .1, 1); // Inspired by @c2prods
@ -39,152 +39,6 @@ a {
} }
// Bars
// --------------------------------------------------
.bar {
border-bottom: 0;
background-color: $chrome-color;
@include box-shadow(0 0 1px rgba(0,0,0,.85));
// Modifier class to dock any bar below .bar-nav
&.bar-header-secondary {
top: $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;
}
}
.bar-tab {
border-top: 0;
@include box-shadow(0 0 -1px rgba(0,0,0,.85));
}
.tab-item {
// Active states for the tab bar
&.active,
&:active {
.tab-label,
.icon {
color: $primary-color;
}
}
}
// `bar-nav` in popovers
.popover .bar-nav {
border-bottom: 1px solid rgba(0,0,0,.15);
}
// Table views
// --------------------------------------------------
.table-view {
.table-view-cell {
border-bottom: 0;
@include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
// Remove the border from the last table view item
&:last-child {
background-image: none;
}
}
// Table view dividers
// --------------------------------------------------
.table-view-divider {
border-top: 0;
border-bottom: 0;
@include hairline(double, #c8c7cc, 0); // Double (top and bottom) grey border with no offset.
}
}
.popover .table-view {
border-radius: 12px;
}
.card .table-view li:last-child {
background-image: none;
}
// Forms
// --------------------------------------------------
select,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
height: 40px;
padding: 10px 15px; border: 1px solid rgba(0, 0, 0, .2);
}
// Rounded search input
input[type="search"] {
height: 34px;
text-align: center;
background-color: rgba(0,0,0,.1);
border: 0;
border-radius: 6px;
}
input[type="search"]:focus {
text-align: left;
}
select,
textarea,
.input-group {
height: auto;
}
// Input groups (cluster multiple inputs together into a single group)
// -------------------------------------------------------------------
.input-group {
padding: 0;
}
.input-group input {
border: 0;
@include hairline(single, #c8c7cc, 15px);
}
// Remove bottom border on last input to avoid double bottom border
.input-group input:last-child {
background-image: none;
}
// Input groups with labels
// --------------------------------------------------
// To use labels with input groups, wrap a label and an input in an .input-row
.input-row {
border-bottom: 0;
@include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
}
// Remove bottom border on last input-row to avoid double bottom border
.input-row:last-child,
.input-row label + input {
background-image: none;
}
// Buttons // Buttons
// -------------------------------------------------- // --------------------------------------------------
@ -281,9 +135,65 @@ textarea,
} }
} }
// Buttons in nav bars // Buttons with badges
.btn {
.badge {
background-color: rgba(0,0,0,.15);
&.badge-inverted {
background-color: transparent;
}
}
// Active states
&:active .badge {
color: #fff;
}
}
// Bars
// -------------------------------------------------- // --------------------------------------------------
// Default bar
.bar {
border-bottom: 0;
background-color: $chrome-color;
@include box-shadow(0 0 1px rgba(0,0,0,.85));
// Modifier class to dock any bar below .bar-nav
&.bar-header-secondary {
top: $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;
}
}
// Tab bar
.bar-tab {
border-top: 0;
@include box-shadow(0 0 -1px rgba(0,0,0,.85));
}
.tab-item {
// Active states for the tab bar
&.active,
&:active {
.tab-label,
.icon {
color: $primary-color;
}
}
}
// Nav bars with buttons
.bar-nav { .bar-nav {
// Link buttons in nav bars // Link buttons in nav bars
.btn-link { .btn-link {
@ -297,7 +207,7 @@ textarea,
} }
//
// Badges // Badges
// -------------------------------------------------- // --------------------------------------------------
@ -310,8 +220,7 @@ textarea,
// Badge modifiers // Badge modifiers
// -------------------------------------------------- //
// Main badge // Main badge
.badge-primary { .badge-primary {
color: #fff; color: #fff;
@ -345,23 +254,108 @@ textarea,
} }
} }
// Badges in buttons
.btn {
.badge {
background-color: rgba(0,0,0,.15);
&.badge-inverted { // Cards
background-color: transparent; // --------------------------------------------------
// Cards with table-views
.card .table-view-cell:last-child {
background-image: none;
}
// Table views
// --------------------------------------------------
.table-view {
.table-view-cell {
border-bottom: 0;
@include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
// Remove the border from the last table view item
&:last-child {
background-image: none;
} }
} }
// Active states // Table view dividers
&:active .badge { .table-view-divider {
color: #fff; border-top: 0;
border-bottom: 0;
@include hairline(double, #c8c7cc, 0); // Double (top and bottom) grey border with no offset.
} }
} }
// Forms
// --------------------------------------------------
select,
textarea,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
.input-group {
height: 40px;
padding: 10px 15px; border: 1px solid rgba(0, 0, 0, .2);
}
// Rounded search input
input[type="search"] {
height: 34px;
text-align: center;
background-color: rgba(0,0,0,.1);
border: 0;
border-radius: 6px;
}
input[type="search"]:focus {
text-align: left;
}
select,
textarea,
.input-group {
height: auto;
}
// Input groups (cluster multiple inputs together into a single group)
// -------------------------------------------------------------------
.input-group {
padding: 0;
}
.input-group input {
border: 0;
@include hairline(single, #c8c7cc, 15px);
}
// Remove bottom border on last input to avoid double bottom border
.input-group input:last-child {
background-image: none;
}
// Input groups with labels
// --------------------------------------------------
// To use labels with input groups, wrap a label and an input in an .input-row
.input-row {
border-bottom: 0;
@include hairline(single, #c8c7cc, 15px); // Single grey border with a 15px offset.
}
// Remove bottom border on last input-row to avoid double bottom border
.input-row:last-child,
.input-row label + input {
background-image: none;
}
// //
// Segmented controllers // Segmented controllers
// -------------------------------------------------- // --------------------------------------------------
@ -389,8 +383,7 @@ textarea,
} }
// Other segmented controller types // Other segmented controller types
// -------------------------------------------------- //
// Primary // Primary
.segmented-control-primary { .segmented-control-primary {
border: 1px solid $primary-color; border: 1px solid $primary-color;
@ -461,7 +454,6 @@ textarea,
} }
//
// Popovers // Popovers
// -------------------------------------------------- // --------------------------------------------------
@ -472,16 +464,24 @@ textarea,
&:before { &:before {
border-bottom: 15px solid $chrome-color; border-bottom: 15px solid $chrome-color;
} }
.bar { }
@include box-shadow(none);
} // Popovers with `bar`
.bar-nav { .popover .bar {
border-bottom: 1px solid rgba(0,0,0,.15); @include box-shadow(none);
} }
// Popovers with `bar-nav`
.popover .bar-nav {
border-bottom: 1px solid rgba(0,0,0,.15);
}
// Popovers with `table-views1
.popover .table-view {
border-radius: 12px;
} }
//
// Modal styles // Modal styles
// -------------------------------------------------- // --------------------------------------------------
@ -494,7 +494,7 @@ textarea,
} }
} }
//
// Toggles styles // Toggles styles
// -------------------------------------------------- // --------------------------------------------------
.toggle { .toggle {
@ -536,11 +536,9 @@ textarea,
} }
//
// Push styles // Push styles
// -------------------------------------------------- // --------------------------------------------------
.content { .content {
// Fade animation // Fade animation
&.fade { &.fade {
@include transition(opacity .2s ease-in-out); @include transition(opacity .2s ease-in-out);

Write Preview
Loading…
Cancel
Save