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

Initial bars.css refactor.

pull/210/head
connors 11 years ago
parent
9e0008b8da
commit
4ba6651776
2 changed files with 46 additions and 147 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. 169
      lib/css/bars.css
  2. 24
      test/components/index.html

169
lib/css/bars.css
Unescape View File

@ -8,12 +8,14 @@
z-index: 10; z-index: 10;
height: 44px; height: 44px;
padding: 5px; padding: 5px;
background-color: rgba(248,248,248,.98);
border-bottom: 1px solid #adadad;
box-sizing: border-box; box-sizing: border-box;
} }
/* Modifier class to dock any bar below .bar-title */ /* Modifier class to dock any bar below .bar-title */
.bar-header-secondary { .bar-header-secondary {
top: 45px; top: 44px;
} }
/* Modifier class to dock any bar to bottom of viewport */ /* Modifier class to dock any bar to bottom of viewport */
@ -21,15 +23,6 @@
bottom: 0; bottom: 0;
} }
/* Generic bar for wrapping buttons, segmented controllers, etc. */
.bar-standard {
background-color: #f2f2f2;
background-image: -webkit-linear-gradient(top, #f2f2f2 0, #e5e5e5 100%);
background-image: linear-gradient(to bottom, #f2f2f2 0, #e5e5e5 100%);
border-bottom: 1px solid #aaa;
box-shadow: inset 0 1px 1px -1px #fff;
}
/* Flip border position to top for footer bars */ /* Flip border position to top for footer bars */
.bar-footer.bar-standard, .bar-footer.bar-standard,
.bar-footer-secondary.bar-standard { .bar-footer-secondary.bar-standard {
@ -45,11 +38,6 @@
top: 0; top: 0;
display: -webkit-box; display: -webkit-box;
display: box; display: box;
background-color: #1eb0e9;
background-image: -webkit-linear-gradient(top, #1eb0e9 0, #109adc 100%);
background-image: linear-gradient(to bottom, #1eb0e9 0, #109adc 100%);
border-bottom: 1px solid #0e5895;
box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .8);
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
box-orient: horizontal; box-orient: horizontal;
} }
@ -61,12 +49,11 @@
left: 0; left: 0;
display: block; display: block;
width: 100%; width: 100%;
font-size: 20px; font-size: 18px;
font-weight: bold; font-weight: 500;
line-height: 44px; line-height: 44px;
color: #fff; color: #000;
text-align: center; text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, .5);
white-space: nowrap; white-space: nowrap;
} }
@ -89,12 +76,8 @@
bottom: 0; bottom: 0;
height: 50px; height: 50px;
padding: 0; padding: 0;
background-color: #393939; border-top: 1px solid #adadad;
background-image: -webkit-linear-gradient(top, #393939 0, #2b2b2b 100%);
background-image: linear-gradient(to bottom, #393939 0, #2b2b2b 100%);
border-top: 1px solid #000;
border-bottom-width: 0; border-bottom-width: 0;
box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .6);
} }
/* Wrapper for individual tab */ /* Wrapper for individual tab */
@ -117,11 +100,6 @@
box-flex: 1; box-flex: 1;
} }
/* Active state for tab */
.tab-item.active {
box-shadow: inset 0 0 20px rgba(0, 0, 0, .5);
}
/* Icon for tab */ /* Icon for tab */
.tab-icon { .tab-icon {
display: block; display: block;
@ -132,10 +110,12 @@
/* Label for tab */ /* Label for tab */
.tab-label { .tab-label {
margin-top: 1px; margin-top: 1px;
font-size: 10px; font-size: 11px;
font-weight: bold; font-weight: 400;
color: #fff; color: #929292;
text-shadow: 0 1px rgba(0, 0, 0, .3); }
.tab-item.active .tab-label {
color: #007aff;
} }
/* Buttons in title bars /* Buttons in title bars
@ -145,15 +125,13 @@
.bar-title [class*="button"] { .bar-title [class*="button"] {
position: relative; position: relative;
z-index: 10; /* Places buttons over full width title */ z-index: 10; /* Places buttons over full width title */
font-size: 12px; font-size: 16px;
line-height: 23px; font-weight: 400;
color: #fff; line-height: 29px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); color: #007aff;
background-color: #1eb0e9; background: transparent; /* Will remove after the buttons refactor. */
background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%); border: 0;
background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%); box-shadow: none; /* Will remove after the buttons refactor. */
border: 1px solid #0e5895;
box-shadow: 0 1px rgba(255, 255, 255, .25);
-webkit-box-flex: 0; -webkit-box-flex: 0;
box-flex: 0; box-flex: 0;
} }
@ -171,81 +149,7 @@
/* Override standard button active states */ /* Override standard button active states */
.bar-title .button:active { .bar-title .button:active {
color: #fff; opacity: .8;
background-color: #0876b1;
}
/* Directional buttons in title bars (thanks to @GregorAdams for solution - http://cssnerd.com/2011/11/30/the-best-pure-css3-ios-style-arrow-back-button/)
-------------------------------------------------- */
/* Add relative positioning so :before content is positioned properly */
.bar-title .button-prev,
.bar-title .button-next {
position: relative;
}
/* Prev/next button base styles */
.bar-title .button-prev {
margin-left: 7px; /* Push over to make room for :before content */
border-left: 0;
border-bottom-left-radius: 10px 15px;
border-top-left-radius: 10px 15px;
}
.bar-title .button-next {
margin-right: 7px; /* Push over to make room for :before content */
border-right: 0;
border-top-right-radius: 10px 15px;
border-bottom-right-radius: 10px 15px;
}
/* Pointed part of directional button */
.bar-title .button-prev:before,
.bar-title .button-next:before {
position: absolute;
top: 2px;
width: 27px;
height: 27px;
border-radius: 30px 100px 2px 40px / 2px 40px 30px 100px;
content: '';
box-shadow: inset 1px 0 #0e5895, inset 0 1px #0e5895;
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent));
mask-image: gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent));
}
.bar-title .button-prev:before {
left: -5px;
background-image: -webkit-gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9));
background-image: gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9));
border-left: 1.5px solid rgba(255, 255, 255, .25);
-webkit-transform: rotate(-45deg) skew(-10deg, -10deg);
transform: rotate(-45deg) skew(-10deg, -10deg);
}
.bar-title .button-next:before {
right: -5px;
background-image: -webkit-gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6));
background-image: gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6));
border-top: 1.5px solid rgba(255, 255, 255, .25);
-webkit-transform: rotate(135deg) skew(-10deg, -10deg);
transform: rotate(135deg) skew(-10deg, -10deg);
}
/* Active states for the directional buttons */
.bar-title .button-prev:active,
.bar-title .button-next:active,
.bar-title .button-prev:active:before,
.bar-title .button-next:active:before {
color: #fff;
background-color: #0876b1;
background-image: none;
}
.bar-title .button-prev:active:before,
.bar-title .button-next:active:before {
content: '';
}
.bar-title .button-prev:active:before {
box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2);
}
.bar-title .button-next:active:before {
box-shadow: inset 0 -3px 3px rgba(0, 0, 0, .2);
} }
/* Block buttons in any bar /* Block buttons in any bar
@ -255,7 +159,7 @@
[class*="bar"] .button-block { [class*="bar"] .button-block {
padding: 7px 0; padding: 7px 0;
margin-bottom: 0; margin-bottom: 0;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px rgba(255, 255, 255, .8); box-shadow: none; /* Will remove after the buttons refactor. */
} }
/* Override standard padding changes for .button-blocks */ /* Override standard padding changes for .button-blocks */
@ -282,27 +186,17 @@
.bar-title .segmented-controller { .bar-title .segmented-controller {
line-height: 18px; line-height: 18px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); background-color: transparent;
background-color: #1eb0e9; background-image: none; /* Will remove after the segmented-controller refactor. */
background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%); border: 1px solid #007aff;
background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%);
border: 1px solid #0e5895;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px rgba(255, 255, 255, .25);
-webkit-box-flex: 1; -webkit-box-flex: 1;
box-flex: 1; box-flex: 1;
} }
/* Set color for tab border and highlight */ /* Set color for tab border and highlight */
.bar-title .segmented-controller li { .bar-title .segmented-controller li {
border-left: 1px solid #0e5895; border-left: 1px solid #007aff;
box-shadow: inset 1px 0 rgba(255, 255, 255, .25);
}
/* Remove inset shadow from first tab or one to the right of the active tab */
.bar-title .segmented-controller .active + li,
.bar-title .segmented-controller li:first-child {
box-shadow: none;
} }
/* Remove left-hand border from first tab */ /* Remove left-hand border from first tab */
@ -312,12 +206,17 @@
/* Depressed state (active) */ /* Depressed state (active) */
.bar-title .segmented-controller li.active { .bar-title .segmented-controller li.active {
background-color: #0082c4; background-color: #007aff;
box-shadow: inset 0 1px 6px rgba(0, 0, 0, .3); box-shadow: none; /* Will remove after the segmented-controller refactor. */
} }
/* Set color of links to white */ /* Set color of links to blue */
.bar-title .segmented-controller li > a { .bar-title .segmented-controller li > a {
color: #007aff;
text-shadow: none; /* Will remove after the segmented-controller refactor. */
}
/* Set color of links to blue */
.bar-title .segmented-controller li.active > a {
color: #fff; color: #fff;
} }

24
test/components/index.html
Unescape View File

@ -206,23 +206,23 @@
<nav class="bar-tab"> <nav class="bar-tab">
<ul class="tab-inner"> <ul class="tab-inner">
<li class="tab-item active"> <li class="tab-item active">
<img class="tab-icon" src="../docs/img/icon-home.png" alt=""> <img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div> <div class="tab-label">test</div>
</li> </li>
<li class="tab-item"> <li class="tab-item">
<img class="tab-icon" src="../docs/img/icon-profile.png" alt=""> <img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
<div class="tab-label">test</div> <div class="tab-label">test</div>
</li> </li>
<li class="tab-item"> <li class="tab-item">
<img class="tab-icon" src="../docs/img/icon-messages.png" alt=""> <img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div> <div class="tab-label">test</div>
</li> </li>
<li class="tab-item"> <li class="tab-item">
<img class="tab-icon" src="../docs/img/icon-hamburger.png" alt=""> <img class="tab-icon" src="../../docs/img/icon-hamburger.png" alt="">
<div class="tab-label">test</div> <div class="tab-label">test</div>
</li> </li>
<li class="tab-item"> <li class="tab-item">
<img class="tab-icon" src="../docs/img/icon-settings.png" alt=""> <img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div> <div class="tab-label">test</div>
</li> </li>
</ul> </ul>
@ -232,19 +232,19 @@
<nav class="bar-tab"> <nav class="bar-tab">
<ul class="tab-inner"> <ul class="tab-inner">
<li class="tab-item active"> <li class="tab-item active">
<img class="tab-icon" src="../docs/img/icon-home.png" alt=""> <img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div> <div class="tab-label">test</div>
</li> </li>
<li class="tab-item"> <li class="tab-item">
<img class="tab-icon" src="../docs/img/icon-profile.png" alt=""> <img class="tab-icon" src="../../docs/img/icon-profile.png" alt="">
<div class="tab-label">test</div> <div class="tab-label">test</div>
</li> </li>
<li class="tab-item"> <li class="tab-item">
<img class="tab-icon" src="../docs/img/icon-messages.png" alt=""> <img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div> <div class="tab-label">test</div>
</li> </li>
<li class="tab-item"> <li class="tab-item">
<img class="tab-icon" src="../docs/img/icon-settings.png" alt=""> <img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div> <div class="tab-label">test</div>
</li> </li>
</ul> </ul>
@ -254,15 +254,15 @@
<nav class="bar-tab"> <nav class="bar-tab">
<ul class="tab-inner"> <ul class="tab-inner">
<li class="tab-item active"> <li class="tab-item active">
<img class="tab-icon" src="../docs/img/icon-home.png" alt=""> <img class="tab-icon" src="../../docs/img/icon-home.png" alt="">
<div class="tab-label">test</div> <div class="tab-label">test</div>
</li> </li>
<li class="tab-item"> <li class="tab-item">
<img class="tab-icon" src="../docs/img/icon-messages.png" alt=""> <img class="tab-icon" src="../../docs/img/icon-messages.png" alt="">
<div class="tab-label">test</div> <div class="tab-label">test</div>
</li> </li>
<li class="tab-item"> <li class="tab-item">
<img class="tab-icon" src="../docs/img/icon-settings.png" alt=""> <img class="tab-icon" src="../../docs/img/icon-settings.png" alt="">
<div class="tab-label">test</div> <div class="tab-label">test</div>
</li> </li>
</ul> </ul>

Write Preview
Loading…
Cancel
Save