vendor/assets/stylesheets/foundation/ui.css.scss in zurb-foundation-2.1.4.3 vs vendor/assets/stylesheets/foundation/ui.css.scss in zurb-foundation-2.1.5.0
- old
+ new
@@ -5,11 +5,11 @@
/* --------------------------------------------------
Table of Contents
-----------------------------------------------------
:: Buttons
:: Alerts
-:: Notices/Alerts
+:: Labels
:: Tabs
:: Pagination
:: Lists
:: Panels
:: Nav
@@ -121,15 +121,30 @@
.alert-box.error { background-color: #c00000; color: #fff; text-shadow: 0 -1px rgba(0,0,0,0.3); }
.alert-box a.close { color: #000; position: absolute; right: 4px; top: 0; font-size: 18px; opacity: 0.2; padding: 4px; }
.alert-box a.close:hover,.alert-box a.close:focus { opacity: 0.4; }
+/* --------------------------------------------------
+ Labels
+ -------------------------------------------------- */
+ .label { padding: 0px 4px 2px; font-size: 11px; font-weight: bold; text-align: center; text-decoration: none; line-height: 1; white-space: nowrap; display: inline; position: relative; bottom: 1px; color: #fff; background: #00a6fc; }
+ .label.radius { -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
+ .label.round { padding: 1px 7px 2px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
+
+ /* Colors ---------- */
+ .blue.label { background-color: #00a6fc; }
+ .red.label { background-color: #e91c21; }
+ .green.label { background-color: #7fae00; }
+ .white.label { background-color: #e9e9e9; color: #333; }
+ .black.label { background-color: #141414; }
+
+
/* --------------------------------------------------
Tabs
-------------------------------------------------- */
- dl.tabs { display: block; margin: 0 0 20px 0; padding: 0; height: 30px; border-bottom: solid 1px #ddd; }
+ dl.tabs { display: block; margin: 0 0 20px 0; padding: 0; height: 30px; border-bottom: solid 1px #ddd; }
dl.tabs dt { display: block; width: auto; height: 30px; padding: 0 9px 0 20px; line-height: 30px; float: left; color: #999; font-size: 11px; text-transform: uppercase; cursor: default; }
dl.tabs dt:first-child { padding: 0 9px 0 0; }
dl.tabs dd { display: block; width: auto; height: 30px; padding: 0; float: left; }
dl.tabs dd a { display: block; width: auto; height: 29px; padding: 0 9px; line-height: 30px; border: solid 1px #ddd; margin: 0 -1px 0 0; color: #555; background: #eee; }
dl.tabs dd a.active { background: #fff; border-width: 1px 1px 0 1px; height: 30px; }
@@ -197,28 +212,61 @@
Nav Bar with Dropdowns
-------------------------------------------------- */
.nav-bar { height: 45px; background: #fff; margin-top: 20px; border: 1px solid #ddd; }
.nav-bar>li { float: left; display: block; position: relative; padding: 0; margin: 0; border-right: 1px solid #ddd; line-height: 45px; }
- .nav-bar>li>a { position: relative; font-size: 14px; padding: 0 20px; display: block; text-decoration: none; font-size: 15px; font-size: 1.5rem; }
+ .nav-bar>li>a.main { position: relative; font-size: 14px; padding: 0 20px; display: block; text-decoration: none; font-size: 15px; font-size: 1.5rem; }
.nav-bar>li>input { margin: 0 16px; }
.nav-bar>li ul { margin-bottom: 0; }
.nav-bar>li li { line-height: 1.3; }
- .nav-bar>li.has-flyout>a { padding-right: 36px; }
- .nav-bar>li.has-flyout>a:after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #2a85e8; display: block; position: absolute; right: 18px; bottom: 20px; }
- .nav-bar>li:hover>a { color: #141414; z-index: 2; }
- .nav-bar>li:hover>a:after { border-top-color: #141414; }
-
+ .nav-bar>li.has-flyout>a.main { padding-right: 36px; }
+ .nav-bar>li.has-flyout>a.flyout-toggle { position: absolute; right: 0; top: 0; padding: 22px; z-index: 2; display: block; }
+ .nav-bar>li.has-flyout>a.flyout-toggle span { content: ""; width: 0; height: 0; border-left: 4px solid transparent;border-right: 4px solid transparent; border-top: 4px solid #2a85e8; display: block; }
.flyout { background: #fff; margin: 0; padding: 20px; border: 1px solid #ddd; position: absolute; top: 45px; left: -1px; width: 400px; z-index: 10; }
.flyout.small { width: 200px; }
.flyout.large { width: 600px; }
.flyout.right { left: auto; right: 0; }
.flyout p:last-child { margin-bottom: 0; }
.nav-bar>li .flyout { display: none; }
- .nav-bar>li:hover .flyout { display: block; }
+/* --------------------------------------------------
+ Sub Navs
+ http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na
+
+ -------------------------------------------------- */
+ dl.sub-nav {
+ display: block;
+ width: auto;
+ overflow: hidden;
+ margin: -4px 0 18px -9px;
+ padding-top: 4px;
+ }
+
+ dl.sub-nav dt, dl.sub-nav dd {
+ float: left;
+ display: inline;
+ margin-left: 9px;
+ margin-bottom: 4px;
+ }
+
+ dl.sub-nav dt {
+ color: #999;
+ font-weight: normal;
+ }
+
+ dl.sub-nav dd a {
+ text-decoration: none;
+ -webkit-border-radius: 12px;
+ -moz-border-radius: 12px;
+ }
+ dl.sub-nav dd.active a {
+ background: #00A6FC;
+ color: #fff;
+ padding: 3px 9px;
+ }
+
/* --------------------------------------------------
Video
Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
-------------------------------------------------- */
@@ -257,10 +305,83 @@
p.vevent span.summary { font-weight: bold; }
p.vevent abbr { cursor: default; text-decoration: none; font-weight: bold; border: none; padding: 0 1px; }
-
-
+
+/* --------------------------------------------------
+ Tooltips
+ -------------------------------------------------- */
+ .has-tip {
+ border-bottom: dotted 1px #ccc;
+ cursor: help;
+ font-weight: bold;
+ color: #333;
+ }
+ .has-tip:hover {
+ border-bottom: dotted 1px #0593dc;
+ color: #0192dd;
+ }
+ .tooltip {
+ display: block;
+ background: rgb(0,0,0);
+ background: rgba(0,0,0,0.85);
+ position: absolute;
+ color: #fff;
+ font-weight: bold;
+ font-size: 12px;
+ font-size: 1.2rem;
+ width: auto;
+ padding: 5px 9px 7px 8px;
+ z-index: 999;
+ }
+ .tooltip > .nub {
+ display: block;
+ width: 0;
+ height: 0;
+ border: solid 6px;
+ border-color: transparent transparent rgb(0,0,0) transparent;
+ border-color: transparent transparent rgba(0,0,0,0.85) transparent;
+ position: absolute;
+ top: -12px;
+ left: 10px;
+ }
+ .tooltip.top > .nub {
+ border-color: rgb(0,0,0) transparent transparent transparent;
+ border-color: rgba(0,0,0,0.85) transparent transparent transparent;
+ top: auto;
+ bottom: -12px;
+ }
+ .tooltip.left, .tooltip.right, .has-tip.left, .has-tip.right {
+ float: none !important;
+ }
+ .tooltip.left > .nub {
+ border-color: transparent transparent transparent rgb(0,0,0);
+ border-color: transparent transparent transparent rgba(0,0,0,0.85);
+ right: -12px;
+ left: auto;
+ }
+ .tooltip.right > .nub {
+ border-color: transparent rgb(0,0,0) transparent transparent;
+ border-color: transparent rgba(0,0,0,0.85) transparent transparent;
+ right: auto;
+ left: -12px;
+ }
+ .tooltip.radius {
+ -webkit-border-radius: 6px;
+ -moz-border-radius: 6px;
+ border-radius: 6px;
+ }
+ .has-tip.opened {
+ color: #0192DD !important;
+ border-bottom: dotted 1px #0593DC !important;
+ }
+ .tap-to-close {
+ display: block;
+ font-size: 10px;
+ font-size: 1.0rem;
+ color: #888;
+ font-weight: normal;
+ }