GitBlixt
teagles/wagon

new version of foundation fixing the issue #225

did committed Jan 07, 2015
commit 8f6e054e167048e31bf687545334bf2530071f9c
Showing 46 changed files with 6627 additions and 4922 deletions
generators/foundation5/public/stylesheets/foundation.css +4327 -3587
@@ @@ -1,5 +1,5 @@
meta.foundation-version {
- font-family: "/5.2.3/"; }
+ font-family: "/5.4.7/"; }
meta.foundation-mq-small {
font-family: "/only screen/";
@@ @@ -43,12 +43,12 @@ body {
color: #222222;
padding: 0;
margin: 0;
- font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-weight: normal;
font-style: normal;
- line-height: 1;
+ line-height: 1.5;
position: relative;
- cursor: default; }
+ cursor: auto; }
a:hover {
cursor: pointer; }
@@ @@ -81,7 +81,11 @@ img {
clear: both; }
.hide {
- display: none; }
+ display: none !important;
+ visibility: hidden; }
+
+ .invisible {
+ visibility: hidden; }
.antialiased {
-webkit-font-smoothing: antialiased;
@@ @@ -146,6 +150,12 @@ select {
width: 100%;
float: left; }
+ [class*="column"] + [class*="column"]:last-child {
+ float: right; }
+
+ [class*="column"] + [class*="column"].end {
+ float: left; }
+
@media only screen {
.small-push-0 {
position: relative;
@@ @@ -310,12 +320,6 @@ select {
.small-12 {
width: 100%; }
- [class*="column"] + [class*="column"]:last-child {
- float: right; }
-
- [class*="column"] + [class*="column"].end {
- float: left; }
-
.small-offset-0 {
margin-left: 0% !important; }
@@ @@ -363,13 +367,21 @@ select {
.columns.small-centered {
margin-left: auto;
margin-right: auto;
- float: none !important; }
+ float: none; }
.column.small-uncentered,
.columns.small-uncentered {
margin-left: 0;
margin-right: 0;
- float: left !important; }
+ float: left; }
+
+ .column.small-centered:last-child,
+ .columns.small-centered:last-child {
+ float: none; }
+
+ .column.small-uncentered:last-child,
+ .columns.small-uncentered:last-child {
+ float: left; }
.column.small-uncentered.opposite,
.columns.small-uncentered.opposite {
@@ @@ -538,12 +550,6 @@ select {
.medium-12 {
width: 100%; }
- [class*="column"] + [class*="column"]:last-child {
- float: right; }
-
- [class*="column"] + [class*="column"].end {
- float: left; }
-
.medium-offset-0 {
margin-left: 0% !important; }
@@ @@ -591,13 +597,21 @@ select {
.columns.medium-centered {
margin-left: auto;
margin-right: auto;
- float: none !important; }
+ float: none; }
.column.medium-uncentered,
.columns.medium-uncentered {
margin-left: 0;
margin-right: 0;
- float: left !important; }
+ float: left; }
+
+ .column.medium-centered:last-child,
+ .columns.medium-centered:last-child {
+ float: none; }
+
+ .column.medium-uncentered:last-child,
+ .columns.medium-uncentered:last-child {
+ float: left; }
.column.medium-uncentered.opposite,
.columns.medium-uncentered.opposite {
@@ @@ -886,12 +900,6 @@ select {
.large-12 {
width: 100%; }
- [class*="column"] + [class*="column"]:last-child {
- float: right; }
-
- [class*="column"] + [class*="column"].end {
- float: left; }
-
.large-offset-0 {
margin-left: 0% !important; }
@@ @@ -939,13 +947,21 @@ select {
.columns.large-centered {
margin-left: auto;
margin-right: auto;
- float: none !important; }
+ float: none; }
.column.large-uncentered,
.columns.large-uncentered {
margin-left: 0;
margin-right: 0;
- float: left !important; }
+ float: left; }
+
+ .column.large-centered:last-child,
+ .columns.large-centered:last-child {
+ float: none; }
+
+ .column.large-uncentered:last-child,
+ .columns.large-uncentered:last-child {
+ float: left; }
.column.large-uncentered.opposite,
.columns.large-uncentered.opposite {
@@ @@ -1070,595 +1086,390 @@ select {
position: relative;
right: 91.66667%;
left: auto; } }
- button, .button {
+ .accordion {
+ margin-bottom: 0; }
+ .accordion:before, .accordion:after {
+ content: " ";
+ display: table; }
+ .accordion:after {
+ clear: both; }
+ .accordion .accordion-navigation, .accordion dd {
+ display: block;
+ margin-bottom: 0 !important; }
+ .accordion .accordion-navigation.active > a, .accordion dd.active > a {
+ background: #e8e8e8; }
+ .accordion .accordion-navigation > a, .accordion dd > a {
+ background: #efefef;
+ color: #222222;
+ padding: 1rem;
+ display: block;
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ font-size: 1rem; }
+ .accordion .accordion-navigation > a:hover, .accordion dd > a:hover {
+ background: #e3e3e3; }
+ .accordion .accordion-navigation > .content, .accordion dd > .content {
+ display: none;
+ padding: 0.9375rem; }
+ .accordion .accordion-navigation > .content.active, .accordion dd > .content.active {
+ display: block;
+ background: white; }
+
+ .alert-box {
border-style: solid;
- border-width: 0px;
- cursor: pointer;
- font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+ border-width: 1px;
+ display: block;
font-weight: normal;
- line-height: normal;
- margin: 0 0 1.25rem;
+ margin-bottom: 1.25rem;
position: relative;
- text-decoration: none;
- text-align: center;
- -webkit-appearance: none;
- -webkit-border-radius: 0;
- display: inline-block;
- padding-top: 1rem;
- padding-right: 2rem;
- padding-bottom: 1.0625rem;
- padding-left: 2rem;
- font-size: 1rem;
+ padding: 0.875rem 1.5rem 0.875rem 0.875rem;
+ font-size: 0.8125rem;
+ transition: opacity 300ms ease-out;
background-color: #008cba;
- border-color: #007095;
- color: white;
- transition: background-color 300ms ease-out; }
- button:hover, button:focus, .button:hover, .button:focus {
- background-color: #007095; }
- button:hover, button:focus, .button:hover, .button:focus {
- color: white; }
- button.secondary, .button.secondary {
- background-color: #e7e7e7;
- border-color: #b9b9b9;
- color: #333333; }
- button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
- background-color: #b9b9b9; }
- button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
- color: #333333; }
- button.success, .button.success {
+ border-color: #0078a0;
+ color: white; }
+ .alert-box .close {
+ font-size: 1.375rem;
+ padding: 9px 6px 4px;
+ line-height: 0;
+ position: absolute;
+ top: 50%;
+ margin-top: -0.6875rem;
+ right: 0.25rem;
+ color: #333333;
+ opacity: 0.3;
+ background: inherit; }
+ .alert-box .close:hover, .alert-box .close:focus {
+ opacity: 0.5; }
+ .alert-box.radius {
+ border-radius: 3px; }
+ .alert-box.round {
+ border-radius: 1000px; }
+ .alert-box.success {
background-color: #43ac6a;
- border-color: #368a55;
+ border-color: #3a945b;
color: white; }
- button.success:hover, button.success:focus, .button.success:hover, .button.success:focus {
- background-color: #368a55; }
- button.success:hover, button.success:focus, .button.success:hover, .button.success:focus {
- color: white; }
- button.alert, .button.alert {
+ .alert-box.alert {
background-color: #f04124;
- border-color: #cf2a0e;
+ border-color: #de2d0f;
color: white; }
- button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus {
- background-color: #cf2a0e; }
- button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus {
- color: white; }
- button.large, .button.large {
- padding-top: 1.125rem;
- padding-right: 2.25rem;
- padding-bottom: 1.1875rem;
- padding-left: 2.25rem;
- font-size: 1.25rem; }
- button.small, .button.small {
- padding-top: 0.875rem;
- padding-right: 1.75rem;
- padding-bottom: 0.9375rem;
- padding-left: 1.75rem;
- font-size: 0.8125rem; }
- button.tiny, .button.tiny {
- padding-top: 0.625rem;
- padding-right: 1.25rem;
- padding-bottom: 0.6875rem;
- padding-left: 1.25rem;
- font-size: 0.6875rem; }
- button.expand, .button.expand {
- padding-right: 0;
- padding-left: 0;
- width: 100%; }
- button.left-align, .button.left-align {
- text-align: left;
- text-indent: 0.75rem; }
- button.right-align, .button.right-align {
- text-align: right;
- padding-right: 0.75rem; }
- button.radius, .button.radius {
- border-radius: 3px; }
- button.round, .button.round {
- border-radius: 1000px; }
- button.disabled, button[disabled], .button.disabled, .button[disabled] {
- background-color: #008cba;
- border-color: #007095;
- color: white;
- cursor: default;
- opacity: 0.7;
- box-shadow: none; }
- button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
- background-color: #007095; }
- button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
- color: white; }
- button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
- background-color: #008cba; }
- button.disabled.secondary, button[disabled].secondary, .button.disabled.secondary, .button[disabled].secondary {
- background-color: #e7e7e7;
- border-color: #b9b9b9;
- color: #333333;
- cursor: default;
- opacity: 0.7;
- box-shadow: none; }
- button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
- background-color: #b9b9b9; }
- button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
- color: #333333; }
- button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
- background-color: #e7e7e7; }
- button.disabled.success, button[disabled].success, .button.disabled.success, .button[disabled].success {
- background-color: #43ac6a;
- border-color: #368a55;
- color: white;
- cursor: default;
- opacity: 0.7;
- box-shadow: none; }
- button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus {
- background-color: #368a55; }
- button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus {
- color: white; }
- button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus {
- background-color: #43ac6a; }
- button.disabled.alert, button[disabled].alert, .button.disabled.alert, .button[disabled].alert {
- background-color: #f04124;
- border-color: #cf2a0e;
- color: white;
- cursor: default;
- opacity: 0.7;
- box-shadow: none; }
- button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
- background-color: #cf2a0e; }
- button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
- color: white; }
- button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
- background-color: #f04124; }
-
- @media only screen and (min-width: 40.063em) {
- button, .button {
- display: inline-block; } }
- meta.foundation-mq-topbar {
- font-family: "/only screen and (min-width:40.063em)/";
- width: 40.063em; }
-
- /* Wrapped around .top-bar to contain to grid width */
- .contain-to-grid {
- width: 100%;
- background: #333333; }
- .contain-to-grid .top-bar {
- margin-bottom: 0; }
+ .alert-box.secondary {
+ background-color: #e7e7e7;
+ border-color: #c7c7c7;
+ color: #4f4f4f; }
+ .alert-box.warning {
+ background-color: #f08a24;
+ border-color: #de770f;
+ color: white; }
+ .alert-box.info {
+ background-color: #a0d3e8;
+ border-color: #74bfdd;
+ color: #4f4f4f; }
+ .alert-box.alert-close {
+ opacity: 0; }
- .fixed {
- width: 100%;
- left: 0;
- position: fixed;
- top: 0;
- z-index: 99; }
- .fixed.expanded:not(.top-bar) {
- overflow-y: auto;
+ [class*="block-grid-"] {
+ display: block;
+ padding: 0;
+ margin: 0 -0.625rem; }
+ [class*="block-grid-"]:before, [class*="block-grid-"]:after {
+ content: " ";
+ display: table; }
+ [class*="block-grid-"]:after {
+ clear: both; }
+ [class*="block-grid-"] > li {
+ display: block;
height: auto;
+ float: left;
+ padding: 0 0.625rem 1.25rem; }
+
+ @media only screen {
+ .small-block-grid-1 > li {
width: 100%;
- max-height: 100%; }
- .fixed.expanded:not(.top-bar) .title-area {
- position: fixed;
- width: 100%;
- z-index: 99; }
- .fixed.expanded:not(.top-bar) .top-bar-section {
- z-index: 98;
- margin-top: 45px; }
+ list-style: none; }
+ .small-block-grid-1 > li:nth-of-type(1n) {
+ clear: none; }
+ .small-block-grid-1 > li:nth-of-type(1n+1) {
+ clear: both; }
- .top-bar {
- overflow: hidden;
- height: 45px;
- line-height: 45px;
- position: relative;
- background: #333333;
- margin-bottom: 0; }
- .top-bar ul {
- margin-bottom: 0;
+ .small-block-grid-2 > li {
+ width: 50%;
list-style: none; }
- .top-bar .row {
- max-width: none; }
- .top-bar form,
- .top-bar input {
- margin-bottom: 0; }
- .top-bar input {
- height: auto;
- padding-top: .35rem;
- padding-bottom: .35rem;
- font-size: 0.75rem; }
- .top-bar .button, .top-bar button {
- padding-top: .45rem;
- padding-bottom: .35rem;
- margin-bottom: 0;
- font-size: 0.75rem; }
- .top-bar .title-area {
- position: relative;
- margin: 0; }
- .top-bar .name {
- height: 45px;
- margin: 0;
- font-size: 16px; }
- .top-bar .name h1 {
- line-height: 45px;
- font-size: 1.0625rem;
- margin: 0; }
- .top-bar .name h1 a {
- font-weight: normal;
- color: white;
- width: 75%;
- display: block;
- padding: 0 15px; }
- .top-bar .toggle-topbar {
- position: absolute;
- right: 0;
- top: 0; }
- .top-bar .toggle-topbar a {
- color: white;
- text-transform: uppercase;
- font-size: 0.8125rem;
- font-weight: bold;
- position: relative;
- display: block;
- padding: 0 15px;
- height: 45px;
- line-height: 45px; }
- .top-bar .toggle-topbar.menu-icon {
- right: 15px;
- top: 50%;
- margin-top: -16px;
- padding-left: 40px; }
- .top-bar .toggle-topbar.menu-icon a {
- height: 34px;
- line-height: 33px;
- padding: 0;
- color: white;
- position: relative; }
- .top-bar .toggle-topbar.menu-icon a::after {
- right: 0; }
- .top-bar .toggle-topbar.menu-icon a::after span:after {
- content: '';
- position: absolute;
- display: block;
- height: 0;
- box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
- width: 16px; }
- .top-bar .toggle-topbar.menu-icon a::after span:hover:after {
- box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white; }
- .top-bar.expanded {
- height: auto;
- background: transparent; }
- .top-bar.expanded .title-area {
- background: #333333; }
- .top-bar.expanded .toggle-topbar a {
- color: #888888; }
- .top-bar.expanded .toggle-topbar a::after {
- box-shadow: 0 10px 0 1px #888888, 0 16px 0 1px #888888, 0 22px 0 1px #888888; }
+ .small-block-grid-2 > li:nth-of-type(1n) {
+ clear: none; }
+ .small-block-grid-2 > li:nth-of-type(2n+1) {
+ clear: both; }
- .top-bar-section {
- left: 0;
- position: relative;
- width: auto;
- transition: left 300ms ease-out; }
- .top-bar-section ul {
- padding: 0;
+ .small-block-grid-3 > li {
+ width: 33.33333%;
+ list-style: none; }
+ .small-block-grid-3 > li:nth-of-type(1n) {
+ clear: none; }
+ .small-block-grid-3 > li:nth-of-type(3n+1) {
+ clear: both; }
+
+ .small-block-grid-4 > li {
+ width: 25%;
+ list-style: none; }
+ .small-block-grid-4 > li:nth-of-type(1n) {
+ clear: none; }
+ .small-block-grid-4 > li:nth-of-type(4n+1) {
+ clear: both; }
+
+ .small-block-grid-5 > li {
+ width: 20%;
+ list-style: none; }
+ .small-block-grid-5 > li:nth-of-type(1n) {
+ clear: none; }
+ .small-block-grid-5 > li:nth-of-type(5n+1) {
+ clear: both; }
+
+ .small-block-grid-6 > li {
+ width: 16.66667%;
+ list-style: none; }
+ .small-block-grid-6 > li:nth-of-type(1n) {
+ clear: none; }
+ .small-block-grid-6 > li:nth-of-type(6n+1) {
+ clear: both; }
+
+ .small-block-grid-7 > li {
+ width: 14.28571%;
+ list-style: none; }
+ .small-block-grid-7 > li:nth-of-type(1n) {
+ clear: none; }
+ .small-block-grid-7 > li:nth-of-type(7n+1) {
+ clear: both; }
+
+ .small-block-grid-8 > li {
+ width: 12.5%;
+ list-style: none; }
+ .small-block-grid-8 > li:nth-of-type(1n) {
+ clear: none; }
+ .small-block-grid-8 > li:nth-of-type(8n+1) {
+ clear: both; }
+
+ .small-block-grid-9 > li {
+ width: 11.11111%;
+ list-style: none; }
+ .small-block-grid-9 > li:nth-of-type(1n) {
+ clear: none; }
+ .small-block-grid-9 > li:nth-of-type(9n+1) {
+ clear: both; }
+
+ .small-block-grid-10 > li {
+ width: 10%;
+ list-style: none; }
+ .small-block-grid-10 > li:nth-of-type(1n) {
+ clear: none; }
+ .small-block-grid-10 > li:nth-of-type(10n+1) {
+ clear: both; }
+
+ .small-block-grid-11 > li {
+ width: 9.09091%;
+ list-style: none; }
+ .small-block-grid-11 > li:nth-of-type(1n) {
+ clear: none; }
+ .small-block-grid-11 > li:nth-of-type(11n+1) {
+ clear: both; }
+
+ .small-block-grid-12 > li {
+ width: 8.33333%;
+ list-style: none; }
+ .small-block-grid-12 > li:nth-of-type(1n) {
+ clear: none; }
+ .small-block-grid-12 > li:nth-of-type(12n+1) {
+ clear: both; } }
+ @media only screen and (min-width: 40.063em) {
+ .medium-block-grid-1 > li {
width: 100%;
- height: auto;
- display: block;
- font-size: 16px;
- margin: 0; }
- .top-bar-section .divider,
- .top-bar-section [role="separator"] {
- border-top: solid 1px #1a1a1a;
- clear: both;
- height: 1px;
- width: 100%; }
- .top-bar-section ul li {
- background: #333333; }
- .top-bar-section ul li > a {
- display: block;
- width: 100%;
- color: white;
- padding: 12px 0 12px 0;
- padding-left: 15px;
- font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
- font-size: 0.8125rem;
- font-weight: normal;
- text-transform: none; }
- .top-bar-section ul li > a.button {
- font-size: 0.8125rem;
- padding-right: 15px;
- padding-left: 15px;
- background-color: #008cba;
- border-color: #007095;
- color: white; }
- .top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
- background-color: #007095; }
- .top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
- color: white; }
- .top-bar-section ul li > a.button.secondary {
- background-color: #e7e7e7;
- border-color: #b9b9b9;
- color: #333333; }
- .top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
- background-color: #b9b9b9; }
- .top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
- color: #333333; }
- .top-bar-section ul li > a.button.success {
- background-color: #43ac6a;
- border-color: #368a55;
- color: white; }
- .top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
- background-color: #368a55; }
- .top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
- color: white; }
- .top-bar-section ul li > a.button.alert {
- background-color: #f04124;
- border-color: #cf2a0e;
- color: white; }
- .top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
- background-color: #cf2a0e; }
- .top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
- color: white; }
- .top-bar-section ul li > button {
- font-size: 0.8125rem;
- padding-right: 15px;
- padding-left: 15px;
- background-color: #008cba;
- border-color: #007095;
- color: white; }
- .top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
- background-color: #007095; }
- .top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
- color: white; }
- .top-bar-section ul li > button.secondary {
- background-color: #e7e7e7;
- border-color: #b9b9b9;
- color: #333333; }
- .top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
- background-color: #b9b9b9; }
- .top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
- color: #333333; }
- .top-bar-section ul li > button.success {
- background-color: #43ac6a;
- border-color: #368a55;
- color: white; }
- .top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
- background-color: #368a55; }
- .top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
- color: white; }
- .top-bar-section ul li > button.alert {
- background-color: #f04124;
- border-color: #cf2a0e;
- color: white; }
- .top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
- background-color: #cf2a0e; }
- .top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
- color: white; }
- .top-bar-section ul li:hover:not(.has-form) > a {
- background: #272727;
- color: white; }
- .top-bar-section ul li.active > a {
- background: #008cba;
- color: white; }
- .top-bar-section ul li.active > a:hover {
- background: #0078a0;
- color: white; }
- .top-bar-section .has-form {
- padding: 15px; }
- .top-bar-section .has-dropdown {
- position: relative; }
- .top-bar-section .has-dropdown > a:after {
- content: "";
- display: block;
- width: 0;
- height: 0;
- border: inset 5px;
- border-color: transparent transparent transparent rgba(255, 255, 255, 0.4);
- border-left-style: solid;
- margin-right: 15px;
- margin-top: -4.5px;
- position: absolute;
- top: 50%;
- right: 0; }
- .top-bar-section .has-dropdown.moved {
- position: static; }
- .top-bar-section .has-dropdown.moved > .dropdown {
- display: block;
- position: static !important;
- height: auto;
- width: auto;
- overflow: visible;
- clip: auto;
- position: absolute !important;
- width: 100%; }
- .top-bar-section .has-dropdown.moved > a:after {
- display: none; }
- .top-bar-section .dropdown {
- padding: 0;
- position: absolute;
- left: 100%;
- top: 0;
- z-index: 99;
- display: block;
- position: absolute !important;
- height: 1px;
- width: 1px;
- overflow: hidden;
- clip: rect(1px, 1px, 1px, 1px); }
- .top-bar-section .dropdown li {
- width: 100%;
- height: auto; }
- .top-bar-section .dropdown li a {
- font-weight: normal;
- padding: 8px 15px; }
- .top-bar-section .dropdown li a.parent-link {
- font-weight: normal; }
- .top-bar-section .dropdown li.title h5 {
- margin-bottom: 0;
- margin-top: 0; }
- .top-bar-section .dropdown li.title h5 a {
- color: white;
- line-height: 22.5px;
- display: block; }
- .top-bar-section .dropdown li.has-form {
- padding: 8px 15px; }
- .top-bar-section .dropdown li .button, .top-bar-section .dropdown li button {
- top: auto; }
- .top-bar-section .dropdown label {
- padding: 8px 15px 2px;
- margin-bottom: 0;
- text-transform: uppercase;
- color: #777777;
- font-weight: bold;
- font-size: 0.625rem; }
+ list-style: none; }
+ .medium-block-grid-1 > li:nth-of-type(1n) {
+ clear: none; }
+ .medium-block-grid-1 > li:nth-of-type(1n+1) {
+ clear: both; }
- .js-generated {
- display: block; }
+ .medium-block-grid-2 > li {
+ width: 50%;
+ list-style: none; }
+ .medium-block-grid-2 > li:nth-of-type(1n) {
+ clear: none; }
+ .medium-block-grid-2 > li:nth-of-type(2n+1) {
+ clear: both; }
- @media only screen and (min-width: 40.063em) {
- .top-bar {
- background: #333333;
- overflow: visible; }
- .top-bar:before, .top-bar:after {
- content: " ";
- display: table; }
- .top-bar:after {
+ .medium-block-grid-3 > li {
+ width: 33.33333%;
+ list-style: none; }
+ .medium-block-grid-3 > li:nth-of-type(1n) {
+ clear: none; }
+ .medium-block-grid-3 > li:nth-of-type(3n+1) {
clear: both; }
- .top-bar .toggle-topbar {
- display: none; }
- .top-bar .title-area {
- float: left; }
- .top-bar .name h1 a {
- width: auto; }
- .top-bar input,
- .top-bar .button,
- .top-bar button {
- font-size: 0.875rem;
- position: relative;
- top: 7px; }
- .top-bar.expanded {
- background: #333333; }
- .contain-to-grid .top-bar {
- max-width: 62.5rem;
- margin: 0 auto;
- margin-bottom: 0; }
+ .medium-block-grid-4 > li {
+ width: 25%;
+ list-style: none; }
+ .medium-block-grid-4 > li:nth-of-type(1n) {
+ clear: none; }
+ .medium-block-grid-4 > li:nth-of-type(4n+1) {
+ clear: both; }
- .top-bar-section {
- transition: none 0 0;
- left: 0 !important; }
- .top-bar-section ul {
- width: auto;
- height: auto !important;
- display: inline; }
- .top-bar-section ul li {
- float: left; }
- .top-bar-section ul li .js-generated {
- display: none; }
- .top-bar-section li.hover > a:not(.button) {
- background: #272727;
- color: white; }
- .top-bar-section li:not(.has-form) a:not(.button) {
- padding: 0 15px;
- line-height: 45px;
- background: #333333; }
- .top-bar-section li:not(.has-form) a:not(.button):hover {
- background: #272727; }
- .top-bar-section li.active:not(.has-form) a:not(.button) {
- padding: 0 15px;
- line-height: 45px;
- color: white;
- background: #008cba; }
- .top-bar-section li.active:not(.has-form) a:not(.button):hover {
- background: #0078a0; }
- .top-bar-section .has-dropdown > a {
- padding-right: 35px !important; }
- .top-bar-section .has-dropdown > a:after {
- content: "";
- display: block;
- width: 0;
- height: 0;
- border: inset 5px;
- border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
- border-top-style: solid;
- margin-top: -2.5px;
- top: 22.5px; }
- .top-bar-section .has-dropdown.moved {
- position: relative; }
- .top-bar-section .has-dropdown.moved > .dropdown {
- display: block;
- position: absolute !important;
- height: 1px;
- width: 1px;
- overflow: hidden;
- clip: rect(1px, 1px, 1px, 1px); }
- .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
- display: block;
- position: static !important;
- height: auto;
- width: auto;
- overflow: visible;
- clip: auto;
- position: absolute !important; }
- .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
- border: none;
- content: "\00bb";
- top: 1rem;
- margin-top: -1px;
- right: 5px;
- line-height: 1.2; }
- .top-bar-section .dropdown {
- left: 0;
- top: auto;
- background: transparent;
- min-width: 100%; }
- .top-bar-section .dropdown li a {
- color: white;
- line-height: 45px;
- white-space: nowrap;
- padding: 12px 15px;
- background: #333333; }
- .top-bar-section .dropdown li:not(.has-form) a:not(.button) {
- color: white;
- background: #333333; }
- .top-bar-section .dropdown li:not(.has-form):hover > a:not(.button) {
- color: white;
- background: #272727; }
- .top-bar-section .dropdown li label {
- white-space: nowrap;
- background: #333333; }
- .top-bar-section .dropdown li .dropdown {
- left: 100%;
- top: 0; }
- .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
- border-bottom: none;
- border-top: none;
- border-right: solid 1px #4e4e4e;
- clear: none;
- height: 45px;
- width: 0; }
- .top-bar-section .has-form {
- background: #333333;
- padding: 0 15px;
- height: 45px; }
- .top-bar-section .right li .dropdown {
- left: auto;
- right: 0; }
- .top-bar-section .right li .dropdown li .dropdown {
- right: 100%; }
- .top-bar-section .left li .dropdown {
- right: auto;
- left: 0; }
- .top-bar-section .left li .dropdown li .dropdown {
- left: 100%; }
+ .medium-block-grid-5 > li {
+ width: 20%;
+ list-style: none; }
+ .medium-block-grid-5 > li:nth-of-type(1n) {
+ clear: none; }
+ .medium-block-grid-5 > li:nth-of-type(5n+1) {
+ clear: both; }
- .no-js .top-bar-section ul li:hover > a {
- background: #272727;
- color: white; }
- .no-js .top-bar-section ul li:active > a {
- background: #008cba;
- color: white; }
- .no-js .top-bar-section .has-dropdown:hover > .dropdown {
- display: block;
- position: static !important;
- height: auto;
- width: auto;
- overflow: visible;
- clip: auto;
- position: absolute !important; } }
+ .medium-block-grid-6 > li {
+ width: 16.66667%;
+ list-style: none; }
+ .medium-block-grid-6 > li:nth-of-type(1n) {
+ clear: none; }
+ .medium-block-grid-6 > li:nth-of-type(6n+1) {
+ clear: both; }
+
+ .medium-block-grid-7 > li {
+ width: 14.28571%;
+ list-style: none; }
+ .medium-block-grid-7 > li:nth-of-type(1n) {
+ clear: none; }
+ .medium-block-grid-7 > li:nth-of-type(7n+1) {
+ clear: both; }
+
+ .medium-block-grid-8 > li {
+ width: 12.5%;
+ list-style: none; }
+ .medium-block-grid-8 > li:nth-of-type(1n) {
+ clear: none; }
+ .medium-block-grid-8 > li:nth-of-type(8n+1) {
+ clear: both; }
+
+ .medium-block-grid-9 > li {
+ width: 11.11111%;
+ list-style: none; }
+ .medium-block-grid-9 > li:nth-of-type(1n) {
+ clear: none; }
+ .medium-block-grid-9 > li:nth-of-type(9n+1) {
+ clear: both; }
+
+ .medium-block-grid-10 > li {
+ width: 10%;
+ list-style: none; }
+ .medium-block-grid-10 > li:nth-of-type(1n) {
+ clear: none; }
+ .medium-block-grid-10 > li:nth-of-type(10n+1) {
+ clear: both; }
+
+ .medium-block-grid-11 > li {
+ width: 9.09091%;
+ list-style: none; }
+ .medium-block-grid-11 > li:nth-of-type(1n) {
+ clear: none; }
+ .medium-block-grid-11 > li:nth-of-type(11n+1) {
+ clear: both; }
+
+ .medium-block-grid-12 > li {
+ width: 8.33333%;
+ list-style: none; }
+ .medium-block-grid-12 > li:nth-of-type(1n) {
+ clear: none; }
+ .medium-block-grid-12 > li:nth-of-type(12n+1) {
+ clear: both; } }
+ @media only screen and (min-width: 64.063em) {
+ .large-block-grid-1 > li {
+ width: 100%;
+ list-style: none; }
+ .large-block-grid-1 > li:nth-of-type(1n) {
+ clear: none; }
+ .large-block-grid-1 > li:nth-of-type(1n+1) {
+ clear: both; }
+
+ .large-block-grid-2 > li {
+ width: 50%;
+ list-style: none; }
+ .large-block-grid-2 > li:nth-of-type(1n) {
+ clear: none; }
+ .large-block-grid-2 > li:nth-of-type(2n+1) {
+ clear: both; }
+
+ .large-block-grid-3 > li {
+ width: 33.33333%;
+ list-style: none; }
+ .large-block-grid-3 > li:nth-of-type(1n) {
+ clear: none; }
+ .large-block-grid-3 > li:nth-of-type(3n+1) {
+ clear: both; }
+
+ .large-block-grid-4 > li {
+ width: 25%;
+ list-style: none; }
+ .large-block-grid-4 > li:nth-of-type(1n) {
+ clear: none; }
+ .large-block-grid-4 > li:nth-of-type(4n+1) {
+ clear: both; }
+
+ .large-block-grid-5 > li {
+ width: 20%;
+ list-style: none; }
+ .large-block-grid-5 > li:nth-of-type(1n) {
+ clear: none; }
+ .large-block-grid-5 > li:nth-of-type(5n+1) {
+ clear: both; }
+
+ .large-block-grid-6 > li {
+ width: 16.66667%;
+ list-style: none; }
+ .large-block-grid-6 > li:nth-of-type(1n) {
+ clear: none; }
+ .large-block-grid-6 > li:nth-of-type(6n+1) {
+ clear: both; }
+
+ .large-block-grid-7 > li {
+ width: 14.28571%;
+ list-style: none; }
+ .large-block-grid-7 > li:nth-of-type(1n) {
+ clear: none; }
+ .large-block-grid-7 > li:nth-of-type(7n+1) {
+ clear: both; }
+
+ .large-block-grid-8 > li {
+ width: 12.5%;
+ list-style: none; }
+ .large-block-grid-8 > li:nth-of-type(1n) {
+ clear: none; }
+ .large-block-grid-8 > li:nth-of-type(8n+1) {
+ clear: both; }
+
+ .large-block-grid-9 > li {
+ width: 11.11111%;
+ list-style: none; }
+ .large-block-grid-9 > li:nth-of-type(1n) {
+ clear: none; }
+ .large-block-grid-9 > li:nth-of-type(9n+1) {
+ clear: both; }
+
+ .large-block-grid-10 > li {
+ width: 10%;
+ list-style: none; }
+ .large-block-grid-10 > li:nth-of-type(1n) {
+ clear: none; }
+ .large-block-grid-10 > li:nth-of-type(10n+1) {
+ clear: both; }
+
+ .large-block-grid-11 > li {
+ width: 9.09091%;
+ list-style: none; }
+ .large-block-grid-11 > li:nth-of-type(1n) {
+ clear: none; }
+ .large-block-grid-11 > li:nth-of-type(11n+1) {
+ clear: both; }
+
+ .large-block-grid-12 > li {
+ width: 8.33333%;
+ list-style: none; }
+ .large-block-grid-12 > li:nth-of-type(1n) {
+ clear: none; }
+ .large-block-grid-12 > li:nth-of-type(12n+1) {
+ clear: both; } }
.breadcrumbs {
display: block;
padding: 0.5625rem 0.875rem 0.5625rem;
@@ @@ -1708,73 +1519,195 @@ meta.foundation-mq-topbar {
content: " ";
margin: 0; }
- .alert-box {
+ /* Accessibility - hides the forward slash */
+ [aria-label="breadcrumbs"] [aria-hidden="true"]:after {
+ content: "/"; }
+
+ button, .button {
border-style: solid;
- border-width: 1px;
- display: block;
+ border-width: 0px;
+ cursor: pointer;
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-weight: normal;
- margin-bottom: 1.25rem;
+ line-height: normal;
+ margin: 0 0 1.25rem;
position: relative;
- padding: 0.875rem 1.5rem 0.875rem 0.875rem;
- font-size: 0.8125rem;
- transition: opacity 300ms ease-out;
+ text-decoration: none;
+ text-align: center;
+ -webkit-appearance: none;
+ -webkit-border-radius: 0;
+ display: inline-block;
+ padding-top: 1rem;
+ padding-right: 2rem;
+ padding-bottom: 1.0625rem;
+ padding-left: 2rem;
+ font-size: 1rem;
background-color: #008cba;
- border-color: #0078a0;
- color: white; }
- .alert-box .close {
- font-size: 1.375rem;
- padding: 9px 6px 4px;
- line-height: 0;
- position: absolute;
- top: 50%;
- margin-top: -0.6875rem;
- right: 0.25rem;
- color: #333333;
- opacity: 0.3; }
- .alert-box .close:hover, .alert-box .close:focus {
- opacity: 0.5; }
- .alert-box.radius {
- border-radius: 3px; }
- .alert-box.round {
- border-radius: 1000px; }
- .alert-box.success {
+ border-color: #007095;
+ color: white;
+ transition: background-color 300ms ease-out; }
+ button:hover, button:focus, .button:hover, .button:focus {
+ background-color: #007095; }
+ button:hover, button:focus, .button:hover, .button:focus {
+ color: white; }
+ button.secondary, .button.secondary {
+ background-color: #e7e7e7;
+ border-color: #b9b9b9;
+ color: #333333; }
+ button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
+ background-color: #b9b9b9; }
+ button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
+ color: #333333; }
+ button.success, .button.success {
background-color: #43ac6a;
- border-color: #3a945b;
+ border-color: #368a55;
color: white; }
- .alert-box.alert {
+ button.success:hover, button.success:focus, .button.success:hover, .button.success:focus {
+ background-color: #368a55; }
+ button.success:hover, button.success:focus, .button.success:hover, .button.success:focus {
+ color: white; }
+ button.alert, .button.alert {
background-color: #f04124;
- border-color: #de2d0f;
+ border-color: #cf2a0e;
color: white; }
- .alert-box.secondary {
- background-color: #e7e7e7;
- border-color: #c7c7c7;
- color: #4f4f4f; }
- .alert-box.warning {
+ button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus {
+ background-color: #cf2a0e; }
+ button.alert:hover, button.alert:focus, .button.alert:hover, .button.alert:focus {
+ color: white; }
+ button.warning, .button.warning {
background-color: #f08a24;
- border-color: #de770f;
+ border-color: #cf6e0e;
color: white; }
- .alert-box.info {
+ button.warning:hover, button.warning:focus, .button.warning:hover, .button.warning:focus {
+ background-color: #cf6e0e; }
+ button.warning:hover, button.warning:focus, .button.warning:hover, .button.warning:focus {
+ color: white; }
+ button.info, .button.info {
background-color: #a0d3e8;
- border-color: #74bfdd;
- color: #4f4f4f; }
- .alert-box.alert-close {
- opacity: 0; }
-
- .inline-list {
- margin: 0 auto 1.0625rem auto;
- margin-left: -1.375rem;
- margin-right: 0;
- padding: 0;
- list-style: none;
- overflow: hidden; }
- .inline-list > li {
- list-style: none;
- float: left;
- margin-left: 1.375rem;
- display: block; }
- .inline-list > li > * {
- display: block; }
+ border-color: #61b6d9;
+ color: #333333; }
+ button.info:hover, button.info:focus, .button.info:hover, .button.info:focus {
+ background-color: #61b6d9; }
+ button.info:hover, button.info:focus, .button.info:hover, .button.info:focus {
+ color: white; }
+ button.large, .button.large {
+ padding-top: 1.125rem;
+ padding-right: 2.25rem;
+ padding-bottom: 1.1875rem;
+ padding-left: 2.25rem;
+ font-size: 1.25rem; }
+ button.small, .button.small {
+ padding-top: 0.875rem;
+ padding-right: 1.75rem;
+ padding-bottom: 0.9375rem;
+ padding-left: 1.75rem;
+ font-size: 0.8125rem; }
+ button.tiny, .button.tiny {
+ padding-top: 0.625rem;
+ padding-right: 1.25rem;
+ padding-bottom: 0.6875rem;
+ padding-left: 1.25rem;
+ font-size: 0.6875rem; }
+ button.expand, .button.expand {
+ padding-right: 0;
+ padding-left: 0;
+ width: 100%; }
+ button.left-align, .button.left-align {
+ text-align: left;
+ text-indent: 0.75rem; }
+ button.right-align, .button.right-align {
+ text-align: right;
+ padding-right: 0.75rem; }
+ button.radius, .button.radius {
+ border-radius: 3px; }
+ button.round, .button.round {
+ border-radius: 1000px; }
+ button.disabled, button[disabled], .button.disabled, .button[disabled] {
+ background-color: #008cba;
+ border-color: #007095;
+ color: white;
+ cursor: default;
+ opacity: 0.7;
+ box-shadow: none; }
+ button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
+ background-color: #007095; }
+ button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
+ color: white; }
+ button.disabled:hover, button.disabled:focus, button[disabled]:hover, button[disabled]:focus, .button.disabled:hover, .button.disabled:focus, .button[disabled]:hover, .button[disabled]:focus {
+ background-color: #008cba; }
+ button.disabled.secondary, button[disabled].secondary, .button.disabled.secondary, .button[disabled].secondary {
+ background-color: #e7e7e7;
+ border-color: #b9b9b9;
+ color: #333333;
+ cursor: default;
+ opacity: 0.7;
+ box-shadow: none; }
+ button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
+ background-color: #b9b9b9; }
+ button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
+ color: #333333; }
+ button.disabled.secondary:hover, button.disabled.secondary:focus, button[disabled].secondary:hover, button[disabled].secondary:focus, .button.disabled.secondary:hover, .button.disabled.secondary:focus, .button[disabled].secondary:hover, .button[disabled].secondary:focus {
+ background-color: #e7e7e7; }
+ button.disabled.success, button[disabled].success, .button.disabled.success, .button[disabled].success {
+ background-color: #43ac6a;
+ border-color: #368a55;
+ color: white;
+ cursor: default;
+ opacity: 0.7;
+ box-shadow: none; }
+ button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus {
+ background-color: #368a55; }
+ button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus {
+ color: white; }
+ button.disabled.success:hover, button.disabled.success:focus, button[disabled].success:hover, button[disabled].success:focus, .button.disabled.success:hover, .button.disabled.success:focus, .button[disabled].success:hover, .button[disabled].success:focus {
+ background-color: #43ac6a; }
+ button.disabled.alert, button[disabled].alert, .button.disabled.alert, .button[disabled].alert {
+ background-color: #f04124;
+ border-color: #cf2a0e;
+ color: white;
+ cursor: default;
+ opacity: 0.7;
+ box-shadow: none; }
+ button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
+ background-color: #cf2a0e; }
+ button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
+ color: white; }
+ button.disabled.alert:hover, button.disabled.alert:focus, button[disabled].alert:hover, button[disabled].alert:focus, .button.disabled.alert:hover, .button.disabled.alert:focus, .button[disabled].alert:hover, .button[disabled].alert:focus {
+ background-color: #f04124; }
+ button.disabled.warning, button[disabled].warning, .button.disabled.warning, .button[disabled].warning {
+ background-color: #f08a24;
+ border-color: #cf6e0e;
+ color: white;
+ cursor: default;
+ opacity: 0.7;
+ box-shadow: none; }
+ button.disabled.warning:hover, button.disabled.warning:focus, button[disabled].warning:hover, button[disabled].warning:focus, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning:hover, .button[disabled].warning:focus {
+ background-color: #cf6e0e; }
+ button.disabled.warning:hover, button.disabled.warning:focus, button[disabled].warning:hover, button[disabled].warning:focus, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning:hover, .button[disabled].warning:focus {
+ color: white; }
+ button.disabled.warning:hover, button.disabled.warning:focus, button[disabled].warning:hover, button[disabled].warning:focus, .button.disabled.warning:hover, .button.disabled.warning:focus, .button[disabled].warning:hover, .button[disabled].warning:focus {
+ background-color: #f08a24; }
+ button.disabled.info, button[disabled].info, .button.disabled.info, .button[disabled].info {
+ background-color: #a0d3e8;
+ border-color: #61b6d9;
+ color: #333333;
+ cursor: default;
+ opacity: 0.7;
+ box-shadow: none; }
+ button.disabled.info:hover, button.disabled.info:focus, button[disabled].info:hover, button[disabled].info:focus, .button.disabled.info:hover, .button.disabled.info:focus, .button[disabled].info:hover, .button[disabled].info:focus {
+ background-color: #61b6d9; }
+ button.disabled.info:hover, button.disabled.info:focus, button[disabled].info:hover, button[disabled].info:focus, .button.disabled.info:hover, .button.disabled.info:focus, .button[disabled].info:hover, .button[disabled].info:focus {
+ color: white; }
+ button.disabled.info:hover, button.disabled.info:focus, button[disabled].info:hover, button[disabled].info:focus, .button.disabled.info:hover, .button.disabled.info:focus, .button[disabled].info:hover, .button[disabled].info:focus {
+ background-color: #a0d3e8; }
+
+ button::-moz-focus-inner {
+ border: 0;
+ padding: 0; }
+ @media only screen and (min-width: 40.063em) {
+ button, .button {
+ display: inline-block; } }
.button-group {
list-style: none;
margin: 0;
@@ @@ -1785,38 +1718,266 @@ meta.foundation-mq-topbar {
.button-group:after {
clear: both; }
.button-group > li {
- margin: 0;
- float: left; }
+ margin: 0 -2px;
+ display: inline-block; }
.button-group > li > button, .button-group > li .button {
border-left: 1px solid;
border-color: rgba(255, 255, 255, 0.5); }
.button-group > li:first-child button, .button-group > li:first-child .button {
border-left: 0; }
- .button-group > li:first-child {
- margin-left: 0; }
- .button-group.radius > * > button, .button-group.radius > * .button {
- border-left: 1px solid;
- border-color: rgba(255, 255, 255, 0.5); }
- .button-group.radius > *:first-child button, .button-group.radius > *:first-child .button {
- border-left: 0; }
- .button-group.radius > *:first-child, .button-group.radius > *:first-child > a, .button-group.radius > *:first-child > button, .button-group.radius > *:first-child > .button {
- border-bottom-left-radius: 3px;
- border-top-left-radius: 3px; }
- .button-group.radius > *:last-child, .button-group.radius > *:last-child > a, .button-group.radius > *:last-child > button, .button-group.radius > *:last-child > .button {
- border-bottom-right-radius: 3px;
- border-top-right-radius: 3px; }
- .button-group.round > * > button, .button-group.round > * .button {
- border-left: 1px solid;
- border-color: rgba(255, 255, 255, 0.5); }
- .button-group.round > *:first-child button, .button-group.round > *:first-child .button {
- border-left: 0; }
- .button-group.round > *:first-child, .button-group.round > *:first-child > a, .button-group.round > *:first-child > button, .button-group.round > *:first-child > .button {
- border-bottom-left-radius: 1000px;
- border-top-left-radius: 1000px; }
- .button-group.round > *:last-child, .button-group.round > *:last-child > a, .button-group.round > *:last-child > button, .button-group.round > *:last-child > .button {
- border-bottom-right-radius: 1000px;
- border-top-right-radius: 1000px; }
+ .button-group.stack > li {
+ margin: 0 -2px;
+ display: inline-block;
+ display: block;
+ margin: 0;
+ float: none; }
+ .button-group.stack > li > button, .button-group.stack > li .button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5); }
+ .button-group.stack > li:first-child button, .button-group.stack > li:first-child .button {
+ border-left: 0; }
+ .button-group.stack > li > button, .button-group.stack > li .button {
+ border-top: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5);
+ border-left-width: 0px;
+ margin: 0;
+ display: block; }
+ .button-group.stack > li:first-child button, .button-group.stack > li:first-child .button {
+ border-top: 0; }
+ .button-group.stack-for-small > li {
+ margin: 0 -2px;
+ display: inline-block; }
+ .button-group.stack-for-small > li > button, .button-group.stack-for-small > li .button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5); }
+ .button-group.stack-for-small > li:first-child button, .button-group.stack-for-small > li:first-child .button {
+ border-left: 0; }
+ @media only screen and (max-width: 40em) {
+ .button-group.stack-for-small > li {
+ margin: 0 -2px;
+ display: inline-block;
+ display: block;
+ margin: 0; }
+ .button-group.stack-for-small > li > button, .button-group.stack-for-small > li .button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5); }
+ .button-group.stack-for-small > li:first-child button, .button-group.stack-for-small > li:first-child .button {
+ border-left: 0; }
+ .button-group.stack-for-small > li > button, .button-group.stack-for-small > li .button {
+ border-top: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5);
+ border-left-width: 0px;
+ margin: 0;
+ display: block; }
+ .button-group.stack-for-small > li:first-child button, .button-group.stack-for-small > li:first-child .button {
+ border-top: 0; } }
+ .button-group.radius > * {
+ margin: 0 -2px;
+ display: inline-block; }
+ .button-group.radius > * > button, .button-group.radius > * .button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5); }
+ .button-group.radius > *:first-child button, .button-group.radius > *:first-child .button {
+ border-left: 0; }
+ .button-group.radius > *, .button-group.radius > * > a, .button-group.radius > * > button, .button-group.radius > * > .button {
+ border-radius: 0; }
+ .button-group.radius > *:first-child, .button-group.radius > *:first-child > a, .button-group.radius > *:first-child > button, .button-group.radius > *:first-child > .button {
+ -webkit-border-bottom-left-radius: 3px;
+ -webkit-border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ border-top-left-radius: 3px; }
+ .button-group.radius > *:last-child, .button-group.radius > *:last-child > a, .button-group.radius > *:last-child > button, .button-group.radius > *:last-child > .button {
+ -webkit-border-bottom-right-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px; }
+ .button-group.radius.stack > * {
+ margin: 0 -2px;
+ display: inline-block;
+ display: block;
+ margin: 0; }
+ .button-group.radius.stack > * > button, .button-group.radius.stack > * .button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5); }
+ .button-group.radius.stack > *:first-child button, .button-group.radius.stack > *:first-child .button {
+ border-left: 0; }
+ .button-group.radius.stack > * > button, .button-group.radius.stack > * .button {
+ border-top: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5);
+ border-left-width: 0px;
+ margin: 0;
+ display: block; }
+ .button-group.radius.stack > *:first-child button, .button-group.radius.stack > *:first-child .button {
+ border-top: 0; }
+ .button-group.radius.stack > *, .button-group.radius.stack > * > a, .button-group.radius.stack > * > button, .button-group.radius.stack > * > .button {
+ border-radius: 0; }
+ .button-group.radius.stack > *:first-child, .button-group.radius.stack > *:first-child > a, .button-group.radius.stack > *:first-child > button, .button-group.radius.stack > *:first-child > .button {
+ -webkit-top-left-radius: 3px;
+ -webkit-top-right-radius: 3px;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px; }
+ .button-group.radius.stack > *:last-child, .button-group.radius.stack > *:last-child > a, .button-group.radius.stack > *:last-child > button, .button-group.radius.stack > *:last-child > .button {
+ -webkit-bottom-left-radius: 3px;
+ -webkit-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px; }
+ @media only screen and (min-width: 40.063em) {
+ .button-group.radius.stack-for-small > * {
+ margin: 0 -2px;
+ display: inline-block; }
+ .button-group.radius.stack-for-small > * > button, .button-group.radius.stack-for-small > * .button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5); }
+ .button-group.radius.stack-for-small > *:first-child button, .button-group.radius.stack-for-small > *:first-child .button {
+ border-left: 0; }
+ .button-group.radius.stack-for-small > *, .button-group.radius.stack-for-small > * > a, .button-group.radius.stack-for-small > * > button, .button-group.radius.stack-for-small > * > .button {
+ border-radius: 0; }
+ .button-group.radius.stack-for-small > *:first-child, .button-group.radius.stack-for-small > *:first-child > a, .button-group.radius.stack-for-small > *:first-child > button, .button-group.radius.stack-for-small > *:first-child > .button {
+ -webkit-border-bottom-left-radius: 3px;
+ -webkit-border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ border-top-left-radius: 3px; }
+ .button-group.radius.stack-for-small > *:last-child, .button-group.radius.stack-for-small > *:last-child > a, .button-group.radius.stack-for-small > *:last-child > button, .button-group.radius.stack-for-small > *:last-child > .button {
+ -webkit-border-bottom-right-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px; } }
+ @media only screen and (max-width: 40em) {
+ .button-group.radius.stack-for-small > * {
+ margin: 0 -2px;
+ display: inline-block;
+ display: block;
+ margin: 0; }
+ .button-group.radius.stack-for-small > * > button, .button-group.radius.stack-for-small > * .button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5); }
+ .button-group.radius.stack-for-small > *:first-child button, .button-group.radius.stack-for-small > *:first-child .button {
+ border-left: 0; }
+ .button-group.radius.stack-for-small > * > button, .button-group.radius.stack-for-small > * .button {
+ border-top: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5);
+ border-left-width: 0px;
+ margin: 0;
+ display: block; }
+ .button-group.radius.stack-for-small > *:first-child button, .button-group.radius.stack-for-small > *:first-child .button {
+ border-top: 0; }
+ .button-group.radius.stack-for-small > *, .button-group.radius.stack-for-small > * > a, .button-group.radius.stack-for-small > * > button, .button-group.radius.stack-for-small > * > .button {
+ border-radius: 0; }
+ .button-group.radius.stack-for-small > *:first-child, .button-group.radius.stack-for-small > *:first-child > a, .button-group.radius.stack-for-small > *:first-child > button, .button-group.radius.stack-for-small > *:first-child > .button {
+ -webkit-top-left-radius: 3px;
+ -webkit-top-right-radius: 3px;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px; }
+ .button-group.radius.stack-for-small > *:last-child, .button-group.radius.stack-for-small > *:last-child > a, .button-group.radius.stack-for-small > *:last-child > button, .button-group.radius.stack-for-small > *:last-child > .button {
+ -webkit-bottom-left-radius: 3px;
+ -webkit-bottom-right-radius: 3px;
+ border-bottom-left-radius: 3px;
+ border-bottom-right-radius: 3px; } }
+ .button-group.round > * {
+ margin: 0 -2px;
+ display: inline-block; }
+ .button-group.round > * > button, .button-group.round > * .button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5); }
+ .button-group.round > *:first-child button, .button-group.round > *:first-child .button {
+ border-left: 0; }
+ .button-group.round > *, .button-group.round > * > a, .button-group.round > * > button, .button-group.round > * > .button {
+ border-radius: 0; }
+ .button-group.round > *:first-child, .button-group.round > *:first-child > a, .button-group.round > *:first-child > button, .button-group.round > *:first-child > .button {
+ -webkit-border-bottom-left-radius: 1000px;
+ -webkit-border-top-left-radius: 1000px;
+ border-bottom-left-radius: 1000px;
+ border-top-left-radius: 1000px; }
+ .button-group.round > *:last-child, .button-group.round > *:last-child > a, .button-group.round > *:last-child > button, .button-group.round > *:last-child > .button {
+ -webkit-border-bottom-right-radius: 1000px;
+ -webkit-border-top-right-radius: 1000px;
+ border-bottom-right-radius: 1000px;
+ border-top-right-radius: 1000px; }
+ .button-group.round.stack > * {
+ margin: 0 -2px;
+ display: inline-block;
+ display: block;
+ margin: 0; }
+ .button-group.round.stack > * > button, .button-group.round.stack > * .button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5); }
+ .button-group.round.stack > *:first-child button, .button-group.round.stack > *:first-child .button {
+ border-left: 0; }
+ .button-group.round.stack > * > button, .button-group.round.stack > * .button {
+ border-top: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5);
+ border-left-width: 0px;
+ margin: 0;
+ display: block; }
+ .button-group.round.stack > *:first-child button, .button-group.round.stack > *:first-child .button {
+ border-top: 0; }
+ .button-group.round.stack > *, .button-group.round.stack > * > a, .button-group.round.stack > * > button, .button-group.round.stack > * > .button {
+ border-radius: 0; }
+ .button-group.round.stack > *:first-child, .button-group.round.stack > *:first-child > a, .button-group.round.stack > *:first-child > button, .button-group.round.stack > *:first-child > .button {
+ -webkit-top-left-radius: 1rem;
+ -webkit-top-right-radius: 1rem;
+ border-top-left-radius: 1rem;
+ border-top-right-radius: 1rem; }
+ .button-group.round.stack > *:last-child, .button-group.round.stack > *:last-child > a, .button-group.round.stack > *:last-child > button, .button-group.round.stack > *:last-child > .button {
+ -webkit-bottom-left-radius: 1rem;
+ -webkit-bottom-right-radius: 1rem;
+ border-bottom-left-radius: 1rem;
+ border-bottom-right-radius: 1rem; }
+ @media only screen and (min-width: 40.063em) {
+ .button-group.round.stack-for-small > * {
+ margin: 0 -2px;
+ display: inline-block; }
+ .button-group.round.stack-for-small > * > button, .button-group.round.stack-for-small > * .button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5); }
+ .button-group.round.stack-for-small > *:first-child button, .button-group.round.stack-for-small > *:first-child .button {
+ border-left: 0; }
+ .button-group.round.stack-for-small > *, .button-group.round.stack-for-small > * > a, .button-group.round.stack-for-small > * > button, .button-group.round.stack-for-small > * > .button {
+ border-radius: 0; }
+ .button-group.round.stack-for-small > *:first-child, .button-group.round.stack-for-small > *:first-child > a, .button-group.round.stack-for-small > *:first-child > button, .button-group.round.stack-for-small > *:first-child > .button {
+ -webkit-border-bottom-left-radius: 1000px;
+ -webkit-border-top-left-radius: 1000px;
+ border-bottom-left-radius: 1000px;
+ border-top-left-radius: 1000px; }
+ .button-group.round.stack-for-small > *:last-child, .button-group.round.stack-for-small > *:last-child > a, .button-group.round.stack-for-small > *:last-child > button, .button-group.round.stack-for-small > *:last-child > .button {
+ -webkit-border-bottom-right-radius: 1000px;
+ -webkit-border-top-right-radius: 1000px;
+ border-bottom-right-radius: 1000px;
+ border-top-right-radius: 1000px; } }
+ @media only screen and (max-width: 40em) {
+ .button-group.round.stack-for-small > * {
+ margin: 0 -2px;
+ display: inline-block;
+ display: block;
+ margin: 0; }
+ .button-group.round.stack-for-small > * > button, .button-group.round.stack-for-small > * .button {
+ border-left: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5); }
+ .button-group.round.stack-for-small > *:first-child button, .button-group.round.stack-for-small > *:first-child .button {
+ border-left: 0; }
+ .button-group.round.stack-for-small > * > button, .button-group.round.stack-for-small > * .button {
+ border-top: 1px solid;
+ border-color: rgba(255, 255, 255, 0.5);
+ border-left-width: 0px;
+ margin: 0;
+ display: block; }
+ .button-group.round.stack-for-small > *:first-child button, .button-group.round.stack-for-small > *:first-child .button {
+ border-top: 0; }
+ .button-group.round.stack-for-small > *, .button-group.round.stack-for-small > * > a, .button-group.round.stack-for-small > * > button, .button-group.round.stack-for-small > * > .button {
+ border-radius: 0; }
+ .button-group.round.stack-for-small > *:first-child, .button-group.round.stack-for-small > *:first-child > a, .button-group.round.stack-for-small > *:first-child > button, .button-group.round.stack-for-small > *:first-child > .button {
+ -webkit-top-left-radius: 1rem;
+ -webkit-top-right-radius: 1rem;
+ border-top-left-radius: 1rem;
+ border-top-right-radius: 1rem; }
+ .button-group.round.stack-for-small > *:last-child, .button-group.round.stack-for-small > *:last-child > a, .button-group.round.stack-for-small > *:last-child > button, .button-group.round.stack-for-small > *:last-child > .button {
+ -webkit-bottom-left-radius: 1rem;
+ -webkit-bottom-right-radius: 1rem;
+ border-bottom-left-radius: 1rem;
+ border-bottom-right-radius: 1rem; } }
.button-group.even-2 li {
+ margin: 0 -2px;
+ display: inline-block;
width: 50%; }
.button-group.even-2 li > button, .button-group.even-2 li .button {
border-left: 1px solid;
@@ @@ -1826,6 +1987,8 @@ meta.foundation-mq-topbar {
.button-group.even-2 li button, .button-group.even-2 li .button {
width: 100%; }
.button-group.even-3 li {
+ margin: 0 -2px;
+ display: inline-block;
width: 33.33333%; }
.button-group.even-3 li > button, .button-group.even-3 li .button {
border-left: 1px solid;
@@ @@ -1835,6 +1998,8 @@ meta.foundation-mq-topbar {
.button-group.even-3 li button, .button-group.even-3 li .button {
width: 100%; }
.button-group.even-4 li {
+ margin: 0 -2px;
+ display: inline-block;
width: 25%; }
.button-group.even-4 li > button, .button-group.even-4 li .button {
border-left: 1px solid;
@@ @@ -1844,6 +2009,8 @@ meta.foundation-mq-topbar {
.button-group.even-4 li button, .button-group.even-4 li .button {
width: 100%; }
.button-group.even-5 li {
+ margin: 0 -2px;
+ display: inline-block;
width: 20%; }
.button-group.even-5 li > button, .button-group.even-5 li .button {
border-left: 1px solid;
@@ @@ -1853,6 +2020,8 @@ meta.foundation-mq-topbar {
.button-group.even-5 li button, .button-group.even-5 li .button {
width: 100%; }
.button-group.even-6 li {
+ margin: 0 -2px;
+ display: inline-block;
width: 16.66667%; }
.button-group.even-6 li > button, .button-group.even-6 li .button {
border-left: 1px solid;
@@ @@ -1862,6 +2031,8 @@ meta.foundation-mq-topbar {
.button-group.even-6 li button, .button-group.even-6 li .button {
width: 100%; }
.button-group.even-7 li {
+ margin: 0 -2px;
+ display: inline-block;
width: 14.28571%; }
.button-group.even-7 li > button, .button-group.even-7 li .button {
border-left: 1px solid;
@@ @@ -1871,6 +2042,8 @@ meta.foundation-mq-topbar {
.button-group.even-7 li button, .button-group.even-7 li .button {
width: 100%; }
.button-group.even-8 li {
+ margin: 0 -2px;
+ display: inline-block;
width: 12.5%; }
.button-group.even-8 li > button, .button-group.even-8 li .button {
border-left: 1px solid;
@@ @@ -1891,1643 +2064,1668 @@ meta.foundation-mq-topbar {
.button-bar .button-group div {
overflow: hidden; }
- /* Panels */
- .panel {
- border-style: solid;
- border-width: 1px;
- border-color: #d8d8d8;
- margin-bottom: 1.25rem;
- padding: 1.25rem;
- background: #f2f2f2; }
- .panel > :first-child {
- margin-top: 0; }
- .panel > :last-child {
- margin-bottom: 0; }
- .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel p, .panel li {
- color: #333333; }
- .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 {
- line-height: 1;
- margin-bottom: 0.625rem; }
- .panel h1.subheader, .panel h2.subheader, .panel h3.subheader, .panel h4.subheader, .panel h5.subheader, .panel h6.subheader {
- line-height: 1.4; }
- .panel.callout {
- border-style: solid;
- border-width: 1px;
- border-color: #b6edff;
- margin-bottom: 1.25rem;
- padding: 1.25rem;
- background: #ecfaff; }
- .panel.callout > :first-child {
- margin-top: 0; }
- .panel.callout > :last-child {
- margin-bottom: 0; }
- .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6, .panel.callout p, .panel.callout li {
- color: #333333; }
- .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6 {
- line-height: 1;
- margin-bottom: 0.625rem; }
- .panel.callout h1.subheader, .panel.callout h2.subheader, .panel.callout h3.subheader, .panel.callout h4.subheader, .panel.callout h5.subheader, .panel.callout h6.subheader {
- line-height: 1.4; }
- .panel.callout a:not(.button) {
- color: #008cba; }
- .panel.radius {
- border-radius: 3px; }
+ /* Clearing Styles */
+ .clearing-thumbs, [data-clearing] {
+ margin-bottom: 0;
+ margin-left: 0;
+ list-style: none; }
+ .clearing-thumbs:before, .clearing-thumbs:after, [data-clearing]:before, [data-clearing]:after {
+ content: " ";
+ display: table; }
+ .clearing-thumbs:after, [data-clearing]:after {
+ clear: both; }
+ .clearing-thumbs li, [data-clearing] li {
+ float: left;
+ margin-right: 10px; }
+ .clearing-thumbs[class*="block-grid-"] li, [data-clearing][class*="block-grid-"] li {
+ margin-right: 0; }
- .dropdown.button, button.dropdown {
+ .clearing-blackout {
+ background: #333333;
+ position: fixed;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ z-index: 998; }
+ .clearing-blackout .clearing-close {
+ display: block; }
+
+ .clearing-container {
position: relative;
- padding-right: 3.5625rem; }
- .dropdown.button:after, button.dropdown:after {
- position: absolute;
- content: "";
- width: 0;
- height: 0;
- display: block;
- border-style: solid;
- border-color: white transparent transparent transparent;
- top: 50%; }
- .dropdown.button:after, button.dropdown:after {
- border-width: 0.375rem;
- right: 1.40625rem;
- margin-top: -0.15625rem; }
- .dropdown.button:after, button.dropdown:after {
- border-color: white transparent transparent transparent; }
- .dropdown.button.tiny, button.dropdown.tiny {
- padding-right: 2.625rem; }
- .dropdown.button.tiny:before, button.dropdown.tiny:before {
- border-width: 0.375rem;
- right: 1.125rem;
- margin-top: -0.125rem; }
- .dropdown.button.tiny:after, button.dropdown.tiny:after {
- border-color: white transparent transparent transparent; }
- .dropdown.button.small, button.dropdown.small {
- padding-right: 3.0625rem; }
- .dropdown.button.small:after, button.dropdown.small:after {
- border-width: 0.4375rem;
- right: 1.3125rem;
- margin-top: -0.15625rem; }
- .dropdown.button.small:after, button.dropdown.small:after {
- border-color: white transparent transparent transparent; }
- .dropdown.button.large, button.dropdown.large {
- padding-right: 3.625rem; }
- .dropdown.button.large:after, button.dropdown.large:after {
- border-width: 0.3125rem;
- right: 1.71875rem;
- margin-top: -0.15625rem; }
- .dropdown.button.large:after, button.dropdown.large:after {
- border-color: white transparent transparent transparent; }
- .dropdown.button.secondary:after, button.dropdown.secondary:after {
- border-color: #333333 transparent transparent transparent; }
-
- div.switch {
- position: relative;
- padding: 0;
- display: block;
+ z-index: 998;
+ height: 100%;
overflow: hidden;
- border-style: solid;
- border-width: 1px;
- margin-bottom: 1.25rem;
- height: 2.25rem;
- background: white;
- border-color: #cccccc; }
- div.switch label {
- position: relative;
- left: 0;
- z-index: 2;
- float: left;
- width: 50%;
- height: 100%;
- margin: 0;
- font-weight: bold;
- text-align: left;
- transition: all 0.1s ease-out; }
- div.switch input {
- position: absolute;
- z-index: 3;
- opacity: 0;
- width: 100%;
- height: 100%;
- -moz-appearance: none; }
- div.switch input:hover, div.switch input:focus {
- cursor: pointer; }
- div.switch span:last-child {
- position: absolute;
- top: -1px;
- left: -1px;
- z-index: 1;
- display: block;
- padding: 0;
- border-width: 1px;
- border-style: solid;
- transition: all 0.1s ease-out; }
- div.switch input:not(:checked) + label {
- opacity: 0; }
- div.switch input:checked {
- display: none !important; }
- div.switch input {
- left: 0;
- display: block !important; }
- div.switch input:first-of-type + label,
- div.switch input:first-of-type + span + label {
- left: -50%; }
- div.switch input:first-of-type:checked + label,
- div.switch input:first-of-type:checked + span + label {
- left: 0%; }
- div.switch input:last-of-type + label,
- div.switch input:last-of-type + span + label {
- right: -50%;
- left: auto;
- text-align: right; }
- div.switch input:last-of-type:checked + label,
- div.switch input:last-of-type:checked + span + label {
- right: 0%;
- left: auto; }
- div.switch span.custom {
- display: none !important; }
- form.custom div.switch .hidden-field {
- margin-left: auto;
- position: absolute;
- visibility: visible; }
- div.switch label {
- padding: 0;
- line-height: 2.3rem;
- font-size: 0.875rem; }
- div.switch input:first-of-type:checked ~ span:last-child {
- left: 100%;
- margin-left: -2.1875rem; }
- div.switch span:last-child {
- width: 2.25rem;
- height: 2.25rem; }
- div.switch span:last-child {
- border-color: #b3b3b3;
- background: white;
- background: linear-gradient(to bottom, white 0%, #f2f2f2 100%);
- box-shadow: 2px 0 10px 0 rgba(0, 0, 0, 0.07), 1000px 0 0 980px #f3faf6, -2px 0 10px 0 rgba(0, 0, 0, 0.07), -1000px 0 0 1000px whitesmoke; }
- div.switch:hover span:last-child, div.switch:focus span:last-child {
- background: white;
- background: linear-gradient(to bottom, white 0%, #e6e6e6 100%); }
- div.switch:active {
- background: transparent; }
- div.switch.large {
- height: 2.75rem; }
- div.switch.large label {
- padding: 0;
- line-height: 2.3rem;
- font-size: 1.0625rem; }
- div.switch.large input:first-of-type:checked ~ span:last-child {
- left: 100%;
- margin-left: -2.6875rem; }
- div.switch.large span:last-child {
- width: 2.75rem;
- height: 2.75rem; }
- div.switch.small {
- height: 1.75rem; }
- div.switch.small label {
- padding: 0;
- line-height: 2.1rem;
- font-size: 0.75rem; }
- div.switch.small input:first-of-type:checked ~ span:last-child {
- left: 100%;
- margin-left: -1.6875rem; }
- div.switch.small span:last-child {
- width: 1.75rem;
- height: 1.75rem; }
- div.switch.tiny {
- height: 1.375rem; }
- div.switch.tiny label {
- padding: 0;
- line-height: 1.9rem;
- font-size: 0.6875rem; }
- div.switch.tiny input:first-of-type:checked ~ span:last-child {
- left: 100%;
- margin-left: -1.3125rem; }
- div.switch.tiny span:last-child {
- width: 1.375rem;
- height: 1.375rem; }
- div.switch.radius {
- border-radius: 4px; }
- div.switch.radius span:last-child {
- border-radius: 3px; }
- div.switch.round {
- border-radius: 1000px; }
- div.switch.round span:last-child {
- border-radius: 999px; }
- div.switch.round label {
- padding: 0 0.5625rem; }
-
- /* Image Thumbnails */
- .th {
- line-height: 0;
- display: inline-block;
- border: solid 4px white;
- max-width: 100%;
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
- transition: all 200ms ease-out; }
- .th:hover, .th:focus {
- box-shadow: 0 0 6px 1px rgba(0, 140, 186, 0.5); }
- .th.radius {
- border-radius: 3px; }
-
- /* Pricing Tables */
- .pricing-table {
- border: solid 1px #dddddd;
- margin-left: 0;
- margin-bottom: 1.25rem; }
- .pricing-table * {
- list-style: none;
- line-height: 1; }
- .pricing-table .title {
- background-color: #333333;
- padding: 0.9375rem 1.25rem;
- text-align: center;
- color: #eeeeee;
- font-weight: normal;
- font-size: 1rem;
- font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
- .pricing-table .price {
- background-color: #f6f6f6;
- padding: 0.9375rem 1.25rem;
- text-align: center;
- color: #333333;
- font-weight: normal;
- font-size: 2rem;
- font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
- .pricing-table .description {
- background-color: white;
- padding: 0.9375rem;
- text-align: center;
- color: #777777;
- font-size: 0.75rem;
- font-weight: normal;
- line-height: 1.4;
- border-bottom: dotted 1px #dddddd; }
- .pricing-table .bullet-item {
- background-color: white;
- padding: 0.9375rem;
- text-align: center;
- color: #333333;
- font-size: 0.875rem;
- font-weight: normal;
- border-bottom: dotted 1px #dddddd; }
- .pricing-table .cta-button {
- background-color: white;
- text-align: center;
- padding: 1.25rem 1.25rem 0; }
-
- @keyframes rotate {
- from {
- -webkit-transform: rotate(0deg);
- -moz-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- -o-transform: rotate(0deg);
- transform: rotate(0deg); }
+ margin: 0; }
- to {
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg); } }
+ .clearing-touch-label {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ color: #aaaaaa;
+ font-size: 0.6em; }
- /* Orbit Graceful Loading */
- .slideshow-wrapper {
+ .visible-img {
+ height: 95%;
position: relative; }
- .slideshow-wrapper ul {
- list-style-type: none;
- margin: 0; }
- .slideshow-wrapper ul li,
- .slideshow-wrapper ul li .orbit-caption {
- display: none; }
- .slideshow-wrapper ul li:first-child {
- display: block; }
- .slideshow-wrapper .orbit-container {
- background-color: transparent; }
- .slideshow-wrapper .orbit-container li {
- display: block; }
- .slideshow-wrapper .orbit-container li .orbit-caption {
- display: block; }
- .slideshow-wrapper .preloader {
- display: block;
- width: 40px;
- height: 40px;
+ .visible-img img {
position: absolute;
- top: 50%;
left: 50%;
- margin-top: -20px;
- margin-left: -20px;
- border: solid 3px;
- border-color: #555555 white;
- border-radius: 1000px;
- animation-name: rotate;
- animation-duration: 1.5s;
- animation-iteration-count: infinite;
- animation-timing-function: linear; }
+ top: 50%;
+ margin-left: -50%;
+ max-height: 100%;
+ max-width: 100%; }
- .orbit-container {
- overflow: hidden;
+ .clearing-caption {
+ color: #cccccc;
+ font-size: 0.875em;
+ line-height: 1.3;
+ margin-bottom: 0;
+ text-align: center;
+ bottom: 0;
+ background: #333333;
width: 100%;
- position: relative;
- background: none; }
- .orbit-container .orbit-slides-container {
- list-style: none;
- margin: 0;
- padding: 0;
- position: relative;
- -webkit-transform: translateZ(0); }
- .orbit-container .orbit-slides-container img {
- display: block;
- max-width: 100%; }
- .orbit-container .orbit-slides-container.fade > li {
- opacity: 0;
- transition: opacity 500ms ease-in-out;
- -ms-transform: translate(0, 0);
- -webkit-transform: translate3d(0, 0, 0);
- -moz-transform: translate3d(0, 0, 0);
- -o-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0); }
- .orbit-container .orbit-slides-container.fade > li.animate-in {
- opacity: 1;
- z-index: 20;
- transition: opacity 500ms ease-in-out; }
- .orbit-container .orbit-slides-container.fade > li.animate-out {
- z-index: 10;
- transition: opacity 500ms ease-in-out; }
- .orbit-container .orbit-slides-container.swipe-next > li {
- -ms-transform: translate(100%, 0);
- -webkit-transform: translate3d(100%, 0, 0);
- -moz-transform: translate3d(100%, 0, 0);
- -o-transform: translate3d(100%, 0, 0);
- transform: translate3d(100%, 0, 0); }
- .orbit-container .orbit-slides-container.swipe-next > li.animate-in {
- -ms-transform: translate(0, 0);
- -webkit-transform: translate3d(0, 0, 0);
- -moz-transform: translate3d(0, 0, 0);
- -o-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- transition-duration: 500ms; }
- .orbit-container .orbit-slides-container.swipe-next > li.animate-out {
- -ms-transform: translate(-100%, 0);
- -webkit-transform: translate3d(-100%, 0, 0);
- -moz-transform: translate3d(-100%, 0, 0);
- -o-transform: translate3d(-100%, 0, 0);
- transform: translate3d(-100%, 0, 0);
- transition-duration: 500ms; }
- .orbit-container .orbit-slides-container.swipe-prev > li {
- -ms-transform: translate(-100%, 0);
- -webkit-transform: translate3d(-100%, 0, 0);
- -moz-transform: translate3d(-100%, 0, 0);
- -o-transform: translate3d(-100%, 0, 0);
- transform: translate3d(-100%, 0, 0); }
- .orbit-container .orbit-slides-container.swipe-prev > li.animate-in {
- -ms-transform: translate(0, 0);
- -webkit-transform: translate3d(0, 0, 0);
- -moz-transform: translate3d(0, 0, 0);
- -o-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- transition-duration: 500ms; }
- .orbit-container .orbit-slides-container.swipe-prev > li.animate-out {
- -ms-transform: translate(100%, 0);
- -webkit-transform: translate3d(100%, 0, 0);
- -moz-transform: translate3d(100%, 0, 0);
- -o-transform: translate3d(100%, 0, 0);
- transform: translate3d(100%, 0, 0);
- transition-duration: 500ms; }
- .orbit-container .orbit-slides-container > li {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- -ms-transform: translate(100%, 0);
- -webkit-transform: translate3d(100%, 0, 0);
- -moz-transform: translate3d(100%, 0, 0);
- -o-transform: translate3d(100%, 0, 0);
- transform: translate3d(100%, 0, 0); }
- .orbit-container .orbit-slides-container > li > a {
- display: block; }
- .orbit-container .orbit-slides-container > li.active {
- opacity: 1;
- position: relative;
- top: 0;
- left: 0;
- -ms-transform: translate(0, 0);
- -webkit-transform: translate3d(0, 0, 0);
- -moz-transform: translate3d(0, 0, 0);
- -o-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0); }
- .orbit-container .orbit-slides-container > li .orbit-caption {
- position: absolute;
- bottom: 0;
- background-color: rgba(51, 51, 51, 0.8);
- color: white;
- width: 100%;
- padding: 0.625rem 0.875rem;
- font-size: 0.875rem; }
- .orbit-container .orbit-slide-number {
- position: absolute;
- top: 10px;
- left: 10px;
- font-size: 12px;
- color: white;
- background: rgba(0, 0, 0, 0);
- z-index: 10; }
- .orbit-container .orbit-slide-number span {
- font-weight: bold;
- padding: 0.3125rem; }
- .orbit-container .orbit-timer {
+ padding: 10px 30px 20px;
+ position: absolute;
+ left: 0; }
+
+ .clearing-close {
+ z-index: 999;
+ padding-left: 20px;
+ padding-top: 10px;
+ font-size: 30px;
+ line-height: 1;
+ color: #cccccc;
+ display: none; }
+ .clearing-close:hover, .clearing-close:focus {
+ color: #cccccc; }
+
+ .clearing-assembled .clearing-container {
+ height: 100%; }
+ .clearing-assembled .clearing-container .carousel > ul {
+ display: none; }
+
+ .clearing-feature li {
+ display: none; }
+ .clearing-feature li.clearing-featured-img {
+ display: block; }
+
+ @media only screen and (min-width: 40.063em) {
+ .clearing-main-prev,
+ .clearing-main-next {
position: absolute;
- top: 12px;
- right: 10px;
- height: 6px;
- width: 100px;
- z-index: 10; }
- .orbit-container .orbit-timer .orbit-progress {
- height: 3px;
- background-color: rgba(255, 255, 255, 0.3);
- display: block;
- width: 0%;
- position: relative;
- right: 20px;
- top: 5px; }
- .orbit-container .orbit-timer > span {
- display: none;
- position: absolute;
- top: 0px;
- right: 0;
- width: 11px;
- height: 14px;
- border: solid 4px white;
- border-top: none;
- border-bottom: none; }
- .orbit-container .orbit-timer.paused > span {
- right: -4px;
- top: 0px;
- width: 11px;
- height: 14px;
- border: inset 8px;
- border-left-style: solid;
- -webkit-transform: rotate(180deg);
- -moz-transform: rotate(180deg);
- -ms-transform: rotate(180deg);
- -o-transform: rotate(180deg);
- transform: rotate(180deg);
- border-color: transparent white transparent transparent; }
- .orbit-container .orbit-timer.paused > span.dark {
- border-color: transparent #333333 transparent transparent; }
- .orbit-container:hover .orbit-timer > span {
- display: block; }
- .orbit-container .orbit-prev,
- .orbit-container .orbit-next {
- position: absolute;
- top: 45%;
- margin-top: -25px;
- width: 36px;
- height: 60px;
- line-height: 50px;
- color: white;
- background-color: transparent;
- text-indent: -9999px !important;
- z-index: 10; }
- .orbit-container .orbit-prev:hover,
- .orbit-container .orbit-next:hover {
- background-color: rgba(0, 0, 0, 0.3); }
- .orbit-container .orbit-prev > span,
- .orbit-container .orbit-next > span {
+ height: 100%;
+ width: 40px;
+ top: 0; }
+ .clearing-main-prev > span,
+ .clearing-main-next > span {
position: absolute;
top: 50%;
- margin-top: -10px;
display: block;
width: 0;
height: 0;
- border: inset 10px; }
- .orbit-container .orbit-prev {
+ border: solid 12px; }
+ .clearing-main-prev > span:hover,
+ .clearing-main-next > span:hover {
+ opacity: 0.8; }
+
+ .clearing-main-prev {
left: 0; }
- .orbit-container .orbit-prev > span {
- border-right-style: solid;
+ .clearing-main-prev > span {
+ left: 5px;
border-color: transparent;
- border-right-color: white; }
- .orbit-container .orbit-prev:hover > span {
- border-right-color: white; }
- .orbit-container .orbit-next {
+ border-right-color: #cccccc; }
+
+ .clearing-main-next {
right: 0; }
- .orbit-container .orbit-next > span {
+ .clearing-main-next > span {
border-color: transparent;
- border-left-style: solid;
- border-left-color: white;
- left: 50%;
- margin-left: -4px; }
- .orbit-container .orbit-next:hover > span {
- border-left-color: white; }
- .orbit-container .orbit-bullets-container {
+ border-left-color: #cccccc; }
+
+ .clearing-main-prev.disabled,
+ .clearing-main-next.disabled {
+ opacity: 0.3; }
+
+ .clearing-assembled .clearing-container .carousel {
+ background: rgba(51, 51, 51, 0.8);
+ height: 120px;
+ margin-top: 10px;
text-align: center; }
- .orbit-container .orbit-bullets {
- margin: 0 auto 30px auto;
- overflow: hidden;
- position: relative;
- top: 10px;
- float: none;
- text-align: center;
- display: block; }
- .orbit-container .orbit-bullets li {
+ .clearing-assembled .clearing-container .carousel > ul {
display: inline-block;
- width: 0.5625rem;
- height: 0.5625rem;
- background: #cccccc;
- float: none;
- margin-right: 6px;
- border-radius: 1000px; }
- .orbit-container .orbit-bullets li.active {
- background: #999999; }
- .orbit-container .orbit-bullets li:last-child {
- margin-right: 0; }
-
- .touch .orbit-container .orbit-prev,
- .touch .orbit-container .orbit-next {
- display: none; }
- .touch .orbit-bullets {
- display: none; }
+ z-index: 999;
+ height: 100%;
+ position: relative;
+ float: none; }
+ .clearing-assembled .clearing-container .carousel > ul li {
+ display: block;
+ width: 120px;
+ min-height: inherit;
+ float: left;
+ overflow: hidden;
+ margin-right: 0;
+ padding: 0;
+ position: relative;
+ cursor: pointer;
+ opacity: 0.4;
+ clear: none; }
+ .clearing-assembled .clearing-container .carousel > ul li.fix-height img {
+ height: 100%;
+ max-width: none; }
+ .clearing-assembled .clearing-container .carousel > ul li a.th {
+ border: none;
+ box-shadow: none;
+ display: block; }
+ .clearing-assembled .clearing-container .carousel > ul li img {
+ cursor: pointer !important;
+ width: 100% !important; }
+ .clearing-assembled .clearing-container .carousel > ul li.visible {
+ opacity: 1; }
+ .clearing-assembled .clearing-container .carousel > ul li:hover {
+ opacity: 0.8; }
+ .clearing-assembled .clearing-container .visible-img {
+ background: #333333;
+ overflow: hidden;
+ height: 85%; }
- @media only screen and (min-width: 40.063em) {
- .touch .orbit-container .orbit-prev,
- .touch .orbit-container .orbit-next {
- display: inherit; }
- .touch .orbit-bullets {
- display: block; } }
- @media only screen and (max-width: 40em) {
- .orbit-stack-on-small .orbit-slides-container {
- height: auto !important; }
- .orbit-stack-on-small .orbit-slides-container > * {
- position: relative !important;
- margin-left: 0% !important;
- opacity: 1 !important;
- -webkit-transform: none !important;
- -moz-transform: none !important;
- -ms-transform: none !important;
- -o-transform: none !important;
- transform: none !important;
- transition: none !important; }
- .orbit-stack-on-small .orbit-timer {
- display: none; }
- .orbit-stack-on-small .orbit-next, .orbit-stack-on-small .orbit-prev {
- display: none; }
- .orbit-stack-on-small .orbit-bullets {
- display: none; }
- .orbit-stack-on-small .orbit-slide-number {
- display: none; } }
- [data-magellan-expedition], [data-magellan-expedition-clone] {
+ .clearing-close {
+ position: absolute;
+ top: 10px;
+ right: 20px;
+ padding-left: 0;
+ padding-top: 0; } }
+ /* Foundation Dropdowns */
+ .f-dropdown {
+ position: absolute;
+ left: -9999px;
+ list-style: none;
+ margin-left: 0;
+ outline: none;
+ width: 100%;
+ max-height: none;
+ height: auto;
background: white;
- z-index: 50;
- min-width: 100%;
- padding: 10px; }
- [data-magellan-expedition] .sub-nav, [data-magellan-expedition-clone] .sub-nav {
+ border: solid 1px #cccccc;
+ font-size: 0.875rem;
+ z-index: 89;
+ margin-top: 2px;
+ max-width: 200px; }
+ .f-dropdown > *:first-child {
+ margin-top: 0; }
+ .f-dropdown > *:last-child {
margin-bottom: 0; }
- [data-magellan-expedition] .sub-nav dd, [data-magellan-expedition-clone] .sub-nav dd {
+ .f-dropdown:before {
+ content: "";
+ display: block;
+ width: 0;
+ height: 0;
+ border: inset 6px;
+ border-color: transparent transparent white transparent;
+ border-bottom-style: solid;
+ position: absolute;
+ top: -12px;
+ left: 10px;
+ z-index: 89; }
+ .f-dropdown:after {
+ content: "";
+ display: block;
+ width: 0;
+ height: 0;
+ border: inset 7px;
+ border-color: transparent transparent #cccccc transparent;
+ border-bottom-style: solid;
+ position: absolute;
+ top: -14px;
+ left: 9px;
+ z-index: 88; }
+ .f-dropdown.right:before {
+ left: auto;
+ right: 10px; }
+ .f-dropdown.right:after {
+ left: auto;
+ right: 9px; }
+ .f-dropdown.drop-right {
+ position: absolute;
+ left: -9999px;
+ list-style: none;
+ margin-left: 0;
+ outline: none;
+ width: 100%;
+ max-height: none;
+ height: auto;
+ background: white;
+ border: solid 1px #cccccc;
+ font-size: 0.875rem;
+ z-index: 89;
+ margin-top: 0;
+ margin-left: 2px;
+ max-width: 200px; }
+ .f-dropdown.drop-right > *:first-child {
+ margin-top: 0; }
+ .f-dropdown.drop-right > *:last-child {
margin-bottom: 0; }
- [data-magellan-expedition] .sub-nav a, [data-magellan-expedition-clone] .sub-nav a {
- line-height: 1.8em; }
-
- .text-left {
- text-align: left !important; }
-
- .text-right {
- text-align: right !important; }
-
- .text-center {
- text-align: center !important; }
-
- .text-justify {
- text-align: justify !important; }
-
- @media only screen and (max-width: 40em) {
- .small-only-text-left {
- text-align: left !important; }
-
- .small-only-text-right {
- text-align: right !important; }
-
- .small-only-text-center {
- text-align: center !important; }
-
- .small-only-text-justify {
- text-align: justify !important; } }
- @media only screen {
- .small-text-left {
- text-align: left !important; }
-
- .small-text-right {
- text-align: right !important; }
-
- .small-text-center {
- text-align: center !important; }
-
- .small-text-justify {
- text-align: justify !important; } }
- @media only screen and (min-width: 40.063em) and (max-width: 64em) {
- .medium-only-text-left {
- text-align: left !important; }
-
- .medium-only-text-right {
- text-align: right !important; }
-
- .medium-only-text-center {
- text-align: center !important; }
-
- .medium-only-text-justify {
- text-align: justify !important; } }
- @media only screen and (min-width: 40.063em) {
- .medium-text-left {
- text-align: left !important; }
-
- .medium-text-right {
- text-align: right !important; }
-
- .medium-text-center {
- text-align: center !important; }
-
- .medium-text-justify {
- text-align: justify !important; } }
- @media only screen and (min-width: 64.063em) and (max-width: 90em) {
- .large-only-text-left {
- text-align: left !important; }
-
- .large-only-text-right {
- text-align: right !important; }
-
- .large-only-text-center {
- text-align: center !important; }
-
- .large-only-text-justify {
- text-align: justify !important; } }
- @media only screen and (min-width: 64.063em) {
- .large-text-left {
- text-align: left !important; }
-
- .large-text-right {
- text-align: right !important; }
-
- .large-text-center {
- text-align: center !important; }
-
- .large-text-justify {
- text-align: justify !important; } }
- @media only screen and (min-width: 90.063em) and (max-width: 120em) {
- .xlarge-only-text-left {
- text-align: left !important; }
-
- .xlarge-only-text-right {
- text-align: right !important; }
-
- .xlarge-only-text-center {
- text-align: center !important; }
-
- .xlarge-only-text-justify {
- text-align: justify !important; } }
- @media only screen and (min-width: 90.063em) {
- .xlarge-text-left {
- text-align: left !important; }
-
- .xlarge-text-right {
- text-align: right !important; }
-
- .xlarge-text-center {
- text-align: center !important; }
-
- .xlarge-text-justify {
- text-align: justify !important; } }
- @media only screen and (min-width: 120.063em) and (max-width: 99999999em) {
- .xxlarge-only-text-left {
- text-align: left !important; }
-
- .xxlarge-only-text-right {
- text-align: right !important; }
-
- .xxlarge-only-text-center {
- text-align: center !important; }
-
- .xxlarge-only-text-justify {
- text-align: justify !important; } }
- @media only screen and (min-width: 120.063em) {
- .xxlarge-text-left {
- text-align: left !important; }
-
- .xxlarge-text-right {
- text-align: right !important; }
-
- .xxlarge-text-center {
- text-align: center !important; }
-
- .xxlarge-text-justify {
- text-align: justify !important; } }
- /* Typography resets */
- div,
- dl,
- dt,
- dd,
- ul,
- ol,
- li,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- pre,
- form,
- p,
- blockquote,
- th,
- td {
- margin: 0;
- padding: 0; }
-
- /* Default Link Styles */
- a {
- color: #008cba;
- text-decoration: none;
- line-height: inherit; }
- a:hover, a:focus {
- color: #0078a0; }
- a img {
- border: none; }
-
- /* Default paragraph styles */
- p {
- font-family: inherit;
- font-weight: normal;
- font-size: 1rem;
- line-height: 1.6;
- margin-bottom: 1.25rem;
- text-rendering: optimizeLegibility; }
- p.lead {
- font-size: 1.21875rem;
- line-height: 1.6; }
- p aside {
+ .f-dropdown.drop-right:before {
+ content: "";
+ display: block;
+ width: 0;
+ height: 0;
+ border: inset 6px;
+ border-color: transparent white transparent transparent;
+ border-right-style: solid;
+ position: absolute;
+ top: 10px;
+ left: -12px;
+ z-index: 89; }
+ .f-dropdown.drop-right:after {
+ content: "";
+ display: block;
+ width: 0;
+ height: 0;
+ border: inset 7px;
+ border-color: transparent #cccccc transparent transparent;
+ border-right-style: solid;
+ position: absolute;
+ top: 9px;
+ left: -14px;
+ z-index: 88; }
+ .f-dropdown.drop-left {
+ position: absolute;
+ left: -9999px;
+ list-style: none;
+ margin-left: 0;
+ outline: none;
+ width: 100%;
+ max-height: none;
+ height: auto;
+ background: white;
+ border: solid 1px #cccccc;
+ font-size: 0.875rem;
+ z-index: 89;
+ margin-top: 0;
+ margin-left: -2px;
+ max-width: 200px; }
+ .f-dropdown.drop-left > *:first-child {
+ margin-top: 0; }
+ .f-dropdown.drop-left > *:last-child {
+ margin-bottom: 0; }
+ .f-dropdown.drop-left:before {
+ content: "";
+ display: block;
+ width: 0;
+ height: 0;
+ border: inset 6px;
+ border-color: transparent transparent transparent white;
+ border-left-style: solid;
+ position: absolute;
+ top: 10px;
+ right: -12px;
+ left: auto;
+ z-index: 89; }
+ .f-dropdown.drop-left:after {
+ content: "";
+ display: block;
+ width: 0;
+ height: 0;
+ border: inset 7px;
+ border-color: transparent transparent transparent #cccccc;
+ border-left-style: solid;
+ position: absolute;
+ top: 9px;
+ right: -14px;
+ left: auto;
+ z-index: 88; }
+ .f-dropdown.drop-top {
+ position: absolute;
+ left: -9999px;
+ list-style: none;
+ margin-left: 0;
+ outline: none;
+ width: 100%;
+ max-height: none;
+ height: auto;
+ background: white;
+ border: solid 1px #cccccc;
+ font-size: 0.875rem;
+ z-index: 89;
+ margin-top: -2px;
+ margin-left: 0;
+ max-width: 200px; }
+ .f-dropdown.drop-top > *:first-child {
+ margin-top: 0; }
+ .f-dropdown.drop-top > *:last-child {
+ margin-bottom: 0; }
+ .f-dropdown.drop-top:before {
+ content: "";
+ display: block;
+ width: 0;
+ height: 0;
+ border: inset 6px;
+ border-color: white transparent transparent transparent;
+ border-top-style: solid;
+ position: absolute;
+ top: auto;
+ bottom: -12px;
+ left: 10px;
+ right: auto;
+ z-index: 89; }
+ .f-dropdown.drop-top:after {
+ content: "";
+ display: block;
+ width: 0;
+ height: 0;
+ border: inset 7px;
+ border-color: #cccccc transparent transparent transparent;
+ border-top-style: solid;
+ position: absolute;
+ top: auto;
+ bottom: -14px;
+ left: 9px;
+ right: auto;
+ z-index: 88; }
+ .f-dropdown li {
font-size: 0.875rem;
- line-height: 1.35;
- font-style: italic; }
-
- /* Default header styles */
- h1, h2, h3, h4, h5, h6 {
- font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
- font-weight: normal;
- font-style: normal;
- color: #222222;
- text-rendering: optimizeLegibility;
- margin-top: 0.2rem;
- margin-bottom: 0.5rem;
- line-height: 1.4; }
- h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
- font-size: 60%;
- color: #6f6f6f;
- line-height: 0; }
-
- h1 {
- font-size: 2.125rem; }
-
- h2 {
- font-size: 1.6875rem; }
-
- h3 {
- font-size: 1.375rem; }
-
- h4 {
- font-size: 1.125rem; }
-
- h5 {
- font-size: 1.125rem; }
-
- h6 {
- font-size: 1rem; }
-
- .subheader {
- line-height: 1.4;
- color: #6f6f6f;
- font-weight: normal;
- margin-top: 0.2rem;
- margin-bottom: 0.5rem; }
-
- hr {
- border: solid #dddddd;
- border-width: 1px 0 0;
- clear: both;
- margin: 1.25rem 0 1.1875rem;
- height: 0; }
-
- /* Helpful Typography Defaults */
- em,
- i {
- font-style: italic;
- line-height: inherit; }
-
- strong,
- b {
- font-weight: bold;
- line-height: inherit; }
-
- small {
- font-size: 60%;
- line-height: inherit; }
-
- code {
- font-family: Consolas, "Liberation Mono", Courier, monospace;
- font-weight: bold;
- color: #bd260d; }
-
- /* Lists */
- ul,
- ol,
- dl {
- font-size: 1rem;
- line-height: 1.6;
- margin-bottom: 1.25rem;
- list-style-position: outside;
- font-family: inherit; }
-
- ul {
- margin-left: 1.1rem; }
- ul.no-bullet {
- margin-left: 0; }
- ul.no-bullet li ul,
- ul.no-bullet li ol {
- margin-left: 1.25rem;
- margin-bottom: 0;
- list-style: none; }
+ cursor: pointer;
+ line-height: 1.125rem;
+ margin: 0; }
+ .f-dropdown li:hover, .f-dropdown li:focus {
+ background: #eeeeee; }
+ .f-dropdown li.radius {
+ border-radius: 3px; }
+ .f-dropdown li a {
+ display: block;
+ padding: 0.5rem;
+ color: #555555; }
+ .f-dropdown.content {
+ position: absolute;
+ left: -9999px;
+ list-style: none;
+ margin-left: 0;
+ outline: none;
+ padding: 1.25rem;
+ width: 100%;
+ height: auto;
+ max-height: none;
+ background: white;
+ border: solid 1px #cccccc;
+ font-size: 0.875rem;
+ z-index: 89;
+ max-width: 200px; }
+ .f-dropdown.content > *:first-child {
+ margin-top: 0; }
+ .f-dropdown.content > *:last-child {
+ margin-bottom: 0; }
+ .f-dropdown.tiny {
+ max-width: 200px; }
+ .f-dropdown.small {
+ max-width: 300px; }
+ .f-dropdown.medium {
+ max-width: 500px; }
+ .f-dropdown.large {
+ max-width: 800px; }
+ .f-dropdown.mega {
+ width: 100% !important;
+ max-width: 100% !important; }
+ .f-dropdown.mega.open {
+ left: 0 !important; }
- /* Unordered Lists */
- ul li ul,
- ul li ol {
- margin-left: 1.25rem;
- margin-bottom: 0; }
- ul.square li ul, ul.circle li ul, ul.disc li ul {
- list-style: inherit; }
- ul.square {
- list-style-type: square;
- margin-left: 1.1rem; }
- ul.circle {
- list-style-type: circle;
- margin-left: 1.1rem; }
- ul.disc {
- list-style-type: disc;
- margin-left: 1.1rem; }
- ul.no-bullet {
- list-style: none; }
+ .dropdown.button, button.dropdown {
+ position: relative;
+ outline: none;
+ padding-right: 3.5625rem; }
+ .dropdown.button::after, button.dropdown::after {
+ position: absolute;
+ content: "";
+ width: 0;
+ height: 0;
+ display: block;
+ border-style: solid;
+ border-color: white transparent transparent transparent;
+ top: 50%; }
+ .dropdown.button::after, button.dropdown::after {
+ border-width: 0.375rem;
+ right: 1.40625rem;
+ margin-top: -0.15625rem; }
+ .dropdown.button::after, button.dropdown::after {
+ border-color: white transparent transparent transparent; }
+ .dropdown.button.tiny, button.dropdown.tiny {
+ padding-right: 2.625rem; }
+ .dropdown.button.tiny:after, button.dropdown.tiny:after {
+ border-width: 0.375rem;
+ right: 1.125rem;
+ margin-top: -0.125rem; }
+ .dropdown.button.tiny::after, button.dropdown.tiny::after {
+ border-color: white transparent transparent transparent; }
+ .dropdown.button.small, button.dropdown.small {
+ padding-right: 3.0625rem; }
+ .dropdown.button.small::after, button.dropdown.small::after {
+ border-width: 0.4375rem;
+ right: 1.3125rem;
+ margin-top: -0.15625rem; }
+ .dropdown.button.small::after, button.dropdown.small::after {
+ border-color: white transparent transparent transparent; }
+ .dropdown.button.large, button.dropdown.large {
+ padding-right: 3.625rem; }
+ .dropdown.button.large::after, button.dropdown.large::after {
+ border-width: 0.3125rem;
+ right: 1.71875rem;
+ margin-top: -0.15625rem; }
+ .dropdown.button.large::after, button.dropdown.large::after {
+ border-color: white transparent transparent transparent; }
+ .dropdown.button.secondary:after, button.dropdown.secondary:after {
+ border-color: #333333 transparent transparent transparent; }
- /* Ordered Lists */
- ol {
- margin-left: 1.4rem; }
- ol li ul,
- ol li ol {
- margin-left: 1.25rem;
- margin-bottom: 0; }
+ .flex-video {
+ position: relative;
+ padding-top: 1.5625rem;
+ padding-bottom: 67.5%;
+ height: 0;
+ margin-bottom: 1rem;
+ overflow: hidden; }
+ .flex-video.widescreen {
+ padding-bottom: 56.34%; }
+ .flex-video.vimeo {
+ padding-top: 0; }
+ .flex-video iframe,
+ .flex-video object,
+ .flex-video embed,
+ .flex-video video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%; }
- /* Definition Lists */
- dl dt {
- margin-bottom: 0.3rem;
- font-weight: bold; }
- dl dd {
- margin-bottom: 0.75rem; }
+ /* Standard Forms */
+ form {
+ margin: 0 0 1rem; }
- /* Abbreviations */
- abbr,
- acronym {
- text-transform: uppercase;
- font-size: 90%;
- color: #222222;
- border-bottom: 1px dotted #dddddd;
- cursor: help; }
+ /* Using forms within rows, we need to set some defaults */
+ form .row .row {
+ margin: 0 -0.5rem; }
+ form .row .row .column,
+ form .row .row .columns {
+ padding: 0 0.5rem; }
+ form .row .row.collapse {
+ margin: 0; }
+ form .row .row.collapse .column,
+ form .row .row.collapse .columns {
+ padding: 0; }
+ form .row .row.collapse input {
+ -webkit-border-bottom-right-radius: 0;
+ -webkit-border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0; }
+ form .row input.column,
+ form .row input.columns,
+ form .row textarea.column,
+ form .row textarea.columns {
+ padding-left: 0.5rem; }
- abbr {
- text-transform: none; }
+ /* Label Styles */
+ label {
+ font-size: 0.875rem;
+ color: #4d4d4d;
+ cursor: pointer;
+ display: block;
+ font-weight: normal;
+ line-height: 1.5;
+ margin-bottom: 0;
+ /* Styles for required inputs */ }
+ label.right {
+ float: none !important;
+ text-align: right; }
+ label.inline {
+ margin: 0 0 1rem 0;
+ padding: 0.5625rem 0; }
+ label small {
+ text-transform: capitalize;
+ color: #676767; }
- /* Blockquotes */
- blockquote {
- margin: 0 0 1.25rem;
- padding: 0.5625rem 1.25rem 0 1.1875rem;
- border-left: 1px solid #dddddd; }
- blockquote cite {
- display: block;
- font-size: 0.8125rem;
- color: #555555; }
- blockquote cite:before {
- content: "\2014 \0020"; }
- blockquote cite a,
- blockquote cite a:visited {
- color: #555555; }
+ /* Attach elements to the beginning or end of an input */
+ .prefix,
+ .postfix {
+ display: block;
+ position: relative;
+ z-index: 2;
+ text-align: center;
+ width: 100%;
+ padding-top: 0;
+ padding-bottom: 0;
+ border-style: solid;
+ border-width: 1px;
+ overflow: hidden;
+ font-size: 0.875rem;
+ height: 2.3125rem;
+ line-height: 2.3125rem; }
- blockquote,
- blockquote p {
- line-height: 1.6;
- color: #6f6f6f; }
+ /* Adjust padding, alignment and radius if pre/post element is a button */
+ .postfix.button {
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ text-align: center;
+ line-height: 2.125rem;
+ border: none; }
- /* Microformats */
- .vcard {
- display: inline-block;
- margin: 0 0 1.25rem 0;
- border: 1px solid #dddddd;
- padding: 0.625rem 0.75rem; }
- .vcard li {
- margin: 0;
- display: block; }
- .vcard .fn {
- font-weight: bold;
- font-size: 0.9375rem; }
+ .prefix.button {
+ padding-left: 0;
+ padding-right: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ text-align: center;
+ line-height: 2.125rem;
+ border: none; }
- .vevent .summary {
- font-weight: bold; }
- .vevent abbr {
- cursor: default;
- text-decoration: none;
- font-weight: bold;
- border: none;
- padding: 0 0.0625rem; }
+ .prefix.button.radius {
+ border-radius: 0;
+ -webkit-border-bottom-left-radius: 3px;
+ -webkit-border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ border-top-left-radius: 3px; }
- @media only screen and (min-width: 40.063em) {
- h1, h2, h3, h4, h5, h6 {
- line-height: 1.4; }
+ .postfix.button.radius {
+ border-radius: 0;
+ -webkit-border-bottom-right-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px; }
- h1 {
- font-size: 2.75rem; }
+ .prefix.button.round {
+ border-radius: 0;
+ -webkit-border-bottom-left-radius: 1000px;
+ -webkit-border-top-left-radius: 1000px;
+ border-bottom-left-radius: 1000px;
+ border-top-left-radius: 1000px; }
- h2 {
- font-size: 2.3125rem; }
+ .postfix.button.round {
+ border-radius: 0;
+ -webkit-border-bottom-right-radius: 1000px;
+ -webkit-border-top-right-radius: 1000px;
+ border-bottom-right-radius: 1000px;
+ border-top-right-radius: 1000px; }
- h3 {
- font-size: 1.6875rem; }
+ /* Separate prefix and postfix styles when on span or label so buttons keep their own */
+ span.prefix, label.prefix {
+ background: #f2f2f2;
+ border-right: none;
+ color: #333333;
+ border-color: #cccccc; }
- h4 {
- font-size: 1.4375rem; } }
- /*
- * Print styles.
- *
- * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
- * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
- */
- .print-only {
- display: none !important; }
+ span.postfix, label.postfix {
+ background: #f2f2f2;
+ border-left: none;
+ color: #333333;
+ border-color: #cccccc; }
- @media print {
- * {
- background: transparent !important;
- color: black !important;
- /* Black prints faster: h5bp.com/s */
- box-shadow: none !important;
- text-shadow: none !important; }
+ /* We use this to get basic styling on all basic form elements */
+ input[type="text"],
+ input[type="password"],
+ input[type="date"],
+ input[type="datetime"],
+ input[type="datetime-local"],
+ input[type="month"],
+ input[type="week"],
+ input[type="email"],
+ input[type="number"],
+ input[type="search"],
+ input[type="tel"],
+ input[type="time"],
+ input[type="url"],
+ input[type="color"],
+ textarea {
+ -webkit-appearance: none;
+ -webkit-border-radius: 0px;
+ background-color: white;
+ font-family: inherit;
+ border-style: solid;
+ border-width: 1px;
+ border-color: #cccccc;
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+ color: rgba(0, 0, 0, 0.75);
+ display: block;
+ font-size: 0.875rem;
+ margin: 0 0 1rem 0;
+ padding: 0.5rem;
+ height: 2.3125rem;
+ width: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ transition: box-shadow 0.45s, border-color 0.45s ease-in-out; }
+ input[type="text"]:focus,
+ input[type="password"]:focus,
+ input[type="date"]:focus,
+ input[type="datetime"]:focus,
+ input[type="datetime-local"]:focus,
+ input[type="month"]:focus,
+ input[type="week"]:focus,
+ input[type="email"]:focus,
+ input[type="number"]:focus,
+ input[type="search"]:focus,
+ input[type="tel"]:focus,
+ input[type="time"]:focus,
+ input[type="url"]:focus,
+ input[type="color"]:focus,
+ textarea:focus {
+ box-shadow: 0 0 5px #999999;
+ border-color: #999999; }
+ input[type="text"]:focus,
+ input[type="password"]:focus,
+ input[type="date"]:focus,
+ input[type="datetime"]:focus,
+ input[type="datetime-local"]:focus,
+ input[type="month"]:focus,
+ input[type="week"]:focus,
+ input[type="email"]:focus,
+ input[type="number"]:focus,
+ input[type="search"]:focus,
+ input[type="tel"]:focus,
+ input[type="time"]:focus,
+ input[type="url"]:focus,
+ input[type="color"]:focus,
+ textarea:focus {
+ background: #fafafa;
+ border-color: #999999;
+ outline: none; }
+ input[type="text"]:disabled,
+ input[type="password"]:disabled,
+ input[type="date"]:disabled,
+ input[type="datetime"]:disabled,
+ input[type="datetime-local"]:disabled,
+ input[type="month"]:disabled,
+ input[type="week"]:disabled,
+ input[type="email"]:disabled,
+ input[type="number"]:disabled,
+ input[type="search"]:disabled,
+ input[type="tel"]:disabled,
+ input[type="time"]:disabled,
+ input[type="url"]:disabled,
+ input[type="color"]:disabled,
+ textarea:disabled {
+ background-color: #dddddd;
+ cursor: default; }
+ input[type="text"][disabled], input[type="text"][readonly], fieldset[disabled] input[type="text"],
+ input[type="password"][disabled],
+ input[type="password"][readonly], fieldset[disabled]
+ input[type="password"],
+ input[type="date"][disabled],
+ input[type="date"][readonly], fieldset[disabled]
+ input[type="date"],
+ input[type="datetime"][disabled],
+ input[type="datetime"][readonly], fieldset[disabled]
+ input[type="datetime"],
+ input[type="datetime-local"][disabled],
+ input[type="datetime-local"][readonly], fieldset[disabled]
+ input[type="datetime-local"],
+ input[type="month"][disabled],
+ input[type="month"][readonly], fieldset[disabled]
+ input[type="month"],
+ input[type="week"][disabled],
+ input[type="week"][readonly], fieldset[disabled]
+ input[type="week"],
+ input[type="email"][disabled],
+ input[type="email"][readonly], fieldset[disabled]
+ input[type="email"],
+ input[type="number"][disabled],
+ input[type="number"][readonly], fieldset[disabled]
+ input[type="number"],
+ input[type="search"][disabled],
+ input[type="search"][readonly], fieldset[disabled]
+ input[type="search"],
+ input[type="tel"][disabled],
+ input[type="tel"][readonly], fieldset[disabled]
+ input[type="tel"],
+ input[type="time"][disabled],
+ input[type="time"][readonly], fieldset[disabled]
+ input[type="time"],
+ input[type="url"][disabled],
+ input[type="url"][readonly], fieldset[disabled]
+ input[type="url"],
+ input[type="color"][disabled],
+ input[type="color"][readonly], fieldset[disabled]
+ input[type="color"],
+ textarea[disabled],
+ textarea[readonly], fieldset[disabled]
+ textarea {
+ background-color: #dddddd;
+ cursor: default; }
+ input[type="text"].radius,
+ input[type="password"].radius,
+ input[type="date"].radius,
+ input[type="datetime"].radius,
+ input[type="datetime-local"].radius,
+ input[type="month"].radius,
+ input[type="week"].radius,
+ input[type="email"].radius,
+ input[type="number"].radius,
+ input[type="search"].radius,
+ input[type="tel"].radius,
+ input[type="time"].radius,
+ input[type="url"].radius,
+ input[type="color"].radius,
+ textarea.radius {
+ border-radius: 3px; }
- a,
- a:visited {
- text-decoration: underline; }
+ form .row .prefix-radius.row.collapse input,
+ form .row .prefix-radius.row.collapse textarea,
+ form .row .prefix-radius.row.collapse select {
+ border-radius: 0;
+ -webkit-border-bottom-right-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px; }
+ form .row .prefix-radius.row.collapse .prefix {
+ border-radius: 0;
+ -webkit-border-bottom-left-radius: 3px;
+ -webkit-border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ border-top-left-radius: 3px; }
+ form .row .postfix-radius.row.collapse input,
+ form .row .postfix-radius.row.collapse textarea,
+ form .row .postfix-radius.row.collapse select {
+ border-radius: 0;
+ -webkit-border-bottom-left-radius: 3px;
+ -webkit-border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ border-top-left-radius: 3px; }
+ form .row .postfix-radius.row.collapse .postfix {
+ border-radius: 0;
+ -webkit-border-bottom-right-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px; }
+ form .row .prefix-round.row.collapse input,
+ form .row .prefix-round.row.collapse textarea,
+ form .row .prefix-round.row.collapse select {
+ border-radius: 0;
+ -webkit-border-bottom-right-radius: 1000px;
+ -webkit-border-top-right-radius: 1000px;
+ border-bottom-right-radius: 1000px;
+ border-top-right-radius: 1000px; }
+ form .row .prefix-round.row.collapse .prefix {
+ border-radius: 0;
+ -webkit-border-bottom-left-radius: 1000px;
+ -webkit-border-top-left-radius: 1000px;
+ border-bottom-left-radius: 1000px;
+ border-top-left-radius: 1000px; }
+ form .row .postfix-round.row.collapse input,
+ form .row .postfix-round.row.collapse textarea,
+ form .row .postfix-round.row.collapse select {
+ border-radius: 0;
+ -webkit-border-bottom-left-radius: 1000px;
+ -webkit-border-top-left-radius: 1000px;
+ border-bottom-left-radius: 1000px;
+ border-top-left-radius: 1000px; }
+ form .row .postfix-round.row.collapse .postfix {
+ border-radius: 0;
+ -webkit-border-bottom-right-radius: 1000px;
+ -webkit-border-top-right-radius: 1000px;
+ border-bottom-right-radius: 1000px;
+ border-top-right-radius: 1000px; }
- a[href]:after {
- content: " (" attr(href) ")"; }
+ input[type="submit"] {
+ -webkit-appearance: none;
+ -webkit-border-radius: 0px; }
- abbr[title]:after {
- content: " (" attr(title) ")"; }
+ /* Respect enforced amount of rows for textarea */
+ textarea[rows] {
+ height: auto; }
- .ir a:after,
- a[href^="javascript:"]:after,
- a[href^="#"]:after {
- content: ""; }
+ /* Not allow resize out of parent */
+ textarea {
+ max-width: 100%; }
- pre,
- blockquote {
- border: 1px solid #999999;
- page-break-inside: avoid; }
+ /* Add height value for select elements to match text input height */
+ select {
+ -webkit-appearance: none !important;
+ -webkit-border-radius: 0px;
+ background-color: #fafafa;
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
+ background-position: 100% center;
+ background-repeat: no-repeat;
+ border-style: solid;
+ border-width: 1px;
+ border-color: #cccccc;
+ padding: 0.5rem;
+ font-size: 0.875rem;
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ color: rgba(0, 0, 0, 0.75);
+ line-height: normal;
+ border-radius: 0;
+ height: 2.3125rem; }
+ select::-ms-expand {
+ display: none; }
+ select.radius {
+ border-radius: 3px; }
+ select:hover {
+ background-color: #f3f3f3;
+ border-color: #999999; }
+ select:disabled {
+ background-color: #dddddd;
+ cursor: default; }
- thead {
- display: table-header-group;
- /* h5bp.com/t */ }
+ /* Adjust margin for form elements below */
+ input[type="file"],
+ input[type="checkbox"],
+ input[type="radio"],
+ select {
+ margin: 0 0 1rem 0; }
- tr,
- img {
- page-break-inside: avoid; }
+ input[type="checkbox"] + label,
+ input[type="radio"] + label {
+ display: inline-block;
+ margin-left: 0.5rem;
+ margin-right: 1rem;
+ margin-bottom: 0;
+ vertical-align: baseline; }
- img {
- max-width: 100% !important; }
+ /* Normalize file input width */
+ input[type="file"] {
+ width: 100%; }
- @page {
- margin: 0.5cm; }
+ /* HTML5 Number spinners settings */
+ /* We add basic fieldset styling */
+ fieldset {
+ border: 1px solid #dddddd;
+ padding: 1.25rem;
+ margin: 1.125rem 0; }
+ fieldset legend {
+ font-weight: bold;
+ background: white;
+ padding: 0 0.1875rem;
+ margin: 0;
+ margin-left: -0.1875rem; }
- p,
- h2,
- h3 {
- orphans: 3;
- widows: 3; }
+ /* Error Handling */
+ [data-abide] .error small.error, [data-abide] .error span.error, [data-abide] span.error, [data-abide] small.error {
+ display: block;
+ padding: 0.375rem 0.5625rem 0.5625rem;
+ margin-top: -1px;
+ margin-bottom: 1rem;
+ font-size: 0.75rem;
+ font-weight: normal;
+ font-style: italic;
+ background: #f04124;
+ color: white; }
+ [data-abide] span.error, [data-abide] small.error {
+ display: none; }
- h2,
- h3 {
- page-break-after: avoid; }
+ span.error, small.error {
+ display: block;
+ padding: 0.375rem 0.5625rem 0.5625rem;
+ margin-top: -1px;
+ margin-bottom: 1rem;
+ font-size: 0.75rem;
+ font-weight: normal;
+ font-style: italic;
+ background: #f04124;
+ color: white; }
- .hide-on-print {
- display: none !important; }
+ .error input,
+ .error textarea,
+ .error select {
+ margin-bottom: 0; }
+ .error input[type="checkbox"],
+ .error input[type="radio"] {
+ margin-bottom: 1rem; }
+ .error label,
+ .error label.error {
+ color: #f04124; }
+ .error small.error {
+ display: block;
+ padding: 0.375rem 0.5625rem 0.5625rem;
+ margin-top: -1px;
+ margin-bottom: 1rem;
+ font-size: 0.75rem;
+ font-weight: normal;
+ font-style: italic;
+ background: #f04124;
+ color: white; }
+ .error > label > small {
+ color: #676767;
+ background: transparent;
+ padding: 0;
+ text-transform: capitalize;
+ font-style: normal;
+ font-size: 60%;
+ margin: 0;
+ display: inline; }
+ .error span.error-message {
+ display: block; }
- .print-only {
- display: block !important; }
+ input.error,
+ textarea.error,
+ select.error {
+ margin-bottom: 0; }
- .hide-for-print {
- display: none !important; }
+ label.error {
+ color: #f04124; }
- .show-for-print {
- display: inherit !important; } }
- .tabs {
- margin-bottom: 0 !important;
- margin-left: 0; }
- .tabs:before, .tabs:after {
- content: " ";
- display: table; }
- .tabs:after {
- clear: both; }
- .tabs dd, .tabs .tab-title {
- position: relative;
- margin-bottom: 0 !important;
- list-style: none;
+ .icon-bar {
+ width: 100%;
+ font-size: 0;
+ display: inline-block;
+ background: #333333; }
+ .icon-bar > * {
+ text-align: center;
+ font-size: 1rem;
+ width: 25%;
+ margin: 0 auto;
+ display: block;
+ padding: 1.25rem;
float: left; }
- .tabs dd > a, .tabs .tab-title > a {
+ .icon-bar > * i, .icon-bar > * img {
display: block;
- background: #efefef;
- color: #222222;
- padding: 1rem 2rem;
- font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
- font-size: 1rem; }
- .tabs dd > a:hover, .tabs .tab-title > a:hover {
- background: #e1e1e1; }
- .tabs dd.active a, .tabs .tab-title.active a {
- background: white;
- color: #222222; }
- .tabs.radius dd:first-child a, .tabs.radius .tab:first-child a {
- border-bottom-left-radius: 3px;
- border-top-left-radius: 3px; }
- .tabs.radius dd:last-child a, .tabs.radius .tab:last-child a {
- border-bottom-right-radius: 3px;
- border-top-right-radius: 3px; }
- .tabs.vertical dd, .tabs.vertical .tab {
- position: inherit;
- float: none;
- display: block;
- top: auto; }
+ margin: 0 auto; }
+ .icon-bar > * i + label, .icon-bar > * img + label {
+ margin-top: .0625rem; }
+ .icon-bar > * i {
+ font-size: 1.875rem;
+ vertical-align: middle; }
+ .icon-bar > * img {
+ width: 1.875rem;
+ height: 1.875rem; }
+ .icon-bar.label-right > * i, .icon-bar.label-right > * img {
+ margin: 0 .0625rem 0 0;
+ display: inline-block; }
+ .icon-bar.label-right > * i + label, .icon-bar.label-right > * img + label {
+ margin-top: 0; }
+ .icon-bar.label-right > * label {
+ display: inline-block; }
+ .icon-bar.vertical.label-right > * {
+ text-align: left; }
+ .icon-bar.vertical, .icon-bar.small-vertical {
+ height: 100%;
+ width: auto; }
+ .icon-bar.vertical .item, .icon-bar.small-vertical .item {
+ width: auto;
+ margin: auto;
+ float: none; }
+ @media only screen and (min-width: 40.063em) {
+ .icon-bar.medium-vertical {
+ height: 100%;
+ width: auto; }
+ .icon-bar.medium-vertical .item {
+ width: auto;
+ margin: auto;
+ float: none; } }
+ @media only screen and (min-width: 64.063em) {
+ .icon-bar.large-vertical {
+ height: 100%;
+ width: auto; }
+ .icon-bar.large-vertical .item {
+ width: auto;
+ margin: auto;
+ float: none; } }
+ .icon-bar > * {
+ font-size: 1rem;
+ padding: 1.25rem; }
+ .icon-bar > * i + label, .icon-bar > * img + label {
+ margin-top: .0625rem; }
+ .icon-bar > * i {
+ font-size: 1.875rem; }
+ .icon-bar > * img {
+ width: 1.875rem;
+ height: 1.875rem; }
+ .icon-bar > *:hover {
+ background: #008cba; }
+ .icon-bar > * label {
+ color: white; }
+ .icon-bar > * i {
+ color: white; }
- .tabs-content {
- margin-bottom: 1.5rem;
- width: 100%; }
- .tabs-content:before, .tabs-content:after {
- content: " ";
- display: table; }
- .tabs-content:after {
- clear: both; }
- .tabs-content > .content {
- display: none;
+ .icon-bar.two-up .item {
+ width: 50%; }
+ .icon-bar.two-up.vertical .item, .icon-bar.two-up.small-vertical .item {
+ width: auto; }
+ @media only screen and (min-width: 40.063em) {
+ .icon-bar.two-up.medium-vertical .item {
+ width: auto; } }
+ @media only screen and (min-width: 64.063em) {
+ .icon-bar.two-up.large-vertical .item {
+ width: auto; } }
+ .icon-bar.three-up .item {
+ width: 33.3333%; }
+ .icon-bar.three-up.vertical .item, .icon-bar.three-up.small-vertical .item {
+ width: auto; }
+ @media only screen and (min-width: 40.063em) {
+ .icon-bar.three-up.medium-vertical .item {
+ width: auto; } }
+ @media only screen and (min-width: 64.063em) {
+ .icon-bar.three-up.large-vertical .item {
+ width: auto; } }
+ .icon-bar.four-up .item {
+ width: 25%; }
+ .icon-bar.four-up.vertical .item, .icon-bar.four-up.small-vertical .item {
+ width: auto; }
+ @media only screen and (min-width: 40.063em) {
+ .icon-bar.four-up.medium-vertical .item {
+ width: auto; } }
+ @media only screen and (min-width: 64.063em) {
+ .icon-bar.four-up.large-vertical .item {
+ width: auto; } }
+ .icon-bar.five-up .item {
+ width: 20%; }
+ .icon-bar.five-up.vertical .item, .icon-bar.five-up.small-vertical .item {
+ width: auto; }
+ @media only screen and (min-width: 40.063em) {
+ .icon-bar.five-up.medium-vertical .item {
+ width: auto; } }
+ @media only screen and (min-width: 64.063em) {
+ .icon-bar.five-up.large-vertical .item {
+ width: auto; } }
+ .icon-bar.six-up .item {
+ width: 16.66667%; }
+ .icon-bar.six-up.vertical .item, .icon-bar.six-up.small-vertical .item {
+ width: auto; }
+ @media only screen and (min-width: 40.063em) {
+ .icon-bar.six-up.medium-vertical .item {
+ width: auto; } }
+ @media only screen and (min-width: 64.063em) {
+ .icon-bar.six-up.large-vertical .item {
+ width: auto; } }
+
+ .inline-list {
+ margin: 0 auto 1.0625rem auto;
+ margin-left: -1.375rem;
+ margin-right: 0;
+ padding: 0;
+ list-style: none;
+ overflow: hidden; }
+ .inline-list > li {
+ list-style: none;
float: left;
- padding: 0.9375rem 0;
- width: 100%; }
- .tabs-content > .content.active {
- display: block;
- float: none; }
- .tabs-content > .content.contained {
- padding: 0.9375rem; }
- .tabs-content.vertical {
+ margin-left: 1.375rem;
display: block; }
- .tabs-content.vertical > .content {
- padding: 0 0.9375rem; }
+ .inline-list > li > * {
+ display: block; }
- @media only screen and (min-width: 40.063em) {
- .tabs.vertical {
- width: 20%;
- float: left;
- margin-bottom: 1.25rem; }
+ /* Foundation Joyride */
+ .joyride-list {
+ display: none; }
- .tabs-content.vertical {
- width: 80%;
- float: left;
- margin-left: -1px; } }
- .no-js .tabs-content > .content {
- display: block;
- float: none; }
+ /* Default styles for the container */
+ .joyride-tip-guide {
+ display: none;
+ position: absolute;
+ background: #333333;
+ color: white;
+ z-index: 101;
+ top: 0;
+ left: 2.5%;
+ font-family: inherit;
+ font-weight: normal;
+ width: 95%; }
- ul.pagination {
- display: block;
- min-height: 1.5rem;
- margin-left: -0.3125rem; }
- ul.pagination li {
- height: 1.5rem;
- color: #222222;
- font-size: 0.875rem;
- margin-left: 0.3125rem; }
- ul.pagination li a {
- display: block;
- padding: 0.0625rem 0.625rem 0.0625rem;
- color: #999999;
- border-radius: 3px; }
- ul.pagination li:hover a,
- ul.pagination li a:focus {
- background: #e6e6e6; }
- ul.pagination li.unavailable a {
- cursor: default;
- color: #999999; }
- ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus {
- background: transparent; }
- ul.pagination li.current a {
- background: #008cba;
- color: white;
- font-weight: bold;
- cursor: default; }
- ul.pagination li.current a:hover, ul.pagination li.current a:focus {
- background: #008cba; }
- ul.pagination li {
- float: left;
- display: block; }
+ .lt-ie9 .joyride-tip-guide {
+ max-width: 800px;
+ left: 50%;
+ margin-left: -400px; }
- /* Pagination centred wrapper */
- .pagination-centered {
- text-align: center; }
- .pagination-centered ul.pagination li {
- float: none;
- display: inline-block; }
+ .joyride-content-wrapper {
+ width: 100%;
+ padding: 1.125rem 1.25rem 1.5rem; }
+ .joyride-content-wrapper .button {
+ margin-bottom: 0 !important; }
+ .joyride-content-wrapper .joyride-prev-tip {
+ margin-right: 10px; }
- .side-nav {
+ /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
+ .joyride-tip-guide .joyride-nub {
display: block;
+ position: absolute;
+ left: 22px;
+ width: 0;
+ height: 0;
+ border: 10px solid #333333; }
+ .joyride-tip-guide .joyride-nub.top {
+ border-top-style: solid;
+ border-color: #333333;
+ border-top-color: transparent !important;
+ border-left-color: transparent !important;
+ border-right-color: transparent !important;
+ top: -20px; }
+ .joyride-tip-guide .joyride-nub.bottom {
+ border-bottom-style: solid;
+ border-color: #333333 !important;
+ border-bottom-color: transparent !important;
+ border-left-color: transparent !important;
+ border-right-color: transparent !important;
+ bottom: -20px; }
+ .joyride-tip-guide .joyride-nub.right {
+ right: -20px; }
+ .joyride-tip-guide .joyride-nub.left {
+ left: -20px; }
+
+ /* Typography */
+ .joyride-tip-guide h1,
+ .joyride-tip-guide h2,
+ .joyride-tip-guide h3,
+ .joyride-tip-guide h4,
+ .joyride-tip-guide h5,
+ .joyride-tip-guide h6 {
+ line-height: 1.25;
margin: 0;
- padding: 0.875rem 0;
- list-style-type: none;
- list-style-position: inside;
- font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
- .side-nav li {
- margin: 0 0 0.4375rem 0;
- font-size: 0.875rem; }
- .side-nav li a:not(.button) {
- display: block;
- color: #008cba;
- margin: 0;
- padding: 0.4375rem 0.875rem; }
- .side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus {
- background: rgba(0, 0, 0, 0.025);
- color: #1cc7ff; }
- .side-nav li.active > a:first-child:not(.button) {
- color: #1cc7ff;
- font-weight: normal;
- font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
- .side-nav li.divider {
- border-top: 1px solid;
- height: 0;
- padding: 0;
- list-style: none;
- border-top-color: white; }
- .side-nav li.heading {
- color: #008cba;
- font-size: 0.875rem;
- font-weight: bold;
- text-transform: uppercase; }
+ font-weight: bold;
+ color: white; }
- .accordion {
- margin-bottom: 0; }
- .accordion:before, .accordion:after {
- content: " ";
- display: table; }
- .accordion:after {
- clear: both; }
- .accordion dd {
- display: block;
- margin-bottom: 0 !important; }
- .accordion dd.active > a {
- background: #e8e8e8; }
- .accordion dd > a {
- background: #efefef;
- color: #222222;
- padding: 1rem;
- display: block;
- font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
- font-size: 1rem; }
- .accordion dd > a:hover {
- background: #e3e3e3; }
- .accordion dd > .content {
- display: none;
- padding: 0.9375rem; }
- .accordion dd > .content.active {
- display: block;
- background: white; }
+ .joyride-tip-guide p {
+ margin: 0 0 1.125rem 0;
+ font-size: 0.875rem;
+ line-height: 1.3; }
- .split.button {
- position: relative;
- padding-right: 5.0625rem; }
- .split.button span {
- display: block;
- height: 100%;
- position: absolute;
- right: 0;
- top: 0;
- border-left: solid 1px; }
- .split.button span:after {
- position: absolute;
- content: "";
- width: 0;
- height: 0;
- display: block;
- border-style: inset;
- top: 50%;
- left: 50%; }
- .split.button span:active {
- background-color: rgba(0, 0, 0, 0.1); }
- .split.button span {
- border-left-color: rgba(255, 255, 255, 0.5); }
- .split.button span {
- width: 3.09375rem; }
- .split.button span:after {
- border-top-style: solid;
- border-width: 0.375rem;
- top: 48%;
- margin-left: -0.375rem; }
- .split.button span:after {
- border-color: white transparent transparent transparent; }
- .split.button.secondary span {
- border-left-color: rgba(255, 255, 255, 0.5); }
- .split.button.secondary span:after {
- border-color: white transparent transparent transparent; }
- .split.button.alert span {
- border-left-color: rgba(255, 255, 255, 0.5); }
- .split.button.success span {
- border-left-color: rgba(255, 255, 255, 0.5); }
- .split.button.tiny {
- padding-right: 3.75rem; }
- .split.button.tiny span {
- width: 2.25rem; }
- .split.button.tiny span:after {
- border-top-style: solid;
- border-width: 0.375rem;
- top: 48%;
- margin-left: -0.375rem; }
- .split.button.small {
- padding-right: 4.375rem; }
- .split.button.small span {
- width: 2.625rem; }
- .split.button.small span:after {
- border-top-style: solid;
- border-width: 0.4375rem;
- top: 48%;
- margin-left: -0.375rem; }
- .split.button.large {
- padding-right: 5.5rem; }
- .split.button.large span {
- width: 3.4375rem; }
- .split.button.large span:after {
- border-top-style: solid;
- border-width: 0.3125rem;
- top: 48%;
- margin-left: -0.375rem; }
- .split.button.expand {
- padding-left: 2rem; }
- .split.button.secondary span:after {
- border-color: #333333 transparent transparent transparent; }
- .split.button.radius span {
- border-bottom-right-radius: 3px;
- border-top-right-radius: 3px; }
- .split.button.round span {
- border-bottom-right-radius: 1000px;
- border-top-right-radius: 1000px; }
+ .joyride-timer-indicator-wrap {
+ width: 50px;
+ height: 3px;
+ border: solid 1px #555555;
+ position: absolute;
+ right: 1.0625rem;
+ bottom: 1rem; }
+
+ .joyride-timer-indicator {
+ display: block;
+ width: 0;
+ height: inherit;
+ background: #666666; }
+
+ .joyride-close-tip {
+ position: absolute;
+ right: 12px;
+ top: 10px;
+ color: #777777 !important;
+ text-decoration: none;
+ font-size: 24px;
+ font-weight: normal;
+ line-height: .5 !important; }
+ .joyride-close-tip:hover, .joyride-close-tip:focus {
+ color: #eeeeee !important; }
- .reveal-modal-bg {
+ .joyride-modal-bg {
position: fixed;
height: 100%;
width: 100%;
- background: black;
- background: rgba(0, 0, 0, 0.45);
- z-index: 99;
- display: none;
- top: 0;
- left: 0; }
-
- dialog, .reveal-modal {
- visibility: hidden;
- display: none;
- position: absolute;
+ background: transparent;
+ background: rgba(0, 0, 0, 0.5);
z-index: 100;
- width: 100vw;
+ display: none;
top: 0;
left: 0;
+ cursor: pointer; }
+
+ .joyride-expose-wrapper {
background-color: white;
- padding: 1.25rem;
- border: solid 1px #666666;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); }
- @media only screen and (max-width: 40em) {
- dialog, .reveal-modal {
- min-height: 100vh; } }
- @media only screen and (min-width: 40.063em) {
- dialog, .reveal-modal {
- left: 50%; } }
- dialog .column,
- dialog .columns, .reveal-modal .column,
- .reveal-modal .columns {
- min-width: 0; }
- dialog > :first-child, .reveal-modal > :first-child {
- margin-top: 0; }
- dialog > :last-child, .reveal-modal > :last-child {
- margin-bottom: 0; }
- @media only screen and (min-width: 40.063em) {
- dialog, .reveal-modal {
- margin-left: -40%;
- width: 80%; } }
- @media only screen and (min-width: 40.063em) {
- dialog, .reveal-modal {
- top: 6.25rem; } }
- dialog .close-reveal-modal, .reveal-modal .close-reveal-modal {
- font-size: 2.5rem;
- line-height: 1;
- position: absolute;
- top: 0.5rem;
- right: 0.6875rem;
- color: #aaaaaa;
- font-weight: bold;
- cursor: pointer; }
+ position: absolute;
+ border-radius: 3px;
+ z-index: 102;
+ box-shadow: 0 0 15px white; }
- dialog[open] {
- display: block;
- visibility: visible; }
+ .joyride-expose-cover {
+ background: transparent;
+ border-radius: 3px;
+ position: absolute;
+ z-index: 9999;
+ top: 0;
+ left: 0; }
+ /* Styles for screens that are at least 768px; */
@media only screen and (min-width: 40.063em) {
- dialog, .reveal-modal {
- padding: 1.875rem; }
- dialog.radius, .reveal-modal.radius {
- border-radius: 3px; }
- dialog.round, .reveal-modal.round {
- border-radius: 1000px; }
- dialog.collapse, .reveal-modal.collapse {
- padding: 0; }
- dialog.full, .reveal-modal.full {
- top: 0;
- left: 0;
- height: 100vh;
- min-height: 100vh;
- margin-left: 0 !important; } }
- @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
- dialog.tiny, .reveal-modal.tiny {
- margin-left: -15%;
- width: 30%; } }
- @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
- dialog.small, .reveal-modal.small {
- margin-left: -20%;
- width: 40%; } }
- @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
- dialog.medium, .reveal-modal.medium {
- margin-left: -30%;
- width: 60%; } }
- @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
- dialog.large, .reveal-modal.large {
- margin-left: -35%;
- width: 70%; } }
- @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
- dialog.xlarge, .reveal-modal.xlarge {
- margin-left: -47.5%;
- width: 95%; } }
-
- @media only screen and (min-width: 40.063em) and (min-width: 40.063em) {
- dialog.full, .reveal-modal.full {
- margin-left: -50vw;
- width: 100vw; } }
-
- @media print {
- dialog, .reveal-modal {
- background: white !important; } }
- /* Tooltips */
- .has-tip {
- border-bottom: dotted 1px #cccccc;
- cursor: help;
- font-weight: bold;
- color: #333333; }
- .has-tip:hover, .has-tip:focus {
- border-bottom: dotted 1px #003f54;
- color: #008cba; }
- .has-tip.tip-left, .has-tip.tip-right {
- float: none !important; }
+ .joyride-tip-guide {
+ width: 300px;
+ left: inherit; }
+ .joyride-tip-guide .joyride-nub.bottom {
+ border-color: #333333 !important;
+ border-bottom-color: transparent !important;
+ border-left-color: transparent !important;
+ border-right-color: transparent !important;
+ bottom: -20px; }
+ .joyride-tip-guide .joyride-nub.right {
+ border-color: #333333 !important;
+ border-top-color: transparent !important;
+ border-right-color: transparent !important;
+ border-bottom-color: transparent !important;
+ top: 22px;
+ left: auto;
+ right: -20px; }
+ .joyride-tip-guide .joyride-nub.left {
+ border-color: #333333 !important;
+ border-top-color: transparent !important;
+ border-left-color: transparent !important;
+ border-bottom-color: transparent !important;
+ top: 22px;
+ left: -20px;
+ right: auto; } }
+ .keystroke,
+ kbd {
+ background-color: #ededed;
+ border-color: #dddddd;
+ color: #222222;
+ border-style: solid;
+ border-width: 1px;
+ margin: 0;
+ font-family: "Consolas", "Menlo", "Courier", monospace;
+ font-size: inherit;
+ padding: 0.125rem 0.25rem 0;
+ border-radius: 3px; }
- .tooltip {
- display: none;
- position: absolute;
- z-index: 999;
+ .label {
font-weight: normal;
- font-size: 0.875rem;
- line-height: 1.3;
- padding: 0.75rem;
- max-width: 85%;
- left: 50%;
- width: 100%;
- color: white;
- background: #333333; }
- .tooltip > .nub {
- display: block;
- left: 5px;
- position: absolute;
- width: 0;
- height: 0;
- border: solid 5px;
- border-color: transparent transparent #333333 transparent;
- top: -10px; }
- .tooltip > .nub.rtl {
- left: auto;
- right: 5px; }
- .tooltip.radius {
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ text-align: center;
+ text-decoration: none;
+ line-height: 1;
+ white-space: nowrap;
+ display: inline-block;
+ position: relative;
+ margin-bottom: inherit;
+ padding: 0.25rem 0.5rem 0.25rem;
+ font-size: 0.6875rem;
+ background-color: #008cba;
+ color: white; }
+ .label.radius {
border-radius: 3px; }
- .tooltip.round {
+ .label.round {
border-radius: 1000px; }
- .tooltip.round > .nub {
- left: 2rem; }
- .tooltip.opened {
- color: #008cba !important;
- border-bottom: dotted 1px #003f54 !important; }
+ .label.alert {
+ background-color: #f04124;
+ color: white; }
+ .label.warning {
+ background-color: #f08a24;
+ color: white; }
+ .label.success {
+ background-color: #43ac6a;
+ color: white; }
+ .label.secondary {
+ background-color: #e7e7e7;
+ color: #333333; }
+ .label.info {
+ background-color: #a0d3e8;
+ color: #333333; }
- .tap-to-close {
- display: block;
- font-size: 0.625rem;
- color: #777777;
- font-weight: normal; }
+ [data-magellan-expedition], [data-magellan-expedition-clone] {
+ background: white;
+ z-index: 50;
+ min-width: 100%;
+ padding: 10px; }
+ [data-magellan-expedition] .sub-nav, [data-magellan-expedition-clone] .sub-nav {
+ margin-bottom: 0; }
+ [data-magellan-expedition] .sub-nav dd, [data-magellan-expedition-clone] .sub-nav dd {
+ margin-bottom: 0; }
+ [data-magellan-expedition] .sub-nav a, [data-magellan-expedition-clone] .sub-nav a {
+ line-height: 1.8em; }
- @media only screen and (min-width: 40.063em) {
- .tooltip > .nub {
- border-color: transparent transparent #333333 transparent;
- top: -10px; }
- .tooltip.tip-top > .nub {
- border-color: #333333 transparent transparent transparent;
- top: auto;
- bottom: -10px; }
- .tooltip.tip-left, .tooltip.tip-right {
- float: none !important; }
- .tooltip.tip-left > .nub {
- border-color: transparent transparent transparent #333333;
- right: -10px;
- left: auto;
- top: 50%;
- margin-top: -5px; }
- .tooltip.tip-right > .nub {
- border-color: transparent #333333 transparent transparent;
- right: auto;
- left: -10px;
- top: 50%;
- margin-top: -5px; } }
- /* Clearing Styles */
- .clearing-thumbs, [data-clearing] {
- margin-bottom: 0;
- margin-left: 0;
- list-style: none; }
- .clearing-thumbs:before, .clearing-thumbs:after, [data-clearing]:before, [data-clearing]:after {
- content: " ";
- display: table; }
- .clearing-thumbs:after, [data-clearing]:after {
- clear: both; }
- .clearing-thumbs li, [data-clearing] li {
- float: left;
- margin-right: 10px; }
- .clearing-thumbs[class*="block-grid-"] li, [data-clearing][class*="block-grid-"] li {
- margin-right: 0; }
+ @-webkit-keyframes rotate {
+ from {
+ -webkit-transform: rotate(0deg); }
- .clearing-blackout {
- background: #333333;
- position: fixed;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- z-index: 998; }
- .clearing-blackout .clearing-close {
- display: block; }
+ to {
+ -webkit-transform: rotate(360deg); } }
+ @-moz-keyframes rotate {
+ from {
+ -moz-transform: rotate(0deg); }
- .clearing-container {
- position: relative;
- z-index: 998;
- height: 100%;
- overflow: hidden;
- margin: 0; }
+ to {
+ -moz-transform: rotate(360deg); } }
+ @-o-keyframes rotate {
+ from {
+ -o-transform: rotate(0deg); }
- .clearing-touch-label {
- position: absolute;
- top: 50%;
- left: 50%;
- color: #aaa;
- font-size: 0.6em; }
+ to {
+ -o-transform: rotate(360deg); } }
+ @keyframes rotate {
+ from {
+ transform: rotate(0deg); }
- .visible-img {
- height: 95%;
+ to {
+ transform: rotate(360deg); } }
+ /* Orbit Graceful Loading */
+ .slideshow-wrapper {
position: relative; }
- .visible-img img {
+ .slideshow-wrapper ul {
+ list-style-type: none;
+ margin: 0; }
+ .slideshow-wrapper ul li,
+ .slideshow-wrapper ul li .orbit-caption {
+ display: none; }
+ .slideshow-wrapper ul li:first-child {
+ display: block; }
+ .slideshow-wrapper .orbit-container {
+ background-color: transparent; }
+ .slideshow-wrapper .orbit-container li {
+ display: block; }
+ .slideshow-wrapper .orbit-container li .orbit-caption {
+ display: block; }
+ .slideshow-wrapper .orbit-container .orbit-bullets li {
+ display: inline-block; }
+ .slideshow-wrapper .preloader {
+ display: block;
+ width: 40px;
+ height: 40px;
position: absolute;
- left: 50%;
top: 50%;
- margin-left: -50%;
- max-height: 100%;
- max-width: 100%; }
+ left: 50%;
+ margin-top: -20px;
+ margin-left: -20px;
+ border: solid 3px;
+ border-color: #555555 white;
+ border-radius: 1000px;
+ animation-name: rotate;
+ animation-duration: 1.5s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear; }
- .clearing-caption {
- color: #cccccc;
- font-size: 0.875em;
- line-height: 1.3;
- margin-bottom: 0;
- text-align: center;
- bottom: 0;
- background: #333333;
+ .orbit-container {
+ overflow: hidden;
width: 100%;
- padding: 10px 30px 20px;
- position: absolute;
- left: 0; }
-
- .clearing-close {
- z-index: 999;
- padding-left: 20px;
- padding-top: 10px;
- font-size: 30px;
- line-height: 1;
- color: #cccccc;
- display: none; }
- .clearing-close:hover, .clearing-close:focus {
- color: #ccc; }
-
- .clearing-assembled .clearing-container {
- height: 100%; }
- .clearing-assembled .clearing-container .carousel > ul {
- display: none; }
-
- .clearing-feature li {
- display: none; }
- .clearing-feature li.clearing-featured-img {
+ position: relative;
+ background: none; }
+ .orbit-container .orbit-slides-container {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ position: relative;
+ -webkit-transform: translateZ(0); }
+ .orbit-container .orbit-slides-container img {
+ display: block;
+ max-width: 100%; }
+ .orbit-container .orbit-slides-container > * {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ margin-left: 100%; }
+ .orbit-container .orbit-slides-container > *:first-child {
+ margin-left: 0%; }
+ .orbit-container .orbit-slides-container > * .orbit-caption {
+ position: absolute;
+ bottom: 0;
+ background-color: rgba(51, 51, 51, 0.8);
+ color: white;
+ width: 100%;
+ padding: 0.625rem 0.875rem;
+ font-size: 0.875rem; }
+ .orbit-container .orbit-slide-number {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ font-size: 12px;
+ color: white;
+ background: transparent;
+ z-index: 10; }
+ .orbit-container .orbit-slide-number span {
+ font-weight: 700;
+ padding: 0.3125rem; }
+ .orbit-container .orbit-timer {
+ position: absolute;
+ top: 12px;
+ right: 10px;
+ height: 6px;
+ width: 100px;
+ z-index: 10; }
+ .orbit-container .orbit-timer .orbit-progress {
+ height: 3px;
+ background-color: rgba(255, 255, 255, 0.3);
+ display: block;
+ width: 0%;
+ position: relative;
+ right: 20px;
+ top: 5px; }
+ .orbit-container .orbit-timer > span {
+ display: none;
+ position: absolute;
+ top: 0px;
+ right: 0;
+ width: 11px;
+ height: 14px;
+ border: solid 4px white;
+ border-top: none;
+ border-bottom: none; }
+ .orbit-container .orbit-timer.paused > span {
+ right: -4px;
+ top: 0px;
+ width: 11px;
+ height: 14px;
+ border: inset 8px;
+ border-left-style: solid;
+ border-color: transparent;
+ border-left-color: white; }
+ .orbit-container .orbit-timer.paused > span.dark {
+ border-left-color: #333333; }
+ .orbit-container:hover .orbit-timer > span {
display: block; }
-
- @media only screen and (min-width: 40.063em) {
- .clearing-main-prev,
- .clearing-main-next {
+ .orbit-container .orbit-prev,
+ .orbit-container .orbit-next {
position: absolute;
- height: 100%;
- width: 40px;
- top: 0; }
- .clearing-main-prev > span,
- .clearing-main-next > span {
+ top: 45%;
+ margin-top: -25px;
+ width: 36px;
+ height: 60px;
+ line-height: 50px;
+ color: white;
+ background-color: transparent;
+ text-indent: -9999px !important;
+ z-index: 10; }
+ .orbit-container .orbit-prev:hover,
+ .orbit-container .orbit-next:hover {
+ background-color: rgba(0, 0, 0, 0.3); }
+ .orbit-container .orbit-prev > span,
+ .orbit-container .orbit-next > span {
position: absolute;
top: 50%;
+ margin-top: -10px;
display: block;
width: 0;
height: 0;
- border: solid 12px; }
- .clearing-main-prev > span:hover,
- .clearing-main-next > span:hover {
- opacity: 0.8; }
-
- .clearing-main-prev {
+ border: inset 10px; }
+ .orbit-container .orbit-prev {
left: 0; }
- .clearing-main-prev > span {
- left: 5px;
+ .orbit-container .orbit-prev > span {
+ border-right-style: solid;
border-color: transparent;
- border-right-color: #cccccc; }
-
- .clearing-main-next {
+ border-right-color: white; }
+ .orbit-container .orbit-prev:hover > span {
+ border-right-color: white; }
+ .orbit-container .orbit-next {
right: 0; }
- .clearing-main-next > span {
+ .orbit-container .orbit-next > span {
border-color: transparent;
- border-left-color: #cccccc; }
+ border-left-style: solid;
+ border-left-color: white;
+ left: 50%;
+ margin-left: -4px; }
+ .orbit-container .orbit-next:hover > span {
+ border-left-color: white; }
+
+ .orbit-bullets-container {
+ text-align: center; }
+
+ .orbit-bullets {
+ margin: 0 auto 30px auto;
+ overflow: hidden;
+ position: relative;
+ top: 10px;
+ float: none;
+ text-align: center;
+ display: block; }
+ .orbit-bullets li {
+ cursor: pointer;
+ display: inline-block;
+ width: 0.5625rem;
+ height: 0.5625rem;
+ background: #cccccc;
+ float: none;
+ margin-right: 6px;
+ border-radius: 1000px; }
+ .orbit-bullets li.active {
+ background: #999999; }
+ .orbit-bullets li:last-child {
+ margin-right: 0; }
+
+ .touch .orbit-container .orbit-prev,
+ .touch .orbit-container .orbit-next {
+ display: none; }
+ .touch .orbit-bullets {
+ display: none; }
+
+ @media only screen and (min-width: 40.063em) {
+ .touch .orbit-container .orbit-prev,
+ .touch .orbit-container .orbit-next {
+ display: inherit; }
+ .touch .orbit-bullets {
+ display: block; } }
+ @media only screen and (max-width: 40em) {
+ .orbit-stack-on-small .orbit-slides-container {
+ height: auto !important; }
+ .orbit-stack-on-small .orbit-slides-container > * {
+ position: relative;
+ margin: 0% !important;
+ opacity: 1 !important; }
+ .orbit-stack-on-small .orbit-slide-number {
+ display: none; }
+
+ .orbit-timer {
+ display: none; }
+
+ .orbit-next, .orbit-prev {
+ display: none; }
+
+ .orbit-bullets {
+ display: none; } }
+ ul.pagination {
+ display: block;
+ min-height: 1.5rem;
+ margin-left: -0.3125rem; }
+ ul.pagination li {
+ height: 1.5rem;
+ color: #222222;
+ font-size: 0.875rem;
+ margin-left: 0.3125rem; }
+ ul.pagination li a, ul.pagination li button {
+ display: block;
+ padding: 0.0625rem 0.625rem 0.0625rem;
+ color: #999999;
+ background: none;
+ border-radius: 3px;
+ font-weight: normal;
+ font-size: 1em;
+ line-height: inherit;
+ transition: background-color 300ms ease-out; }
+ ul.pagination li:hover a,
+ ul.pagination li a:focus, ul.pagination li:hover button,
+ ul.pagination li button:focus {
+ background: #e6e6e6; }
+ ul.pagination li.unavailable a, ul.pagination li.unavailable button {
+ cursor: default;
+ color: #999999; }
+ ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus, ul.pagination li.unavailable:hover button, ul.pagination li.unavailable button:focus {
+ background: transparent; }
+ ul.pagination li.current a, ul.pagination li.current button {
+ background: #008cba;
+ color: white;
+ font-weight: bold;
+ cursor: default; }
+ ul.pagination li.current a:hover, ul.pagination li.current a:focus, ul.pagination li.current button:hover, ul.pagination li.current button:focus {
+ background: #008cba; }
+ ul.pagination li {
+ float: left;
+ display: block; }
+
+ /* Pagination centred wrapper */
+ .pagination-centered {
+ text-align: center; }
+ .pagination-centered ul.pagination li {
+ float: none;
+ display: inline-block; }
- .clearing-main-prev.disabled,
- .clearing-main-next.disabled {
- opacity: 0.3; }
+ /* Panels */
+ .panel {
+ border-style: solid;
+ border-width: 1px;
+ border-color: #d8d8d8;
+ margin-bottom: 1.25rem;
+ padding: 1.25rem;
+ background: #f2f2f2;
+ color: #333333; }
+ .panel > :first-child {
+ margin-top: 0; }
+ .panel > :last-child {
+ margin-bottom: 0; }
+ .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6, .panel p, .panel li, .panel dl {
+ color: #333333; }
+ .panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6 {
+ line-height: 1;
+ margin-bottom: 0.625rem; }
+ .panel h1.subheader, .panel h2.subheader, .panel h3.subheader, .panel h4.subheader, .panel h5.subheader, .panel h6.subheader {
+ line-height: 1.4; }
+ .panel.callout {
+ border-style: solid;
+ border-width: 1px;
+ border-color: #b6edff;
+ margin-bottom: 1.25rem;
+ padding: 1.25rem;
+ background: #ecfaff;
+ color: #333333; }
+ .panel.callout > :first-child {
+ margin-top: 0; }
+ .panel.callout > :last-child {
+ margin-bottom: 0; }
+ .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6, .panel.callout p, .panel.callout li, .panel.callout dl {
+ color: #333333; }
+ .panel.callout h1, .panel.callout h2, .panel.callout h3, .panel.callout h4, .panel.callout h5, .panel.callout h6 {
+ line-height: 1;
+ margin-bottom: 0.625rem; }
+ .panel.callout h1.subheader, .panel.callout h2.subheader, .panel.callout h3.subheader, .panel.callout h4.subheader, .panel.callout h5.subheader, .panel.callout h6.subheader {
+ line-height: 1.4; }
+ .panel.callout a:not(.button) {
+ color: #008cba; }
+ .panel.radius {
+ border-radius: 3px; }
- .clearing-assembled .clearing-container .carousel {
- background: rgba(51, 51, 51, 0.8);
- height: 120px;
- margin-top: 10px;
- text-align: center; }
- .clearing-assembled .clearing-container .carousel > ul {
- display: inline-block;
- z-index: 999;
- height: 100%;
- position: relative;
- float: none; }
- .clearing-assembled .clearing-container .carousel > ul li {
- display: block;
- width: 120px;
- min-height: inherit;
- float: left;
- overflow: hidden;
- margin-right: 0;
- padding: 0;
- position: relative;
- cursor: pointer;
- opacity: 0.4;
- clear: none; }
- .clearing-assembled .clearing-container .carousel > ul li.fix-height img {
- height: 100%;
- max-width: none; }
- .clearing-assembled .clearing-container .carousel > ul li a.th {
- border: none;
- box-shadow: none;
- display: block; }
- .clearing-assembled .clearing-container .carousel > ul li img {
- cursor: pointer !important;
- width: 100% !important; }
- .clearing-assembled .clearing-container .carousel > ul li.visible {
- opacity: 1; }
- .clearing-assembled .clearing-container .carousel > ul li:hover {
- opacity: 0.8; }
- .clearing-assembled .clearing-container .visible-img {
- background: #333333;
- overflow: hidden;
- height: 85%; }
+ /* Pricing Tables */
+ .pricing-table {
+ border: solid 1px #dddddd;
+ margin-left: 0;
+ margin-bottom: 1.25rem; }
+ .pricing-table * {
+ list-style: none;
+ line-height: 1; }
+ .pricing-table .title {
+ background-color: #333333;
+ padding: 0.9375rem 1.25rem;
+ text-align: center;
+ color: #eeeeee;
+ font-weight: normal;
+ font-size: 1rem;
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
+ .pricing-table .price {
+ background-color: #f6f6f6;
+ padding: 0.9375rem 1.25rem;
+ text-align: center;
+ color: #333333;
+ font-weight: normal;
+ font-size: 2rem;
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
+ .pricing-table .description {
+ background-color: white;
+ padding: 0.9375rem;
+ text-align: center;
+ color: #777777;
+ font-size: 0.75rem;
+ font-weight: normal;
+ line-height: 1.4;
+ border-bottom: dotted 1px #dddddd; }
+ .pricing-table .bullet-item {
+ background-color: white;
+ padding: 0.9375rem;
+ text-align: center;
+ color: #333333;
+ font-size: 0.875rem;
+ font-weight: normal;
+ border-bottom: dotted 1px #dddddd; }
+ .pricing-table .cta-button {
+ background-color: white;
+ text-align: center;
+ padding: 1.25rem 1.25rem 0; }
- .clearing-close {
- position: absolute;
- top: 10px;
- right: 20px;
- padding-left: 0;
- padding-top: 0; } }
/* Progress Bar */
.progress {
background-color: #f6f6f6;
@@ @@ -3560,1507 +3758,2049 @@ dialog[open] {
.progress.round .meter {
border-radius: 999px; }
- .sub-nav {
+ .range-slider {
display: block;
- width: auto;
- overflow: hidden;
- margin: -0.25rem 0 1.125rem;
- padding-top: 0.25rem;
- margin-right: 0;
- margin-left: -0.75rem; }
- .sub-nav dt {
- text-transform: uppercase; }
- .sub-nav dt,
- .sub-nav dd,
- .sub-nav li {
- float: left;
- display: inline;
- margin-left: 1rem;
- margin-bottom: 0.625rem;
- font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
- font-weight: normal;
- font-size: 0.875rem;
- color: #999999; }
- .sub-nav dt a,
- .sub-nav dd a,
- .sub-nav li a {
- text-decoration: none;
- color: #999999;
- padding: 0.1875rem 1rem; }
- .sub-nav dt a:hover,
- .sub-nav dd a:hover,
- .sub-nav li a:hover {
- color: #737373; }
- .sub-nav dt.active a,
- .sub-nav dd.active a,
- .sub-nav li.active a {
- border-radius: 3px;
- font-weight: normal;
- background: #008cba;
- padding: 0.1875rem 1rem;
- cursor: default;
- color: white; }
- .sub-nav dt.active a:hover,
- .sub-nav dd.active a:hover,
- .sub-nav li.active a:hover {
- background: #0078a0; }
-
- /* Foundation Joyride */
- .joyride-list {
- display: none; }
-
- /* Default styles for the container */
- .joyride-tip-guide {
- display: none;
- position: absolute;
- background: #333333;
- color: white;
- z-index: 101;
- top: 0;
- left: 2.5%;
- font-family: inherit;
- font-weight: normal;
- width: 95%; }
-
- .lt-ie9 .joyride-tip-guide {
- max-width: 800px;
- left: 50%;
- margin-left: -400px; }
-
- .joyride-content-wrapper {
+ position: relative;
width: 100%;
- padding: 1.125rem 1.25rem 1.5rem; }
- .joyride-content-wrapper .button {
- margin-bottom: 0 !important; }
-
- /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
- .joyride-tip-guide .joyride-nub {
- display: block;
- position: absolute;
- left: 22px;
- width: 0;
- height: 0;
- border: 10px solid #333333; }
- .joyride-tip-guide .joyride-nub.top {
- border-top-style: solid;
- border-color: #333333;
- border-top-color: transparent !important;
- border-left-color: transparent !important;
- border-right-color: transparent !important;
- top: -20px; }
- .joyride-tip-guide .joyride-nub.bottom {
- border-bottom-style: solid;
- border-color: #333333 !important;
- border-bottom-color: transparent !important;
- border-left-color: transparent !important;
- border-right-color: transparent !important;
- bottom: -20px; }
- .joyride-tip-guide .joyride-nub.right {
- right: -20px; }
- .joyride-tip-guide .joyride-nub.left {
- left: -20px; }
-
- /* Typography */
- .joyride-tip-guide h1,
- .joyride-tip-guide h2,
- .joyride-tip-guide h3,
- .joyride-tip-guide h4,
- .joyride-tip-guide h5,
- .joyride-tip-guide h6 {
- line-height: 1.25;
- margin: 0;
- font-weight: bold;
- color: white; }
-
- .joyride-tip-guide p {
- margin: 0 0 1.125rem 0;
- font-size: 0.875rem;
- line-height: 1.3; }
+ height: 1rem;
+ border: 1px solid #dddddd;
+ margin: 1.25rem 0;
+ -ms-touch-action: none;
+ touch-action: none;
+ background: #fafafa; }
+ .range-slider.vertical-range {
+ display: block;
+ position: relative;
+ width: 100%;
+ height: 1rem;
+ border: 1px solid #dddddd;
+ margin: 1.25rem 0;
+ -ms-touch-action: none;
+ touch-action: none;
+ display: inline-block;
+ width: 1rem;
+ height: 12.5rem; }
+ .range-slider.vertical-range .range-slider-handle {
+ margin-top: 0;
+ margin-left: -0.5rem;
+ position: absolute;
+ bottom: -10.5rem; }
+ .range-slider.vertical-range .range-slider-active-segment {
+ width: 0.875rem;
+ height: auto;
+ bottom: 0; }
+ .range-slider.radius {
+ background: #fafafa;
+ border-radius: 3px; }
+ .range-slider.radius .range-slider-handle {
+ background: #008cba;
+ border-radius: 3px; }
+ .range-slider.radius .range-slider-handle:hover {
+ background: #007ba4; }
+ .range-slider.round {
+ background: #fafafa;
+ border-radius: 1000px; }
+ .range-slider.round .range-slider-handle {
+ background: #008cba;
+ border-radius: 1000px; }
+ .range-slider.round .range-slider-handle:hover {
+ background: #007ba4; }
+ .range-slider.disabled, .range-slider[disabled] {
+ background: #fafafa;
+ cursor: default;
+ opacity: 0.7; }
+ .range-slider.disabled .range-slider-handle, .range-slider[disabled] .range-slider-handle {
+ background: #008cba;
+ cursor: default;
+ opacity: 0.7; }
+ .range-slider.disabled .range-slider-handle:hover, .range-slider[disabled] .range-slider-handle:hover {
+ background: #007ba4; }
- .joyride-timer-indicator-wrap {
- width: 50px;
- height: 3px;
- border: solid 1px #555555;
+ .range-slider-active-segment {
+ display: inline-block;
position: absolute;
- right: 1.0625rem;
- bottom: 1rem; }
-
- .joyride-timer-indicator {
- display: block;
- width: 0;
- height: inherit;
- background: #666666; }
+ height: 0.875rem;
+ background: #e5e5e5; }
- .joyride-close-tip {
+ .range-slider-handle {
+ display: inline-block;
position: absolute;
- right: 12px;
- top: 10px;
- color: #777777 !important;
- text-decoration: none;
- font-size: 24px;
- font-weight: normal;
- line-height: 0.5 !important; }
- .joyride-close-tip:hover, .joyride-close-tip:focus {
- color: #eeeeee !important; }
+ z-index: 1;
+ top: -0.3125rem;
+ width: 2rem;
+ height: 1.375rem;
+ border: 1px solid none;
+ cursor: pointer;
+ -ms-touch-action: manipulation;
+ touch-action: manipulation;
+ background: #008cba; }
+ .range-slider-handle:hover {
+ background: #007ba4; }
- .joyride-modal-bg {
+ .reveal-modal-bg {
position: fixed;
- height: 100%;
- width: 100%;
- background: transparent;
- background: rgba(0, 0, 0, 0.5);
- z-index: 100;
- display: none;
top: 0;
+ bottom: 0;
left: 0;
- cursor: pointer; }
+ right: 0;
+ background: black;
+ background: rgba(0, 0, 0, 0.45);
+ z-index: 1004;
+ display: none;
+ left: 0; }
- .joyride-expose-wrapper {
- background-color: #ffffff;
+ .reveal-modal, dialog {
+ visibility: hidden;
+ display: none;
position: absolute;
+ z-index: 1005;
+ width: 100vw;
+ top: 0;
border-radius: 3px;
- z-index: 102;
- box-shadow: 0 0 15px white; }
+ left: 0;
+ background-color: white;
+ padding: 1.25rem;
+ border: solid 1px #666666;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+ padding: 1.875rem; }
+ @media only screen and (max-width: 40em) {
+ .reveal-modal, dialog {
+ min-height: 100vh; } }
+ .reveal-modal .column, dialog .column, .reveal-modal .columns, dialog .columns {
+ min-width: 0; }
+ .reveal-modal > :first-child, dialog > :first-child {
+ margin-top: 0; }
+ .reveal-modal > :last-child, dialog > :last-child {
+ margin-bottom: 0; }
+ @media only screen and (min-width: 40.063em) {
+ .reveal-modal, dialog {
+ width: 80%;
+ max-width: 62.5rem;
+ left: 0;
+ right: 0;
+ margin: 0 auto; } }
+ @media only screen and (min-width: 40.063em) {
+ .reveal-modal, dialog {
+ top: 6.25rem; } }
+ .reveal-modal.radius, dialog.radius {
+ border-radius: 3px; }
+ .reveal-modal.round, dialog.round {
+ border-radius: 1000px; }
+ .reveal-modal.collapse, dialog.collapse {
+ padding: 0; }
+ @media only screen and (min-width: 40.063em) {
+ .reveal-modal.tiny, dialog.tiny {
+ width: 30%;
+ max-width: 62.5rem;
+ left: 0;
+ right: 0;
+ margin: 0 auto; } }
+ @media only screen and (min-width: 40.063em) {
+ .reveal-modal.small, dialog.small {
+ width: 40%;
+ max-width: 62.5rem;
+ left: 0;
+ right: 0;
+ margin: 0 auto; } }
+ @media only screen and (min-width: 40.063em) {
+ .reveal-modal.medium, dialog.medium {
+ width: 60%;
+ max-width: 62.5rem;
+ left: 0;
+ right: 0;
+ margin: 0 auto; } }
+ @media only screen and (min-width: 40.063em) {
+ .reveal-modal.large, dialog.large {
+ width: 70%;
+ max-width: 62.5rem;
+ left: 0;
+ right: 0;
+ margin: 0 auto; } }
+ @media only screen and (min-width: 40.063em) {
+ .reveal-modal.xlarge, dialog.xlarge {
+ width: 95%;
+ max-width: 62.5rem;
+ left: 0;
+ right: 0;
+ margin: 0 auto; } }
+ .reveal-modal.full, dialog.full {
+ top: 0;
+ left: 0;
+ height: 100%;
+ height: 100vh;
+ min-height: 100vh;
+ max-width: none !important;
+ margin-left: 0 !important; }
+ @media only screen and (min-width: 40.063em) {
+ .reveal-modal.full, dialog.full {
+ width: 100vw;
+ max-width: 62.5rem;
+ left: 0;
+ right: 0;
+ margin: 0 auto; } }
+ .reveal-modal .close-reveal-modal, dialog .close-reveal-modal {
+ font-size: 2.5rem;
+ line-height: 1;
+ position: absolute;
+ top: 0.5rem;
+ right: 0.6875rem;
+ color: #aaaaaa;
+ font-weight: bold;
+ cursor: pointer; }
+
+ dialog {
+ display: none; }
+ dialog::backdrop, dialog + .backdrop {
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: black;
+ background: rgba(0, 0, 0, 0.45);
+ z-index: auto;
+ display: none;
+ left: 0; }
+ dialog[open] {
+ display: block; }
+
+ @media print {
+ dialog, .reveal-modal, dialog {
+ display: none;
+ background: white !important; } }
+ .side-nav {
+ display: block;
+ margin: 0;
+ padding: 0.875rem 0;
+ list-style-type: none;
+ list-style-position: outside;
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
+ .side-nav li {
+ margin: 0 0 0.4375rem 0;
+ font-size: 0.875rem;
+ font-weight: normal; }
+ .side-nav li a:not(.button) {
+ display: block;
+ color: #008cba;
+ margin: 0;
+ padding: 0.4375rem 0.875rem; }
+ .side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus {
+ background: rgba(0, 0, 0, 0.025);
+ color: #1cc7ff; }
+ .side-nav li.active > a:first-child:not(.button) {
+ color: #1cc7ff;
+ font-weight: normal;
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; }
+ .side-nav li.divider {
+ border-top: 1px solid;
+ height: 0;
+ padding: 0;
+ list-style: none;
+ border-top-color: white; }
+ .side-nav li.heading {
+ color: #008cba;
+ font-size: 0.875rem;
+ font-weight: bold;
+ text-transform: uppercase; }
+
+ .split.button {
+ position: relative;
+ padding-right: 5.0625rem; }
+ .split.button span {
+ display: block;
+ height: 100%;
+ position: absolute;
+ right: 0;
+ top: 0;
+ border-left: solid 1px; }
+ .split.button span:after {
+ position: absolute;
+ content: "";
+ width: 0;
+ height: 0;
+ display: block;
+ border-style: inset;
+ top: 50%;
+ left: 50%; }
+ .split.button span:active {
+ background-color: rgba(0, 0, 0, 0.1); }
+ .split.button span {
+ border-left-color: rgba(255, 255, 255, 0.5); }
+ .split.button span {
+ width: 3.09375rem; }
+ .split.button span:after {
+ border-top-style: solid;
+ border-width: 0.375rem;
+ top: 48%;
+ margin-left: -0.375rem; }
+ .split.button span:after {
+ border-color: white transparent transparent transparent; }
+ .split.button.secondary span {
+ border-left-color: rgba(255, 255, 255, 0.5); }
+ .split.button.secondary span:after {
+ border-color: white transparent transparent transparent; }
+ .split.button.alert span {
+ border-left-color: rgba(255, 255, 255, 0.5); }
+ .split.button.success span {
+ border-left-color: rgba(255, 255, 255, 0.5); }
+ .split.button.tiny {
+ padding-right: 3.75rem; }
+ .split.button.tiny span {
+ width: 2.25rem; }
+ .split.button.tiny span:after {
+ border-top-style: solid;
+ border-width: 0.375rem;
+ top: 48%;
+ margin-left: -0.375rem; }
+ .split.button.small {
+ padding-right: 4.375rem; }
+ .split.button.small span {
+ width: 2.625rem; }
+ .split.button.small span:after {
+ border-top-style: solid;
+ border-width: 0.4375rem;
+ top: 48%;
+ margin-left: -0.375rem; }
+ .split.button.large {
+ padding-right: 5.5rem; }
+ .split.button.large span {
+ width: 3.4375rem; }
+ .split.button.large span:after {
+ border-top-style: solid;
+ border-width: 0.3125rem;
+ top: 48%;
+ margin-left: -0.375rem; }
+ .split.button.expand {
+ padding-left: 2rem; }
+ .split.button.secondary span:after {
+ border-color: #333333 transparent transparent transparent; }
+ .split.button.radius span {
+ -webkit-border-bottom-right-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px; }
+ .split.button.round span {
+ -webkit-border-bottom-right-radius: 1000px;
+ -webkit-border-top-right-radius: 1000px;
+ border-bottom-right-radius: 1000px;
+ border-top-right-radius: 1000px; }
- .joyride-expose-cover {
- background: transparent;
- border-radius: 3px;
- position: absolute;
- z-index: 9999;
- top: 0;
- left: 0; }
+ .sub-nav {
+ display: block;
+ width: auto;
+ overflow: hidden;
+ margin-bottom: -0.25rem 0 1.125rem;
+ padding-top: 0.25rem; }
+ .sub-nav dt {
+ text-transform: uppercase; }
+ .sub-nav dt,
+ .sub-nav dd,
+ .sub-nav li {
+ float: left;
+ display: inline;
+ margin-left: 1rem;
+ margin-bottom: 0;
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ font-weight: normal;
+ font-size: 0.875rem;
+ color: #999999; }
+ .sub-nav dt a,
+ .sub-nav dd a,
+ .sub-nav li a {
+ text-decoration: none;
+ color: #999999;
+ padding: 0.1875rem 1rem; }
+ .sub-nav dt a:hover,
+ .sub-nav dd a:hover,
+ .sub-nav li a:hover {
+ color: #737373; }
+ .sub-nav dt.active a,
+ .sub-nav dd.active a,
+ .sub-nav li.active a {
+ border-radius: 3px;
+ font-weight: normal;
+ background: #008cba;
+ padding: 0.1875rem 1rem;
+ cursor: default;
+ color: white; }
+ .sub-nav dt.active a:hover,
+ .sub-nav dd.active a:hover,
+ .sub-nav li.active a:hover {
+ background: #0078a0; }
- /* Styles for screens that are at least 768px; */
- @media only screen and (min-width: 40.063em) {
- .joyride-tip-guide {
- width: 300px;
- left: inherit; }
- .joyride-tip-guide .joyride-nub.bottom {
- border-color: #333333 !important;
- border-bottom-color: transparent !important;
- border-left-color: transparent !important;
- border-right-color: transparent !important;
- bottom: -20px; }
- .joyride-tip-guide .joyride-nub.right {
- border-color: #333333 !important;
- border-top-color: transparent !important;
- border-right-color: transparent !important;
- border-bottom-color: transparent !important;
- top: 22px;
- left: auto;
- right: -20px; }
- .joyride-tip-guide .joyride-nub.left {
- border-color: #333333 !important;
- border-top-color: transparent !important;
- border-left-color: transparent !important;
- border-bottom-color: transparent !important;
- top: 22px;
- left: -20px;
- right: auto; } }
- .label {
- font-weight: normal;
- font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
- text-align: center;
- text-decoration: none;
- line-height: 1;
- white-space: nowrap;
- display: inline-block;
+ .switch {
+ padding: 0;
+ border: none;
position: relative;
- margin-bottom: inherit;
- padding: 0.25rem 0.5rem 0.375rem;
- font-size: 0.6875rem;
- background-color: #008cba;
- color: white; }
- .label.radius {
+ outline: 0;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none; }
+ .switch label {
+ display: block;
+ margin-bottom: 1rem;
+ position: relative;
+ color: transparent;
+ background: #dddddd;
+ text-indent: 100%;
+ width: 4rem;
+ height: 2rem;
+ cursor: pointer;
+ transition: left 0.15s ease-out; }
+ .switch input {
+ opacity: 0;
+ position: absolute;
+ top: 9px;
+ left: 10px;
+ padding: 0; }
+ .switch input + label {
+ margin-left: 0;
+ margin-right: 0; }
+ .switch label:after {
+ content: "";
+ display: block;
+ background: white;
+ position: absolute;
+ top: .25rem;
+ left: .25rem;
+ width: 1.5rem;
+ height: 1.5rem;
+ -webkit-transition: left 0.15s ease-out;
+ -moz-transition: left 0.15s ease-out;
+ transition: left 0.15s ease-out;
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0); }
+ .switch input:checked + label {
+ background: #008cba; }
+ .switch input:checked + label:after {
+ left: 2.25rem; }
+ .switch label {
+ width: 4rem;
+ height: 2rem; }
+ .switch label:after {
+ width: 1.5rem;
+ height: 1.5rem; }
+ .switch input:checked + label:after {
+ left: 2.25rem; }
+ .switch label {
+ color: transparent;
+ background: #dddddd; }
+ .switch label:after {
+ background: white; }
+ .switch input:checked + label {
+ background: #008cba; }
+ .switch.large label {
+ width: 5rem;
+ height: 2.5rem; }
+ .switch.large label:after {
+ width: 2rem;
+ height: 2rem; }
+ .switch.large input:checked + label:after {
+ left: 2.75rem; }
+ .switch.small label {
+ width: 3.5rem;
+ height: 1.75rem; }
+ .switch.small label:after {
+ width: 1.25rem;
+ height: 1.25rem; }
+ .switch.small input:checked + label:after {
+ left: 2rem; }
+ .switch.tiny label {
+ width: 3rem;
+ height: 1.5rem; }
+ .switch.tiny label:after {
+ width: 1rem;
+ height: 1rem; }
+ .switch.tiny input:checked + label:after {
+ left: 1.75rem; }
+ .switch.radius label {
+ border-radius: 4px; }
+ .switch.radius label:after {
border-radius: 3px; }
- .label.round {
+ .switch.round {
border-radius: 1000px; }
- .label.alert {
- background-color: #f04124;
- color: white; }
- .label.success {
- background-color: #43ac6a;
- color: white; }
- .label.secondary {
- background-color: #e7e7e7;
- color: #333333; }
+ .switch.round label {
+ border-radius: 2rem; }
+ .switch.round label:after {
+ border-radius: 2rem; }
- .off-canvas-wrap {
- -webkit-backface-visibility: hidden;
- position: relative;
- width: 100%;
- overflow: hidden; }
- .off-canvas-wrap.move-right, .off-canvas-wrap.move-left {
- min-height: 100%;
- -webkit-overflow-scrolling: touch; }
+ table {
+ background: white;
+ margin-bottom: 1.25rem;
+ border: solid 1px #dddddd;
+ table-layout: auto; }
+ table caption {
+ background: transparent;
+ color: #222222;
+ font-size: 1rem;
+ font-weight: bold; }
+ table thead {
+ background: whitesmoke; }
+ table thead tr th,
+ table thead tr td {
+ padding: 0.5rem 0.625rem 0.625rem;
+ font-size: 0.875rem;
+ font-weight: bold;
+ color: #222222; }
+ table tfoot {
+ background: whitesmoke; }
+ table tfoot tr th,
+ table tfoot tr td {
+ padding: 0.5rem 0.625rem 0.625rem;
+ font-size: 0.875rem;
+ font-weight: bold;
+ color: #222222; }
+ table tr th,
+ table tr td {
+ padding: 0.5625rem 0.625rem;
+ font-size: 0.875rem;
+ color: #222222;
+ text-align: left; }
+ table tr.even, table tr.alt, table tr:nth-of-type(even) {
+ background: #f9f9f9; }
+ table thead tr th,
+ table tfoot tr th,
+ table tfoot tr td,
+ table tbody tr th,
+ table tbody tr td,
+ table tr td {
+ display: table-cell;
+ line-height: 1.125rem; }
- .inner-wrap {
- -webkit-backface-visibility: hidden;
- position: relative;
- width: 100%;
- -webkit-transition: -webkit-transform 500ms ease;
- -moz-transition: -moz-transform 500ms ease;
- -ms-transition: -ms-transform 500ms ease;
- -o-transition: -o-transform 500ms ease;
- transition: transform 500ms ease; }
- .inner-wrap:before, .inner-wrap:after {
+ .tabs {
+ margin-bottom: 0 !important;
+ margin-left: 0; }
+ .tabs:before, .tabs:after {
content: " ";
display: table; }
- .inner-wrap:after {
+ .tabs:after {
clear: both; }
-
- .tab-bar {
- -webkit-backface-visibility: hidden;
- background: #333333;
- color: white;
- height: 2.8125rem;
- line-height: 2.8125rem;
- position: relative; }
- .tab-bar h1, .tab-bar h2, .tab-bar h3, .tab-bar h4, .tab-bar h5, .tab-bar h6 {
- color: white;
- font-weight: bold;
- line-height: 2.8125rem;
- margin: 0; }
- .tab-bar h1, .tab-bar h2, .tab-bar h3, .tab-bar h4 {
- font-size: 1.125rem; }
-
- .left-small {
- width: 2.8125rem;
- height: 2.8125rem;
- position: absolute;
- top: 0;
- border-right: solid 1px #1a1a1a;
- left: 0; }
-
- .right-small {
- width: 2.8125rem;
- height: 2.8125rem;
- position: absolute;
- top: 0;
- border-left: solid 1px #1a1a1a;
- right: 0; }
-
- .tab-bar-section {
- padding: 0 0.625rem;
- position: absolute;
- text-align: center;
- height: 2.8125rem;
- top: 0; }
- @media only screen and (min-width: 40.063em) {
- .tab-bar-section {
- text-align: left; } }
- .tab-bar-section.left {
- left: 0;
- right: 2.8125rem; }
- .tab-bar-section.right {
- left: 2.8125rem;
- right: 0; }
- .tab-bar-section.middle {
- left: 2.8125rem;
- right: 2.8125rem; }
-
- .tab-bar .menu-icon {
- text-indent: 2.1875rem;
- width: 2.8125rem;
- height: 2.8125rem;
- display: block;
- line-height: 2.0625rem;
- padding: 0;
- color: white;
- position: relative;
- transform: translate3d(0, 0, 0); }
- .tab-bar .menu-icon span:after {
- content: '';
- position: absolute;
+ .tabs dd, .tabs .tab-title {
+ position: relative;
+ margin-bottom: 0 !important;
+ list-style: none;
+ float: left; }
+ .tabs dd > a, .tabs .tab-title > a {
+ outline: none;
+ display: block;
+ background-color: #efefef;
+ color: #222222;
+ padding: 1rem 2rem;
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ font-size: 1rem; }
+ .tabs dd > a:hover, .tabs .tab-title > a:hover {
+ background-color: #e1e1e1; }
+ .tabs dd.active a, .tabs .tab-title.active a {
+ background-color: white;
+ color: #222222; }
+ .tabs.radius dd:first-child a, .tabs.radius .tab:first-child a {
+ -webkit-border-bottom-left-radius: 3px;
+ -webkit-border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ border-top-left-radius: 3px; }
+ .tabs.radius dd:last-child a, .tabs.radius .tab:last-child a {
+ -webkit-border-bottom-right-radius: 3px;
+ -webkit-border-top-right-radius: 3px;
+ border-bottom-right-radius: 3px;
+ border-top-right-radius: 3px; }
+ .tabs.vertical dd, .tabs.vertical .tab-title {
+ position: inherit;
+ float: none;
display: block;
- height: 0;
- top: 50%;
- margin-top: -0.5rem;
- left: 0.90625rem;
- box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
- width: 1rem; }
- .tab-bar .menu-icon span:hover:after {
- box-shadow: 0 0px 0 1px #b3b3b3, 0 7px 0 1px #b3b3b3, 0 14px 0 1px #b3b3b3; }
-
- .left-off-canvas-menu {
- -webkit-backface-visibility: hidden;
- width: 15.625rem;
- top: 0;
- bottom: 0;
- position: absolute;
- overflow-y: auto;
- background: #333333;
- z-index: 1001;
- box-sizing: content-box;
- transition: transform 500ms ease 0s;
- -webkit-overflow-scrolling: touch;
- -ms-transform: translate(-100%, 0);
- -webkit-transform: translate3d(-100%, 0, 0);
- -moz-transform: translate3d(-100%, 0, 0);
- -ms-transform: translate3d(-100%, 0, 0);
- -o-transform: translate3d(-100%, 0, 0);
- transform: translate3d(-100%, 0, 0);
- left: 0; }
- .left-off-canvas-menu * {
- -webkit-backface-visibility: hidden; }
+ top: auto; }
- .right-off-canvas-menu {
- -webkit-backface-visibility: hidden;
- width: 15.625rem;
- top: 0;
- bottom: 0;
- position: absolute;
- overflow-y: auto;
- background: #333333;
- z-index: 1001;
- box-sizing: content-box;
- transition: transform 500ms ease 0s;
- -webkit-overflow-scrolling: touch;
- -ms-transform: translate(100%, 0);
- -webkit-transform: translate3d(100%, 0, 0);
- -moz-transform: translate3d(100%, 0, 0);
- -ms-transform: translate3d(100%, 0, 0);
- -o-transform: translate3d(100%, 0, 0);
- transform: translate3d(100%, 0, 0);
- right: 0; }
- .right-off-canvas-menu * {
- -webkit-backface-visibility: hidden; }
+ .tabs-content {
+ margin-bottom: 1.5rem;
+ width: 100%; }
+ .tabs-content:before, .tabs-content:after {
+ content: " ";
+ display: table; }
+ .tabs-content:after {
+ clear: both; }
+ .tabs-content > .content {
+ display: none;
+ float: left;
+ padding: 0.9375rem 0;
+ width: 100%; }
+ .tabs-content > .content.active {
+ display: block;
+ float: none; }
+ .tabs-content > .content.contained {
+ padding: 0.9375rem; }
+ .tabs-content.vertical {
+ display: block; }
+ .tabs-content.vertical > .content {
+ padding: 0 0.9375rem; }
- ul.off-canvas-list {
- list-style-type: none;
- padding: 0;
- margin: 0; }
- ul.off-canvas-list li label {
- padding: 0.3rem 0.9375rem;
- color: #999999;
- text-transform: uppercase;
- font-weight: bold;
- background: #444444;
- border-top: 1px solid #5e5e5e;
- border-bottom: none;
- margin: 0; }
- ul.off-canvas-list li a {
- display: block;
- padding: 0.66667rem;
- color: rgba(255, 255, 255, 0.7);
- border-bottom: 1px solid #262626;
- transition: background 300ms ease; }
- ul.off-canvas-list li a:hover {
- background: #242424; }
+ @media only screen and (min-width: 40.063em) {
+ .tabs.vertical {
+ width: 20%;
+ max-width: 20%;
+ float: left;
+ margin: 0 0 1.25rem; }
- .move-right > .inner-wrap {
- -ms-transform: translate(15.625rem, 0);
- -webkit-transform: translate3d(15.625rem, 0, 0);
- -moz-transform: translate3d(15.625rem, 0, 0);
- -ms-transform: translate3d(15.625rem, 0, 0);
- -o-transform: translate3d(15.625rem, 0, 0);
- transform: translate3d(15.625rem, 0, 0); }
- .move-right .exit-off-canvas {
- -webkit-backface-visibility: hidden;
- transition: background 300ms ease;
- cursor: pointer;
- box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
+ .tabs-content.vertical {
+ width: 80%;
+ max-width: 80%;
+ float: left;
+ margin-left: -1px;
+ padding-left: 1rem; } }
+ .no-js .tabs-content > .content {
display: block;
- position: absolute;
- background: rgba(255, 255, 255, 0.2);
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 1002;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
- @media only screen and (min-width: 40.063em) {
- .move-right .exit-off-canvas:hover {
- background: rgba(255, 255, 255, 0.05); } }
+ float: none; }
- .move-left > .inner-wrap {
- -ms-transform: translate(-15.625rem, 0);
- -webkit-transform: translate3d(-15.625rem, 0, 0);
- -moz-transform: translate3d(-15.625rem, 0, 0);
- -ms-transform: translate3d(-15.625rem, 0, 0);
- -o-transform: translate3d(-15.625rem, 0, 0);
- transform: translate3d(-15.625rem, 0, 0); }
- .move-left .exit-off-canvas {
- -webkit-backface-visibility: hidden;
- transition: background 300ms ease;
- cursor: pointer;
- box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
- display: block;
+ /* Image Thumbnails */
+ .th {
+ line-height: 0;
+ display: inline-block;
+ border: solid 4px white;
+ max-width: 100%;
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+ transition: all 200ms ease-out; }
+ .th:hover, .th:focus {
+ box-shadow: 0 0 6px 1px rgba(0, 140, 186, 0.5); }
+ .th.radius {
+ border-radius: 3px; }
+
+ /* Tooltips */
+ .has-tip {
+ border-bottom: dotted 1px #cccccc;
+ cursor: help;
+ font-weight: bold;
+ color: #333333; }
+ .has-tip:hover, .has-tip:focus {
+ border-bottom: dotted 1px #003f54;
+ color: #008cba; }
+ .has-tip.tip-left, .has-tip.tip-right {
+ float: none !important; }
+
+ .tooltip {
+ display: none;
position: absolute;
- background: rgba(255, 255, 255, 0.2);
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 1002;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
- @media only screen and (min-width: 40.063em) {
- .move-left .exit-off-canvas:hover {
- background: rgba(255, 255, 255, 0.05); } }
+ z-index: 1006;
+ font-weight: normal;
+ font-size: 0.875rem;
+ line-height: 1.3;
+ padding: 0.75rem;
+ max-width: 300px;
+ left: 50%;
+ width: 100%;
+ color: white;
+ background: #333333; }
+ .tooltip > .nub {
+ display: block;
+ left: 5px;
+ position: absolute;
+ width: 0;
+ height: 0;
+ border: solid 5px;
+ border-color: transparent transparent #333333 transparent;
+ top: -10px;
+ pointer-events: none; }
+ .tooltip > .nub.rtl {
+ left: auto;
+ right: 5px; }
+ .tooltip.radius {
+ border-radius: 3px; }
+ .tooltip.round {
+ border-radius: 1000px; }
+ .tooltip.round > .nub {
+ left: 2rem; }
+ .tooltip.opened {
+ color: #008cba !important;
+ border-bottom: dotted 1px #003f54 !important; }
- .offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu {
- -ms-transform: none;
- -webkit-transform: none;
- -moz-transform: none;
- -o-transform: none;
- transform: none;
- z-index: 1003; }
- .offcanvas-overlap .exit-offcanvas-menu {
- -webkit-backface-visibility: hidden;
- transition: background 300ms ease;
- cursor: pointer;
- box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
+ .tap-to-close {
display: block;
- position: absolute;
- background: rgba(255, 255, 255, 0.2);
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 1002;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- z-index: 1002; }
- @media only screen and (min-width: 40.063em) {
- .offcanvas-overlap .exit-offcanvas-menu:hover {
- background: rgba(255, 255, 255, 0.05); } }
+ font-size: 0.625rem;
+ color: #777777;
+ font-weight: normal; }
- .no-csstransforms .left-off-canvas-menu {
- left: -15.625rem; }
- .no-csstransforms .right-off-canvas-menu {
- right: -15.625rem; }
- .no-csstransforms .move-left > .inner-wrap {
- right: 15.625rem; }
- .no-csstransforms .move-right > .inner-wrap {
- left: 15.625rem; }
+ @media only screen and (min-width: 40.063em) {
+ .tooltip > .nub {
+ border-color: transparent transparent #333333 transparent;
+ top: -10px; }
+ .tooltip.tip-top > .nub {
+ border-color: #333333 transparent transparent transparent;
+ top: auto;
+ bottom: -10px; }
+ .tooltip.tip-left, .tooltip.tip-right {
+ float: none !important; }
+ .tooltip.tip-left > .nub {
+ border-color: transparent transparent transparent #333333;
+ right: -10px;
+ left: auto;
+ top: 50%;
+ margin-top: -5px; }
+ .tooltip.tip-right > .nub {
+ border-color: transparent #333333 transparent transparent;
+ right: auto;
+ left: -10px;
+ top: 50%;
+ margin-top: -5px; } }
+ meta.foundation-mq-topbar {
+ font-family: "/only screen and (min-width:40.063em)/";
+ width: 40.063em; }
- /* Foundation Dropdowns */
- .f-dropdown {
- position: absolute;
- left: -9999px;
- list-style: none;
- margin-left: 0;
+ /* Wrapped around .top-bar to contain to grid width */
+ .contain-to-grid {
width: 100%;
- max-height: none;
- height: auto;
- background: white;
- border: solid 1px #cccccc;
- font-size: 0.875rem;
- z-index: 99;
- margin-top: 2px;
- max-width: 200px; }
- .f-dropdown > *:first-child {
- margin-top: 0; }
- .f-dropdown > *:last-child {
+ background: #333333; }
+ .contain-to-grid .top-bar {
margin-bottom: 0; }
- .f-dropdown:before {
- content: "";
- display: block;
- width: 0;
- height: 0;
- border: inset 6px;
- border-color: transparent transparent white transparent;
- border-bottom-style: solid;
- position: absolute;
- top: -12px;
- left: 10px;
- z-index: 99; }
- .f-dropdown:after {
- content: "";
- display: block;
- width: 0;
- height: 0;
- border: inset 7px;
- border-color: transparent transparent #cccccc transparent;
- border-bottom-style: solid;
- position: absolute;
- top: -14px;
- left: 9px;
- z-index: 98; }
- .f-dropdown.right:before {
- left: auto;
- right: 10px; }
- .f-dropdown.right:after {
- left: auto;
- right: 9px; }
- .f-dropdown.drop-right {
- position: absolute;
- left: -9999px;
- list-style: none;
- margin-left: 0;
- width: 100%;
- max-height: none;
+
+ .fixed {
+ width: 100%;
+ left: 0;
+ position: fixed;
+ top: 0;
+ z-index: 99; }
+ .fixed.expanded:not(.top-bar) {
+ overflow-y: auto;
height: auto;
- background: white;
- border: solid 1px #cccccc;
- font-size: 0.875rem;
- z-index: 99;
- margin-top: 0;
- margin-left: 2px;
- max-width: 200px; }
- .f-dropdown.drop-right > *:first-child {
- margin-top: 0; }
- .f-dropdown.drop-right > *:last-child {
- margin-bottom: 0; }
- .f-dropdown.drop-right:before {
- content: "";
- display: block;
- width: 0;
- height: 0;
- border: inset 6px;
- border-color: transparent white transparent transparent;
- border-right-style: solid;
- position: absolute;
- top: 10px;
- left: -12px;
+ width: 100%;
+ max-height: 100%; }
+ .fixed.expanded:not(.top-bar) .title-area {
+ position: fixed;
+ width: 100%;
z-index: 99; }
- .f-dropdown.drop-right:after {
- content: "";
- display: block;
- width: 0;
- height: 0;
- border: inset 7px;
- border-color: transparent #cccccc transparent transparent;
- border-right-style: solid;
- position: absolute;
- top: 9px;
- left: -14px;
- z-index: 98; }
- .f-dropdown.drop-left {
+ .fixed.expanded:not(.top-bar) .top-bar-section {
+ z-index: 98;
+ margin-top: 45px; }
+
+ .top-bar {
+ overflow: hidden;
+ height: 45px;
+ line-height: 45px;
+ position: relative;
+ background: #333333;
+ margin-bottom: 0; }
+ .top-bar ul {
+ margin-bottom: 0;
+ list-style: none; }
+ .top-bar .row {
+ max-width: none; }
+ .top-bar form,
+ .top-bar input {
+ margin-bottom: 0; }
+ .top-bar input {
+ height: 1.8rem;
+ padding-top: .35rem;
+ padding-bottom: .35rem;
+ font-size: 0.75rem; }
+ .top-bar .button, .top-bar button {
+ padding-top: 0.4125rem;
+ padding-bottom: 0.4125rem;
+ margin-bottom: 0;
+ font-size: 0.75rem; }
+ @media only screen and (max-width: 40em) {
+ .top-bar .button, .top-bar button {
+ position: relative;
+ top: -1px; } }
+ .top-bar .title-area {
+ position: relative;
+ margin: 0; }
+ .top-bar .name {
+ height: 45px;
+ margin: 0;
+ font-size: 16px; }
+ .top-bar .name h1 {
+ line-height: 45px;
+ font-size: 1.0625rem;
+ margin: 0; }
+ .top-bar .name h1 a {
+ font-weight: normal;
+ color: white;
+ width: 75%;
+ display: block;
+ padding: 0 15px; }
+ .top-bar .toggle-topbar {
position: absolute;
- left: -9999px;
- list-style: none;
- margin-left: 0;
+ right: 0;
+ top: 0; }
+ .top-bar .toggle-topbar a {
+ color: white;
+ text-transform: uppercase;
+ font-size: 0.8125rem;
+ font-weight: bold;
+ position: relative;
+ display: block;
+ padding: 0 15px;
+ height: 45px;
+ line-height: 45px; }
+ .top-bar .toggle-topbar.menu-icon {
+ top: 50%;
+ margin-top: -16px; }
+ .top-bar .toggle-topbar.menu-icon a {
+ height: 34px;
+ line-height: 33px;
+ padding: 0 40px 0 15px;
+ color: white;
+ position: relative; }
+ .top-bar .toggle-topbar.menu-icon a span::after {
+ content: "";
+ position: absolute;
+ display: block;
+ height: 0;
+ top: 50%;
+ margin-top: -8px;
+ right: 15px;
+ box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
+ width: 16px; }
+ .top-bar .toggle-topbar.menu-icon a span:hover:after {
+ box-shadow: 0 0px 0 1px "", 0 7px 0 1px "", 0 14px 0 1px ""; }
+ .top-bar.expanded {
+ height: auto;
+ background: transparent; }
+ .top-bar.expanded .title-area {
+ background: #333333; }
+ .top-bar.expanded .toggle-topbar a {
+ color: #888888; }
+ .top-bar.expanded .toggle-topbar a span::after {
+ box-shadow: 0 0px 0 1px #888888, 0 7px 0 1px #888888, 0 14px 0 1px #888888; }
+
+ .top-bar-section {
+ left: 0;
+ position: relative;
+ width: auto;
+ transition: left 300ms ease-out; }
+ .top-bar-section ul {
+ padding: 0;
width: 100%;
- max-height: none;
height: auto;
- background: white;
- border: solid 1px #cccccc;
- font-size: 0.875rem;
- z-index: 99;
- margin-top: 0;
- margin-left: -2px;
- max-width: 200px; }
- .f-dropdown.drop-left > *:first-child {
- margin-top: 0; }
- .f-dropdown.drop-left > *:last-child {
- margin-bottom: 0; }
- .f-dropdown.drop-left:before {
- content: "";
+ display: block;
+ font-size: 16px;
+ margin: 0; }
+ .top-bar-section .divider,
+ .top-bar-section [role="separator"] {
+ border-top: solid 1px #1a1a1a;
+ clear: both;
+ height: 1px;
+ width: 100%; }
+ .top-bar-section ul li {
+ background: #333333; }
+ .top-bar-section ul li > a {
display: block;
- width: 0;
- height: 0;
- border: inset 6px;
- border-color: transparent transparent transparent white;
- border-left-style: solid;
- position: absolute;
- top: 10px;
- right: -12px;
- left: auto;
- z-index: 99; }
- .f-dropdown.drop-left:after {
+ width: 100%;
+ color: white;
+ padding: 12px 0 12px 0;
+ padding-left: 15px;
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ font-size: 0.8125rem;
+ font-weight: normal;
+ text-transform: none; }
+ .top-bar-section ul li > a.button {
+ font-size: 0.8125rem;
+ padding-right: 15px;
+ padding-left: 15px;
+ background-color: #008cba;
+ border-color: #007095;
+ color: white; }
+ .top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
+ background-color: #007095; }
+ .top-bar-section ul li > a.button:hover, .top-bar-section ul li > a.button:focus {
+ color: white; }
+ .top-bar-section ul li > a.button.secondary {
+ background-color: #e7e7e7;
+ border-color: #b9b9b9;
+ color: #333333; }
+ .top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
+ background-color: #b9b9b9; }
+ .top-bar-section ul li > a.button.secondary:hover, .top-bar-section ul li > a.button.secondary:focus {
+ color: #333333; }
+ .top-bar-section ul li > a.button.success {
+ background-color: #43ac6a;
+ border-color: #368a55;
+ color: white; }
+ .top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
+ background-color: #368a55; }
+ .top-bar-section ul li > a.button.success:hover, .top-bar-section ul li > a.button.success:focus {
+ color: white; }
+ .top-bar-section ul li > a.button.alert {
+ background-color: #f04124;
+ border-color: #cf2a0e;
+ color: white; }
+ .top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
+ background-color: #cf2a0e; }
+ .top-bar-section ul li > a.button.alert:hover, .top-bar-section ul li > a.button.alert:focus {
+ color: white; }
+ .top-bar-section ul li > a.button.warning {
+ background-color: #f08a24;
+ border-color: #cf6e0e;
+ color: white; }
+ .top-bar-section ul li > a.button.warning:hover, .top-bar-section ul li > a.button.warning:focus {
+ background-color: #cf6e0e; }
+ .top-bar-section ul li > a.button.warning:hover, .top-bar-section ul li > a.button.warning:focus {
+ color: white; }
+ .top-bar-section ul li > button {
+ font-size: 0.8125rem;
+ padding-right: 15px;
+ padding-left: 15px;
+ background-color: #008cba;
+ border-color: #007095;
+ color: white; }
+ .top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
+ background-color: #007095; }
+ .top-bar-section ul li > button:hover, .top-bar-section ul li > button:focus {
+ color: white; }
+ .top-bar-section ul li > button.secondary {
+ background-color: #e7e7e7;
+ border-color: #b9b9b9;
+ color: #333333; }
+ .top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
+ background-color: #b9b9b9; }
+ .top-bar-section ul li > button.secondary:hover, .top-bar-section ul li > button.secondary:focus {
+ color: #333333; }
+ .top-bar-section ul li > button.success {
+ background-color: #43ac6a;
+ border-color: #368a55;
+ color: white; }
+ .top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
+ background-color: #368a55; }
+ .top-bar-section ul li > button.success:hover, .top-bar-section ul li > button.success:focus {
+ color: white; }
+ .top-bar-section ul li > button.alert {
+ background-color: #f04124;
+ border-color: #cf2a0e;
+ color: white; }
+ .top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
+ background-color: #cf2a0e; }
+ .top-bar-section ul li > button.alert:hover, .top-bar-section ul li > button.alert:focus {
+ color: white; }
+ .top-bar-section ul li > button.warning {
+ background-color: #f08a24;
+ border-color: #cf6e0e;
+ color: white; }
+ .top-bar-section ul li > button.warning:hover, .top-bar-section ul li > button.warning:focus {
+ background-color: #cf6e0e; }
+ .top-bar-section ul li > button.warning:hover, .top-bar-section ul li > button.warning:focus {
+ color: white; }
+ .top-bar-section ul li:hover:not(.has-form) > a {
+ background-color: #555555;
+ background: #272727;
+ color: white; }
+ .top-bar-section ul li.active > a {
+ background: #008cba;
+ color: white; }
+ .top-bar-section ul li.active > a:hover {
+ background: #0078a0;
+ color: white; }
+ .top-bar-section .has-form {
+ padding: 15px; }
+ .top-bar-section .has-dropdown {
+ position: relative; }
+ .top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
- border: inset 7px;
- border-color: transparent transparent transparent #cccccc;
+ border: inset 5px;
+ border-color: transparent transparent transparent rgba(255, 255, 255, 0.4);
border-left-style: solid;
+ margin-right: 15px;
+ margin-top: -4.5px;
position: absolute;
- top: 9px;
- right: -14px;
- left: auto;
- z-index: 98; }
- .f-dropdown.drop-top {
+ top: 50%;
+ right: 0; }
+ .top-bar-section .has-dropdown.moved {
+ position: static; }
+ .top-bar-section .has-dropdown.moved > .dropdown {
+ display: block;
+ position: static !important;
+ height: auto;
+ width: auto;
+ overflow: visible;
+ clip: auto;
+ position: absolute !important;
+ width: 100%; }
+ .top-bar-section .has-dropdown.moved > a:after {
+ display: none; }
+ .top-bar-section .dropdown {
+ padding: 0;
position: absolute;
- left: -9999px;
- list-style: none;
- margin-left: 0;
- width: 100%;
- max-height: none;
- height: auto;
- background: white;
- border: solid 1px #cccccc;
- font-size: 0.875rem;
+ left: 100%;
+ top: 0;
z-index: 99;
- margin-top: -2px;
- margin-left: 0;
- max-width: 200px; }
- .f-dropdown.drop-top > *:first-child {
- margin-top: 0; }
- .f-dropdown.drop-top > *:last-child {
- margin-bottom: 0; }
- .f-dropdown.drop-top:before {
- content: "";
- display: block;
- width: 0;
- height: 0;
- border: inset 6px;
- border-color: white transparent transparent transparent;
- border-top-style: solid;
- position: absolute;
- top: auto;
- bottom: -12px;
- left: 10px;
- right: auto;
- z-index: 99; }
- .f-dropdown.drop-top:after {
- content: "";
+ display: block;
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px); }
+ .top-bar-section .dropdown li {
+ width: 100%;
+ height: auto; }
+ .top-bar-section .dropdown li a {
+ font-weight: normal;
+ padding: 8px 15px; }
+ .top-bar-section .dropdown li a.parent-link {
+ font-weight: normal; }
+ .top-bar-section .dropdown li.title h5, .top-bar-section .dropdown li.parent-link {
+ margin-bottom: 0;
+ margin-top: 0;
+ font-size: 1.125rem; }
+ .top-bar-section .dropdown li.title h5 a, .top-bar-section .dropdown li.parent-link a {
+ color: white;
+ display: block; }
+ .top-bar-section .dropdown li.title h5 a:hover, .top-bar-section .dropdown li.parent-link a:hover {
+ background: none; }
+ .top-bar-section .dropdown li.has-form {
+ padding: 8px 15px; }
+ .top-bar-section .dropdown li .button, .top-bar-section .dropdown li button {
+ top: auto; }
+ .top-bar-section .dropdown label {
+ padding: 8px 15px 2px;
+ margin-bottom: 0;
+ text-transform: uppercase;
+ color: #777777;
+ font-weight: bold;
+ font-size: 0.625rem; }
+
+ .js-generated {
+ display: block; }
+
+ @media only screen and (min-width: 40.063em) {
+ .top-bar {
+ background: #333333;
+ overflow: visible; }
+ .top-bar:before, .top-bar:after {
+ content: " ";
+ display: table; }
+ .top-bar:after {
+ clear: both; }
+ .top-bar .toggle-topbar {
+ display: none; }
+ .top-bar .title-area {
+ float: left; }
+ .top-bar .name h1 a {
+ width: auto; }
+ .top-bar input,
+ .top-bar .button,
+ .top-bar button {
+ font-size: 0.875rem;
+ position: relative;
+ top: 7px; }
+ .top-bar.expanded {
+ background: #333333; }
+
+ .contain-to-grid .top-bar {
+ max-width: 62.5rem;
+ margin: 0 auto;
+ margin-bottom: 0; }
+
+ .top-bar-section {
+ transition: none 0 0;
+ left: 0 !important; }
+ .top-bar-section ul {
+ width: auto;
+ height: auto !important;
+ display: inline; }
+ .top-bar-section ul li {
+ float: left; }
+ .top-bar-section ul li .js-generated {
+ display: none; }
+ .top-bar-section li.hover > a:not(.button) {
+ background-color: #555555;
+ background: #272727;
+ color: white; }
+ .top-bar-section li:not(.has-form) a:not(.button) {
+ padding: 0 15px;
+ line-height: 45px;
+ background: #333333; }
+ .top-bar-section li:not(.has-form) a:not(.button):hover {
+ background-color: #555555;
+ background: #272727; }
+ .top-bar-section li.active:not(.has-form) a:not(.button) {
+ padding: 0 15px;
+ line-height: 45px;
+ color: white;
+ background: #008cba; }
+ .top-bar-section li.active:not(.has-form) a:not(.button):hover {
+ background: #0078a0;
+ color: white; }
+ .top-bar-section .has-dropdown > a {
+ padding-right: 35px !important; }
+ .top-bar-section .has-dropdown > a:after {
+ content: "";
+ display: block;
+ width: 0;
+ height: 0;
+ border: inset 5px;
+ border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
+ border-top-style: solid;
+ margin-top: -2.5px;
+ top: 22.5px; }
+ .top-bar-section .has-dropdown.moved {
+ position: relative; }
+ .top-bar-section .has-dropdown.moved > .dropdown {
+ display: block;
+ position: absolute !important;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px, 1px, 1px, 1px); }
+ .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
display: block;
- width: 0;
- height: 0;
- border: inset 7px;
- border-color: #cccccc transparent transparent transparent;
- border-top-style: solid;
- position: absolute;
+ position: static !important;
+ height: auto;
+ width: auto;
+ overflow: visible;
+ clip: auto;
+ position: absolute !important; }
+ .top-bar-section .has-dropdown > a:focus + .dropdown {
+ display: block;
+ position: static !important;
+ height: auto;
+ width: auto;
+ overflow: visible;
+ clip: auto;
+ position: absolute !important; }
+ .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
+ border: none;
+ content: "\00bb";
+ top: 1rem;
+ margin-top: -1px;
+ right: 5px;
+ line-height: 1.2; }
+ .top-bar-section .dropdown {
+ left: 0;
top: auto;
- bottom: -14px;
- left: 9px;
+ background: transparent;
+ min-width: 100%; }
+ .top-bar-section .dropdown li a {
+ color: white;
+ line-height: 45px;
+ white-space: nowrap;
+ padding: 12px 15px;
+ background: #333333; }
+ .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button) {
+ color: white;
+ background: #333333; }
+ .top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button) {
+ color: white;
+ background-color: #555555;
+ background: #272727; }
+ .top-bar-section .dropdown li label {
+ white-space: nowrap;
+ background: #333333; }
+ .top-bar-section .dropdown li .dropdown {
+ left: 100%;
+ top: 0; }
+ .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
+ border-bottom: none;
+ border-top: none;
+ border-right: solid 1px #4e4e4e;
+ clear: none;
+ height: 45px;
+ width: 0; }
+ .top-bar-section .has-form {
+ background: #333333;
+ padding: 0 15px;
+ height: 45px; }
+ .top-bar-section .right li .dropdown {
+ left: auto;
+ right: 0; }
+ .top-bar-section .right li .dropdown li .dropdown {
+ right: 100%; }
+ .top-bar-section .left li .dropdown {
right: auto;
- z-index: 98; }
- .f-dropdown li {
- font-size: 0.875rem;
- cursor: pointer;
- line-height: 1.125rem;
- margin: 0; }
- .f-dropdown li:hover, .f-dropdown li:focus {
- background: #eeeeee; }
- .f-dropdown li a {
- display: block;
- padding: 0.5rem;
- color: #555555; }
- .f-dropdown.content {
- position: absolute;
- left: -9999px;
- list-style: none;
- margin-left: 0;
- padding: 1.25rem;
- width: 100%;
+ left: 0; }
+ .top-bar-section .left li .dropdown li .dropdown {
+ left: 100%; }
+
+ .no-js .top-bar-section ul li:hover > a {
+ background-color: #555555;
+ background: #272727;
+ color: white; }
+ .no-js .top-bar-section ul li:active > a {
+ background: #008cba;
+ color: white; }
+ .no-js .top-bar-section .has-dropdown:hover > .dropdown {
+ display: block;
+ position: static !important;
height: auto;
- max-height: none;
- background: white;
- border: solid 1px #cccccc;
- font-size: 0.875rem;
- z-index: 99;
- max-width: 200px; }
- .f-dropdown.content > *:first-child {
- margin-top: 0; }
- .f-dropdown.content > *:last-child {
- margin-bottom: 0; }
- .f-dropdown.tiny {
- max-width: 200px; }
- .f-dropdown.small {
- max-width: 300px; }
- .f-dropdown.medium {
- max-width: 500px; }
- .f-dropdown.large {
- max-width: 800px; }
+ width: auto;
+ overflow: visible;
+ clip: auto;
+ position: absolute !important; }
+ .no-js .top-bar-section .has-dropdown > a:focus + .dropdown {
+ display: block;
+ position: static !important;
+ height: auto;
+ width: auto;
+ overflow: visible;
+ clip: auto;
+ position: absolute !important; } }
+ .text-left {
+ text-align: left !important; }
- table {
- background: white;
- margin-bottom: 1.25rem;
- border: solid 1px #dddddd; }
- table caption {
- background: transparent;
- color: #222222;
- font-size: 1rem;
- font-weight: bold; }
- table thead {
- background: whitesmoke; }
- table thead tr th,
- table thead tr td {
- padding: 0.5rem 0.625rem 0.625rem;
- font-size: 0.875rem;
- font-weight: bold;
- color: #222222; }
- table tfoot {
- background: whitesmoke; }
- table tfoot tr th,
- table tfoot tr td {
- padding: 0.5rem 0.625rem 0.625rem;
- font-size: 0.875rem;
- font-weight: bold;
- color: #222222; }
- table tr th,
- table tr td {
- padding: 0.5625rem 0.625rem;
- font-size: 0.875rem;
- color: #222222;
- text-align: left; }
- table tr.even, table tr.alt, table tr:nth-of-type(even) {
- background: #f9f9f9; }
- table thead tr th,
- table tfoot tr th,
- table tfoot tr td,
- table tbody tr th,
- table tbody tr td,
- table tr td {
- display: table-cell;
- line-height: 1.125rem; }
+ .text-right {
+ text-align: right !important; }
- /* Standard Forms */
- form {
- margin: 0 0 1rem; }
+ .text-center {
+ text-align: center !important; }
- /* Using forms within rows, we need to set some defaults */
- form .row .row {
- margin: 0 -0.5rem; }
- form .row .row .column,
- form .row .row .columns {
- padding: 0 0.5rem; }
- form .row .row.collapse {
- margin: 0; }
- form .row .row.collapse .column,
- form .row .row.collapse .columns {
- padding: 0; }
- form .row .row.collapse input {
- border-bottom-right-radius: 0;
- border-top-right-radius: 0; }
- form .row input.column,
- form .row input.columns,
- form .row textarea.column,
- form .row textarea.columns {
- padding-left: 0.5rem; }
+ .text-justify {
+ text-align: justify !important; }
+
+ @media only screen and (max-width: 40em) {
+ .small-only-text-left {
+ text-align: left !important; }
+
+ .small-only-text-right {
+ text-align: right !important; }
+
+ .small-only-text-center {
+ text-align: center !important; }
+
+ .small-only-text-justify {
+ text-align: justify !important; } }
+ @media only screen {
+ .small-text-left {
+ text-align: left !important; }
+
+ .small-text-right {
+ text-align: right !important; }
+
+ .small-text-center {
+ text-align: center !important; }
+
+ .small-text-justify {
+ text-align: justify !important; } }
+ @media only screen and (min-width: 40.063em) and (max-width: 64em) {
+ .medium-only-text-left {
+ text-align: left !important; }
+
+ .medium-only-text-right {
+ text-align: right !important; }
+
+ .medium-only-text-center {
+ text-align: center !important; }
+
+ .medium-only-text-justify {
+ text-align: justify !important; } }
+ @media only screen and (min-width: 40.063em) {
+ .medium-text-left {
+ text-align: left !important; }
+
+ .medium-text-right {
+ text-align: right !important; }
+
+ .medium-text-center {
+ text-align: center !important; }
+
+ .medium-text-justify {
+ text-align: justify !important; } }
+ @media only screen and (min-width: 64.063em) and (max-width: 90em) {
+ .large-only-text-left {
+ text-align: left !important; }
+
+ .large-only-text-right {
+ text-align: right !important; }
+
+ .large-only-text-center {
+ text-align: center !important; }
+
+ .large-only-text-justify {
+ text-align: justify !important; } }
+ @media only screen and (min-width: 64.063em) {
+ .large-text-left {
+ text-align: left !important; }
+
+ .large-text-right {
+ text-align: right !important; }
+
+ .large-text-center {
+ text-align: center !important; }
+
+ .large-text-justify {
+ text-align: justify !important; } }
+ @media only screen and (min-width: 90.063em) and (max-width: 120em) {
+ .xlarge-only-text-left {
+ text-align: left !important; }
- /* Label Styles */
- label {
- font-size: 0.875rem;
- color: #4d4d4d;
- cursor: pointer;
- display: block;
- font-weight: normal;
- line-height: 1.5;
- margin-bottom: 0;
- /* Styles for required inputs */ }
- label.right {
- float: none !important;
- text-align: right; }
- label.inline {
- margin: 0 0 1rem 0;
- padding: 0.5625rem 0; }
- label small {
- text-transform: capitalize;
- color: #676767; }
+ .xlarge-only-text-right {
+ text-align: right !important; }
- select::-ms-expand {
- display: none; }
+ .xlarge-only-text-center {
+ text-align: center !important; }
- @-moz-document url-prefix() {
- select {
- background: #fafafa; }
+ .xlarge-only-text-justify {
+ text-align: justify !important; } }
+ @media only screen and (min-width: 90.063em) {
+ .xlarge-text-left {
+ text-align: left !important; }
- select:hover {
- background: #f3f3f3; } }
+ .xlarge-text-right {
+ text-align: right !important; }
- /* Attach elements to the beginning or end of an input */
- .prefix,
- .postfix {
- display: block;
- position: relative;
- z-index: 2;
- text-align: center;
- width: 100%;
- padding-top: 0;
- padding-bottom: 0;
- border-style: solid;
- border-width: 1px;
- overflow: hidden;
- font-size: 0.875rem;
- height: 2.3125rem;
- line-height: 2.3125rem; }
+ .xlarge-text-center {
+ text-align: center !important; }
- /* Adjust padding, alignment and radius if pre/post element is a button */
- .postfix.button {
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- padding-bottom: 0;
- text-align: center;
- line-height: 2.125rem;
- border: none; }
+ .xlarge-text-justify {
+ text-align: justify !important; } }
+ @media only screen and (min-width: 120.063em) and (max-width: 99999999em) {
+ .xxlarge-only-text-left {
+ text-align: left !important; }
- .prefix.button {
- padding-left: 0;
- padding-right: 0;
- padding-top: 0;
- padding-bottom: 0;
- text-align: center;
- line-height: 2.125rem;
- border: none; }
+ .xxlarge-only-text-right {
+ text-align: right !important; }
- .prefix.button.radius {
- border-radius: 0;
- border-bottom-left-radius: 3px;
- border-top-left-radius: 3px; }
+ .xxlarge-only-text-center {
+ text-align: center !important; }
- .postfix.button.radius {
- border-radius: 0;
- border-bottom-right-radius: 3px;
- border-top-right-radius: 3px; }
+ .xxlarge-only-text-justify {
+ text-align: justify !important; } }
+ @media only screen and (min-width: 120.063em) {
+ .xxlarge-text-left {
+ text-align: left !important; }
- .prefix.button.round {
- border-radius: 0;
- border-bottom-left-radius: 1000px;
- border-top-left-radius: 1000px; }
+ .xxlarge-text-right {
+ text-align: right !important; }
- .postfix.button.round {
- border-radius: 0;
- border-bottom-right-radius: 1000px;
- border-top-right-radius: 1000px; }
+ .xxlarge-text-center {
+ text-align: center !important; }
- /* Separate prefix and postfix styles when on span or label so buttons keep their own */
- span.prefix, label.prefix {
- background: #f2f2f2;
- border-right: none;
- color: #333333;
- border-color: #cccccc; }
- span.prefix.radius, label.prefix.radius {
- border-radius: 0;
- border-bottom-left-radius: 3px;
- border-top-left-radius: 3px; }
+ .xxlarge-text-justify {
+ text-align: justify !important; } }
+ /* Typography resets */
+ div,
+ dl,
+ dt,
+ dd,
+ ul,
+ ol,
+ li,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ pre,
+ form,
+ p,
+ blockquote,
+ th,
+ td {
+ margin: 0;
+ padding: 0; }
- span.postfix, label.postfix {
- background: #f2f2f2;
- border-left: none;
- color: #333333;
- border-color: #cccccc; }
- span.postfix.radius, label.postfix.radius {
- border-radius: 0;
- border-bottom-right-radius: 3px;
- border-top-right-radius: 3px; }
+ /* Default Link Styles */
+ a {
+ color: #008cba;
+ text-decoration: none;
+ line-height: inherit; }
+ a:hover, a:focus {
+ color: #0078a0; }
+ a img {
+ border: none; }
- /* We use this to get basic styling on all basic form elements */
- input[type="text"],
- input[type="password"],
- input[type="date"],
- input[type="datetime"],
- input[type="datetime-local"],
- input[type="month"],
- input[type="week"],
- input[type="email"],
- input[type="number"],
- input[type="search"],
- input[type="tel"],
- input[type="time"],
- input[type="url"],
- textarea {
- -webkit-appearance: none;
- background-color: white;
+ /* Default paragraph styles */
+ p {
font-family: inherit;
- border: 1px solid #cccccc;
- box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
- color: rgba(0, 0, 0, 0.75);
- display: block;
- font-size: 0.875rem;
- margin: 0 0 1rem 0;
- padding: 0.5rem;
- height: 2.3125rem;
- width: 100%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- transition: box-shadow 0.45s, border-color 0.45s ease-in-out; }
- input[type="text"]:focus,
- input[type="password"]:focus,
- input[type="date"]:focus,
- input[type="datetime"]:focus,
- input[type="datetime-local"]:focus,
- input[type="month"]:focus,
- input[type="week"]:focus,
- input[type="email"]:focus,
- input[type="number"]:focus,
- input[type="search"]:focus,
- input[type="tel"]:focus,
- input[type="time"]:focus,
- input[type="url"]:focus,
- textarea:focus {
- box-shadow: 0 0 5px #999999;
- border-color: #999999; }
- input[type="text"]:focus,
- input[type="password"]:focus,
- input[type="date"]:focus,
- input[type="datetime"]:focus,
- input[type="datetime-local"]:focus,
- input[type="month"]:focus,
- input[type="week"]:focus,
- input[type="email"]:focus,
- input[type="number"]:focus,
- input[type="search"]:focus,
- input[type="tel"]:focus,
- input[type="time"]:focus,
- input[type="url"]:focus,
- textarea:focus {
- background: #fafafa;
- border-color: #999999;
- outline: none; }
- input[type="text"][disabled], fieldset[disabled] input[type="text"],
- input[type="password"][disabled], fieldset[disabled]
- input[type="password"],
- input[type="date"][disabled], fieldset[disabled]
- input[type="date"],
- input[type="datetime"][disabled], fieldset[disabled]
- input[type="datetime"],
- input[type="datetime-local"][disabled], fieldset[disabled]
- input[type="datetime-local"],
- input[type="month"][disabled], fieldset[disabled]
- input[type="month"],
- input[type="week"][disabled], fieldset[disabled]
- input[type="week"],
- input[type="email"][disabled], fieldset[disabled]
- input[type="email"],
- input[type="number"][disabled], fieldset[disabled]
- input[type="number"],
- input[type="search"][disabled], fieldset[disabled]
- input[type="search"],
- input[type="tel"][disabled], fieldset[disabled]
- input[type="tel"],
- input[type="time"][disabled], fieldset[disabled]
- input[type="time"],
- input[type="url"][disabled], fieldset[disabled]
- input[type="url"],
- textarea[disabled], fieldset[disabled]
- textarea {
- background-color: #dddddd; }
- input[type="text"].radius,
- input[type="password"].radius,
- input[type="date"].radius,
- input[type="datetime"].radius,
- input[type="datetime-local"].radius,
- input[type="month"].radius,
- input[type="week"].radius,
- input[type="email"].radius,
- input[type="number"].radius,
- input[type="search"].radius,
- input[type="tel"].radius,
- input[type="time"].radius,
- input[type="url"].radius,
- textarea.radius {
- border-radius: 3px; }
+ font-weight: normal;
+ font-size: 1rem;
+ line-height: 1.6;
+ margin-bottom: 1.25rem;
+ text-rendering: optimizeLegibility; }
+ p.lead {
+ font-size: 1.21875rem;
+ line-height: 1.6; }
+ p aside {
+ font-size: 0.875rem;
+ line-height: 1.35;
+ font-style: italic; }
- input[type="submit"] {
- -webkit-appearance: none; }
+ /* Default header styles */
+ h1, h2, h3, h4, h5, h6 {
+ font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ font-weight: normal;
+ font-style: normal;
+ color: #222222;
+ text-rendering: optimizeLegibility;
+ margin-top: 0.2rem;
+ margin-bottom: 0.5rem;
+ line-height: 1.4; }
+ h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+ font-size: 60%;
+ color: #6f6f6f;
+ line-height: 0; }
- /* Respect enforced amount of rows for textarea */
- textarea[rows] {
- height: auto; }
+ h1 {
+ font-size: 2.125rem; }
- /* Add height value for select elements to match text input height */
- select {
- -webkit-appearance: none !important;
- background-color: #fafafa;
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==");
- background-repeat: no-repeat;
- background-position: 97% center;
- border: 1px solid #cccccc;
- padding: 0.5rem;
- font-size: 0.875rem;
- color: rgba(0, 0, 0, 0.75);
- line-height: normal;
- border-radius: 0;
- height: 2.3125rem; }
- select.radius {
- border-radius: 3px; }
- select:hover {
- background-color: #f3f3f3;
- border-color: #999999; }
+ h2 {
+ font-size: 1.6875rem; }
- /* Adjust margin for form elements below */
- input[type="file"],
- input[type="checkbox"],
- input[type="radio"],
- select {
- margin: 0 0 1rem 0; }
+ h3 {
+ font-size: 1.375rem; }
- input[type="checkbox"] + label,
- input[type="radio"] + label {
- display: inline-block;
- margin-left: 0.5rem;
- margin-right: 1rem;
- margin-bottom: 0;
- vertical-align: baseline; }
+ h4 {
+ font-size: 1.125rem; }
- /* Normalize file input width */
- input[type="file"] {
- width: 100%; }
+ h5 {
+ font-size: 1.125rem; }
- /* We add basic fieldset styling */
- fieldset {
- border: 1px solid #dddddd;
- padding: 1.25rem;
- margin: 1.125rem 0; }
- fieldset legend {
- font-weight: bold;
- background: white;
- padding: 0 0.1875rem;
- margin: 0;
- margin-left: -0.1875rem; }
+ h6 {
+ font-size: 1rem; }
- /* Error Handling */
- [data-abide] .error small.error, [data-abide] span.error, [data-abide] small.error {
- display: block;
- padding: 0.375rem 0.5625rem 0.5625rem;
- margin-top: -1px;
- margin-bottom: 1rem;
- font-size: 0.75rem;
+ .subheader {
+ line-height: 1.4;
+ color: #6f6f6f;
font-weight: normal;
- font-style: italic;
- background: #f04124;
- color: white; }
- [data-abide] span.error, [data-abide] small.error {
- display: none; }
+ margin-top: 0.2rem;
+ margin-bottom: 0.5rem; }
- span.error, small.error {
- display: block;
- padding: 0.375rem 0.5625rem 0.5625rem;
- margin-top: -1px;
- margin-bottom: 1rem;
- font-size: 0.75rem;
- font-weight: normal;
- font-style: italic;
- background: #f04124;
- color: white; }
+ hr {
+ border: solid #dddddd;
+ border-width: 1px 0 0;
+ clear: both;
+ margin: 1.25rem 0 1.1875rem;
+ height: 0; }
- .error input,
- .error textarea,
- .error select {
- margin-bottom: 0; }
- .error input[type="checkbox"],
- .error input[type="radio"] {
- margin-bottom: 1rem; }
- .error label,
- .error label.error {
- color: #f04124; }
- .error small.error {
- display: block;
- padding: 0.375rem 0.5625rem 0.5625rem;
- margin-top: -1px;
- margin-bottom: 1rem;
- font-size: 0.75rem;
- font-weight: normal;
+ /* Helpful Typography Defaults */
+ em,
+ i {
font-style: italic;
- background: #f04124;
- color: white; }
- .error > label > small {
- color: #676767;
- background: transparent;
- padding: 0;
- text-transform: capitalize;
- font-style: normal;
+ line-height: inherit; }
+
+ strong,
+ b {
+ font-weight: bold;
+ line-height: inherit; }
+
+ small {
font-size: 60%;
- margin: 0;
- display: inline; }
- .error span.error-message {
- display: block; }
+ line-height: inherit; }
- input.error,
- textarea.error {
+ code {
+ font-family: Consolas, "Liberation Mono", Courier, monospace;
+ font-weight: normal;
+ color: #333333;
+ background-color: #f8f8f8;
+ border-width: 1px;
+ border-style: solid;
+ border-color: #dfdfdf;
+ padding: 0.125rem 0.3125rem 0.0625rem; }
+
+ /* Lists */
+ ul,
+ ol,
+ dl {
+ font-size: 1rem;
+ line-height: 1.6;
+ margin-bottom: 1.25rem;
+ list-style-position: outside;
+ font-family: inherit; }
+
+ ul {
+ margin-left: 1.1rem; }
+ ul.no-bullet {
+ margin-left: 0; }
+ ul.no-bullet li ul,
+ ul.no-bullet li ol {
+ margin-left: 1.25rem;
+ margin-bottom: 0;
+ list-style: none; }
+
+ /* Unordered Lists */
+ ul li ul,
+ ul li ol {
+ margin-left: 1.25rem;
margin-bottom: 0; }
+ ul.square li ul, ul.circle li ul, ul.disc li ul {
+ list-style: inherit; }
+ ul.square {
+ list-style-type: square;
+ margin-left: 1.1rem; }
+ ul.circle {
+ list-style-type: circle;
+ margin-left: 1.1rem; }
+ ul.disc {
+ list-style-type: disc;
+ margin-left: 1.1rem; }
+ ul.no-bullet {
+ list-style: none; }
- label.error {
- color: #f04124; }
+ /* Ordered Lists */
+ ol {
+ margin-left: 1.4rem; }
+ ol li ul,
+ ol li ol {
+ margin-left: 1.25rem;
+ margin-bottom: 0; }
- .range-slider {
- display: block;
- position: relative;
- width: 100%;
- height: 1rem;
- border: 1px solid #dddddd;
- margin: 1.25rem 0;
- -ms-touch-action: none;
- touch-action: none;
- background: #fafafa; }
- .range-slider.vertical-range {
- display: block;
- position: relative;
- width: 100%;
- height: 1rem;
- border: 1px solid #dddddd;
- margin: 1.25rem 0;
- -ms-touch-action: none;
- touch-action: none;
- display: inline-block;
- width: 1rem;
- height: 12.5rem; }
- .range-slider.vertical-range .range-slider-handle {
- margin-top: 0;
- margin-left: -0.5rem;
- position: absolute;
- bottom: -10.5rem; }
- .range-slider.vertical-range .range-slider-active-segment {
- width: 0.875rem;
- height: auto;
- bottom: 0; }
- .range-slider.radius {
- background: #fafafa;
- border-radius: 3px; }
- .range-slider.radius .range-slider-handle {
- background: #008cba;
- border-radius: 3px; }
- .range-slider.radius .range-slider-handle:hover {
- background: #007ba4; }
- .range-slider.round {
- background: #fafafa;
- border-radius: 1000px; }
- .range-slider.round .range-slider-handle {
- background: #008cba;
- border-radius: 1000px; }
- .range-slider.round .range-slider-handle:hover {
- background: #007ba4; }
+ /* Definition Lists */
+ dl dt {
+ margin-bottom: 0.3rem;
+ font-weight: bold; }
+ dl dd {
+ margin-bottom: 0.75rem; }
+
+ /* Abbreviations */
+ abbr,
+ acronym {
+ text-transform: uppercase;
+ font-size: 90%;
+ color: #222222;
+ cursor: help; }
- .range-slider-active-segment {
- display: inline-block;
- position: absolute;
- height: 0.875rem;
- background: #e5e5e5; }
+ abbr {
+ text-transform: none; }
+ abbr[title] {
+ border-bottom: 1px dotted #dddddd; }
- .range-slider-handle {
+ /* Blockquotes */
+ blockquote {
+ margin: 0 0 1.25rem;
+ padding: 0.5625rem 1.25rem 0 1.1875rem;
+ border-left: 1px solid #dddddd; }
+ blockquote cite {
+ display: block;
+ font-size: 0.8125rem;
+ color: #555555; }
+ blockquote cite:before {
+ content: "\2014 \0020"; }
+ blockquote cite a,
+ blockquote cite a:visited {
+ color: #555555; }
+
+ blockquote,
+ blockquote p {
+ line-height: 1.6;
+ color: #6f6f6f; }
+
+ /* Microformats */
+ .vcard {
display: inline-block;
- position: absolute;
- z-index: 1;
- top: -0.3125rem;
- width: 2rem;
- height: 1.375rem;
- border: 1px solid none;
- cursor: pointer;
- background: #008cba; }
- .range-slider-handle:hover {
- background: #007ba4; }
+ margin: 0 0 1.25rem 0;
+ border: 1px solid #dddddd;
+ padding: 0.625rem 0.75rem; }
+ .vcard li {
+ margin: 0;
+ display: block; }
+ .vcard .fn {
+ font-weight: bold;
+ font-size: 0.9375rem; }
- [class*="block-grid-"] {
- display: block;
- padding: 0;
- margin: 0 -0.625rem; }
- [class*="block-grid-"]:before, [class*="block-grid-"]:after {
- content: " ";
- display: table; }
- [class*="block-grid-"]:after {
- clear: both; }
- [class*="block-grid-"] > li {
- display: block;
- height: auto;
- float: left;
- padding: 0 0.625rem 1.25rem; }
+ .vevent .summary {
+ font-weight: bold; }
+ .vevent abbr {
+ cursor: default;
+ text-decoration: none;
+ font-weight: bold;
+ border: none;
+ padding: 0 0.0625rem; }
- @media only screen {
- .small-block-grid-1 > li {
- width: 100%;
- list-style: none; }
- .small-block-grid-1 > li:nth-of-type(1n) {
- clear: none; }
- .small-block-grid-1 > li:nth-of-type(1n+1) {
- clear: both; }
+ @media only screen and (min-width: 40.063em) {
+ h1, h2, h3, h4, h5, h6 {
+ line-height: 1.4; }
- .small-block-grid-2 > li {
- width: 50%;
- list-style: none; }
- .small-block-grid-2 > li:nth-of-type(1n) {
- clear: none; }
- .small-block-grid-2 > li:nth-of-type(2n+1) {
- clear: both; }
+ h1 {
+ font-size: 2.75rem; }
- .small-block-grid-3 > li {
- width: 33.33333%;
- list-style: none; }
- .small-block-grid-3 > li:nth-of-type(1n) {
- clear: none; }
- .small-block-grid-3 > li:nth-of-type(3n+1) {
- clear: both; }
+ h2 {
+ font-size: 2.3125rem; }
- .small-block-grid-4 > li {
- width: 25%;
- list-style: none; }
- .small-block-grid-4 > li:nth-of-type(1n) {
- clear: none; }
- .small-block-grid-4 > li:nth-of-type(4n+1) {
- clear: both; }
+ h3 {
+ font-size: 1.6875rem; }
- .small-block-grid-5 > li {
- width: 20%;
- list-style: none; }
- .small-block-grid-5 > li:nth-of-type(1n) {
- clear: none; }
- .small-block-grid-5 > li:nth-of-type(5n+1) {
- clear: both; }
+ h4 {
+ font-size: 1.4375rem; }
- .small-block-grid-6 > li {
- width: 16.66667%;
- list-style: none; }
- .small-block-grid-6 > li:nth-of-type(1n) {
- clear: none; }
- .small-block-grid-6 > li:nth-of-type(6n+1) {
- clear: both; }
+ h5 {
+ font-size: 1.125rem; }
- .small-block-grid-7 > li {
- width: 14.28571%;
- list-style: none; }
- .small-block-grid-7 > li:nth-of-type(1n) {
- clear: none; }
- .small-block-grid-7 > li:nth-of-type(7n+1) {
- clear: both; }
+ h6 {
+ font-size: 1rem; } }
+ /*
+ * Print styles.
+ *
+ * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
+ * Credit to Paul Irish and HTML5 Boilerplate (html5boilerplate.com)
+ */
+ .print-only {
+ display: none !important; }
- .small-block-grid-8 > li {
- width: 12.5%;
- list-style: none; }
- .small-block-grid-8 > li:nth-of-type(1n) {
- clear: none; }
- .small-block-grid-8 > li:nth-of-type(8n+1) {
- clear: both; }
+ @media print {
+ * {
+ background: transparent !important;
+ color: black !important;
+ /* Black prints faster: h5bp.com/s */
+ box-shadow: none !important;
+ text-shadow: none !important; }
- .small-block-grid-9 > li {
- width: 11.11111%;
- list-style: none; }
- .small-block-grid-9 > li:nth-of-type(1n) {
- clear: none; }
- .small-block-grid-9 > li:nth-of-type(9n+1) {
- clear: both; }
+ a,
+ a:visited {
+ text-decoration: underline; }
- .small-block-grid-10 > li {
- width: 10%;
- list-style: none; }
- .small-block-grid-10 > li:nth-of-type(1n) {
- clear: none; }
- .small-block-grid-10 > li:nth-of-type(10n+1) {
- clear: both; }
+ a[href]:after {
+ content: " (" attr(href) ")"; }
- .small-block-grid-11 > li {
- width: 9.09091%;
- list-style: none; }
- .small-block-grid-11 > li:nth-of-type(1n) {
- clear: none; }
- .small-block-grid-11 > li:nth-of-type(11n+1) {
- clear: both; }
+ abbr[title]:after {
+ content: " (" attr(title) ")"; }
- .small-block-grid-12 > li {
- width: 8.33333%;
- list-style: none; }
- .small-block-grid-12 > li:nth-of-type(1n) {
- clear: none; }
- .small-block-grid-12 > li:nth-of-type(12n+1) {
- clear: both; } }
- @media only screen and (min-width: 40.063em) {
- .medium-block-grid-1 > li {
- width: 100%;
- list-style: none; }
- .medium-block-grid-1 > li:nth-of-type(1n) {
- clear: none; }
- .medium-block-grid-1 > li:nth-of-type(1n+1) {
- clear: both; }
+ .ir a:after,
+ a[href^="javascript:"]:after,
+ a[href^="#"]:after {
+ content: ""; }
- .medium-block-grid-2 > li {
- width: 50%;
- list-style: none; }
- .medium-block-grid-2 > li:nth-of-type(1n) {
- clear: none; }
- .medium-block-grid-2 > li:nth-of-type(2n+1) {
- clear: both; }
+ pre,
+ blockquote {
+ border: 1px solid #999999;
+ page-break-inside: avoid; }
- .medium-block-grid-3 > li {
- width: 33.33333%;
- list-style: none; }
- .medium-block-grid-3 > li:nth-of-type(1n) {
- clear: none; }
- .medium-block-grid-3 > li:nth-of-type(3n+1) {
- clear: both; }
+ thead {
+ display: table-header-group;
+ /* h5bp.com/t */ }
- .medium-block-grid-4 > li {
- width: 25%;
- list-style: none; }
- .medium-block-grid-4 > li:nth-of-type(1n) {
- clear: none; }
- .medium-block-grid-4 > li:nth-of-type(4n+1) {
- clear: both; }
+ tr,
+ img {
+ page-break-inside: avoid; }
- .medium-block-grid-5 > li {
- width: 20%;
- list-style: none; }
- .medium-block-grid-5 > li:nth-of-type(1n) {
- clear: none; }
- .medium-block-grid-5 > li:nth-of-type(5n+1) {
- clear: both; }
+ img {
+ max-width: 100% !important; }
+
+ @page {
+ margin: 0.5cm; }
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3; }
+
+ h2,
+ h3 {
+ page-break-after: avoid; }
- .medium-block-grid-6 > li {
- width: 16.66667%;
- list-style: none; }
- .medium-block-grid-6 > li:nth-of-type(1n) {
- clear: none; }
- .medium-block-grid-6 > li:nth-of-type(6n+1) {
- clear: both; }
+ .hide-on-print {
+ display: none !important; }
- .medium-block-grid-7 > li {
- width: 14.28571%;
- list-style: none; }
- .medium-block-grid-7 > li:nth-of-type(1n) {
- clear: none; }
- .medium-block-grid-7 > li:nth-of-type(7n+1) {
- clear: both; }
+ .print-only {
+ display: block !important; }
- .medium-block-grid-8 > li {
- width: 12.5%;
- list-style: none; }
- .medium-block-grid-8 > li:nth-of-type(1n) {
- clear: none; }
- .medium-block-grid-8 > li:nth-of-type(8n+1) {
- clear: both; }
+ .hide-for-print {
+ display: none !important; }
- .medium-block-grid-9 > li {
- width: 11.11111%;
- list-style: none; }
- .medium-block-grid-9 > li:nth-of-type(1n) {
- clear: none; }
- .medium-block-grid-9 > li:nth-of-type(9n+1) {
- clear: both; }
+ .show-for-print {
+ display: inherit !important; } }
+ .off-canvas-wrap {
+ -webkit-backface-visibility: hidden;
+ position: relative;
+ width: 100%;
+ overflow: hidden; }
+ .off-canvas-wrap.move-right, .off-canvas-wrap.move-left {
+ min-height: 100%;
+ -webkit-overflow-scrolling: touch; }
- .medium-block-grid-10 > li {
- width: 10%;
- list-style: none; }
- .medium-block-grid-10 > li:nth-of-type(1n) {
- clear: none; }
- .medium-block-grid-10 > li:nth-of-type(10n+1) {
- clear: both; }
+ .inner-wrap {
+ -webkit-backface-visibility: hidden;
+ position: relative;
+ width: 100%;
+ -webkit-transition: -webkit-transform 500ms ease;
+ -moz-transition: -moz-transform 500ms ease;
+ -ms-transition: -ms-transform 500ms ease;
+ -o-transition: -o-transform 500ms ease;
+ transition: transform 500ms ease; }
+ .inner-wrap:before, .inner-wrap:after {
+ content: " ";
+ display: table; }
+ .inner-wrap:after {
+ clear: both; }
- .medium-block-grid-11 > li {
- width: 9.09091%;
- list-style: none; }
- .medium-block-grid-11 > li:nth-of-type(1n) {
- clear: none; }
- .medium-block-grid-11 > li:nth-of-type(11n+1) {
- clear: both; }
+ .tab-bar {
+ -webkit-backface-visibility: hidden;
+ background: #333333;
+ color: white;
+ height: 2.8125rem;
+ line-height: 2.8125rem;
+ position: relative; }
+ .tab-bar h1, .tab-bar h2, .tab-bar h3, .tab-bar h4, .tab-bar h5, .tab-bar h6 {
+ color: white;
+ font-weight: bold;
+ line-height: 2.8125rem;
+ margin: 0; }
+ .tab-bar h1, .tab-bar h2, .tab-bar h3, .tab-bar h4 {
+ font-size: 1.125rem; }
- .medium-block-grid-12 > li {
- width: 8.33333%;
- list-style: none; }
- .medium-block-grid-12 > li:nth-of-type(1n) {
- clear: none; }
- .medium-block-grid-12 > li:nth-of-type(12n+1) {
- clear: both; } }
- @media only screen and (min-width: 64.063em) {
- .large-block-grid-1 > li {
- width: 100%;
- list-style: none; }
- .large-block-grid-1 > li:nth-of-type(1n) {
- clear: none; }
- .large-block-grid-1 > li:nth-of-type(1n+1) {
- clear: both; }
+ .left-small {
+ width: 2.8125rem;
+ height: 2.8125rem;
+ position: absolute;
+ top: 0;
+ border-right: solid 1px #1a1a1a;
+ left: 0; }
- .large-block-grid-2 > li {
- width: 50%;
- list-style: none; }
- .large-block-grid-2 > li:nth-of-type(1n) {
- clear: none; }
- .large-block-grid-2 > li:nth-of-type(2n+1) {
- clear: both; }
+ .right-small {
+ width: 2.8125rem;
+ height: 2.8125rem;
+ position: absolute;
+ top: 0;
+ border-left: solid 1px #1a1a1a;
+ right: 0; }
- .large-block-grid-3 > li {
- width: 33.33333%;
- list-style: none; }
- .large-block-grid-3 > li:nth-of-type(1n) {
- clear: none; }
- .large-block-grid-3 > li:nth-of-type(3n+1) {
- clear: both; }
+ .tab-bar-section {
+ padding: 0 0.625rem;
+ position: absolute;
+ text-align: center;
+ height: 2.8125rem;
+ top: 0; }
+ @media only screen and (min-width: 40.063em) {
+ .tab-bar-section.left, .tab-bar-section.right {
+ text-align: left; } }
+ .tab-bar-section.left {
+ left: 0;
+ right: 2.8125rem; }
+ .tab-bar-section.right {
+ left: 2.8125rem;
+ right: 0; }
+ .tab-bar-section.middle {
+ left: 2.8125rem;
+ right: 2.8125rem; }
- .large-block-grid-4 > li {
- width: 25%;
- list-style: none; }
- .large-block-grid-4 > li:nth-of-type(1n) {
- clear: none; }
- .large-block-grid-4 > li:nth-of-type(4n+1) {
- clear: both; }
+ .tab-bar .menu-icon {
+ text-indent: 2.1875rem;
+ width: 2.8125rem;
+ height: 2.8125rem;
+ display: block;
+ padding: 0;
+ color: white;
+ position: relative;
+ transform: translate3d(0, 0, 0); }
+ .tab-bar .menu-icon span::after {
+ content: "";
+ position: absolute;
+ display: block;
+ height: 0;
+ top: 50%;
+ margin-top: -0.5rem;
+ left: 0.90625rem;
+ box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
+ width: 1rem; }
+ .tab-bar .menu-icon span:hover:after {
+ box-shadow: 0 0px 0 1px #b3b3b3, 0 7px 0 1px #b3b3b3, 0 14px 0 1px #b3b3b3; }
- .large-block-grid-5 > li {
- width: 20%;
- list-style: none; }
- .large-block-grid-5 > li:nth-of-type(1n) {
- clear: none; }
- .large-block-grid-5 > li:nth-of-type(5n+1) {
- clear: both; }
+ .left-off-canvas-menu {
+ -webkit-backface-visibility: hidden;
+ width: 15.625rem;
+ top: 0;
+ bottom: 0;
+ position: absolute;
+ overflow-x: hidden;
+ overflow-y: auto;
+ background: #333333;
+ z-index: 1001;
+ box-sizing: content-box;
+ transition: transform 500ms ease 0s;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+ -ms-transform: translate(-100.5%, 0);
+ -webkit-transform: translate3d(-100.5%, 0, 0);
+ -moz-transform: translate3d(-100.5%, 0, 0);
+ -ms-transform: translate3d(-100.5%, 0, 0);
+ -o-transform: translate3d(-100.5%, 0, 0);
+ transform: translate3d(-100.5%, 0, 0);
+ left: 0; }
+ .left-off-canvas-menu * {
+ -webkit-backface-visibility: hidden; }
- .large-block-grid-6 > li {
- width: 16.66667%;
- list-style: none; }
- .large-block-grid-6 > li:nth-of-type(1n) {
- clear: none; }
- .large-block-grid-6 > li:nth-of-type(6n+1) {
- clear: both; }
+ .right-off-canvas-menu {
+ -webkit-backface-visibility: hidden;
+ width: 15.625rem;
+ top: 0;
+ bottom: 0;
+ position: absolute;
+ overflow-x: hidden;
+ overflow-y: auto;
+ background: #333333;
+ z-index: 1001;
+ box-sizing: content-box;
+ transition: transform 500ms ease 0s;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+ -ms-transform: translate(100.5%, 0);
+ -webkit-transform: translate3d(100.5%, 0, 0);
+ -moz-transform: translate3d(100.5%, 0, 0);
+ -ms-transform: translate3d(100.5%, 0, 0);
+ -o-transform: translate3d(100.5%, 0, 0);
+ transform: translate3d(100.5%, 0, 0);
+ right: 0; }
+ .right-off-canvas-menu * {
+ -webkit-backface-visibility: hidden; }
- .large-block-grid-7 > li {
- width: 14.28571%;
- list-style: none; }
- .large-block-grid-7 > li:nth-of-type(1n) {
- clear: none; }
- .large-block-grid-7 > li:nth-of-type(7n+1) {
- clear: both; }
+ ul.off-canvas-list {
+ list-style-type: none;
+ padding: 0;
+ margin: 0; }
+ ul.off-canvas-list li label {
+ display: block;
+ padding: 0.3rem 0.9375rem;
+ color: #999999;
+ text-transform: uppercase;
+ font-size: 0.75rem;
+ font-weight: bold;
+ background: #444444;
+ border-top: 1px solid #5e5e5e;
+ border-bottom: none;
+ margin: 0; }
+ ul.off-canvas-list li a {
+ display: block;
+ padding: 0.66667rem;
+ color: rgba(255, 255, 255, 0.7);
+ border-bottom: 1px solid #262626;
+ transition: background 300ms ease; }
+ ul.off-canvas-list li a:hover {
+ background: #242424; }
+
+ .move-right > .inner-wrap {
+ -ms-transform: translate(15.625rem, 0);
+ -webkit-transform: translate3d(15.625rem, 0, 0);
+ -moz-transform: translate3d(15.625rem, 0, 0);
+ -ms-transform: translate3d(15.625rem, 0, 0);
+ -o-transform: translate3d(15.625rem, 0, 0);
+ transform: translate3d(15.625rem, 0, 0); }
+ .move-right .exit-off-canvas {
+ -webkit-backface-visibility: hidden;
+ transition: background 300ms ease;
+ cursor: pointer;
+ box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
+ display: block;
+ position: absolute;
+ background: rgba(255, 255, 255, 0.2);
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1002;
+ -webkit-tap-highlight-color: transparent; }
+ @media only screen and (min-width: 40.063em) {
+ .move-right .exit-off-canvas:hover {
+ background: rgba(255, 255, 255, 0.05); } }
- .large-block-grid-8 > li {
- width: 12.5%;
- list-style: none; }
- .large-block-grid-8 > li:nth-of-type(1n) {
- clear: none; }
- .large-block-grid-8 > li:nth-of-type(8n+1) {
- clear: both; }
+ .move-left > .inner-wrap {
+ -ms-transform: translate(-15.625rem, 0);
+ -webkit-transform: translate3d(-15.625rem, 0, 0);
+ -moz-transform: translate3d(-15.625rem, 0, 0);
+ -ms-transform: translate3d(-15.625rem, 0, 0);
+ -o-transform: translate3d(-15.625rem, 0, 0);
+ transform: translate3d(-15.625rem, 0, 0); }
+ .move-left .exit-off-canvas {
+ -webkit-backface-visibility: hidden;
+ transition: background 300ms ease;
+ cursor: pointer;
+ box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
+ display: block;
+ position: absolute;
+ background: rgba(255, 255, 255, 0.2);
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1002;
+ -webkit-tap-highlight-color: transparent; }
+ @media only screen and (min-width: 40.063em) {
+ .move-left .exit-off-canvas:hover {
+ background: rgba(255, 255, 255, 0.05); } }
- .large-block-grid-9 > li {
- width: 11.11111%;
- list-style: none; }
- .large-block-grid-9 > li:nth-of-type(1n) {
- clear: none; }
- .large-block-grid-9 > li:nth-of-type(9n+1) {
- clear: both; }
+ .offcanvas-overlap .left-off-canvas-menu, .offcanvas-overlap .right-off-canvas-menu {
+ -ms-transform: none;
+ -webkit-transform: none;
+ -moz-transform: none;
+ -o-transform: none;
+ transform: none;
+ z-index: 1003; }
+ .offcanvas-overlap .exit-off-canvas {
+ -webkit-backface-visibility: hidden;
+ transition: background 300ms ease;
+ cursor: pointer;
+ box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
+ display: block;
+ position: absolute;
+ background: rgba(255, 255, 255, 0.2);
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1002;
+ -webkit-tap-highlight-color: transparent; }
+ @media only screen and (min-width: 40.063em) {
+ .offcanvas-overlap .exit-off-canvas:hover {
+ background: rgba(255, 255, 255, 0.05); } }
- .large-block-grid-10 > li {
- width: 10%;
- list-style: none; }
- .large-block-grid-10 > li:nth-of-type(1n) {
- clear: none; }
- .large-block-grid-10 > li:nth-of-type(10n+1) {
- clear: both; }
+ .offcanvas-overlap-left .right-off-canvas-menu {
+ -ms-transform: none;
+ -webkit-transform: none;
+ -moz-transform: none;
+ -o-transform: none;
+ transform: none;
+ z-index: 1003; }
+ .offcanvas-overlap-left .exit-off-canvas {
+ -webkit-backface-visibility: hidden;
+ transition: background 300ms ease;
+ cursor: pointer;
+ box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
+ display: block;
+ position: absolute;
+ background: rgba(255, 255, 255, 0.2);
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1002;
+ -webkit-tap-highlight-color: transparent; }
+ @media only screen and (min-width: 40.063em) {
+ .offcanvas-overlap-left .exit-off-canvas:hover {
+ background: rgba(255, 255, 255, 0.05); } }
- .large-block-grid-11 > li {
- width: 9.09091%;
- list-style: none; }
- .large-block-grid-11 > li:nth-of-type(1n) {
- clear: none; }
- .large-block-grid-11 > li:nth-of-type(11n+1) {
- clear: both; }
+ .offcanvas-overlap-right .left-off-canvas-menu {
+ -ms-transform: none;
+ -webkit-transform: none;
+ -moz-transform: none;
+ -o-transform: none;
+ transform: none;
+ z-index: 1003; }
+ .offcanvas-overlap-right .exit-off-canvas {
+ -webkit-backface-visibility: hidden;
+ transition: background 300ms ease;
+ cursor: pointer;
+ box-shadow: -4px 0 4px rgba(0, 0, 0, 0.5), 4px 0 4px rgba(0, 0, 0, 0.5);
+ display: block;
+ position: absolute;
+ background: rgba(255, 255, 255, 0.2);
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 1002;
+ -webkit-tap-highlight-color: transparent; }
+ @media only screen and (min-width: 40.063em) {
+ .offcanvas-overlap-right .exit-off-canvas:hover {
+ background: rgba(255, 255, 255, 0.05); } }
- .large-block-grid-12 > li {
- width: 8.33333%;
- list-style: none; }
- .large-block-grid-12 > li:nth-of-type(1n) {
- clear: none; }
- .large-block-grid-12 > li:nth-of-type(12n+1) {
- clear: both; } }
- .flex-video {
- position: relative;
- padding-top: 1.5625rem;
- padding-bottom: 67.5%;
- height: 0;
- margin-bottom: 1rem;
- overflow: hidden; }
- .flex-video.widescreen {
- padding-bottom: 56.34%; }
- .flex-video.vimeo {
- padding-top: 0; }
- .flex-video iframe,
- .flex-video object,
- .flex-video embed,
- .flex-video video {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%; }
+ .no-csstransforms .left-off-canvas-menu {
+ left: -15.625rem; }
+ .no-csstransforms .right-off-canvas-menu {
+ right: -15.625rem; }
+ .no-csstransforms .move-left > .inner-wrap {
+ right: 15.625rem; }
+ .no-csstransforms .move-right > .inner-wrap {
+ left: 15.625rem; }
- .keystroke,
- kbd {
- background-color: #ededed;
- border-color: #dddddd;
- color: #222222;
- border-style: solid;
- border-width: 1px;
+ .left-submenu {
+ -webkit-backface-visibility: hidden;
+ width: 15.625rem;
+ top: 0;
+ bottom: 0;
+ position: absolute;
margin: 0;
- font-family: "Consolas", "Menlo", "Courier", monospace;
- font-size: inherit;
- padding: 0.125rem 0.25rem 0;
- border-radius: 3px; }
+ overflow-x: hidden;
+ overflow-y: auto;
+ background: #333333;
+ z-index: 1002;
+ box-sizing: content-box;
+ -webkit-overflow-scrolling: touch;
+ -ms-transform: translate(-100%, 0);
+ -webkit-transform: translate3d(-100%, 0, 0);
+ -moz-transform: translate3d(-100%, 0, 0);
+ -ms-transform: translate3d(-100%, 0, 0);
+ -o-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ left: 0;
+ -webkit-transition: -webkit-transform 500ms ease;
+ -moz-transition: -moz-transform 500ms ease;
+ -ms-transition: -ms-transform 500ms ease;
+ -o-transition: -o-transform 500ms ease;
+ transition: transform 500ms ease; }
+ .left-submenu * {
+ -webkit-backface-visibility: hidden; }
+ .left-submenu .back > a {
+ padding: 0.3rem 0.9375rem;
+ color: #999999;
+ text-transform: uppercase;
+ font-weight: bold;
+ background: #444444;
+ border-top: 1px solid #5e5e5e;
+ border-bottom: none;
+ margin: 0; }
+ .left-submenu .back > a:hover {
+ background: #303030;
+ border-top: 1px solid #5e5e5e;
+ border-bottom: none; }
+ .left-submenu .back > a:before {
+ content: "\AB";
+ margin-right: 0.5rem;
+ display: inline; }
+ .left-submenu.move-right {
+ -ms-transform: translate(0%, 0);
+ -webkit-transform: translate3d(0%, 0, 0);
+ -moz-transform: translate3d(0%, 0, 0);
+ -ms-transform: translate3d(0%, 0, 0);
+ -o-transform: translate3d(0%, 0, 0);
+ transform: translate3d(0%, 0, 0); }
+
+ .right-submenu {
+ -webkit-backface-visibility: hidden;
+ width: 15.625rem;
+ top: 0;
+ bottom: 0;
+ position: absolute;
+ margin: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ background: #333333;
+ z-index: 1002;
+ box-sizing: content-box;
+ -webkit-overflow-scrolling: touch;
+ -ms-transform: translate(100%, 0);
+ -webkit-transform: translate3d(100%, 0, 0);
+ -moz-transform: translate3d(100%, 0, 0);
+ -ms-transform: translate3d(100%, 0, 0);
+ -o-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ right: 0;
+ -webkit-transition: -webkit-transform 500ms ease;
+ -moz-transition: -moz-transform 500ms ease;
+ -ms-transition: -ms-transform 500ms ease;
+ -o-transition: -o-transform 500ms ease;
+ transition: transform 500ms ease; }
+ .right-submenu * {
+ -webkit-backface-visibility: hidden; }
+ .right-submenu .back > a {
+ padding: 0.3rem 0.9375rem;
+ color: #999999;
+ text-transform: uppercase;
+ font-weight: bold;
+ background: #444444;
+ border-top: 1px solid #5e5e5e;
+ border-bottom: none;
+ margin: 0; }
+ .right-submenu .back > a:hover {
+ background: #303030;
+ border-top: 1px solid #5e5e5e;
+ border-bottom: none; }
+ .right-submenu .back > a:after {
+ content: "\BB";
+ margin-left: 0.5rem;
+ display: inline; }
+ .right-submenu.move-left {
+ -ms-transform: translate(0%, 0);
+ -webkit-transform: translate3d(0%, 0, 0);
+ -moz-transform: translate3d(0%, 0, 0);
+ -ms-transform: translate3d(0%, 0, 0);
+ -o-transform: translate3d(0%, 0, 0);
+ transform: translate3d(0%, 0, 0); }
+
+ .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after {
+ content: "\BB";
+ margin-left: 0.5rem;
+ display: inline; }
+
+ .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before {
+ content: "\AB";
+ margin-right: 0.5rem;
+ display: inline; }
/* small displays */
@media only screen {
@@ @@ -5085,7 +5825,7 @@ kbd {
clip: rect(1px, 1px, 1px, 1px); }
table.show-for-small-only, table.show-for-small-up, table.show-for-small, table.show-for-small-down, table.hide-for-medium-only, table.hide-for-medium-up, table.hide-for-medium, table.show-for-medium-down, table.hide-for-large-only, table.hide-for-large-up, table.hide-for-large, table.show-for-large-down, table.hide-for-xlarge-only, table.hide-for-xlarge-up, table.hide-for-xxlarge-only, table.hide-for-xxlarge-up {
- display: table; }
+ display: table !important; }
thead.show-for-small-only, thead.show-for-small-up, thead.show-for-small, thead.show-for-small-down, thead.hide-for-medium-only, thead.hide-for-medium-up, thead.hide-for-medium, thead.show-for-medium-down, thead.hide-for-large-only, thead.hide-for-large-up, thead.hide-for-large, thead.show-for-large-down, thead.hide-for-xlarge-only, thead.hide-for-xlarge-up, thead.hide-for-xxlarge-only, thead.hide-for-xxlarge-up {
display: table-header-group !important; }
@@ @@ -5121,7 +5861,7 @@ kbd {
clip: rect(1px, 1px, 1px, 1px); }
table.hide-for-small-only, table.show-for-small-up, table.hide-for-small, table.hide-for-small-down, table.show-for-medium-only, table.show-for-medium-up, table.show-for-medium, table.show-for-medium-down, table.hide-for-large-only, table.hide-for-large-up, table.hide-for-large, table.show-for-large-down, table.hide-for-xlarge-only, table.hide-for-xlarge-up, table.hide-for-xxlarge-only, table.hide-for-xxlarge-up {
- display: table; }
+ display: table !important; }
thead.hide-for-small-only, thead.show-for-small-up, thead.hide-for-small, thead.hide-for-small-down, thead.show-for-medium-only, thead.show-for-medium-up, thead.show-for-medium, thead.show-for-medium-down, thead.hide-for-large-only, thead.hide-for-large-up, thead.hide-for-large, thead.show-for-large-down, thead.hide-for-xlarge-only, thead.hide-for-xlarge-up, thead.hide-for-xxlarge-only, thead.hide-for-xxlarge-up {
display: table-header-group !important; }
@@ @@ -5157,7 +5897,7 @@ kbd {
clip: rect(1px, 1px, 1px, 1px); }
table.hide-for-small-only, table.show-for-small-up, table.hide-for-small, table.hide-for-small-down, table.hide-for-medium-only, table.show-for-medium-up, table.hide-for-medium, table.hide-for-medium-down, table.show-for-large-only, table.show-for-large-up, table.show-for-large, table.show-for-large-down, table.hide-for-xlarge-only, table.hide-for-xlarge-up, table.hide-for-xxlarge-only, table.hide-for-xxlarge-up {
- display: table; }
+ display: table !important; }
thead.hide-for-small-only, thead.show-for-small-up, thead.hide-for-small, thead.hide-for-small-down, thead.hide-for-medium-only, thead.show-for-medium-up, thead.hide-for-medium, thead.hide-for-medium-down, thead.show-for-large-only, thead.show-for-large-up, thead.show-for-large, thead.show-for-large-down, thead.hide-for-xlarge-only, thead.hide-for-xlarge-up, thead.hide-for-xxlarge-only, thead.hide-for-xxlarge-up {
display: table-header-group !important; }
@@ @@ -5193,7 +5933,7 @@ kbd {
clip: rect(1px, 1px, 1px, 1px); }
table.hide-for-small-only, table.show-for-small-up, table.hide-for-small, table.hide-for-small-down, table.hide-for-medium-only, table.show-for-medium-up, table.hide-for-medium, table.hide-for-medium-down, table.hide-for-large-only, table.show-for-large-up, table.hide-for-large, table.hide-for-large-down, table.show-for-xlarge-only, table.show-for-xlarge-up, table.hide-for-xxlarge-only, table.hide-for-xxlarge-up {
- display: table; }
+ display: table !important; }
thead.hide-for-small-only, thead.show-for-small-up, thead.hide-for-small, thead.hide-for-small-down, thead.hide-for-medium-only, thead.show-for-medium-up, thead.hide-for-medium, thead.hide-for-medium-down, thead.hide-for-large-only, thead.show-for-large-up, thead.hide-for-large, thead.hide-for-large-down, thead.show-for-xlarge-only, thead.show-for-xlarge-up, thead.hide-for-xxlarge-only, thead.hide-for-xxlarge-up {
display: table-header-group !important; }
@@ @@ -5229,7 +5969,7 @@ kbd {
clip: rect(1px, 1px, 1px, 1px); }
table.hide-for-small-only, table.show-for-small-up, table.hide-for-small, table.hide-for-small-down, table.hide-for-medium-only, table.show-for-medium-up, table.hide-for-medium, table.hide-for-medium-down, table.hide-for-large-only, table.show-for-large-up, table.hide-for-large, table.hide-for-large-down, table.hide-for-xlarge-only, table.show-for-xlarge-up, table.show-for-xxlarge-only, table.show-for-xxlarge-up {
- display: table; }
+ display: table !important; }
thead.hide-for-small-only, thead.show-for-small-up, thead.hide-for-small, thead.hide-for-small-down, thead.hide-for-medium-only, thead.show-for-medium-up, thead.hide-for-medium, thead.hide-for-medium-down, thead.hide-for-large-only, thead.show-for-large-up, thead.hide-for-large, thead.hide-for-large-down, thead.hide-for-xlarge-only, thead.show-for-xlarge-up, thead.show-for-xxlarge-only, thead.show-for-xxlarge-up {
display: table-header-group !important; }
@@ @@ -5253,7 +5993,7 @@ kbd {
/* Specific visibility for tables */
table.hide-for-landscape, table.show-for-portrait {
- display: table; }
+ display: table !important; }
thead.hide-for-landscape, thead.show-for-portrait {
display: table-header-group !important; }
@@ @@ -5280,7 +6020,7 @@ th.show-for-portrait {
/* Specific visibility for tables */
table.show-for-landscape, table.hide-for-portrait {
- display: table; }
+ display: table !important; }
thead.show-for-landscape, thead.hide-for-portrait {
display: table-header-group !important; }
@@ @@ -5306,7 +6046,7 @@ th.show-for-portrait {
/* Specific visibility for tables */
table.show-for-portrait, table.hide-for-landscape {
- display: table; }
+ display: table !important; }
thead.show-for-portrait, thead.hide-for-landscape {
display: table-header-group !important; }
@@ @@ -5336,10 +6076,10 @@ th.show-for-portrait {
/* Specific visibility for tables */
table.hide-for-touch {
- display: table; }
+ display: table !important; }
.touch table.show-for-touch {
- display: table; }
+ display: table !important; }
thead.hide-for-touch {
display: table-header-group !important; }
@@ @@ -5380,7 +6120,7 @@ th.hide-for-touch {
display: none; }
table.show-for-print {
- display: table; }
+ display: table !important; }
thead.show-for-print {
display: table-header-group !important; }
generators/foundation5/public/stylesheets/foundation.css.scss +38 -38
@@ @@ -1,45 +1,45 @@
+ @charset "UTF-8";
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
// Make sure the charset is set appropriately
- @charset "UTF-8";
// Behold, here are all the Foundation components.
- @import
- "foundation/components/grid",
- "foundation/components/accordion",
- "foundation/components/alert-boxes",
- "foundation/components/block-grid",
- "foundation/components/breadcrumbs",
- "foundation/components/button-groups",
- "foundation/components/buttons",
- "foundation/components/clearing",
- "foundation/components/dropdown",
- "foundation/components/dropdown-buttons",
- "foundation/components/flex-video",
- "foundation/components/forms",
- "foundation/components/inline-lists",
- "foundation/components/joyride",
- "foundation/components/keystrokes",
- "foundation/components/labels",
- "foundation/components/magellan",
- "foundation/components/orbit",
- "foundation/components/pagination",
- "foundation/components/panels",
- "foundation/components/pricing-tables",
- "foundation/components/progress-bars",
- "foundation/components/range-slider",
- "foundation/components/reveal",
- "foundation/components/side-nav",
- "foundation/components/split-buttons",
- "foundation/components/sub-nav",
- "foundation/components/switch",
- "foundation/components/tables",
- "foundation/components/tabs",
- "foundation/components/thumbs",
- "foundation/components/tooltips",
- "foundation/components/top-bar",
- "foundation/components/type",
- "foundation/components/offcanvas",
- "foundation/components/visibility";
+ @import "foundation/components/grid";
+ @import "foundation/components/accordion";
+ @import "foundation/components/alert-boxes";
+ @import "foundation/components/block-grid";
+ @import "foundation/components/breadcrumbs";
+ @import "foundation/components/button-groups";
+ @import "foundation/components/buttons";
+ @import "foundation/components/clearing";
+ @import "foundation/components/dropdown";
+ @import "foundation/components/dropdown-buttons";
+ @import "foundation/components/flex-video";
+ @import "foundation/components/forms";
+ @import "foundation/components/icon-bar";
+ @import "foundation/components/inline-lists";
+ @import "foundation/components/joyride";
+ @import "foundation/components/keystrokes";
+ @import "foundation/components/labels";
+ @import "foundation/components/magellan";
+ @import "foundation/components/orbit";
+ @import "foundation/components/pagination";
+ @import "foundation/components/panels";
+ @import "foundation/components/pricing-tables";
+ @import "foundation/components/progress-bars";
+ @import "foundation/components/range-slider";
+ @import "foundation/components/reveal";
+ @import "foundation/components/side-nav";
+ @import "foundation/components/split-buttons";
+ @import "foundation/components/sub-nav";
+ @import "foundation/components/switches";
+ @import "foundation/components/tables";
+ @import "foundation/components/tabs";
+ @import "foundation/components/thumbs";
+ @import "foundation/components/tooltips";
+ @import "foundation/components/top-bar";
+ @import "foundation/components/type";
+ @import "foundation/components/offcanvas";
+ @import "foundation/components/visibility";
generators/foundation5/public/stylesheets/foundation/_functions.scss +3 -2
@@ @@ -9,7 +9,8 @@ $rem-base: 16px !default;
// We use this to prevent styles from being loaded multiple times for compenents that rely on other components.
$modules: () !default;
@mixin exports($name) {
- @if (index($modules, $name) == false) {
+ $module_index: index($modules, $name);
+ @if (($module_index == null) or ($module_index == false)) {
$modules: append($modules, $name);
@content;
}
@@ @@ -98,4 +99,4 @@ $modules: () !default;
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
@function em-calc($values){
@return rem-calc($values);
- }
\ No newline at end of file
+ }
generators/foundation5/public/stylesheets/foundation/_settings.scss +419 -274
@@ @@ -3,8 +3,53 @@
// Licensed under MIT Open Source
//
- // FOUNDATION SETTINGS
+
+ // Table of Contents
+ // Foundation Settings
//
+ // a. Base
+ // b. Grid
+ // c. Global
+ // d. Media Query Ranges
+ // e. Typography
+ // 01. Accordion
+ // 02. Alert Boxes
+ // 03. Block Grid
+ // 04. Breadcrumbs
+ // 05. Buttons
+ // 06. Button Groups
+ // 07. Clearing
+ // 08. Dropdown
+ // 09. Dropdown Buttons
+ // 10. Flex Video
+ // 11. Forms
+ // 12. Icon Bar
+ // 13. Inline Lists
+ // 14. Joyride
+ // 15. Keystrokes
+ // 16. Labels
+ // 17. Magellan
+ // 18. Off-canvas
+ // 19. Orbit
+ // 20. Pagination
+ // 21. Panels
+ // 22. Pricing Tables
+ // 23. Progress Bar
+ // 24. Range Slider
+ // 25. Reveal
+ // 26. Side Nav
+ // 27. Split Buttons
+ // 28. Sub Nav
+ // 29. Switch
+ // 30. Tables
+ // 31. Tabs
+ // 32. Thumbnails
+ // 33. Tooltips
+ // 34. Top Bar
+ // 36. Visibility Classes
+
+ // a. Base
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// This is the default html and body font-size for the base rem value.
// $rem-base: 16px;
@@ @@ -12,8 +57,6 @@
// Allows the use of rem-calc() or lower-bound() in your settings
@import "foundation/functions";
- // $experimental: true;
-
// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.
@@ @@ -26,24 +69,64 @@
// $base-line-height: 150%;
// We use this to control whether or not CSS classes come through in the gem files.
- // $include-html-classes: true;
+ $include-html-classes: true;
// $include-print-styles: true;
- // $include-html-global-classes: $include-html-classes;
+ $include-html-global-classes: $include-html-classes;
- // Grid
+ // b. Grid
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-grid-classes: $include-html-classes;
// $include-xl-html-grid-classes: false;
// $row-width: rem-calc(1000);
// $total-columns: 12;
+ // $column-gutter: rem-calc(30);
- // Global
+ // c. Global
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
+
+ // We use these to define default font stacks
+ // $font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+ // $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
+ // $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
+
+ // We use these to define default font weights
+ // $font-weight-normal: normal !default;
+ // $font-weight-bold: bold !default;
+
+ // $white : #FFFFFF;
+ // $ghost : #FAFAFA;
+ // $snow : #F9F9F9;
+ // $vapor : #F6F6F6;
+ // $white-smoke : #F5F5F5;
+ // $silver : #EFEFEF;
+ // $smoke : #EEEEEE;
+ // $gainsboro : #DDDDDD;
+ // $iron : #CCCCCC;
+ // $base : #AAAAAA;
+ // $aluminum : #999999;
+ // $jumbo : #888888;
+ // $monsoon : #777777;
+ // $steel : #666666;
+ // $charcoal : #555555;
+ // $tuatara : #444444;
+ // $oil : #333333;
+ // $jet : #222222;
+ // $black : #000000;
+
+ // We use these as default colors throughout
+ // $primary-color: #008CBA;
+ // $secondary-color: #e7e7e7;
+ // $alert-color: #f04124;
+ // $success-color: #43AC6A;
+ // $warning-color: #f08a24;
+ // $info-color: #a0d3e8;
// We use these to control various global styles
- // $body-bg: #fff;
- // $body-font-color: #222;
- // $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+ // $body-bg: $white;
+ // $body-font-color: $jet;
+ // $body-font-family: $font-family-sans-serif;
// $body-font-weight: $font-weight-normal;
// $body-font-style: normal;
@@ @@ -54,14 +137,7 @@
// $text-direction: ltr;
// $opposite-direction: right;
// $default-float: left;
-
- // We use these as default colors throughout
- // $primary-color: #008CBA;
- // $secondary-color: #e7e7e7;
- // $alert-color: #f04124;
- // $success-color: #43AC6A;
- // $warning-color: #f08a24;
- // $info-color: #a0d3e8;
+ // $last-child-float: $opposite-direction;
// We use these to make sure border radius matches unless we want it different.
// $global-radius: 3px;
@@ @@ -69,12 +145,12 @@
// We use these to control inset shadow shiny edges and depressions.
// $shiny-edge-size: 0 1px 0;
- // $shiny-edge-color: rgba(#fff, .5);
- // $shiny-edge-active-color: rgba(#000, .2);
+ // $shiny-edge-color: rgba($white, .5);
+ // $shiny-edge-active-color: rgba($black, .2);
- // $column-gutter: rem-calc(30);
+ // d. Media Query Ranges
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
- // Media Query Ranges
// $small-range: (0em, 40em);
// $medium-range: (40.063em, 64em);
// $large-range: (64.063em, 90em);
@@ @@ -106,16 +182,15 @@
// $medium: $medium-up;
// $large: $large-up;
- //We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
+ // We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
// $cursor-crosshair-value: crosshair;
// $cursor-default-value: default;
// $cursor-pointer-value: pointer;
// $cursor-help-value: help;
// $cursor-text-value: text;
- //
- // TYPOGRAPHY
- //
+ // e. Typography
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-type-classes: $include-html-classes;
@@ @@ -123,7 +198,7 @@
// $header-font-family: $body-font-family;
// $header-font-weight: $font-weight-normal;
// $header-font-style: normal;
- // $header-font-color: #222;
+ // $header-font-color: $jet;
// $header-line-height: 1.4;
// $header-top-margin: .2rem;
// $header-bottom-margin: .5rem;
@@ @@ -168,9 +243,14 @@
// $paragraph-text-rendering: optimizeLegibility;
// We use these to style <code> tags
- // $code-color: scale-color($alert-color, $lightness: -27%);
- // $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
- // $code-font-weight: $font-weight-bold;
+ // $code-color: $oil;
+ // $code-font-family: $font-family-monospace;
+ // $code-font-weight: $font-weight-normal;
+ // $code-background-color: scale-color($secondary-color, $lightness: 70%);
+ // $code-border-size: 1px;
+ // $code-border-style: solid;
+ // $code-border-color: scale-color($code-background-color, $lightness: -10%);
+ // $code-padding: rem-calc(2) rem-calc(5) rem-calc(1);
// We use these to style anchors
// $anchor-text-decoration: none;
@@ @@ -181,7 +261,7 @@
// We use these to style the <hr> element
// $hr-border-width: 1px;
// $hr-border-style: solid;
- // $hr-border-color: #ddd;
+ // $hr-border-color: $gainsboro;
// $hr-margin: rem-calc(20);
// We use these to style lists
@@ @@ -201,13 +281,13 @@
// We use these to style blockquotes
// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
// $blockquote-padding: rem-calc(9 20 0 19);
- // $blockquote-border: 1px solid #ddd;
+ // $blockquote-border: 1px solid $gainsboro;
// $blockquote-cite-font-size: rem-calc(13);
// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
// $blockquote-cite-link-color: $blockquote-cite-font-color;
// Acronym styles
- // $acronym-underline: 1px dotted #ddd;
+ // $acronym-underline: 1px dotted $gainsboro;
// We use these to control padding and margin
// $microformat-padding: rem-calc(10 12);
@@ @@ -216,7 +296,7 @@
// We use these to control the border styles
// $microformat-border-width: 1px;
// $microformat-border-style: solid;
- // $microformat-border-color: #ddd;
+ // $microformat-border-color: $gainsboro;
// We use these to control full name font styles
// $microformat-fullname-font-weight: $font-weight-bold;
@@ @@ -232,22 +312,24 @@
// $microformat-abbr-font-weight: $font-weight-bold;
// $microformat-abbr-font-decoration: none;
- // Accordion
+ // 01. Accordion
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-accordion-classes: $include-html-classes;
// $accordion-navigation-padding: rem-calc(16);
- // $accordion-navigation-bg-color: #efefef ;
+ // $accordion-navigation-bg-color: $silver ;
// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
- // $accordion-navigation-font-color: #222;
+ // $accordion-navigation-font-color: $jet;
// $accordion-navigation-font-size: rem-calc(16);
// $accordion-navigation-font-family: $body-font-family;
// $accordion-content-padding: $column-gutter/2;
- // $accordion-content-active-bg-color: #fff;
+ // $accordion-content-active-bg-color: $white;
- // Alert Boxes
+ // 02. Alert Boxes
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-alert-classes: $include-html-classes;
@@ @@ -260,7 +342,7 @@
// We use these to control text style.
// $alert-font-weight: $font-weight-normal;
// $alert-font-size: rem-calc(13);
- // $alert-font-color: #fff;
+ // $alert-font-color: $white;
// $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
// We use this for close hover effect.
@@ @@ -273,7 +355,7 @@
// $alert-bottom-margin: rem-calc(20);
// We use these to style the close buttons
- // $alert-close-color: #333;
+ // $alert-close-color: $oil;
// $alert-close-top: 50%;
// $alert-close-position: rem-calc(4);
// $alert-close-font-size: rem-calc(22);
@@ @@ -288,9 +370,10 @@
// $alert-transition-speed: 300ms;
// $alert-transition-ease: ease-out;
- // Block Grid
+ // 03. Block Grid
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
- // $include-html-grid-classes: $include-html-classes;
+ // $include-html-block-grid-classes: $include-html-classes;
// $include-xl-html-block-grid-classes: false;
// We use this to control the maximum number of block grid elements per row
@@ @@ -298,11 +381,11 @@
// $block-grid-default-spacing: rem-calc(20);
// $align-block-grid-to-grid: false;
-
// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
// $block-grid-media-queries: true;
- // Breadcrumbs
+ // 04. Breadcrumbs
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-nav-classes: $include-html-classes;
@@ @@ -323,18 +406,17 @@
// We use these to set various text styles for breadcrumbs.
// $crumb-font-size: rem-calc(11);
// $crumb-font-color: $primary-color;
- // $crumb-font-color-current: #333;
- // $crumb-font-color-unavailable: #999;
+ // $crumb-font-color-current: $oil;
+ // $crumb-font-color-unavailable: $aluminum;
// $crumb-font-transform: uppercase;
// $crumb-link-decor: underline;
// We use these to control the slash between breadcrumbs
- // $crumb-slash-color: #aaa;
+ // $crumb-slash-color: $base;
// $crumb-slash: "/";
- //
- // BUTTONS
- //
+ // 05. Buttons
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-button-classes: $include-html-classes;
@@ @@ -350,8 +432,8 @@
// We use these to control button text styles.
// $button-font-family: $body-font-family;
- // $button-font-color: #fff;
- // $button-font-color-alt: #333;
+ // $button-font-color: $white;
+ // $button-font-color-alt: $oil;
// $button-font-tny: rem-calc(11);
// $button-font-sml: rem-calc(13);
// $button-font-med: rem-calc(16);
@@ @@ -362,20 +444,29 @@
// We use these to control various hover effects.
// $button-function-factor: -20%;
- // We use these to control button border styles.
+ // We use these to control button border and hover styles.
// $button-border-width: 0px;
// $button-border-style: solid;
- // $button-bg: $primary-color;
- // $button-border-color: scale-color($bg, $lightness: $button-function-factor);
+ // $button-bg-color: $primary-color;
+ // $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor);
+ // $button-border-color: $button-bg-hover;
+ // $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor);
+ // $secondary-button-border-color: $secondary-button-bg-hover;
+ // $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor);
+ // $success-button-border-color: $success-button-bg-hover;
+ // $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor);
+ // $alert-button-border-color: $alert-button-bg-hover;
// We use this to set the default radius used throughout the core.
// $button-radius: $global-radius;
// $button-round: $global-rounded;
- // We use this to set default opacity for disabled buttons.
+ // We use this to set default opacity and cursor for disabled buttons.
// $button-disabled-opacity: 0.7;
+ // $button-disabled-cursor: $cursor-default-value;
- // Button Groups
+ // 06. Button Groups
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-button-classes: $include-html-classes;
@@ @@ -383,18 +474,19 @@
// $button-bar-margin-opposite: rem-calc(10);
// $button-group-border-width: 1px;
- // Clearing
+ // 07. Clearing
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-clearing-classes: $include-html-classes;
// We use these to set the background colors for parts of Clearing.
- // $clearing-bg: #333;
+ // $clearing-bg: $oil;
// $clearing-caption-bg: $clearing-bg;
// $clearing-carousel-bg: rgba(51,51,51,0.8);
// $clearing-img-bg: $clearing-bg;
// We use these to style the close button
- // $clearing-close-color: #ccc;
+ // $clearing-close-color: $iron;
// $clearing-close-size: 30px;
// We use these to style the arrows
@@ @@ -402,7 +494,7 @@
// $clearing-arrow-color: $clearing-close-color;
// We use these to style captions
- // $clearing-caption-font-color: #ccc;
+ // $clearing-caption-font-color: $iron;
// $clearing-caption-font-size: 0.875em;
// $clearing-caption-padding: 10px 30px 20px;
@@ @@ -412,7 +504,8 @@
// $clearing-carousel-thumb-width: 120px;
// $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255);
- // Dropdown
+ // 08. Dropdown
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-dropdown-classes: $include-html-classes;
@@ @@ -434,37 +527,42 @@
// $f-dropdown-margin-bottom: $f-dropdown-margin-top;
// We use this to control the background color
- // $f-dropdown-bg: #fff;
+ // $f-dropdown-bg: $white;
// We use this to set the border styles for dropdowns.
// $f-dropdown-border-style: solid;
// $f-dropdown-border-width: 1px;
- // $f-dropdown-border-color: scale-color(#fff, $lightness: -20%);
+ // $f-dropdown-border-color: scale-color($white, $lightness: -20%);
// We use these to style the triangle pip.
// $f-dropdown-triangle-size: 6px;
- // $f-dropdown-triangle-color: #fff;
+ // $f-dropdown-triangle-color: $white;
// $f-dropdown-triangle-side-offset: 10px;
// We use these to control styles for the list elements.
// $f-dropdown-list-style: none;
- // $f-dropdown-font-color: #555;
+ // $f-dropdown-font-color: $charcoal;
// $f-dropdown-font-size: rem-calc(14);
// $f-dropdown-list-padding: rem-calc(5, 10);
// $f-dropdown-line-height: rem-calc(18);
- // $f-dropdown-list-hover-bg: #eeeeee ;
+ // $f-dropdown-list-hover-bg: $smoke ;
// $dropdown-mobile-default-float: 0;
// We use this to control the styles for when the dropdown has custom content.
// $f-dropdown-content-padding: rem-calc(20);
- // Dropdown Buttons
+ // Default radius for dropdown.
+ // $f-dropdown-radius: $global-radius;
+
+
+ // 09. Dropdown Buttons
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-button-classes: $include-html-classes;
// We use these to set the color of the pip in dropdown buttons
- // $dropdown-button-pip-color: #fff;
- // $dropdown-button-pip-color-alt: #333;
+ // $dropdown-button-pip-color: $white;
+ // $dropdown-button-pip-color-alt: $oil;
// $button-pip-tny: rem-calc(6);
// $button-pip-sml: rem-calc(7);
@@ @@ -495,7 +593,8 @@
// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
// $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3);
- // Flex Video
+ // 10. Flex Video
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-media-classes: $include-html-classes;
@@ @@ -507,7 +606,8 @@
// We use this to control widescreen bottom padding
// $flex-video-widescreen-padding-bottom: 56.34%;
- // Forms
+ // 11. Forms
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-form-classes: $include-html-classes;
@@ @@ -519,43 +619,46 @@
// $form-label-font-size: rem-calc(14);
// $form-label-font-weight: $font-weight-normal;
// $form-label-line-height: 1.5;
- // $form-label-font-color: scale-color(#000, $lightness: 30%);
+ // $form-label-font-color: scale-color($black, $lightness: 30%);
// $form-label-small-transform: capitalize;
// $form-label-bottom-margin: 0;
// $input-font-family: inherit;
// $input-font-color: rgba(0,0,0,0.75);
// $input-font-size: rem-calc(14);
- // $input-bg-color: #fff;
- // $input-focus-bg-color: scale-color(#fff, $lightness: -2%);
- // $input-border-color: scale-color(#fff, $lightness: -20%);
- // $input-focus-border-color: scale-color(#fff, $lightness: -40%);
+ // $input-bg-color: $white;
+ // $input-focus-bg-color: scale-color($white, $lightness: -2%);
+ // $input-border-color: scale-color($white, $lightness: -20%);
+ // $input-focus-border-color: scale-color($white, $lightness: -40%);
// $input-border-style: solid;
// $input-border-width: 1px;
// $input-border-radius: $global-radius;
- // $input-disabled-bg: #ddd;
+ // $input-disabled-bg: $gainsboro;
+ // $input-disabled-cursor: $cursor-default-value;
// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
- // $input-include-glowing-effect: true;
// We use these to style the fieldset border and spacing.
// $fieldset-border-style: solid;
// $fieldset-border-width: 1px;
- // $fieldset-border-color: #ddd;
+ // $fieldset-border-color: $gainsboro;
// $fieldset-padding: rem-calc(20);
// $fieldset-margin: rem-calc(18 0);
// We use these to style the legends when you use them
- // $legend-bg: #fff;
+ // $legend-bg: $white;
// $legend-font-weight: $font-weight-bold;
// $legend-padding: rem-calc(0 3);
// We use these to style the prefix and postfix input elements
- // $input-prefix-bg: scale-color(#fff, $lightness: -5%);
- // $input-prefix-border-color: scale-color(#fff, $lightness: -20%);
+ // $input-prefix-bg: scale-color($white, $lightness: -5%);
+ // $input-prefix-border-color: scale-color($white, $lightness: -20%);
// $input-prefix-border-size: 1px;
// $input-prefix-border-type: solid;
// $input-prefix-overflow: hidden;
- // $input-prefix-font-color: #333;
- // $input-prefix-font-color-alt: #fff;
+ // $input-prefix-font-color: $oil;
+ // $input-prefix-font-color-alt: $white;
+
+ // We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
+ // $input-number-spinners: true;
// We use these to style the error states for inputs and labels
// $input-error-message-padding: rem-calc(6 9 9);
@@ @@ -563,18 +666,36 @@
// $input-error-message-font-size: rem-calc(12);
// $input-error-message-font-weight: $font-weight-normal;
// $input-error-message-font-style: italic;
- // $input-error-message-font-color: #fff;
- // $input-error-message-font-color-alt: #333;
+ // $input-error-message-font-color: $white;
+ // $input-error-message-font-color-alt: $oil;
// We use this to style the glowing effect of inputs when focused
+ // $input-include-glowing-effect: true;
// $glowing-effect-fade-time: 0.45s;
// $glowing-effect-color: $input-focus-border-color;
// Select variables
- // $select-bg-color: #fafafa;
+ // $select-bg-color: $ghost;
// $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);
- // Inline Lists
+ // 12. Icon Bar
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
+
+ // We use these to style the icon-bar and items
+ // $include-html-icon-bar-classes: $include-html-classes;
+ // $icon-bar-bg: $oil;
+ // $icon-bar-font-color: $white;
+ // $icon-bar-font-size: 1rem;
+ // $icon-bar-hover-color: $primary-color;
+ // $icon-bar-icon-color: $white;
+ // $icon-bar-icon-size: 1.875rem;
+ // $icon-bar-image-width: 1.875rem;
+ // $icon-bar-image-height: 1.875rem;
+ // $icon-bar-active-color: $primary-color;
+ // $icon-bar-item-padding: 1.25rem;
+
+ // 13. Inline Lists
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-inline-list-classes: $include-html-classes;
@@ @@ -593,23 +714,24 @@
// We use this to control the list items
// $inline-list-display: block;
- // We use this to control any elments within list items
+ // We use this to control any elements within list items
// $inline-list-children-display: block;
- // Joyride
+ // 14. Joyride
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-joyride-classes: $include-html-classes;
// Controlling default Joyride styles
- // $joyride-tip-bg: #333;
+ // $joyride-tip-bg: $oil;
// $joyride-tip-default-width: 300px;
// $joyride-tip-padding: rem-calc(18 20 24);
- // $joyride-tip-border: solid 1px #555;
+ // $joyride-tip-border: solid 1px $charcoal;
// $joyride-tip-radius: 4px;
// $joyride-tip-position-offset: 22px;
- // Here, we're setting the tip dont styles
- // $joyride-tip-font-color: #fff;
+ // Here, we're setting the tip font styles
+ // $joyride-tip-font-color: $white;
// $joyride-tip-font-size: rem-calc(14);
// $joyride-tip-header-weight: $font-weight-bold;
@@ @@ -619,67 +741,72 @@
// This adjusts the styles for the timer when its enabled
// $joyride-tip-timer-width: 50px;
// $joyride-tip-timer-height: 3px;
- // $joyride-tip-timer-color: #666;
+ // $joyride-tip-timer-color: $steel;
// This changes up the styles for the close button
- // $joyride-tip-close-color: #777;
+ // $joyride-tip-close-color: $monsoon;
// $joyride-tip-close-size: 24px;
// $joyride-tip-close-weight: $font-weight-normal;
// When Joyride is filling the screen, we use this style for the bg
// $joyride-screenfill: rgba(0,0,0,0.5);
- // Keystrokes
+ // 15. Keystrokes
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-keystroke-classes: $include-html-classes;
// We use these to control text styles.
// $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
// $keystroke-font-size: inherit;
- // $keystroke-font-color: #222;
- // $keystroke-font-color-alt: #fff;
+ // $keystroke-font-color: $jet;
+ // $keystroke-font-color-alt: $white;
// $keystroke-function-factor: -7%;
// We use this to control keystroke padding.
// $keystroke-padding: rem-calc(2 4 0);
// We use these to control background and border styles.
- // $keystroke-bg: scale-color(#fff, $lightness: $keystroke-function-factor);
+ // $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor);
// $keystroke-border-style: solid;
// $keystroke-border-width: 1px;
// $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor);
// $keystroke-radius: $global-radius;
- // Labels
+ // 16. Labels
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-label-classes: $include-html-classes;
// We use these to style the labels
- // $label-padding: rem-calc(4 8 6);
+ // $label-padding: rem-calc(4 8 4);
// $label-radius: $global-radius;
// We use these to style the label text
// $label-font-sizing: rem-calc(11);
// $label-font-weight: $font-weight-normal;
- // $label-font-color: #333;
- // $label-font-color-alt: #fff;
+ // $label-font-color: $oil;
+ // $label-font-color-alt: $white;
// $label-font-family: $body-font-family;
- // Magellan
+ // 17. Magellan
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-magellan-classes: $include-html-classes;
- // $magellan-bg: #fff;
- // $magellan-padding: 10px;
+ // $magellan-bg: $white;
+ // $magellan-padding: 0 !important;
- // Off-canvas
+ // 18. Off-canvas
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-off-canvas-classes: $include-html-classes;
- // $tabbar-bg: #333;
+ // $tabbar-bg: $oil;
// $tabbar-height: rem-calc(45);
+ // $tabbar-icon-width: $tabbar-height;
// $tabbar-line-height: $tabbar-height;
- // $tabbar-color: #fff;
+ // $tabbar-color: $white;
// $tabbar-middle-padding: 0 rem-calc(10);
// Off Canvas Divider Styles
@@ @@ -687,30 +814,38 @@
// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
// Off Canvas Tab Bar Headers
- // $tabbar-header-color: #fff;
+ // $tabbar-header-color: $white;
// $tabbar-header-weight: $font-weight-bold;
// $tabbar-header-line-height: $tabbar-height;
// $tabbar-header-margin: 0;
// Off Canvas Menu Variables
// $off-canvas-width: rem-calc(250);
- // $off-canvas-bg: #333;
+ // $off-canvas-bg: $oil;
+ // $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%);
// Off Canvas Menu List Variables
// $off-canvas-label-padding: 0.3rem rem-calc(15);
- // $off-canvas-label-color: #999;
+ // $off-canvas-label-color: $aluminum;
// $off-canvas-label-text-transform: uppercase;
+ // $off-canvas-label-font-size: rem-calc(12);
// $off-canvas-label-font-weight: $font-weight-bold;
- // $off-canvas-label-bg: #444;
- // $off-canvas-label-border-top: 1px solid scale-color(#444, $lightness: 14%);
+ // $off-canvas-label-bg: $tuatara;
+ // $off-canvas-label-border-top: 1px solid scale-color($tuatara, $lightness: 14%);
// $off-canvas-label-border-bottom: none;
// $off-canvas-label-margin:0;
// $off-canvas-link-padding: rem-calc(10, 15);
- // $off-canvas-link-color: rgba(#fff, 0.7);
+ // $off-canvas-link-color: rgba($white, 0.7);
// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
+ // $off-canvas-back-bg: $tuatara;
+ // $off-canvas-back-border-top: $off-canvas-label-border-top;
+ // $off-canvas-back-border-bottom: $off-canvas-label-border-bottom;
+ // $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%);
+ // $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%);
+ // $off-canvas-back-hover-border-bottom: none;
// Off Canvas Menu Icon Variables
- // $tabbar-menu-icon-color: #fff;
+ // $tabbar-menu-icon-color: $white;
// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
// $tabbar-menu-icon-text-indent: rem-calc(35);
@@ @@ -721,27 +856,28 @@
// $tabbar-hamburger-icon-width: rem-calc(16);
// $tabbar-hamburger-icon-left: false;
// $tabbar-hamburger-icon-top: false;
- // $tapbar-hamburger-icon-thickness: 1px;
- // $tapbar-hamburger-icon-gap: 6px;
+ // $tabbar-hamburger-icon-thickness: 1px;
+ // $tabbar-hamburger-icon-gap: 6px;
// Off Canvas Back-Link Overlay
// $off-canvas-overlay-transition: background 300ms ease;
// $off-canvas-overlay-cursor: pointer;
- // $off-canvas-overlay-box-shadow: -4px 0 4px rgba(#000, 0.5), 4px 0 4px rgba(#000, 0.5);
- // $off-canvas-overlay-background: rgba(#fff, 0.2);
- // $off-canvas-overlay-background-hover: rgba(#fff, 0.05);
+ // $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5);
+ // $off-canvas-overlay-background: rgba($white, 0.2);
+ // $off-canvas-overlay-background-hover: rgba($white, 0.05);
// Transition Variables
// $menu-slide: "transform 500ms ease";
- // Orbit
+ // 19. Orbit
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-orbit-classes: $include-html-classes;
// We use these to control the caption styles
// $orbit-container-bg: none;
// $orbit-caption-bg: rgba(51,51,51, 0.8);
- // $orbit-caption-font-color: #fff;
+ // $orbit-caption-font-color: $white;
// $orbit-caption-font-size: rem-calc(14);
// $orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
// $orbit-caption-padding: rem-calc(10 14);
@@ @@ -750,27 +886,23 @@
// We use these to control the left/right nav styles
// $orbit-nav-bg: transparent;
// $orbit-nav-bg-hover: rgba(0,0,0,0.3);
- // $orbit-nav-arrow-color: #fff;
- // $orbit-nav-arrow-color-hover: #fff;
+ // $orbit-nav-arrow-color: $white;
+ // $orbit-nav-arrow-color-hover: $white;
// We use these to control the timer styles
// $orbit-timer-bg: rgba(255,255,255,0.3);
// $orbit-timer-show-progress-bar: true;
// We use these to control the bullet nav styles
- // $orbit-bullet-nav-color: #ccc;
- // $orbit-bullet-nav-color-active: #999;
+ // $orbit-bullet-nav-color: $iron;
+ // $orbit-bullet-nav-color-active: $aluminum;
// $orbit-bullet-radius: rem-calc(9);
// We use these to controls the style of slide numbers
// $orbit-slide-number-bg: rgba(0,0,0,0);
- // $orbit-slide-number-font-color: #fff;
+ // $orbit-slide-number-font-color: $white;
// $orbit-slide-number-padding: rem-calc(5);
- // We use these to controls the css animation
- // $orbit-animation-speed: 500ms;
- // $orbit-animation-ease: ease-in-out;
-
// Hide controls on small
// $orbit-nav-hide-for-small: true;
// $orbit-bullet-hide-for-small: true;
@@ @@ -780,7 +912,8 @@
// $wrapper-class: "slideshow-wrapper";
// $preloader-class: "preloader";
- // Pagination
+ // 20. Pagination
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-pagination-classes: $include-html-classes;
@@ @@ -791,33 +924,34 @@
// We use these to set the list-item properties
// $pagination-li-float: $default-float;
// $pagination-li-height: rem-calc(24);
- // $pagination-li-font-color: #222;
+ // $pagination-li-font-color: $jet;
// $pagination-li-font-size: rem-calc(14);
// $pagination-li-margin: rem-calc(5);
// We use these for the pagination anchor links
// $pagination-link-pad: rem-calc(1 10 1);
- // $pagination-link-font-color: #999;
- // $pagination-link-active-bg: scale-color(#fff, $lightness: -10%);
+ // $pagination-link-font-color: $aluminum;
+ // $pagination-link-active-bg: scale-color($white, $lightness: -10%);
// We use these for disabled anchor links
// $pagination-link-unavailable-cursor: default;
- // $pagination-link-unavailable-font-color: #999;
+ // $pagination-link-unavailable-font-color: $aluminum;
// $pagination-link-unavailable-bg-active: transparent;
// We use these for currently selected anchor links
// $pagination-link-current-background: $primary-color;
- // $pagination-link-current-font-color: #fff;
+ // $pagination-link-current-font-color: $white;
// $pagination-link-current-font-weight: $font-weight-bold;
// $pagination-link-current-cursor: default;
// $pagination-link-current-active-bg: $primary-color;
- // Panels
+ // 21. Panels
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-panel-classes: $include-html-classes;
// We use these to control the background and border styles
- // $panel-bg: scale-color(#fff, $lightness: -5%);
+ // $panel-bg: scale-color($white, $lightness: -5%);
// $panel-border-style: solid;
// $panel-border-size: 1px;
@@ @@ -830,74 +964,75 @@
// $panel-padding: rem-calc(20);
// We use these to set default font colors
- // $panel-font-color: #333;
- // $panel-font-color-alt: #fff;
+ // $panel-font-color: $oil;
+ // $panel-font-color-alt: $white;
// $panel-header-adjust: true;
// $callout-panel-link-color: $primary-color;
- // Pricing Tables
+ // 22. Pricing Tables
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-pricing-classes: $include-html-classes;
// We use this to control the border color
- // $price-table-border: solid 1px #ddd;
+ // $price-table-border: solid 1px $gainsboro;
// We use this to control the bottom margin of the pricing table
// $price-table-margin-bottom: rem-calc(20);
// We use these to control the title styles
- // $price-title-bg: #333;
+ // $price-title-bg: $oil;
// $price-title-padding: rem-calc(15 20);
// $price-title-align: center;
- // $price-title-color: #eee;
+ // $price-title-color: $smoke;
// $price-title-weight: $font-weight-normal;
// $price-title-size: rem-calc(16);
// $price-title-font-family: $body-font-family;
// We use these to control the price styles
- // $price-money-bg: #f6f6f6 ;
+ // $price-money-bg: $vapor ;
// $price-money-padding: rem-calc(15 20);
// $price-money-align: center;
- // $price-money-color: #333;
+ // $price-money-color: $oil;
// $price-money-weight: $font-weight-normal;
// $price-money-size: rem-calc(32);
// $price-money-font-family: $body-font-family;
-
// We use these to control the description styles
- // $price-bg: #fff;
- // $price-desc-color: #777;
+ // $price-bg: $white;
+ // $price-desc-color: $monsoon;
// $price-desc-padding: rem-calc(15);
// $price-desc-align: center;
// $price-desc-font-size: rem-calc(12);
// $price-desc-weight: $font-weight-normal;
// $price-desc-line-height: 1.4;
- // $price-desc-bottom-border: dotted 1px #ddd;
+ // $price-desc-bottom-border: dotted 1px $gainsboro;
// We use these to control the list item styles
- // $price-item-color: #333;
+ // $price-item-color: $oil;
// $price-item-padding: rem-calc(15);
// $price-item-align: center;
// $price-item-font-size: rem-calc(14);
// $price-item-weight: $font-weight-normal;
- // $price-item-bottom-border: dotted 1px #ddd;
+ // $price-item-bottom-border: dotted 1px $gainsboro;
// We use these to control the CTA area styles
- // $price-cta-bg: #fff;
+ // $price-cta-bg: $white;
// $price-cta-align: center;
// $price-cta-padding: rem-calc(20 20 0);
- // Progress Bar
+ // 23. Progress Bar
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-media-classes: $include-html-classes;
// We use this to set the progress bar height
// $progress-bar-height: rem-calc(25);
- // $progress-bar-color: #f6f6f6 ;
+ // $progress-bar-color: $vapor ;
// We use these to control the border styles
- // $progress-bar-border-color: scale-color(#fff, $lightness: 20%);
+ // $progress-bar-border-color: scale-color($white, $lightness: 20%);
// $progress-bar-border-size: 1px;
// $progress-bar-border-style: solid;
// $progress-bar-border-radius: $global-radius;
@@ @@ -912,26 +1047,61 @@
// $progress-meter-success-color: $success-color;
// $progress-meter-alert-color: $alert-color;
- // Reveal
+ // 24. Range Slider
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
+
+ // $include-html-range-slider-classes: $include-html-classes;
+
+ // These variables define the slider bar styles
+ // $range-slider-bar-width: 100%;
+ // $range-slider-bar-height: rem-calc(16);
+
+ // $range-slider-bar-border-width: 1px;
+ // $range-slider-bar-border-style: solid;
+ // $range-slider-bar-border-color: $gainsboro;
+ // $range-slider-radius: $global-radius;
+ // $range-slider-round: $global-rounded;
+ // $range-slider-bar-bg-color: $ghost;
+
+ // Vertical bar styles
+ // $range-slider-vertical-bar-width: rem-calc(16);
+ // $range-slider-vertical-bar-height: rem-calc(200);
+
+ // These variables define the slider handle styles
+ // $range-slider-handle-width: rem-calc(32);
+ // $range-slider-handle-height: rem-calc(22);
+ // $range-slider-handle-position-top: rem-calc(-5);
+ // $range-slider-handle-bg-color: $primary-color;
+ // $range-slider-handle-border-width: 1px;
+ // $range-slider-handle-border-style: solid;
+ // $range-slider-handle-border-color: none;
+ // $range-slider-handle-radius: $global-radius;
+ // $range-slider-handle-round: $global-rounded;
+ // $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
+ // $range-slider-handle-cursor: pointer;
+
+ // 25. Reveal
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-reveal-classes: $include-html-classes;
// We use these to control the style of the reveal overlay.
- // $reveal-overlay-bg: rgba(#000, .45);
- // $reveal-overlay-bg-old: #000;
+ // $reveal-overlay-bg: rgba($black, .45);
+ // $reveal-overlay-bg-old: $black;
// We use these to control the style of the modal itself.
- // $reveal-modal-bg: #fff;
+ // $reveal-modal-bg: $white;
// $reveal-position-top: rem-calc(100);
// $reveal-default-width: 80%;
+ // $reveal-max-width: $row-width;
// $reveal-modal-padding: rem-calc(20);
- // $reveal-box-shadow: 0 0 10px rgba(#000,.4);
+ // $reveal-box-shadow: 0 0 10px rgba($black,.4);
// We use these to style the reveal close button
// $reveal-close-font-size: rem-calc(40);
// $reveal-close-top: rem-calc(8);
// $reveal-close-side: rem-calc(11);
- // $reveal-close-color: #aaa;
+ // $reveal-close-color: $base;
// $reveal-close-weight: $font-weight-bold;
// We use this to set the default radius used throughout the core.
@@ @@ -941,12 +1111,13 @@
// We use these to control the modal border
// $reveal-border-style: solid;
// $reveal-border-width: 1px;
- // $reveal-border-color: #666;
+ // $reveal-border-color: $steel;
// $reveal-modal-class: "reveal-modal";
// $close-reveal-modal-class: "close-reveal-modal";
- // Side Nav
+ // 26. Side Nav
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-nav-classes: $include-html-classes;
@@ @@ -962,27 +1133,35 @@
// $side-nav-link-color: $primary-color;
// $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%);
// $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%);
+ // $side-nav-link-bg-hover: hsla(0, 0, 0, 0.025);
+ // $side-nav-link-margin: 0;
+ // $side-nav-link-padding: rem-calc(7 14);
// $side-nav-font-size: rem-calc(14);
// $side-nav-font-weight: $font-weight-normal;
// $side-nav-font-weight-active: $side-nav-font-weight;
// $side-nav-font-family: $body-font-family;
- // $side-nav-active-font-family: $side-nav-font-family;
-
+ // $side-nav-font-family-active: $side-nav-font-family;
+ // We use these to control heading styles.
+ // $side-nav-heading-color: $side-nav-link-color;
+ // $side-nav-heading-font-size: $side-nav-font-size;
+ // $side-nav-heading-font-weight: bold;
+ // $side-nav-heading-text-transform: uppercase;
// We use these to control border styles
// $side-nav-divider-size: 1px;
// $side-nav-divider-style: solid;
- // $side-nav-divider-color: scale-color(#fff, $lightness: 10%);
+ // $side-nav-divider-color: scale-color($white, $lightness: 10%);
- // Split Buttons
+ // 27. Split Buttons
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-button-classes: $include-html-classes;
// We use these to control different shared styles for Split Buttons
// $split-button-function-factor: 10%;
- // $split-button-pip-color: #fff;
- // $split-button-pip-color-alt: #333;
+ // $split-button-pip-color: $white;
+ // $split-button-pip-color-alt: $oil;
// $split-button-active-bg-tint: rgba(0,0,0,0.1);
// We use these to control tiny split buttons
@@ @@ -1013,7 +1192,8 @@
// $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5);
// $split-button-pip-default-float-lrg: rem-calc(-6);
- // Sub Nav
+ // 28. Sub Nav
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-nav-classes: $include-html-classes;
@@ @@ -1024,42 +1204,40 @@
// We use this to control the definition
// $sub-nav-font-family: $body-font-family;
// $sub-nav-font-size: rem-calc(14);
- // $sub-nav-font-color: #999;
+ // $sub-nav-font-color: $aluminum;
// $sub-nav-font-weight: $font-weight-normal;
// $sub-nav-text-decoration: none;
// $sub-nav-padding: rem-calc(3 16);
// $sub-nav-border-radius: 3px;
// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);
-
// We use these to control the active item styles
// $sub-nav-active-font-weight: $font-weight-normal;
// $sub-nav-active-bg: $primary-color;
// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%);
- // $sub-nav-active-color: #fff;
+ // $sub-nav-active-color: $white;
// $sub-nav-active-padding: $sub-nav-padding;
// $sub-nav-active-cursor: default;
// $sub-nav-item-divider: "";
// $sub-nav-item-divider-margin: rem-calc(12);
- //
- // SWITCH
- //
+ // 29. Switch
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-form-classes: $include-html-classes;
// Controlling border styles and background colors for the switch container
- // $switch-border-color: scale-color(#fff, $lightness: -20%);
+ // $switch-border-color: scale-color($white, $lightness: -20%);
// $switch-border-style: solid;
// $switch-border-width: 1px;
- // $switch-bg: #fff;
+ // $switch-bg: $white;
// We use these to control the switch heights for our default classes
- // $switch-height-tny: 22px;
- // $switch-height-sml: 28px;
- // $switch-height-med: 36px;
- // $switch-height-lrg: 44px;
+ // $switch-height-tny: rem-calc(22);
+ // $switch-height-sml: rem-calc(28);
+ // $switch-height-med: rem-calc(36);
+ // $switch-height-lrg: rem-calc(44);
// $switch-bottom-margin: rem-calc(20);
// We use these to control default font sizes for our classes.
@@ @@ -1070,7 +1248,7 @@
// $switch-label-side-padding: 6px;
// We use these to style the switch-paddle
- // $switch-paddle-bg: #fff;
+ // $switch-paddle-bg: $white;
// $switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%);
// $switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%);
// $switch-paddle-border-width: 1px;
@@ @@ -1078,52 +1256,53 @@
// $switch-paddle-transition-speed: .1s;
// $switch-paddle-transition-ease: ease-out;
// $switch-positive-color: scale-color($success-color, $lightness: 94%);
- // $switch-negative-color: #f5f5f5;
+ // $switch-negative-color: $white-smoke;
// Outline Style for tabbing through switches
- // $switch-label-outline: 1px dotted #888;
+ // $switch-label-outline: 1px dotted $jumbo;
- // Tables
+ // 30. Tables
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-table-classes: $include-html-classes;
// These control the background color for the table and even rows
- // $table-bg: #fff;
- // $table-even-row-bg: #f9f9f9 ;
+ // $table-bg: $white;
+ // $table-even-row-bg: $snow ;
// These control the table cell border style
// $table-border-style: solid;
// $table-border-size: 1px;
- // $table-border-color: #ddd;
+ // $table-border-color: $gainsboro;
// These control the table head styles
- // $table-head-bg: #f5f5f5 ;
+ // $table-head-bg: $white-smoke ;
// $table-head-font-size: rem-calc(14);
- // $table-head-font-color: #222;
+ // $table-head-font-color: $jet;
// $table-head-font-weight: $font-weight-bold;
// $table-head-padding: rem-calc(8 10 10);
// These control the row padding and font styles
// $table-row-padding: rem-calc(9 10);
// $table-row-font-size: rem-calc(14);
- // $table-row-font-color: #222;
+ // $table-row-font-color: $jet;
// $table-line-height: rem-calc(18);
- // These are for controlling the display and margin of tables
+ // These are for controlling the layout, display and margin of tables
+ // $table-layout: auto;
// $table-display: table-cell;
// $table-margin-bottom: rem-calc(20);
- //
- // TABS
- //
+ // 31. Tabs
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-tabs-classes: $include-html-classes;
// $tabs-navigation-padding: rem-calc(16);
- // $tabs-navigation-bg-color: #efefef ;
- // $tabs-navigation-active-bg-color: #fff;
+ // $tabs-navigation-bg-color: $silver ;
+ // $tabs-navigation-active-bg-color: $white;
// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
- // $tabs-navigation-font-color: #222;
+ // $tabs-navigation-font-color: $jet;
// $tabs-navigation-active-font-color: $tabs-navigation-font-color;
// $tabs-navigation-font-size: rem-calc(16);
// $tabs-navigation-font-family: $body-font-family;
@@ @@ -1133,58 +1312,56 @@
// $tabs-vertical-navigation-margin-bottom: 1.25rem;
- //
- // THUMBNAILS
- //
+ // 32. Thumbnails
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-media-classes: $include-html-classes;
// We use these to control border styles
// $thumb-border-style: solid;
// $thumb-border-width: 4px;
- // $thumb-border-color: #fff;
- // $thumb-box-shadow: 0 0 0 1px rgba(#000,.2);
+ // $thumb-border-color: $white;
+ // $thumb-box-shadow: 0 0 0 1px rgba($black,.2);
// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
// Radius and transition speed for thumbs
// $thumb-radius: $global-radius;
// $thumb-transition-speed: 200ms;
- //
- // TOOLTIPS
- //
+ // 33. Tooltips
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-tooltip-classes: $include-html-classes;
- // $has-tip-border-bottom: dotted 1px #ccc;
+ // $has-tip-border-bottom: dotted 1px $iron;
// $has-tip-font-weight: $font-weight-bold;
- // $has-tip-font-color: #333;
+ // $has-tip-font-color: $oil;
// $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%);
// $has-tip-font-color-hover: $primary-color;
// $has-tip-cursor-type: help;
// $tooltip-padding: rem-calc(12);
- // $tooltip-bg: #333;
+ // $tooltip-bg: $oil;
// $tooltip-font-size: rem-calc(14);
// $tooltip-font-weight: $font-weight-normal;
- // $tooltip-font-color: #fff;
+ // $tooltip-font-color: $white;
// $tooltip-line-height: 1.3;
// $tooltip-close-font-size: rem-calc(10);
// $tooltip-close-font-weight: $font-weight-normal;
- // $tooltip-close-font-color: #777;
+ // $tooltip-close-font-color: $monsoon;
// $tooltip-font-size-sml: rem-calc(14);
// $tooltip-radius: $global-radius;
// $tooltip-rounded: $global-rounded;
// $tooltip-pip-size: 5px;
+ // $tooltip-max-width: 300px;
- //
- // TOP BAR
- //
+ // 34. Top Bar
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-top-bar-classes: $include-html-classes;
// Background color for the top bar
- // $topbar-bg-color: #333;
+ // $topbar-bg-color: $oil;
// $topbar-bg: $topbar-bg-color;
// Height and margin
@@ @@ -1196,48 +1373,50 @@
// $topbar-title-font-size: rem-calc(17);
// Style the top bar dropdown elements
- // $topbar-dropdown-bg: #333;
- // $topbar-dropdown-link-color: #fff;
- // $topbar-dropdown-link-bg: #333;
+ // $topbar-dropdown-bg: $oil;
+ // $topbar-dropdown-link-color: $white;
+ // $topbar-dropdown-link-bg: $oil;
// $topbar-dropdown-link-weight: $font-weight-normal;
// $topbar-dropdown-toggle-size: 5px;
- // $topbar-dropdown-toggle-color: #fff;
+ // $topbar-dropdown-toggle-color: $white;
// $topbar-dropdown-toggle-alpha: 0.4;
// Set the link colors and styles for top-level nav
- // $topbar-link-color: #fff;
- // $topbar-link-color-hover: #fff;
- // $topbar-link-color-active: #fff;
- // $topbar-link-color-active-hover: #fff;
+ // $topbar-link-color: $white;
+ // $topbar-link-color-hover: $white;
+ // $topbar-link-color-active: $white;
+ // $topbar-link-color-active-hover: $white;
// $topbar-link-weight: $font-weight-normal;
// $topbar-link-font-size: rem-calc(13);
// $topbar-link-hover-lightness: -10%; // Darken by 10%
// $topbar-link-bg: $topbar-bg;
- // $topbar-link-bg-color-hover: #555555;
+ // $topbar-link-bg-color-hover: $charcoal;
// $topbar-link-bg-hover: #272727;
// $topbar-link-bg-active: $primary-color;
// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
// $topbar-link-font-family: $body-font-family;
// $topbar-link-text-transform: none;
// $topbar-link-padding: $topbar-height / 3;
+ // $topbar-back-link-size: $h5-font-size;
+ // $topbar-link-dropdown-padding: 20px;
// $topbar-button-font-size: 0.75rem;
// $topbar-button-top: 7px;
- // $topbar-dropdown-label-color: #777;
+ // $topbar-dropdown-label-color: $monsoon;
// $topbar-dropdown-label-text-transform: uppercase;
// $topbar-dropdown-label-font-weight: $font-weight-bold;
// $topbar-dropdown-label-font-size: rem-calc(10);
- // $topbar-dropdown-label-bg: #333;
+ // $topbar-dropdown-label-bg: $oil;
// Top menu icon styles
// $topbar-menu-link-transform: uppercase;
// $topbar-menu-link-font-size: rem-calc(13);
// $topbar-menu-link-weight: $font-weight-bold;
- // $topbar-menu-link-color: #fff;
- // $topbar-menu-icon-color: #fff;
- // $topbar-menu-link-color-toggled: #888;
- // $topbar-menu-icon-color-toggled: #888;
+ // $topbar-menu-link-color: $white;
+ // $topbar-menu-icon-color: $white;
+ // $topbar-menu-link-color-toggled: $jumbo;
+ // $topbar-menu-icon-color-toggled: $jumbo;
// Transitions and breakpoint styles
// $topbar-transition-speed: 300ms;
@@ @@ -1253,44 +1432,10 @@
// $topbar-sticky-class: ".sticky";
// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
- //
- // VISIBILITY CLASSES
- //
+ // 36. Visibility Classes
+ // - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-visibility-classes: $include-html-classes;
// $include-table-visibility-classes: true;
// $include-legacy-visibility-classes: true;
-
- //
- // RANGE SLIDER
- //
-
- // $include-html-range-slider-classes: $include-html-classes;
-
- // These variabels define the slider bar styles
- // $range-slider-bar-width: 100%;
- // $range-slider-bar-height: rem-calc(16);
-
- // $range-slider-bar-border-width: 1px;
- // $range-slider-bar-border-style: solid;
- // $range-slider-bar-border-color: #ddd;
- // $range-slider-radius: $global-radius;
- // $range-slider-round: $global-rounded;
- // $range-slider-bar-bg-color: #fafafa;
-
- // Vertical bar styles
- // $range-slider-vertical-bar-width: rem-calc(16);
- // $range-slider-vertical-bar-height: rem-calc(200);
-
- // These variabels define the slider handle styles
- // $range-slider-handle-width: rem-calc(32);
- // $range-slider-handle-height: rem-calc(22);
- // $range-slider-handle-position-top: rem-calc(-5);
- // $range-slider-handle-bg-color: $primary-color;
- // $range-slider-handle-border-width: 1px;
- // $range-slider-handle-border-style: solid;
- // $range-slider-handle-border-color: none;
- // $range-slider-handle-radius: $global-radius;
- // $range-slider-handle-round: $global-rounded;
- // $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
- // $range-slider-handle-cursor: pointer;
+ // $include-accessibility-classes: true;
generators/foundation5/public/stylesheets/foundation/components/_accordion.scss +110 -6
@@ @@ -11,21 +11,125 @@
$include-html-accordion-classes: $include-html-classes !default;
$accordion-navigation-padding: rem-calc(16) !default;
- $accordion-navigation-bg-color: #efefef !default;
+ $accordion-navigation-bg-color: $silver !default;
$accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%) !default;
$accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%) !default;
- $accordion-navigation-font-color: #222 !default;
+ $accordion-navigation-font-color: $jet !default;
$accordion-navigation-font-size: rem-calc(16) !default;
$accordion-navigation-font-family: $body-font-family !default;
$accordion-content-padding: $column-gutter/2 !default;
- $accordion-content-active-bg-color: #fff !default;
+ $accordion-content-active-bg-color: $white !default;
+
+
+ // Mixin: accordion-container()
+ // Decription: Responsible for the container component of accordions, generating styles relating to a margin of zero and a clearfix
+ // Explicit Dependencies: a clearfix mixin *is* defined.
+ // Implicit Dependencies: None
+
+ @mixin accordion-container() {
+ @include clearfix;
+ margin-bottom: 0;
+ }
+
+ // Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class, $font-color, $font-size, $font-family){
+ // @params $bg-color: [ color or string ]: Specify the background color for the navigation element
+ // @params $hover-bg-color [ color or string ]: Specify the background color for the navigation element when hovered
+ // @params $active-bg [ color or string ]: Specify the background color for the navigation element when clicked and not released.
+ // @params $active_class [ string ]: Specify the class name used to keep track of which accordion tab should be visible
+ // @params $font-color [ color or string ]: Color of the font for accordion
+ // @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element
+ // @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion
+
+ @mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active', $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ){
+ display: block;
+ margin-bottom: 0 !important;
+ @if type-of($active_class) != "string" {
+ @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of this navigation component."
+ }
+ @else {
+ &.#{ $active_class } > a {
+ background: $active-bg;
+ }
+ }
+ > a {
+ background: $bg;
+ color: $font-color;
+ @if type-of($padding) != number {
+ @warn "`#{$padding}` was read as #{type-of($padding)}";
+ @if $accordion-navigation-padding != null {
+ @warn "#{$padding} was read as a #{type-of($padding)}";
+ @warn "`#{$padding}` isn't a valid number. $accordion-navigation-padding (#{$accordion-navigation-padding}) will be used instead.)";
+ padding: $accordion-navigation-padding;
+ }
+ @else {
+ @warn "`#{$padding}` isn't a valid number and $accordion-navigation-padding is missing. A value of `null` is returned to not output an invalid value for padding";
+ padding: null;
+ }
+ }
+ @else {
+ padding: $padding;
+ }
+ display: block;
+ font-family: $font-family;
+ @if type-of($font-size) != number {
+ @warn "`#{$font-size}` was read as a #{type-of($font-size)}";
+ @if $accordion-navigation-font-size != null {
+ @warn "`#{$font-size}` is not a valid number. The value of $accordion-navigation-font-size will be used instead (#{$accordion-navigation-font-size}).";
+ font-size: $accordion-navigation-font-size;
+ }
+ @else{
+ @warn "`#{$font-size}` is not a valid number and the default value of $accordion-navigation-font-size is not defined. A value of `null` will be returned to not generate an invalid value for font-size.";
+ font-size: null;
+
+ }
+ }
+ @else {
+ font-size: $font-size;
+ }
+ &:hover {
+ background: $hover-bg;
+ }
+ }
+ }
+
+ // Mixin: accordion-content($bg, $padding, $active-class)
+ // @params $padding [ number ]: Padding for the content of the container
+ // @params $bg [ color ]: Background color for the content when it's visible
+ // @params $active_class [ string ]: Class name used to keep track of which accordion tab should be visible.
+
+ @mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active'){
+ display: none;
+ @if type-of($padding) != "number" {
+ @warn "#{$padding} was read as a #{type-of($padding)}";
+ @if $accordion-content-padding != null {
+ @warn "`#{$padding}` isn't a valid number. $accordion-content-padding used instead";
+ padding: $accordion-content-padding;
+ } @else {
+ @warn "`#{$padding}` isn't a valid number and the default value of $accordion-content-padding is not defined. A value of `null` is returned to not output an invalid value for padding.";
+ padding: null;
+ }
+ } @else {
+ padding: $padding;
+ }
+
+ @if type-of($active_class) != "string" {
+ @warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of the content. "
+ }
+ @else {
+ &.#{$active_class} {
+ display: block;
+ background: $bg;
+ }
+ }
+ }
@include exports("accordion") {
@if $include-html-accordion-classes {
.accordion {
- @include clearfix; margin-bottom: 0;
- dd {
+ @include clearfix;
+ margin-bottom: 0;
+ .accordion-navigation, dd {
display: block;
margin-bottom: 0 !important;
&.active > a { background: $accordion-navigation-active-bg-color; }
@@ @@ -38,7 +142,7 @@ $accordion-content-active-bg-color: #fff !default;
font-size: $accordion-navigation-font-size;
&:hover { background: $accordion-navigation-hover-bg-color; }
}
-
+
> .content {
display: none;
padding: $accordion-content-padding;
generators/foundation5/public/stylesheets/foundation/components/_alert-boxes.scss +4 -2
@@ @@ -18,7 +18,7 @@ $alert-padding-bottom: $alert-padding-top !default;
// We use these to control text style.
$alert-font-weight: $font-weight-normal !default;
$alert-font-size: rem-calc(13) !default;
- $alert-font-color: #fff !default;
+ $alert-font-color: $white !default;
$alert-font-color-alt: scale-color($secondary-color, $lightness: -66%) !default;
// We use this for close hover effect.
@@ @@ -31,13 +31,14 @@ $alert-border-color: scale-color($primary-color, $lightness: $alert-function-fac
$alert-bottom-margin: rem-calc(20) !default;
// We use these to style the close buttons
- $alert-close-color: #333 !default;
+ $alert-close-color: $oil !default;
$alert-close-top: 50% !default;
$alert-close-position: rem-calc(4) !default;
$alert-close-font-size: rem-calc(22) !default;
$alert-close-opacity: 0.3 !default;
$alert-close-opacity-hover: 0.5 !default;
$alert-close-padding: 9px 6px 4px !default;
+ $alert-close-background: inherit !default;
// We use this to control border radius
$alert-radius: $global-radius !default;
@@ @@ -91,6 +92,7 @@ $alert-transition-ease: ease-out !default;
#{$opposite-direction}: $alert-close-position;
color: $alert-close-color;
opacity: $alert-close-opacity;
+ background: $alert-close-background;
&:hover,
&:focus { opacity: $alert-close-opacity-hover; }
}
generators/foundation5/public/stylesheets/foundation/components/_block-grid.scss +2 -2
@@ @@ -7,7 +7,7 @@
//
// Block Grid Variables
//
- $include-html-grid-classes: $include-html-classes !default;
+ $include-html-block-grid-classes: $include-html-classes !default;
$include-xl-html-block-grid-classes: false !default;
// We use this to control the maximum number of block grid elements per row
@@ @@ -101,7 +101,7 @@ $block-grid-media-queries: true !default;
}
@include exports("block-grid") {
- @if $include-html-grid-classes {
+ @if $include-html-block-grid-classes {
[class*="block-grid-"] { @include block-grid; }
generators/foundation5/public/stylesheets/foundation/components/_breadcrumbs.scss +8 -3
@@ @@ -26,13 +26,13 @@ $crumb-radius: $global-radius !default;
// We use these to set various text styles for breadcrumbs.
$crumb-font-size: rem-calc(11) !default;
$crumb-font-color: $primary-color !default;
- $crumb-font-color-current: #333 !default;
- $crumb-font-color-unavailable: #999 !default;
+ $crumb-font-color-current: $oil !default;
+ $crumb-font-color-unavailable: $aluminum !default;
$crumb-font-transform: uppercase !default;
$crumb-link-decor: underline !default;
// We use these to control the slash between breadcrumbs
- $crumb-slash-color: #aaa !default;
+ $crumb-slash-color: $base !default;
$crumb-slash: "/" !default;
//
@@ @@ -125,3 +125,8 @@ $crumb-slash: "/" !default;
}
}
}
+
+ /* Accessibility - hides the forward slash */
+ [aria-label="breadcrumbs"] [aria-hidden="true"]:after {
+ content: "/";
+ }
generators/foundation5/public/stylesheets/foundation/components/_button-groups.scss +98 -9
@@ @@ -5,7 +5,6 @@
@import "global";
@import "buttons";
-
//
// Button Group Variables
//
@@ @@ -35,7 +34,7 @@ $button-group-border-width: 1px !default;
}
// We use this to control styles for button groups
- @mixin button-group-style($radius:false, $even:false, $float:$default-float) {
+ @mixin button-group-style($radius:false, $even:false, $float:false, $orientation:horizontal) {
> button, .button {
border-#{$default-float}: $button-group-border-width solid;
@@ @@ -52,30 +51,89 @@ $button-group-border-width: 1px !default;
@if $float {
margin: 0;
float: $float;
+ display: list-item;
// Make sure the first child doesn't get the negative margin.
&:first-child { margin-#{$default-float}: 0; }
}
+ @else {
+ margin: 0 -2px;
+ display: inline-block;
+ }
+
+ @if $orientation == vertical {
+ display:block;
+ margin:0;
+ > button, .button {
+ border-top: $button-group-border-width solid;
+ border-color: rgba(255, 255, 255, 0.5);
+ border-left-width: 0px;
+ margin:0;
+ display: block;
+ }
+
+ &:first-child {
+ button, .button {
+ border-top: 0;
+ }
+ }
+ }
// We use these to control left and right radius on first/last buttons in the group.
@if $radius == true {
+ &,
+ & > a,
+ & > button,
+ & > .button { @include radius(0); }
&:first-child,
&:first-child > a,
&:first-child > button,
- &:first-child > .button { @include side-radius($default-float, $button-radius); }
+ &:first-child > .button {
+ @if $orientation == vertical {
+ @include side-radius(top, $button-radius);
+ }
+ @else {
+ @include side-radius($default-float, $button-radius);
+ }
+ }
&:last-child,
&:last-child > a,
&:last-child > button,
- &:last-child > .button { @include side-radius($opposite-direction, $button-radius); }
+ &:last-child > .button {
+ @if $orientation == vertical {
+ @include side-radius(bottom, $button-radius);
+ }
+ @else {
+ @include side-radius($opposite-direction, $button-radius);
+ }
+ }
}
@else if $radius {
+ &,
+ & > a,
+ & > button,
+ & > .button { @include radius(0); }
&:first-child,
&:first-child > a,
&:first-child > button,
- &:first-child > .button { @include side-radius($default-float, $radius); }
+ &:first-child > .button {
+ @if $orientation == vertical {
+ @include side-radius(top, $radius);
+ }
+ @else {
+ @include side-radius($default-float, $radius);
+ }
+ }
&:last-child,
&:last-child > a,
&:last-child > button,
- &:last-child > .button { @include side-radius($opposite-direction, $radius); }
+ &:last-child > .button {
+ @if $orientation == vertical {
+ @include side-radius(bottom, $radius);
+ }
+ @else {
+ @include side-radius($opposite-direction, $radius);
+ }
+ }
}
// We use this to make the buttons even width across their container
@@ @@ -83,7 +141,6 @@ $button-group-border-width: 1px !default;
width: percentage((100/$even) / 100);
button, .button { width: 100%; }
}
-
}
@include exports("button-group") {
@@ @@ -92,8 +149,40 @@ $button-group-border-width: 1px !default;
& > li { @include button-group-style(); }
+ &.stack {
+ & > li { @include button-group-style($orientation:vertical); float: none; }
+ }
+
+ &.stack-for-small {
+ & > li {
+ @include button-group-style($orientation:horizontal);
+ @media #{$small-only} {
+ @include button-group-style($orientation:vertical);
+ }
+ }
+ }
+
&.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
+ &.radius.stack > * { @include button-group-style($radius:$button-radius, $float:null, $orientation:vertical); }
+ &.radius.stack-for-small > * {
+ @media #{$medium-up} {
+ @include button-group-style($radius:$button-radius, $orientation:horizontal);
+ }
+ @media #{$small-only} {
+ @include button-group-style($radius:$button-radius, $orientation:vertical);
+ }
+ }
+
&.round > * { @include button-group-style($radius:$button-round, $float:null); }
+ &.round.stack > * { @include button-group-style($radius:$button-med, $float:null, $orientation:vertical); }
+ &.round.stack-for-small > * {
+ @media #{$medium-up} {
+ @include button-group-style($radius:$button-round, $orientation:horizontal);
+ }
+ @media #{$small-only} {
+ @include button-group-style($radius:$button-med, $orientation:vertical);
+ }
+ }
@for $i from 2 through 8 {
&.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
@@ @@ -102,7 +191,7 @@ $button-group-border-width: 1px !default;
.button-bar {
@include clearfix;
- .button-group { @include button-group-container($styles:false,$float:true); }
+ .button-group { @include button-group-container($styles:false, $float:true); }
}
}
- }
\ No newline at end of file
+ }
generators/foundation5/public/stylesheets/foundation/components/_buttons.scss +66 -29
@@ @@ -21,8 +21,8 @@ $button-margin-bottom: rem-calc(20) !default;
// We use these to control button text styles.
$button-font-family: $body-font-family !default;
- $button-font-color: #fff !default;
- $button-font-color-alt: #333 !default;
+ $button-font-color: $white !default;
+ $button-font-color-alt: $oil !default;
$button-font-tny: rem-calc(11) !default;
$button-font-sml: rem-calc(13) !default;
$button-font-med: rem-calc(16) !default;
@@ @@ -36,15 +36,27 @@ $button-function-factor: -20% !default;
// We use these to control button border styles.
$button-border-width: 0px !default;
$button-border-style: solid !default;
- $button-bg: $primary-color !default;
- $button-border-color: scale-color($button-bg, $lightness: $button-function-factor) !default;
+ $button-bg-color: $primary-color !default;
+ $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor) !default;
+ $button-border-color: $button-bg-hover !default;
+ $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor) !default;
+ $secondary-button-border-color: $secondary-button-bg-hover !default;
+ $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor) !default;
+ $success-button-border-color: $success-button-bg-hover !default;
+ $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor) !default;
+ $alert-button-border-color: $alert-button-bg-hover !default;
+ $warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor) !default;
+ $warning-button-border-color: $warning-button-bg-hover !default;
+ $info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor) !default;
+ $info-button-border-color: $info-button-bg-hover !default;
// We use this to set the default radius used throughout the core.
$button-radius: $global-radius !default;
$button-round: $global-rounded !default;
- // We use this to set default opacity for disabled buttons.
+ // We use this to set default opacity and cursor for disabled buttons.
$button-disabled-opacity: 0.7 !default;
+ $button-disabled-cursor: $cursor-default-value !default;
//
@@ @@ -113,6 +125,10 @@ $button-disabled-opacity: 0.7 !default;
}
}
+ // @MIXIN
+ //
+ // we use this mixin to create the button hover and border colors
+
// @MIXIN
//
// We use this mixin to add button color styles
@@ @@ -120,42 +136,50 @@ $button-disabled-opacity: 0.7 !default;
// $bg - Primary color set in settings file. Default: $button-bg.
// $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true
// $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
- @mixin button-style($bg:$button-bg, $radius:true, $disabled:false) {
+ // $bg-hover - Button Hover Background Color. Default: $button-bg-hover
+ // $border-color - Button Border Color. Default: $button-border-color
+ @mixin button-style($bg:$button-bg-color, $radius:false, $disabled:false, $bg-hover:null, $border-color:null) {
// We control which background styles are used,
// these can be removed by setting $bg:false
@if $bg {
+
+ @if $bg-hover == null {
+ $bg-hover: if($bg == $button-bg-color, $button-bg-hover, scale-color($bg, $lightness: $button-function-factor));
+ }
+
+ @if $border-color == null {
+ $border-color: if($bg == $button-bg-color, $button-border-color, scale-color($bg, $lightness: $button-function-factor));
+ }
+
// This find the lightness percentage of the background color.
$bg-lightness: lightness($bg);
+ $bg-hover-lightness: lightness($bg-hover);
background-color: $bg;
- border-color: scale-color($bg, $lightness: $button-function-factor);
+ border-color: $border-color;
&:hover,
- &:focus { background-color: scale-color($bg, $lightness: $button-function-factor); }
+ &:focus { background-color: $bg-hover; }
// We control the text color for you based on the background color.
- @if $bg-lightness > 70% {
- color: $button-font-color-alt;
- &:hover,
- &:focus { color: $button-font-color-alt; }
- }
- @else {
- color: $button-font-color;
- &:hover,
- &:focus { color: $button-font-color; }
+ color: if($bg-lightness > 70%, $button-font-color-alt, $button-font-color);
+
+ &:hover,
+ &:focus {
+ color: if($bg-hover-lightness > 70%, $button-font-color-alt, $button-font-color);
}
}
// We can set $disabled:true to create a disabled transparent button.
@if $disabled {
- cursor: $cursor-default-value;
+ cursor: $button-disabled-cursor;
opacity: $button-disabled-opacity;
box-shadow: none;
&:hover,
&:focus { background-color: $bg; }
}
- // We can control how much button radius us used.
+ // We can control how much button radius is used.
@if $radius == true { @include radius($button-radius); }
@else if $radius { @include radius($radius); }
@@ @@ -170,12 +194,18 @@ $button-disabled-opacity: 0.7 !default;
// $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default:false.
// $full-width - We can set $full-width:true to remove side padding extend width. Default:false.
// $disabled - We can set $disabled:true to create a disabled transparent button. Default:false.
- // $is-input - <input>'s and <button>'s take on strange padding. We added this to help fix that. Default:false.
// $is-prefix - Not used? Default:false.
- @mixin button($padding:$button-med, $bg:$button-bg, $radius:false, $full-width:false, $disabled:false, $is-prefix:false) {
+ // $bg-hover - Button Hover Color - Default null - see button-style mixin
+ // $border-color - Button Border Color - Default null - see button-style mixin
+ // $transition - We can control whether or not to include the background-color transition property - Default:true.
+ @mixin button($padding:$button-med, $bg:$button-bg-color, $radius:false, $full-width:false, $disabled:false, $is-prefix:false, $bg-hover:null, $border-color:null, $transition: true) {
@include button-base;
@include button-size($padding, $full-width);
- @include button-style($bg, $radius, $disabled);
+ @include button-style($bg, $radius, $disabled, $bg-hover, $border-color);
+
+ @if $transition {
+ @include single-transition(background-color);
+ }
}
@@ @@ -190,9 +220,11 @@ $button-disabled-opacity: 0.7 !default;
@include single-transition(background-color);
- &.secondary { @include button-style($bg:$secondary-color); }
- &.success { @include button-style($bg:$success-color); }
- &.alert { @include button-style($bg:$alert-color); }
+ &.secondary { @include button-style($bg:$secondary-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
+ &.success { @include button-style($bg:$success-color, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
+ &.alert { @include button-style($bg:$alert-color, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
+ &.warning { @include button-style($bg:$warning-color, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
+ &.info { @include button-style($bg:$info-color, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
&.large { @include button-size($padding:$button-lrg); }
&.small { @include button-size($padding:$button-sml); }
@@ @@ -205,13 +237,18 @@ $button-disabled-opacity: 0.7 !default;
&.radius { @include button-style($bg:false, $radius:true); }
&.round { @include button-style($bg:false, $radius:$button-round); }
- &.disabled, &[disabled] { @include button-style($bg:$button-bg, $disabled:true);
- &.secondary { @include button-style($bg:$secondary-color, $disabled:true); }
- &.success { @include button-style($bg:$success-color, $disabled:true); }
- &.alert { @include button-style($bg:$alert-color, $disabled:true); }
+ &.disabled, &[disabled] { @include button-style($bg:$button-bg-color, $disabled:true, $bg-hover:$button-bg-hover, $border-color:$button-border-color);
+ &.secondary { @include button-style($bg:$secondary-color, $disabled:true, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
+ &.success { @include button-style($bg:$success-color, $disabled:true, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
+ &.alert { @include button-style($bg:$alert-color, $disabled:true, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
+ &.warning { @include button-style($bg:$warning-color, $disabled:true, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
+ &.info { @include button-style($bg:$info-color, $disabled:true, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
}
}
+ //firefox 2px fix
+ button::-moz-focus-inner {border:0; padding:0;}
+
@media #{$medium-up} {
button, .button {
@include button-base($style:false, $display:inline-block);
generators/foundation5/public/stylesheets/foundation/components/_clearing.scss +5 -5
@@ @@ -10,13 +10,13 @@
$include-html-clearing-classes: $include-html-classes !default;
// We use these to set the background colors for parts of Clearing.
- $clearing-bg: #333 !default;
+ $clearing-bg: $oil !default;
$clearing-caption-bg: $clearing-bg !default;
$clearing-carousel-bg: rgba(51,51,51,0.8) !default;
$clearing-img-bg: $clearing-bg !default;
// We use these to style the close button
- $clearing-close-color: #ccc !default;
+ $clearing-close-color: $iron !default;
$clearing-close-size: 30px !default;
// We use these to style the arrows
@@ @@ -24,7 +24,7 @@ $clearing-arrow-size: 12px !default;
$clearing-arrow-color: $clearing-close-color !default;
// We use these to style captions
- $clearing-caption-font-color: #ccc !default;
+ $clearing-caption-font-color: $iron !default;
$clearing-caption-font-size: 0.875em !default;
$clearing-caption-padding: 10px 30px 20px !default;
@@ @@ -81,7 +81,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
position: absolute;
top: 50%;
left: 50%;
- color: #aaa;
+ color: $base;
font-size: 0.6em;
}
@@ @@ -123,7 +123,7 @@ $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
display: none;
&:hover,
- &:focus { color: #ccc; }
+ &:focus { color: $iron; }
}
.clearing-assembled .clearing-container { height: 100%;
generators/foundation5/public/stylesheets/foundation/components/_dropdown-buttons.scss +11 -10
@@ @@ -10,8 +10,8 @@
$include-html-button-classes: $include-html-classes !default;
// We use these to set the color of the pip in dropdown buttons
- $dropdown-button-pip-color: #fff !default;
- $dropdown-button-pip-color-alt: #333 !default;
+ $dropdown-button-pip-color: $white !default;
+ $dropdown-button-pip-color-alt: $oil !default;
$button-pip-tny: rem-calc(6) !default;
$button-pip-sml: rem-calc(7) !default;
@@ @@ -49,17 +49,18 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
// We use this mixin to build off of the button mixin and add dropdown button styles
//
// $padding - Determines the size of button you're working with. Default: medium. Options [tiny, small, medium, large]
- // $pip-color - Color of the little triangle that points to the dropdown. Default: #fff.
+ // $pip-color - Color of the little triangle that points to the dropdown. Default: $white.
// $base-style - Add in base-styles. This can be set to false. Default:true
- @mixin dropdown-button($padding:medium, $pip-color:#fff, $base-style:true) {
+ @mixin dropdown-button($padding:medium, $pip-color:$white, $base-style:true) {
// We add in base styles, but they can be negated by setting to 'false'.
@if $base-style {
position: relative;
+ outline: none;
// This creates the base styles for the triangle pip
- &:after {
+ &::after {
position: absolute;
content: "";
width: 0;
@@ @@ -74,7 +75,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
// If we're dealing with tiny buttons, use these styles
@if $padding == tiny {
padding-#{$opposite-direction}: $dropdown-button-padding-tny;
- &:before {
+ &:after {
border-width: $dropdown-button-pip-size-tny;
#{$opposite-direction}: $dropdown-button-pip-opposite-tny;
margin-top: $dropdown-button-pip-top-tny;
@@ @@ -84,7 +85,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
// If we're dealing with small buttons, use these styles
@if $padding == small {
padding-#{$opposite-direction}: $dropdown-button-padding-sml;
- &:after {
+ &::after {
border-width: $dropdown-button-pip-size-sml;
#{$opposite-direction}: $dropdown-button-pip-opposite-sml;
margin-top: $dropdown-button-pip-top-sml;
@@ @@ -94,7 +95,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
// If we're dealing with default (medium) buttons, use these styles
@if $padding == medium {
padding-#{$opposite-direction}: $dropdown-button-padding-med;
- &:after {
+ &::after {
border-width: $dropdown-button-pip-size-med;
#{$opposite-direction}: $dropdown-button-pip-opposite-med;
margin-top: $dropdown-button-pip-top-med;
@@ @@ -104,7 +105,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
// If we're dealing with large buttons, use these styles
@if $padding == large {
padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
- &:after {
+ &::after {
border-width: $dropdown-button-pip-size-lrg;
#{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
margin-top: $dropdown-button-pip-top-lrg;
@@ @@ -113,7 +114,7 @@ $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
// We can control the pip color. We didn't use logic in this case, just set it and forget it.
@if $pip-color {
- &:after { border-color: $pip-color transparent transparent transparent; }
+ &::after { border-color: $pip-color transparent transparent transparent; }
}
}
generators/foundation5/public/stylesheets/foundation/components/_dropdown.scss +49 -35
@@ @@ -27,30 +27,33 @@ $f-dropdown-margin-right: $f-dropdown-margin-top !default;
$f-dropdown-margin-bottom: $f-dropdown-margin-top !default;
// We use this to control the background color
- $f-dropdown-bg: #fff !default;
+ $f-dropdown-bg: $white !default;
// We use this to set the border styles for dropdowns.
$f-dropdown-border-style: solid !default;
$f-dropdown-border-width: 1px !default;
- $f-dropdown-border-color: scale-color(#fff, $lightness: -20%) !default;
+ $f-dropdown-border-color: scale-color($white, $lightness: -20%) !default;
// We use these to style the triangle pip.
$f-dropdown-triangle-size: 6px !default;
- $f-dropdown-triangle-color: #fff !default;
+ $f-dropdown-triangle-color: $white !default;
$f-dropdown-triangle-side-offset: 10px !default;
// We use these to control styles for the list elements.
$f-dropdown-list-style: none !default;
- $f-dropdown-font-color: #555 !default;
+ $f-dropdown-font-color: $charcoal !default;
$f-dropdown-font-size: rem-calc(14) !default;
$f-dropdown-list-padding: rem-calc(5, 10) !default;
$f-dropdown-line-height: rem-calc(18) !default;
- $f-dropdown-list-hover-bg: #eeeeee !default;
+ $f-dropdown-list-hover-bg: $smoke !default;
$dropdown-mobile-default-float: 0 !default;
// We use this to control the styles for when the dropdown has custom content.
$f-dropdown-content-padding: rem-calc(20) !default;
+ // Default radius for dropdown.
+ $f-dropdown-radius: $global-radius !default;
+
//
// @mixins
//
@@ @@ -65,6 +68,7 @@ $f-dropdown-content-padding: rem-calc(20) !default;
left: -9999px;
list-style: $f-dropdown-list-style;
margin-#{$default-float}: 0;
+ outline: none;
> *:first-child { margin-top: 0; }
> *:last-child { margin-bottom: 0; }
@@ @@ -76,7 +80,7 @@ $f-dropdown-content-padding: rem-calc(20) !default;
background: $f-dropdown-bg;
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
font-size: $f-dropdown-font-size;
- z-index: 99;
+ z-index: 89;
}
@else if $content == content {
padding: $f-dropdown-content-padding;
@@ @@ -86,7 +90,7 @@ $f-dropdown-content-padding: rem-calc(20) !default;
background: $f-dropdown-bg;
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
font-size: $f-dropdown-font-size;
- z-index: 99;
+ z-index: 89;
}
@if $triangle == bottom {
@@ @@ -97,66 +101,66 @@ $f-dropdown-content-padding: rem-calc(20) !default;
position: absolute;
top: -($f-dropdown-triangle-size * 2);
#{$default-float}: $f-dropdown-triangle-side-offset;
- z-index: 99;
+ z-index: 89;
}
&:after {
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
position: absolute;
top: -(($f-dropdown-triangle-size + 1) * 2);
#{$default-float}: $f-dropdown-triangle-side-offset - 1;
- z-index: 98;
+ z-index: 88;
}
&.right:before {
- left: auto;
- right: $f-dropdown-triangle-side-offset;
+ #{$default-float}: auto;
+ #{$opposite-direction}: $f-dropdown-triangle-side-offset;
}
&.right:after {
- left: auto;
- right: $f-dropdown-triangle-side-offset - 1;
+ #{$default-float}: auto;
+ #{$opposite-direction}: $f-dropdown-triangle-side-offset - 1;
}
}
- @if $triangle == left {
+ @if $triangle == $default-float {
margin-top: 0;
- margin-left: $f-dropdown-margin-right;
+ margin-#{$default-float}: $f-dropdown-margin-right;
&:before {
- @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, right);
+ @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$opposite-direction});
position: absolute;
top: $f-dropdown-triangle-side-offset;
#{$default-float}: -($f-dropdown-triangle-size * 2);
- z-index: 99;
+ z-index: 89;
}
&:after {
- @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, right);
+ @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$opposite-direction});
position: absolute;
top: $f-dropdown-triangle-side-offset - 1;
#{$default-float}: -($f-dropdown-triangle-size * 2) - 2;
- z-index: 98;
+ z-index: 88;
}
}
- @if $triangle == right {
+ @if $triangle == $opposite-direction {
margin-top: 0;
- margin-left: -$f-dropdown-margin-right;
+ margin-#{$default-float}: -$f-dropdown-margin-right;
&:before {
- @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, left);
+ @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$default-float});
position: absolute;
top: $f-dropdown-triangle-side-offset;
#{$opposite-direction}: -($f-dropdown-triangle-size * 2);
- left: auto;
- z-index: 99;
+ #{$default-float}: auto;
+ z-index: 89;
}
&:after {
- @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, left);
+ @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$default-float});
position: absolute;
top: $f-dropdown-triangle-side-offset - 1;
#{$opposite-direction}: -($f-dropdown-triangle-size * 2) - 2;
- left: auto;
- z-index: 98;
+ #{$default-float}: auto;
+ z-index: 88;
}
}
@@ @@ -171,8 +175,8 @@ $f-dropdown-content-padding: rem-calc(20) !default;
top: auto;
bottom: -($f-dropdown-triangle-size * 2);
#{$default-float}: $f-dropdown-triangle-side-offset;
- right: auto;
- z-index: 99;
+ #{$opposite-direction}: auto;
+ z-index: 89;
}
&:after {
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, top);
@@ @@ -180,8 +184,8 @@ $f-dropdown-content-padding: rem-calc(20) !default;
top: auto;
bottom: -($f-dropdown-triangle-size * 2) - 2;
#{$default-float}: $f-dropdown-triangle-side-offset - 1;
- right: auto;
- z-index: 98;
+ #{$opposite-direction}: auto;
+ z-index: 88;
}
}
@@ @@ -205,6 +209,8 @@ $f-dropdown-content-padding: rem-calc(20) !default;
&:hover,
&:focus { background: $f-dropdown-list-hover-bg; }
+ &.radius { @include radius($f-dropdown-radius); }
+
a {
display: block;
padding: $f-dropdown-list-padding;
@@ @@ -219,12 +225,12 @@ $f-dropdown-content-padding: rem-calc(20) !default;
.f-dropdown {
@include dropdown-container(list, bottom);
- &.drop-right {
- @include dropdown-container(list, left);
+ &.drop-#{$opposite-direction} {
+ @include dropdown-container(list, #{$default-float});
}
- &.drop-left {
- @include dropdown-container(list, right);
+ &.drop-#{$default-float} {
+ @include dropdown-container(list, #{$opposite-direction});
}
&.drop-top {
@@ @@ -242,6 +248,14 @@ $f-dropdown-content-padding: rem-calc(20) !default;
&.small { max-width: 300px; }
&.medium { max-width: 500px; }
&.large { max-width: 800px; }
+ &.mega {
+ width:100%!important;
+ max-width:100%!important;
+
+ &.open{
+ left:0!important;
+ }
+ }
}
}
generators/foundation5/public/stylesheets/foundation/components/_forms.scss +125 -38
@@ @@ -18,43 +18,47 @@ $form-label-pointer: pointer !default;
$form-label-font-size: rem-calc(14) !default;
$form-label-font-weight: $font-weight-normal !default;
$form-label-line-height: 1.5 !default;
- $form-label-font-color: scale-color(#000, $lightness: 30%) !default;
+ $form-label-font-color: scale-color($black, $lightness: 30%) !default;
$form-label-small-transform: capitalize !default;
$form-label-bottom-margin: 0 !default;
$input-font-family: inherit !default;
$input-font-color: rgba(0,0,0,0.75) !default;
$input-font-size: rem-calc(14) !default;
- $input-bg-color: #fff !default;
- $input-focus-bg-color: scale-color(#fff, $lightness: -2%) !default;
- $input-border-color: scale-color(#fff, $lightness: -20%) !default;
- $input-focus-border-color: scale-color(#fff, $lightness: -40%) !default;
+ $input-bg-color: $white !default;
+ $input-focus-bg-color: scale-color($white, $lightness: -2%) !default;
+ $input-border-color: scale-color($white, $lightness: -20%) !default;
+ $input-focus-border-color: scale-color($white, $lightness: -40%) !default;
$input-border-style: solid !default;
$input-border-width: 1px !default;
$input-border-radius: $global-radius !default;
- $input-disabled-bg: #ddd !default;
+ $input-disabled-bg: $gainsboro !default;
+ $input-disabled-cursor: $cursor-default-value !default;
$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
$input-include-glowing-effect: true !default;
// We use these to style the fieldset border and spacing.
$fieldset-border-style: solid !default;
$fieldset-border-width: 1px !default;
- $fieldset-border-color: #ddd !default;
+ $fieldset-border-color: $gainsboro !default;
$fieldset-padding: rem-calc(20) !default;
$fieldset-margin: rem-calc(18 0) !default;
// We use these to style the legends when you use them
- $legend-bg: #fff !default;
+ $legend-bg: $white !default;
$legend-font-weight: $font-weight-bold !default;
$legend-padding: rem-calc(0 3) !default;
// We use these to style the prefix and postfix input elements
- $input-prefix-bg: scale-color(#fff, $lightness: -5%) !default;
- $input-prefix-border-color: scale-color(#fff, $lightness: -20%) !default;
+ $input-prefix-bg: scale-color($white, $lightness: -5%) !default;
+ $input-prefix-border-color: scale-color($white, $lightness: -20%) !default;
$input-prefix-border-size: 1px !default;
$input-prefix-border-type: solid !default;
$input-prefix-overflow: hidden !default;
- $input-prefix-font-color: #333 !default;
- $input-prefix-font-color-alt: #fff !default;
+ $input-prefix-font-color: $oil !default;
+ $input-prefix-font-color-alt: $white !default;
+
+ // We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
+ $input-number-spinners: true !default;
// We use these to style the error states for inputs and labels
$input-error-message-padding: rem-calc(6 9 9) !default;
@@ @@ -62,15 +66,15 @@ $input-error-message-top: -1px !default;
$input-error-message-font-size: rem-calc(12) !default;
$input-error-message-font-weight: $font-weight-normal !default;
$input-error-message-font-style: italic !default;
- $input-error-message-font-color: #fff !default;
- $input-error-message-font-color-alt: #333 !default;
+ $input-error-message-font-color: $white !default;
+ $input-error-message-font-color-alt: $oil !default;
// We use this to style the glowing effect of inputs when focused
$glowing-effect-fade-time: 0.45s !default;
$glowing-effect-color: $input-focus-border-color !default;
// Select variables
- $select-bg-color: #fafafa !default;
+ $select-bg-color: $ghost !default;
$select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
//
@@ @@ -107,7 +111,11 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
@mixin form-element {
background-color: $input-bg-color;
font-family: $input-font-family;
- border: $input-border-width $input-border-style $input-border-color;
+ border: {
+ style: $input-border-style;
+ width: $input-border-width;
+ color: $input-border-color;
+ }
box-shadow: $input-box-shadow;
color: $input-font-color;
display: block;
@@ @@ -126,9 +134,19 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
border-color: $input-focus-border-color;
outline: none;
}
+ // Disbaled Styles
+ &:disabled {
+ background-color: $input-disabled-bg;
+ cursor: $input-disabled-cursor;
+ }
// Disabled background input background color
- &[disabled], fieldset[disabled] & { background-color: $input-disabled-bg; }
+ &[disabled],
+ &[readonly],
+ fieldset[disabled] & {
+ background-color: $input-disabled-bg;
+ cursor: $input-disabled-cursor;
+ }
}
// @MIXIN
@@ @@ -181,7 +199,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// @MIXIN
//
// We use this mixin to create prefix label styles
- // $bg - Default:$input-prefix-bg || scale-color(#fff, $lightness: -5%) !default;
+ // $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
// $is-button - Toggle position settings if prefix is a button. Default:false
//
@mixin prefix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
@@ @@ -215,7 +233,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// @MIXIN
//
// We use this mixin to create postfix label styles
- // $bg - Default:$input-prefix-bg || scale-color(#fff, $lightness: -5%) !default;
+ // $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
// $is-button - Toggle position settings if prefix is a button. Default: false
@mixin postfix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
@@ @@ -305,13 +323,30 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
// We use this mixin to style select elements
@mixin form-select {
-webkit-appearance: none !important;
+ -webkit-border-radius: 0px;
background-color: $select-bg-color;
- background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==');
+
+ // Hide the dropdown arrow shown in newer IE versions
+ &::-ms-expand {
+ display: none;
+ }
+
+ // The custom arrow have some fake horizontal padding so we can align it
+ // from the right side of the element without relying on CSS3
+ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
+
+ // We can safely use leftmost and rightmost now
+ background-position: if($text-direction == 'rtl', 0%, 100%) center;
+
background-repeat: no-repeat;
- background-position: if($text-direction == 'rtl', 3%, 97%) center;
- border: $input-border-width $input-border-style $input-border-color;
+ border: {
+ style: $input-border-style;
+ width: $input-border-width;
+ color: $input-border-color;
+ }
padding: $form-spacing / 2;
font-size: $input-font-size;
+ font-family: $body-font-family;
color: $input-font-color;
line-height: normal;
@include radius(0);
@@ @@ -320,6 +355,23 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
background-color: $select-hover-bg-color;
border-color: $input-focus-border-color;
}
+ // Disabled Styles
+ &:disabled {
+ background-color: $input-disabled-bg;
+ cursor: $input-disabled-cursor;
+ }
+ }
+
+ // We use this mixin to turn on/off HTML5 number spinners
+ @mixin html5number($browser, $on:true) {
+ @if $on==false {
+ @if $browser==webkit {
+ -webkit-appearance: none;
+ margin: 0;
+ } @else if $browser==moz {
+ -moz-appearance: textfield;
+ }
+ }
}
@include exports("form") {
@@ @@ -341,14 +393,6 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
}
}
- select::-ms-expand {
- display:none;
- }
-
- @-moz-document url-prefix() {
- select { background: $select-bg-color; }
- select:hover { background: $select-hover-bg-color }
- }
/* Attach elements to the beginning or end of an input */
.prefix,
.postfix { @include prefix-postfix-base; }
@@ @@ -363,12 +407,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
.postfix.button.round { @include radius(0); @include side-radius($opposite-direction, $button-round); }
/* Separate prefix and postfix styles when on span or label so buttons keep their own */
- span.prefix,label.prefix { @include prefix();
- &.radius { @include radius(0); @include side-radius($default-float, $global-radius); }
- }
- span.postfix,label.postfix { @include postfix();
- &.radius { @include radius(0); @include side-radius($opposite-direction, $global-radius); }
- }
+ span.prefix,label.prefix { @include prefix(); }
+ span.postfix,label.postfix { @include postfix(); }
/* We use this to get basic styling on all basic form elements */
input[type="text"],
@@ @@ -384,8 +424,10 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
input[type="tel"],
input[type="time"],
input[type="url"],
+ input[type="color"],
textarea {
-webkit-appearance: none;
+ -webkit-border-radius: 0px;
@include form-element;
@if $input-include-glowing-effect == false {
@include single-transition(all, 0.15s, linear);
@@ @@ -395,8 +437,38 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
}
}
+ form {
+ .row {
+ .prefix-radius.row.collapse {
+ input,
+ textarea,
+ select { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
+ .prefix { @include radius(0); @include side-radius($default-float, $button-radius); }
+ }
+ .postfix-radius.row.collapse {
+ input,
+ textarea,
+ select { @include radius(0); @include side-radius($default-float, $button-radius); }
+ .postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
+ }
+ .prefix-round.row.collapse {
+ input,
+ textarea,
+ select { @include radius(0); @include side-radius($opposite-direction, $button-round); }
+ .prefix { @include radius(0); @include side-radius($default-float, $button-round); }
+ }
+ .postfix-round.row.collapse {
+ input,
+ textarea,
+ select { @include radius(0); @include side-radius($default-float, $button-round); }
+ .postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); }
+ }
+ }
+ }
+
input[type="submit"] {
-webkit-appearance: none;
+ -webkit-border-radius: 0px;
}
/* Respect enforced amount of rows for textarea */
@@ @@ -404,6 +476,11 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
height: auto;
}
+ /* Not allow resize out of parent */
+ textarea {
+ max-width: 100%;
+ }
+
/* Add height value for select elements to match text input height */
select {
@include form-select;
@@ @@ -432,6 +509,15 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
width:100%;
}
+ /* HTML5 Number spinners settings */
+ input[type=number] {
+ @include html5number(moz, $input-number-spinners)
+ }
+ input[type="number"]::-webkit-inner-spin-button,
+ input[type="number"]::-webkit-outer-spin-button {
+ @include html5number(webkit, $input-number-spinners);
+ }
+
/* We add basic fieldset styling */
fieldset {
@include fieldset;
@@ @@ -440,7 +526,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
/* Error Handling */
#{data('abide')} {
- .error small.error, span.error, small.error {
+ .error small.error, .error span.error, span.error, small.error {
@include form-error-message;
}
span.error, small.error { display: none; }
@@ @@ -490,7 +576,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
}
input.error,
- textarea.error {
+ textarea.error,
+ select.error {
margin-bottom: 0;
}
label.error { @include form-label-error-color; }
generators/foundation5/public/stylesheets/foundation/components/_global.scss +64 -38
@@ @@ -11,9 +11,6 @@
// styles get applied to [data-mysite-plugin], etc
$namespace: false !default;
- // Control the inclusion of experimental properties
- $experimental: true !default;
-
// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.
@@ @@ -23,22 +20,12 @@ $experimental: true !default;
$base-font-size: 100% !default;
// $base-line-height is 24px while $base-font-size is 16px
- $base-line-height: 150% !default;
+ $base-line-height: 1.5 !default;
//
// Global Foundation Mixins
//
- // @mixins
- //
- // We use this to optionally include experimental or
- // explicitly vendor prefixed properties
- @mixin experimental() {
- @if $experimental {
- @content;
- }
- }
-
// @mixins
//
// We use this to control border radius.
@@ @@ -55,9 +42,13 @@ $base-line-height: 150% !default;
// $side - Options: left, right, top, bottom
@mixin side-radius($side, $radius:$global-radius) {
@if ($side == left or $side == right) {
+ -webkit-border-bottom-#{$side}-radius: $radius;
+ -webkit-border-top-#{$side}-radius: $radius;
border-bottom-#{$side}-radius: $radius;
border-top-#{$side}-radius: $radius;
} @else {
+ -webkit-#{$side}-left-radius: $radius;
+ -webkit-#{$side}-right-radius: $radius;
border-#{$side}-left-radius: $radius;
border-#{$side}-right-radius: $radius;
}
@@ @@ -89,8 +80,8 @@ $base-line-height: 150% !default;
// We use this to add box-sizing across browser prefixes
@mixin box-sizing($type:border-box) {
-webkit-box-sizing: $type; // Android < 2.3, iOS < 4
- -moz-box-sizing: $type; // Firefox < 29
- box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
+ -moz-box-sizing: $type; // Firefox < 29
+ box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
}
// @mixins
@@ @@ -149,16 +140,16 @@ $base-line-height: 150% !default;
top: 50%;
margin-top: -$width/2;
}
- @if $left {
- left: $left;
- }
- @else {
- left: ($tabbar-menu-icon-width - $width)/2;
- }
+ @if $left {
+ left: $left;
+ }
+ @else {
+ left: ($tabbar-menu-icon-width - $width)/2;
+ }
}
@else {
top: 50%;
- margin-top: -$width/2;
+ margin-top: -($width/2);
#{$opposite-direction}: $topbar-link-padding;
}
@@ @@ -229,6 +220,39 @@ $base-line-height: 150% !default;
clip: auto;
}
+ $white : #FFFFFF !default;
+ $ghost : #FAFAFA !default;
+ $snow : #F9F9F9 !default;
+ $vapor : #F6F6F6 !default;
+ $white-smoke : #F5F5F5 !default;
+ $silver : #EFEFEF !default;
+ $smoke : #EEEEEE !default;
+ $gainsboro : #DDDDDD !default;
+ $iron : #CCCCCC !default;
+ $base : #AAAAAA !default;
+ $aluminum : #999999 !default;
+ $jumbo : #888888 !default;
+ $monsoon : #777777 !default;
+ $steel : #666666 !default;
+ $charcoal : #555555 !default;
+ $tuatara : #444444 !default;
+ $oil : #333333 !default;
+ $jet : #222222 !default;
+ $black : #000000 !default;
+
+ // We use these as default colors throughout
+ $primary-color: #008CBA !default; // bondi-blue
+ $secondary-color: #e7e7e7 !default; // white-lilac
+ $alert-color: #f04124 !default; // cinnabar
+ $success-color: #43AC6A !default; // sea-green
+ $warning-color: #f08a24 !default; // carrot
+ $info-color: #a0d3e8 !default; // cornflower
+
+ // We use these to define default font stacks
+ $font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;
+ $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif !default;
+ $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace !default;
+
// We use these to define default font weights
$font-weight-normal: normal !default;
$font-weight-bold: bold !default;
@@ @@ -236,7 +260,7 @@ $font-weight-bold: bold !default;
// We use these to control various global styles
$body-bg: #fff !default;
$body-font-color: #222 !default;
- $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
+ $body-font-family: $font-family-sans-serif !default;
$body-font-weight: $font-weight-normal !default;
$body-font-style: normal !default;
@@ @@ -254,13 +278,6 @@ $opposite-direction: right !default;
$default-float: right;
$opposite-direction: left;
}
- // We use these as default colors throughout
- $primary-color: #008CBA !default;
- $secondary-color: #e7e7e7 !default;
- $alert-color: #f04124 !default;
- $success-color: #43AC6A !default;
- $warning-color: #f08a24 !default;
- $info-color: #a0d3e8 !default;
// We use these to make sure border radius matches unless we want it different.
$global-radius: 3px !default;
@@ @@ -313,6 +330,7 @@ $large: $large-up;
//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
+ $cursor-auto-value: auto !default;
$cursor-crosshair-value: crosshair !default;
$cursor-default-value: default !default;
$cursor-pointer-value: pointer !default;
@@ @@ -327,7 +345,7 @@ $cursor-text-value: text !default;
// Forward slash placed around everything to convince PhantomJS to read the value.
meta.foundation-version {
- font-family: "/5.2.3/";
+ font-family: "/5.4.7/";
}
meta.foundation-mq-small {
@@ @@ -383,9 +401,9 @@ $cursor-text-value: text !default;
font-family: $body-font-family;
font-weight: $body-font-weight;
font-style: $body-font-style;
- line-height: 1; // Set to $base-line-height to take on browser default of 150%
+ line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150%
position: relative;
- cursor: $cursor-default-value;
+ cursor: $cursor-auto-value;
}
a:hover { cursor: $cursor-pointer-value; }
@@ @@ -404,10 +422,18 @@ $cursor-text-value: text !default;
}
// Miscellaneous useful HTML classes
- .left { float: left !important; }
- .right { float: right !important; }
- .clearfix { @include clearfix; }
- .hide { display: none; }
+ .left { float: left !important; }
+ .right { float: right !important; }
+ .clearfix { @include clearfix; }
+
+ // Hide visually and from screen readers
+ .hide {
+ display: none !important;
+ visibility: hidden;
+ }
+
+ // Hide visually and from screen readers, but maintain layout
+ .invisible { visibility: hidden; }
// Font smoothing
// Antialiased font smoothing works best for light text on a dark background.
generators/foundation5/public/stylesheets/foundation/components/_grid.scss +19 -4
@@ @@ -13,6 +13,8 @@ $include-xl-html-grid-classes: false !default;
$row-width: rem-calc(1000) !default;
$total-columns: 12 !default;
+ $last-child-float: $opposite-direction !default;
+
//
// Grid Functions
//
@@ @@ -140,7 +142,7 @@ $total-columns: 12 !default;
@if $center {
margin-#{$default-float}: auto;
margin-#{$opposite-direction}: auto;
- float: none !important;
+ float: none;
}
// If offset, calculate appropriate margins
@@ @@ -170,8 +172,6 @@ $total-columns: 12 !default;
.#{$size}-#{$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
}
- [class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
- [class*="column"] + [class*="column"].end { float: $default-float; }
@for $i from 0 through $total-columns - 1 {
@@ @@ -192,7 +192,19 @@ $total-columns: 12 !default;
.columns.#{$size}-uncentered {
margin-#{$default-float}: 0;
margin-#{$opposite-direction}: 0;
- float: $default-float !important;
+ float: $default-float;
+ }
+
+ // Fighting [class*="column"] + [class*="column"]:last-child
+ .column.#{$size}-centered:last-child,
+ .columns.#{$size}-centered:last-child{
+ float: none;
+ }
+
+ // Fighting .column.<previous-size>-centered:last-child
+ .column.#{$size}-uncentered:last-child,
+ .columns.#{$size}-uncentered:last-child {
+ float: $default-float;
}
.column.#{$size}-uncentered.opposite,
@@ @@ -221,6 +233,9 @@ $total-columns: 12 !default;
.column,
.columns { @include grid-column($columns:$total-columns); }
+ [class*="column"] + [class*="column"]:last-child { float: $last-child-float; }
+ [class*="column"] + [class*="column"].end { float: $default-float; }
+
@media #{$small-up} {
@include grid-html-classes($size:small);
}
generators/foundation5/public/stylesheets/foundation/components/_icon-bar.scss +293 -0
@@ @@ -0,0 +1,293 @@
+ // Foundation by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ @import "global";
+
+
+ // @name
+ // @dependencies _global.scss
+
+ $include-html-icon-bar-classes: $include-html-classes !default;
+
+ // @variables
+
+ // We use these to style the icon-bar and items
+ $icon-bar-bg: $oil !default;
+ $icon-bar-font-color: $white !default;
+ $icon-bar-font-size: 1rem !default;
+ $icon-bar-hover-color: $primary-color !default;
+ $icon-bar-icon-color: $white !default;
+ $icon-bar-icon-size: 1.875rem !default;
+ $icon-bar-image-width: 1.875rem !default;
+ $icon-bar-image-height: 1.875rem !default;
+ $icon-bar-active-color: $primary-color !default;
+ $icon-bar-item-padding: 1.25rem !default;
+
+ //
+ // @mixins
+ //
+
+ // We use this mixin to create the base styles for our Icon bar element.
+ //
+ @mixin icon-bar-base() {
+
+ width: 100%;
+ font-size: 0;
+ display: inline-block;
+
+ & > * {
+ text-align: center;
+ font-size: $icon-bar-font-size;
+ width: 25%;
+ margin: 0 auto;
+ display: block;
+ padding: $icon-bar-item-padding;
+ float: left;
+
+ i, img {
+ display: block;
+ margin: 0 auto;
+
+ & + label {
+ margin-top: .0625rem;
+ }
+ }
+
+ i {
+ font-size: $icon-bar-icon-size;
+ vertical-align: middle;
+ }
+
+ img {
+ width: $icon-bar-image-width;
+ height: $icon-bar-image-height;
+ }
+ }
+
+ &.label-right > * {
+
+ i, img {
+ margin: 0 .0625rem 0 0;
+ display: inline-block;
+
+ & + label {
+ margin-top: 0;
+ }
+ }
+
+ label { display: inline-block; }
+ }
+
+ &.vertical.label-right > * {
+ text-align: left;
+ }
+
+ &.vertical, &.small-vertical{
+ height: 100%;
+ width: auto;
+
+ .item {
+ width: auto;
+ margin: auto;
+ float: none;
+ }
+ }
+
+ &.medium-vertical {
+ @media #{$medium-up} {
+ height: 100%;
+ width: auto;
+
+ .item {
+ width: auto;
+ margin: auto;
+ float: none;
+ }
+ }
+ }
+ &.large-vertical {
+ @media #{$large-up} {
+ height: 100%;
+ width: auto;
+
+ .item {
+ width: auto;
+ margin: auto;
+ float: none;
+ }
+ }
+ }
+ }
+
+ // We use this mixin to create the size styles for icon bars.
+ @mixin icon-bar-size(
+ $padding: $icon-bar-item-padding,
+ $font-size: $icon-bar-font-size,
+ $icon-size: $icon-bar-icon-size,
+ $image-width: $icon-bar-image-width,
+ $image-height: $icon-bar-image-height) {
+
+ & > * {
+ font-size: $font-size;
+ padding: $padding;
+
+ i, img {
+
+ & + label {
+ margin-top: .0625rem;
+ }
+ }
+
+ i {
+ font-size: $icon-size;
+ }
+
+ img {
+ width: $image-width;
+ height: $image-height;
+ }
+ }
+
+ }
+
+ @mixin icon-bar-style(
+ $bar-bg:$icon-bar-bg,
+ $bar-font-color:$icon-bar-font-color,
+ $bar-hover-color:$icon-bar-hover-color,
+ $bar-icon-color:$icon-bar-icon-color,
+ $bar-active-color:$icon-bar-active-color,
+ $base-style:true) {
+
+ @if $base-style {
+
+ background: $bar-bg;
+
+ & > * {
+
+ &:hover { background: $bar-hover-color; }
+
+ label { color: $bar-font-color; }
+
+ i {
+ color: $bar-icon-color;
+ }
+ }
+ }
+
+ }
+
+ // We use this to quickly create icon bars with a single mixin
+ // $height - The overall calculated height of the icon bar (horizontal)
+ // $bar-bg - the background color of the bar
+ // $bar-font-color - the font color
+ // $bar-hover-color - okay these are pretty obvious variables
+ // $bar-icon-color - maybe we could skip explaining them all? Okay this one does change icon color if you use an icon font
+ // $bar-active-color - the color of an active / hover state
+ // $base-style - Apply base styles? Default: true.
+
+ @mixin icon-bar(
+ $bar-bg:$icon-bar-bg,
+ $bar-font-color:$icon-bar-font-color,
+ $bar-hover-color:$icon-bar-hover-color,
+ $bar-icon-color:$icon-bar-icon-color,
+ $bar-active-color:$icon-bar-active-color,
+ $padding: $icon-bar-item-padding,
+ $font-size: $icon-bar-font-size,
+ $icon-size: $icon-bar-icon-size,
+ $image-width: $icon-bar-image-width,
+ $image-height: $icon-bar-image-height,
+ $base-style:true) {
+ @include icon-bar-base();
+ @include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
+ @include icon-bar-style($bar-bg, $bar-font-color, $bar-hover-color, $bar-icon-color, $bar-active-color, $base-style);
+ }
+
+ @include exports("icon-bar") {
+ @if $include-html-icon-bar-classes {
+ .icon-bar {
+ @include icon-bar;
+ }
+ }
+ }
+
+ @if $include-html-icon-bar-classes {
+
+ // toolbar styles
+
+ .icon-bar {
+
+ // Counts
+
+ &.two-up {
+ .item { width: 50%; }
+ &.vertical .item, &.small-vertical .item { width: auto; }
+ &.medium-vertical .item {
+ @media #{$medium-up} {
+ width: auto;
+ }
+ }
+ &.large-vertical .item {
+ @media #{$large-up} {
+ width: auto;
+ }
+ }
+ }
+ &.three-up {
+ .item { width: 33.3333%; }
+ &.vertical .item, &.small-vertical .item { width: auto; }
+ &.medium-vertical .item {
+ @media #{$medium-up} {
+ width: auto;
+ }
+ }
+ &.large-vertical .item {
+ @media #{$large-up} {
+ width: auto;
+ }
+ }
+ }
+ &.four-up {
+ .item { width: 25%; }
+ &.vertical .item, &.small-vertical .item { width: auto; }
+ &.medium-vertical .item {
+ @media #{$medium-up} {
+ width: auto;
+ }
+ }
+ &.large-vertical .item {
+ @media #{$large-up} {
+ width: auto;
+ }
+ }
+ }
+ &.five-up {
+ .item { width: 20%; }
+ &.vertical .item, &.small-vertical .item { width: auto; }
+ &.medium-vertical .item {
+ @media #{$medium-up} {
+ width: auto;
+ }
+ }
+ &.large-vertical .item {
+ @media #{$large-up} {
+ width: auto;
+ }
+ }
+ }
+ &.six-up {
+ .item { width: 16.66667%; }
+ &.vertical .item, &.small-vertical .item { width: auto; }
+ &.medium-vertical .item {
+ @media #{$medium-up} {
+ width: auto;
+ }
+ }
+ &.large-vertical .item {
+ @media #{$large-up} {
+ width: auto;
+ }
+ }
+ }
+ }
+ }
generators/foundation5/public/stylesheets/foundation/components/_joyride.scss +11 -9
@@ @@ -10,15 +10,15 @@
$include-html-joyride-classes: $include-html-classes !default;
// Controlling default Joyride styles
- $joyride-tip-bg: #333 !default;
+ $joyride-tip-bg: $oil !default;
$joyride-tip-default-width: 300px !default;
$joyride-tip-padding: rem-calc(18 20 24) !default;
- $joyride-tip-border: solid 1px #555 !default;
+ $joyride-tip-border: solid 1px $charcoal !default;
$joyride-tip-radius: 4px !default;
$joyride-tip-position-offset: 22px !default;
// Here, we're setting the tip font styles
- $joyride-tip-font-color: #fff !default;
+ $joyride-tip-font-color: $white !default;
$joyride-tip-font-size: rem-calc(14) !default;
$joyride-tip-header-weight: $font-weight-bold !default;
@@ @@ -28,10 +28,10 @@ $joyride-tip-nub-size: 10px !default;
// This adjusts the styles for the timer when its enabled
$joyride-tip-timer-width: 50px !default;
$joyride-tip-timer-height: 3px !default;
- $joyride-tip-timer-color: #666 !default;
+ $joyride-tip-timer-color: $steel !default;
// This changes up the styles for the close button
- $joyride-tip-close-color: #777 !default;
+ $joyride-tip-close-color: $monsoon !default;
$joyride-tip-close-size: 24px !default;
$joyride-tip-close-weight: $font-weight-normal !default;
@@ @@ -39,7 +39,7 @@ $joyride-tip-close-weight: $font-weight-normal !default;
$joyride-screenfill: rgba(0,0,0,0.5) !default;
- // We decided not to make a mixin for this because it relies on
+ // We decided not to make a mixin for this because it relies on
// predefined classes to work properly.
@include exports("joyride") {
@if $include-html-joyride-classes {
@@ @@ -73,6 +73,8 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
padding: $joyride-tip-padding;
.button { margin-bottom: 0 !important; }
+
+ .joyride-prev-tip { margin-right: 10px; }
}
/* Add a little css triangle pip, older browser just miss out on the fanciness of it */
@@ @@ -151,7 +153,7 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
line-height: .5 !important;
&:hover,
- &:focus { color: #eee !important; }
+ &:focus { color: $smoke !important; }
}
.joyride-modal-bg {
@@ @@ -168,11 +170,11 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
}
.joyride-expose-wrapper {
- background-color: #ffffff;
+ background-color: $white;
position: absolute;
border-radius: 3px;
z-index: 102;
- box-shadow: 0 0 15px #ffffff;
+ box-shadow: 0 0 15px $white;
}
.joyride-expose-cover {
generators/foundation5/public/stylesheets/foundation/components/_keystrokes.scss +4 -4
@@ @@ -12,15 +12,15 @@ $include-html-keystroke-classes: $include-html-classes !default;
// We use these to control text styles.
$keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
$keystroke-font-size: inherit !default;
- $keystroke-font-color: #222 !default;
- $keystroke-font-color-alt: #fff !default;
+ $keystroke-font-color: $jet !default;
+ $keystroke-font-color-alt: $white !default;
$keystroke-function-factor: -7% !default;
// We use this to control keystroke padding.
$keystroke-padding: rem-calc(2 4 0) !default;
// We use these to control background and border styles.
- $keystroke-bg: scale-color(#fff, $lightness: $keystroke-function-factor) !default;
+ $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor) !default;
$keystroke-border-style: solid !default;
$keystroke-border-width: 1px !default;
$keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor) !default;
@@ @@ -30,7 +30,7 @@ $keystroke-radius: $global-radius !default;
// @mixins
//
// We use this mixin to create keystroke styles.
- // $bg - Default: $keystroke-bg || scale-color(#fff, $lightness: $keystroke-function-factor) !default;
+ // $bg - Default: $keystroke-bg || scale-color($white, $lightness: $keystroke-function-factor) !default;
@mixin keystroke($bg:$keystroke-bg) {
// This find the lightness percentage of the background color.
$bg-lightness: lightness($bg);
generators/foundation5/public/stylesheets/foundation/components/_labels.scss +5 -3
@@ @@ -10,14 +10,14 @@
$include-html-label-classes: $include-html-classes !default;
// We use these to style the labels
- $label-padding: rem-calc(4 8 6) !default;
+ $label-padding: rem-calc(4 8 4) !default;
$label-radius: $global-radius !default;
// We use these to style the label text
$label-font-sizing: rem-calc(11) !default;
$label-font-weight: $font-weight-normal !default;
- $label-font-color: #333 !default;
- $label-font-color-alt: #fff !default;
+ $label-font-color: $oil !default;
+ $label-font-color-alt: $white !default;
$label-font-family: $body-font-family !default;
//
@@ @@ -97,8 +97,10 @@ $label-font-family: $body-font-family !default;
&.round { @include label-style(false, $radius:1000px); }
&.alert { @include label-style($alert-color); }
+ &.warning { @include label-style($warning-color); }
&.success { @include label-style($success-color); }
&.secondary { @include label-style($secondary-color); }
+ &.info { @include label-style($info-color); }
}
}
}
generators/foundation5/public/stylesheets/foundation/components/_magellan.scss +1 -1
@@ @@ -9,7 +9,7 @@
//
$include-html-magellan-classes: $include-html-classes !default;
- $magellan-bg: #fff !default;
+ $magellan-bg: $white !default;
$magellan-padding: 10px !default;
@include exports("magellan") {
generators/foundation5/public/stylesheets/foundation/components/_offcanvas.scss +190 -33
@@ @@ -8,10 +8,11 @@
// Off Canvas Tab Bar Variables
$include-html-off-canvas-classes: $include-html-classes !default;
- $tabbar-bg: #333 !default;
+ $tabbar-bg: $oil !default;
$tabbar-height: rem-calc(45) !default;
+ $tabbar-icon-width: $tabbar-height !default;
$tabbar-line-height: $tabbar-height !default;
- $tabbar-color: #fff !default;
+ $tabbar-color: $white !default;
$tabbar-middle-padding: 0 rem-calc(10) !default;
// Off Canvas Divider Styles
@@ @@ -20,50 +21,57 @@ $tabbar-right-section-border: $tabbar-left-section-border;
// Off Canvas Tab Bar Headers
- $tabbar-header-color: #fff !default;
+ $tabbar-header-color: $white !default;
$tabbar-header-weight: $font-weight-bold !default;
$tabbar-header-line-height: $tabbar-height !default;
$tabbar-header-margin: 0 !default;
// Off Canvas Menu Variables
$off-canvas-width: rem-calc(250) !default;
- $off-canvas-bg: #333 !default;
+ $off-canvas-bg: $oil !default;
+ $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%) !default;
// Off Canvas Menu List Variables
$off-canvas-label-padding: 0.3rem rem-calc(15) !default;
- $off-canvas-label-color: #999 !default;
+ $off-canvas-label-color: $aluminum !default;
$off-canvas-label-text-transform: uppercase !default;
$off-canvas-label-font-size: rem-calc(12) !default;
$off-canvas-label-font-weight: $font-weight-bold !default;
- $off-canvas-label-bg: #444 !default;
+ $off-canvas-label-bg: $tuatara !default;
$off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default;
$off-canvas-label-border-bottom: none !default;
$off-canvas-label-margin:0 !default;
$off-canvas-link-padding: rem-calc(10, 15) !default;
- $off-canvas-link-color: rgba(#FFF, 0.7) !default;
+ $off-canvas-link-color: rgba($white, 0.7) !default;
$off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%) !default;
+ $off-canvas-back-bg: #444 !default;
+ $off-canvas-back-border-top: $off-canvas-label-border-top !default;
+ $off-canvas-back-border-bottom: $off-canvas-label-border-bottom !default;
+ $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%) !default;
+ $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default;
+ $off-canvas-back-hover-border-bottom: none !default;
// Off Canvas Menu Icon Variables
- $tabbar-menu-icon-color: #FFF !default;
+ $tabbar-menu-icon-color: $white !default;
$tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%) !default;
$tabbar-menu-icon-text-indent: rem-calc(35) !default;
- $tabbar-menu-icon-width: $tabbar-height !default;
+ $tabbar-menu-icon-width: $tabbar-icon-width !default;
$tabbar-menu-icon-height: $tabbar-height !default;
$tabbar-menu-icon-padding: 0 !default;
$tabbar-hamburger-icon-width: rem-calc(16) !default;
$tabbar-hamburger-icon-left: false !default;
$tabbar-hamburger-icon-top: false !default;
- $tapbar-hamburger-icon-thickness: 1px !default;
- $tapbar-hamburger-icon-gap: 6px !default;
+ $tabbar-hamburger-icon-thickness: 1px !default;
+ $tabbar-hamburger-icon-gap: 6px !default;
// Off Canvas Back-Link Overlay
$off-canvas-overlay-transition: background 300ms ease !default;
$off-canvas-overlay-cursor: pointer !default;
- $off-canvas-overlay-box-shadow: -4px 0 4px rgba(#000, 0.5), 4px 0 4px rgba(#000, 0.5) !default;
- $off-canvas-overlay-background: rgba(#FFF, 0.2) !default;
- $off-canvas-overlay-background-hover: rgba(#FFF, 0.05) !default;
+ $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5) !default;
+ $off-canvas-overlay-background: rgba($white, 0.2) !default;
+ $off-canvas-overlay-background-hover: rgba($white, 0.05) !default;
// Transition Variables
$menu-slide: "transform 500ms ease" !default;
@@ @@ -99,18 +107,21 @@ $menu-slide: "transform 500ms ease" !default;
top: 0;
bottom: 0;
position: absolute;
+ overflow-x: hidden;
overflow-y: auto;
background: $off-canvas-bg;
z-index: 1001;
box-sizing: content-box;
transition: transform 500ms ease 0s;
-webkit-overflow-scrolling: touch;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+
@if $position == left {
- @include translate3d(-100%,0,0);
+ @include translate3d(-100.5%,0,0);
left: 0;
}
@if $position == right {
- @include translate3d(100%,0,0);
+ @include translate3d(100.5%,0,0);
right: 0;
}
}
@@ @@ -147,9 +158,9 @@ $menu-slide: "transform 500ms ease" !default;
background: $tabbar-bg;
color: $tabbar-color;
height: $tabbar-height;
- line-height: $tabbar-height;
+ line-height: $tabbar-line-height;
- // make sure it's below the .exit-offcanvas link
+ // make sure it's below the .exit-off-canvas link
position: relative;
// z-index: 999;
@@ @@ -166,7 +177,7 @@ $menu-slide: "transform 500ms ease" !default;
// SMALL SECTIONS
// These are small sections on the left and right that contain the off-canvas toggle buttons;
@mixin tabbar-small-section($position) {
- width: $tabbar-height;
+ width: $tabbar-icon-width;
height: $tabbar-height;
position: absolute;
top: 0;
@@ @@ -188,20 +199,22 @@ $menu-slide: "transform 500ms ease" !default;
text-align: center;
height: $tabbar-height;
top: 0;
- @media #{$medium-up} { text-align: left; }
+ @media #{$medium-up} {
+ &.left, &.right { text-align: left; }
+ }
// still need to make these non-presentational
&.left {
left: 0;
- right: $tabbar-height;
+ right: $tabbar-icon-width;
}
&.right {
- left: $tabbar-height;
+ left: $tabbar-icon-width;
right: 0;
}
&.middle {
- left: $tabbar-height;
- right: $tabbar-height;
+ left: $tabbar-icon-width;
+ right: $tabbar-icon-width;
}
}
@@ @@ -230,8 +243,10 @@ $menu-slide: "transform 500ms ease" !default;
padding: $off-canvas-link-padding;
color: $off-canvas-link-color;
border-bottom: $off-canvas-link-border-bottom;
- &:hover { background: scale-color($tabbar-bg, $lightness: -30%); }
transition: background 300ms ease;
+ &:hover {
+ background: $off-canvas-bg-hover;
+ }
}
}
@@ @@ -284,8 +299,8 @@ $menu-slide: "transform 500ms ease" !default;
// This is a little bonus. You don't need it for off canvas to work. Mixins to be written in the future.
.tab-bar .menu-icon {
text-indent: $tabbar-menu-icon-text-indent;
- width: $tabbar-height;
- height: $tabbar-height;
+ width: $tabbar-menu-icon-width;
+ height: $tabbar-menu-icon-height;
display: block;
padding: $tabbar-menu-icon-padding;
color: $tabbar-menu-icon-color;
@@ @@ -298,12 +313,12 @@ $menu-slide: "transform 500ms ease" !default;
// $width - Width of hamburger icon in rem Default: $tabbar-hamburger-icon-width.
// $left - If false, icon will be centered horizontally || explicitly set value in rem Default: $tabbar-hamburger-icon-left= False
// $top - If false, icon will be centered vertically || explicitly set value in rem Default: = False
- // $thickness - thickness of lines in hamburger icon, set value in px Default: $tapbar-hamburger-icon-thickness = 1px
- // $gap - spacing between the lines in hamburger icon, set value in px Default: $tapbar-hamburger-icon-gap = 6px
+ // $thickness - thickness of lines in hamburger icon, set value in px Default: $tabbar-hamburger-icon-thickness = 1px
+ // $gap - spacing between the lines in hamburger icon, set value in px Default: $tabbar-hamburger-icon-gap = 6px
// $color - icon color Default: $tabbar-menu-icon-color
// $hover-color - icon color when hovered Default: $tabbar-menu-icon-hover
// $offcanvas - Set to true
- @include hamburger($tabbar-hamburger-icon-width, $tabbar-hamburger-icon-left, $tabbar-hamburger-icon-top, $tapbar-hamburger-icon-thickness, $tapbar-hamburger-icon-gap, $tabbar-menu-icon-color, $tabbar-menu-icon-hover, true)
+ @include hamburger($tabbar-hamburger-icon-width, $tabbar-hamburger-icon-left, $tabbar-hamburger-icon-top, $tabbar-hamburger-icon-thickness, $tabbar-hamburger-icon-gap, $tabbar-menu-icon-color, $tabbar-menu-icon-hover, true)
}
.left-off-canvas-menu { @include off-canvas-menu($position: left); }
@@ @@ -337,10 +352,29 @@ $menu-slide: "transform 500ms ease" !default;
transform: none;
z-index: 1003;
}
- .exit-offcanvas-menu {
- @include back-link;
- z-index: 1002;
+ .exit-off-canvas { @include back-link; }
+ }
+ .offcanvas-overlap-left {
+ .right-off-canvas-menu {
+ -ms-transform: none;
+ -webkit-transform: none;
+ -moz-transform: none;
+ -o-transform: none;
+ transform: none;
+ z-index: 1003;
}
+ .exit-off-canvas { @include back-link; }
+ }
+ .offcanvas-overlap-right {
+ .left-off-canvas-menu {
+ -ms-transform: none;
+ -webkit-transform: none;
+ -moz-transform: none;
+ -o-transform: none;
+ transform: none;
+ z-index: 1003;
+ }
+ .exit-off-canvas { @include back-link; }
}
// Older browsers
@@ @@ -354,3 +388,126 @@ $menu-slide: "transform 500ms ease" !default;
}
}
+
+ //
+ // Off-Canvas Submenu Classes
+ //
+ @mixin off-canvas-submenu($position) {
+ @include kill-flicker;
+ * { @include kill-flicker; }
+ width: $off-canvas-width;
+ top: 0;
+ bottom: 0;
+ position: absolute;
+ margin: 0;
+ overflow-x: hidden;
+ overflow-y: auto;
+ background: $off-canvas-bg;
+ z-index: 1002;
+ box-sizing: content-box;
+ -webkit-overflow-scrolling: touch;
+ @if $position == left {
+ @include translate3d(-100%,0,0);
+ left: 0;
+ }
+ @if $position == right {
+ @include translate3d(100%,0,0);
+ right: 0;
+ }
+ -webkit-transition: -webkit-#{$menu-slide};
+ -moz-transition: -moz-#{$menu-slide};
+ -ms-transition: -ms-#{$menu-slide};
+ -o-transition: -o-#{$menu-slide};
+ transition: #{$menu-slide};
+
+ //back button style like label
+ .back > a {
+ padding: $off-canvas-label-padding;
+ color: $off-canvas-label-color;
+ text-transform: $off-canvas-label-text-transform;
+ font-weight: $off-canvas-label-font-weight;
+ background: $off-canvas-back-bg;
+ border-top: $off-canvas-back-border-top;
+ border-bottom: $off-canvas-back-border-bottom;
+ &:hover {
+ background: $off-canvas-back-hover-bg;
+ border-top: $off-canvas-back-hover-border-top;
+ border-bottom: $off-canvas-back-hover-border-bottom;
+ }
+ margin: $off-canvas-label-margin;
+ @if $position == right {
+ @if $text-direction == rtl {
+ &:before {
+ @include icon-double-arrows($position: left);
+ }
+ } @else {
+ &:after {
+ @include icon-double-arrows($position: right);
+ }
+ }
+ }
+ @if $position == left {
+ @if $text-direction == rtl {
+ &:after {
+ @include icon-double-arrows($position: right);
+ }
+ } @else {
+ &:before {
+ @include icon-double-arrows($position: left);
+ }
+ }
+ }
+ }
+ }
+ //Left double angle quote or Right double angle quote chars
+ @mixin icon-double-arrows ($position){
+ @if $position == left {
+ content: "\AB";
+ @if $text-direction == rtl {
+ margin-left: 0.5rem;
+ } @else {
+ margin-right: 0.5rem;
+ }
+ }
+ @if $position == right {
+ content: "\BB";
+ @if $text-direction == rtl {
+ margin-right: 0.5rem;
+ } @else {
+ margin-left: 0.5rem;
+ }
+ }
+ display: inline;
+ }
+
+ @if $include-html-off-canvas-classes {
+ .left-submenu {
+ @include off-canvas-submenu($position: left);
+ &.move-right {
+ @include translate3d(0%,0,0);
+ }
+ }
+
+ .right-submenu {
+ @include off-canvas-submenu($position: right);
+ &.move-left {
+ @include translate3d(0%,0,0);
+ }
+ }
+
+ @if $text-direction == rtl {
+ .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before {
+ @include icon-double-arrows($position: left);
+ }
+ .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after {
+ @include icon-double-arrows($position: right);
+ }
+ } @else {
+ .left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after {
+ @include icon-double-arrows($position: right);
+ }
+ .right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before {
+ @include icon-double-arrows($position: left);
+ }
+ }
+ }
generators/foundation5/public/stylesheets/foundation/components/_orbit.scss +92 -147
@@ @@ -11,7 +11,7 @@ $include-html-orbit-classes: $include-html-classes !default;
// We use these to control the caption styles
$orbit-container-bg: none !default;
$orbit-caption-bg: rgba(51,51,51, 0.8) !default;
- $orbit-caption-font-color: #fff !default;
+ $orbit-caption-font-color: $white !default;
$orbit-caption-font-size: rem-calc(14) !default;
$orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under"
$orbit-caption-padding: rem-calc(10 14) !default;
@@ @@ -20,27 +20,23 @@ $orbit-caption-height: auto !default;
// We use these to control the left/right nav styles
$orbit-nav-bg: transparent !default;
$orbit-nav-bg-hover: rgba(0,0,0,0.3) !default;
- $orbit-nav-arrow-color: #fff !default;
- $orbit-nav-arrow-color-hover: #fff !default;
+ $orbit-nav-arrow-color: $white !default;
+ $orbit-nav-arrow-color-hover: $white !default;
// We use these to control the timer styles
$orbit-timer-bg: rgba(255,255,255,0.3) !default;
$orbit-timer-show-progress-bar: true !default;
// We use these to control the bullet nav styles
- $orbit-bullet-nav-color: #ccc !default;
- $orbit-bullet-nav-color-active: #999 !default;
+ $orbit-bullet-nav-color: $iron !default;
+ $orbit-bullet-nav-color-active: $aluminum !default;
$orbit-bullet-radius: rem-calc(9) !default;
// We use these to controls the style of slide numbers
$orbit-slide-number-bg: rgba(0,0,0,0) !default;
- $orbit-slide-number-font-color: #fff !default;
+ $orbit-slide-number-font-color: $white !default;
$orbit-slide-number-padding: rem-calc(5) !default;
- // We use these to controls the css animation
- $orbit-animation-speed: 500ms !default;
- $orbit-animation-ease: ease-in-out !default;
-
// Graceful Loading Wrapper and preloader
$wrapper-class: "slideshow-wrapper" !default;
$preloader-class: "preloader" !default;
@@ @@ -50,33 +46,25 @@ $orbit-nav-hide-for-small: true !default;
$orbit-bullet-hide-for-small: true !default;
$orbit-timer-hide-for-small: true !default;
- // CSS Transform
- // This function is needed in order to put in all of the browser prefixes.
- // The normal tranform attribute still does not work properly across all browsers.
- // In order to receive the transitionEnd events then you will still need to use the vendor prefixes
- @mixin translate3d($x,$y,$z) {
- -ms-transform:translate($x,$y);
-
- -webkit-transform: translate3d($x,$y,$z);
- -moz-transform: translate3d($x,$y,$z);
- -o-transform: translate3d($x,$y,$z);
- transform: translate3d($x,$y,$z);
- }
-
- @mixin rotate($d) {
- -webkit-transform: rotate($d);
- -moz-transform: rotate($d);
- -ms-transform: rotate($d);
- -o-transform: rotate($d);
- transform: rotate($d);
- }
@include exports("orbit") {
@if $include-html-orbit-classes {
+ @-webkit-keyframes rotate {
+ from { -webkit-transform: rotate(0deg); }
+ to { -webkit-transform: rotate(360deg); }
+ }
+ @-moz-keyframes rotate {
+ from { -moz-transform: rotate(0deg); }
+ to { -moz-transform: rotate(360deg); }
+ }
+ @-o-keyframes rotate {
+ from { -o-transform: rotate(0deg); }
+ to { -o-transform: rotate(360deg); }
+ }
@keyframes rotate {
- from { @include rotate(0deg); }
- to { @include rotate(360deg); }
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
}
/* Orbit Graceful Loading */
@@ @@ -103,6 +91,9 @@ $orbit-timer-hide-for-small: true !default;
.orbit-caption { display: block; }
}
+ .orbit-bullets li {
+ display: inline-block;
+ }
}
// Orbit preloader
@@ @@ -116,7 +107,7 @@ $orbit-timer-hide-for-small: true !default;
margin-top: -20px;
margin-left: -20px;
border: solid 3px;
- border-color: #555 #fff;
+ border-color: $charcoal $white;
@include radius(1000px);
animation-name: rotate;
animation-duration: 1.5s;
@@ @@ -125,6 +116,7 @@ $orbit-timer-hide-for-small: true !default;
}
}
+
.orbit-container {
overflow: hidden;
width: 100%;
@@ @@ -142,61 +134,24 @@ $orbit-timer-hide-for-small: true !default;
img { display: block; max-width: 100%; }
- &.fade > li {
- opacity: 0;
- transition: opacity $orbit-animation-speed $orbit-animation-ease;
- @include translate3d(0,0,0);
- &.animate-in {
- opacity: 1;
- z-index: 20;
- transition: opacity $orbit-animation-speed $orbit-animation-ease;
- }
- &.animate-out {
- z-index: 10;
- transition: opacity $orbit-animation-speed $orbit-animation-ease;
- }
- }
-
- &.swipe-next > li {
- @include translate3d(100%,0,0);
- &.animate-in {
- @include translate3d(0,0,0);
- transition-duration:$orbit-animation-speed;
- }
- &.animate-out {
- @include translate3d(-100%,0,0);
- transition-duration:$orbit-animation-speed;
- }
- }
-
- &.swipe-prev > li {
- @include translate3d(-100%,0,0);
- &.animate-in {
- @include translate3d(0,0,0);
- transition-duration:$orbit-animation-speed;
- }
- &.animate-out {
- @include translate3d(100%,0,0);
- transition-duration:$orbit-animation-speed;
- }
- }
-
- > li {
+ &>* {
position: absolute;
top: 0;
- left: 0;
width: 100%;
- @include translate3d(100%,0,0);
-
- > a { display: block; }
+ @if $text-direction == rtl {
+ margin-right: 100%;
+ }
+ @else {
+ margin-left: 100%;
+ }
- &.active {
- opacity: 1;
- // "relative" positioning is required for variable height of children.
- position:relative;
- top: 0;
- left: 0;
- @include translate3d(0,0,0);
+ &:first-child {
+ @if $text-direction == rtl {
+ margin-right: 0%;
+ }
+ @else {
+ margin-left: 0%;
+ }
}
.orbit-caption {
@@ @@ -221,7 +176,7 @@ $orbit-timer-hide-for-small: true !default;
top: 10px;
#{$default-float}: 10px;
font-size: 12px;
- span { font-weight: $font-weight-bold; padding: $orbit-slide-number-padding;}
+ span { font-weight: 700; padding: $orbit-slide-number-padding;}
color: $orbit-slide-number-font-color;
background: $orbit-slide-number-bg;
z-index: 10;
@@ @@ -243,8 +198,6 @@ $orbit-timer-hide-for-small: true !default;
position: relative;
right: 20px;
top: 5px;
- } @else {
- display:none; // This is used by the Javascript to not create a handler.
}
}
@@ @@ -256,11 +209,11 @@ $orbit-timer-hide-for-small: true !default;
#{$opposite-direction}: 0;
width: 11px;
height: 14px;
- border: solid 4px #fff;
+ border: solid 4px $white;
border-top: none;
border-bottom: none;
}
-
+
// Pause button
&.paused {
& > span {
@@ @@ -270,16 +223,16 @@ $orbit-timer-hide-for-small: true !default;
height: 14px;
border: inset 8px;
border-left-style: solid;
- @include rotate(180deg);
- border-color: transparent #fff transparent transparent;
- &.dark {
- border-color: transparent #333 transparent transparent;
+ border-color: transparent;
+ border-left-color: $white;
+ &.dark {
+ border-left-color: $oil;
}
}
}
}
-
-
+
+
&:hover .orbit-timer > span { display: block; }
@@ @@ -333,37 +286,37 @@ $orbit-timer-hide-for-small: true !default;
border-#{$default-float}-color: $orbit-nav-arrow-color-hover;
}
}
+ }
- .orbit-bullets-container { text-align: center; }
- .orbit-bullets {
- margin: 0 auto 30px auto;
- overflow: hidden;
- position: relative;
- top: 10px;
+ .orbit-bullets-container { text-align: center; }
+ .orbit-bullets {
+ margin: 0 auto 30px auto;
+ overflow: hidden;
+ position: relative;
+ top: 10px;
+ float: none;
+ text-align: center;
+ display: block;
+
+ li {
+ cursor:pointer;
+ display: inline-block;
+ width: $orbit-bullet-radius;
+ height: $orbit-bullet-radius;
+ background: $orbit-bullet-nav-color;
+ // float: $default-float;
float: none;
- text-align: center;
- display: block;
-
- li {
- display: inline-block;
- width: $orbit-bullet-radius;
- height: $orbit-bullet-radius;
- background: $orbit-bullet-nav-color;
- // float: $default-float;
- float: none;
- margin-#{$opposite-direction}: 6px;
- @include radius(1000px);
-
- &.active {
- background: $orbit-bullet-nav-color-active;
- }
+ margin-#{$opposite-direction}: 6px;
+ @include radius(1000px);
- &:last-child { margin-#{$opposite-direction}: 0; }
+ &.active {
+ background: $orbit-bullet-nav-color-active;
}
+
+ &:last-child { margin-#{$opposite-direction}: 0; }
}
}
-
.touch {
.orbit-container {
.orbit-prev,
@@ @@ -388,36 +341,28 @@ $orbit-timer-hide-for-small: true !default;
}
@media #{$small-only} {
- .orbit-stack-on-small {
-
- .orbit-slides-container {height: auto !important;}
- .orbit-slides-container > * {
- position: relative !important;
- margin-left: 0% !important;
- opacity: 1 !important;
- -webkit-transform: none !important;
- -moz-transform: none !important;
- -ms-transform: none !important;
- -o-transform: none !important;
- transform: none !important;
- transition: none !important;
- }
-
- @if $orbit-timer-hide-for-small {
- .orbit-timer{display: none;}
- }
- @if $orbit-nav-hide-for-small {
- .orbit-next,.orbit-prev{display: none;}
- }
- @if $orbit-bullet-hide-for-small {
- .orbit-bullets{display: none;}
- }
+ .orbit-stack-on-small {
+ .orbit-slides-container {height: auto !important;}
+ .orbit-slides-container > * {
+ position: relative;
+ margin:0% !important;
+ opacity:1 !important;
+ }
- .orbit-slide-number {
- display: none;
- }
+ .orbit-slide-number {
+ display: none;
}
- }
+ }
+ @if $orbit-timer-hide-for-small {
+ .orbit-timer{display: none;}
+ }
+ @if $orbit-nav-hide-for-small {
+ .orbit-next,.orbit-prev{display: none;}
+ }
+ @if $orbit-bullet-hide-for-small {
+ .orbit-bullets{display: none;}
+ }
+ }
}
}
generators/foundation5/public/stylesheets/foundation/components/_pagination.scss +22 -10
@@ @@ -16,23 +16,23 @@ $pagination-margin: rem-calc(-5) !default;
// We use these to set the list-item properties
$pagination-li-float: $default-float !default;
$pagination-li-height: rem-calc(24) !default;
- $pagination-li-font-color: #222 !default;
+ $pagination-li-font-color: $jet !default;
$pagination-li-font-size: rem-calc(14) !default;
$pagination-li-margin: rem-calc(5) !default;
// We use these for the pagination anchor links
$pagination-link-pad: rem-calc(1 10 1) !default;
- $pagination-link-font-color: #999 !default;
- $pagination-link-active-bg: scale-color(#fff, $lightness: -10%) !default;
+ $pagination-link-font-color: $aluminum !default;
+ $pagination-link-active-bg: scale-color($white, $lightness: -10%) !default;
// We use these for disabled anchor links
$pagination-link-unavailable-cursor: default !default;
- $pagination-link-unavailable-font-color: #999 !default;
+ $pagination-link-unavailable-font-color: $aluminum !default;
$pagination-link-unavailable-bg-active: transparent !default;
// We use these for currently selected anchor links
$pagination-link-current-background: $primary-color !default;
- $pagination-link-current-font-color: #fff !default;
+ $pagination-link-current-font-color: $white !default;
$pagination-link-current-font-weight: $font-weight-bold !default;
$pagination-link-current-cursor: default !default;
$pagination-link-current-active-bg: $primary-color !default;
@@ @@ -48,12 +48,16 @@ $pagination-link-current-active-bg: $primary-color !default;
// @mixins
// Style unavailable list items
@mixin pagination-unavailable-item {
- a {
+ a, button {
cursor: $pagination-link-unavailable-cursor;
color: $pagination-link-unavailable-font-color;
}
&:hover a,
- & a:focus { background: $pagination-link-unavailable-bg-active; }
+ & a:focus,
+
+ &:hover button,
+ & button:focus
+ { background: $pagination-link-unavailable-bg-active; }
}
// @mixins
// Style the current list item. Do not assume that the current item has
@@ @@ -61,7 +65,7 @@ $pagination-link-current-active-bg: $primary-color !default;
// $has-anchor - Default: true, Options: false
@mixin pagination-current-item($has-anchor: true) {
@if $has-anchor {
- a {
+ a, button {
background: $pagination-link-current-background;
color: $pagination-link-current-font-color;
font-weight: $pagination-link-current-font-weight;
@@ @@ -103,15 +107,23 @@ $pagination-link-current-active-bg: $primary-color !default;
font-size: $pagination-li-font-size;
margin-#{$default-float}: $pagination-li-margin;
- a {
+ a, button {
display: block;
padding: $pagination-link-pad;
color: $pagination-link-font-color;
+ background: none;
@include radius;
+ font-weight: normal;
+ font-size: 1em;
+ line-height: inherit;
+ @include single-transition(background-color);
}
&:hover a,
- a:focus { background: $pagination-link-active-bg; }
+ a:focus,
+ &:hover button,
+ button:focus
+ { background: $pagination-link-active-bg; }
@if $use-default-classes {
&.unavailable { @include pagination-unavailable-item(); }
generators/foundation5/public/stylesheets/foundation/components/_panels.scss +12 -7
@@ @@ -10,7 +10,7 @@
$include-html-panel-classes: $include-html-classes !default;
// We use these to control the background and border styles
- $panel-bg: scale-color(#fff, $lightness: -5%) !default;
+ $panel-bg: scale-color($white, $lightness: -5%) !default;
$panel-border-style: solid !default;
$panel-border-size: 1px !default;
@@ @@ -23,8 +23,8 @@ $panel-margin-bottom: rem-calc(20) !default;
$panel-padding: rem-calc(20) !default;
// We use these to set default font colors
- $panel-font-color: #333 !default;
- $panel-font-color-alt: #fff !default;
+ $panel-font-color: $oil !default;
+ $panel-font-color-alt: $white !default;
$panel-header-adjust: true !default;
$callout-panel-link-color: $primary-color !default;
@@ @@ -32,7 +32,7 @@ $callout-panel-link-color: $primary-color !default;
// @mixins
//
// We use this mixin to create panels.
- // $bg - Sets the panel background color. Default: $panel-pg || scale-color(#fff, $lightness: -5%) !default
+ // $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $lightness: -5%) !default
// $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20)
// $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true
@mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) {
@@ @@ -47,6 +47,8 @@ $callout-panel-link-color: $primary-color !default;
padding: $padding;
background: $bg;
+ @if $bg-lightness >= 50% { color: $panel-font-color; }
+ @else { color: $panel-font-color-alt; }
// Respect the padding, fool.
&>:first-child { margin-top: 0; }
@@ @@ -54,9 +56,12 @@ $callout-panel-link-color: $primary-color !default;
@if $adjust {
// We set the font color based on the darkness of the bg.
- @if $bg-lightness >= 50% and $bg == blue { h1,h2,h3,h4,h5,h6,p,li { color: $panel-font-color-alt; } }
- @else if $bg-lightness >= 50% { h1,h2,h3,h4,h5,h6,p,li { color: $panel-font-color; } }
- @else { h1,h2,h3,h4,h5,h6,p,li { color: $panel-font-color-alt; } }
+ @if $bg-lightness >= 50% {
+ h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color; }
+ }
+ @else {
+ h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color-alt; }
+ }
// reset header line-heights for panels
h1,h2,h3,h4,h5,h6 {
generators/foundation5/public/stylesheets/foundation/components/_pricing-tables.scss +11 -11
@@ @@ -10,50 +10,50 @@
$include-html-pricing-classes: $include-html-classes !default;
// We use this to control the border color
- $price-table-border: solid 1px #ddd !default;
+ $price-table-border: solid 1px $gainsboro !default;
// We use this to control the bottom margin of the pricing table
$price-table-margin-bottom: rem-calc(20) !default;
// We use these to control the title styles
- $price-title-bg: #333 !default;
+ $price-title-bg: $oil !default;
$price-title-padding: rem-calc(15 20) !default;
$price-title-align: center !default;
- $price-title-color: #eee !default;
+ $price-title-color: $smoke !default;
$price-title-weight: $font-weight-normal !default;
$price-title-size: rem-calc(16) !default;
$price-title-font-family: $body-font-family !default;
// We use these to control the price styles
- $price-money-bg: #f6f6f6 !default;
+ $price-money-bg: $vapor !default;
$price-money-padding: rem-calc(15 20) !default;
$price-money-align: center !default;
- $price-money-color: #333 !default;
+ $price-money-color: $oil !default;
$price-money-weight: $font-weight-normal !default;
$price-money-size: rem-calc(32) !default;
$price-money-font-family: $body-font-family !default;
// We use these to control the description styles
- $price-bg: #fff !default;
- $price-desc-color: #777 !default;
+ $price-bg: $white !default;
+ $price-desc-color: $monsoon !default;
$price-desc-padding: rem-calc(15) !default;
$price-desc-align: center !default;
$price-desc-font-size: rem-calc(12) !default;
$price-desc-weight: $font-weight-normal !default;
$price-desc-line-height: 1.4 !default;
- $price-desc-bottom-border: dotted 1px #ddd !default;
+ $price-desc-bottom-border: dotted 1px $gainsboro !default;
// We use these to control the list item styles
- $price-item-color: #333 !default;
+ $price-item-color: $oil !default;
$price-item-padding: rem-calc(15) !default;
$price-item-align: center !default;
$price-item-font-size: rem-calc(14) !default;
$price-item-weight: $font-weight-normal !default;
- $price-item-bottom-border: dotted 1px #ddd !default;
+ $price-item-bottom-border: dotted 1px $gainsboro !default;
// We use these to control the CTA area styles
- $price-cta-bg: #fff !default;
+ $price-cta-bg: $white !default;
$price-cta-align: center !default;
$price-cta-padding: rem-calc(20 20 0) !default;
generators/foundation5/public/stylesheets/foundation/components/_progress-bars.scss +2 -2
@@ @@ -11,10 +11,10 @@ $include-html-media-classes: $include-html-classes !default;
// We use this to set the progress bar height
$progress-bar-height: rem-calc(25) !default;
- $progress-bar-color: #f6f6f6 !default;
+ $progress-bar-color: $vapor !default;
// We use these to control the border styles
- $progress-bar-border-color: scale-color(#fff, $lightness: 20%) !default;
+ $progress-bar-border-color: scale-color($white, $lightness: 20%) !default;
$progress-bar-border-size: 1px !default;
$progress-bar-border-style: solid !default;
$progress-bar-border-radius: $global-radius !default;
generators/foundation5/public/stylesheets/foundation/components/_range-slider.scss +29 -9
@@ @@ -21,10 +21,11 @@ $range-slider-bar-height: rem-calc(16) !default;
$range-slider-bar-border-width: 1px !default;
$range-slider-bar-border-style: solid !default;
- $range-slider-bar-border-color: #ddd !default;
+ $range-slider-bar-border-color: $gainsboro !default;
$range-slider-radius: $global-radius !default;
$range-slider-round: $global-rounded !default;
- $range-slider-bar-bg-color: #fafafa !default;
+ $range-slider-bar-bg-color: $ghost !default;
+ $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%) !default;
// Vertical bar styles
$range-slider-vertical-bar-width: rem-calc(16) !default;
@@ @@ -43,6 +44,7 @@ $range-slider-handle-round: $global-rounded !default;
$range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%) !default;
$range-slider-handle-cursor: pointer !default;
+ $range-slider-disabled-opacity: 0.7 !default;
//
// @mixins
@@ @@ -66,14 +68,19 @@ $range-slider-handle-cursor: pointer !default;
@mixin range-slider-bar-style(
$bg: true,
$radius: false,
- $round: false) {
- @if $bg == true { background: $range-slider-bar-bg-color; }
- @if $radius == true { @include radius($range-slider-radius); }
- @if $round == true { @include radius($range-slider-round); }
+ $round: false,
+ $disabled: false) {
+ @if $bg == true { background: $range-slider-bar-bg-color; }
+ @if $radius == true { @include radius($range-slider-radius); }
+ @if $round == true { @include radius($range-slider-round); }
+ @if $disabled == true {
+ cursor: $cursor-default-value;
+ opacity: $range-slider-disabled-opacity;
}
+ }
@mixin range-slider-bar(
- $bg: $range-slider-bar-bg-color,
+ $bg: $range-slider-bar-bg-color,
$radius:false) {
@include range-slider-bar-base;
@include range-slider-bar-style;
@@ @@ -88,14 +95,23 @@ $range-slider-handle-cursor: pointer !default;
height: $range-slider-handle-height;
border: $range-slider-handle-border-width $range-slider-handle-border-style $range-slider-handle-border-color;
cursor: $range-slider-handle-cursor;
+
+ // This removes the 300ms touch delay on Windows 8
+ -ms-touch-action: manipulation;
+ touch-action: manipulation;
}
@mixin range-slider-handle-style(
$bg: true,
$radius: false,
- $round: false) {
+ $round: false,
+ $disabled: false) {
@if $bg == true { background: $range-slider-handle-bg-color; }
@if $radius == true { @include radius($range-slider-radius); }
@if $round == true { @include radius($range-slider-round); }
+ @if $disabled == true {
+ cursor: $cursor-default-value;
+ opacity: $range-slider-disabled-opacity;
+ }
&:hover {
background: $range-slider-handle-bg-hover-color;
}
@@ @@ -133,12 +149,16 @@ $range-slider-handle-cursor: pointer !default;
@include range-slider-bar-style($round:true);
.range-slider-handle { @include range-slider-handle-style($round: true); }
}
+ &.disabled, &[disabled] {
+ @include range-slider-bar-style($disabled:true);
+ .range-slider-handle { @include range-slider-handle-style($disabled: true); }
+ }
}
.range-slider-active-segment {
display: inline-block;
position: absolute;
height: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
- background: scale-color($secondary-color, $lightness: -1%);
+ background: $range-slider-active-segment-bg-color;
}
.range-slider-handle {
@include range-slider-handle-base;
generators/foundation5/public/stylesheets/foundation/components/_reveal-new.scss +0 -0
generators/foundation5/public/stylesheets/foundation/components/_reveal.scss +62 -56
@@ @@ -3,6 +3,7 @@
// Licensed under MIT Open Source
@import "global";
+ @import "grid";
//
// @name _reveal.scss
@@ @@ -12,21 +13,22 @@
$include-html-reveal-classes: $include-html-classes !default;
// We use these to control the style of the reveal overlay.
- $reveal-overlay-bg: rgba(#000, .45) !default;
- $reveal-overlay-bg-old: #000 !default;
+ $reveal-overlay-bg: rgba($black, .45) !default;
+ $reveal-overlay-bg-old: $black !default;
// We use these to control the style of the modal itself.
- $reveal-modal-bg: #fff !default;
+ $reveal-modal-bg: $white !default;
$reveal-position-top: rem-calc(100) !default;
$reveal-default-width: 80% !default;
+ $reveal-max-width: $row-width !default;
$reveal-modal-padding: rem-calc(20) !default;
- $reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
+ $reveal-box-shadow: 0 0 10px rgba($black,.4) !default;
// We use these to style the reveal close button
$reveal-close-font-size: rem-calc(40) !default;
$reveal-close-top: rem-calc(8) !default;
$reveal-close-side: rem-calc(11) !default;
- $reveal-close-color: #aaa !default;
+ $reveal-close-color: $base !default;
$reveal-close-weight: $font-weight-bold !default;
// We use this to set the default radius used throughout the core.
@@ @@ -36,7 +38,7 @@ $reveal-round: $global-rounded !default;
// We use these to control the modal border
$reveal-border-style: solid !default;
$reveal-border-width: 1px !default;
- $reveal-border-color: #666 !default;
+ $reveal-border-color: $steel !default;
$reveal-modal-class: "reveal-modal" !default;
$close-reveal-modal-class: "close-reveal-modal" !default;
@@ @@ -46,15 +48,16 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
//
// We use this to create the reveal background overlay styles
- @mixin reveal-bg {
+ @mixin reveal-bg( $include-z-index-value: true ) {
position: fixed;
- height: 100%;
- width: 100%;
- background: $reveal-overlay-bg-old;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future.
background: $reveal-overlay-bg;
- z-index: 99;
+ z-index: if( $include-z-index-value, 1004, auto );
display: none;
- top: 0;
#{$default-float}: 0;
}
@@ @@ -63,44 +66,44 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
// $base-style - Provides reveal base styles, can be set to false to override. Default: true, Options: false
// $width - Sets reveal width Default: $reveal-default-width || 80%
//
- @mixin reveal-modal-base(
- $base-style:true,
- $width:$reveal-default-width) {
+ @mixin reveal-modal-base( $base-style: true, $width:$reveal-default-width, $max-width:$reveal-max-width, $border-radius: $reveal-radius) {
@if $base-style {
visibility: hidden;
display: none;
position: absolute;
- z-index: 100;
+ z-index: 1005;
width: 100vw;
top:0;
+ border-radius: $border-radius;
#{$default-float}: 0;
+
@media #{$small-only} {
min-height:100vh;
}
- @media #{$medium-up} {
- #{$default-float}: 50%;
- }
// Make sure rows don't have a min-width on them
- .column,
- .columns { min-width: 0; }
+ .column, .columns { min-width: 0; }
// Get rid of margin from first and last element inside modal
& > :first-child { margin-top: 0; }
+
& > :last-child { margin-bottom: 0; }
}
@if $width {
@media #{$medium-up} {
- margin-#{$default-float}: -($width / 2);
width: $width;
+ max-width: $max-width;
+ left: 0;
+ right: 0;
+ margin: 0 auto;
}
}
}
// We use this to style the reveal modal defaults
//
- // $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || #fff
+ // $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || $white
// $padding - Padding to apply to reveal modal. Default: $reveal-modal-padding.
// $border - Choose whether reveal uses a border. Default: true, Options: false
// $border-style - Set reveal border style. Default: $reveal-border-style || solid
@@ @@ -143,7 +146,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
// We use this to create a close button for the reveal modal
//
- // $color - Default: $reveal-close-color || #aaa
+ // $color - Default: $reveal-close-color || $base
@mixin reveal-close($color:$reveal-close-color) {
font-size: $reveal-close-font-size;
line-height: 1;
@@ @@ -161,7 +164,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
// Reveal Modals
.reveal-modal-bg { @include reveal-bg; }
- dialog, .#{$reveal-modal-class} {
+ .#{$reveal-modal-class} {
@include reveal-modal-base;
@include reveal-modal-style(
$bg:$reveal-modal-bg,
@@ @@ -169,48 +172,51 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
$border:true,
$box-shadow:true,
$radius:false,
- $top-offset:$reveal-position-top);
+ $top-offset:$reveal-position-top
+ );
+ @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
+
+ &.radius { @include reveal-modal-style($radius:true); }
+ &.round { @include reveal-modal-style($radius:$reveal-round); }
+ &.collapse { @include reveal-modal-style($padding:0); }
+ &.tiny { @include reveal-modal-base(false, 30%); }
+ &.small { @include reveal-modal-base(false, 40%); }
+ &.medium { @include reveal-modal-base(false, 60%); }
+ &.large { @include reveal-modal-base(false, 70%); }
+ &.xlarge { @include reveal-modal-base(false, 95%); }
+ &.full {
+ @include reveal-modal-base(false, 100vw);
+ top:0;
+ left:0;
+ height:100%;
+ height: 100vh;
+ min-height:100vh;
+ max-width: none !important;
+ margin-left: 0 !important;
+ }
.#{$close-reveal-modal-class} { @include reveal-close; }
}
- dialog[open] {
- display:block;
- visibility: visible;
- }
-
- @media #{$medium-up} {
+ dialog {
+ @extend .#{$reveal-modal-class};
+ display: none;
- dialog, .#{$reveal-modal-class} {
- @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
-
- &.radius { @include reveal-modal-style($radius:true); }
- &.round { @include reveal-modal-style($radius:$reveal-round); }
-
- &.collapse { @include reveal-modal-style($padding:0); }
-
- &.tiny { @include reveal-modal-base(false, 30%); }
- &.small { @include reveal-modal-base(false, 40%); }
- &.medium { @include reveal-modal-base(false, 60%); }
- &.large { @include reveal-modal-base(false, 70%); }
- &.xlarge { @include reveal-modal-base(false, 95%); }
+ &::backdrop, & + .backdrop {
+ @include reveal-bg(false);
}
- dialog, .#{$reveal-modal-class} {
- &.full {
- @include reveal-modal-base(false, 100vw);
- top:0;
- left:0;
- height: 100vh;
- min-height:100vh;
- margin-left: 0 !important;
- }
+ &[open]{
+ display: block;
}
}
- // Reveal Print Styles
+ // Reveal Print Styles: It should be invisible, adds no value being printed.
@media print {
- dialog, .#{$reveal-modal-class} {background: #fff !important;}
+ dialog, .#{$reveal-modal-class} {
+ display: none;
+ background: $white !important;
+ }
}
}
}
generators/foundation5/public/stylesheets/foundation/components/_side-nav.scss +3 -2
@@ @@ -15,7 +15,7 @@ $side-nav-padding: rem-calc(14 0) !default;
// We use these to control list styles.
$side-nav-list-type: none !default;
- $side-nav-list-position: inside !default;
+ $side-nav-list-position: outside !default;
$side-nav-list-margin: rem-calc(0 0 7 0) !default;
// We use these to control link styles.
@@ @@ -40,7 +40,7 @@ $side-nav-heading-text-transform: uppercase !default;
// We use these to control border styles
$side-nav-divider-size: 1px !default;
$side-nav-divider-style: solid !default;
- $side-nav-divider-color: scale-color(#fff, $lightness: 10%) !default;
+ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default;
//
@@ @@ -70,6 +70,7 @@ $side-nav-divider-color: scale-color(#fff, $lightness: 10%) !default;
li {
margin: $side-nav-list-margin;
font-size: $font-size;
+ font-weight: $side-nav-font-weight;
a:not(.button) {
display: block;
generators/foundation5/public/stylesheets/foundation/components/_split-buttons.scss +2 -2
@@ @@ -19,8 +19,8 @@ $include-html-button-classes: $include-html-classes !default;
// We use these to control different shared styles for Split Buttons
$split-button-function-factor: 10% !default;
- $split-button-pip-color: #fff !default;
- $split-button-pip-color-alt: #333 !default;
+ $split-button-pip-color: $white !default;
+ $split-button-pip-color-alt: $oil !default;
$split-button-active-bg-tint: rgba(0,0,0,0.1) !default;
// We use these to control tiny split buttons
generators/foundation5/public/stylesheets/foundation/components/_sub-nav.scss +4 -6
@@ @@ -22,7 +22,7 @@ $sub-nav-list-padding-top: rem-calc(4) !default;
// We use this to control the definition
$sub-nav-font-family: $body-font-family !default;
$sub-nav-font-size: rem-calc(14) !default;
- $sub-nav-font-color: #999 !default;
+ $sub-nav-font-color: $aluminum !default;
$sub-nav-font-weight: $font-weight-normal !default;
$sub-nav-text-decoration: none !default;
$sub-nav-padding: rem-calc(3 16) !default;
@@ @@ -35,7 +35,7 @@ $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%) !d
$sub-nav-active-font-weight: $font-weight-normal !default;
$sub-nav-active-bg: $primary-color !default;
$sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%) !default;
- $sub-nav-active-color: #fff !default;
+ $sub-nav-active-color: $white !default;
$sub-nav-active-padding: $sub-nav-padding !default;
$sub-nav-active-cursor: default !default;
@@ @@ -61,10 +61,8 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
display: block;
width: auto;
overflow: hidden;
- margin: $sub-nav-list-margin;
+ margin-bottom: $sub-nav-list-margin;
padding-top: $sub-nav-list-padding-top;
- margin-#{$opposite-direction}: 0;
- margin-#{$default-float}: rem-calc(-12);
dt {
text-transform: uppercase;
@@ @@ -76,7 +74,7 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
float: $default-float;
display: inline;
margin-#{$default-float}: rem-calc(16);
- margin-bottom: rem-calc(10);
+ margin-bottom: 0;
font-family: $sub-nav-font-family;
font-weight: $sub-nav-font-weight;
font-size: $font-size;
generators/foundation5/public/stylesheets/foundation/components/_switch.scss +0 -294
@@ @@ -1,294 +0,0 @@
- // Foundation by ZURB
- // foundation.zurb.com
- // Licensed under MIT Open Source
-
- @import "global";
-
- //
- // @name
- // @dependencies _global.scss
- //
-
- //
- // @variables
- //
-
- // NOTE: Switches have been deprecated in Foundation 5 and will be removed in the future.
-
- $include-html-form-classes: $include-html-classes !default;
-
- // Controlling border styles and background colors for the switch container
- $switch-border-color: scale-color(#fff, $lightness: -20%) !default;
- $switch-border-style: solid !default;
- $switch-border-width: 1px !default;
- $switch-bg: #fff !default;
-
- // We use these to control the switch heights for our default classes
- $switch-height-tny: 22px !default;
- $switch-height-sml: 28px !default;
- $switch-height-med: 36px !default;
- $switch-height-lrg: 44px !default;
- $switch-bottom-margin: rem-calc(20) !default;
-
- // We use these to control default font sizes for our classes.
- $switch-font-size-tny: 11px !default;
- $switch-font-size-sml: 12px !default;
- $switch-font-size-med: 14px !default;
- $switch-font-size-lrg: 17px !default;
- $switch-label-side-padding: 6px !default;
-
- // We use these to style the switch-paddle
- $switch-paddle-bg: #fff !default;
- $switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%) !default;
- $switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%) !default;
- $switch-paddle-border-width: 1px !default;
- $switch-paddle-border-style: solid !default;
- $switch-paddle-transition-speed: .1s !default;
- $switch-paddle-transition-ease: ease-out !default;
- $switch-positive-color: scale-color($success-color, $lightness: 94%) !default;
- $switch-negative-color: #f5f5f5 !default;
-
- // Outline Style for tabbing through switches
- $switch-label-outline: 1px dotted #888 !default;
-
-
- //
- // @mixins
- //
-
- // We use this mixin to create the base styles for our switch element.
- //
- // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
- // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
- @mixin switch-base(
- $transition-speed:$switch-paddle-transition-speed,
- $transition-ease:$switch-paddle-transition-ease) {
-
- // Default position and structure for switch container.
- position: relative;
- padding: 0;
- display: block;
- overflow: hidden;
- border-style: $switch-border-style;
- border-width: $switch-border-width;
- margin-bottom: $switch-bottom-margin;
-
- // Default label styles for type and transition
- label {
- position: relative;
- #{$default-float}: 0;
- z-index: 2;
- float: $default-float;
- width: 50%;
- height: 100%;
- margin: 0;
- font-weight: $font-weight-bold;
- text-align: $default-float;
-
- // Transition for the switch label to follow paddle
- @include single-transition(all, $transition-speed, $transition-ease);
- }
-
- // So that we don't need to recreate the form with any JS, we use the
- // existing radio button, but we cleverly position and hide it.
- input {
- position: absolute;
- z-index: 3;
- opacity: 0;
- width: 100%;
- height: 100%;
- -moz-appearance: none;
-
- // Hover and focus styles for the paddle
- &:hover,
- &:focus {
- cursor: $cursor-pointer-value;
- }
- }
-
- // The toggle area for radio switches. We call is a paddle.
- span:last-child {
- position: absolute;
- top: -1px;
- #{$default-float}: -1px;
- z-index: 1;
- display: block;
- padding: 0;
- border-width: $switch-paddle-border-width;
- border-style: $switch-paddle-border-style;
-
- // Transition for the switch paddle
- @include single-transition(all, $transition-speed, $transition-ease);
- }
-
- // When a label isn't :checked, we hide it as it slides away.
- input:not(:checked) + label { opacity: 0; }
-
- // Controlling the position of the labels as they are toggled.
- input:checked { display: none !important; }
- input { #{$default-float}: 0; display: block !important; }
-
- // Left Label alignment and position changes, including fixes for while inside a custom form
- input:first-of-type + label,
- input:first-of-type + span + label { #{$default-float}: -50%; }
- input:first-of-type:checked + label,
- input:first-of-type:checked + span + label { #{$default-float}: 0%; }
-
- // Right Label alignment and position changes, including fixes for while inside a custom form
- input:last-of-type + label,
- input:last-of-type + span + label {#{$opposite-direction}: -50%; #{$default-float}: auto; text-align: $opposite-direction; }
- input:last-of-type:checked + label,
- input:last-of-type:checked + span + label { #{$opposite-direction}: 0%; #{$default-float}: auto; }
-
- // Hiding custom form spans since we auto-create them
- span.custom { display: none !important; }
-
- form.custom & .hidden-field {
- margin-left: auto;
- position: absolute;
- visibility: visible;
- }
- }
-
- // We use this mixin to create the size styles for switches.
- //
- // $height - Height (in px) of the switch. Default: $switch-height-med.
- // $font-size - Font size of text in switch. Default: $switch-font-size-med.
- // $line-height - Line height of switch. Default: 2.3rem.
- @mixin switch-size(
- $height: $switch-height-med,
- $font-size: $switch-font-size-med,
- $line-height: 2.3rem) {
-
- height: rem-calc($height);
-
- label {
- padding: rem-calc(0, $switch-label-side-padding);
- line-height: $line-height;
- font-size: rem-calc($font-size);
- }
-
- input {
- // Move the paddle to the right position
- &:first-of-type:checked ~ span:last-child {
- #{$default-float}: 100%;
- margin-#{$default-float}: rem-calc(-$height + 1px);
- }
- }
-
- span:last-child {
- width: rem-calc($height);
- height: rem-calc($height);
- }
-
- }
-
- // We use this mixin to add color and other fanciness to the switches.
- //
- // $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
- // $positive-color - Background color of positive side of switch. Default: $switch-positive-color.
- // $negative-color - Background color of negative side of switch. Default: $switch-negative-color.
- // $radius - Radius to apply to switch. Default: false.
- // $base-style - Apply base styles? Default: true.
- @mixin switch-style(
- $paddle-bg:$switch-paddle-bg,
- $positive-color:$switch-positive-color,
- $negative-color:$switch-negative-color,
- $radius:false,
- $base-style:true) {
-
- @if $base-style {
- background: $switch-bg;
- border-color: $switch-border-color;
-
- span:last-child {
- border-color: scale-color($paddle-bg, $lightness: -30%);
- background: $paddle-bg;
- background: linear-gradient(to bottom, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -5%) 100%);
-
- // Building the alternating colored sides of the switch
- box-shadow: 2px 0 10px 0 rgba(0,0,0,0.07),
- 1000px 0 0 980px $positive-color,
- -2px 0 10px 0 rgba(0,0,0,0.07),
- -1000px 0 0 1000px $negative-color;
- }
-
- &:hover,
- &:focus {
- span:last-child {
- background: $paddle-bg;
- background: linear-gradient(to bottom, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -10%) 100%);
- }
- }
-
- &:active { background: transparent; }
- }
-
- // Setting up the radius for switches
- @if $radius == true {
- @include radius(4px);
- span:last-child { @include radius(3px); }
- }
- @else if $radius {
- @include radius($radius);
- span:last-child { @include radius($radius - 1px); }
- }
-
- }
-
- // We use this to quickly create switches with a single mixin
- //
- // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
- // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
- // $height - Height (in px) of the switch. Default: $switch-height-med.
- // $font-size - Font size of text in switch. Default: $switch-font-size-med.
- // $line-height - Line height of switch. Default: 2.3rem.
- // $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
- // $positive-color - Background color of positive side of switch. Default: $switch-positive-color.
- // $negative-color - Background color of negative side of switch. Default: $switch-negative-color.
- // $radius - Radius to apply to switch. Default: false.
- // $base-style - Apply base styles? Default: true.
- @mixin switch(
- $transition-speed: $switch-paddle-transition-speed,
- $transition-ease: $switch-paddle-transition-ease,
- $height: $switch-height-med,
- $font-size: $switch-font-size-med,
- $line-height: 2.3rem,
- $paddle-bg: $switch-paddle-bg,
- $positive-color: $switch-positive-color,
- $negative-color: $switch-negative-color,
- $radius:false,
- $base-style:true) {
- @include switch-base($transition-speed, $transition-ease);
- @include switch-size($height, $font-size, $line-height);
- @include switch-style($paddle-bg, $positive-color, $negative-color, $radius, $base-style);
- }
-
- @include exports("switch") {
- @if $include-html-form-classes {
- div.switch {
- @include switch;
-
- // Large radio switches
- &.large { @include switch-size($switch-height-lrg, $switch-font-size-lrg); }
-
- // Small radio switches
- &.small { @include switch-size($switch-height-sml, $switch-font-size-sml, 2.1rem); }
-
- // Tiny radio switches
- &.tiny { @include switch-size($switch-height-tny, $switch-font-size-tny, 1.9rem); }
-
- // Add a radius to the switch
- &.radius { @include radius(4px);
- span:last-child{ @include radius(3px); }
- }
-
- // Make the switch completely round, like a pill
- &.round { @include radius(1000px);
- span:last-child { @include radius(999px); }
- label { padding: rem-calc(0 $switch-label-side-padding + 3); }
- }
-
- }
- }
- }
generators/foundation5/public/stylesheets/foundation/components/_switches.scss +230 -0
@@ @@ -0,0 +1,230 @@
+ // Foundation by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
+ @import "global";
+
+ //
+ // @name
+ // @dependencies _global.scss
+ //
+
+ //
+ // @variables
+ //
+
+ $include-html-form-classes: $include-html-classes !default;
+
+ // Controlling background color for the switch container
+ $switch-bg: $gainsboro !default;
+
+ // We use these to control the switch heights for our default classes
+ $switch-height-tny: 1.5rem !default;
+ $switch-height-sml: 1.75rem !default;
+ $switch-height-med: 2rem !default;
+ $switch-height-lrg: 2.5rem !default;
+ $switch-bottom-margin: 1.5rem !default;
+
+ // We use these to style the switch-paddle
+ $switch-paddle-bg: $white !default;
+ $switch-paddle-transition-speed: .15s !default;
+ $switch-paddle-transition-ease: ease-out !default;
+ $switch-active-color: $primary-color !default;
+
+
+ //
+ // @mixins
+ //
+
+ // We use this mixin to create the base styles for our switch element.
+ //
+ // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
+ // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
+ @mixin switch-base(
+ $transition-speed:$switch-paddle-transition-speed,
+ $transition-ease:$switch-paddle-transition-ease) {
+
+ padding: 0;
+ border: none;
+ position: relative;
+ outline: 0;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+
+ // Default label styles for type and transition
+ label {
+ display: block;
+ margin-bottom: $switch-height-med / 2;
+ position: relative;
+ color: transparent;
+ background: $switch-bg;
+ text-indent: 100%;
+ width: $switch-height-med * 2; height: $switch-height-med;
+ cursor: pointer;
+
+ // Transition for the switch label to follow paddle
+ @include single-transition(left, $transition-speed, $transition-ease);
+ }
+
+ // So that we don't need to recreate the form with any JS, we use the
+ // existing checkbox or radio button, but we cleverly position and hide it.
+ input {
+ opacity: 0;
+ position: absolute;
+ top: 9px;
+ left: 10px;
+ padding:0;
+
+ & + label { margin-left: 0; margin-right: 0; }
+ }
+
+ // The paddle for the switch is created from an after psuedoclass
+ // content element. This is sized and positioned, and reacts to
+ // the state of the input.
+
+ label:after {
+ content: "";
+ display: block;
+ background: $switch-paddle-bg;
+ position: absolute; top: .25rem; left: .25rem;
+ width: $switch-height-med - 0.5rem; height: $switch-height-med - 0.5rem;
+
+ -webkit-transition: left $transition-speed $transition-ease;
+ -moz-transition: left $transition-speed $transition-ease;
+ transition: left $transition-speed $transition-ease;
+
+ -webkit-transform: translate3d(0,0,0);
+ -moz-transform: translate3d(0,0,0);
+ transform: translate3d(0,0,0);
+ }
+
+ input:checked + label {
+ background: $switch-active-color;
+ }
+
+ input:checked + label:after {
+ left: $switch-height-med + 0.25rem;
+ }
+ }
+
+ // We use this mixin to create the size styles for switches.
+ //
+ // $height - Height (in px) of the switch. Default: $switch-height-med.
+ // $font-size - Font size of text in switch. Default: $switch-font-size-med.
+ // $line-height - Line height of switch. Default: 2.3rem.
+ @mixin switch-size($height: $switch-height-med) {
+
+ label {
+ width: $height * 2; height: $height;
+ }
+
+ label:after {
+ width: $height - 0.5rem; height: $height - 0.5rem;
+ }
+
+ input:checked + label:after {
+ left: $height + 0.25rem;
+ }
+
+ }
+
+ // We use this mixin to add color and other fanciness to the switches.
+ //
+ // $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
+ // $active-color - Background color of positive side of switch. Default: $switch-positive-color.
+ // $negative-color - Background color of negative side of switch. Default: $switch-negative-color.
+ // $radius - Radius to apply to switch. Default: false.
+ // $base-style - Apply base styles? Default: true.
+ @mixin switch-style(
+ $paddle-bg:$switch-paddle-bg,
+ $radius:false,
+ $base-style:true) {
+
+ @if $base-style {
+
+ label {
+ color: transparent;
+ background: $switch-bg;
+ }
+
+ label:after {
+ background: $paddle-bg;
+ }
+
+ input:checked + label {
+ background: $switch-active-color;
+ }
+ }
+
+ // Setting up the radius for switches
+ @if $radius == true {
+ label {
+ border-radius: 2rem;
+ }
+ label:after {
+ border-radius: 2rem;
+ }
+ }
+ @else if $radius {
+ label {
+ border-radius: $radius;
+ }
+ label:after {
+ border-radius: $radius;
+ }
+ }
+
+ }
+
+ // We use this to quickly create switches with a single mixin
+ //
+ // $transition-speed - Time in ms for switch to toggle. Default: $switch-paddle-transition-speed.
+ // $transition-ease - Easing function to use for animation (i.e. ease-out). Default: $switch-paddle-transition-ease.
+ // $height - Height (in px) of the switch. Default: $switch-height-med.
+ // $paddle-bg - Background of switch paddle. Default: $switch-paddle-bg.
+ // $active-color - Background color of an active switch. Default: $switch-active-color.
+ // $radius - Radius to apply to switch. Default: false.
+ // $base-style - Apply base styles? Default: true.
+ @mixin switch(
+ $transition-speed: $switch-paddle-transition-speed,
+ $transition-ease: $switch-paddle-transition-ease,
+ $height: $switch-height-med,
+ $paddle-bg: $switch-paddle-bg,
+ $active-color: $switch-active-color,
+ $radius:false,
+ $base-style:true) {
+ @include switch-base($transition-speed, $transition-ease);
+ @include switch-size($height);
+ @include switch-style($paddle-bg, $radius, $base-style);
+ }
+
+ @include exports("switch") {
+ @if $include-html-form-classes {
+ .switch {
+ @include switch;
+
+ // Large radio switches
+ &.large { @include switch-size($switch-height-lrg); }
+
+ // Small radio switches
+ &.small { @include switch-size($switch-height-sml); }
+
+ // Tiny radio switches
+ &.tiny { @include switch-size($switch-height-tny); }
+
+ // Add a radius to the switch
+ &.radius {
+ label { @include radius(4px); }
+ label:after { @include radius(3px); }
+ }
+
+ // Make the switch completely round, like a pill
+ &.round { @include radius(1000px);
+ label { @include radius(2rem); }
+ label:after { @include radius(2rem); }
+ }
+
+ }
+ }
+ }
generators/foundation5/public/stylesheets/foundation/components/_tables.scss +13 -7
@@ @@ -1,3 +1,7 @@
+ // Foundation by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+
@import "global";
//
@@ @@ -12,18 +16,18 @@
$include-html-table-classes: $include-html-classes !default;
// These control the background color for the table and even rows
- $table-bg: #fff !default;
- $table-even-row-bg: #f9f9f9 !default;
+ $table-bg: $white !default;
+ $table-even-row-bg: $snow !default;
// These control the table cell border style
$table-border-style: solid !default;
$table-border-size: 1px !default;
- $table-border-color: #ddd !default;
+ $table-border-color: $gainsboro !default;
// These control the table head styles
- $table-head-bg: #f5f5f5 !default;
+ $table-head-bg: $white-smoke !default;
$table-head-font-size: rem-calc(14) !default;
- $table-head-font-color: #222 !default;
+ $table-head-font-color: $jet !default;
$table-head-font-weight: $font-weight-bold !default;
$table-head-padding: rem-calc(8 10 10) !default;
@@ @@ -43,10 +47,11 @@ $table-caption-font-weight: bold !default;
// These control the row padding and font styles
$table-row-padding: rem-calc(9 10) !default;
$table-row-font-size: rem-calc(14) !default;
- $table-row-font-color: #222 !default;
+ $table-row-font-color: $jet !default;
$table-line-height: rem-calc(18) !default;
- // These are for controlling the display and margin of tables
+ // These are for controlling the layout, display and margin of tables
+ $table-layout: auto !default;
$table-display: table-cell !default;
$table-margin-bottom: rem-calc(20) !default;
@@ @@ -59,6 +64,7 @@ $table-margin-bottom: rem-calc(20) !default;
background: $table-bg;
margin-bottom: $table-margin-bottom;
border: $table-border-style $table-border-size $table-border-color;
+ table-layout: $table-layout;
caption {
background: $table-caption-bg;
generators/foundation5/public/stylesheets/foundation/components/_tabs.scss +22 -8
@@ @@ -4,7 +4,6 @@
@import "global";
@import "grid";
- @import "type";
//
// @variables
@@ @@ -13,10 +12,10 @@
$include-html-tabs-classes: $include-html-classes !default;
$tabs-navigation-padding: rem-calc(16) !default;
- $tabs-navigation-bg-color: #efefef !default;
- $tabs-navigation-active-bg-color: #fff !default;
+ $tabs-navigation-bg-color: $silver !default;
+ $tabs-navigation-active-bg-color: $white !default;
$tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%) !default;
- $tabs-navigation-font-color: #222 !default;
+ $tabs-navigation-font-color: $jet !default;
$tabs-navigation-active-font-color: $tabs-navigation-font-color !default;
$tabs-navigation-font-size: rem-calc(16) !default;
$tabs-navigation-font-family: $body-font-family !default;
@@ @@ -38,15 +37,27 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
list-style: none;
float: $default-float;
> a {
+ outline: none;
display: block;
- background: $tabs-navigation-bg-color;
+ background: {
+ color: $tabs-navigation-bg-color;
+ }
color: $tabs-navigation-font-color;
padding: $tabs-navigation-padding $tabs-navigation-padding * 2;
font-family: $tabs-navigation-font-family;
font-size: $tabs-navigation-font-size;
- &:hover { background: $tabs-navigation-hover-bg-color; }
+ &:hover {
+ background: {
+ color: $tabs-navigation-hover-bg-color;
+ }
+ }
}
- &.active a { background: $tabs-navigation-active-bg-color; color:$tabs-navigation-active-font-color; }
+ &.active a {
+ background: {
+ color: $tabs-navigation-active-bg-color;
+ }
+ color:$tabs-navigation-active-font-color;
+ }
}
&.radius {
dd:first-child, .tab:first-child {
@@ @@ -87,15 +98,18 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
.tabs {
&.vertical {
width: 20%;
+ max-width: 20%;
float: $default-float;
- margin-bottom: $tabs-vertical-navigation-margin-bottom;
+ margin: 0 0 $tabs-vertical-navigation-margin-bottom;
}
}
.tabs-content {
&.vertical {
width: 80%;
+ max-width: 80%;
float: $default-float;
margin-#{$default-float}: -1px;
+ padding-#{$default-float}: 1rem;
}
}
}
generators/foundation5/public/stylesheets/foundation/components/_thumbs.scss +2 -4
@@ @@ -4,8 +4,6 @@
@import "global";
-
-
//
// @name _thumbs.scss
// @dependencies _globals.scss
@@ @@ -20,8 +18,8 @@ $include-html-media-classes: $include-html-classes !default;
// We use these to control border styles
$thumb-border-style: solid !default;
$thumb-border-width: 4px !default;
- $thumb-border-color: #fff !default;
- $thumb-box-shadow: 0 0 0 1px rgba(#000,.2) !default;
+ $thumb-border-color: $white !default;
+ $thumb-box-shadow: 0 0 0 1px rgba($black,.2) !default;
$thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default;
// Radius and transition speed for thumbs
generators/foundation5/public/stylesheets/foundation/components/_toolbar.scss +70 -0
@@ @@ -0,0 +1,70 @@
+ // Foundation by ZURB
+ // foundation.zurb.com
+ // Licensed under MIT Open Source
+ // toolbar styles
+
+ .toolbar {
+ background: $oil;
+ width: 100%;
+ font-size: 0;
+ display: inline-block;
+
+ &.label-bottom .tab .tab-content {
+ i, img { margin-bottom: 10px; }
+ }
+
+ &.label-right .tab .tab-content {
+ i, img { margin-right: 10px; display: inline-block;}
+ label { display: inline-block; }
+ }
+
+ &.vertical.label-right .tab .tab-content {
+ text-align: left;
+ }
+
+ &.vertical {
+ height: 100%;
+ width: auto;
+
+ .tab {
+ width: auto;
+ margin: auto;
+ float: none;
+ }
+ }
+
+ .tab {
+ text-align: center;
+ width: 25%;
+ margin: 0 auto;
+ display: block;
+ padding: 20px;
+ float: left;
+
+ &:hover {
+ background: rgba($white, 0.1);
+ }
+ }
+ }
+
+ .toolbar .tab-content {
+ font-size: 16px;
+ text-align: center;
+
+ label { color: $iron; }
+
+ i {
+ font-size: 30px;
+ display: block;
+ margin: 0 auto;
+ color: $iron;
+ vertical-align: middle;
+ }
+
+ img {
+ width: 30px;
+ height: 30px;
+ display: block;
+ margin: 0 auto;
+ }
+ }
\ No newline at end of file
generators/foundation5/public/stylesheets/foundation/components/_tooltips.scss +9 -7
@@ @@ -9,26 +9,27 @@
//
$include-html-tooltip-classes: $include-html-classes !default;
- $has-tip-border-bottom: dotted 1px #ccc !default;
+ $has-tip-border-bottom: dotted 1px $iron !default;
$has-tip-font-weight: $font-weight-bold !default;
- $has-tip-font-color: #333 !default;
+ $has-tip-font-color: $oil !default;
$has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%) !default;
$has-tip-font-color-hover: $primary-color !default;
$has-tip-cursor-type: help !default;
$tooltip-padding: rem-calc(12) !default;
- $tooltip-bg: #333 !default;
+ $tooltip-bg: $oil !default;
$tooltip-font-size: rem-calc(14) !default;
$tooltip-font-weight: $font-weight-normal !default;
- $tooltip-font-color: #fff !default;
+ $tooltip-font-color: $white !default;
$tooltip-line-height: 1.3 !default;
$tooltip-close-font-size: rem-calc(10) !default;
$tooltip-close-font-weight: $font-weight-normal !default;
- $tooltip-close-font-color: #777 !default;
+ $tooltip-close-font-color: $monsoon !default;
$tooltip-font-size-sml: rem-calc(14) !default;
$tooltip-radius: $global-radius !default;
$tooltip-rounded: $global-rounded !default;
$tooltip-pip-size: 5px !default;
+ $tooltip-max-width: 300px !default;
@include exports("tooltip") {
@if $include-html-tooltip-classes {
@@ @@ -53,12 +54,12 @@ $tooltip-pip-size: 5px !default;
.tooltip {
display: none;
position: absolute;
- z-index: 999;
+ z-index: 1006;
font-weight: $tooltip-font-weight;
font-size: $tooltip-font-size;
line-height: $tooltip-line-height;
padding: $tooltip-padding;
- max-width: 85%;
+ max-width: $tooltip-max-width;
#{$default-float}: 50%;
width: 100%;
color: $tooltip-font-color;
@@ @@ -73,6 +74,7 @@ $tooltip-pip-size: 5px !default;
border: solid $tooltip-pip-size;
border-color: transparent transparent $tooltip-bg transparent;
top: -($tooltip-pip-size * 2);
+ pointer-events: none;
&.rtl {
left: auto;
generators/foundation5/public/stylesheets/foundation/components/_top-bar.scss +82 -56
@@ @@ -5,6 +5,7 @@
@import "global";
@import "grid";
@import "buttons";
+ @import "forms";
//
// Top Bar Variables
@@ @@ -12,7 +13,7 @@
$include-html-top-bar-classes: $include-html-classes !default;
// Background color for the top bar
- $topbar-bg-color: #333 !default;
+ $topbar-bg-color: $oil !default;
$topbar-bg: $topbar-bg-color !default;
// Height and margin
@@ @@ -23,49 +24,51 @@ $topbar-margin-bottom: 0 !default;
$topbar-title-weight: $font-weight-normal !default;
$topbar-title-font-size: rem-calc(17) !default;
- // Style the top bar dropdown elements
- $topbar-dropdown-bg: #333 !default;
- $topbar-dropdown-link-color: #fff !default;
- $topbar-dropdown-link-bg: #333 !default;
- $topbar-dropdown-link-weight: $font-weight-normal !default;
- $topbar-dropdown-toggle-size: 5px !default;
- $topbar-dropdown-toggle-color: #fff !default;
- $topbar-dropdown-toggle-alpha: 0.4 !default;
-
// Set the link colors and styles for top-level nav
- $topbar-link-color: #fff !default;
- $topbar-link-color-hover: #fff !default;
- $topbar-link-color-active: #fff !default;
- $topbar-link-color-active-hover: #fff !default;
+ $topbar-link-color: $white !default;
+ $topbar-link-color-hover: $white !default;
+ $topbar-link-color-active: $white !default;
+ $topbar-link-color-active-hover: $white !default;
$topbar-link-weight: $font-weight-normal !default;
$topbar-link-font-size: rem-calc(13) !default;
$topbar-link-hover-lightness: -10% !default; // Darken by 10%
$topbar-link-bg: $topbar-bg !default;
$topbar-link-bg-hover: #272727 !default;
- $topbar-link-bg-color-hover: #555555 !default;
+ $topbar-link-bg-color-hover: $charcoal !default;
$topbar-link-bg-active: $primary-color !default;
$topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
$topbar-link-font-family: $body-font-family !default;
$topbar-link-text-transform: none !default;
$topbar-link-padding: $topbar-height / 3 !default;
-
+ $topbar-back-link-size: rem-calc(18) !default;
+ $topbar-link-dropdown-padding: 20px !default;
$topbar-button-font-size: 0.75rem !default;
$topbar-button-top: 7px !default;
- $topbar-dropdown-label-color: #777 !default;
+ // Style the top bar dropdown elements
+ $topbar-dropdown-bg: $oil !default;
+ $topbar-dropdown-link-color: $white !default;
+ $topbar-dropdown-link-color-hover: $topbar-link-color-hover !default;
+ $topbar-dropdown-link-bg: $oil !default;
+ $topbar-dropdown-link-weight: $font-weight-normal !default;
+ $topbar-dropdown-toggle-size: 5px !default;
+ $topbar-dropdown-toggle-color: $white !default;
+ $topbar-dropdown-toggle-alpha: 0.4 !default;
+
+ $topbar-dropdown-label-color: $monsoon !default;
$topbar-dropdown-label-text-transform: uppercase !default;
$topbar-dropdown-label-font-weight: $font-weight-bold !default;
$topbar-dropdown-label-font-size: rem-calc(10) !default;
- $topbar-dropdown-label-bg: #333 !default;
+ $topbar-dropdown-label-bg: $oil !default;
// Top menu icon styles
$topbar-menu-link-transform: uppercase !default;
$topbar-menu-link-font-size: rem-calc(13) !default;
$topbar-menu-link-weight: $font-weight-bold !default;
- $topbar-menu-link-color: #fff !default;
- $topbar-menu-icon-color: #fff !default;
- $topbar-menu-link-color-toggled: #888 !default;
- $topbar-menu-icon-color-toggled: #888 !default;
+ $topbar-menu-link-color: $white !default;
+ $topbar-menu-icon-color: $white !default;
+ $topbar-menu-link-color-toggled: $jumbo !default;
+ $topbar-menu-icon-color-toggled: $jumbo !default;
// Transitions and breakpoint styles
$topbar-transition-speed: 300ms !default;
@@ @@ -80,6 +83,7 @@ $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness:
// Sticky Class
$topbar-sticky-class: ".sticky" !default;
$topbar-arrows: true !default; //Set false to remove the triangle icon from the menu item
+ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text from dropdown subnavigation li
// Accessibility mixins for hiding and showing the menu dropdown items
@mixin topbar-hide-dropdown {
@@ @@ -160,16 +164,21 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
form,
input { margin-bottom: 0; }
- input { height: auto; padding-top: .35rem; padding-bottom: .35rem; font-size: $topbar-button-font-size; }
+ input { height: 1.8rem; padding-top: .35rem; padding-bottom: .35rem; font-size: $topbar-button-font-size; }
.button, button {
- padding-top: .45rem;
- padding-bottom: .35rem;
+ padding-top: .35rem + rem-calc(1);
+ padding-bottom: .35rem + rem-calc(1);
margin-bottom: 0;
font-size: $topbar-button-font-size;
// position: relative;
// top: -1px;
+ // Corrects a slight misalignment when put next to an input field
+ @media #{$small-only} {
+ position: relative;
+ top: -1px;
+ }
}
// Title Area
@@ @@ -240,9 +249,9 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
// $thickness - thickness of lines in hamburger icon, set value in px
// $gap - spacing between the lines in hamburger icon, set value in px
// $color - icon color
- // $hover-color - icon color during hover, here it is set the same as $color because the values are changed on line 264
+ // $hover-color - icon color during hover, here it isn't set b/c it would override $topbar-menu-icon-color-toggled
// $offcanvas - Set to false of @include in topbar
- @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, $topbar-menu-icon-color, false);
+ @include hamburger(16px, false, 0, 1px, 6px, $topbar-menu-icon-color, "", false);
}
}
}
@@ @@ -257,18 +266,16 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
.toggle-topbar {
a { color: $topbar-menu-link-color-toggled;
- &::after {
+ span::after {
// Shh, don't tell, but box-shadows create the menu icon :)
- box-shadow: 0 10px 0 1px $topbar-menu-icon-color-toggled,
- 0 16px 0 1px $topbar-menu-icon-color-toggled,
- 0 22px 0 1px $topbar-menu-icon-color-toggled;
+ // Change the color of the bars when the menu is expanded, using given thickness from hamburger() above
+ box-shadow: 0 0px 0 1px $topbar-menu-icon-color-toggled,
+ 0 7px 0 1px $topbar-menu-icon-color-toggled,
+ 0 14px 0 1px $topbar-menu-icon-color-toggled;
}
}
}
}
-
-
-
}
// Right and Left Navigation that stacked by default
@@ @@ -318,6 +325,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
&.button.secondary { @include button-style($bg:$secondary-color); }
&.button.success { @include button-style($bg:$success-color); }
&.button.alert { @include button-style($bg:$alert-color); }
+ &.button.warning { @include button-style($bg:$warning-color); }
}
> button {
@@ @@ -329,6 +337,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
&.secondary { @include button-style($bg:$secondary-color); }
&.success { @include button-style($bg:$success-color); }
&.alert { @include button-style($bg:$alert-color); }
+ &.warning { @include button-style($bg:$warning-color); }
}
// Apply the hover link color when it has that class
@@ @@ -404,13 +413,16 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
}
}
- &.title h5 {
+ &.title h5, &.parent-link {
+ // Back Button
margin-bottom: 0;
margin-top: 0;
+ font-size: $topbar-back-link-size;
a {
color: $topbar-link-color;
- line-height: $topbar-height / 2;
+ // line-height: $topbar-height / 2;
display: block;
+ &:hover { background:none; }
}
}
&.has-form { padding: 8px $topbar-link-padding; }
@@ @@ -504,7 +516,10 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
line-height: $topbar-height;
color: $topbar-link-color-active;
background: $topbar-link-bg-active;
- &:hover { background: $topbar-link-bg-active-hover; }
+ &:hover {
+ background: $topbar-link-bg-active-hover;
+ color: $topbar-link-color-active-hover;
+ }
}
}
}
@@ @@ -514,7 +529,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
@if($topbar-arrows){
& > a {
- padding-#{$opposite-direction}: $topbar-link-padding + 20 !important;
+ padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important;
&:after {
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top);
margin-top: -($topbar-dropdown-toggle-size / 2);
@@ @@ -535,16 +550,21 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
@include topbar-show-dropdown();
}
}
+ > a:focus + .dropdown {
+ @include topbar-show-dropdown();
+ }
.dropdown li.has-dropdown {
& > a {
- &:after {
- border: none;
- content: "\00bb";
- top: 1rem;
- margin-top: -1px;
- #{$opposite-direction}: 5px;
- line-height: 1.2;
+ @if ($topbar-dropdown-arrows){
+ &:after {
+ border: none;
+ content: "\00bb";
+ top: 1rem;
+ margin-top: -1px;
+ #{$opposite-direction}: 5px;
+ line-height: 1.2;
+ }
}
}
}
@@ @@ -566,15 +586,18 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
background: $topbar-dropdown-link-bg;
}
- &:not(.has-form) a:not(.button) {
- color: $topbar-dropdown-link-color;
- background: $topbar-dropdown-link-bg;
- }
- &:not(.has-form):hover > a:not(.button) {
- color: $topbar-link-color-hover;
- background-color: $topbar-link-bg-color-hover;
- @if ($topbar-link-bg-hover) {
- background: $topbar-link-bg-hover;
+ &:not(.has-form):not(.active) {
+ & > a:not(.button) {
+ color: $topbar-dropdown-link-color;
+ background: $topbar-dropdown-link-bg;
+ }
+
+ &:hover > a:not(.button) {
+ color: $topbar-dropdown-link-color-hover;
+ background-color: $topbar-link-bg-color-hover;
+ @if ($topbar-link-bg-hover) {
+ background: $topbar-link-bg-hover;
+ }
}
}
@@ @@ -608,7 +631,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
}
// Position overrides for ul.right and ul.left
- .right {
+ .#{$opposite-direction} {
li .dropdown {
#{$default-float}: auto;
#{$opposite-direction}: 0;
@@ @@ -616,7 +639,7 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
li .dropdown { #{$opposite-direction}: 100%; }
}
}
- .left {
+ .#{$default-float} {
li .dropdown {
#{$opposite-direction}: auto;
#{$default-float}: 0;
@@ @@ -652,6 +675,9 @@ $topbar-arrows: true !default; //Set false to remove the triangle icon from the
@include topbar-show-dropdown();
}
}
+ > a:focus + .dropdown {
+ @include topbar-show-dropdown();
+ }
}
}
}
generators/foundation5/public/stylesheets/foundation/components/_type.scss +23 -11
@@ @@ -10,7 +10,7 @@ $include-html-type-classes: $include-html-classes !default;
$header-font-family: $body-font-family !default;
$header-font-weight: $font-weight-normal !default;
$header-font-style: $font-weight-normal !default;
- $header-font-color: #222 !default;
+ $header-font-color: $jet !default;
$header-line-height: 1.4 !default;
$header-top-margin: .2rem !default;
$header-bottom-margin: .5rem !default;
@@ @@ -55,9 +55,14 @@ $paragraph-aside-font-style: italic !default;
$paragraph-text-rendering: optimizeLegibility !default;
// We use these to style <code> tags
- $code-color: scale-color($alert-color, $lightness: -27%) !default;
- $code-font-family: Consolas, 'Liberation Mono', Courier, monospace !default;
- $code-font-weight: $font-weight-bold !default;
+ $code-color: $oil !default;
+ $code-font-family: $font-family-monospace !default;
+ $code-font-weight: $font-weight-normal !default;
+ $code-background-color: scale-color($secondary-color, $lightness: 70%) !default;
+ $code-border-size: 1px !default;
+ $code-border-style: solid !default;
+ $code-border-color: scale-color($code-background-color, $lightness: -10%) !default;
+ $code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default;
// We use these to style anchors
$anchor-text-decoration: none !default;
@@ @@ -68,7 +73,7 @@ $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%) !def
// We use these to style the <hr> element
$hr-border-width: 1px !default;
$hr-border-style: solid !default;
- $hr-border-color: #ddd !default;
+ $hr-border-color: $gainsboro !default;
$hr-margin: rem-calc(20) !default;
// We use these to style lists
@@ @@ -88,13 +93,13 @@ $definition-list-margin-bottom: rem-calc(12) !default;
// We use these to style blockquotes
$blockquote-font-color: scale-color($header-font-color, $lightness: 35%) !default;
$blockquote-padding: rem-calc(9 20 0 19) !default;
- $blockquote-border: 1px solid #ddd !default;
+ $blockquote-border: 1px solid $gainsboro !default;
$blockquote-cite-font-size: rem-calc(13) !default;
$blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%) !default;
$blockquote-cite-link-color: $blockquote-cite-font-color !default;
// Acronym styles
- $acronym-underline: 1px dotted #ddd !default;
+ $acronym-underline: 1px dotted $gainsboro !default;
// We use these to control padding and margin
$microformat-padding: rem-calc(10 12) !default;
@@ @@ -103,7 +108,7 @@ $microformat-margin: rem-calc(0 0 20 0) !default;
// We use these to control the border styles
$microformat-border-width: 1px !default;
$microformat-border-style: solid !default;
- $microformat-border-color: #ddd !default;
+ $microformat-border-color: $gainsboro !default;
// We use these to control full name font styles
$microformat-fullname-font-weight: $font-weight-bold !default;
@@ @@ -300,6 +305,11 @@ $align-class-breakpoints:
font-family: $code-font-family;
font-weight: $code-font-weight;
color: $code-color;
+ background-color: $code-background-color;
+ border-width: $code-border-size;
+ border-style: $code-border-style;
+ border-color: $code-border-color;
+ padding: $code-padding;
}
/* Lists */
@@ @@ -376,11 +386,13 @@ $align-class-breakpoints:
text-transform: uppercase;
font-size: 90%;
color: $body-font-color;
- border-bottom: $acronym-underline;
cursor: $cursor-help-value;
}
abbr {
text-transform: none;
+ &[title] {
+ border-bottom: $acronym-underline;
+ }
}
/* Blockquotes */
@@ @@ -461,7 +473,7 @@ $align-class-breakpoints:
@media print {
* {
background: transparent !important;
- color: #000 !important; /* Black prints faster: h5bp.com/s */
+ color: $black !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
@@ @@ -479,7 +491,7 @@ $align-class-breakpoints:
pre,
blockquote {
- border: 1px solid #999;
+ border: 1px solid $aluminum;
page-break-inside: avoid;
}
generators/foundation5/public/stylesheets/foundation/components/_visibility.scss +7 -7
@@ @@ -257,7 +257,7 @@ $visibility-breakpoint-queries:
}
@if $include-table-visibility-classes != false {
#{$visibility-table-list} {
- display: table;
+ display: table !important;
}
#{$visibility-table-header-group-list} {
display: table-header-group !important;
@@ @@ -290,7 +290,7 @@ $visibility-breakpoint-queries:
/* Specific visibility for tables */
table {
&.hide-for-landscape,
- &.show-for-portrait { display: table; }
+ &.show-for-portrait { display: table !important; }
}
thead {
&.hide-for-landscape,
@@ @@ -319,7 +319,7 @@ $visibility-breakpoint-queries:
/* Specific visibility for tables */
table {
&.show-for-landscape,
- &.hide-for-portrait { display: table; }
+ &.hide-for-portrait { display: table !important; }
}
thead {
&.show-for-landscape,
@@ @@ -349,7 +349,7 @@ $visibility-breakpoint-queries:
/* Specific visibility for tables */
table {
&.show-for-portrait,
- &.hide-for-landscape { display: table; }
+ &.hide-for-landscape { display: table !important; }
}
thead {
&.show-for-portrait,
@@ @@ -377,8 +377,8 @@ $visibility-breakpoint-queries:
.touch .hide-for-touch { display: none !important; }
/* Specific visibility for tables */
- table.hide-for-touch { display: table; }
- .touch table.show-for-touch { display: table; }
+ table.hide-for-touch { display: table !important; }
+ .touch table.show-for-touch { display: table !important; }
thead.hide-for-touch { display: table-header-group !important; }
.touch thead.show-for-touch { display: table-header-group !important; }
tbody.hide-for-touch { display: table-row-group !important; }
@@ @@ -396,7 +396,7 @@ $visibility-breakpoint-queries:
.show-for-print { display: block; }
.hide-for-print { display: none; }
- table.show-for-print { display: table; }
+ table.show-for-print { display: table !important; }
thead.show-for-print { display: table-header-group !important; }
tbody.show-for-print { display: table-row-group !important; }
tr.show-for-print { display: table-row !important; }
generators/foundation5/public/stylesheets/normalize.css +71 -139
@@ @@ -1,34 +1,31 @@
- /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
-
+ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
-
html {
- font-family: sans-serif; /* 1 */
- -ms-text-size-adjust: 100%; /* 2 */
- -webkit-text-size-adjust: 100%; /* 2 */
- }
+ font-family: sans-serif;
+ /* 1 */
+ -ms-text-size-adjust: 100%;
+ /* 2 */
+ -webkit-text-size-adjust: 100%;
+ /* 2 */ }
/**
* Remove default margin.
*/
-
body {
- margin: 0;
- }
+ margin: 0; }
/* HTML5 display definitions
========================================================================== */
-
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
-
article,
aside,
details,
@@ @@ -38,232 +35,189 @@ footer,
header,
hgroup,
main,
+ menu,
nav,
section,
summary {
- display: block;
- }
+ display: block; }
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
-
audio,
canvas,
progress,
video {
- display: inline-block; /* 1 */
- vertical-align: baseline; /* 2 */
- }
+ display: inline-block;
+ /* 1 */
+ vertical-align: baseline;
+ /* 2 */ }
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
-
audio:not([controls]) {
display: none;
- height: 0;
- }
+ height: 0; }
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
-
[hidden],
template {
- display: none;
- }
+ display: none; }
/* Links
========================================================================== */
-
/**
* Remove the gray background color from active links in IE 10.
*/
-
a {
- background: transparent;
- }
+ background-color: transparent; }
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
-
a:active,
a:hover {
- outline: 0;
- }
+ outline: 0; }
/* Text-level semantics
========================================================================== */
-
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
-
abbr[title] {
- border-bottom: 1px dotted;
- }
+ border-bottom: 1px dotted; }
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
-
b,
strong {
- font-weight: bold;
- }
+ font-weight: bold; }
/**
* Address styling not present in Safari and Chrome.
*/
-
dfn {
- font-style: italic;
- }
+ font-style: italic; }
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
-
h1 {
font-size: 2em;
- margin: 0.67em 0;
- }
+ margin: 0.67em 0; }
/**
* Address styling not present in IE 8/9.
*/
-
mark {
background: #ff0;
- color: #000;
- }
+ color: #000; }
/**
* Address inconsistent and variable font size in all browsers.
*/
-
small {
- font-size: 80%;
- }
+ font-size: 80%; }
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
-
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
- vertical-align: baseline;
- }
+ vertical-align: baseline; }
sup {
- top: -0.5em;
- }
+ top: -0.5em; }
sub {
- bottom: -0.25em;
- }
+ bottom: -0.25em; }
/* Embedded content
========================================================================== */
-
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
-
img {
- border: 0;
- }
+ border: 0; }
/**
* Correct overflow not hidden in IE 9/10/11.
*/
-
svg:not(:root) {
- overflow: hidden;
- }
+ overflow: hidden; }
/* Grouping content
========================================================================== */
-
/**
* Address margin not present in IE 8/9 and Safari.
*/
-
figure {
- margin: 1em 40px;
- }
+ margin: 1em 40px; }
/**
* Address differences between Firefox and other browsers.
*/
-
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
- height: 0;
- }
+ height: 0; }
/**
* Contain overflow in all browsers.
*/
-
pre {
- overflow: auto;
- }
+ overflow: auto; }
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
-
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
- font-size: 1em;
- }
+ font-size: 1em; }
/* Forms
========================================================================== */
-
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
-
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
-
button,
input,
optgroup,
select,
textarea {
- color: inherit; /* 1 */
- font: inherit; /* 2 */
- margin: 0; /* 3 */
- }
+ color: inherit;
+ /* 1 */
+ font: inherit;
+ /* 2 */
+ margin: 0;
+ /* 3 */ }
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
-
button {
- overflow: visible;
- }
+ overflow: visible; }
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
@@ @@ -271,11 +225,9 @@ button {
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
-
button,
select {
- text-transform: none;
- }
+ text-transform: none; }
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
@@ @@ -284,42 +236,36 @@ select {
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
-
button,
- html input[type="button"], /* 1 */
+ html input[type="button"],
input[type="reset"],
input[type="submit"] {
- -webkit-appearance: button; /* 2 */
- cursor: pointer; /* 3 */
- }
+ -webkit-appearance: button;
+ /* 2 */
+ cursor: pointer;
+ /* 3 */ }
/**
* Re-set default cursor for disabled elements.
*/
-
button[disabled],
html input[disabled] {
- cursor: default;
- }
+ cursor: default; }
/**
* Remove inner padding and border in Firefox 4+.
*/
-
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
- padding: 0;
- }
+ padding: 0; }
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
-
input {
- line-height: normal;
- }
+ line-height: normal; }
/**
* It's recommended that you don't attempt to style these elements.
@@ @@ -328,98 +274,84 @@ input {
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
-
input[type="checkbox"],
input[type="radio"] {
- box-sizing: border-box; /* 1 */
- padding: 0; /* 2 */
- }
+ box-sizing: border-box;
+ /* 1 */
+ padding: 0;
+ /* 2 */ }
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
-
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
- height: auto;
- }
+ height: auto; }
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
-
input[type="search"] {
- -webkit-appearance: textfield; /* 1 */
+ -webkit-appearance: textfield;
+ /* 1 */
-moz-box-sizing: content-box;
- -webkit-box-sizing: content-box; /* 2 */
- box-sizing: content-box;
- }
+ -webkit-box-sizing: content-box;
+ /* 2 */
+ box-sizing: content-box; }
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
-
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
- -webkit-appearance: none;
- }
+ -webkit-appearance: none; }
/**
* Define consistent border, margin, and padding.
*/
-
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
- padding: 0.35em 0.625em 0.75em;
- }
+ padding: 0.35em 0.625em 0.75em; }
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
-
legend {
- border: 0; /* 1 */
- padding: 0; /* 2 */
- }
+ border: 0;
+ /* 1 */
+ padding: 0;
+ /* 2 */ }
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
-
textarea {
- overflow: auto;
- }
+ overflow: auto; }
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
-
optgroup {
- font-weight: bold;
- }
+ font-weight: bold; }
/* Tables
========================================================================== */
-
/**
* Remove most spacing between table cells.
*/
-
table {
border-collapse: collapse;
- border-spacing: 0;
- }
+ border-spacing: 0; }
td,
th {
- padding: 0;
- }
+ padding: 0; }
generators/foundation5/public/stylesheets/normalize.css.scss +5 -3
@@ @@ -1,4 +1,4 @@
- /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
+ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
@@ @@ -25,7 +25,8 @@ body {
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
@@ @@ -38,6 +39,7 @@ footer,
header,
hgroup,
main,
+ menu,
nav,
section,
summary {
@@ @@ -85,7 +87,7 @@ template {
*/
a {
- background: transparent;
+ background-color: transparent;
}
/**
locomotive/wagon/generators/site/foundation5.rb b/lib/locomotive/wagon/generators/site/foundation5.rb +2 -2
@@ @@ -40,9 +40,9 @@ module Locomotive
end
Locomotive::Wagon::Generators::Site.register(:foundation5, Foundation5, %{
- A site powered by Foundation (v5.2.3.0).
+ A site powered by Foundation (v5.4.7).
})
end
end
end
- end
\ No newline at end of file
+ end