/* Table of Contents :: Visibility :: Alerts :: Labels :: Tooltips :: Panels :: Accordion :: Side Nav :: Sub Nav :: Pagination :: Breadcrumbs :: Lists :: Inline/Link Lists :: Keystroke Chars :: Image Thumbnails :: Video :: Tables :: Microformats :: Progress Bars :: Pricing Tables */ /* Alerts ---------------------- */ div.alert-box { display: block; padding: 6px 7px 7px; font-weight: bold; font-size: ms(0); color: $white; background-color: $mainColor; border: 1px solid rgba(#000,.1); margin-bottom: 12px; @include border-radius(3px); text-shadow: 0 -1px rgba(#000,.3); position: relative; &.success { background-color: $successColor; color: #fff; text-shadow: 0 -1px rgba(#000,.3); } &.alert { background-color: $alertColor; color: #fff; text-shadow: 0 -1px rgba(#000,.3); } &.secondary { background-color: $secondaryColor; color: darken($secondaryColor, 60%); text-shadow: 0 1px rgba(#fff,.3); } a.close { color: #333; position: absolute; #{$defaultOpposite}: 4px; top: -1px; font-size: ms(1); opacity: 0.2; padding: 4px; } a.close:hover, a.close:focus { opacity: 0.4; } } /* Labels ---------------------- */ .label { padding: 1px 4px 2px; font-size: ms(0) - 2; font-weight: bold; text-align: center; text-decoration: none; line-height: 1; white-space: nowrap; display: inline; position: relative; bottom: 1px; color: #fff; background: $mainColor; &.radius { @include border-radius($buttonRadius); } &.round { padding: 1px 7px 2px; @include border-radius(1000px); } &.alert { background-color: $alertColor; } &.success { background-color: $successColor; } &.secondary { background-color: $secondaryColor; color: darken($secondaryColor, 60%); } } /* Tooltips ---------------------- */ .has-tip { border-bottom: $hasTipBorderBottom; cursor: help; font-weight: $hasTipFontWeight; color: $hasTipFontColor; &:hover { border-bottom: $hasTipBorderBottomHover; color: $hasTipFontColorHover; } &.tip-left, &.tip-right { float: none !important; } } .tooltip { display: none; background: $tooltipBackgroundColor; background: rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity); position: absolute; color: $tooltipFontColor; font-weight: $tooltipFontWeight; font-size: $tooltipFontSize; padding: 5px; z-index: 999; @include border-radius($tooltipBorderRadius); line-height: normal; &>.nub { display: block; width: 0; height: 0; border: solid 5px; border-color: transparent transparent $tooltipBackgroundColor transparent; border-color: transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent; position: absolute; top: -10px; #{$defaultFloat}: 10px; } &.tip-override>.nub { border-color: transparent transparent $tooltipBackgroundColor transparent !important; border-color: transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent !important; top: -10px !important; } &.tip-top>.nub { border-color: $tooltipBackgroundColor transparent transparent transparent; border-color: rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent transparent transparent; top: auto; bottom: -10px; } &.tip-left, &.tip-right { float: none !important; } &.tip-left>.nub { border-color: transparent transparent transparent $tooltipBackgroundColor; border-color: transparent transparent transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity); right: -10px; left: auto; } &.tip-right>.nub { border-color: transparent $tooltipBackgroundColor transparent transparent; border-color: transparent rgba($tooltipBackgroundColor,$tooltipBackgroundOpacity) transparent transparent; right: auto; left: -10px; } &.noradius { @include border-radius(0); } &.opened { color: $hasTipFontColorHover !important; border-bottom: $hasTipBorderBottomHover !important; } } .tap-to-close { display: block; @include font-size($tapToCloseFontSize); color: $tapToCloseFontColor; font-weight: $tapToCloseFontWeight; } /* Panels ---------------------- */ .panel { background: darken($white, 5%); border: solid 1px darken($white, 10%); margin: 0 0 22px 0; padding: 20px; > :first-child { margin-top: 0; } > :last-child { margin-bottom: 0; } &.callout { background: $mainColor; color: #fff; border-color: darken($mainColor, 10%); @include box-shadow(inset 0px 1px 0px rgba(255,255,255,0.5)); a { color: #fff; } .button { background: $white; border: none; color: $mainColor; @include text-shadow(none); &:hover { background: rgba(255,255,255,0.8); } } } &.radius { @include border-radius($buttonRadius); } } /* Accordion ---------------------- */ ul.accordion { margin: 0 0 22px 0; border-bottom: 1px solid $secondaryColor; &>li { list-style: none; margin: 0; padding: 0; border-top: 1px solid $secondaryColor; & > div.title { cursor: pointer; background: lighten($secondaryColor, 5%); padding: 15px; margin: 0; position: relative; border-#{$defaultFloat}: 1px solid $secondaryColor; border-#{$defaultOpposite}: 1px solid $secondaryColor; @include single-transition(0.15s, background, linear); h1, h2, h3, h4, h5 { margin: 0; } &:after { @include cssTriangle(6px, darken($secondaryColor, 30%), $defaultOpposite); position: absolute; #{$defaultOpposite}: 15px; top: 21px; } } .content { display: none; padding: 15px; } &.active { border-top: 3px solid $mainColor; .title { background: $white; padding-top: 13px; &:after { @include cssTriangle(6px, darken($secondaryColor, 30%), top); } } .content { background: $white; display: block; border-#{$defaultFloat}: 1px solid $secondaryColor; border-#{$defaultOpposite}: 1px solid $secondaryColor; } } } } /* Side Nav ---------------------- */ ul.side-nav { display: block; list-style: none; margin: 0; padding: ms(1) 0; li { display: block; list-style: none; margin: 0 0 (ms(0)/2) 0; a { display: block; } &.active a { color: lighten($black, 30%); font-weight: bold; } &.divider { border-top: 1px solid darken($white, 10%); height: 0; padding: 0; } } } /* Sub Navs http://www.zurb.com/article/292/how-to-create-simple-and-effective-sub-na ---------------------- */ dl.sub-nav { display: block; width: auto; overflow: hidden; margin: -4px 0 18px; margin-#{$defaultOpposite}: 0; margin-#{$defaultFloat}: -9px; padding-top: 4px; dt, dd { float: $defaultFloat; display: inline; margin-#{$defaultFloat}: 9px; margin-bottom: 10px; } dt { color: #999; font-weight: $bodyFontWeight; } dd a { text-decoration: none; @include border-radius(1000px); } dd.active a { font-weight: bold; background: $mainColor; color: #fff; padding: 3px 9px; cursor: default; } } /* Pagination ---------------------- */ ul.pagination { display: block; height: 24px; margin-#{$defaultFloat}: -5px; li { float: $defaultFloat; display: block; height: 24px; color: #999; font-size: ms(0); margin-#{$defaultFloat}: 5px; a { display: block; padding: 1px 7px 1px; color: #555; } &:hover a, a:focus { background: darken($white, 10%); } &.unavailable a { cursor: default; color: #999; } &.unavailable:hover a, &.unavailable a:focus { background: transparent; } &.current a { background: $mainColor; color: $white; font-weight: bold; cursor: default; &:hover { background: $mainColor; } } } } /* Breadcrums ---------------------- */ ul.breadcrumbs { display: block; background: lighten($secondaryColor, 5%); padding: 6px 10px 7px; border: 1px solid $secondaryColor; @include border-radius(2px); overflow: hidden; margin-#{$defaultFloat}: 0; li { margin: 0; padding: 0 12px 0 0; float: $defaultFloat; list-style: none; a, span { text-transform: uppercase; @include font-size(11); padding-#{$defaultFloat}: 12px; } &:first-child a, &:first-child span { padding-#{$defaultFloat}: 0; } } li:before { content: "/"; color: #aaa; } li:first-child:before { content: " "; } li.current a { cursor: default; color: #333; } li:hover a, li a:focus { text-decoration: underline; } li.current:hover a, li.current a:focus { text-decoration: none; } li.unavailable { a { color: #999; } &:hover a, a:focus { text-decoration: none; color: #999; cursor: default; } } } /* Inline Link List */ ul.inline-list, ul.link-list { margin: 0 0 $linkListBottomMargin; padding: 0; list-style: none; overflow: hidden; & > li { list-style: none; float: $defaultFloat; margin-#{$defaultFloat}: 22px; display: block; & > * { display: block; } } } /* Keytroke Characters ---------------------- */ .keystroke, kbd { font-family: "Consolas", "Menlo", "Courier", monospace; font-size: ms(0) - 1; padding: 2px 4px 0px; margin: 0; background: darken($white, 7%); border: solid 1px darken($white, 14%); @include border-radius($buttonRadius); } /* Image Thumbnails ---------------------- */ .th { display: block; img { display: block; border: solid 4px #fff; @include box-shadow(0 0 0 1px rgba(#000,.2)); @include border-radius($thumbRadius); @include transition-property(box-shadow); @include transition-duration(300ms); } &:hover { img { @include box-shadow(0 0 6px 1px rgba($mainColor,.5)); } } } /* Video - Mad props to http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ ---------------------- */ .flex-video { position: relative; padding-top: 25px; padding-bottom: 67.5%; height: 0; margin-bottom: 16px; overflow: hidden; &.widescreen { padding-bottom: 57.25%; } &.vimeo { padding-top: 0; } iframe, object, embed, video { position: absolute; top: 0; #{$defaultFloat}: 0; width: 100%; height: 100%; } } /* Tables ---------------------- */ table { background: #fff; @include border-radius($tableBorderRadius); margin: 0 0 18px; border: 1px solid #ddd; } table thead, table tfoot { background: #f5f5f5; } table thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoot tr td { display: table-cell; font-size: ms(0); line-height: 18px; text-align: #{$defaultFloat}; } table thead tr th, table tfoot tr td { padding: 8px 10px 9px; font-size: ms(0); font-weight: bold; color: #222; } table thead tr th:first-child, table tfoot tr td:first-child { border-#{$defaultFloat}: none; } table thead tr th:last-child, table tfoot tr td:last-child { border-#{$defaultOpposite}: none; } table tbody tr.even, table tbody tr.alt { background: #f9f9f9; } table tbody tr:nth-child(even) { background: #f9f9f9; } table tbody tr td { color: #333; padding: 9px 10px; vertical-align: top; border: none; } /* Microformats ---------------------- */ ul.vcard { display: inline-block; margin: 0 0 12px 0; border: 1px solid #ddd; padding: 10px; li { margin: 0; display: block; } li.fn { font-weight: bold; font-size: ms(0) + 1; } } p.vevent { span.summary { font-weight: bold; } abbr { cursor: default; text-decoration: none; font-weight: bold; border: none; padding: 0 1px; } } /* Progress Bar ---------------------- */ div.progress { padding: $progBarPad; margin-bottom: 10px; border: $progBarBorderSize solid $progBarBorderColor; height: $progBarHeight; /* meter */ .meter { background: $mainColor; height: 100%; display: block; width:50%; } &.secondary .meter { background: $secondaryColor;} &.success .meter { background: $successColor;} &.alert .meter { background: $alertColor;} /* border radii */ &.radius { @include border-radius($buttonRadius); .meter { @include border-radius(2px); } } &.round { @include border-radius(1000px); .meter { @include border-radius(1000px); } } } /* Pricing Tables ---------------------- */ .pricing-table { border: $priceTableBorder; margin-left: 0; margin-bottom: 20px; & * { list-style: none; line-height: 1; } .title { background-color: $priceTitleBgColor; padding: $priceTitlePadding; text-align: $priceTitleAlign; color: $priceTitleColor; font-weight: $priceTitleWeight; font-size: $priceTitleSize; } .price { background-color: $priceMoneyBgColor; padding: $priceMoneyPadding; text-align: $priceMoneyAlign; color: $priceMoneyColor; font-weight: $priceMoneyWeight; font-size: $priceMoneySize; } .description { background-color: $priceBgColor; padding: $priceDescPadding; text-align: $priceDescAlign; color: $priceDescColor; font-size: $priceDescFontSize; font-weight: $priceDescWeight; line-height: $priceDescLineHeight; border-bottom: $priceDescBtmBorder; } .bullet-item { background-color: $priceBgColor; padding: $priceItemPadding; text-align: $priceItemAlign; color: $priceItemColor; font-size: $priceItemFontSize; font-weight: $priceItemWeight; border-bottom: $priceItemBtmBorder; } .cta-button { background-color: $priceCtaBgColor; text-align: $priceCtaAlign; padding: $priceCtaPadding; } }