wip
This commit is contained in:
Ariejan de Vroom
parent
2f2f412b45
commit
83c44eaafd
2
Gemfile
2
Gemfile
|
|
@ -11,6 +11,8 @@ gem 'builder'
|
|||
|
||||
gem 'sass'
|
||||
gem 'compass'
|
||||
gem 'bourbon'
|
||||
gem 'neat'
|
||||
|
||||
gem 'typogruby'
|
||||
gem 'nanoc-cachebuster'
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ GEM
|
|||
specs:
|
||||
adsf (1.1.1)
|
||||
rack (>= 1.0.0)
|
||||
bourbon (3.1.8)
|
||||
sass (>= 3.2.0)
|
||||
thor
|
||||
builder (3.2.2)
|
||||
chunky_png (1.2.8)
|
||||
coffee-script (2.2.0)
|
||||
|
|
@ -32,6 +35,9 @@ GEM
|
|||
nanoc (>= 3.3.0)
|
||||
nanoc-javascript-concatenator (0.0.2)
|
||||
nanoc (>= 3.3.0)
|
||||
neat (1.3.0)
|
||||
bourbon (>= 2.1)
|
||||
sass (>= 3.2)
|
||||
nokogiri (1.6.0)
|
||||
mini_portile (~> 0.5.0)
|
||||
posix-spawn (0.3.6)
|
||||
|
|
@ -44,6 +50,7 @@ GEM
|
|||
rubypants (0.2.0)
|
||||
sass (3.2.9)
|
||||
systemu (2.5.2)
|
||||
thor (0.18.1)
|
||||
tilt (1.4.1)
|
||||
typogruby (1.0.15)
|
||||
rubypants
|
||||
|
|
@ -60,6 +67,7 @@ PLATFORMS
|
|||
|
||||
DEPENDENCIES
|
||||
adsf
|
||||
bourbon
|
||||
builder
|
||||
coffee-script
|
||||
compass
|
||||
|
|
@ -70,6 +78,7 @@ DEPENDENCIES
|
|||
nanoc
|
||||
nanoc-cachebuster
|
||||
nanoc-javascript-concatenator
|
||||
neat
|
||||
nokogiri
|
||||
pygments.rb
|
||||
rack
|
||||
|
|
|
|||
12
Rules
12
Rules
|
|
@ -1,12 +1,15 @@
|
|||
#!/usr/bin/env ruby
|
||||
|
||||
puts "=" * 76
|
||||
SASS_LOAD_PATHS = [
|
||||
File.join(`bundle show bourbon`.chomp, *%w[app assets stylesheets]),
|
||||
File.join(`bundle show neat`.chomp, *%w[app assets stylesheets])
|
||||
]
|
||||
|
||||
if ENV['NANOC_ENV'] == "production"
|
||||
puts " > Running in PRODUCTION mode"
|
||||
else
|
||||
puts " > Running in DEVELOPMENT mode"
|
||||
end
|
||||
puts "=" * 76
|
||||
|
||||
preprocess do
|
||||
if ENV['NANOC_ENV'] == "production"
|
||||
|
|
@ -37,9 +40,8 @@ compile '/sitemap/', :rep => 'gzip' do
|
|||
end
|
||||
|
||||
# Use screen.scss as the single entry point for styles, ignore everything else in /assets/css
|
||||
|
||||
compile '/css/screen/' do
|
||||
filter :sass, :syntax => :scss if @item[:extension] == 'scss'
|
||||
filter :sass, load_paths: SASS_LOAD_PATHS
|
||||
end
|
||||
|
||||
compile '/css/*' do
|
||||
|
|
@ -129,7 +131,7 @@ end
|
|||
route %r{^/(assets/.*|sitemap|robots|atom)/$} do
|
||||
ext = item[:extension]
|
||||
ext = 'js' if ext == 'coffee'
|
||||
ext = 'css' if ext == 'scss'
|
||||
ext = 'css' if ext =~ /s[ca]ss/i
|
||||
|
||||
if ENV['NANOC_ENV'] == "production"
|
||||
fp = cachebust?(item) ? fingerprint(item[:filename]) : ''
|
||||
|
|
|
|||
28
content/css/screen.sass
Normal file
28
content/css/screen.sass
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
$turquoise: #1ABC9C
|
||||
$greensea: #16A085
|
||||
$emerland: #2ECC71
|
||||
$nephritis: #27AE60
|
||||
$peterriver: #3498DB
|
||||
$belizehole: #2980B9
|
||||
$amethyst: #9B59B6
|
||||
$wisteria: #8E44AD
|
||||
$wetasphalt: #34495E
|
||||
$midnightblue: #2C3E50
|
||||
$sunflower: #F1C40F
|
||||
$orange: #F39C12
|
||||
$carrot: #E67E22
|
||||
$pumpkin: #D35400
|
||||
$alizarin: #E74C3C
|
||||
$pomegranate: #C0392B
|
||||
$clouds: #ECF0F1
|
||||
$silver: #BDC3C7
|
||||
$concrete: #95A5A6
|
||||
$asbestos: #7F8C8D
|
||||
|
||||
$border-radius: 6px
|
||||
|
||||
@import "pygments"
|
||||
|
||||
@import "bourbon"
|
||||
@import "neat"
|
||||
|
||||
|
|
@ -1,348 +0,0 @@
|
|||
$turquoise: #1ABC9C;
|
||||
$greensea: #16A085;
|
||||
$emerland: #2ECC71;
|
||||
$nephritis: #27AE60;
|
||||
$peterriver: #3498DB;
|
||||
$belizehole: #2980B9;
|
||||
$amethyst: #9B59B6;
|
||||
$wisteria: #8E44AD;
|
||||
$wetasphalt: #34495E;
|
||||
$midnightblue: #2C3E50;
|
||||
$sunflower: #F1C40F;
|
||||
$orange: #F39C12;
|
||||
$carrot: #E67E22;
|
||||
$pumpkin: #D35400;
|
||||
$alizarin: #E74C3C;
|
||||
$pomegranate: #C0392B;
|
||||
$clouds: #ECF0F1;
|
||||
$silver: #BDC3C7;
|
||||
$concrete: #95A5A6;
|
||||
$asbestos: #7F8C8D;
|
||||
|
||||
$border-radius: 6px;
|
||||
|
||||
@import "zurb-foundation/normalize.scss";
|
||||
@import "zurb-foundation/foundation.scss";
|
||||
@import "pygments";
|
||||
|
||||
html > body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
background-color: #ffffff;
|
||||
|
||||
font-size: 14px;
|
||||
font-family: "PT Sans", helvetica, arial;
|
||||
}
|
||||
|
||||
a, a:hover, a:visited, a:active {
|
||||
color: $peterriver;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header#title {
|
||||
background-color: $peterriver;
|
||||
|
||||
border-bottom: 3px solid $belizehole;
|
||||
|
||||
margin: 0;
|
||||
padding: 12px 12px 0 12px;
|
||||
|
||||
text-align: center;
|
||||
|
||||
#header-wrapper {
|
||||
@include grid-row;
|
||||
padding-bottom: 0;
|
||||
|
||||
h1 {
|
||||
margin: 12px 0;
|
||||
|
||||
font-family: "Lato", arial;
|
||||
font-weight: 900;
|
||||
font-size: 28px;
|
||||
letter-spacing: 4px;
|
||||
|
||||
display: inline-block;
|
||||
color: $peterriver;
|
||||
background-color: #fff;
|
||||
padding: 4px 16px;
|
||||
border-radius: $border-radius;
|
||||
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav#social {
|
||||
text-align: center;
|
||||
background-color: $peterriver;
|
||||
|
||||
margin-top: 0;
|
||||
padding-bottom: 16px;
|
||||
|
||||
ol {
|
||||
list-style-type: none;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
|
||||
margin: 0 4px;
|
||||
|
||||
a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav#primary {
|
||||
text-align: center;
|
||||
background-color: $peterriver;
|
||||
|
||||
padding-bottom: 24px;
|
||||
|
||||
ol {
|
||||
list-style-type: none;
|
||||
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
font-size: 18px;
|
||||
font-family: "Lato", arial;
|
||||
|
||||
background-color: $belizehole;
|
||||
padding: 4px 8px;
|
||||
margin: 3px;
|
||||
|
||||
border-radius: $border-radius;
|
||||
|
||||
a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
@include grid-row;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
border-radius: 64px;
|
||||
background: url(https://secure.gravatar.com/avatar/a9bfdd0cc75c857b669c37548b8bfdf9?s=256) no-repeat;
|
||||
background-size: 128px 128px;
|
||||
|
||||
margin: 32px auto 32px auto;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin: 12px;
|
||||
|
||||
article.post, article.page {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Lato';
|
||||
}
|
||||
|
||||
.meta {
|
||||
margin-top: -18px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section#posts {
|
||||
h2.year {
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
border-bottom: 3px solid $silver;
|
||||
}
|
||||
|
||||
.post-listing {
|
||||
margin-bottom: 1.75em;
|
||||
|
||||
h3.title {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.summary {
|
||||
margin-top: -12px;
|
||||
|
||||
p {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.post {
|
||||
section#main {
|
||||
@include grid-column(8, false, false, 2);
|
||||
}
|
||||
|
||||
section#sidebar {
|
||||
@include grid-column(3);
|
||||
}
|
||||
}
|
||||
|
||||
section.page {
|
||||
@include grid-column(12);
|
||||
}
|
||||
|
||||
footer {
|
||||
@include grid-row;
|
||||
clear: both;
|
||||
|
||||
.copyright {
|
||||
@include grid-column(12);
|
||||
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
|
||||
color: $concrete;
|
||||
|
||||
ul.tla {
|
||||
color: $silver;
|
||||
|
||||
list-style-type: none;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre, .plaincode{
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: none;
|
||||
|
||||
font-size: 12px;
|
||||
overflow: visible;
|
||||
|
||||
padding: 6px 6px;
|
||||
margin: 0;
|
||||
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
|
||||
white-space: pre;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.plaincode {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.code {
|
||||
overflow: auto;
|
||||
margin: 0 0 11px 0;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
background: inherit;
|
||||
|
||||
td, th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.linenodiv {
|
||||
background-color: #f4f4f4;
|
||||
color: #AAA;
|
||||
padding: 0 0.5em;
|
||||
border-right: 1px solid #DDD;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
td.code {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
ul {
|
||||
margin-left: 0 !important;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
p.instruct {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.adpack {
|
||||
float: right;
|
||||
margin-left: 6px;
|
||||
|
||||
.bsa_it_ad {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
padding: 10px 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
max-width: 130px;
|
||||
}
|
||||
|
||||
.bsa_it_ad:hover img {
|
||||
-moz-box-shadow: 0 0 3px #000;
|
||||
-webkit-box-shadow: 0 0 3px #000;
|
||||
box-shadow: 0 0 3px #000;
|
||||
}
|
||||
|
||||
.bsa_it_ad .bsa_it_i {
|
||||
display: block;
|
||||
padding: 0;
|
||||
float: none;
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
|
||||
.bsa_it_ad .bsa_it_i img {
|
||||
padding: 0;
|
||||
border: none;
|
||||
min-width: 130px;
|
||||
}
|
||||
|
||||
.bsa_it_ad .bsa_it_t {
|
||||
padding: 3px 0;
|
||||
display: block;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.bsa_it_ad .bsa_it_d {
|
||||
padding: 0;
|
||||
font-size: 11px;
|
||||
color: #696969;
|
||||
}
|
||||
|
||||
.bsa_it_p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#bsap_aplink,
|
||||
#bsap_aplink:hover {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
46
content/css/zurb-foundation/foundation.scss
vendored
46
content/css/zurb-foundation/foundation.scss
vendored
|
|
@ -1,46 +0,0 @@
|
|||
// Make sure the charset is set appropriately
|
||||
@charset "UTF-8";
|
||||
|
||||
// This includes all of the foundation global elements that are needed to work with any of the other files.
|
||||
@import "foundation/foundation-global";
|
||||
|
||||
// Foundation Components
|
||||
@import
|
||||
"foundation/components/global",
|
||||
"foundation/components/grid",
|
||||
"foundation/components/visibility",
|
||||
"foundation/components/block-grid",
|
||||
"foundation/components/type",
|
||||
"foundation/components/buttons",
|
||||
"foundation/components/forms",
|
||||
"foundation/components/custom-forms",
|
||||
"foundation/components/button-groups",
|
||||
"foundation/components/dropdown-buttons",
|
||||
"foundation/components/split-buttons",
|
||||
"foundation/components/flex-video",
|
||||
"foundation/components/section",
|
||||
"foundation/components/top-bar",
|
||||
"foundation/components/orbit",
|
||||
"foundation/components/reveal",
|
||||
"foundation/components/joyride",
|
||||
"foundation/components/clearing",
|
||||
"foundation/components/alert-boxes",
|
||||
"foundation/components/breadcrumbs",
|
||||
"foundation/components/keystrokes",
|
||||
"foundation/components/labels",
|
||||
"foundation/components/inline-lists",
|
||||
"foundation/components/pagination",
|
||||
"foundation/components/panels",
|
||||
"foundation/components/pricing-tables",
|
||||
"foundation/components/progress-bars",
|
||||
"foundation/components/side-nav",
|
||||
"foundation/components/sub-nav",
|
||||
"foundation/components/switch",
|
||||
"foundation/components/magellan",
|
||||
"foundation/components/tables",
|
||||
"foundation/components/thumbs",
|
||||
"foundation/components/tooltips",
|
||||
"foundation/components/dropdown";
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,198 +0,0 @@
|
|||
// Foundation Global Function, Variables and Mixins
|
||||
//
|
||||
// Variables
|
||||
//
|
||||
|
||||
// The default font-size is set to 100% of the browser style sheet (usually 16px)
|
||||
// for compatibility with brower-based text zoom or user-set defaults.
|
||||
$base-font-size: 100% !default;
|
||||
|
||||
// Set your base font-size in pixels so emCalc can do its magic below
|
||||
$em-base: 16px !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-weight: normal !default;
|
||||
$body-font-style: normal !default;
|
||||
|
||||
// We use these to control text direction settings
|
||||
$text-direction: ltr !default; // Controls default global text direction, 'rtl' or 'ltr'
|
||||
$default-float: left !default;
|
||||
$opposite-direction: right !default;
|
||||
// No need to change this conditional statement, $text-direction variable controls it all.
|
||||
@if $text-direction == ltr {
|
||||
$default-float: left;
|
||||
$opposite-direction: right;
|
||||
} @else {
|
||||
$default-float: right;
|
||||
$opposite-direction: left;
|
||||
}
|
||||
|
||||
// We use these as default colors throughout
|
||||
$primary-color: #2ba6cb !default;
|
||||
$secondary-color: #e9e9e9 !default;
|
||||
$alert-color: #c60f13 !default;
|
||||
$success-color: #5da423 !default;
|
||||
|
||||
// We use these to make sure border radius matches unless we want it different.
|
||||
$global-radius: 3px !default;
|
||||
$global-rounded: 1000px !default;
|
||||
|
||||
// We use these to control inset shadow shiny edges and depressions.
|
||||
$shiny-edge-size: 0 1px 0 !default;
|
||||
$shiny-edge-color: rgba(#fff, .5) !default;
|
||||
$shiny-edge-active-color: rgba(#000, .2) !default;
|
||||
|
||||
// We use this to control whether or not CSS classes come through in the gem files.
|
||||
$include-html-classes: true !default;
|
||||
$include-print-styles: true !default;
|
||||
|
||||
$include-html-grid-classes: $include-html-classes !default;
|
||||
$include-html-visibility-classes: $include-html-classes !default;
|
||||
$include-html-button-classes: $include-html-classes !default;
|
||||
$include-html-form-classes: $include-html-classes !default;
|
||||
$include-html-media-classes: $include-html-classes !default;
|
||||
$include-html-section-classes: $include-html-classes !default;
|
||||
$include-html-reveal-classes: $include-html-classes !default;
|
||||
$include-html-alert-classes: $include-html-classes !default;
|
||||
$include-html-nav-classes: $include-html-classes !default;
|
||||
$include-html-label-classes: $include-html-classes !default;
|
||||
$include-html-panel-classes: $include-html-classes !default;
|
||||
$include-html-pricing-classes: $include-html-classes !default;
|
||||
$include-html-progress-classes: $include-html-classes !default;
|
||||
$include-html-magellan-classes: $include-html-classes !default;
|
||||
|
||||
//
|
||||
// Functions
|
||||
//
|
||||
|
||||
// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
|
||||
@function emCalc($pxWidth) {
|
||||
@return $pxWidth / $em-base * 1em;
|
||||
}
|
||||
|
||||
// Creating rems and pixels
|
||||
@function remCalc($pxWidth) {
|
||||
@return $pxWidth / $em-base * 1rem;
|
||||
}
|
||||
|
||||
// Grid Calculation for Percentages
|
||||
@function gridCalc($colNumber, $totalColumns) {
|
||||
@return percentage(($colNumber / $totalColumns));
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Mixins
|
||||
//
|
||||
|
||||
// We use this to control border radius.
|
||||
@mixin radius($radius:$global-radius) {
|
||||
@if $radius {
|
||||
-webkit-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this to create equal side border radius on elements.
|
||||
@mixin side-radius($side, $radius) {
|
||||
@include radius(0);
|
||||
@if $side == left {
|
||||
-moz-border-radius-bottomleft: $radius;
|
||||
-moz-border-radius-topleft: $radius;
|
||||
-webkit-border-bottom-left-radius: $radius;
|
||||
-webkit-border-top-left-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
@else if $side == right {
|
||||
-moz-border-radius-topright: $radius;
|
||||
-moz-border-radius-bottomright: $radius;
|
||||
-webkit-border-top-right-radius: $radius;
|
||||
-webkit-border-bottom-right-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
@else if $side == top {
|
||||
-moz-border-radius-topright: $radius;
|
||||
-moz-border-radius-topleft: $radius;
|
||||
-webkit-border-top-right-radius: $radius;
|
||||
-webkit-border-top-left-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
border-top-left-radius: $radius;
|
||||
}
|
||||
@else if $side == bottom {
|
||||
-moz-border-radius-bottomright: $radius;
|
||||
-moz-border-radius-bottomleft: $radius;
|
||||
-webkit-border-bottom-right-radius: $radius;
|
||||
-webkit-border-bottom-left-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
// We can control whether or not we have inset shadows edges.
|
||||
@mixin inset-shadow($active:true) {
|
||||
-webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
|
||||
box-shadow: $shiny-edge-size $shiny-edge-color inset;
|
||||
|
||||
@if $active { &:active {
|
||||
-webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
|
||||
box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
|
||||
}
|
||||
|
||||
// We use this to add transitions to elements
|
||||
@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
|
||||
-webkit-transition: $property $speed $ease;
|
||||
-moz-transition: $property $speed $ease;
|
||||
transition: $property $speed $ease;
|
||||
}
|
||||
|
||||
// We use this to add box-sizing across browser prefixes
|
||||
@mixin box-sizing($type:border-box) {
|
||||
-moz-box-sizing: $type;
|
||||
-webkit-box-sizing: $type;
|
||||
box-sizing: $type;
|
||||
}
|
||||
|
||||
// We use this to create equalateral triangles
|
||||
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: solid $triangle-size;
|
||||
@if ($triangle-direction == top) {
|
||||
border-color: $triangle-color transparent transparent transparent;
|
||||
}
|
||||
@if ($triangle-direction == bottom) {
|
||||
border-color: transparent transparent $triangle-color transparent;
|
||||
}
|
||||
@if ($triangle-direction == left) {
|
||||
border-color: transparent transparent transparent $triangle-color;
|
||||
}
|
||||
@if ($triangle-direction == right) {
|
||||
border-color: transparent $triangle-color transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this to do clear floats
|
||||
@mixin clearfix() {
|
||||
*zoom:1;
|
||||
&:before, &:after { content: " "; display: table; }
|
||||
&:after { clear: both; }
|
||||
}
|
||||
|
||||
// Media Queries
|
||||
$small-screen: emCalc(768px) !default;
|
||||
$medium-screen: emCalc(1280px) !default;
|
||||
$large-screen: emCalc(1440px) !default;
|
||||
|
||||
$screen: "only screen" !default;
|
||||
$small: "only screen and (min-width:"#{$small-screen}")" !default;
|
||||
$medium: "only screen and (min-width:"#{$medium-screen}")" !default;
|
||||
$large: "only screen and (min-width:"#{$large-screen}")" !default;
|
||||
$landscape: "only screen and (orientation: landscape)" !default;
|
||||
$portrait: "only screen and (orientation: portrait)" !default;
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
//
|
||||
// Alert Variables
|
||||
//
|
||||
|
||||
// We use this to control alert padding.
|
||||
$alert-padding-top: emCalc(11px) !default;
|
||||
$alert-padding-default-float: $alert-padding-top !default;
|
||||
$alert-padding-opposite-direction: $alert-padding-top + emCalc(10px) !default;
|
||||
$alert-padding-bottom: $alert-padding-top + emCalc(1px) !default;
|
||||
|
||||
// We use these to control text style.
|
||||
$alert-font-weight: bold !default;
|
||||
$alert-font-size: emCalc(14px) !default;
|
||||
$alert-font-color: #fff !default;
|
||||
$alert-font-color-alt: darken($secondary-color, 60%) !default;
|
||||
|
||||
// We use this for close hover effect.
|
||||
$alert-function-factor: 10% !default;
|
||||
|
||||
// We use these to control border styles.
|
||||
$alert-border-style: solid !default;
|
||||
$alert-border-width: 1px !default;
|
||||
$alert-border-color: darken($primary-color, $alert-function-factor) !default;
|
||||
$alert-bottom-margin: emCalc(20px) !default;
|
||||
|
||||
// We use these to style the close buttons
|
||||
$alert-close-color: #333 !default;
|
||||
$alert-close-position: emCalc(5px) !default;
|
||||
$alert-close-font-size: emCalc(22px) !default;
|
||||
$alert-close-opacity: 0.3 !default;
|
||||
$alert-close-opacity-hover: 0.5 !default;
|
||||
$alert-close-padding: 5px 4px 4px !default;
|
||||
|
||||
// We use this to control border radius
|
||||
$alert-radius: $global-radius !default;
|
||||
|
||||
//
|
||||
// Alert Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create a default alert base.
|
||||
@mixin alert-base {
|
||||
border-style: $alert-border-style;
|
||||
border-width: $alert-border-width;
|
||||
display: block;
|
||||
font-weight: $alert-font-weight;
|
||||
margin-bottom: $alert-bottom-margin;
|
||||
position: relative;
|
||||
padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float;
|
||||
font-size: $alert-font-size;
|
||||
}
|
||||
|
||||
// We use this mixin to add alert styles
|
||||
@mixin alert-style($bg:$primary-color) {
|
||||
|
||||
// This find the lightness percentage of the background color.
|
||||
$bg-lightness: lightness($bg);
|
||||
|
||||
// We control which background color and border come through.
|
||||
background-color: $bg;
|
||||
border-color: darken($bg, $alert-function-factor);
|
||||
|
||||
// We control the text color for you based on the background color.
|
||||
@if $bg-lightness > 70% { color: $alert-font-color-alt; }
|
||||
@else { color: $alert-font-color; }
|
||||
|
||||
}
|
||||
|
||||
// We use this to create the close button.
|
||||
@mixin alert-close {
|
||||
font-size: $alert-close-font-size;
|
||||
padding: $alert-close-padding;
|
||||
line-height: 0;
|
||||
position: absolute;
|
||||
top: $alert-close-position + emCalc(2px);
|
||||
#{$opposite-direction}: $alert-close-position;
|
||||
color: $alert-close-color;
|
||||
opacity: $alert-close-opacity;
|
||||
&:hover,
|
||||
&:focus { opacity: $alert-close-opacity-hover; }
|
||||
}
|
||||
|
||||
// We use this to quickly create alerts with a single mixin.
|
||||
@mixin alert($bg:$primary-color, $radius:false) {
|
||||
@include alert-base;
|
||||
@include alert-style($bg);
|
||||
@include radius($radius);
|
||||
}
|
||||
|
||||
@if $include-html-alert-classes {
|
||||
|
||||
/* Foundation Alerts */
|
||||
.alert-box {
|
||||
@include alert;
|
||||
|
||||
.close { @include alert-close; }
|
||||
|
||||
&.radius { @include radius($alert-radius); }
|
||||
&.round { @include radius($global-rounded); }
|
||||
|
||||
&.success { @include alert-style($success-color); }
|
||||
&.alert { @include alert-style($alert-color); }
|
||||
&.secondary { @include alert-style($secondary-color); }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
//
|
||||
// Block Grid Variables
|
||||
//
|
||||
|
||||
// We use this to control the maximum number of block grid elements per row
|
||||
$block-grid-elements: 12 !default;
|
||||
$block-grid-default-spacing: 10px !default;
|
||||
|
||||
// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
|
||||
$block-grid-media-queries: true !default;
|
||||
|
||||
//
|
||||
// Block Grid Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create different block-grids. You can apply per-row and spacing options.
|
||||
// Setting $base-style to false will ommit default styles.
|
||||
@mixin block-grid($per-row:false, $spacing:$block-grid-default-spacing, $base-style:true) {
|
||||
|
||||
@if $base-style {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0 (-$spacing);
|
||||
@include clearfix;
|
||||
|
||||
&>li {
|
||||
display: block;
|
||||
height: auto;
|
||||
float: $default-float;
|
||||
padding: 0 $spacing $spacing;
|
||||
}
|
||||
}
|
||||
|
||||
@if $per-row {
|
||||
&>li {
|
||||
width: 100%/$per-row;
|
||||
padding: 0 $spacing $spacing;
|
||||
|
||||
&:nth-of-type(#{$per-row}n+1) { clear: both; }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $block-grid-media-queries {
|
||||
/* Foundation Block Grids for below small breakpoint */
|
||||
@media only screen {
|
||||
[class*="block-grid-"] { @include block-grid; }
|
||||
|
||||
@for $i from 1 through $block-grid-elements {
|
||||
.small-block-grid-#{($i)} {
|
||||
@include block-grid($i,$block-grid-default-spacing,false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Foundation Block Grids for above small breakpoint */
|
||||
@media #{$small} {
|
||||
@for $i from 1 through $block-grid-elements {
|
||||
.large-block-grid-#{($i)} {
|
||||
@include block-grid($i,$block-grid-default-spacing,false);
|
||||
}
|
||||
}
|
||||
[class*="small-block-grid-"] > li { clear: none !important; }
|
||||
}
|
||||
}
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
//
|
||||
// Breadcrumb Variables
|
||||
//
|
||||
|
||||
// We use this to set the background color for the breadcrumb container.
|
||||
$crumb-bg: lighten($secondary-color, 5%) !default;
|
||||
|
||||
// We use these to set the padding around the breadcrumbs.
|
||||
$crumb-padding: emCalc(6px) emCalc(14px) emCalc(9px) !default;
|
||||
$crumb-side-padding: emCalc(12px) !default;
|
||||
|
||||
// We use these to control border styles.
|
||||
$crumb-function-factor: 10% !default;
|
||||
$crumb-border-size: 1px !default;
|
||||
$crumb-border-style: solid !default;
|
||||
$crumb-border-color: darken($crumb-bg, $crumb-function-factor) !default;
|
||||
$crumb-radius: $global-radius !default;
|
||||
|
||||
// We use these to set various text styles for breadcrumbs.
|
||||
$crumb-font-size: emCalc(11px) !default;
|
||||
$crumb-font-color: $primary-color !default;
|
||||
$crumb-font-color-current: #333 !default;
|
||||
$crumb-font-color-unavailable: #999 !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: "/" !default;
|
||||
|
||||
//
|
||||
// Breakcrumb Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create a container around our breadcrumbs
|
||||
@mixin crumb-container {
|
||||
display: block;
|
||||
padding: $crumb-padding;
|
||||
overflow: hidden;
|
||||
margin-#{$default-float}: 0;
|
||||
list-style: none;
|
||||
border-style: $crumb-border-style;
|
||||
border-width: $crumb-border-size;
|
||||
|
||||
// We control which background color and border come through.
|
||||
background-color: $crumb-bg;
|
||||
border-color: $crumb-border-color;
|
||||
}
|
||||
|
||||
// We use this mixin to create breadcrumb styles from list items.
|
||||
@mixin crumbs {
|
||||
|
||||
// A normal state will make the links look and act like clickable breadcrumbs.
|
||||
margin: 0;
|
||||
padding: 0 $crumb-side-padding 0 0;
|
||||
float: $default-float;
|
||||
|
||||
&:hover a,
|
||||
&:focus a { text-decoration: $crumb-link-decor; }
|
||||
|
||||
a,
|
||||
span {
|
||||
font-size: $crumb-font-size;
|
||||
padding-#{$default-float}: $crumb-side-padding;
|
||||
text-transform: $crumb-font-transform;
|
||||
color: $crumb-font-color;
|
||||
}
|
||||
|
||||
// Current is for the link of the current page
|
||||
&.current {
|
||||
a {
|
||||
cursor: default;
|
||||
color: $crumb-font-color-current;
|
||||
}
|
||||
|
||||
&:hover a,
|
||||
&:focus a { text-decoration: none; }
|
||||
}
|
||||
|
||||
// Unavailable removed color and link styles so it looks inactive.
|
||||
&.unavailable {
|
||||
a { color: $crumb-font-color-unavailable; }
|
||||
|
||||
&:hover a,
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
color: $crumb-font-color-unavailable;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "#{$crumb-slash}";
|
||||
color: $crumb-slash-color;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
&:first-child a,
|
||||
&:first-child span { padding-#{$default-float}: 0; }
|
||||
&:first-child:before { content: " "; }
|
||||
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-nav-classes {
|
||||
|
||||
/* Breadcrumbs */
|
||||
.breadcrumbs {
|
||||
@include crumb-container;
|
||||
@include radius($crumb-radius);
|
||||
|
||||
li {
|
||||
@include crumbs;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
//
|
||||
// Button Group Variables
|
||||
//
|
||||
|
||||
// Sets the margin for the right side by default, and the left margin if right-to-left direction is used
|
||||
$button-bar-margin-opposite: emCalc(10px) !default;
|
||||
|
||||
//
|
||||
// Button Group Mixins
|
||||
//
|
||||
|
||||
// We use this to add styles for a button group container
|
||||
@mixin button-group-container($styles:true, $float:false) {
|
||||
@if $styles {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
@include clearfix();
|
||||
}
|
||||
@if $float {
|
||||
float: #{$default-float};
|
||||
margin-#{$opposite-direction}: $button-bar-margin-opposite;
|
||||
& div { overflow: hidden; }
|
||||
}
|
||||
}
|
||||
|
||||
// We use this to control styles for button groups
|
||||
@mixin button-group-style($radius:false, $even:false, $float:$default-float) {
|
||||
|
||||
// We use this to control the flow, or remove those styles completely.
|
||||
@if $float {
|
||||
margin: 0 0 0 -1px;
|
||||
float: $float;
|
||||
// Make sure the first child doesn't get the negative margin.
|
||||
&:first-child { margin-#{$default-float}: 0; }
|
||||
}
|
||||
|
||||
// We use these to control left and right radius on first/last buttons in the group.
|
||||
@if $radius == true {
|
||||
&:first-child, &:first-child > a, &:first-child > button { @include side-radius($default-float, $button-radius); }
|
||||
&:last-child, &:last-child > a, &:last-child > button { @include side-radius($opposite-direction, $button-radius); }
|
||||
}
|
||||
@else if $radius {
|
||||
&:first-child, &:first-child > a, &:first-child > button { @include side-radius($default-float, $radius); }
|
||||
&:last-child, &:last-child > a, &:last-child > button { @include side-radius($opposite-direction, $radius); }
|
||||
}
|
||||
|
||||
// We use this to make the buttons even width across their container
|
||||
@if $even {
|
||||
width: percentage((100/$even) / 100);
|
||||
.button { width: 100%; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Only include these CSS classes if $include-html-classes: true
|
||||
@if $include-html-button-classes {
|
||||
|
||||
/* Button Groups */
|
||||
.button-group { @include button-group-container;
|
||||
|
||||
&> * { @include button-group-style(); }
|
||||
|
||||
&.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
|
||||
&.round > * { @include button-group-style($radius:$button-round, $float:null); }
|
||||
|
||||
@for $i from 2 through 8 {
|
||||
&.even#{-$i} li { @include button-group-style($even:$i, $float:null); }
|
||||
}
|
||||
}
|
||||
|
||||
.button-bar {
|
||||
@include clearfix;
|
||||
.button-group { @include button-group-container($styles:false,$float:true); }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,219 +0,0 @@
|
|||
//
|
||||
// Button Variables
|
||||
//
|
||||
|
||||
// We use these to build padding for buttons.
|
||||
$button-med: emCalc(12px) !default;
|
||||
$button-tny: emCalc(7px) !default;
|
||||
$button-sml: emCalc(9px) !default;
|
||||
$button-lrg: emCalc(16px) !default;
|
||||
|
||||
// We use this to control the display property.
|
||||
$button-display: inline-block !default;
|
||||
$button-margin-bottom: emCalc(20px) !default;
|
||||
|
||||
// We use these to control button text styles.
|
||||
$button-font-family: inherit !default;
|
||||
$button-font-color: #fff !default;
|
||||
$button-font-color-alt: #333 !default;
|
||||
$button-font-med: emCalc(16px) !default;
|
||||
$button-font-tny: emCalc(11px) !default;
|
||||
$button-font-sml: emCalc(13px) !default;
|
||||
$button-font-lrg: emCalc(20px) !default;
|
||||
$button-font-weight: bold !default;
|
||||
$button-font-align: center !default;
|
||||
|
||||
// We use these to control various hover effects.
|
||||
$button-function-factor: 10% !default;
|
||||
|
||||
// We use these to control button border styles.
|
||||
$button-border-width: 1px !default;
|
||||
$button-border-style: solid !default;
|
||||
$button-border-color: darken($primary-color, $button-function-factor) !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.
|
||||
$button-disabled-opacity: 0.6 !default;
|
||||
|
||||
|
||||
//
|
||||
// Button Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create a default button base.
|
||||
@mixin button-base($style:true, $display:$button-display) {
|
||||
@if $style {
|
||||
border-style: $button-border-style;
|
||||
border-width: $button-border-width;
|
||||
cursor: pointer;
|
||||
font-family: $button-font-family;
|
||||
font-weight: $button-font-weight;
|
||||
line-height: 1;
|
||||
margin: 0 0 $button-margin-bottom;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
text-align: $button-font-align;
|
||||
}
|
||||
@if $display { display: $display; }
|
||||
}
|
||||
|
||||
// We use this mixin to add button size styles
|
||||
@mixin button-size($padding:$button-med, $full-width:false, $is-input:false) {
|
||||
|
||||
// We control which padding styles come through,
|
||||
// these can be turned off by setting $padding:false
|
||||
@if $padding {
|
||||
padding-top: $padding;
|
||||
padding-#{$opposite-direction}: $padding * 2;
|
||||
padding-bottom: $padding + emCalc(1px);
|
||||
padding-#{$default-float}: $padding * 2;
|
||||
|
||||
// We control the font-size based on mixin input.
|
||||
@if $padding == $button-med { font-size: $button-font-med; }
|
||||
@else if $padding == $button-tny { font-size: $button-font-tny; }
|
||||
@else if $padding == $button-sml { font-size: $button-font-sml; }
|
||||
@else if $padding == $button-lrg { font-size: $button-font-lrg; }
|
||||
@else { font-size: $padding - emCalc(2px); }
|
||||
}
|
||||
|
||||
// We can set $full-width:true to remove side padding extend width.
|
||||
@if $full-width {
|
||||
padding-top: $padding;
|
||||
padding-#{$opposite-direction}: 0px;
|
||||
padding-bottom: $padding + emCalc(1px);
|
||||
padding-#{$default-float}: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// <input>'s and <button>'s take on strange padding. We added this to help fix that.
|
||||
@if $is-input == $button-lrg {
|
||||
padding-top: $is-input + emCalc(.5px);
|
||||
padding-bottom: $is-input + emCalc(.5px);
|
||||
}
|
||||
@else if $is-input {
|
||||
padding-top: $is-input + emCalc(1px);
|
||||
padding-bottom: $is-input;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this mixin to add button color styles
|
||||
@mixin button-style($bg:$primary-color, $radius:false, $disabled:false) {
|
||||
|
||||
// We control which background styles are used,
|
||||
// these can be removed by setting $bg:false
|
||||
@if $bg {
|
||||
// This find the lightness percentage of the background color.
|
||||
$bg-lightness: lightness($bg);
|
||||
|
||||
background-color: $bg;
|
||||
border-color: darken($bg, $button-function-factor);
|
||||
&:hover,
|
||||
&:focus { background-color: darken($bg, $button-function-factor); }
|
||||
|
||||
// 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; }
|
||||
}
|
||||
}
|
||||
|
||||
// We can set $disabled:true to create a disabled transparent button.
|
||||
@if $disabled {
|
||||
cursor: default;
|
||||
opacity: $button-disabled-opacity;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
&:hover,
|
||||
&:focus { background-color: $bg; }
|
||||
}
|
||||
|
||||
// We can control how much button radius us used.
|
||||
@if $radius == true { @include radius($button-radius); }
|
||||
@else if $radius { @include radius($radius); }
|
||||
|
||||
}
|
||||
|
||||
// We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin"
|
||||
@mixin button($padding:$button-med, $bg:$primary-color, $radius:false, $full-width:false, $disabled:false, $is-input:false, $is-prefix:false) {
|
||||
@include button-base;
|
||||
@include button-size($padding, $full-width, $is-input);
|
||||
@include button-style($bg, $radius, $disabled);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Button Classes
|
||||
//
|
||||
|
||||
// Only include these classes if the variable is true, otherwise they'll be left out.
|
||||
@if $include-html-button-classes {
|
||||
|
||||
// Default styles applied outside of media query
|
||||
button, .button {
|
||||
@include button-base;
|
||||
@include button-size;
|
||||
@include button-style;
|
||||
|
||||
&.secondary { @include button-style($bg:$secondary-color); }
|
||||
&.success { @include button-style($bg:$success-color); }
|
||||
&.alert { @include button-style($bg:$alert-color); }
|
||||
|
||||
&.large { @include button-size($padding:$button-lrg); }
|
||||
&.small { @include button-size($padding:$button-sml); }
|
||||
&.tiny { @include button-size($padding:$button-tny); }
|
||||
&.expand { @include button-size(false,$full-width:true); }
|
||||
|
||||
&.left-align { text-align: left; text-indent: emCalc(12px); }
|
||||
&.right-align { text-align: right; padding-right: emCalc(12px); }
|
||||
|
||||
&.disabled, &[disabled] { @include button-style($bg:$primary-color, $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); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
input.button,
|
||||
button.button {
|
||||
@include button-size($padding:false, $is-input:$button-med);
|
||||
&.tiny { @include button-size($padding:false, $is-input:$button-tny); }
|
||||
&.small { @include button-size($padding:false, $is-input:$button-sml); }
|
||||
&.large { @include button-size($padding:false, $is-input:$button-lrg); }
|
||||
}
|
||||
|
||||
// Styles for any browser or device that support media queries
|
||||
@media only screen {
|
||||
|
||||
.button {
|
||||
@include inset-shadow();
|
||||
@include single-transition(background-color);
|
||||
|
||||
&.large { @include button-size($padding:false, $full-width:false); }
|
||||
&.small { @include button-size($padding:false, $full-width:false); }
|
||||
&.tiny { @include button-size($padding:false, $full-width:false); }
|
||||
|
||||
&.radius { @include button-style($bg:false, $radius:true); }
|
||||
&.round { @include button-style($bg:false, $radius:$button-round); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Additional styles for screens larger than 768px
|
||||
@media #{$small} {
|
||||
.button {
|
||||
@include button-base($style:false, $display:inline-block);
|
||||
@include button-size($padding:false, $full-width:false);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,211 +0,0 @@
|
|||
//
|
||||
// Clearing Variables
|
||||
//
|
||||
|
||||
// We use these to set the background colors for parts of Clearing.
|
||||
$clearing-bg: #111 !default;
|
||||
$clearing-caption-bg: $clearing-bg !default;
|
||||
$clearing-carousel-bg: #111 !default;
|
||||
$clearing-img-bg: $clearing-bg !default;
|
||||
|
||||
// We use these to style the close button
|
||||
$clearing-close-color: #fff !default;
|
||||
$clearing-close-size: 40px !default;
|
||||
|
||||
// We use these to style the arrows
|
||||
$clearing-arrow-size: 16px !default;
|
||||
$clearing-arrow-color: $clearing-close-color !default;
|
||||
|
||||
// We use these to style captions
|
||||
$clearing-caption-font-color: #fff !default;
|
||||
$clearing-caption-padding: 10px 30px !default;
|
||||
|
||||
// We use these to make the image and carousel height and style
|
||||
$clearing-active-img-height: 75% !default;
|
||||
$clearing-carousel-height: 150px !default;
|
||||
$clearing-carousel-thumb-width: 175px !default;
|
||||
$clearing-carousel-thumb-active-border: 4px solid rgb(255,255,255) !default;
|
||||
|
||||
|
||||
// We decided to not create a mixin for Clearing because it relies
|
||||
// on predefined classes and structure to work properly.
|
||||
// The variables above should give enough control.
|
||||
|
||||
/* Clearing Styles */
|
||||
[data-clearing] {
|
||||
@include clearfix;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.clearing-blackout {
|
||||
background: $clearing-bg;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
#{$default-float}: 0;
|
||||
z-index: 998;
|
||||
|
||||
.clearing-close { display: block; }
|
||||
}
|
||||
|
||||
.clearing-container {
|
||||
position: relative;
|
||||
z-index: 998;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.visible-img {
|
||||
height: 95%;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
#{$default-float}: 50%;
|
||||
top: 50%;
|
||||
margin-#{$default-float}: -50%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.clearing-caption {
|
||||
color: $clearing-caption-font-color;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
background: $clearing-caption-bg;
|
||||
width: 100%;
|
||||
padding: $clearing-caption-padding;
|
||||
position: absolute;
|
||||
#{$default-float}: 0;
|
||||
}
|
||||
|
||||
.clearing-close {
|
||||
z-index: 999;
|
||||
padding-#{$default-float}: 20px;
|
||||
padding-top: 10px;
|
||||
font-size: $clearing-close-size;
|
||||
line-height: 1;
|
||||
color: $clearing-close-color;
|
||||
display: none;
|
||||
|
||||
&:hover,
|
||||
&:focus { color: #ccc; }
|
||||
}
|
||||
|
||||
.clearing-assembled .clearing-container { height: 100%;
|
||||
.carousel > ul { display: none; }
|
||||
}
|
||||
|
||||
|
||||
// Large screen overrides
|
||||
@media #{$small} {
|
||||
.clearing-main-prev,
|
||||
.clearing-main-next {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 40px;
|
||||
top: 0;
|
||||
& > span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: solid $clearing-arrow-size;
|
||||
}
|
||||
}
|
||||
.clearing-main-prev {
|
||||
#{$default-float}: 0;
|
||||
& > span {
|
||||
#{$default-float}: 5px;
|
||||
border-color: transparent;
|
||||
border-#{$opposite-direction}-color: $clearing-arrow-color;
|
||||
}
|
||||
}
|
||||
.clearing-main-next {
|
||||
#{$opposite-direction}: 0;
|
||||
& > span {
|
||||
border-color: transparent;
|
||||
border-#{$default-float}-color: $clearing-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
.clearing-main-prev.disabled,
|
||||
.clearing-main-next.disabled { opacity: 0.5; }
|
||||
|
||||
// If you want to show a lightbox, but only have a single image come through as the thumbnail
|
||||
.clearing-feature ~ li { display: none; }
|
||||
|
||||
.clearing-assembled .clearing-container {
|
||||
|
||||
.carousel {
|
||||
background: $clearing-carousel-bg;
|
||||
height: $clearing-carousel-height;
|
||||
margin-top: 5px;
|
||||
|
||||
& > ul {
|
||||
display: block;
|
||||
z-index: 999;
|
||||
width: 200%;
|
||||
height: 100%;
|
||||
margin-#{$default-float}: 0;
|
||||
position: relative;
|
||||
#{$default-float}: 0;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
width: $clearing-carousel-thumb-width;
|
||||
height: inherit;
|
||||
padding: 0;
|
||||
float: $default-float;
|
||||
overflow: hidden;
|
||||
margin-#{$opposite-direction}: 1px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
opacity: 0.4;
|
||||
|
||||
&.fix-height {
|
||||
img {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.th {
|
||||
border: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer !important;
|
||||
min-width: 100% !important;
|
||||
}
|
||||
|
||||
&.visible { opacity: 1; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.visible-img {
|
||||
background: $clearing-img-bg;
|
||||
overflow: hidden;
|
||||
height: $clearing-active-img-height;
|
||||
}
|
||||
}
|
||||
|
||||
.clearing-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
#{$opposite-direction}: 20px;
|
||||
padding-#{$default-float}: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,240 +0,0 @@
|
|||
//
|
||||
// Custom Form Variables
|
||||
//
|
||||
|
||||
// We use these to control the basic form styles input styles
|
||||
$custom-form-border-color: #ccc !default;
|
||||
$custom-form-bg: #fff !default;
|
||||
$custom-form-bg-disabled: #ddd !default;
|
||||
$custom-form-check-color: #222 !default;
|
||||
|
||||
// We use these to style the custom select form element.
|
||||
$custom-select-bg: #fff !default;
|
||||
$custom-select-fade-to-color: #f3f3f3 !default;
|
||||
$custom-select-border-color: #ddd !default;
|
||||
$custom-select-triangle-color: #aaa !default;
|
||||
$custom-select-triangle-color-open: #222 !default;
|
||||
$custom-select-height: emCalc(13px) + ($form-spacing * 1.5) !default;
|
||||
$custom-select-margin-bottom: emCalc(20px) !default;
|
||||
$custom-select-font-color-selected: #141414 !default;
|
||||
$custom-select-disabled-color: #888 !default;
|
||||
|
||||
// We use these to control the style of the custom select dropdown element.
|
||||
$custom-dropdown-height: 200px !default;
|
||||
$custom-dropdown-bg: #fff !default;
|
||||
$custom-dropdown-border-color: darken(#fff, 20%) !default;
|
||||
$custom-dropdown-border-width: 1px !default;
|
||||
$custom-dropdown-border-style: solid !default;
|
||||
$custom-dropdown-font-color: #555 !default;
|
||||
$custom-dropdown-font-size: emCalc(14px) !default;
|
||||
$custom-dropdown-color-selected: #eeeeee !default;
|
||||
$custom-dropdown-font-color-selected: #000 !default;
|
||||
$custom-dropdown-shadow: 0 2px 2px 0px rgba(0,0,0,0.1) !default;
|
||||
$custom-dropdown-offset-top: auto !default;
|
||||
$custom-dropdown-list-padding: emCalc(4px) !default;
|
||||
$custom-dropdown-default-float-padding: emCalc(6px) !default;
|
||||
$custom-dropdown-opposite-padding: emCalc(38px) !default;
|
||||
$custom-dropdown-list-item-min-height: emCalc(24px) !default;
|
||||
$custom-dropdown-width-small: 134px !default;
|
||||
$custom-dropdown-width-medium: 254px !default;
|
||||
$custom-dropdown-width-large: 434px !default;
|
||||
|
||||
// We decided not to make a mixin for the custom forms because
|
||||
// they rely on a very specific class naming structure.
|
||||
// We may look at updating this in the future.
|
||||
|
||||
// Only include these classes if the variable is true, otherwise they'll be left out.
|
||||
@if $include-html-button-classes {
|
||||
|
||||
/* Custom Checkbox and Radio Inputs */
|
||||
form.custom {
|
||||
|
||||
.custom {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
border: solid 1px $custom-form-border-color;
|
||||
background: $custom-form-bg;
|
||||
|
||||
&.radio { @include radius(1000px); }
|
||||
|
||||
&.checkbox {
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
line-height: 0.8;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$default-float}: 0;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.radio.checked {
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
@include radius(1000px);
|
||||
background: $custom-form-check-color;
|
||||
position: relative;
|
||||
top: 3px;
|
||||
#{$default-float}: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&.checkbox.checked {
|
||||
&:before {
|
||||
content: "\00d7";
|
||||
color: $custom-form-check-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Select Options and Dropdowns */
|
||||
form.custom {
|
||||
.custom.dropdown {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: $custom-select-height;
|
||||
margin-bottom: $custom-select-margin-bottom;
|
||||
margin-top: 0px;
|
||||
padding: 0px;
|
||||
width: 100%;
|
||||
background: $custom-dropdown-bg;
|
||||
background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%);
|
||||
background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
|
||||
background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-size: $custom-dropdown-font-size;
|
||||
vertical-align: top;
|
||||
|
||||
ul {
|
||||
overflow-y: auto;
|
||||
max-height: $custom-dropdown-height;
|
||||
}
|
||||
|
||||
.current {
|
||||
cursor:default;
|
||||
white-space: nowrap;
|
||||
line-height: $custom-select-height - emCalc(1px);
|
||||
color: $input-font-color;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin-#{$default-float}: $form-spacing / 2;
|
||||
margin-#{$opposite-direction}: $custom-select-height;
|
||||
}
|
||||
|
||||
.selector {
|
||||
cursor:default;
|
||||
position: absolute;
|
||||
width: $form-spacing * 2.5;
|
||||
height: $custom-select-height;
|
||||
display: block;
|
||||
#{$opposite-direction}: 0;
|
||||
top: 0;
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
@include css-triangle(5px, $custom-select-triangle-color, top);
|
||||
position: absolute;
|
||||
#{$default-float}: ($form-spacing * 2.5) / 2 - emCalc(5px);
|
||||
top: 50%;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover, &.open {
|
||||
a.selector {
|
||||
&:after { @include css-triangle(5px, $custom-select-triangle-color-open, top); }
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color: $custom-select-disabled-color;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
color: $custom-select-disabled-color;
|
||||
&:after { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
&.open ul {
|
||||
display: block;
|
||||
z-index: 10;
|
||||
min-width:100%;
|
||||
@include box-sizing(content-box);
|
||||
}
|
||||
|
||||
&.small { max-width: $custom-dropdown-width-small; }
|
||||
&.medium { max-width: $custom-dropdown-width-medium; }
|
||||
&.large { max-width: $custom-dropdown-width-large; }
|
||||
&.expand { width: 100% !important; }
|
||||
|
||||
&.open.small ul { min-width: $custom-dropdown-width-small; @include box-sizing(border-box); }
|
||||
&.open.medium ul { min-width: $custom-dropdown-width-medium; @include box-sizing(border-box); }
|
||||
&.open.large ul { min-width: $custom-dropdown-width-large; @include box-sizing(border-box); }
|
||||
}
|
||||
|
||||
.custom.dropdown ul {
|
||||
position: absolute;
|
||||
width: auto;
|
||||
display: none;
|
||||
margin: 0;
|
||||
#{$default-float}: -$input-border-width;
|
||||
top: $custom-dropdown-offset-top;
|
||||
-webkit-box-shadow: $custom-dropdown-shadow;
|
||||
box-shadow: $custom-dropdown-shadow;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: $custom-dropdown-bg;
|
||||
border: $custom-dropdown-border-style $custom-dropdown-border-width $custom-dropdown-border-color;
|
||||
font-size: $em-base;
|
||||
|
||||
li {
|
||||
color: $custom-dropdown-font-color;
|
||||
font-size: $custom-dropdown-font-size;
|
||||
cursor: default;
|
||||
padding-top: $custom-dropdown-list-padding;
|
||||
padding-bottom: $custom-dropdown-list-padding;
|
||||
padding-#{$default-float}: $custom-dropdown-default-float-padding;
|
||||
padding-#{$opposite-direction}: $custom-dropdown-opposite-padding;
|
||||
min-height: $custom-dropdown-list-item-min-height;
|
||||
line-height: $custom-dropdown-list-item-min-height;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
list-style: none;
|
||||
|
||||
&.selected {
|
||||
background: $custom-dropdown-color-selected;
|
||||
color: $custom-dropdown-font-color-selected;
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken($custom-dropdown-color-selected, 4%);
|
||||
color: $custom-dropdown-font-color-selected;
|
||||
}
|
||||
&.selected:hover {
|
||||
background: $custom-dropdown-color-selected;
|
||||
cursor: default;
|
||||
color: $custom-dropdown-font-color-selected;
|
||||
}
|
||||
}
|
||||
|
||||
&.show { display: block; }
|
||||
}
|
||||
|
||||
/* Custom input, disabled */
|
||||
.custom.disabled { background-color: $custom-form-bg-disabled; }
|
||||
}
|
||||
}
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
//
|
||||
// Dropdown Button Variables
|
||||
//
|
||||
|
||||
// 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;
|
||||
|
||||
// We use these to style tiny dropdown buttons
|
||||
$dropdown-button-padding-tny: $button-tny * 5 !default;
|
||||
$dropdown-button-pip-size-tny: $button-tny !default;
|
||||
$dropdown-button-pip-opposite-tny: $button-tny * 2 !default;
|
||||
$dropdown-button-pip-top-tny: -$button-tny / 2 + emCalc(1px) !default;
|
||||
|
||||
// We use these to style small dropdown buttons
|
||||
$dropdown-button-padding-sml: $button-sml * 5 !default;
|
||||
$dropdown-button-pip-size-sml: $button-sml !default;
|
||||
$dropdown-button-pip-opposite-sml: $button-sml * 2 !default;
|
||||
$dropdown-button-pip-top-sml: -$button-sml / 2 + emCalc(1px) !default;
|
||||
|
||||
// We use these to style medium dropdown buttons
|
||||
$dropdown-button-padding-med: $button-med * 4 + emCalc(3px) !default;
|
||||
$dropdown-button-pip-size-med: $button-med - emCalc(3px) !default;
|
||||
$dropdown-button-pip-opposite-med: $button-med * 2 !default;
|
||||
$dropdown-button-pip-top-med: -$button-med / 2 + emCalc(2px) !default;
|
||||
|
||||
// We use these to style large dropdown buttons
|
||||
$dropdown-button-padding-lrg: $button-lrg * 4 !default;
|
||||
$dropdown-button-pip-size-lrg: $button-lrg - emCalc(6px) !default;
|
||||
$dropdown-button-pip-opposite-lrg: $button-lrg + emCalc(12px) !default;
|
||||
$dropdown-button-pip-top-lrg: -$button-lrg / 2 + emCalc(3px) !default;
|
||||
|
||||
//
|
||||
// Dropdown Button Mixin
|
||||
//
|
||||
|
||||
// We use this mixin to build off of the button mixin and add dropdown button styles
|
||||
@mixin dropdown-button($padding:medium, $pip-color:#fff, $base-style:true) {
|
||||
|
||||
// We add in base styles, but they can be negated by setting to 'false'.
|
||||
@if $base-style {
|
||||
position: relative;
|
||||
|
||||
// This creates the base styles for the triangle pip
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
border-style: solid;
|
||||
border-color: $dropdown-button-pip-color transparent transparent transparent;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// If we're dealing with tiny buttons, use these styles
|
||||
@if $padding == tiny {
|
||||
padding-#{$opposite-direction}: $dropdown-button-padding-tny;
|
||||
&:before {
|
||||
border-width: $dropdown-button-pip-size-tny;
|
||||
#{$opposite-direction}: $dropdown-button-pip-opposite-tny;
|
||||
margin-top: $dropdown-button-pip-top-tny;
|
||||
}
|
||||
}
|
||||
|
||||
// If we're dealing with small buttons, use these styles
|
||||
@if $padding == small {
|
||||
padding-#{$opposite-direction}: $dropdown-button-padding-sml;
|
||||
&:before {
|
||||
border-width: $dropdown-button-pip-size-sml;
|
||||
#{$opposite-direction}: $dropdown-button-pip-opposite-sml;
|
||||
margin-top: $dropdown-button-pip-top-sml;
|
||||
}
|
||||
}
|
||||
|
||||
// If we're dealing with default (medium) buttons, use these styles
|
||||
@if $padding == medium {
|
||||
padding-#{$opposite-direction}: $dropdown-button-padding-med;
|
||||
&:before {
|
||||
border-width: $dropdown-button-pip-size-med;
|
||||
#{$opposite-direction}: $dropdown-button-pip-opposite-med;
|
||||
margin-top: $dropdown-button-pip-top-med;
|
||||
}
|
||||
}
|
||||
|
||||
// If we're dealing with large buttons, use these styles
|
||||
@if $padding == large {
|
||||
padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
|
||||
&:before {
|
||||
border-width: $dropdown-button-pip-size-lrg;
|
||||
#{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
|
||||
margin-top: $dropdown-button-pip-top-lrg;
|
||||
}
|
||||
}
|
||||
|
||||
// We can control the pip color. We didn't use logic in this case, just set it and forget it.
|
||||
@if $pip-color {
|
||||
&:before { border-color: $pip-color transparent transparent transparent; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-button-classes {
|
||||
|
||||
/* Dropdown Button */
|
||||
.dropdown.button { @include dropdown-button;
|
||||
&.tiny { @include dropdown-button(tiny,$base-style:false); }
|
||||
&.small { @include dropdown-button(small,$base-style:false); }
|
||||
&.large { @include dropdown-button(large,$base-style:false); }
|
||||
&.secondary:before { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
//
|
||||
// Dropdown Variables
|
||||
//
|
||||
|
||||
// We use these to controls height and width styles.
|
||||
$f-dropdown-max-width: 200px !default;
|
||||
$f-dropdown-height: auto !default;
|
||||
$f-dropdown-max-height: none !default;
|
||||
$f-dropdown-margin-top: 2px !default;
|
||||
|
||||
// We use this to control the background color
|
||||
$f-dropdown-bg: #fff !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: darken(#fff, 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-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-size: emCalc(14px) !default;
|
||||
$f-dropdown-list-padding: emCalc(5px) emCalc(10px) !default;
|
||||
$f-dropdown-line-height: emCalc(18px) !default;
|
||||
$f-dropdown-list-hover-bg: #eeeeee !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: emCalc(20px) !default;
|
||||
|
||||
//
|
||||
// Dropdown Mixins
|
||||
//
|
||||
|
||||
// NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.;
|
||||
|
||||
// We use this to style the dropdown container element.
|
||||
@mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
list-style: $f-dropdown-list-style;
|
||||
|
||||
*:first-child { margin-top: 0; }
|
||||
*:last-child { margin-bottom: 0; }
|
||||
|
||||
@if $content == list {
|
||||
width: 100%;
|
||||
max-height: $f-dropdown-max-height;
|
||||
height: $f-dropdown-height;
|
||||
background: $f-dropdown-bg;
|
||||
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
|
||||
font-size: $em-base;
|
||||
z-index: 99;
|
||||
}
|
||||
@else if $content == content {
|
||||
padding: $f-dropdown-content-padding;
|
||||
width: 100%;
|
||||
height: $f-dropdown-height;
|
||||
max-height: $f-dropdown-max-height;
|
||||
background: $f-dropdown-bg;
|
||||
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
|
||||
font-size: $em-base;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
@if $triangle {
|
||||
margin-top: $f-dropdown-margin-top;
|
||||
|
||||
&:before {
|
||||
@include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
|
||||
position: absolute;
|
||||
top: -($f-dropdown-triangle-size * 2);
|
||||
#{$default-float}: $f-dropdown-triangle-side-offset;
|
||||
z-index: 99;
|
||||
}
|
||||
&: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;
|
||||
}
|
||||
|
||||
&.right:before {
|
||||
left: auto;
|
||||
right: $f-dropdown-triangle-side-offset;
|
||||
}
|
||||
&.right:after {
|
||||
left: auto;
|
||||
right: $f-dropdown-triangle-side-offset - 1;
|
||||
}
|
||||
}
|
||||
|
||||
@if $max-width { max-width: $max-width; }
|
||||
@else { max-width: $f-dropdown-max-width; }
|
||||
|
||||
}
|
||||
|
||||
// We use this to style the list elements or content inside the dropdown.
|
||||
@mixin dropdown-style {
|
||||
font-size: $f-dropdown-font-size;
|
||||
cursor: pointer;
|
||||
padding: $f-dropdown-list-padding;
|
||||
line-height: $f-dropdown-line-height;
|
||||
margin: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus { background: $f-dropdown-list-hover-bg; }
|
||||
|
||||
a { color: $f-dropdown-font-color; }
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-nav-classes {
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.f-dropdown {
|
||||
max-width: 100%;
|
||||
#{$default-float}: $dropdown-mobile-default-float;
|
||||
}
|
||||
}
|
||||
|
||||
/* Foundation Dropdowns */
|
||||
.f-dropdown {
|
||||
@include dropdown-container(content);
|
||||
// max-width: none;
|
||||
|
||||
li { @include dropdown-style; }
|
||||
|
||||
// You can also put custom content in these dropdowns
|
||||
&.content { @include dropdown-container(content, $triangle:false); }
|
||||
|
||||
// Sizes
|
||||
&.tiny { max-width: 200px; }
|
||||
&.small { max-width: 300px; }
|
||||
&.medium { max-width: 500px; }
|
||||
&.large { max-width: 800px; }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
//
|
||||
// Flex Video Variables
|
||||
//
|
||||
|
||||
// We use these to control video container padding and margins
|
||||
$flex-video-padding-top: emCalc(25px) !default;
|
||||
$flex-video-padding-bottom: 67.5% !default;
|
||||
$flex-video-margin-bottom: emCalc(16px) !default;
|
||||
|
||||
// We use this to control widescreen bottom padding
|
||||
$flex-video-widescreen-padding-bottom: 57.25% !default;
|
||||
|
||||
//
|
||||
// Flex Video Mixins
|
||||
//
|
||||
|
||||
@mixin flex-video-container {
|
||||
position: relative;
|
||||
padding-top: $flex-video-padding-top;
|
||||
padding-bottom: $flex-video-padding-bottom;
|
||||
height: 0;
|
||||
margin-bottom: $flex-video-margin-bottom;
|
||||
overflow: hidden;
|
||||
|
||||
&.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
|
||||
&.vimeo { padding-top: 0; }
|
||||
|
||||
iframe,
|
||||
object,
|
||||
embed,
|
||||
video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$default-float}: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@if $include-html-media-classes {
|
||||
|
||||
/* Flex Video */
|
||||
.flex-video { @include flex-video-container; }
|
||||
|
||||
}
|
||||
|
|
@ -1,337 +0,0 @@
|
|||
//
|
||||
// Form Variables
|
||||
//
|
||||
|
||||
// We use this to set the base for lots of form spacing and positioning styles
|
||||
$form-spacing: emCalc(16px) !default;
|
||||
|
||||
// We use these to style the labels in different ways
|
||||
$label-pointer: pointer !default;
|
||||
$label-font-size: emCalc(14px) !default;
|
||||
$label-font-weight: 500 !default;
|
||||
$label-font-color: lighten(#000, 30%) !default;
|
||||
$label-bottom-margin: emCalc(3px) !default;
|
||||
$input-font-family: inherit !default;
|
||||
$input-font-color: rgba(0,0,0,0.75) !default;
|
||||
$input-font-size: emCalc(14px) !default;
|
||||
$input-bg-color: #fff !default;
|
||||
$input-focus-bg-color: darken(#fff, 2%) !default;
|
||||
$input-border-color: darken(#fff, 20%) !default;
|
||||
$input-focus-border-color: darken(#fff, 40%) !default;
|
||||
$input-border-style: solid !default;
|
||||
$input-border-width: 1px !default;
|
||||
$input-disabled-bg: #ddd !default;
|
||||
$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !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-padding: emCalc(20px) !default;
|
||||
$fieldset-margin: emCalc(18px) 0 !default;
|
||||
|
||||
// We use these to style the legends when you use them
|
||||
$legend-bg: #fff !default;
|
||||
$legend-font-weight: bold !default;
|
||||
$legend-padding: 0 emCalc(3px) !default;
|
||||
|
||||
// We use these to style the prefix and postfix input elements
|
||||
$input-prefix-bg: darken(#fff, 5%) !default;
|
||||
$input-prefix-border-color: darken(#fff, 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;
|
||||
|
||||
// We use these to style the error states for inputs and labels
|
||||
$input-error-message-padding: emCalc(6px) emCalc(4px) !default;
|
||||
$input-error-message-top: -($form-spacing) - emCalc(5px) !default;
|
||||
$input-error-message-font-size: emCalc(12px) !default;
|
||||
$input-error-message-font-weight: bold !default;
|
||||
$input-error-message-font-color: #fff !default;
|
||||
$input-error-message-font-color-alt: #333 !default;
|
||||
|
||||
|
||||
//
|
||||
// Form Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to give us form styles for rows inside of forms
|
||||
@mixin form-row-base {
|
||||
.row { margin: 0 -$form-spacing / 2;
|
||||
|
||||
.column,
|
||||
.columns { padding: 0 $form-spacing / 2; }
|
||||
|
||||
// Use this to collapse the margins of a form row
|
||||
&.collapse { margin: 0;
|
||||
|
||||
.column,
|
||||
.columns { padding: 0; }
|
||||
|
||||
}
|
||||
}
|
||||
input.column,
|
||||
input.columns { padding-#{$default-float}: $form-spacing / 2; }
|
||||
}
|
||||
|
||||
// We use this mixin to give all basic form elements their style
|
||||
@mixin form-element() {
|
||||
background-color: $input-bg-color;
|
||||
font-family: $input-font-family;
|
||||
border: $input-border-width $input-border-style $input-border-color;
|
||||
-webkit-box-shadow: $input-box-shadow;
|
||||
box-shadow: $input-box-shadow;
|
||||
color: $input-font-color;
|
||||
display: block;
|
||||
font-size: $input-font-size;
|
||||
margin: 0 0 $form-spacing 0;
|
||||
padding: $form-spacing / 2;
|
||||
height: emCalc(13px) + ($form-spacing * 1.5);
|
||||
width: 100%;
|
||||
@include box-sizing(border-box);
|
||||
|
||||
// Basic focus styles
|
||||
&:focus {
|
||||
background: $input-focus-bg-color;
|
||||
border-color: $input-focus-border-color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
// Disabled background input background color
|
||||
&[disabled] { background-color: $input-disabled-bg; }
|
||||
}
|
||||
|
||||
// We use this mixin to create form labels
|
||||
@mixin form-label($alignment:false, $base-style:true) {
|
||||
|
||||
// Control whether or not the base styles come through.
|
||||
@if $base-style {
|
||||
font-size: $label-font-size;
|
||||
color: $label-font-color;
|
||||
cursor: $label-pointer;
|
||||
display: block;
|
||||
font-weight: $label-font-weight;
|
||||
margin-bottom: $label-bottom-margin;
|
||||
}
|
||||
|
||||
// Alignment options
|
||||
@if $alignment == right {
|
||||
float: none;
|
||||
text-align: right;
|
||||
}
|
||||
@else if $alignment == inline {
|
||||
margin: 0 0 $form-spacing 0;
|
||||
padding: $form-spacing / 2 + emCalc($input-border-width * 2) 0;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this mixin to create postfix/prefix form Labels
|
||||
@mixin prefix-postfix-base {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-style: $input-prefix-border-type;
|
||||
border-width: $input-prefix-border-size;
|
||||
overflow: $input-prefix-overflow;
|
||||
font-size: $label-font-size;
|
||||
height: ($label-font-size + ($form-spacing * 1.5) - emCalc(1px));
|
||||
line-height: ($label-font-size + ($form-spacing * 1.5) - emCalc(1px));
|
||||
}
|
||||
|
||||
// We use this mixin to create prefix label styles
|
||||
@mixin prefix($bg:$input-prefix-bg,$is-button:false) {
|
||||
|
||||
@if $bg {
|
||||
$bg-lightness: lightness($bg);
|
||||
background: $bg;
|
||||
border-color: darken($bg, 10%);
|
||||
border-#{$opposite-direction}: none;
|
||||
|
||||
// Control the font color based on background brightness
|
||||
@if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
|
||||
@else { color: $input-prefix-font-color-alt; }
|
||||
}
|
||||
|
||||
@if $is-button {
|
||||
padding-#{$default-float}: 0;
|
||||
padding-#{$opposite-direction}: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
text-align: center;
|
||||
line-height: emCalc(34px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// We use this mixin to create postfix label styles
|
||||
@mixin postfix($bg:$input-prefix-bg, $is-button:false) {
|
||||
|
||||
@if $bg {
|
||||
$bg-lightness: lightness($bg);
|
||||
background: $bg;
|
||||
border-color: darken($bg, 15%);
|
||||
border-#{$default-float}: none;
|
||||
|
||||
// Control the font color based on background brightness
|
||||
@if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
|
||||
@else { color: $input-prefix-font-color-alt; }
|
||||
}
|
||||
|
||||
@if $is-button {
|
||||
padding-#{$default-float}: 0;
|
||||
padding-#{$opposite-direction}: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
text-align: center;
|
||||
line-height: emCalc(34px);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// We use this mixin to style fieldsets
|
||||
@mixin fieldset {
|
||||
border: $fieldset-border-style $fieldset-border-width $fieldset-border-color;
|
||||
padding: $fieldset-padding;
|
||||
margin: $fieldset-margin;
|
||||
|
||||
// and legend styles
|
||||
legend {
|
||||
font-weight: $legend-font-weight;
|
||||
background: $legend-bg;
|
||||
padding: $legend-padding;
|
||||
margin: 0;
|
||||
margin-#{$default-float}: emCalc(-3px);
|
||||
}
|
||||
}
|
||||
|
||||
// We use this mixin to control border and background color of error inputs
|
||||
@mixin form-error-color($color:$alert-color) {
|
||||
border-color: $color;
|
||||
background-color: rgba($color, 0.1);
|
||||
|
||||
// Go back to normal on focus
|
||||
&:focus {
|
||||
background: $input-focus-bg-color;
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this simple mixin to style labels for error inputs
|
||||
@mixin form-label-error-color($color:$alert-color) { color: $color; }
|
||||
|
||||
// We use this mixin to create error message styles
|
||||
@mixin form-error-message($bg:$alert-color) {
|
||||
display: block;
|
||||
padding: $input-error-message-padding;
|
||||
margin-top: $input-error-message-top;
|
||||
margin-bottom: $form-spacing;
|
||||
font-size: $input-error-message-font-size;
|
||||
font-weight: $input-error-message-font-weight;
|
||||
|
||||
// We can control the text color based on the brightness of the background.
|
||||
$bg-lightness: lightness($bg);
|
||||
background: $bg;
|
||||
@if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; }
|
||||
@else { color: $input-error-message-font-color-alt; }
|
||||
}
|
||||
|
||||
// Only include these classes if the variable is true, otherwise they'll be left out.
|
||||
@if $include-html-form-classes {
|
||||
/* Standard Forms */
|
||||
form { margin: 0 0 $form-spacing; }
|
||||
|
||||
/* Using forms within rows, we need to set some defaults */
|
||||
form .row { @include form-row-base; }
|
||||
|
||||
/* Label Styles */
|
||||
label { @include form-label;
|
||||
&.right { @include form-label(right,false); }
|
||||
&.inline { @include form-label(inline,false); }
|
||||
}
|
||||
|
||||
/* Attach elements to the beginning or end of an input */
|
||||
.prefix,
|
||||
.postfix { @include prefix-postfix-base; }
|
||||
|
||||
/* Adjust padding, alignment and radius if pre/post element is a button */
|
||||
.postfix.button { @include button-size(false,false,false); @include postfix(false,true); }
|
||||
.prefix.button { @include button-size(false,false,false); @include prefix(false,true); }
|
||||
.prefix.button.radius { @include side-radius($default-float, $global-radius); }
|
||||
.postfix.button.radius { @include side-radius($opposite-direction, $global-radius); }
|
||||
.prefix.button.round { @include side-radius($default-float, 1000px); }
|
||||
.postfix.button.round { @include side-radius($opposite-direction, 1000px); }
|
||||
|
||||
/* Separate prefix and postfix styles when on span so buttons keep their own */
|
||||
span.prefix { @include prefix();
|
||||
&.radius { @include side-radius($default-float, $global-radius); }
|
||||
}
|
||||
span.postfix { @include postfix();
|
||||
&.radius { @include side-radius($opposite-direction, $global-radius); }
|
||||
}
|
||||
|
||||
/* Input groups will automatically style first and last elements of the group */
|
||||
.input-group {
|
||||
&.radius {
|
||||
&>*:first-child, &>*:first-child * {
|
||||
@include side-radius($default-float, $global-radius);
|
||||
}
|
||||
&>*:last-child, &>*:last-child * {
|
||||
@include side-radius($opposite-direction, $global-radius);
|
||||
}
|
||||
}
|
||||
&.round {
|
||||
&>*:first-child, &>*:first-child * {
|
||||
@include side-radius($default-float, $button-round);
|
||||
}
|
||||
&>*:last-child, &>*:last-child * {
|
||||
@include side-radius($opposite-direction, $button-round);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
@include form-element;
|
||||
@include single-transition(all, 0.15s, linear);
|
||||
}
|
||||
|
||||
/* We add basic fieldset styling */
|
||||
fieldset {
|
||||
@include fieldset;
|
||||
}
|
||||
|
||||
/* Error Handling */
|
||||
.error input,
|
||||
input.error,
|
||||
.error textarea,
|
||||
textarea.error {
|
||||
@include form-error-color;
|
||||
}
|
||||
|
||||
.error label,
|
||||
label.error { @include form-label-error-color; }
|
||||
|
||||
.error small,
|
||||
small.error {
|
||||
@include form-error-message;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
// Set box-sizing globally to handle padding and border widths
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
html,
|
||||
body { font-size: $base-font-size; }
|
||||
|
||||
// Default body styles
|
||||
body {
|
||||
background: $body-bg;
|
||||
color: $body-font-color;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: $body-font-family;
|
||||
font-weight: $body-font-weight;
|
||||
font-style: $body-font-style;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Override outline from normalize, we don't like it
|
||||
a:focus { outline: none; }
|
||||
|
||||
// Grid Defaults to get images and embeds to work properly
|
||||
img,
|
||||
object,
|
||||
embed { max-width: 100%; height: auto; }
|
||||
|
||||
object,
|
||||
embed { height: 100%; }
|
||||
img { -ms-interpolation-mode: bicubic; }
|
||||
|
||||
#map_canvas,
|
||||
.map_canvas {
|
||||
img,
|
||||
embed,
|
||||
object { max-width: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Miscellaneous useful HTML classes
|
||||
.left { float: left !important; }
|
||||
.right { float: right !important; }
|
||||
.text-left { text-align: left !important; }
|
||||
.text-right { text-align: right !important; }
|
||||
.text-center { text-align: center !important; }
|
||||
.text-justify { text-align: justify !important; }
|
||||
.hide { display: none; }
|
||||
|
||||
// Font smoothing
|
||||
// Antialiased font smoothing works best for light text on a dark background.
|
||||
// Apply to single elements instead of globally to body.
|
||||
// Note this only applies to webkit-based desktop browsers on the Mac.
|
||||
.antialiased { -webkit-font-smoothing: antialiased; }
|
||||
|
||||
// Get rid of gap under images by making them display: inline-block; by default
|
||||
img { display: inline-block; }
|
||||
|
||||
//
|
||||
// Global resets for forms
|
||||
//
|
||||
|
||||
// Make sure textarea takes on height automatically
|
||||
textarea { height: auto; min-height: 50px; }
|
||||
|
||||
// Make select elements 100% width by default
|
||||
select { width: 100%; }
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
//
|
||||
// Grid Variables
|
||||
//
|
||||
$row-width: emCalc(1000px) !default;
|
||||
$column-gutter: emCalc(30px) !default;
|
||||
$total-columns: 12 !default;
|
||||
|
||||
//
|
||||
// Grid Mixins
|
||||
//
|
||||
|
||||
// For creating container, nested, and collapsed rows.
|
||||
@mixin grid-row($behavior: false) {
|
||||
|
||||
// use @include grid-row(nest); to include a nested row
|
||||
@if $behavior == nest {
|
||||
width: auto;
|
||||
margin-#{$default-float}: -($column-gutter/2);
|
||||
margin-#{$opposite-direction}: -($column-gutter/2);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
// use @include grid-row(collapse); to collapsed a container row margins
|
||||
@else if $behavior == collapse {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
max-width: $row-width;
|
||||
}
|
||||
|
||||
// use @include grid-row(nest-collapse); to collapse outer margins on a nested row
|
||||
@else if $behavior == nest-collapse {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
// use @include grid-row; to use a container row
|
||||
@else {
|
||||
width: 100%;
|
||||
margin-#{$default-float}: auto;
|
||||
margin-#{$opposite-direction}: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
max-width: $row-width;
|
||||
}
|
||||
|
||||
// Clearfix for all rows
|
||||
@include clearfix();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// For creating columns - @include these inside a media query to control small vs. large grid layouts
|
||||
@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:$default-float) {
|
||||
|
||||
position: relative;
|
||||
|
||||
// Gutter padding whenever a column isn't set to collapse
|
||||
@if $collapse == false {
|
||||
padding-#{$default-float}: $column-gutter / 2;
|
||||
padding-#{$opposite-direction}: $column-gutter / 2;
|
||||
}
|
||||
|
||||
// If a column number is given, calculate width
|
||||
@if $columns {
|
||||
width: gridCalc($columns, $total-columns);
|
||||
|
||||
// If last column, float naturally instead of to the right
|
||||
@if $last-column { float: $opposite-direction; }
|
||||
|
||||
// if collapsed, get rid of gutter padding
|
||||
@else if $collapse { padding-#{$default-float}: 0; padding-#{$opposite-direction}: 0; }
|
||||
|
||||
}
|
||||
|
||||
@if $collapse { padding-#{$default-float}: 0; padding-#{$opposite-direction}: 0; }
|
||||
|
||||
// If offset, calculate appropriate margins
|
||||
@if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }
|
||||
|
||||
// Source Ordering, adds left/right depending on which you use.
|
||||
@if $push { #{$default-float}: gridCalc($push, $total-columns); #{$opposite-direction}: auto; }
|
||||
@if $pull { #{$opposite-direction}: gridCalc($pull, $total-columns); #{$default-float}: auto; }
|
||||
|
||||
// If centered, get rid of float and add appropriate margins
|
||||
@if $center {
|
||||
margin-#{$default-float}: auto;
|
||||
margin-#{$opposite-direction}: auto;
|
||||
float: none !important;
|
||||
}
|
||||
|
||||
@if $float {
|
||||
@if $float == left or true { float: $default-float; }
|
||||
@else if $float == right { float: $opposite-direction; }
|
||||
@else { float: none; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Grid HTML Classes */
|
||||
@if $include-html-grid-classes {
|
||||
|
||||
.row {
|
||||
@include grid-row;
|
||||
|
||||
.column,
|
||||
.columns { @include grid-column($columns:$total-columns); }
|
||||
|
||||
&.collapse {
|
||||
.column,
|
||||
.columns { @include grid-column($collapse:true); }
|
||||
}
|
||||
|
||||
.row { @include grid-row($behavior:nest);
|
||||
&.collapse { @include grid-row($behavior:nest-collapse); }
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen {
|
||||
|
||||
.row .column,
|
||||
.row .columns { @include grid-column($columns:false); }
|
||||
|
||||
@for $i from 1 through $total-columns {
|
||||
.row .small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
@for $i from 1 through $total-columns - 2 {
|
||||
.row .small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
[class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
|
||||
[class*="column"] + [class*="column"].end { float: $default-float; }
|
||||
|
||||
.column.small-centered,
|
||||
.columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false); }
|
||||
}
|
||||
|
||||
/* Styles for screens that are atleast 768px; */
|
||||
@media #{$small} {
|
||||
|
||||
@for $i from 1 through $total-columns {
|
||||
.row .large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
@for $i from 1 through $total-columns - 2 {
|
||||
.row .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
@for $i from 2 through $total-columns - 2 {
|
||||
.push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
|
||||
.pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
|
||||
}
|
||||
|
||||
@for $i from 2 through $total-columns - 2 {
|
||||
.small-push#{-$i} { #{$default-float}: inherit; }
|
||||
.small-pull#{-$i} { #{$opposite-direction}: inherit; }
|
||||
}
|
||||
|
||||
.column.large-centered,
|
||||
.columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
//
|
||||
// Inline List Variables
|
||||
//
|
||||
|
||||
// We use this to control the margins and padding of the inline list.
|
||||
$inline-list-top-margin: 0 !default;
|
||||
$inline-list-opposite-margin: 0 !default;
|
||||
$inline-list-bottom-margin: emCalc(17px) !default;
|
||||
$inline-list-default-float-margin: emCalc(-22px) !default;
|
||||
|
||||
$inline-list-padding: 0 !default;
|
||||
|
||||
// We use this to control the overflow of the inline list.
|
||||
$inline-list-overflow: hidden !default;
|
||||
|
||||
// We use this to control the list items
|
||||
$inline-list-display: block !default;
|
||||
|
||||
// We use this to control any elments within list items
|
||||
$inline-list-children-display: block !default;
|
||||
|
||||
//
|
||||
// Inline List Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create inline lists
|
||||
@mixin inline-list {
|
||||
margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
|
||||
margin-#{$default-float}: $inline-list-default-float-margin;
|
||||
margin-#{$opposite-direction}: $inline-list-opposite-margin;
|
||||
padding: $inline-list-padding;
|
||||
list-style: none;
|
||||
overflow: $inline-list-overflow;
|
||||
|
||||
& > li {
|
||||
list-style: none;
|
||||
float: $default-float;
|
||||
margin-#{$default-float}: emCalc(22px);
|
||||
display: $inline-list-display;
|
||||
&>* { display: $inline-list-children-display; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-grid-classes {
|
||||
|
||||
/* Inline Lists */
|
||||
.inline-list {
|
||||
@include inline-list();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,212 +0,0 @@
|
|||
//
|
||||
// Joyride Variables
|
||||
//
|
||||
|
||||
// Controlling default Joyride styles
|
||||
$joyride-tip-bg: rgb(0,0,0) !default;
|
||||
$joyride-tip-default-width: 300px !default;
|
||||
$joyride-tip-padding: emCalc(18px) emCalc(20px) emCalc(24px) !default;
|
||||
$joyride-tip-border: solid 1px #555 !default;
|
||||
$joyride-tip-radius: 4px !default;
|
||||
$joyride-tip-position-offset: 22px !default;
|
||||
|
||||
// Here, we're setting the tip dont styles
|
||||
$joyride-tip-font-color: #fff !default;
|
||||
$joyride-tip-font-size: emCalc(14px) !default;
|
||||
$joyride-tip-header-weight: bold !default;
|
||||
|
||||
// This changes the nub size
|
||||
$joyride-tip-nub-size: 14px !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;
|
||||
|
||||
// This changes up the styles for the close button
|
||||
$joyride-tip-close-color: #777 !default;
|
||||
$joyride-tip-close-size: 30px !default;
|
||||
$joyride-tip-close-weight: normal !default;
|
||||
|
||||
// When Joyride is filling the screen, we use this style for the bg
|
||||
$joyride-screenfill: rgba(0,0,0,0.5) !default;
|
||||
|
||||
|
||||
// We decided not to make a mixin for this because it relies on predefined classes to work properly.
|
||||
|
||||
/* Foundation Joyride */
|
||||
.joyride-list { display: none; }
|
||||
|
||||
/* Default styles for the container */
|
||||
.joyride-tip-guide {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: $joyride-tip-bg;
|
||||
color: $joyride-tip-font-color;
|
||||
z-index: 101;
|
||||
top: 0;
|
||||
#{$default-float}: 2.5%;
|
||||
font-family: inherit;
|
||||
font-weight: normal;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.lt-ie9 .joyride-tip-guide {
|
||||
max-width:800px;
|
||||
#{$default-float}: 50%;
|
||||
margin-#{$default-float}:-400px;
|
||||
}
|
||||
|
||||
.joyride-content-wrapper {
|
||||
width: 100%;
|
||||
|
||||
padding: $joyride-tip-padding;
|
||||
|
||||
.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;
|
||||
#{$default-float}: $joyride-tip-position-offset;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: solid $joyride-tip-nub-size;
|
||||
|
||||
&.top {
|
||||
border-color: $joyride-tip-bg;
|
||||
border-top-color: transparent !important;
|
||||
border-#{$default-float}-color: transparent !important;
|
||||
border-#{$opposite-direction}-color: transparent !important;
|
||||
top: -($joyride-tip-nub-size*2);
|
||||
bottom: none;
|
||||
}
|
||||
&.bottom {
|
||||
border-color: $joyride-tip-bg !important;
|
||||
border-bottom-color: transparent !important;
|
||||
border-#{$default-float}-color: transparent !important;
|
||||
border-#{$opposite-direction}-color: transparent !important;
|
||||
bottom: -($joyride-tip-nub-size*2);
|
||||
bottom: none;
|
||||
}
|
||||
|
||||
&.right { right: -($joyride-tip-nub-size*2); }
|
||||
&.left { left: -($joyride-tip-nub-size*2); }
|
||||
}
|
||||
}
|
||||
|
||||
/* 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: $joyride-tip-header-weight;
|
||||
color: $joyride-tip-font-color;
|
||||
}
|
||||
.joyride-tip-guide p {
|
||||
margin: 0 0 emCalc(18px) 0;
|
||||
font-size: $joyride-tip-font-size;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.joyride-timer-indicator-wrap {
|
||||
width: $joyride-tip-timer-width;
|
||||
height: $joyride-tip-timer-height;
|
||||
border: $joyride-tip-border;
|
||||
position: absolute;
|
||||
#{$opposite-direction}: emCalc(17px);
|
||||
bottom: emCalc(16px);
|
||||
}
|
||||
.joyride-timer-indicator {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: inherit;
|
||||
background: $joyride-tip-timer-color;
|
||||
}
|
||||
|
||||
.joyride-close-tip {
|
||||
position: absolute;
|
||||
#{$opposite-direction}: 12px;
|
||||
top: 10px;
|
||||
color: $joyride-tip-close-color !important;
|
||||
text-decoration: none;
|
||||
font-size: $joyride-tip-close-size;
|
||||
font-weight: $joyride-tip-close-weight;
|
||||
line-height: .5 !important;
|
||||
|
||||
&:hover,
|
||||
&:focus { color: #eee !important; }
|
||||
}
|
||||
|
||||
.joyride-modal-bg {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
background: $joyride-screenfill;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
top: 0;
|
||||
#{$default-float}: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.joyride-expose-wrapper {
|
||||
background-color: #ffffff;
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
z-index: 102;
|
||||
-moz-box-shadow: 0px 0px 30px #ffffff;
|
||||
-webkit-box-shadow: 0px 0px 15px #ffffff;
|
||||
box-shadow: 0px 0px 15px #ffffff;
|
||||
}
|
||||
|
||||
.joyride-expose-cover {
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
|
||||
/* Styles for screens that are atleast 768px; */
|
||||
@media #{$small} {
|
||||
.joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;
|
||||
.joyride-nub {
|
||||
&.bottom {
|
||||
border-color: $joyride-tip-bg !important;
|
||||
border-bottom-color: transparent !important;
|
||||
border-#{$default-float}-color: transparent !important;
|
||||
border-#{$opposite-direction}-color: transparent !important;
|
||||
bottom: -($joyride-tip-nub-size*2);
|
||||
bottom: none;
|
||||
}
|
||||
&.right {
|
||||
border-color: $joyride-tip-bg !important;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important; border-bottom-color: transparent !important;
|
||||
top: $joyride-tip-position-offset;
|
||||
bottom: none;
|
||||
left: auto;
|
||||
right: -($joyride-tip-nub-size*2);
|
||||
}
|
||||
&.left {
|
||||
border-color: $joyride-tip-bg !important;
|
||||
border-top-color: transparent !important;
|
||||
border-left-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
top: $joyride-tip-position-offset;
|
||||
left: -($joyride-tip-nub-size*2);
|
||||
right: auto; bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
//
|
||||
// Keystroke Variables
|
||||
//
|
||||
|
||||
// We use these to control text styles.
|
||||
$keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
|
||||
$keystroke-font-size: emCalc(15px) !default;
|
||||
$keystroke-font-color: #222 !default;
|
||||
$keystroke-font-color-alt: #fff !default;
|
||||
$keystroke-function-factor: 7% !default;
|
||||
|
||||
// We use this to control keystroke padding.
|
||||
$keystroke-padding: emCalc(2px) emCalc(4px) emCalc(0px) !default;
|
||||
|
||||
// We use these to control background and border styles.
|
||||
$keystroke-bg: darken(#fff, $keystroke-function-factor) !default;
|
||||
$keystroke-border-style: solid !default;
|
||||
$keystroke-border-width: 1px !default;
|
||||
$keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor) !default;
|
||||
$keystroke-radius: $global-radius !default;
|
||||
|
||||
//
|
||||
// Keystroke Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create keystroke styles.
|
||||
@mixin keystroke($bg:$keystroke-bg) {
|
||||
// This find the lightness percentage of the background color.
|
||||
$bg-lightness: lightness($bg);
|
||||
|
||||
background-color: $bg;
|
||||
border-color: darken($bg, $keystroke-function-factor);
|
||||
|
||||
// We adjust the font color based on the brightness of the background.
|
||||
@if $bg-lightness > 70% { color: $keystroke-font-color; }
|
||||
@else { color: $keystroke-font-color-alt; }
|
||||
|
||||
border-style: $keystroke-border-style;
|
||||
border-width: $keystroke-border-width;
|
||||
margin: 0;
|
||||
font-family: $keystroke-font;
|
||||
font-size: $keystroke-font-size;
|
||||
padding: $keystroke-padding;
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-media-classes {
|
||||
|
||||
/* Keystroke Characters */
|
||||
.keystroke,
|
||||
kbd {
|
||||
@include keystroke;
|
||||
@include radius($keystroke-radius);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
//
|
||||
// Label Variables
|
||||
//
|
||||
|
||||
// We use these to style the labels
|
||||
$label-padding: emCalc(3px) emCalc(10px) emCalc(4px) !default;
|
||||
$label-radius: $global-radius !default;
|
||||
|
||||
// We use these to style the label text
|
||||
$label-font-sizing: emCalc(14px) !default;
|
||||
$label-font-weight: bold !default;
|
||||
|
||||
//
|
||||
// Label Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create a default label base.
|
||||
@mixin label-base {
|
||||
font-weight: $label-font-weight;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// We use this mixin to add label size styles.
|
||||
@mixin label-size($padding:$label-padding, $text-size:$label-font-sizing) {
|
||||
@if $padding { padding: $padding; }
|
||||
@if $text-size { font-size: $text-size; }
|
||||
}
|
||||
|
||||
// We use this mixin to add label styles.
|
||||
@mixin label-style($bg:$primary-color, $radius:false) {
|
||||
|
||||
// We control which background color comes through
|
||||
@if $bg {
|
||||
|
||||
// This find the lightness percentage of the background color.
|
||||
$bg-lightness: lightness($bg);
|
||||
|
||||
background-color: $bg;
|
||||
|
||||
// We control the text color for you based on the background color.
|
||||
@if $bg-lightness < 70% { color: #fff; }
|
||||
@else { color: #333; }
|
||||
}
|
||||
|
||||
// We use this to control the radius on labels.
|
||||
@if $radius == true { @include radius($label-radius); }
|
||||
@else if $radius { @include radius($radius); }
|
||||
|
||||
}
|
||||
|
||||
// We use this to add close buttons to alerts
|
||||
@mixin label($padding:$label-padding, $text-size:$label-font-sizing, $bg:$primary-color, $radius:false) {
|
||||
|
||||
@include label-base;
|
||||
@include label-size($padding, $text-size);
|
||||
@include label-style($bg, $radius);
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-label-classes {
|
||||
|
||||
/* Labels */
|
||||
.label {
|
||||
@include label-base;
|
||||
@include label-size;
|
||||
@include label-style;
|
||||
|
||||
|
||||
&.radius { @include label-style(false, true); }
|
||||
&.round { @include label-style(false, $radius:1000px); }
|
||||
|
||||
&.alert { @include label-style($alert-color); }
|
||||
&.success { @include label-style($success-color); }
|
||||
&.secondary { @include label-style($secondary-color); }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
//
|
||||
// Magellan Variables
|
||||
//
|
||||
$magellan-bg: #fff !default;
|
||||
$magellan-padding: 10px !default;
|
||||
|
||||
@if $include-html-magellan-classes {
|
||||
|
||||
[data-magellan-expedition] {
|
||||
background: $magellan-bg;
|
||||
z-index: 50;
|
||||
min-width: 100%;
|
||||
padding: $magellan-padding;
|
||||
|
||||
.sub-nav {
|
||||
margin-bottom: 0;
|
||||
dd { margin-bottom: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,204 +0,0 @@
|
|||
// Orbit Settings
|
||||
|
||||
// We use these to control the caption styles
|
||||
$orbit-container-bg: #f5f5f5 !default;
|
||||
$orbit-caption-bg-old-browser: #000 !default;
|
||||
$orbit-caption-bg-old: rgb(0,0,0) !default;
|
||||
$orbit-caption-bg: rgba(0,0,0,0.6) !default;
|
||||
$orbit-caption-font-color: #fff !default;
|
||||
|
||||
// We use these to control the left/right nav styles
|
||||
$orbit-nav-bg-old: rgb(0,0,0) !default;
|
||||
$orbit-nav-bg: rgba(0,0,0,0.6) !default;
|
||||
|
||||
// We use these to control the timer styles
|
||||
$orbit-timer-bg-old: rgb(0,0,0) !default;
|
||||
$orbit-timer-bg: rgba(0,0,0,0.6) !default;
|
||||
|
||||
// We use these to control the bullet nav styles
|
||||
$orbit-bullet-nav-color: #999 !default;
|
||||
$orbit-bullet-nav-color-active: #222 !default;
|
||||
|
||||
// We use thes to controls the style of slide numbers
|
||||
$orbit-slide-number-bg: rgb(0,0,0) !default;
|
||||
$orbit-slide-number-font-color: #fff !default;
|
||||
$orbit-slide-number-padding: emCalc(5px) !default;
|
||||
|
||||
// Margin for when Orbit is stacked on small screens
|
||||
$stack-on-small-margin-bottom: emCalc(20px) !default;
|
||||
|
||||
|
||||
.orbit-container {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: $orbit-container-bg;
|
||||
|
||||
.orbit-slides-container {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
img { display: block; }
|
||||
|
||||
&>* {
|
||||
position: relative;
|
||||
float: $default-float;
|
||||
height: 100%;
|
||||
|
||||
.orbit-caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background-color: $orbit-caption-bg-old;
|
||||
background-color: $orbit-caption-bg;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
font-size: emCalc(14px);
|
||||
|
||||
* { color: $orbit-caption-font-color; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.orbit-slide-number {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
#{$default-float}: 10px;
|
||||
font-size: 12px;
|
||||
span { font-weight: 700; }
|
||||
}
|
||||
|
||||
.orbit-timer {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
#{$opposite-direction}: 10px;
|
||||
height: 6px;
|
||||
width: 100px;
|
||||
.orbit-progress {
|
||||
height: 100%;
|
||||
background-color: $orbit-timer-bg-old;
|
||||
background-color: $orbit-timer-bg;
|
||||
display: block;
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
& > span {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
#{$opposite-direction}: 0px;
|
||||
width: 11px;
|
||||
height: 14px;
|
||||
border: solid 4px #000;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
&.paused {
|
||||
& > span {
|
||||
#{$opposite-direction}: -6px;
|
||||
top: 9px;
|
||||
width: 11px;
|
||||
height: 14px;
|
||||
border: solid 8px;
|
||||
border-color: transparent transparent transparent #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .orbit-timer > span { display: block; }
|
||||
|
||||
// Let's get those controls to be right in the center on each side
|
||||
.orbit-prev,
|
||||
.orbit-next {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -25px;
|
||||
background-color: $orbit-nav-bg-old;
|
||||
background-color: $orbit-nav-bg;
|
||||
width: 50px;
|
||||
height: 60px;
|
||||
line-height: 50px;
|
||||
color: white;
|
||||
text-indent: -9999px !important;
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: solid 16px;
|
||||
}
|
||||
}
|
||||
.orbit-prev { #{$default-float}: 0;
|
||||
& > span {
|
||||
border-color: transparent;
|
||||
border-#{$opposite-direction}-color: #fff;
|
||||
}
|
||||
&:hover > span {
|
||||
border-#{$opposite-direction}-color: #ccc;
|
||||
}
|
||||
}
|
||||
.orbit-next { #{$opposite-direction}: 0;
|
||||
& > span {
|
||||
border-color: transparent;
|
||||
border-#{$default-float}-color: #fff;
|
||||
#{$default-float}: 50%;
|
||||
margin-#{$default-float}: -8px;
|
||||
}
|
||||
&:hover > span {
|
||||
border-#{$default-float}-color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.orbit-bullets {
|
||||
margin: 0 auto 30px auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #fff;
|
||||
float: $default-float;
|
||||
margin-#{$opposite-direction}: 6px;
|
||||
border: solid 2px #000;
|
||||
@include radius(1000px);
|
||||
|
||||
&.active {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
&:last-child { margin-#{$opposite-direction}: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
.touch {
|
||||
.orbit-container {
|
||||
.orbit-prev,
|
||||
.orbit-next { display: none; }
|
||||
}
|
||||
|
||||
.orbit-bullets { display: none; }
|
||||
}
|
||||
|
||||
|
||||
@media #{$small} {
|
||||
|
||||
.touch {
|
||||
.orbit-container {
|
||||
.orbit-prev,
|
||||
.orbit-next { display: inherit; }
|
||||
}
|
||||
|
||||
.orbit-bullets { display: block; }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
//
|
||||
// Pagination Variables
|
||||
//
|
||||
|
||||
// We use these to control the pagination container
|
||||
$pagination-height: emCalc(24px) !default;
|
||||
$pagination-margin: emCalc(-5px) !default;
|
||||
|
||||
// We use these to set the list-item properties
|
||||
$pagination-li-float: $default-float;
|
||||
$pagination-li-height: emCalc(24px) !default;
|
||||
$pagination-li-font-color: #222 !default;
|
||||
$pagination-li-font-size: emCalc(14px) !default;
|
||||
$pagination-li-margin: emCalc(5px) !default;
|
||||
|
||||
// We use these for the pagination anchor links
|
||||
$pagination-link-pad: emCalc(1px) emCalc(7px) emCalc(1px) !default;
|
||||
$pagination-link-font-color: #999 !default;
|
||||
$pagination-link-active-bg: darken(#fff, 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-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-weight: bold !default;
|
||||
$pagination-link-current-cursor: default !default;
|
||||
$pagination-link-current-active-bg: $primary-color !default;
|
||||
|
||||
//
|
||||
// Pagination Mixin
|
||||
//
|
||||
|
||||
// We use this mixin to set the properties for the creating Foundation pagination
|
||||
@mixin pagination($center:false, $base-style:true) {
|
||||
|
||||
@if $base-style {
|
||||
display: block;
|
||||
height: $pagination-height;
|
||||
margin-#{$default-float}: $pagination-margin;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
float: $pagination-li-float;
|
||||
height: $pagination-li-height;
|
||||
color: $pagination-li-font-color;
|
||||
font-size: $pagination-li-font-size;
|
||||
margin-#{$default-float}: $pagination-li-margin;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: $pagination-link-pad;
|
||||
color: $pagination-link-font-color;
|
||||
}
|
||||
|
||||
&:hover a,
|
||||
a:focus { background: $pagination-link-active-bg; }
|
||||
|
||||
&.unavailable a {
|
||||
cursor: $pagination-link-unavailable-cursor;
|
||||
color: $pagination-link-unavailable-font-color;
|
||||
}
|
||||
|
||||
&.unavailable:hover a, &.unavailable a:focus { background: $pagination-link-unavailable-bg-active; }
|
||||
|
||||
&.current a {
|
||||
background: $pagination-link-current-background;
|
||||
color: $pagination-link-current-font-color;
|
||||
font-weight: $pagination-link-current-font-weight;
|
||||
cursor: $pagination-link-current-cursor;
|
||||
|
||||
&:hover,
|
||||
&:focus { background: $pagination-link-current-active-bg; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $center {
|
||||
& { text-align: center;
|
||||
ul > li {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@if $include-html-nav-classes {
|
||||
|
||||
/* Pagination */
|
||||
.pagination { @include pagination; }
|
||||
.pagination-centered { @include pagination(true,false); }
|
||||
}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
//
|
||||
// Panel Variables
|
||||
//
|
||||
|
||||
// We use these to control the background and border styles
|
||||
$panel-bg: darken(#fff, 5%) !default;
|
||||
$panel-border-style: solid !default;
|
||||
$panel-border-size: 1px !default;
|
||||
|
||||
// We use this % to control how much we darken things on hover
|
||||
$panel-function-factor: 10% !default;
|
||||
$panel-border-color: darken($panel-bg, $panel-function-factor) !default;
|
||||
|
||||
// We use these to set default inner padding and bottom margin
|
||||
$panel-margin-bottom: emCalc(20px) !default;
|
||||
$panel-padding: emCalc(20px) !default;
|
||||
|
||||
// We use these to set default font colors
|
||||
$panel-font-color: #333 !default;
|
||||
$panel-font-color-alt: #fff !default;
|
||||
|
||||
|
||||
//
|
||||
// Panel Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create panels.
|
||||
@mixin panel($bg:$panel-bg, $padding:$panel-padding) {
|
||||
|
||||
@if $bg {
|
||||
$bg-lightness: lightness($bg);
|
||||
|
||||
border-style: $panel-border-style;
|
||||
border-width: $panel-border-size;
|
||||
border-color: darken($bg, $panel-function-factor);
|
||||
margin-bottom: $panel-margin-bottom;
|
||||
padding: $padding;
|
||||
|
||||
background: $bg;
|
||||
|
||||
// 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 { color: $panel-font-color-alt; } }
|
||||
@else if $bg-lightness >= 50% { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color; } }
|
||||
@else { h1,h2,h3,h4,h5,h6,p { color: $panel-font-color-alt; } }
|
||||
|
||||
// Respect the padding, fool.
|
||||
&>:first-child { margin-top: 0; }
|
||||
&>:last-child { margin-bottom: 0; }
|
||||
|
||||
// reset header line-heights for panels
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
line-height: 1; margin-bottom: emCalc(20px) / 2;
|
||||
&.subheader { line-height: 1.4; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Only include these classes if the option exists
|
||||
@if $include-html-panel-classes {
|
||||
|
||||
/* Panels */
|
||||
.panel { @include panel;
|
||||
|
||||
&.callout {
|
||||
@include panel($primary-color);
|
||||
@include inset-shadow($active:false);
|
||||
}
|
||||
|
||||
&.radius {
|
||||
@include panel($bg:false);
|
||||
@include radius;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
//
|
||||
// Pricing Table Variables
|
||||
//
|
||||
|
||||
// We use this to control the border color
|
||||
$price-table-border: solid 1px #ddd !default;
|
||||
|
||||
// We use this to control the bottom margin of the pricing table
|
||||
$price-table-margin-bottom: emCalc(20px) !default;
|
||||
|
||||
// We use these to control the title styles
|
||||
$price-title-bg: #ddd !default;
|
||||
$price-title-padding: emCalc(15px) emCalc(20px) !default;
|
||||
$price-title-align: center !default;
|
||||
$price-title-color: #333 !default;
|
||||
$price-title-weight: bold !default;
|
||||
$price-title-size: emCalc(16px) !default;
|
||||
|
||||
// We use these to control the price styles
|
||||
$price-money-bg: #eee !default;
|
||||
$price-money-padding: emCalc(15px) emCalc(20px) !default;
|
||||
$price-money-align: center !default;
|
||||
$price-money-color: #333 !default;
|
||||
$price-money-weight: normal !default;
|
||||
$price-money-size: emCalc(20px) !default;
|
||||
|
||||
// We use these to control the description styles
|
||||
$price-bg: #fff !default;
|
||||
$price-desc-color: #777 !default;
|
||||
$price-desc-padding: emCalc(15px) !default;
|
||||
$price-desc-align: center !default;
|
||||
$price-desc-font-size: emCalc(12px) !default;
|
||||
$price-desc-weight: normal !default;
|
||||
$price-desc-line-height: 1.4 !default;
|
||||
$price-desc-bottom-border: dotted 1px #ddd !default;
|
||||
|
||||
// We use these to control the list item styles
|
||||
$price-item-color: #333 !default;
|
||||
$price-item-padding: emCalc(15px) !default;
|
||||
$price-item-align: center !default;
|
||||
$price-item-font-size: emCalc(14px) !default;
|
||||
$price-item-weight: normal !default;
|
||||
$price-item-bottom-border: dotted 1px #ddd !default;
|
||||
|
||||
// We use these to control the CTA area styles
|
||||
$price-cta-bg: #f5f5f5 !default;
|
||||
$price-cta-align: center !default;
|
||||
$price-cta-padding: emCalc(20px) emCalc(20px) 0 !default;
|
||||
|
||||
//
|
||||
// Pricing Table Mixins
|
||||
//
|
||||
|
||||
// We use this to create the container element for the pricing tables
|
||||
@mixin pricing-table-container {
|
||||
border: $price-table-border;
|
||||
margin-#{$default-float}: 0;
|
||||
margin-bottom: $price-table-margin-bottom;
|
||||
|
||||
& * {
|
||||
list-style: none;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this mixin to create the pricing table title styles
|
||||
@mixin pricing-table-title {
|
||||
background-color: $price-title-bg;
|
||||
padding: $price-title-padding;
|
||||
text-align: $price-title-align;
|
||||
color: $price-title-color;
|
||||
font-weight: $price-title-weight;
|
||||
font-size: $price-title-size;
|
||||
}
|
||||
|
||||
// We use this mixin to control the pricing table price styles
|
||||
@mixin pricing-table-price {
|
||||
background-color: $price-money-bg;
|
||||
padding: $price-money-padding;
|
||||
text-align: $price-money-align;
|
||||
color: $price-money-color;
|
||||
font-weight: $price-money-weight;
|
||||
font-size: $price-money-size;
|
||||
}
|
||||
|
||||
// We use this mixin to create the description styles for the pricing table
|
||||
@mixin pricing-table-description {
|
||||
background-color: $price-bg;
|
||||
padding: $price-desc-padding;
|
||||
text-align: $price-desc-align;
|
||||
color: $price-desc-color;
|
||||
font-size: $price-desc-font-size;
|
||||
font-weight: $price-desc-weight;
|
||||
line-height: $price-desc-line-height;
|
||||
border-bottom: $price-desc-bottom-border;
|
||||
}
|
||||
|
||||
// We use this mixin to style the bullet items in the pricing table
|
||||
@mixin pricing-table-bullet {
|
||||
background-color: $price-bg;
|
||||
padding: $price-item-padding;
|
||||
text-align: $price-item-align;
|
||||
color: $price-item-color;
|
||||
font-size: $price-item-font-size;
|
||||
font-weight: $price-item-weight;
|
||||
border-bottom: $price-item-bottom-border;
|
||||
}
|
||||
|
||||
// We use this mixin to style the CTA area of the pricing tables
|
||||
@mixin pricing-table-cta {
|
||||
background-color: $price-cta-bg;
|
||||
text-align: $price-cta-align;
|
||||
padding: $price-cta-padding;
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-pricing-classes {
|
||||
|
||||
/* Pricing Tables */
|
||||
.pricing-table {
|
||||
@include pricing-table-container;
|
||||
|
||||
.title { @include pricing-table-title; }
|
||||
.price { @include pricing-table-price; }
|
||||
.description { @include pricing-table-description; }
|
||||
.bullet-item { @include pricing-table-bullet; }
|
||||
.cta-button { @include pricing-table-cta; }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,70 +0,0 @@
|
|||
//
|
||||
// Progress Bar Variables
|
||||
//
|
||||
|
||||
// We use this to se the prog bar height
|
||||
$progress-bar-height: emCalc(25px) !default;
|
||||
$progress-bar-color: transparent !default;
|
||||
|
||||
// We use these to control the border styles
|
||||
$progress-bar-border-color: darken(#fff, 20%) !default;
|
||||
$progress-bar-border-size: 1px !default;
|
||||
$progress-bar-border-style: solid !default;
|
||||
$progress-bar-border-radius: $global-radius !default;
|
||||
|
||||
// We use these to control the margin & padding
|
||||
$progress-bar-pad: emCalc(2px) !default;
|
||||
$progress-bar-margin-bottom: emCalc(10px) !default;
|
||||
|
||||
// We use these to set the meter colors
|
||||
$progress-meter-color: $primary-color !default;
|
||||
$progress-meter-secondary-color: $secondary-color !default;
|
||||
$progress-meter-success-color: $success-color !default;
|
||||
$progress-meter-alert-color: $alert-color !default;
|
||||
|
||||
|
||||
//
|
||||
// Progress Bar Mixins
|
||||
//
|
||||
|
||||
// We use this to set up the progress bar container
|
||||
@mixin progress-container {
|
||||
background-color: $progress-bar-color;
|
||||
height: $progress-bar-height;
|
||||
border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color;
|
||||
padding: $progress-bar-pad;
|
||||
margin-bottom: $progress-bar-margin-bottom;
|
||||
}
|
||||
|
||||
@mixin progress-meter($bg:$progress-meter-color) {
|
||||
background: $bg;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-media-classes {
|
||||
|
||||
/* Progress Bar */
|
||||
.progress {
|
||||
@include progress-container;
|
||||
|
||||
// Meter
|
||||
.meter {
|
||||
@include progress-meter;
|
||||
}
|
||||
&.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
|
||||
&.success .meter { @include progress-meter($bg:$progress-meter-success-color); }
|
||||
&.alert .meter { @include progress-meter($bg:$progress-meter-alert-color); }
|
||||
|
||||
&.radius { @include radius($global-radius);
|
||||
.meter { @include radius($global-radius - 1); }
|
||||
}
|
||||
|
||||
&.round { @include radius(1000px);
|
||||
.meter { @include radius(999px); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
// NEED TO FINISH THE LOGIC HERE
|
||||
|
||||
//
|
||||
// Reveal Variables
|
||||
//
|
||||
|
||||
// We use these to control the style of the reveal overlay.
|
||||
$reveal-overlay-bg: rgba(#000, .45) !default;
|
||||
$reveal-overlay-bg-old: #000 !default;
|
||||
|
||||
// We use these to control the style of the modal itself.
|
||||
$reveal-modal-bg: #fff !default;
|
||||
$reveal-position-top: 50px !default;
|
||||
$reveal-default-width: 80% !default;
|
||||
$reveal-modal-padding: emCalc(20px) !default;
|
||||
$reveal-box-shadow: 0 0 10px rgba(#000,.4) !default;
|
||||
|
||||
// We use these to style the reveal close button
|
||||
$reveal-close-font-size: emCalc(22px) !default;
|
||||
$reveal-close-top: emCalc(8px) !default;
|
||||
$reveal-close-side: emCalc(11px) !default;
|
||||
$reveal-close-color: #aaa !default;
|
||||
$reveal-close-weight: bold !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 Mixins
|
||||
//
|
||||
|
||||
// We use this to create the reveal background overlay styles
|
||||
@mixin reveal-bg {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: $reveal-overlay-bg-old;
|
||||
background: $reveal-overlay-bg;
|
||||
z-index: 98;
|
||||
display: none;
|
||||
top: 0;
|
||||
#{$default-float}: 0;
|
||||
}
|
||||
|
||||
// We use this mixin to create the structure of a reveal modal
|
||||
@mixin reveal-modal-base($base-style:true, $width:$reveal-default-width) {
|
||||
@if $base-style {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
position: absolute;
|
||||
#{$default-float}: 50%;
|
||||
z-index: 99;
|
||||
height: auto;
|
||||
background-color: #fff;
|
||||
|
||||
// Make sure rows don't have a min-width on them
|
||||
.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 {
|
||||
margin-#{$default-float}: -($width / 2);
|
||||
width: $width;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this to style the reveal modal defaults
|
||||
@mixin reveal-modal-style($bg:$reveal-modal-bg, $padding:$reveal-modal-padding, $border:true, $border-style:$reveal-border-style, $border-width:$reveal-border-width, $border-color:$reveal-border-color, $box-shadow:true, $top-offset:$reveal-position-top) {
|
||||
|
||||
@if $bg { background-color: $bg; }
|
||||
@if $padding { padding: $padding; }
|
||||
|
||||
@if $border { border: $border-style $border-width $border-color; }
|
||||
|
||||
// We can choose whether or not to include the default box-shadow.
|
||||
@if $box-shadow {
|
||||
-webkit-box-shadow: $reveal-box-shadow;
|
||||
box-shadow: $reveal-box-shadow;
|
||||
}
|
||||
|
||||
@if $top-offset { top: $top-offset; }
|
||||
}
|
||||
|
||||
// We use this to create a close button for the reveal modal
|
||||
@mixin reveal-close($color:$reveal-close-color) {
|
||||
font-size: $reveal-close-font-size;
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
top: $reveal-close-top;
|
||||
#{$opposite-direction}: $reveal-close-side;
|
||||
color: $color;
|
||||
font-weight: $reveal-close-weight;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@if $include-html-reveal-classes {
|
||||
// Reveal Modals
|
||||
.reveal-modal-bg { @include reveal-bg; }
|
||||
|
||||
.reveal-modal {
|
||||
@include reveal-modal-base;
|
||||
@include reveal-modal-style;
|
||||
|
||||
.close-reveal-modal { @include reveal-close; }
|
||||
}
|
||||
|
||||
// Large Screen Styles
|
||||
@media #{$small} {
|
||||
|
||||
.reveal-modal {
|
||||
@include reveal-modal-style(false, emCalc(30px), false, $box-shadow: false, $top-offset: emCalc(100px));
|
||||
|
||||
&.small { @include reveal-modal-base(false, 30%); }
|
||||
&.medium { @include reveal-modal-base(false, 40%); }
|
||||
&.large { @include reveal-modal-base(false, 60%); }
|
||||
&.xlarge { @include reveal-modal-base(false, 70%); }
|
||||
&.expand { @include reveal-modal-base(false, 95%); }
|
||||
}
|
||||
}
|
||||
|
||||
// Reveal Print Styles
|
||||
@media print {
|
||||
div:not(.reveal-modal) { display: none; }
|
||||
}
|
||||
}
|
||||
|
|
@ -1,249 +0,0 @@
|
|||
//
|
||||
// Section Variables
|
||||
//
|
||||
|
||||
// We use these to set padding and hover factor
|
||||
$section-padding: emCalc(15px) !default;
|
||||
$section-function-factor: 10% !default;
|
||||
|
||||
// These style the titles
|
||||
$section-title-color: #333 !default;
|
||||
$section-title-bg: #efefef !default;
|
||||
$section-title-bg-active: darken($section-title-bg, $section-function-factor) !default;
|
||||
$section-title-bg-active-tabs: #fff !default;
|
||||
|
||||
// Want to control border size, here ya go!
|
||||
$section-border-size: 1px !default;
|
||||
$section-border-style: solid !default;
|
||||
$section-border-color: #ccc !default;
|
||||
|
||||
// Control the color of the background and some size options
|
||||
$section-content-bg: #fff !default;
|
||||
$section-vertical-nav-min-width: emCalc(200px) !default;
|
||||
$section-bottom-margin: emCalc(20px) !default;
|
||||
|
||||
|
||||
//
|
||||
// Section Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create the basic container styles for sections when they act like accordions
|
||||
@mixin section-container($base-style:true, $section-type:accordion) {
|
||||
|
||||
// We can set this to false to not include these styles to avoid repeated CSS on classes.
|
||||
@if $base-style {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-bottom: $section-bottom-margin;
|
||||
}
|
||||
|
||||
// Accordion container border styles
|
||||
@if $section-type == accordion {
|
||||
border: $section-border-size $section-border-style $section-border-color;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
// Tabs container border styles
|
||||
@else if $section-type == tabs {
|
||||
border: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Vertical Nav container border styles
|
||||
@else if $section-type == vertical-nav {
|
||||
|
||||
}
|
||||
|
||||
// Horizontal Nav container border styles
|
||||
@else if $section-type == horizontal-nav {
|
||||
position: relative;
|
||||
background: $section-title-bg;
|
||||
border: $section-border-size $section-border-style $section-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this mixin to create the styles for sections as accordions.
|
||||
@mixin section($section-type:accordion) {
|
||||
|
||||
// Accordion styles
|
||||
@if $section-type == accordion {
|
||||
|
||||
border-top: $section-border-size $section-border-style $section-border-color;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
background-color: $section-title-bg;
|
||||
|
||||
a {
|
||||
padding: $section-padding;
|
||||
display: inline-block;
|
||||
color: $section-title-color;
|
||||
font-size: emCalc(14px);
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
&:hover { background-color: darken($section-title-bg, $section-function-factor/2); }
|
||||
}
|
||||
|
||||
.content {
|
||||
display: none;
|
||||
padding: $section-padding;
|
||||
background-color: $section-content-bg;
|
||||
|
||||
&>*:last-child { margin-bottom: 0; }
|
||||
&>*:first-child { padding-top: 0; }
|
||||
&>*:last-child { padding-bottom: 0; }
|
||||
}
|
||||
|
||||
|
||||
&.active {
|
||||
.content { display: block; }
|
||||
.title { background: $section-title-bg-active; }
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Tab Styles
|
||||
@else if $section-type == tabs {
|
||||
padding-top: 0;
|
||||
border: 0;
|
||||
position: static;
|
||||
|
||||
.title {
|
||||
width: auto;
|
||||
border: $section-border-size $section-border-style $section-border-color;
|
||||
border-#{$opposite-direction}: 0;
|
||||
border-bottom: 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
a { width: 100%; }
|
||||
}
|
||||
&:last-child .title { border-#{$opposite-direction}: $section-border-size $section-border-style $section-border-color; }
|
||||
|
||||
.content {
|
||||
border: $section-border-size $section-border-style $section-border-color;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
||||
.title {
|
||||
background-color: $section-title-bg-active-tabs;
|
||||
z-index: 11;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.content { position: relative; }
|
||||
}
|
||||
}
|
||||
|
||||
// Vertical Nav Styles
|
||||
@else if $section-type == vertical-nav {
|
||||
|
||||
padding-top: 0 !important;
|
||||
|
||||
.title a { display: block; width: 100%; }
|
||||
|
||||
.content { display: none; }
|
||||
|
||||
&.active {
|
||||
.content {
|
||||
display: block;
|
||||
position: absolute;
|
||||
#{$default-float}: 100%;
|
||||
top: -1px;
|
||||
z-index: 999;
|
||||
min-width: $section-vertical-nav-min-width;
|
||||
border: $section-border-size $section-border-style $section-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal Nav Styles
|
||||
@else if $section-type == horizontal-nav {
|
||||
padding-top: 0;
|
||||
border: 0;
|
||||
position: static;
|
||||
|
||||
.title {
|
||||
width: auto;
|
||||
border: $section-border-size $section-border-style $section-border-color;
|
||||
border-#{$default-float}: 0;
|
||||
top: -1px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
a { width: 100%; }
|
||||
}
|
||||
|
||||
.content { display: none; }
|
||||
|
||||
&.active {
|
||||
.content {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
#{$default-float}: 0;
|
||||
top: -2px;
|
||||
min-width: $section-vertical-nav-min-width;
|
||||
border: $section-border-size $section-border-style $section-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-section-classes {
|
||||
|
||||
/* Sections */
|
||||
.section-container, .section-container.auto {
|
||||
@include section-container;
|
||||
|
||||
section,
|
||||
.section {
|
||||
@include section;
|
||||
}
|
||||
}
|
||||
|
||||
.section-container.tabs {
|
||||
@include section-container(false, tabs);
|
||||
|
||||
section,
|
||||
.section { @include section(tabs); }
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
|
||||
.section-container.auto {
|
||||
@include section-container(false, tabs);
|
||||
|
||||
section,
|
||||
.section { @include section(tabs); }
|
||||
}
|
||||
.section-container.accordion .section {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.section-container.vertical-nav {
|
||||
@include section-container(false);
|
||||
|
||||
section,
|
||||
.section { @include section(vertical-nav); }
|
||||
}
|
||||
|
||||
.section-container.horizontal-nav {
|
||||
@include section-container(false, horizontal-nav);
|
||||
|
||||
section,
|
||||
.section { @include section(horizontal-nav); }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
//
|
||||
// Side Nav Variables
|
||||
//
|
||||
|
||||
// We use this to control padding.
|
||||
$side-nav-padding: emCalc(14px) 0 !default;
|
||||
|
||||
// We use these to control list styles.
|
||||
$side-nav-list-type: none !default;
|
||||
$side-nav-list-position: inside !default;
|
||||
$side-nav-list-margin: 0 0 emCalc(7px) 0 !default;
|
||||
|
||||
// We use these to control link styles.
|
||||
$side-nav-link-color: $primary-color !default;
|
||||
$side-nav-link-color-active: lighten(#000, 30%) !default;
|
||||
$side-nav-font-size: emCalc(14px) !default;
|
||||
$side-nav-font-weight: bold !default;
|
||||
|
||||
// We use these to control border styles
|
||||
$side-nav-divider-size: 1px !default;
|
||||
$side-nav-divider-style: solid !default;
|
||||
$side-nav-divider-color: darken(#fff, 10%) !default;
|
||||
|
||||
|
||||
//
|
||||
// Side Nav Mixins
|
||||
//
|
||||
|
||||
|
||||
// We use this to style the side-nav
|
||||
@mixin side-nav($divider-color:$side-nav-divider-color, $font-size:$side-nav-font-size, $link-color:$side-nav-link-color) {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: $side-nav-padding;
|
||||
list-style-type: $side-nav-list-type;
|
||||
list-style-position: $side-nav-list-position;
|
||||
|
||||
li {
|
||||
margin: $side-nav-list-margin;
|
||||
font-size: $font-size;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: $link-color;
|
||||
}
|
||||
|
||||
&.active a {
|
||||
color: $side-nav-link-color-active;
|
||||
font-weight: $side-nav-font-weight;
|
||||
}
|
||||
|
||||
&.divider {
|
||||
border-top: $side-nav-divider-size $side-nav-divider-style;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
border-top-color: $divider-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-nav-classes {
|
||||
|
||||
/* Side Nav */
|
||||
.side-nav { @include side-nav; }
|
||||
|
||||
}
|
||||
|
|
@ -1,159 +0,0 @@
|
|||
//
|
||||
// Split Button Variables
|
||||
//
|
||||
|
||||
// We use these to control different shared styles for Split Buttons
|
||||
$split-button-function-factor: 15% !default;
|
||||
$split-button-pip-color: #fff !default;
|
||||
$split-button-pip-color-alt: #333 !default;
|
||||
$split-button-active-bg-tint: rgba(0,0,0,0.1) !default;
|
||||
|
||||
// We use these to control tiny split buttons
|
||||
$split-button-padding-tny: $button-tny * 9 !default;
|
||||
$split-button-span-width-tny: $button-tny * 6.5 !default;
|
||||
$split-button-pip-size-tny: $button-tny !default;
|
||||
$split-button-pip-top-tny: $button-tny * 2 !default;
|
||||
$split-button-pip-default-float-tny: emCalc(-5px) !default;
|
||||
|
||||
// We use these to control small split buttons
|
||||
$split-button-padding-sml: $button-sml * 7 !default;
|
||||
$split-button-span-width-sml: $button-sml * 5 !default;
|
||||
$split-button-pip-size-sml: $button-sml !default;
|
||||
$split-button-pip-top-sml: $button-sml * 1.5 !default;
|
||||
$split-button-pip-default-float-sml: emCalc(-9px) !default;
|
||||
|
||||
// We use these to control medium split buttons
|
||||
$split-button-padding-med: $button-med * 6.4 !default;
|
||||
$split-button-span-width-med: $button-med * 4 !default;
|
||||
$split-button-pip-size-med: $button-med - emCalc(3px) !default;
|
||||
$split-button-pip-top-med: $button-med * 1.5 !default;
|
||||
$split-button-pip-default-float-med: emCalc(-9px) !default;
|
||||
|
||||
// We use these to control large split buttons
|
||||
$split-button-padding-lrg: $button-lrg * 6 !default;
|
||||
$split-button-span-width-lrg: $button-lrg * 3.75 !default;
|
||||
$split-button-pip-size-lrg: $button-lrg - emCalc(6px) !default;
|
||||
$split-button-pip-top-lrg: $button-lrg + emCalc(5px) !default;
|
||||
$split-button-pip-default-float-lrg: emCalc(-9px) !default;
|
||||
|
||||
|
||||
//
|
||||
// Split Button Mixin
|
||||
//
|
||||
|
||||
// We use this mixin to create split buttons that build upon the button mixins
|
||||
@mixin split-button($padding:medium, $pip-color:$split-button-pip-color, $span-border:$primary-color, $base-style:true) {
|
||||
|
||||
// With this, we can control whether or not the base styles come through.
|
||||
@if $base-style {
|
||||
position: relative;
|
||||
|
||||
// Styling for the split arrow clickable area
|
||||
span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
#{$opposite-direction}: 0;
|
||||
top: 0;
|
||||
border-#{$default-float}: solid 1px;
|
||||
|
||||
// Building the triangle pip indicator
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
border-style: solid;
|
||||
|
||||
#{$default-float}: 50%;
|
||||
}
|
||||
|
||||
&:active { background-color: $split-button-active-bg-tint; }
|
||||
}
|
||||
}
|
||||
|
||||
// Control the border color for the span area of the split button
|
||||
@if $span-border {
|
||||
span { border-#{$default-float}-color: darken($span-border, $split-button-function-factor); }
|
||||
}
|
||||
|
||||
// Style of the button and clickable area for tiny sizes
|
||||
@if $padding == tiny {
|
||||
padding-#{$opposite-direction}: $split-button-padding-tny;
|
||||
|
||||
span { width: $split-button-span-width-tny;
|
||||
&:before {
|
||||
border-width: $split-button-pip-size-tny;
|
||||
top: $split-button-pip-top-tny;
|
||||
margin-#{$default-float}: $split-button-pip-default-float-tny;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Style of the button and clickable area for small sizes
|
||||
@else if $padding == small {
|
||||
padding-#{$opposite-direction}: $split-button-padding-sml;
|
||||
|
||||
span { width: $split-button-span-width-sml;
|
||||
&:before {
|
||||
border-width: $split-button-pip-size-sml;
|
||||
top: $split-button-pip-top-sml;
|
||||
margin-#{$default-float}: $split-button-pip-default-float-sml;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Style of the button and clickable area for default (medium) sizes
|
||||
@else if $padding == medium {
|
||||
padding-#{$opposite-direction}: $split-button-padding-med;
|
||||
|
||||
span { width: $split-button-span-width-med;
|
||||
&:before {
|
||||
border-width: $split-button-pip-size-med;
|
||||
top: $split-button-pip-top-med;
|
||||
margin-#{$default-float}: $split-button-pip-default-float-med;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Style of the button and clickable area for large sizes
|
||||
@else if $padding == large {
|
||||
padding-#{$opposite-direction}: $split-button-padding-lrg;
|
||||
|
||||
span { width: $split-button-span-width-lrg;
|
||||
&:before {
|
||||
border-width: $split-button-pip-size-lrg;
|
||||
top: $split-button-pip-top-lrg;
|
||||
margin-#{$default-float}: $split-button-pip-default-float-lrg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Control the color of the triangle pip
|
||||
@if $pip-color {
|
||||
span:before { border-color: $pip-color transparent transparent transparent; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-button-classes {
|
||||
|
||||
/* Split Buttons */
|
||||
.split.button { @include split-button;
|
||||
|
||||
&.secondary { @include split-button(false, $split-button-pip-color, $secondary-color, false); }
|
||||
&.alert { @include split-button(false, false, $alert-color, false); }
|
||||
&.success { @include split-button(false, false, $success-color, false); }
|
||||
|
||||
&.tiny { @include split-button(tiny, false, false, false); }
|
||||
&.small { @include split-button(small, false, false, false); }
|
||||
&.large { @include split-button(large, false, false, false); }
|
||||
|
||||
&.secondary { @include split-button(false, $split-button-pip-color-alt, false, false); }
|
||||
|
||||
&.radius span { @include side-radius($opposite-direction, $global-radius); }
|
||||
&.round span { @include side-radius($opposite-direction, 1000px); }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
//
|
||||
// Sub Nav Variables
|
||||
//
|
||||
|
||||
// We use these to control margin and padding
|
||||
$sub-nav-list-margin: emCalc(-4px) 0 emCalc(18px) !default;
|
||||
$sub-nav-list-padding-top: emCalc(4px) !default;
|
||||
|
||||
// We use this to control the definition
|
||||
$sub-nav-font-size: emCalc(14px) !default;
|
||||
$sub-nav-font-color: #999 !default;
|
||||
$sub-nav-font-weight: normal !default;
|
||||
$sub-nav-text-decoration: none !default;
|
||||
$sub-nav-border-radius: 1000px !default;
|
||||
|
||||
// We use these to control the active item styles
|
||||
$sub-nav-active-font-weight: bold !default;
|
||||
$sub-nav-active-bg: $primary-color !default;
|
||||
$sub-nav-active-color: #fff !default;
|
||||
$sub-nav-active-padding: emCalc(3px) emCalc(9px) !default;
|
||||
$sub-nav-active-cursor: default !default;
|
||||
|
||||
//
|
||||
// Sub Nav Mixins
|
||||
//
|
||||
|
||||
@mixin sub-nav($font-color:$sub-nav-font-color, $font-size:$sub-nav-font-size, $active-bg:$sub-nav-active-bg) {
|
||||
display: block;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
margin: $sub-nav-list-margin;
|
||||
padding-top: $sub-nav-list-padding-top;
|
||||
margin-#{$opposite-direction}: 0;
|
||||
margin-#{$default-float}: emCalc(-9px);
|
||||
|
||||
dt,
|
||||
dd {
|
||||
float: $default-float;
|
||||
display: inline;
|
||||
margin-#{$default-float}: emCalc(9px);
|
||||
margin-bottom: emCalc(10px);
|
||||
font-weight: $sub-nav-font-weight;
|
||||
font-size: $font-size;
|
||||
|
||||
a {
|
||||
color: $font-color;
|
||||
text-decoration: $sub-nav-text-decoration; }
|
||||
|
||||
&.active a {
|
||||
@include radius($sub-nav-border-radius);
|
||||
font-weight: $sub-nav-active-font-weight;
|
||||
background: $active-bg;
|
||||
padding: $sub-nav-active-padding;
|
||||
cursor: $sub-nav-active-cursor;
|
||||
color: $sub-nav-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@if $include-html-nav-classes {
|
||||
|
||||
/* Side Nav */
|
||||
.sub-nav { @include sub-nav; }
|
||||
|
||||
}
|
||||
|
|
@ -1,249 +0,0 @@
|
|||
//
|
||||
// Switch Variables
|
||||
//
|
||||
|
||||
// Controlling border styles and background colors for the switch container
|
||||
$switch-border-color: darken(#fff, 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: emCalc(20px) !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: darken($switch-paddle-bg, 10%) !default;
|
||||
$switch-paddle-border-color: darken($switch-paddle-bg, 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: lighten($success-color, 50%) !default;
|
||||
$switch-negative-color: #f5f5f5 !default;
|
||||
|
||||
// Outline Style for tabbing through switches
|
||||
$switch-label-outline: 1px dotted #888 !default;
|
||||
|
||||
|
||||
//
|
||||
// Switch Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create the base styles for our switch element.
|
||||
@mixin switch-base($transition-speed:$switch-paddle-transition-speed, $transition-ease:$switch-paddle-transition-ease) {
|
||||
|
||||
// Default position and structure for switch container.
|
||||
position: relative;
|
||||
width: 100%;
|
||||
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: 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%;
|
||||
|
||||
// Hover and focus styles for the paddle
|
||||
&:hover,
|
||||
&:focus {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
// The toggle area for radio switches. We call is a paddle.
|
||||
& > span {
|
||||
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; }
|
||||
|
||||
// Bugfix for older Webkit, including mobile Webkit. Adapted from:
|
||||
// http://css-tricks.com/webkit-sibling-bug/
|
||||
-webkit-animation: webkitSiblingBugfix infinite 1s;
|
||||
|
||||
}
|
||||
|
||||
// We use this mixin to create the size styles for switches.
|
||||
@mixin switch-size($height:$switch-height-med, $font-size:$switch-font-size-med, $line-height:2.3em) {
|
||||
|
||||
height: $height;
|
||||
|
||||
label {
|
||||
padding: 0 emCalc($switch-label-side-padding);
|
||||
line-height: $line-height;
|
||||
font-size: emCalc($font-size);
|
||||
}
|
||||
|
||||
input {
|
||||
// Move the paddle to the right position
|
||||
&:first-of-type:checked ~ span {
|
||||
#{$default-float}: 100%;
|
||||
margin-#{$default-float}: emCalc(-$height + 1px);
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
width: emCalc($height);
|
||||
height: emCalc($height);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// We use this mixin to add color and other fanciness to the switches.
|
||||
@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 {
|
||||
border-color: darken($paddle-bg, 30%);
|
||||
background: $paddle-bg;
|
||||
background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
|
||||
background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
|
||||
background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
|
||||
|
||||
// Building the alternating colored sides of the switch
|
||||
-webkit-box-shadow: 2px 0 10px 0 rgba(0,0,0,0.07),
|
||||
1000px 0 0 1000px $positive-color,
|
||||
-2px 0 10px 0 rgba(0,0,0,0.07),
|
||||
-1000px 0 0 1000px $negative-color;
|
||||
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 {
|
||||
background: $paddle-bg;
|
||||
background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
|
||||
background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
|
||||
background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
&:active { background: transparent; }
|
||||
}
|
||||
|
||||
// Setting up the radius for switches
|
||||
@if $radius == true {
|
||||
@include radius(4px);
|
||||
& > span { @include radius(3px); }
|
||||
}
|
||||
@else if $radius {
|
||||
@include radius($radius);
|
||||
& > span { @include radius($radius - 1px); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// We use this to quickly create switches with a single mixin
|
||||
@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.3em, $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);
|
||||
}
|
||||
|
||||
@if $include-html-button-classes {
|
||||
|
||||
/* Foundation Switches */
|
||||
@media only screen {
|
||||
|
||||
// Containing element for the radio switch
|
||||
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.1em); }
|
||||
|
||||
// Tiny radio switches
|
||||
&.tiny { @include switch-size($switch-height-tny, $switch-font-size-tny, 1.9em); }
|
||||
|
||||
// Add a radius to the switch
|
||||
&.radius { @include radius(4px);
|
||||
& > span { @include radius(3px); }
|
||||
}
|
||||
|
||||
// Make the switch completely round, like a pill
|
||||
&.round { @include radius(1000px);
|
||||
& > span { @include radius(999px); }
|
||||
label { padding: 0 emCalc($switch-label-side-padding + 3px); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@-webkit-keyframes webkitSiblingBugfix { from { position: relative; } to { position: relative; } }
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
//
|
||||
// Table Variables
|
||||
//
|
||||
|
||||
// These control the background color for the table and even rows
|
||||
$table-bg: #fff !default;
|
||||
$table-even-row-bg: #f9f9f9 !default;
|
||||
|
||||
// These control the table cell border style
|
||||
$table-border-style: solid !default;
|
||||
$table-border-size: 1px !default;
|
||||
$table-border-color: #ddd !default;
|
||||
|
||||
// These control the table head styles
|
||||
$table-head-bg: #f5f5f5 !default;
|
||||
$table-head-font-size: emCalc(14px) !default;
|
||||
$table-head-font-color: #222 !default;
|
||||
$table-head-font-weight: bold !default;
|
||||
$table-head-padding: emCalc(8px) emCalc(10px) emCalc(10px) !default;
|
||||
|
||||
// These control the row padding and font styles
|
||||
$table-row-padding: emCalc(9px) emCalc(10px) !default;
|
||||
$table-row-font-size: emCalc(14px) !default;
|
||||
$table-row-font-color: #222 !default;
|
||||
$table-line-height: emCalc(18px) !default;
|
||||
|
||||
// These are for controlling the display and margin of tables
|
||||
$table-display: table-cell !default;
|
||||
$table-margin-bottom: emCalc(20px) !default;
|
||||
|
||||
|
||||
//
|
||||
// Table Mixin
|
||||
//
|
||||
@mixin table {
|
||||
background: $table-bg;
|
||||
margin-bottom: $table-margin-bottom;
|
||||
border: $table-border-style $table-border-size $table-border-color;
|
||||
|
||||
thead,
|
||||
tfoot {
|
||||
background: $table-head-bg;
|
||||
font-weight: $table-head-font-weight;
|
||||
|
||||
tr {
|
||||
th,
|
||||
td {
|
||||
padding: $table-head-padding;
|
||||
font-size: $table-head-font-size;
|
||||
color: $table-head-font-color;
|
||||
text-align: $default-float;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
th,
|
||||
td {
|
||||
padding: $table-row-padding;
|
||||
font-size: $table-row-font-size;
|
||||
color: $table-row-font-color;
|
||||
}
|
||||
|
||||
&.even,
|
||||
&.alt,
|
||||
&:nth-of-type(even) { background: $table-even-row-bg; }
|
||||
}
|
||||
|
||||
thead tr th,
|
||||
tfoot tr th,
|
||||
tbody tr td,
|
||||
tr td,
|
||||
tfoot tr td { display: $table-display; line-height: $table-line-height; }
|
||||
}
|
||||
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
@include table;
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
//
|
||||
// Image Thumbnail Variables
|
||||
//
|
||||
|
||||
// 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-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5) !default;
|
||||
|
||||
// Radius and transition speed for thumbs
|
||||
$thumb-radius: $global-radius !default;
|
||||
$thumb-transition-speed: 200ms !default;
|
||||
|
||||
//
|
||||
// Image Thumbnail Mixins
|
||||
//
|
||||
|
||||
// We use this to create image thumbnail styles.
|
||||
@mixin thumb($border-width:$thumb-border-width, $box-shadow:$thumb-box-shadow, $box-shadow-hover:$thumb-box-shadow-hover) {
|
||||
display: inline-block;
|
||||
border: $thumb-border-style $border-width $thumb-border-color;
|
||||
-webkit-box-shadow: $box-shadow;
|
||||
box-shadow: $box-shadow;
|
||||
|
||||
&:hover,
|
||||
&:focus { -webkit-box-shadow: $box-shadow-hover; box-shadow: $box-shadow-hover; }
|
||||
}
|
||||
|
||||
|
||||
// If html classes are turned on we'll include these classes.
|
||||
@if $include-html-media-classes {
|
||||
|
||||
/* Image Thumbnails */
|
||||
.th {
|
||||
@include thumb;
|
||||
@include single-transition(all,$thumb-transition-speed,ease-out);
|
||||
|
||||
&.radius { @include radius($thumb-radius); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
//
|
||||
// Tooltip Variables
|
||||
//
|
||||
$has-tip-border-bottom: dotted 1px #ccc !default;
|
||||
$has-tip-font-weight: bold !default;
|
||||
$has-tip-font-color: #333 !default;
|
||||
$has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%) !default;
|
||||
$has-tip-font-color-hover: $primary-color !default;
|
||||
$has-tip-cursor-type: help !default;
|
||||
|
||||
$tooltip-padding: emCalc(8px) !default;
|
||||
$tooltip-bg: #000 !default;
|
||||
$tooltip-font-size: emCalc(15px) !default;
|
||||
$tooltip-font-weight: bold !default;
|
||||
$tooltip-font-color: #fff !default;
|
||||
$tooltip-line-height: 1.3 !default;
|
||||
$tooltip-close-font-size: emCalc(10px) !default;
|
||||
$tooltip-close-font-weight: normal !default;
|
||||
$tooltip-close-font-color: #888 !default;
|
||||
$tooltip-font-size-sml: emCalc(14px) !default;
|
||||
$tooltip-radius: $global-radius !default;
|
||||
$tooltip-pip-size: 5px !default;
|
||||
|
||||
|
||||
/* Tooltips */
|
||||
|
||||
.has-tip {
|
||||
border-bottom: $has-tip-border-bottom;
|
||||
cursor: $has-tip-cursor-type;
|
||||
font-weight: $has-tip-font-weight;
|
||||
color: $has-tip-font-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border-bottom: $has-tip-border-bottom-hover;
|
||||
color: $has-tip-font-color-hover;
|
||||
}
|
||||
|
||||
&.tip-left,
|
||||
&.tip-right { float: none !important; }
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
font-weight: $tooltip-font-weight;
|
||||
font-size: $tooltip-font-size;
|
||||
line-height: $tooltip-line-height;
|
||||
padding: $tooltip-padding;
|
||||
max-width: 85%;
|
||||
#{$default-float}: 50%;
|
||||
width: 100%;
|
||||
color: $tooltip-font-color;
|
||||
background: $tooltip-bg;
|
||||
@include radius($tooltip-radius);
|
||||
|
||||
&>.nub {
|
||||
display: block;
|
||||
#{$default-float}: $tooltip-pip-size;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: solid $tooltip-pip-size;
|
||||
border-color: transparent transparent $tooltip-bg transparent;
|
||||
top: -($tooltip-pip-size * 2);
|
||||
}
|
||||
|
||||
&.opened {
|
||||
color: $has-tip-font-color-hover !important;
|
||||
border-bottom: $has-tip-border-bottom-hover !important;
|
||||
}
|
||||
}
|
||||
|
||||
.tap-to-close {
|
||||
display: block;
|
||||
font-size: $tooltip-close-font-size;
|
||||
color: $tooltip-close-font-color;
|
||||
font-weight: $tooltip-close-font-weight;
|
||||
}
|
||||
|
||||
@media #{$small} {
|
||||
.tooltip {
|
||||
&>.nub {
|
||||
border-color: transparent transparent $tooltip-bg transparent;
|
||||
top: -($tooltip-pip-size * 2);
|
||||
}
|
||||
&.tip-top>.nub {
|
||||
border-color: $tooltip-bg transparent transparent transparent;
|
||||
top: auto;
|
||||
bottom: -($tooltip-pip-size * 2);
|
||||
}
|
||||
|
||||
&.tip-left,
|
||||
&.tip-right { float: none !important; }
|
||||
|
||||
&.tip-left>.nub {
|
||||
border-color: transparent transparent transparent $tooltip-bg;
|
||||
right: -($tooltip-pip-size * 2);
|
||||
left: auto;
|
||||
top: 50%;
|
||||
margin-top: -$tooltip-pip-size;
|
||||
}
|
||||
&.tip-right>.nub {
|
||||
border-color: transparent $tooltip-bg transparent transparent;
|
||||
right: auto;
|
||||
left: -($tooltip-pip-size * 2);
|
||||
top: 50%;
|
||||
margin-top: -$tooltip-pip-size;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,459 +0,0 @@
|
|||
//
|
||||
// Top Bar Variables
|
||||
//
|
||||
|
||||
// Background color for the top bar
|
||||
$topbar-bg: #111 !default;
|
||||
|
||||
// Height and margin
|
||||
$topbar-height: 45px !default;
|
||||
$topbar-margin-bottom: emCalc(30px) !default;
|
||||
|
||||
// Control Input height for top bar
|
||||
$topbar-input-height: 2.45em !default;
|
||||
|
||||
// Controlling the styles for the title in the top bar
|
||||
$topbar-title-weight: bold !default;
|
||||
$topbar-title-font-size: emCalc(17px) !default;
|
||||
|
||||
// Set the link colors and styles for top-level nav
|
||||
$topbar-link-color: #fff !default;
|
||||
$topbar-link-weight: bold !default;
|
||||
$topbar-link-font-size: emCalc(13px) !default;
|
||||
|
||||
// Style the top bar dropdown elements
|
||||
$topbar-dropdown-bg: #333 !default;
|
||||
$topbar-dropdown-link-color: #fff !default;
|
||||
$topbar-dropdown-toggle-size: 5px !default;
|
||||
$topbar-dropdown-toggle-color: #fff !default;
|
||||
$topbar-dropdown-toggle-alpha: 0.5 !default;
|
||||
$dropdown-label-color: #555 !default;
|
||||
|
||||
// Top menu icon styles
|
||||
$topbar-menu-link-transform: uppercase !default;
|
||||
$topbar-menu-link-font-size: emCalc(13px) !default;
|
||||
$topbar-menu-link-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;
|
||||
|
||||
// Transitions and breakpoint styles
|
||||
$topbar-transition-speed: 300ms !default;
|
||||
$topbar-breakpoint: emCalc(940px) !default; // Change to 9999px for always mobile layout
|
||||
$topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !default;
|
||||
|
||||
|
||||
/* Wrapped around .top-bar to contain to grid width */
|
||||
.contain-to-grid {
|
||||
width: 100%;
|
||||
background: $topbar-bg;
|
||||
}
|
||||
|
||||
// Wrapped around .top-bar to make it fixed at the top
|
||||
.fixed {
|
||||
width: 100%;
|
||||
#{$default-float}: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
overflow: hidden;
|
||||
height: $topbar-height;
|
||||
line-height: $topbar-height;
|
||||
position: relative;
|
||||
background: $topbar-bg;
|
||||
margin-bottom: $topbar-margin-bottom;
|
||||
|
||||
// Topbar Global list Styles
|
||||
ul {
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.row { max-width: none; }
|
||||
|
||||
form,
|
||||
input { margin-bottom: 0; }
|
||||
|
||||
input { height: $topbar-input-height; }
|
||||
|
||||
.button { padding-top: .5em; padding-bottom: .5em; margin-bottom: 0; }
|
||||
|
||||
// Title Area
|
||||
.title-area { position: relative; }
|
||||
|
||||
.name {
|
||||
height: $topbar-height;
|
||||
margin: 0;
|
||||
font-size: $em-base;
|
||||
|
||||
h1 {
|
||||
line-height: $topbar-height;
|
||||
font-size: $topbar-title-font-size;
|
||||
margin: 0;
|
||||
a {
|
||||
font-weight: $topbar-title-weight;
|
||||
color: $topbar-link-color;
|
||||
width: 50%;
|
||||
display: block;
|
||||
padding: 0 $topbar-height / 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Menu toggle button on small devices
|
||||
.toggle-topbar {
|
||||
position: absolute;
|
||||
#{$opposite-direction}: 0;
|
||||
top: 0;
|
||||
|
||||
a {
|
||||
color: $topbar-link-color;
|
||||
text-transform: $topbar-menu-link-transform;
|
||||
font-size: $topbar-menu-link-font-size;
|
||||
font-weight: $topbar-menu-link-weight;
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0 $topbar-height / 3;
|
||||
height: $topbar-height;
|
||||
line-height: $topbar-height;
|
||||
}
|
||||
|
||||
// Adding the class "menu-icon" will add the 3-line icon people love and adore.
|
||||
&.menu-icon {
|
||||
#{$opposite-direction}: $topbar-height / 3;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
padding-#{$default-float}: 40px;
|
||||
|
||||
a {
|
||||
text-indent: -48px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 33px;
|
||||
padding: 0;
|
||||
color: $topbar-menu-link-color;
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
#{$opposite-direction}: 0;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 0;
|
||||
// Shh, don't tell, but box-shadows create the menu icon :)
|
||||
-webkit-box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
|
||||
0 16px 0 1px $topbar-menu-icon-color,
|
||||
0 22px 0 1px $topbar-menu-icon-color;
|
||||
|
||||
box-shadow: 0 10px 0 1px $topbar-menu-icon-color,
|
||||
0 16px 0 1px $topbar-menu-icon-color,
|
||||
0 22px 0 1px $topbar-menu-icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Change things up when the top-bar is expanded
|
||||
&.expanded {
|
||||
height: auto;
|
||||
background: transparent;
|
||||
|
||||
.title-area { background: $topbar-bg; }
|
||||
|
||||
.toggle-topbar {
|
||||
a { color: $topbar-menu-link-color-toggled;
|
||||
span {
|
||||
// Shh, don't tell, but box-shadows create the menu icon :)
|
||||
-webkit-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;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Right and Left Navigation that stacked by default
|
||||
.top-bar-section {
|
||||
#{$default-float}: 0;
|
||||
position: relative;
|
||||
width: auto;
|
||||
@include single-transition($default-float, $topbar-transition-speed);
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
background: $topbar-dropdown-bg;
|
||||
font-size: $em-base;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.divider {
|
||||
border-bottom: solid 1px lighten($topbar-dropdown-bg, 10%);
|
||||
border-top: solid 1px darken($topbar-dropdown-bg, 10%);
|
||||
clear: both;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ul li {
|
||||
& > a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
color: $topbar-link-color;
|
||||
padding: 12px 0 12px 0;
|
||||
padding-#{$default-float}: $topbar-height / 3;
|
||||
font-size: $topbar-link-font-size;
|
||||
font-weight: $topbar-link-weight;
|
||||
background: $topbar-dropdown-bg;
|
||||
height: $topbar-height;
|
||||
|
||||
&:hover { background: darken($topbar-dropdown-bg, 3%); }
|
||||
|
||||
|
||||
&.button {
|
||||
background: $primary-color;
|
||||
font-size: $topbar-link-font-size;
|
||||
&:hover {
|
||||
background: darken($primary-color, 10%);
|
||||
}
|
||||
}
|
||||
&.button.secondary {
|
||||
background: $secondary-color;
|
||||
&:hover {
|
||||
background: darken($secondary-color, 10%);
|
||||
}
|
||||
}
|
||||
&.button.success {
|
||||
background: $success-color;
|
||||
&:hover {
|
||||
background: darken($success-color, 10%);
|
||||
}
|
||||
}
|
||||
&.button.alert {
|
||||
background: $alert-color;
|
||||
&:hover {
|
||||
background: darken($alert-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Apply the active link color when it has that class
|
||||
&.active > a { background: darken($topbar-dropdown-bg, 3%); }
|
||||
}
|
||||
|
||||
// Add some extra padding for list items contains buttons
|
||||
.has-form { padding: $topbar-height / 3; }
|
||||
|
||||
// Styling for list items that have a dropdown within them.
|
||||
.has-dropdown {
|
||||
position: relative;
|
||||
|
||||
& > a {
|
||||
&:after {
|
||||
@include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float);
|
||||
margin-#{$opposite-direction}: $topbar-height / 3;
|
||||
margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
#{$opposite-direction}: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.moved { position: static;
|
||||
& > .dropdown {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Styling elements inside of dropdowns
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
#{$default-float}: 100%;
|
||||
top: 0;
|
||||
visibility: hidden;
|
||||
z-index: 99;
|
||||
|
||||
li { width: 100%;
|
||||
a {
|
||||
font-weight: normal;
|
||||
padding: 8px $topbar-height / 3;
|
||||
}
|
||||
|
||||
&.title h5 { margin-bottom: 0;
|
||||
a {
|
||||
color: $topbar-link-color;
|
||||
line-height: $topbar-height / 2;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 8px $topbar-height / 3 2px;
|
||||
margin-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
color: $dropdown-label-color;
|
||||
font-weight: bold;
|
||||
font-size: emCalc(10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Element that controls breakpoint, no need to change this ever
|
||||
.top-bar-js-breakpoint {
|
||||
width: $topbar-breakpoint !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
.js-generated { display: block; }
|
||||
|
||||
|
||||
// Top Bar styles intended for screen sizes above the breakpoint.
|
||||
@media #{$topbar-media-query} {
|
||||
.top-bar { background: $topbar-bg; @include clearfix; overflow: visible;
|
||||
.toggle-topbar { display: none; }
|
||||
|
||||
.title-area { float: $default-float; }
|
||||
.name h1 a { width: auto; }
|
||||
|
||||
input,
|
||||
.button {
|
||||
line-height: 2em;
|
||||
font-size: emCalc(14px);
|
||||
height: 2em;
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
&.expanded { background: $topbar-bg; }
|
||||
}
|
||||
|
||||
.contain-to-grid .top-bar { max-width: $row-width; margin: 0 auto; }
|
||||
|
||||
.top-bar-section {
|
||||
@include single-transition(none,0,0);
|
||||
#{$default-float}: 0 !important;
|
||||
|
||||
ul {
|
||||
width: auto;
|
||||
height: auto !important;
|
||||
display: inline;
|
||||
|
||||
li {
|
||||
float: $default-float;
|
||||
.js-generated { display: none; }
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
a:not(.button) {
|
||||
padding: 0 $topbar-height / 3;
|
||||
line-height: $topbar-height;
|
||||
background: $topbar-bg;
|
||||
&:hover { background: darken($topbar-dropdown-bg, 30%); }
|
||||
}
|
||||
}
|
||||
|
||||
.has-dropdown {
|
||||
& > a {
|
||||
padding-#{$opposite-direction}: $topbar-dropdown-toggle-size * 7 !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);
|
||||
}
|
||||
}
|
||||
|
||||
&.moved { position: relative;
|
||||
& > .dropdown { visibility: hidden; }
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
& > .dropdown {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown li.has-dropdown {
|
||||
& > a {
|
||||
&:after {
|
||||
border: none;
|
||||
content: "\00bb";
|
||||
margin-top: -7px;
|
||||
#{$opposite-direction}: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
#{$default-float}: 0;
|
||||
top: auto;
|
||||
background: transparent;
|
||||
min-width: 100%;
|
||||
|
||||
li {
|
||||
a {
|
||||
color: $topbar-dropdown-link-color;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
padding: 7px $topbar-height / 3;
|
||||
background: lighten($topbar-bg, 5%);
|
||||
}
|
||||
|
||||
label {
|
||||
white-space: nowrap;
|
||||
background: lighten($topbar-bg, 5%);
|
||||
}
|
||||
|
||||
// Second Level Dropdowns
|
||||
.dropdown {
|
||||
#{$default-float}: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > ul > .divider {
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
border-#{$opposite-direction}: solid 1px lighten($topbar-bg, 10%);
|
||||
border-#{$default-float}: solid 1px darken($topbar-bg, 10%);
|
||||
clear: none;
|
||||
height: $topbar-height;
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.has-form {
|
||||
background: $topbar-bg;
|
||||
padding: 0 $topbar-height / 3;
|
||||
height: $topbar-height;
|
||||
}
|
||||
|
||||
// Position overrides for ul.right
|
||||
ul.right {
|
||||
li .dropdown {
|
||||
left: auto;
|
||||
right: 0;
|
||||
|
||||
li .dropdown { right: 100%; }
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,422 +0,0 @@
|
|||
//
|
||||
// Typography Variables
|
||||
//
|
||||
|
||||
// We use these to control header font styles
|
||||
$header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
|
||||
$header-font-weight: bold !default;
|
||||
$header-font-style: normal !default;
|
||||
$header-font-color: #222 !default;
|
||||
$header-line-height: 1.4 !default;
|
||||
$header-top-margin: .2em !default;
|
||||
$header-bottom-margin: .5em !default;
|
||||
$header-text-rendering: optimizeLegibility !default;
|
||||
|
||||
// We use these to control header font sizes
|
||||
$h1-font-size: emCalc(44px) !default;
|
||||
$h2-font-size: emCalc(37px) !default;
|
||||
$h3-font-size: emCalc(27px) !default;
|
||||
$h4-font-size: emCalc(23px) !default;
|
||||
$h5-font-size: emCalc(18px) !default;
|
||||
$h6-font-size: 1em !default;
|
||||
|
||||
// These control how subheaders are styled.
|
||||
$subheader-line-height: 1.4 !default;
|
||||
$subheader-font-color: lighten($header-font-color, 30%) !default;
|
||||
$subheader-font-weight: 300 !default;
|
||||
$subheader-top-margin: .2em !default;
|
||||
$subheader-bottom-margin: .5em !default;
|
||||
|
||||
// A general <small> styling
|
||||
$small-font-size: 60% !default;
|
||||
$small-font-color: lighten($header-font-color, 30%) !default;
|
||||
|
||||
// We use these to style paragraphs
|
||||
$paragraph-font-family: inherit !default;
|
||||
$paragraph-font-weight: normal !default;
|
||||
$paragraph-font-size: 1em !default;
|
||||
$paragraph-line-height: 1.6 !default;
|
||||
$paragraph-margin-bottom: emCalc(20px) !default;
|
||||
$paragraph-aside-font-size: emCalc(14px) !default;
|
||||
$paragraph-aside-line-height: 1.35 !default;
|
||||
$paragraph-aside-font-style: italic !default;
|
||||
$paragraph-text-rendering: optimizeLegibility !default;
|
||||
|
||||
// We use these to style <code> tags
|
||||
$code-color: darken($alert-color, 15%) !default;
|
||||
$code-font-family: Consolas, 'Liberation Mono', Courier, monospace !default;
|
||||
$code-font-weight: bold !default;
|
||||
|
||||
// We use these to style anchors
|
||||
$anchor-text-decoration: none !default;
|
||||
$anchor-font-color: $primary-color !default;
|
||||
$anchor-font-color-hover: darken($primary-color, 5%) !default;
|
||||
|
||||
// We use these to style the <hr> element
|
||||
$hr-border-width: 1px !default;
|
||||
$hr-border-style: solid !default;
|
||||
$hr-border-color: #ddd !default;
|
||||
$hr-margin: emCalc(20px) !default;
|
||||
|
||||
// We use these to style lists
|
||||
$list-style-position: outside !default;
|
||||
$list-side-margin: emCalc(20px) !default;
|
||||
$definition-list-header-weight: bold !default;
|
||||
$definition-list-header-margin-bottom: .3em !default;
|
||||
$definition-list-margin-bottom: emCalc(12px) !default;
|
||||
|
||||
// We use these to style blockquotes
|
||||
$blockquote-font-color: lighten($header-font-color, 30%) !default;
|
||||
$blockquote-padding: emCalc(9px) emCalc(20px) 0 emCalc(19px) !default;
|
||||
$blockquote-border: 1px solid #ddd !default;
|
||||
$blockquote-cite-font-size: emCalc(13px) !default;
|
||||
$blockquote-cite-font-color: lighten($header-font-color, 20%) !default;
|
||||
$blockquote-cite-link-color: $blockquote-cite-font-color !default;
|
||||
|
||||
// Acronym styles
|
||||
$acronym-underline: 1px dotted #ddd !default;
|
||||
|
||||
// We use these to control padding and margin
|
||||
$microformat-padding: emCalc(10px) emCalc(12px) !default;
|
||||
$microformat-margin: 0 0 emCalc(20px) 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;
|
||||
|
||||
// We use these to control full name font styles
|
||||
$microformat-fullname-font-weight: bold !default;
|
||||
$microformat-fullname-font-size: emCalc(15px) !default;
|
||||
|
||||
// We use this to control the summary font styles
|
||||
$microformat-summary-font-weight: bold !default;
|
||||
|
||||
// We use this to control abbr padding
|
||||
$microformat-abbr-padding: 0 emCalc(1px) !default;
|
||||
|
||||
// We use this to control abbr font styles
|
||||
$microformat-abbr-font-weight: bold !default;
|
||||
$microformat-abbr-font-decoration: none !default;
|
||||
|
||||
|
||||
//
|
||||
// Typography Placeholders
|
||||
//
|
||||
%lead {
|
||||
font-size: $paragraph-font-size + emCalc(3.5px);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
%subheader {
|
||||
line-height: $subheader-line-height;
|
||||
color: $subheader-font-color;
|
||||
font-weight: $subheader-font-weight;
|
||||
margin-top: $subheader-top-margin;
|
||||
margin-bottom: $subheader-bottom-margin;
|
||||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
direction: $text-direction;
|
||||
}
|
||||
|
||||
/* Default Link Styles */
|
||||
a {
|
||||
color: $anchor-font-color;
|
||||
text-decoration: $anchor-text-decoration;
|
||||
line-height: inherit;
|
||||
|
||||
&:hover,
|
||||
&:focus { color: $anchor-font-color-hover; }
|
||||
|
||||
img { border:none; }
|
||||
}
|
||||
|
||||
/* Default paragraph styles */
|
||||
p {
|
||||
font-family: $paragraph-font-family;
|
||||
font-weight: $paragraph-font-weight;
|
||||
font-size: $paragraph-font-size;
|
||||
line-height: $paragraph-line-height;
|
||||
margin-bottom: $paragraph-margin-bottom;
|
||||
text-rendering: $paragraph-text-rendering;
|
||||
|
||||
&.lead { @extend %lead; }
|
||||
|
||||
& aside {
|
||||
font-size: $paragraph-aside-font-size;
|
||||
line-height: $paragraph-aside-line-height;
|
||||
font-style: $paragraph-aside-font-style;
|
||||
}
|
||||
}
|
||||
|
||||
/* Default header styles */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $header-font-family;
|
||||
font-weight: $header-font-weight;
|
||||
font-style: $header-font-style;
|
||||
color: $header-font-color;
|
||||
text-rendering: $header-text-rendering;
|
||||
margin-top: $header-top-margin;
|
||||
margin-bottom: $header-bottom-margin;
|
||||
line-height: $header-line-height - emCalc(3px);
|
||||
|
||||
small {
|
||||
font-size: $small-font-size;
|
||||
color: $small-font-color;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 { font-size: $h1-font-size - emCalc(10px); }
|
||||
h2 { font-size: $h2-font-size - emCalc(10px); }
|
||||
h3 { font-size: $h3-font-size - emCalc(5px); }
|
||||
h4 { font-size: $h4-font-size - emCalc(5px); }
|
||||
h5 { font-size: $h5-font-size; }
|
||||
h6 { font-size: $h6-font-size; }
|
||||
|
||||
.subheader { @extend %subheader; }
|
||||
|
||||
hr {
|
||||
border: $hr-border-style $hr-border-color;
|
||||
border-width: $hr-border-width 0 0;
|
||||
clear: both;
|
||||
margin: $hr-margin 0 ($hr-margin - emCalc(1px));
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Helpful Typography Defaults */
|
||||
em,
|
||||
i {
|
||||
font-style: italic;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: bold;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: $small-font-size;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: $code-font-family;
|
||||
font-weight: $code-font-weight;
|
||||
color: $code-color;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
ul,
|
||||
ol,
|
||||
dl {
|
||||
font-size: $paragraph-font-size;
|
||||
line-height: $paragraph-line-height;
|
||||
margin-bottom: $paragraph-margin-bottom;
|
||||
list-style-position: $list-style-position;
|
||||
font-family: $paragraph-font-family;
|
||||
}
|
||||
|
||||
/* Unordered Lists */
|
||||
ul {
|
||||
li {
|
||||
ul,
|
||||
ol {
|
||||
margin-#{$default-float}: $list-side-margin;
|
||||
margin-bottom: 0;
|
||||
font-size: 1em; /* Override nested font-size change */
|
||||
}
|
||||
}
|
||||
&.square,
|
||||
&.circle,
|
||||
&.disc {
|
||||
li ul { list-style: inherit; }
|
||||
}
|
||||
|
||||
&.square { list-style-type: square; }
|
||||
&.circle { list-style-type: circle; }
|
||||
&.disc { list-style-type: disc; }
|
||||
&.no-bullet { list-style: none; }
|
||||
}
|
||||
|
||||
/* Ordered Lists */
|
||||
ol {
|
||||
li {
|
||||
ul,
|
||||
ol {
|
||||
margin-#{$default-float}: $list-side-margin;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Definition Lists */
|
||||
dl {
|
||||
dt {
|
||||
margin-bottom: $definition-list-header-margin-bottom;
|
||||
font-weight: $definition-list-header-weight;
|
||||
}
|
||||
dd { margin-bottom: $definition-list-margin-bottom; }
|
||||
}
|
||||
|
||||
/* Abbreviations */
|
||||
abbr,
|
||||
acronym {
|
||||
text-transform: uppercase;
|
||||
font-size: 90%;
|
||||
color: $body-font-color;
|
||||
border-bottom: $acronym-underline;
|
||||
cursor: help;
|
||||
}
|
||||
abbr {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote {
|
||||
margin: 0 0 $paragraph-margin-bottom;
|
||||
padding: $blockquote-padding;
|
||||
border-#{$default-float}: $blockquote-border;
|
||||
|
||||
cite {
|
||||
display: block;
|
||||
font-size: $blockquote-cite-font-size;
|
||||
color: $blockquote-cite-font-color;
|
||||
&:before {
|
||||
content: "\2014 \0020";
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: $blockquote-cite-link-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
blockquote,
|
||||
blockquote p {
|
||||
line-height: $paragraph-line-height;
|
||||
color: $blockquote-font-color;
|
||||
}
|
||||
|
||||
/* Microformats */
|
||||
.vcard {
|
||||
display: inline-block;
|
||||
margin: $microformat-margin;
|
||||
border: $microformat-border-width $microformat-border-style $microformat-border-color;
|
||||
padding: $microformat-padding;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
.fn {
|
||||
font-weight: $microformat-fullname-font-weight;
|
||||
font-size: $microformat-fullname-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.vevent {
|
||||
.summary { font-weight: $microformat-summary-font-weight; }
|
||||
|
||||
abbr {
|
||||
cursor: default;
|
||||
text-decoration: $microformat-abbr-font-decoration;
|
||||
font-weight: $microformat-abbr-font-weight;
|
||||
border: none;
|
||||
padding: $microformat-abbr-padding;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media #{$small} {
|
||||
h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
|
||||
h1 { font-size: $h1-font-size; }
|
||||
h2 { font-size: $h2-font-size; }
|
||||
h3 { font-size: $h3-font-size; }
|
||||
h4 { font-size: $h4-font-size; }
|
||||
}
|
||||
|
||||
// Only include these styles if you want them.
|
||||
@if $include-print-styles {
|
||||
/*
|
||||
* 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; }
|
||||
@media print {
|
||||
* {
|
||||
background: transparent !important;
|
||||
color: #000 !important; /* Black prints faster: h5bp.com/s */
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited { text-decoration: underline;}
|
||||
a[href]:after { content: " (" attr(href) ")"; }
|
||||
|
||||
abbr[title]:after { content: " (" attr(title) ")"; }
|
||||
|
||||
// Don't show links for images, or javascript/internal links
|
||||
.ir a:after,
|
||||
a[href^="javascript:"]:after,
|
||||
a[href^="#"]:after { content: ""; }
|
||||
|
||||
pre,
|
||||
blockquote {
|
||||
border: 1px solid #999;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
thead { display: table-header-group; /* h5bp.com/t */ }
|
||||
|
||||
tr,
|
||||
img { page-break-inside: avoid; }
|
||||
|
||||
img { max-width: 100% !important; }
|
||||
|
||||
@page { margin: 0.5cm; }
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 { page-break-after: avoid; }
|
||||
|
||||
.hide-on-print { display: none !important; }
|
||||
.print-only { display: block !important; }
|
||||
.hide-for-print { display: none !important; }
|
||||
.show-for-print { display: inherit !important; }
|
||||
}
|
||||
}
|
||||
|
|
@ -1,320 +0,0 @@
|
|||
//
|
||||
// Foundation Visibility Classes
|
||||
//
|
||||
@if $include-html-visibility-classes {
|
||||
|
||||
/* Foundation Visibility HTML Classes */
|
||||
.show-for-small,
|
||||
.show-for-medium-down,
|
||||
.show-for-large-down { display: inherit !important; }
|
||||
|
||||
.show-for-medium,
|
||||
.show-for-medium-up,
|
||||
.show-for-large,
|
||||
.show-for-large-up,
|
||||
.show-for-xlarge { display: none !important; }
|
||||
|
||||
.hide-for-medium,
|
||||
.hide-for-medium-up,
|
||||
.hide-for-large,
|
||||
.hide-for-large-up,
|
||||
.hide-for-xlarge { display: inherit !important; }
|
||||
|
||||
.hide-for-small,
|
||||
.hide-for-medium-down,
|
||||
.hide-for-large-down { display: none !important; }
|
||||
|
||||
/* Specific visilbity for tables */
|
||||
table {
|
||||
&.show-for-small,
|
||||
&.show-for-medium-down,
|
||||
&.show-for-large-down,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-up,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-up,
|
||||
&.hide-for-xlarge { display: table; }
|
||||
}
|
||||
thead {
|
||||
&.show-for-small,
|
||||
&.show-for-medium-down,
|
||||
&.show-for-large-down,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-up,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-up,
|
||||
&.hide-for-xlarge { display: table-header-group !important; }
|
||||
}
|
||||
tbody {
|
||||
&.show-for-small,
|
||||
&.show-for-medium-down,
|
||||
&.show-for-large-down,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-up,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-up,
|
||||
&.hide-for-xlarge { display: table-row-group !important; }
|
||||
}
|
||||
tr {
|
||||
&.show-for-small,
|
||||
&.show-for-medium-down,
|
||||
&.show-for-large-down,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-up,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-up,
|
||||
&.hide-for-xlarge { display: table-row !important; }
|
||||
}
|
||||
td,
|
||||
th {
|
||||
&.show-for-small,
|
||||
&.show-for-medium-down,
|
||||
&.show-for-large-down,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-up,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-up,
|
||||
&.hide-for-xlarge { display: table-cell !important; }
|
||||
}
|
||||
|
||||
/* Medium Displays: 768px - 1279px */
|
||||
@media #{$small} {
|
||||
.show-for-medium,
|
||||
.show-for-medium-up { display: inherit !important; }
|
||||
|
||||
.show-for-small { display: none !important; }
|
||||
|
||||
.hide-for-small { display: inherit !important; }
|
||||
|
||||
.hide-for-medium,
|
||||
.hide-for-medium-up { display: none !important; }
|
||||
|
||||
/* Specific visilbity for tables */
|
||||
table {
|
||||
&.show-for-medium,
|
||||
&.show-for-medium-up,
|
||||
&.hide-for-small { display: table; }
|
||||
}
|
||||
thead {
|
||||
&.show-for-medium,
|
||||
&.show-for-medium-up,
|
||||
&.hide-for-small { display: table-header-group !important; }
|
||||
}
|
||||
tbody {
|
||||
&.show-for-medium,
|
||||
&.show-for-medium-up,
|
||||
&.hide-for-small { display: table-row-group !important; }
|
||||
}
|
||||
tr {
|
||||
&.show-for-medium,
|
||||
&.show-for-medium-up,
|
||||
&.hide-for-small { display: table-row !important; }
|
||||
}
|
||||
td,
|
||||
th {
|
||||
&.show-for-medium,
|
||||
&.show-for-medium-up,
|
||||
&.hide-for-small { display: table-cell !important; }
|
||||
}
|
||||
}
|
||||
|
||||
/* Large Displays: 1280px - 1440px */
|
||||
@media #{$medium} {
|
||||
.show-for-large,
|
||||
.show-for-large-up { display: inherit !important; }
|
||||
|
||||
.show-for-medium,
|
||||
.show-for-medium-down { display: none !important; }
|
||||
|
||||
.hide-for-medium,
|
||||
.hide-for-medium-down { display: inherit !important; }
|
||||
|
||||
.hide-for-large,
|
||||
.hide-for-large-up { display: none !important; }
|
||||
|
||||
/* Specific visilbity for tables */
|
||||
table {
|
||||
&.show-for-large,
|
||||
&.show-for-large-up,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-down { display: table; }
|
||||
}
|
||||
thead {
|
||||
&.show-for-large,
|
||||
&.show-for-large-up,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-down { display: table-header-group !important; }
|
||||
}
|
||||
tbody {
|
||||
&.show-for-large,
|
||||
&.show-for-large-up,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-down { display: table-row-group !important; }
|
||||
}
|
||||
tr {
|
||||
&.show-for-large,
|
||||
&.show-for-large-up,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-down { display: table-row !important; }
|
||||
}
|
||||
td,
|
||||
th {
|
||||
&.show-for-large,
|
||||
&.show-for-large-up,
|
||||
&.hide-for-medium,
|
||||
&.hide-for-medium-down { display: table-cell !important; }
|
||||
}
|
||||
}
|
||||
|
||||
/* X-Large Displays: 1400px and up */
|
||||
@media #{$large} {
|
||||
.show-for-xlarge { display: inherit !important; }
|
||||
|
||||
.show-for-large,
|
||||
.show-for-large-down { display: none !important; }
|
||||
|
||||
.hide-for-large,
|
||||
.hide-for-large-down { display: inherit !important; }
|
||||
|
||||
.hide-for-xlarge { display: none !important; }
|
||||
|
||||
/* Specific visilbity for tables */
|
||||
table {
|
||||
&.show-for-xlarge,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-down { display: table; }
|
||||
}
|
||||
thead {
|
||||
&.show-for-xlarge,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-down { display: table-header-group !important; }
|
||||
}
|
||||
tbody {
|
||||
&.show-for-xlarge,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-down { display: table-row-group !important; }
|
||||
}
|
||||
tr {
|
||||
&.show-for-xlarge,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-down { display: table-row !important; }
|
||||
}
|
||||
td,
|
||||
th {
|
||||
&.show-for-xlarge,
|
||||
&.hide-for-large,
|
||||
&.hide-for-large-down { display: table-cell !important; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Orientation targeting */
|
||||
.show-for-landscape,
|
||||
.hide-for-portrait { display: inherit !important; }
|
||||
.hide-for-landscape,
|
||||
.show-for-portrait { display: none !important; }
|
||||
|
||||
/* Specific visilbity for tables */
|
||||
table {
|
||||
&.hide-for-landscape,
|
||||
&.show-for-portrait { display: table; }
|
||||
}
|
||||
thead {
|
||||
&.hide-for-landscape,
|
||||
&.show-for-portrait { display: table-header-group !important; }
|
||||
}
|
||||
tbody {
|
||||
&.hide-for-landscape,
|
||||
&.show-for-portrait { display: table-row-group !important; }
|
||||
}
|
||||
tr {
|
||||
&.hide-for-landscape,
|
||||
&.show-for-portrait { display: table-row !important; }
|
||||
}
|
||||
td,
|
||||
th {
|
||||
&.hide-for-landscape,
|
||||
&.show-for-portrait { display: table-cell !important; }
|
||||
}
|
||||
|
||||
@media #{$landscape} {
|
||||
.show-for-landscape,
|
||||
.hide-for-portrait { display: inherit !important; }
|
||||
.hide-for-landscape,
|
||||
.show-for-portrait { display: none !important; }
|
||||
|
||||
/* Specific visilbity for tables */
|
||||
table {
|
||||
&.show-for-landscape,
|
||||
&.hide-for-portrait { display: table; }
|
||||
}
|
||||
thead {
|
||||
&.show-for-landscape,
|
||||
&.hide-for-portrait { display: table-header-group !important; }
|
||||
}
|
||||
tbody {
|
||||
&.show-for-landscape,
|
||||
&.hide-for-portrait { display: table-row-group !important; }
|
||||
}
|
||||
tr {
|
||||
&.show-for-landscape,
|
||||
&.hide-for-portrait { display: table-row !important; }
|
||||
}
|
||||
td,
|
||||
th {
|
||||
&.show-for-landscape,
|
||||
&.hide-for-portrait { display: table-cell !important; }
|
||||
}
|
||||
}
|
||||
|
||||
@media #{$portrait} {
|
||||
.show-for-portrait,
|
||||
.hide-for-landscape { display: inherit !important; }
|
||||
.hide-for-portrait,
|
||||
.show-for-landscape { display: none !important; }
|
||||
|
||||
/* Specific visilbity for tables */
|
||||
table {
|
||||
&.show-for-portrait,
|
||||
&.hide-for-landscape { display: table; }
|
||||
}
|
||||
thead {
|
||||
&.show-for-portrait,
|
||||
&.hide-for-landscape { display: table-header-group !important; }
|
||||
}
|
||||
tbody {
|
||||
&.show-for-portrait,
|
||||
&.hide-for-landscape { display: table-row-group !important; }
|
||||
}
|
||||
tr {
|
||||
&.show-for-portrait,
|
||||
&.hide-for-landscape { display: table-row !important; }
|
||||
}
|
||||
td,
|
||||
th {
|
||||
&.show-for-portrait,
|
||||
&.hide-for-landscape { display: table-cell !important; }
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch-enabled device targeting */
|
||||
.show-for-touch { display: none !important; }
|
||||
.hide-for-touch { display: inherit !important; }
|
||||
.touch .show-for-touch { display: inherit !important; }
|
||||
.touch .hide-for-touch { display: none !important; }
|
||||
|
||||
/* Specific visilbity for tables */
|
||||
table.hide-for-touch { display: table; }
|
||||
.touch table.show-for-touch { display: table; }
|
||||
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; }
|
||||
.touch tbody.show-for-touch { display: table-row-group !important; }
|
||||
tr.hide-for-touch { display: table-row !important; }
|
||||
.touch tr.show-for-touch { display: table-row !important; }
|
||||
td.hide-for-touch { display: table-cell !important; }
|
||||
.touch td.show-for-touch { display: table-cell !important; }
|
||||
th.hide-for-touch { display: table-cell !important; }
|
||||
.touch th.show-for-touch { display: table-cell !important; }
|
||||
|
||||
}
|
||||
396
content/css/zurb-foundation/normalize.scss
vendored
396
content/css/zurb-foundation/normalize.scss
vendored
|
|
@ -1,396 +0,0 @@
|
|||
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 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 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct font family set oddly in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set consistent quote types.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
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;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct font family not being inherited in all browsers.
|
||||
* 2. Correct font size not being inherited in all browsers.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
||||
* Correct `select` style inheritance in Firefox 4+ and Opera.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9.
|
||||
* 2. Remove excess padding in IE 8/9.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove default vertical scrollbar in IE 8/9.
|
||||
* 2. Improve readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
Binary file not shown.
|
|
@ -1,130 +0,0 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata></metadata>
|
||||
<defs>
|
||||
<font id="silkscreennormal" horiz-adv-x="1462" >
|
||||
<font-face units-per-em="2048" ascent="1638" descent="-410" />
|
||||
<missing-glyph horiz-adv-x="975" />
|
||||
<glyph horiz-adv-x="2048" />
|
||||
<glyph horiz-adv-x="2048" />
|
||||
<glyph unicode="
" horiz-adv-x="975" />
|
||||
<glyph unicode=" " horiz-adv-x="975" />
|
||||
<glyph unicode="	" horiz-adv-x="975" />
|
||||
<glyph unicode=" " horiz-adv-x="975" />
|
||||
<glyph unicode="!" horiz-adv-x="731" d="M244 0v244h244v-244h-244zM244 488v731h244v-731h-244z" />
|
||||
<glyph unicode=""" horiz-adv-x="1219" d="M244 731v488h244v-488h-244zM731 731v488h244v-488h-244z" />
|
||||
<glyph unicode="#" horiz-adv-x="1706" d="M244 244v244h244v-244h-244zM244 731v244h244v-244h-244zM488 0v1219h243v-1219h-243zM731 244v244h244v-244h-244zM731 731v244h244v-244h-244zM975 0v1219h244v-1219h-244zM1219 244v244h244v-244h-244zM1219 731v244h244v-244h-244z" />
|
||||
<glyph unicode="$" d="M244 0v244h731v244h244v-488h-975zM244 731v244h244v-244h-244zM488 0h243v-244h-243v244zM488 488v243h487v-243h-487zM488 975v244h731v-244h-731zM731 1219v244h244v-244h-244z" />
|
||||
<glyph unicode="%" horiz-adv-x="1706" d="M244 731v488h487v-488h-487zM488 0v488h243v-488h-243zM731 488v243h244v-243h-244zM975 0v488h488v-488h-488zM975 731v488h244v-488h-244z" />
|
||||
<glyph unicode="&" d="M244 244v244h244v-244h-244zM244 731v244h244v-244h-244zM488 0v244h731v-244h-731zM488 488v243h487v-243h-487zM488 975v244h731v-244h-731zM731 0h244v-244h-244v244zM731 1219v244h244v-244h-244z" />
|
||||
<glyph unicode="'" horiz-adv-x="731" d="M244 731v488h244v-488h-244z" />
|
||||
<glyph unicode="(" horiz-adv-x="975" d="M244 244v731h244v-731h-244zM488 0v244h243v-244h-243zM488 0zM488 975v244h243v-244h-243z" />
|
||||
<glyph unicode=")" horiz-adv-x="975" d="M244 0v244h244v-244h-244zM244 975v244h244v-244h-244zM488 0zM488 244v731h243v-731h-243z" />
|
||||
<glyph unicode="*" horiz-adv-x="1706" d="M244 244v244h244v-244h-244zM244 731v244h244v-244h-244zM488 488v243h243v-243h-243zM731 0v1219h244v-1219h-244zM975 488v243h244v-243h-244zM1219 244v244h244v-244h-244zM1219 731v244h244v-244h-244z" />
|
||||
<glyph unicode="+" horiz-adv-x="1706" d="M244 488h487v-488h244v488h488v243h-488v488h-244v-488h-487v-243z" />
|
||||
<glyph unicode="," horiz-adv-x="731" d="M0 0h244v-244h-244v244zM244 0v244h244v-244h-244z" />
|
||||
<glyph unicode="-" horiz-adv-x="1219" d="M244 488v243h731v-243h-731z" />
|
||||
<glyph unicode="." horiz-adv-x="487" d="M0 0v244h244v-244h-244z" />
|
||||
<glyph unicode="/" horiz-adv-x="1219" d="M244 0v488h244v-488h-244zM488 488v243h243v-243h-243zM731 731v488h244v-488h-244z" />
|
||||
<glyph unicode="0" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h487v-244h-487zM975 244v731h244v-731h-244z" />
|
||||
<glyph unicode="1" horiz-adv-x="1219" d="M244 0v244h244v731h-244v244h487v-975h244v-244h-731z" />
|
||||
<glyph unicode="2" d="M244 0v488h244v-244h731v-244h-975zM244 975v244h731v-244h-731zM488 488v243h487v-243h-487zM975 731v244h244v-244h-244z" />
|
||||
<glyph unicode="3" d="M244 0v244h731v-244h-731zM244 975v244h731v-244h-731zM488 488v243h487v-243h-487zM975 244v244h244v-244h-244zM975 731v244h244v-244h-244z" />
|
||||
<glyph unicode="4" d="M244 244h487v-244h244v244h244v244h-244v731h-244v-731h-243v731h-244v-975z" />
|
||||
<glyph unicode="5" d="M244 0v244h731v-244h-731zM244 488h731v243h-487v244h731v244h-975v-731zM975 244v244h244v-244h-244z" />
|
||||
<glyph unicode="6" d="M244 244h244v244h487v243h-487v244h-244v-731zM488 0v244h487v-244h-487zM488 975v244h487v-244h-487zM975 244v244h244v-244h-244z" />
|
||||
<glyph unicode="7" d="M244 975v244h975v-488h-244v244h-731zM488 0v488h243v-488h-243zM731 488v243h244v-243h-244z" />
|
||||
<glyph unicode="8" d="M244 244v244h244v-244h-244zM244 731v244h244v-244h-244zM488 0v244h487v-244h-487zM488 488v243h487v-243h-487zM488 975v244h487v-244h-487zM975 244v244h244v-244h-244zM975 731v244h244v-244h-244z" />
|
||||
<glyph unicode="9" d="M244 731v244h244v-244h-244zM488 0v244h487v-244h-487zM488 488h487v-244h244v731h-244v-244h-487v-243zM488 975v244h487v-244h-487z" />
|
||||
<glyph unicode=":" horiz-adv-x="487" d="M0 244v244h244v-244h-244zM0 731v244h244v-244h-244z" />
|
||||
<glyph unicode=";" horiz-adv-x="731" d="M0 0v244h244v-244h-244zM244 244v244h244v-244h-244zM244 731v244h244v-244h-244z" />
|
||||
<glyph unicode="<" horiz-adv-x="1219" d="M244 488v243h244v-243h-244zM488 244v244h243v-244h-243zM488 731v244h243v-244h-243zM731 0v244h244v-244h-244zM731 975v244h244v-244h-244z" />
|
||||
<glyph unicode="=" horiz-adv-x="1219" d="M244 244v244h731v-244h-731zM244 731v244h731v-244h-731z" />
|
||||
<glyph unicode=">" horiz-adv-x="1219" d="M244 0v244h244v-244h-244zM244 975v244h244v-244h-244zM488 244v244h243v-244h-243zM488 731v244h243v-244h-243zM731 488v243h244v-243h-244z" />
|
||||
<glyph unicode="?" d="M244 975v244h731v-244h-731zM488 0v244h243v-244h-243zM488 488v243h487v-243h-487zM975 731v244h244v-244h-244z" />
|
||||
<glyph unicode="@" horiz-adv-x="1706" d="M244 244v731h244v-731h-244zM488 0v244h731v-244h-731zM488 0zM488 975h243v-487h488v243h-244v244h244v244h-731v-244zM1219 731v244h244v-244h-244z" />
|
||||
<glyph unicode="A" d="M250 0v975h243v-244h488v244h244v-975h-244v488h-488v-488h-243zM493 975h488v244h-488v-244z" />
|
||||
<glyph unicode="B" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-244h487v-244h-731zM975 244v244h244v-244h-244zM975 731v244h244v-244h-244z" />
|
||||
<glyph unicode="C" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h487v-244h-487zM975 244v244h244v-244h-244zM975 488zM975 731v244h244v-244h-244z" />
|
||||
<glyph unicode="D" d="M244 0v1219h731v-244h-487v-731h487v-244h-731zM975 244v731h244v-731h-244z" />
|
||||
<glyph unicode="E" horiz-adv-x="1219" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-244h487v-244h-731z" />
|
||||
<glyph unicode="F" horiz-adv-x="1219" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-488h-244z" />
|
||||
<glyph unicode="G" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h731v-244h-731zM731 488v243h488v-487h-244v244h-244z" />
|
||||
<glyph unicode="H" d="M244 0v1219h244v-488h487v488h244v-1219h-244v488h-487v-488h-244z" />
|
||||
<glyph unicode="I" horiz-adv-x="731" d="M244 0v1219h244v-1219h-244z" />
|
||||
<glyph unicode="J" d="M244 244v244h244v-244h-244zM488 0v244h487v-244h-487zM975 244v975h244v-975h-244z" />
|
||||
<glyph unicode="K" d="M244 0v1219h244v-488h243v-243h-243v-488h-244zM731 244v244h244v-244h-244zM731 731v244h244v-244h-244zM975 0v244h244v-244h-244zM975 975v244h244v-244h-244z" />
|
||||
<glyph unicode="L" horiz-adv-x="1219" d="M244 0v1219h244v-975h487v-244h-731z" />
|
||||
<glyph unicode="M" horiz-adv-x="1706" d="M244 0v1219h244v-1219h-244zM488 731v244h243v-244h-243zM731 488v243h244v-243h-244zM975 731v244h244v-244h-244zM1219 0v1219h244v-1219h-244z" />
|
||||
<glyph unicode="N" horiz-adv-x="1706" d="M244 0v1219h244v-1219h-244zM488 731v244h243v-244h-243zM731 488v243h244v-243h-244zM975 244v244h244v-244h-244zM1219 0v1219h244v-1219h-244z" />
|
||||
<glyph unicode="O" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h487v-244h-487zM975 244v731h244v-731h-244z" />
|
||||
<glyph unicode="P" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-488h-244zM975 731v244h244v-244h-244z" />
|
||||
<glyph unicode="Q" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h487v-244h-487zM975 0h244v-244h-244v244zM975 244v731h244v-731h-244z" />
|
||||
<glyph unicode="R" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-488h-244zM731 244v244h244v-244h-244zM975 0v244h244v-244h-244zM975 731v244h244v-244h-244z" />
|
||||
<glyph unicode="S" d="M244 0v244h731v-244h-731zM244 731v244h244v-244h-244zM488 488h487v243h-487v-243zM488 975v244h731v-244h-731zM975 244v244h244v-244h-244z" />
|
||||
<glyph unicode="T" horiz-adv-x="1219" d="M244 975v244h731v-244h-244v-975h-243v975h-244z" />
|
||||
<glyph unicode="U" d="M244 244v975h244v-975h-244zM488 0v244h487v-244h-487zM975 244v975h244v-975h-244z" />
|
||||
<glyph unicode="V" horiz-adv-x="1706" d="M244 731v488h244v-488h-244zM488 244v487h243v-487h-243zM731 0v244h244v-244h-244zM975 244v487h244v-487h-244zM1219 731v488h244v-488h-244z" />
|
||||
<glyph unicode="W" horiz-adv-x="1706" d="M244 244v975h244v-975h-244zM488 0v244h243v-244h-243zM731 244v731h244v-731h-244zM975 0v244h244v-244h-244zM1219 244v975h244v-975h-244z" />
|
||||
<glyph unicode="X" horiz-adv-x="1706" d="M244 0v244h244v-244h-244zM244 975v244h244v-244h-244zM488 244v244h243v-244h-243zM488 731v244h243v-244h-243zM731 488v243h244v-243h-244zM975 244v244h244v-244h-244zM975 731v244h244v-244h-244zM1219 0v244h244v-244h-244zM1219 975v244h244v-244h-244z" />
|
||||
<glyph unicode="Y" horiz-adv-x="1706" d="M244 975v244h244v-244h-244zM488 731v244h243v-244h-243zM731 0v731h244v-731h-244zM975 731v244h244v-244h-244zM1219 975v244h244v-244h-244z" />
|
||||
<glyph unicode="Z" horiz-adv-x="1219" d="M244 0v488h244v-244h487v-244h-731zM244 975v244h731v-488h-244v244h-487zM488 488v243h243v-243h-243z" />
|
||||
<glyph unicode="[" horiz-adv-x="975" d="M244 0v1219h487v-244h-243v-731h243v-244h-487z" />
|
||||
<glyph unicode="\" horiz-adv-x="1219" d="M244 731v488h244v-488h-244zM488 488v243h243v-243h-243zM731 0v488h244v-488h-244z" />
|
||||
<glyph unicode="]" horiz-adv-x="975" d="M244 0v244h244v731h-244v244h487v-1219h-487z" />
|
||||
<glyph unicode="^" horiz-adv-x="1219" d="M244 731v244h244v-244h-244zM488 975v244h243v-244h-243zM731 731v244h244v-244h-244z" />
|
||||
<glyph unicode="_" d="M244 0h975v-244h-975v244z" />
|
||||
<glyph unicode="`" horiz-adv-x="975" d="M244 975v244h244v-244h-244zM488 0zM488 731v244h243v-244h-243z" />
|
||||
<glyph unicode="a" d="M250 0v975h243v-244h488v244h244v-975h-244v488h-488v-488h-243zM493 975h488v244h-488v-244z" />
|
||||
<glyph unicode="b" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-244h487v-244h-731zM975 244v244h244v-244h-244zM975 731v244h244v-244h-244z" />
|
||||
<glyph unicode="c" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h487v-244h-487zM975 244v244h244v-244h-244zM975 488zM975 731v244h244v-244h-244z" />
|
||||
<glyph unicode="d" d="M244 0v1219h731v-244h-487v-731h487v-244h-731zM975 244v731h244v-731h-244z" />
|
||||
<glyph unicode="e" horiz-adv-x="1219" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-244h487v-244h-731z" />
|
||||
<glyph unicode="f" horiz-adv-x="1219" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-488h-244z" />
|
||||
<glyph unicode="g" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h731v-244h-731zM731 488v243h488v-487h-244v244h-244z" />
|
||||
<glyph unicode="h" d="M244 0v1219h244v-488h487v488h244v-1219h-244v488h-487v-488h-244z" />
|
||||
<glyph unicode="i" horiz-adv-x="731" d="M244 0v1219h244v-1219h-244z" />
|
||||
<glyph unicode="j" d="M244 244v244h244v-244h-244zM488 0v244h487v-244h-487zM975 244v975h244v-975h-244z" />
|
||||
<glyph unicode="k" d="M244 0v1219h244v-488h243v-243h-243v-488h-244zM731 244v244h244v-244h-244zM731 731v244h244v-244h-244zM975 0v244h244v-244h-244zM975 975v244h244v-244h-244z" />
|
||||
<glyph unicode="l" horiz-adv-x="1219" d="M244 0v1219h244v-975h487v-244h-731z" />
|
||||
<glyph unicode="m" horiz-adv-x="1706" d="M244 0v1219h244v-1219h-244zM488 731v244h243v-244h-243zM731 488v243h244v-243h-244zM975 731v244h244v-244h-244zM1219 0v1219h244v-1219h-244z" />
|
||||
<glyph unicode="n" horiz-adv-x="1706" d="M244 0v1219h244v-1219h-244zM488 731v244h243v-244h-243zM731 488v243h244v-243h-244zM975 244v244h244v-244h-244zM1219 0v1219h244v-1219h-244z" />
|
||||
<glyph unicode="o" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h487v-244h-487zM975 244v731h244v-731h-244z" />
|
||||
<glyph unicode="p" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-488h-244zM975 731v244h244v-244h-244z" />
|
||||
<glyph unicode="q" d="M244 244v731h244v-731h-244zM488 0v244h487v-244h-487zM488 0zM488 975v244h487v-244h-487zM975 0h244v-244h-244v244zM975 244v731h244v-731h-244z" />
|
||||
<glyph unicode="r" d="M244 0v1219h731v-244h-487v-244h487v-243h-487v-488h-244zM731 244v244h244v-244h-244zM975 0v244h244v-244h-244zM975 731v244h244v-244h-244z" />
|
||||
<glyph unicode="s" d="M244 0v244h731v-244h-731zM244 731v244h244v-244h-244zM488 488h487v243h-487v-243zM488 975v244h731v-244h-731zM975 244v244h244v-244h-244z" />
|
||||
<glyph unicode="t" horiz-adv-x="1219" d="M244 975v244h731v-244h-244v-975h-243v975h-244z" />
|
||||
<glyph unicode="u" d="M244 244v975h244v-975h-244zM488 0v244h487v-244h-487zM975 244v975h244v-975h-244z" />
|
||||
<glyph unicode="v" horiz-adv-x="1706" d="M244 731v488h244v-488h-244zM488 244v487h243v-487h-243zM731 0v244h244v-244h-244zM975 244v487h244v-487h-244zM1219 731v488h244v-488h-244z" />
|
||||
<glyph unicode="w" horiz-adv-x="1706" d="M244 244v975h244v-975h-244zM488 0v244h243v-244h-243zM731 244v731h244v-731h-244zM975 0v244h244v-244h-244zM1219 244v975h244v-975h-244z" />
|
||||
<glyph unicode="x" horiz-adv-x="1706" d="M244 0v244h244v-244h-244zM244 975v244h244v-244h-244zM488 244v244h243v-244h-243zM488 731v244h243v-244h-243zM731 488v243h244v-243h-244zM975 244v244h244v-244h-244zM975 731v244h244v-244h-244zM1219 0v244h244v-244h-244zM1219 975v244h244v-244h-244z" />
|
||||
<glyph unicode="y" horiz-adv-x="1706" d="M244 975v244h244v-244h-244zM488 731v244h243v-244h-243zM731 0v731h244v-731h-244zM975 731v244h244v-244h-244zM1219 975v244h244v-244h-244z" />
|
||||
<glyph unicode="z" horiz-adv-x="1219" d="M244 0v488h244v-244h487v-244h-731zM244 975v244h731v-488h-244v244h-487zM488 488v243h243v-243h-243z" />
|
||||
<glyph unicode="{" horiz-adv-x="1219" d="M244 488v243h244v-243h-244zM488 0v488h243v-244h244v-244h-487zM488 731v488h487v-244h-244v-244h-243z" />
|
||||
<glyph unicode="|" horiz-adv-x="731" d="M244 -244v1707h244v-1707h-244z" />
|
||||
<glyph unicode="}" horiz-adv-x="1219" d="M244 0v244h244v244h243v-488h-487zM244 975v244h487v-488h-243v244h-244zM731 488v243h244v-243h-244z" />
|
||||
<glyph unicode="~" d="M244 731v244h244v-244h-244zM488 975v244h243v-244h-243zM731 731v244h244v-244h-244zM975 975v244h244v-244h-244z" />
|
||||
<glyph unicode="­" horiz-adv-x="1219" d="M244 488v243h731v-243h-731z" />
|
||||
<glyph unicode=" " horiz-adv-x="731" />
|
||||
<glyph unicode=" " horiz-adv-x="1463" />
|
||||
<glyph unicode=" " horiz-adv-x="731" />
|
||||
<glyph unicode=" " horiz-adv-x="1463" />
|
||||
<glyph unicode=" " horiz-adv-x="487" />
|
||||
<glyph unicode=" " horiz-adv-x="365" />
|
||||
<glyph unicode=" " horiz-adv-x="243" />
|
||||
<glyph unicode=" " horiz-adv-x="243" />
|
||||
<glyph unicode=" " horiz-adv-x="182" />
|
||||
<glyph unicode=" " horiz-adv-x="292" />
|
||||
<glyph unicode=" " horiz-adv-x="81" />
|
||||
<glyph unicode="‐" horiz-adv-x="1219" d="M244 488v243h731v-243h-731z" />
|
||||
<glyph unicode="‑" horiz-adv-x="1219" d="M244 488v243h731v-243h-731z" />
|
||||
<glyph unicode="‒" horiz-adv-x="1219" d="M244 488v243h731v-243h-731z" />
|
||||
<glyph unicode="–" horiz-adv-x="1512" d="M244 488v243h1024v-243h-1024z" />
|
||||
<glyph unicode="—" horiz-adv-x="2536" d="M244 488v243h2048v-243h-2048z" />
|
||||
<glyph unicode=" " horiz-adv-x="292" />
|
||||
<glyph unicode=" " horiz-adv-x="365" />
|
||||
<glyph unicode="" horiz-adv-x="1219" d="M0 0v1219h1219v-1219h-1219z" />
|
||||
</font>
|
||||
</defs></svg>
|
||||
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
Binary file not shown.
|
|
@ -1,8 +1,6 @@
|
|||
---
|
||||
title: Ariejan de Vroom's Blog
|
||||
---
|
||||
.row
|
||||
.large-8.push-2.columns
|
||||
%section#posts
|
||||
- articles_by_year(sorted_articles).each do |year, articles|
|
||||
%h2.year= year
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@
|
|||
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
|
||||
})();
|
||||
|
||||
%section#page
|
||||
%header#title
|
||||
#header-wrapper
|
||||
%h1= link_to "ariejan.net", "https://ariejan.net/"
|
||||
|
||||
%nav#social
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
%li= link_to "Talks", "/talks/"
|
||||
%li= link_to "About", "/about/"
|
||||
|
||||
#wrapper
|
||||
%section#main
|
||||
= yield
|
||||
|
||||
%footer
|
||||
|
|
@ -66,6 +66,7 @@
|
|||
:plain
|
||||
<li>A message from the Dark Side:</li>
|
||||
<li><a href="http://www.rankexecutives.com/white-hat-seo">White Hat SEO</a></li>
|
||||
<li><a href="http://www.healthy-dietplans.com/coupons/medifast-promo-codes/">Medifast Coupon Code</a></li>
|
||||
|
||||
:javascript
|
||||
var _gaq = _gaq || [];
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
%section.post
|
||||
%section#main
|
||||
#content
|
||||
%article.post
|
||||
%section#content-header
|
||||
%h1= item[:title]
|
||||
|
||||
%p.meta
|
||||
Written by <strong>Ariejan de Vroom</strong> on #{get_pretty_date(item)}.
|
||||
|
||||
%aside.adpack
|
||||
%section#content
|
||||
%aside#adpack
|
||||
.bsarocks.bsap_a40a34b3f2d124df05e7c20ddaa79bd8#bsap_1287881
|
||||
%a(href="http://adpacks.com" id="bsap_aplink") via Ad Packs
|
||||
|
||||
%section#body
|
||||
= yield
|
||||
|
||||
%section#comments
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user