Created
April 30, 2014 02:18
-
-
Save gasolin/90870b1c9ac9df2aef4f to your computer and use it in GitHub Desktop.
https://github.com/mozilla-b2g/gaia/pull/18784 precompiled by provecss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ----------------------------------------------------------------- | |
HEADERS: layout | |
This is our base CSS file. | |
Should not be defined here form factor or skin | |
dependent styles. | |
----------------------------------------------------------------- */ | |
section[role="region"] > header:first-child { | |
position: relative; | |
z-index: 10; | |
padding: 0; | |
height: 5rem; | |
border: none; | |
} | |
section[role="region"] > header:first-child h1 { | |
font-size: 2.5rem; | |
line-height: 5rem; | |
text-align: left; | |
white-space: nowrap; | |
text-overflow: ellipsis; | |
display: block; | |
overflow: hidden; | |
margin: 0; | |
padding: 0 1rem 0 3rem; | |
height: 100%; | |
font-weight: lighter; | |
font-style: italic; | |
} | |
section[role="region"] > header:first-child h1 em { | |
font-weight: 400; | |
font-size: 1.5rem; | |
line-height: 1em; | |
font-style: normal; | |
} | |
/* Forms in header are only used in email app. | |
Incorrect UI style. | |
Sould be removed after landing bug 1001298 | |
*/ | |
section[role="region"] > header:first-child form { | |
display: block; | |
overflow: hidden; | |
position: relative; | |
padding: 1rem 1rem 0 0.5rem; | |
margin-left: 3.5rem; | |
} | |
section[role="region"] > header:first-child input[type="text"] { | |
width: 100%; | |
height: 3rem; | |
-moz-box-sizing: border-box; | |
padding: 0 0.8rem; | |
border: solid 0.1rem #9d4123; | |
border-top-color: #a6501e; | |
border-radius: 0; | |
background: #fff; | |
font-size: 1.5rem; | |
line-height: 3em; | |
box-shadow: none; | |
} | |
section[role="region"] > header:first-child form button[type="reset"] { | |
font-size: 0; | |
overflow: hidden; | |
position: absolute; | |
right: 1rem; | |
top: 1rem; | |
bottom: 0; | |
width: 3rem; | |
height: auto; | |
margin: 0; | |
display: none; | |
border: none; | |
background: url(images/icons/clear.png) no-repeat center center / 1.7rem auto; | |
} | |
section[role="region"] > header:first-child input[type="text"]:valid + button[type="reset"] { | |
display: block; | |
} | |
section[role="region"] > header:first-child menu { | |
height: 100%; | |
float: right; | |
padding: 0; | |
margin: 0; | |
} | |
/* ---------------------------------- | |
Buttons | |
---------------------------------- */ | |
section[role="region"] > header:first-child a, | |
section[role="region"] > header:first-child button { | |
-moz-box-sizing: border-box; | |
position: absolute; | |
overflow: visible; | |
float: left; | |
width: 5rem; | |
height: 5rem; | |
border: none; | |
background: none; | |
padding: 0; | |
overflow: hidden; | |
font-weight: 400; | |
font-size: 1.5rem; | |
line-height: 1.1em; | |
border-radius: 0; | |
text-decoration: none; | |
margin: 0 -5rem 0 0; | |
border-radius: 0; | |
} | |
section[role="region"] > header:first-child button:after, | |
section[role="region"] > header:first-child a:after { | |
content: ""; | |
position: absolute; | |
left: 0; | |
top: 0; | |
z-index: -1; | |
width: 2.6rem; | |
height: 5rem; | |
} | |
section[role="region"] > header:first-child menu a, | |
section[role="region"] > header:first-child menu button, | |
section[role="region"] > header:first-child[is] a, | |
section[role="region"] > header:first-child[is] button { | |
position: relative; | |
float: left; | |
width: auto; | |
min-width: 5rem; | |
padding: 0 1rem; | |
margin: 0; | |
line-height: 5rem; | |
text-align: center; | |
text-shadow: none; | |
z-index: 5; | |
font-style: italic; | |
} | |
section[role="region"] > header:first-child menu a:after, | |
section[role="region"] > header:first-child menu button:after, | |
section[role="region"] > header:first-child[is] a:after, | |
section[role="region"] > header:first-child[is] button:after { | |
width: 100%; | |
} | |
/* Pressed state */ | |
section[role="region"] > header:first-child a:focus { | |
outline: none; | |
} | |
section[role="region"] > header:first-child button::-moz-focus-inner { | |
outline: none; | |
border: none; | |
margin-top: -0.2rem; | |
/* To fix line-height bug (697451) */ | |
padding: 0; | |
} | |
/* Disabled state */ | |
section[role="region"] > header:first-child a[aria-disabled="true"], | |
section[role="region"] > header:first-child button[disabled] { | |
opacity: 0.3; | |
pointer-events: none; | |
} | |
/* Icon definitions */ | |
section[role="region"] > header:first-child .icon { | |
display: block; | |
width: 3rem; | |
height: 5rem; | |
background: transparent no-repeat -0.2rem center / 3rem auto; | |
font-size: 0; | |
} | |
section[role="region"] > header:first-child menu .icon, | |
[is="gaia-header"] [icon] { | |
background-position: center; | |
} | |
[is="gaia-header"] [icon] { | |
font-size: 0; | |
} | |
[is="gaia-header"] [icon]:before { | |
position: absolute; | |
content: ""; | |
width: 3rem; | |
height: 3rem; | |
background: transparent no-repeat center / 3rem auto; | |
top: 1rem; | |
left: 1rem; | |
} | |
section[role="region"] > header:first-child .icon.icon-add, | |
[is="gaia-header"] [icon="add"]:before { | |
background-image: url(images/icons/add.png); | |
} | |
section[role="region"] > header:first-child .icon.icon-compose, | |
[is="gaia-header"] [icon="compose"]:before { | |
background-image: url(images/icons/compose.png); | |
} | |
section[role="region"] > header:first-child .icon.icon-edit, | |
[is="gaia-header"] [icon="edit"]:before { | |
background-image: url(images/icons/edit.png); | |
} | |
section[role="region"] > header:first-child .icon.icon-send, | |
[is="gaia-header"] [icon="send"]:before { | |
background-image: url(images/icons/send.png); | |
} | |
section[role="region"] > header:first-child .icon.icon-close, | |
[is="gaia-header"] [icon="close"]:before { | |
background-image: url(images/icons/close.svg); | |
} | |
section[role="region"] > header:first-child .icon.icon-back, | |
[is="gaia-header"] [icon="back"]:before { | |
background-image: url(images/icons/back.svg); | |
} | |
section[role="region"] > header:first-child .icon.icon-menu, | |
[is="gaia-header"] [icon="menu"]:before { | |
background-image: url(images/icons/menu.svg); | |
} | |
section[role="region"] > header:first-child .icon.icon-user, | |
[is="gaia-header"] [icon="user"]:before { | |
background-image: url(images/icons/user.png); | |
} | |
section[role="region"] > header:first-child .icon.icon-up, | |
[is="gaia-header"] [icon="up"]:before { | |
background-image: url(images/icons/up.png); | |
} | |
section[role="region"] > header:first-child .icon.icon-down, | |
[is="gaia-header"] [icon="down"]:before { | |
background-image: url(images/icons/down.png); | |
} | |
section[role="region"] > header:first-child .icon.icon-options, | |
[is="gaia-header"] [icon="options"]:before { | |
background-image: url(images/icons/options.png); | |
} | |
/* ---------------------------------- | |
Subheader | |
---------------------------------- */ | |
section[role="region"] > header { | |
z-index: 0; | |
height: auto; | |
} | |
section[role="region"] header h2 { | |
margin: 0; | |
padding: 0.8rem 3rem; | |
font-weight: 400; | |
font-size: 1.5rem; | |
line-height: 1.8rem; | |
} | |
/* ---------------------------------- | |
right-to-left | |
---------------------------------- */ | |
html[dir="rtl"] section[role="region"] > header:first-child h1 { | |
text-align: right; | |
padding: 0 3rem 0 1rem; | |
} | |
html[dir="rtl"] section[role="region"] > header:first-child form { | |
padding: 1rem .5rem 0 1rem; | |
margin-right: 3.5rem; | |
margin-left: 0; | |
} | |
html[dir="rtl"] section[role="region"] > header:first-child form button[type="reset"] { | |
left: 1rem; | |
right: inherit; | |
} | |
html[dir="rtl"] section[role="region"] > header:first-child menu { | |
float: left; | |
} | |
html[dir="rtl"] section[role="region"] > header:first-child button, | |
html[dir="rtl"] section[role="region"] > header:first-child a { | |
float: right; | |
margin: 0 0 0 -5rem; | |
} | |
html[dir="rtl"] section[role="region"] > header:first-child menu a, | |
html[dir="rtl"] section[role="region"] > header:first-child menu button, | |
html[dir="rtl"] section[role="region"] > header:first-child[is] a, | |
html[dir="rtl"] section[role="region"] > header:first-child[is] button { | |
margin: 0; | |
} | |
html[dir="rtl"] section[role="region"] > header:first-child button:after, | |
html[dir="rtl"] section[role="region"] > header:first-child a:after { | |
right: 0; | |
} | |
html[dir="rtl"] section[role="region"] > header:first-child .icon { | |
background-position: 0.2rem center; | |
} | |
html[dir="rtl"] section[role="region"] > header:first-child menu .icon, | |
html[dir="rtl"] [is="gaia-header"] [icon] { | |
background-position: center; | |
} | |
html[dir="rtl"] section[role="region"] > header:first-child .icon.icon-back { | |
background-position: -0.2rem center; | |
transform: rotate(180deg); | |
} | |
/* ----------------------------------------------------------------- | |
HEADER SKIN: default | |
Default values if we are not overriding them using | |
class="skin-*" | |
----------------------------------------------------------------- */ | |
section[role="region"] > header:first-child { | |
color: #fff; | |
background-color: #f97c17; | |
} | |
section[role="region"] > header:first-child h1 { | |
color: #fff; | |
} | |
section[role="region"] > header:first-child a, | |
section[role="region"] > header:first-child button { | |
color: rgba(0,0,0,0.6); | |
} | |
section[role="region"] > header:first-child a:active:after, | |
section[role="region"] > header:first-child button:active:after, | |
section[role="region"] > header:first-child a:hover:after, | |
section[role="region"] > header:first-child button:hover:after { | |
background-color: rgba(0,0,0,0.07); | |
} | |
section[role="region"] header h2 { | |
color: #424242; | |
border-bottom: solid 0.1rem #e6e6e6; | |
} | |
/* ----------------------------------------------------------------- | |
HEADER SKIN: comms | |
.skin-comms will override default values | |
----------------------------------------------------------------- */ | |
.skin-comms section[role="region"] > header:first-child, | |
section[role="region"].skin-comms > header:first-child { | |
background-color: #33cccc; | |
} | |
.skin-comms section[role="region"] > header:first-child a, | |
.skin-comms section[role="region"] > header:first-child button, | |
section[role="region"].skin-comms > header:first-child a, | |
section[role="region"].skin-comms > header:first-child button { | |
color: rgba(0,0,0,0.5); | |
} | |
.skin-comms section[role="region"] > header:first-child a:active:after, | |
.skin-comms section[role="region"] > header:first-child button:active:after, | |
.skin-comms section[role="region"] > header:first-child a:hover:after, | |
.skin-comms section[role="region"] > header:first-child button:hover:after, | |
section[role="region"].skin-comms > header:first-child a:active:after, | |
section[role="region"].skin-comms > header:first-child button:active:after, | |
section[role="region"].skin-comms > header:first-child a:hover:after, | |
section[role="region"].skin-comms > header:first-child button:hover:after { | |
background-color: rgba(0,0,0,0.1); | |
} | |
/* ----------------------------------------------------------------- | |
HEADER SKIN: dark | |
.skin-dark will override default values | |
----------------------------------------------------------------- */ | |
section[role="region"].skin-dark > header:first-child, | |
.skin-dark > section[role="region"] > header:first-child { | |
background-color: #242d33; | |
} | |
.skin-dark section[role="region"] > header:first-child a, | |
.skin-dark section[role="region"] > header:first-child button, | |
section[role="region"].skin-dark > header:first-child a, | |
section[role="region"].skin-dark > header:first-child button { | |
color: #00aac5; | |
} | |
.skin-dark section[role="region"] > header:first-child a:active:after, | |
.skin-dark section[role="region"] > header:first-child button:active:after, | |
.skin-dark section[role="region"] > header:first-child a:hover:after, | |
.skin-dark section[role="region"] > header:first-child button:hover:after, | |
section[role="region"].skin-dark > header:first-child a:active:after, | |
section[role="region"].skin-dark > header:first-child button:active:after, | |
section[role="region"].skin-dark > header:first-child a:hover:after, | |
section[role="region"].skin-dark > header:first-child button:hover:after { | |
background-color: rgba(0,0,0,0.4); | |
} | |
section[role="region"].skin-dark header h2, | |
.skin-dark > section[role="region"] header h2 { | |
background-color: #2c353b; | |
color: #fff; | |
border: none; | |
} | |
/* ----------------------------------------------------------------- | |
HEADER SKIN: organic | |
.skin-organic will override default values | |
----------------------------------------------------------------- */ | |
section[role="region"].skin-organic > header:first-child, | |
.skin-organic section[role="region"] > header:first-child { | |
background-color: #f4f4f4; | |
} | |
section[role="region"].skin-organic > header:first-child h1, | |
.skin-organic section[role="region"] > header:first-child h1 { | |
color: #868692; | |
} | |
section[role="region"].skin-organic > header:first-child a, | |
.skin-organic section[role="region"] > header:first-child a, | |
section[role="region"].skin-organic > header:first-child button, | |
.skin-organic section[role="region"] > header:first-child button { | |
color: #00aac5; | |
} | |
section[role="region"].skin-organic > header:first-child .icon.icon-back, | |
.skin-organic section[role="region"] > header:first-child .icon.icon-back, | |
[is="gaia-header"][skin="organic"] [icon="back"]:before { | |
background-image: url(images/icons/organic/back.svg); | |
} | |
section[role="region"].skin-organic > header:first-child .icon.icon-close, | |
.skin-organic section[role="region"] > header:first-child .icon.icon-close, | |
[is="gaia-header"][skin="organic"] [icon="close"]:before { | |
background-image: url(images/icons/organic/close.svg); | |
} | |
section[role="region"].skin-organic > header:first-child .icon.icon-add, | |
.skin-organic section[role="region"] > header:first-child .icon.icon-add, | |
[is="gaia-header"][skin="organic"] [icon="add"]:before { | |
background-image: url(images/icons/organic/add.png); | |
} | |
section[role="region"].skin-organic > header:first-child .icon.icon-edit, | |
.skin-organic section[role="region"] > header:first-child .icon.icon-edit, | |
[is="gaia-header"][skin="organic"] [icon="edit"]:before { | |
background-image: url(images/icons/organic/edit.png); | |
} | |
section[role="region"].skin-organic header h2, | |
.skin-organic section[role="region"] header h2 { | |
background-color: #e7e7e7; | |
color: #4d4d4d; | |
border: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment