Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Bug 827610 - Modify banner style to have variable size

  • Loading branch information...
commit a76a373cff20bb07f9cffa650cdb352c57ddfd6b 1 parent c9119dc
Arthur Chen crh0716 authored
5 apps/clock/index.html
View
@@ -10,6 +10,7 @@
<!-- Shared styles -->
<link rel="stylesheet" type="text/css" href="shared/style/headers.css">
<link rel="stylesheet" type="text/css" href="shared/style/switches.css">
+ <link rel="stylesheet" type="text/css" href="shared/style/status.css">
<!-- Shared sounds -->
<link rel="resources" type="directory" href="shared/resources/media/alarms/">
@@ -62,11 +63,11 @@
<a id="alarm-new" href="#alarm" class="right button plus"></a>
<ul id="alarms" class="tableView"></ul>
</div>
- <div id="banner-countdown" class="banner">
+ <section id="banner-countdown" role="status">
<p> <!-- this will be replaced dynamically -->
The alarm is set for <strong>8 hours</strong> and <strong>45 minutes</strong> from now.
</p>
- </div>
+ </section>
</div>
<div id="stopwatch-view" class="active view" hidden="true">
53 apps/clock/style/clock.css
View
@@ -452,63 +452,22 @@ html, body {
#minutehandCentralPoint { /* dark-gray central point*/
stroke-width: 0rem;
}
-/* from building blocks, core.css - [role=dialog]*/
-.banner {
- position: absolute;
- background: orange;
- width: 100%;
- height: 8.13rem;
- bottom: 0;
- vertical-align: middle;
- text-align: center;
- background-attachment: scroll, scroll;
- background-clip: border-box, border-box;
- background-color: transparent;
- background-image: url("images/pattern.png"), url("images/gradient.png");
- background-origin: padding-box, padding-box;
- background-position: left top, left top;
- background-repeat: repeat, no-repeat;
- background-size: auto auto, 100% 100%;
- font-family: "MozTT",Sans-serif;
+
+/* banner*/
+#banner-countdown {
z-index: -1;
opacity: 0;
-moz-transition: all 600ms ease;
}
-.banner.visible {
+#banner-countdown.visible {
z-index: 1;
opacity: 1;
-moz-transition: all 600ms ease;
}
-.banner:before {
- content: "";
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- width: 1px;
-}
-.banner:after {
- content: "";
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- width: 1px;
-}
-.banner > p {
- display: inline-block;
- font-size: 1.56rem;
- line-height: 2.34rem;
- max-width: 75%;
- vertical-align: middle;
- white-space: normal;
- color: #FFFFFF;
- font-family: "MozTT",Sans-serif;
-}
-.banner > p > strong {
- color: #0995B0;
- font-weight: normal;
- text-transform: uppercase;
+#banner-countdown > p > strong {
white-space: nowrap;
}
+
/* localization */
body.hidden *[data-l10n-id] {
visibility: hidden;
2  apps/homescreen/everything.me/css/common.css
View
@@ -16,7 +16,7 @@
bottom: 75px;
}
-#evmeContainer * {
+#evmeContainer *:not([role]) {
margin: 0;
padding: 0;
}
54 apps/homescreen/everything.me/modules/Banner/Banner.css
View
@@ -1,57 +1,13 @@
-/* from building blocks, core.css - [role=dialog]*/
-#evmeContainer .banner {
- position: absolute;
- background: orange;
- width: 100%;
- height: 8.13rem;
- bottom: 0;
- vertical-align: middle;
- text-align: center;
- background-attachment: scroll, scroll;
- background-clip: border-box, border-box;
- background-color: transparent;
- background-image: url("/everything.me/images/shared/pattern.png"), url("/everything.me/images/shared/gradient.png");
- background-origin: padding-box, padding-box;
- background-position: left top, left top;
- background-repeat: repeat, no-repeat;
- background-size: auto auto, 100% 100%;
- font-family: "MozTT",Sans-serif;
- -moz-transition: all 600ms ease;
+#evmeBanner {
z-index: -1;
opacity: 0;
+ -moz-transition: all 600ms ease;
}
-#evmeContainer .banner.visible {
+#evmeBanner.visible {
z-index: 10001;
opacity: 1;
-moz-transition: all 600ms ease;
}
-#evmeContainer .banner:before {
- content: "";
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- width: 1px;
-}
-#evmeContainer .banner:after {
- content: "";
- display: inline-block;
- height: 100%;
- vertical-align: middle;
- width: 1px;
-}
-#evmeContainer .banner > p {
- display: inline-block;
- font-size: 1.56rem;
- line-height: 2.34rem;
- max-width: 75%;
- vertical-align: middle;
- white-space: normal;
- color: #FFFFFF;
- font-family: "MozTT",Sans-serif;
-}
-#evmeContainer .banner > p > strong {
- color: #0995B0;
- font-weight: normal;
- text-transform: uppercase;
+#evmeBanner > p > strong {
white-space: nowrap;
-}
+}
3  apps/homescreen/index.html
View
@@ -20,6 +20,7 @@
<link rel="stylesheet" type="text/css" href="shared/style/buttons.css">
<link rel="stylesheet" type="text/css" href="shared/style/headers.css">
<link rel="stylesheet" type="text/css" href="shared/style/confirm.css">
+ <link rel="stylesheet" type="text/css" href="shared/style/status.css">
<link rel="stylesheet" type="text/css" href="style/request.css">
<!-- Specific code -->
@@ -110,7 +111,7 @@ <h1 id="search-title"></h1>
</div>
<div id="shortcuts-loading"></div>
</div>
- <div id="evmeBanner" class="banner"></div>
+ <section id="evmeBanner" role="status"></section>
</div>
</div>
<div id="landing-page" data-current-page="true">
11 shared/style/status.css
View
@@ -13,19 +13,10 @@ section[role="status"] {
white-space: nowrap;
font-family: "MozTT", Sans-serif;
color: #fff;
- height: 8rem;
- padding: 0;
+ padding: 1rem 0 0.6rem;
text-align: center;
}
-section[role="status"]:after {
- content: "";
- display: inline-block;
- vertical-align: middle;
- width: 1px;
- height: 100%;
-}
-
section[role="status"] p {
display: inline-block;
vertical-align: middle;
Please sign in to comment.
Something went wrong with that request. Please try again.