diff --git a/sass/partials/_layouts.scss b/sass/partials/_layouts.scss index 268d2bc..52198a9 100644 --- a/sass/partials/_layouts.scss +++ b/sass/partials/_layouts.scss @@ -7,75 +7,85 @@ // ** Regions ** // // * Header * // -#header { - margin-bottom: rem-calc(18); - padding: rem-calc(18 0); +@if $layout-header { + #header { + margin-bottom: rem-calc(18); + padding: rem-calc(18 0); - #site-name { - float: left; - margin-top: rem-calc(10); + #site-name { + float: left; + margin-top: rem-calc(10); + } } } // * Footer * // -#footer { - margin-top: rem-calc(36); - padding: rem-calc(14 18 18); +@if $layout-footer { + #footer { + margin-top: rem-calc(36); + padding: rem-calc(14 18 18); + } } // ** Blocks ** // // * Views Search * // -#header .views-exposed-form { - .views-exposed-widget { - padding: 0 rem-calc(9) 0 0; - } +@if $layout-header-block-views-search { + #header .views-exposed-form { + .views-exposed-widget { + padding: 0 rem-calc(9) 0 0; + } - .views-submit-button { - padding-right: 0; + .views-submit-button { + padding-right: 0; - .form-submit { - margin-top: rem-calc(32); + .form-submit { + margin-top: rem-calc(32); + } } } } // * User login * // -#header #block-user-login { - .form-item-name, - .form-item-persistent-login { - clear: left; - float: left; - padding-right: rem-calc(9); - } +@if $layout-header-block-user-login { + #header #block-user-login { + .form-item-name, + .form-item-persistent-login { + clear: left; + float: left; + padding-right: rem-calc(9); + } - .form-item-pass, - .form-actions { - clear: right; - float: right; - } + .form-item-pass, + .form-actions { + clear: right; + float: right; + } - .form-item-name, - .form-item-pass { - width: 50%; - } + .form-item-name, + .form-item-pass { + width: 50%; + } - .form-item-persistent-login, - .form-actions { - margin-bottom: rem-calc(9); + .form-item-persistent-login, + .form-actions { + margin-bottom: rem-calc(9); + } } } // * User menu * // -#header #block-system-user-menu { - h2 { - float: right; - margin: rhythm(0.25, 30px) 0; - } +@if $layout-header-block-user-menu { + #header #block-system-user-menu { + h2 { + float: right; + margin: rhythm(0.25, 30px) 0; + } - .content { - clear: right; - float: right; + .content { + clear: right; + float: right; + } } } diff --git a/sass/partials/_modules.scss b/sass/partials/_modules.scss index 6980643..f6c19ac 100644 --- a/sass/partials/_modules.scss +++ b/sass/partials/_modules.scss @@ -6,11 +6,13 @@ // ** Breadcrumb ** // -.breadcrumb { - @include crumb-container; +@if $modules-breadcrumb { + .breadcrumb { + @include crumb-container; - a { - @include crumbs; + a { + @include crumbs; + } } } @@ -19,123 +21,135 @@ // * Main-nav * // // Superfish -.sf-accordion-toggle a { - @include adjust-font-size-to(14px, 1.33333333333333); - @include block-glowing-effect(hover, 0.15s, scale-color($black, $lightness: 20%)); - @include radius($global-radius); - @include single-transition(background-color); - background-color: $gray_3; - background-image: url(../vendor/alphecca/images/icons/menu-white.svg); - background-position: 9px 50%; - background-repeat: no-repeat; - background-size: 32px 32px; - color: $white; - display: block; - height: 50px; - padding: rem-calc(9 9 9 50); - text-decoration: none; - text-transform: uppercase; - width: 100%; - - &.sf-expanded { - @include radius(0); - @include side-radius(top); - } - - &:hover, - &:focus, - &:active { +@if $modules-menus-main-nav-superfish { + .sf-accordion-toggle a { + @include adjust-font-size-to(14px, 1.33333333333333); + @include block-glowing-effect(hover, 0.15s, scale-color($black, $lightness: 20%)); @include radius($global-radius); - background-color: $eigengrau; + @include single-transition(background-color); + background-color: $gray_3; + background-image: url(../vendor/alphecca/images/icons/menu-white.svg); + background-position: 9px 50%; + background-repeat: no-repeat; + background-size: 32px 32px; + color: $white; + display: block; + height: 50px; + padding: rem-calc(9 9 9 50); + text-decoration: none; + text-transform: uppercase; + width: 100%; + + &.sf-expanded { + @include radius(0); + @include side-radius(top); + } + + &:hover, + &:focus, + &:active { + @include radius($global-radius); + background-color: $eigengrau; + } } -} -ul.sf-menu { - @include sf-main-nav-dropdown; + ul.sf-menu { + @include sf-main-nav-dropdown; + } } // * Sub-nav * // -#header ul.menu:not(.sf-menu), -#footer ul.menu { - @include sub-nav(); +@if $modules-menus-sub-nav { + #header ul.menu:not(.sf-menu), + #footer ul.menu { + @include sub-nav(); + } } // * Side-nav * // -#main [class*="sidebar"] ul.menu, -#main [class*="column"] ul.menu { - @include side-nav; +@if $modules-menus-side-nav { + #main [class*="sidebar"] ul.menu, + #main [class*="column"] ul.menu { + @include side-nav; + } } // ** Tabs ** // -ul.tabs { - @include sub-nav(); +@if $modules-tabs { + ul.tabs { + @include sub-nav(); + } } // ** Pager ** // -ul.pager { - @include pagination-container(true); - @include pagination(true, true); +@if $modules-pager { + ul.pager { + @include pagination-container(true); + @include pagination(true, true); + } } // ** Comments ** // -.comment { - @include box-shadow(rgba(0, 0, 0, .05) 0px 2px 10px inset); - @include radius($global-radius); - background-color: tint($gray_8, 60%); - border: 1px solid $gray_8; - margin: rem-calc(24 0); - padding: rem-calc(9 32); - position: relative; - - &:after, &:before { - border: solid transparent; - bottom: 100%; - content: " "; - height: 0; - left: 20%; - pointer-events: none; - position: absolute; - width: 0; - } - &:after { - border-color: rgba(239, 239, 239, 0); - border-bottom-color: tint($gray_8, 60%); - border-width: 20px; - margin-left: -20px; - } - &:before { - border-color: rgba(217, 217, 217, 0); - border-bottom-color: $gray_8; - border-width: 21px; - margin-left: -21px; - } - - h3 { - border-bottom: 1px solid $gray_8; - margin-top: 0; - } +@if $modules-comments { + .comment { + @include box-shadow(rgba(0, 0, 0, .05) 0px 2px 10px inset); + @include radius($global-radius); + background-color: tint($gray_8, 60%); + border: 1px solid $gray_8; + margin: rem-calc(24 0); + padding: rem-calc(9 32); + position: relative; - footer { - @include clearfix; + &:after, &:before { + border: solid transparent; + bottom: 100%; + content: " "; + height: 0; + left: 20%; + pointer-events: none; + position: absolute; + width: 0; + } + &:after { + border-color: rgba(239, 239, 239, 0); + border-bottom-color: tint($gray_8, 60%); + border-width: 20px; + margin-left: -20px; + } + &:before { + border-color: rgba(217, 217, 217, 0); + border-bottom-color: $gray_8; + border-width: 21px; + margin-left: -21px; + } - .submitted { - float: left; - margin: 0 rem-calc(18) 0 0; + h3 { + border-bottom: 1px solid $gray_8; + margin-top: 0; } - .permalink { - background-image: url(../vendor/alphecca/images/icons/link.svg); - background-position: left 50%; - background-repeat: no-repeat; - background-size: 16px 16px; - float: right; - padding-left: rem-calc(24); + footer { + @include clearfix; + + .submitted { + float: left; + margin: 0 rem-calc(18) 0 0; + } + + .permalink { + background-image: url(../vendor/alphecca/images/icons/link.svg); + background-position: left 50%; + background-repeat: no-repeat; + background-size: 16px 16px; + float: right; + padding-left: rem-calc(24); + } } } } @@ -143,296 +157,298 @@ ul.pager { // ** Orbit Slider ** // -$orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under" -$orbit-timer-show-progress-bar: true !default; +@if $modules-orbit-slider { + $orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under" + $orbit-timer-show-progress-bar: true !default; -@-webkit-keyframes rotate { - from { -webkit-transform: rotate(0deg); } - to { -webkit-transform: rotate(360deg); } -} -@-moz-keyframes rotate { - from { -moz-transform: rotate(0deg); } - to { -moz-transform: rotate(360deg); } -} -@-o-keyframes rotate { - from { -o-transform: rotate(0deg); } - to { -o-transform: rotate(360deg); } -} -@keyframes rotate { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} + @-webkit-keyframes rotate { + from { -webkit-transform: rotate(0deg); } + to { -webkit-transform: rotate(360deg); } + } + @-moz-keyframes rotate { + from { -moz-transform: rotate(0deg); } + to { -moz-transform: rotate(360deg); } + } + @-o-keyframes rotate { + from { -o-transform: rotate(0deg); } + to { -o-transform: rotate(360deg); } + } + @keyframes rotate { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } + } -// Orbit Graceful Loading -.slideshow-wrapper { - position: relative; + // Orbit Graceful Loading + .slideshow-wrapper { + position: relative; - ul { - // Prevent bullets showing before .orbit-container is loaded - list-style-type: none; - margin: 0; + ul { + // Prevent bullets showing before .orbit-container is loaded + list-style-type: none; + margin: 0; - // Hide all list items - li, - li .orbit-caption { display: none; } + // Hide all list items + li, + li .orbit-caption { display: none; } - // ...except for the first one - li:first-child { display: block; } - } + // ...except for the first one + li:first-child { display: block; } + } - .orbit-container { - background-color: transparent; + .orbit-container { + background-color: transparent; - // Show images when .orbit-container is loaded - li { - display: block; + // Show images when .orbit-container is loaded + li { + display: block; - .orbit-caption { display: block; } + .orbit-caption { display: block; } + } } } -} -// Orbit preloader -.preloader { - @include radius(1000px); - -webkit-animation-name: rotate; - -webkit-animation-duration: 1.5s; - -webkit-animation-iteration-count: infinite; - -webkit-animation-timing-function: linear; - -moz-animation-name: rotate; - -moz-animation-duration: 1.5s; - -moz-animation-iteration-count: infinite; - -moz-animation-timing-function: linear; - -o-animation-name: rotate; - -o-animation-duration: 1.5s; - -o-animation-iteration-count: infinite; - -o-animation-timing-function: linear; - animation-name: rotate; - animation-duration: 1.5s; - animation-iteration-count: infinite; - animation-timing-function: linear; - border: solid 3px; - border-color: $gray_3 $white; - display: block; - left: 50%; - margin-top: -20px; - margin-left: -20px; - position: absolute; - height: 40px; - top: 50%; - width: 40px; -} - -.orbit-container { - background: none; - overflow: hidden; - position: relative; - width: 100%; + // Orbit preloader + .preloader { + @include radius(1000px); + -webkit-animation-name: rotate; + -webkit-animation-duration: 1.5s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + -moz-animation-name: rotate; + -moz-animation-duration: 1.5s; + -moz-animation-iteration-count: infinite; + -moz-animation-timing-function: linear; + -o-animation-name: rotate; + -o-animation-duration: 1.5s; + -o-animation-iteration-count: infinite; + -o-animation-timing-function: linear; + animation-name: rotate; + animation-duration: 1.5s; + animation-iteration-count: infinite; + animation-timing-function: linear; + border: solid 3px; + border-color: $gray_3 $white; + display: block; + left: 50%; + margin-top: -20px; + margin-left: -20px; + position: absolute; + height: 40px; + top: 50%; + width: 40px; + } - .orbit-slides-container { - list-style: none; - margin: 0; - padding: 0; + .orbit-container { + background: none; + overflow: hidden; position: relative; + width: 100%; - img { display: block; max-width: 100%; } + .orbit-slides-container { + list-style: none; + margin: 0; + padding: 0; + position: relative; - &>* { - position: absolute; - top: 0; - width: 100%; - @if $text-direction == rtl { - margin-right: 100%; - } - @else { - margin-left: 100%; - } + img { display: block; max-width: 100%; } - &:first-child { + &>* { + position: absolute; + top: 0; + width: 100%; @if $text-direction == rtl { - margin-right: 0; + margin-right: 100%; } @else { - margin-left: 0; + margin-left: 100%; } - } - .orbit-caption { - @if $orbit-caption-position == "bottom" { - bottom: 0; - position: absolute; - } @else if $orbit-caption-position == "under" { - position: relative; + &:first-child { + @if $text-direction == rtl { + margin-right: 0; + } + @else { + margin-left: 0; + } } - @include adjust-font-size-to(14px); - background-color: rgba(51,51,51,0.8); - color: $white; - padding: rem-calc(9 14); - width: 100%; + .orbit-caption { + @if $orbit-caption-position == "bottom" { + bottom: 0; + position: absolute; + } @else if $orbit-caption-position == "under" { + position: relative; + } + + @include adjust-font-size-to(14px); + background-color: rgba(51,51,51,0.8); + color: $white; + padding: rem-calc(9 14); + width: 100%; + } } } - } - .orbit-slide-number { - @include adjust-font-size-to(12px); - background: transparent; - color: $white; - #{$default-float}: 10px; - position: absolute; - top: 10px; - z-index: 10; - - span { font-weight: 700; padding: rem-calc(5); } - } + .orbit-slide-number { + @include adjust-font-size-to(12px); + background: transparent; + color: $white; + #{$default-float}: 10px; + position: absolute; + top: 10px; + z-index: 10; - .orbit-timer { - height: 6px; - position: absolute; - #{$opposite-direction}: 10px; - top: 12px; - width: 100px; - z-index: 10; - - .orbit-progress { - @if $orbit-timer-show-progress-bar { - background-color: rgba(255,255,255,0.3); - display: block; - height: 3px; - position: relative; - right: 20px; - top: 5px; - width: 0%; - } + span { font-weight: 700; padding: rem-calc(5); } } - // Play button - & > span { - border: solid 4px $white; - border-top: none; - border-bottom: none; - display: none; - height: 14px; + .orbit-timer { + height: 6px; position: absolute; - #{$opposite-direction}: 0; - top: 0px; - width: 11px; - } + #{$opposite-direction}: 10px; + top: 12px; + width: 100px; + z-index: 10; + + .orbit-progress { + @if $orbit-timer-show-progress-bar { + background-color: rgba(255,255,255,0.3); + display: block; + height: 3px; + position: relative; + right: 20px; + top: 5px; + width: 0%; + } + } - // Pause button - &.paused { + // Play button & > span { - border: inset 8px; - border-right-style: solid; - border-color: transparent transparent transparent $white; + border: solid 4px $white; + border-top: none; + border-bottom: none; + display: none; height: 14px; - #{$opposite-direction}: -4px; + position: absolute; + #{$opposite-direction}: 0; top: 0px; width: 11px; + } - &.dark { - border-color: transparent transparent transparent $gray_6; + // Pause button + &.paused { + & > span { + border: inset 8px; + border-right-style: solid; + border-color: transparent transparent transparent $white; + height: 14px; + #{$opposite-direction}: -4px; + top: 0px; + width: 11px; + + &.dark { + border-color: transparent transparent transparent $gray_6; + } } } } - } - &:hover .orbit-timer > span { display: block; } + &:hover .orbit-timer > span { display: block; } - // Let's get those controls to be right in the center on each side - .orbit-prev, - .orbit-next { - background-color: none; - color: $white; - height: 60px; - line-height: 50px; - margin-top: -25px; - position: absolute; - text-indent: -9999px !important; - top: 45%; - width: 36px; - z-index: 10; + // Let's get those controls to be right in the center on each side + .orbit-prev, + .orbit-next { + background-color: none; + color: $white; + height: 60px; + line-height: 50px; + margin-top: -25px; + position: absolute; + text-indent: -9999px !important; + top: 45%; + width: 36px; + z-index: 10; + + &:hover, + &:focus { + background-color: rgba(0,0,0,0.3); + } - &:hover, - &:focus { - background-color: rgba(0,0,0,0.3); + & > span { + border: inset 10px; + display: block; + height: 0; + margin-top: -10px; + position: absolute; + top: 50%; + width: 0; + } } + .orbit-prev { + #{$default-float}: 0; - & > span { - border: inset 10px; - display: block; - height: 0; - margin-top: -10px; - position: absolute; - top: 50%; - width: 0; - } - } - .orbit-prev { - #{$default-float}: 0; + & > span { + border-color: transparent; + border-#{$opposite-direction}-color: $white; + border-#{$opposite-direction}-style: solid; + } - & > span { - border-color: transparent; - border-#{$opposite-direction}-color: $white; - border-#{$opposite-direction}-style: solid; + &:hover > span, + &:focus > span { + border-#{$opposite-direction}-color: $white; + } } + .orbit-next { + #{$opposite-direction}: 0; - &:hover > span, - &:focus > span { - border-#{$opposite-direction}-color: $white; - } - } - .orbit-next { - #{$opposite-direction}: 0; - - & > span { - border-color: transparent; - border-#{$default-float}-color: $white; - border-#{$default-float}-style: solid; - #{$default-float}: 50%; - margin-#{$default-float}: -4px; - } + & > span { + border-color: transparent; + border-#{$default-float}-color: $white; + border-#{$default-float}-style: solid; + #{$default-float}: 50%; + margin-#{$default-float}: -4px; + } - &:hover > span, - &:focus > span { - border-#{$default-float}-color: $white; + &:hover > span, + &:focus > span { + border-#{$default-float}-color: $white; + } } } -} - -.orbit-bullets-container { text-align: center; } -.orbit-bullets { - display: block; - float: none; - margin: 0 auto 30px auto; - overflow: hidden; - position: relative; - text-align: center; - top: 10px; + .orbit-bullets-container { text-align: center; } - li { - @include radius(1000px); - background: $gray_6; - display: inline-block; + .orbit-bullets { + display: block; float: none; - height: rem-calc(9); - margin-#{$opposite-direction}: 6px; - width: rem-calc(9); + margin: 0 auto 30px auto; + overflow: hidden; + position: relative; + text-align: center; + top: 10px; - &.active { - background: $gray_3; - } + li { + @include radius(1000px); + background: $gray_6; + display: inline-block; + float: none; + height: rem-calc(9); + margin-#{$opposite-direction}: 6px; + width: rem-calc(9); + + &.active { + background: $gray_3; + } - &:last-child { margin-#{$opposite-direction}: 0; } + &:last-child { margin-#{$opposite-direction}: 0; } + } } -} -.touch { - .orbit-container { - .orbit-prev, - .orbit-next { display: none; } - } + .touch { + .orbit-container { + .orbit-prev, + .orbit-next { display: none; } + } - .orbit-bullets { display: none; } + .orbit-bullets { display: none; } + } } diff --git a/sass/partials/_states.scss b/sass/partials/_states.scss index b5bbc48..7a5e349 100644 --- a/sass/partials/_states.scss +++ b/sass/partials/_states.scss @@ -7,71 +7,79 @@ // ** Styleguide ** // // * Headings & Anchors * // -a:link { - h1, h2, h3, h4, h5, h6, - h1 &, h2 &, h3 &, h4 &, h5 &, h6 & { - color: $anchor-font-color; +@if $states-styleguide-headings-anchors { + a:link { + h1, h2, h3, h4, h5, h6, + h1 &, h2 &, h3 &, h4 &, h5 &, h6 & { + color: $anchor-font-color; + } } -} -a:visited { - h1, h2, h3, h4, h5, h6, - h1 &, h2 &, h3 &, h4 &, h5 &, h6 & { - color: $anchor-font-color-visited; + a:visited { + h1, h2, h3, h4, h5, h6, + h1 &, h2 &, h3 &, h4 &, h5 &, h6 & { + color: $anchor-font-color-visited; + } } -} -a:hover, -a:focus { - h1, h2, h3, h4, h5, h6, - h1 &, h2 &, h3 &, h4 &, h5 &, h6 & { - color: $anchor-font-color-hover; + a:hover, + a:focus { + h1, h2, h3, h4, h5, h6, + h1 &, h2 &, h3 &, h4 &, h5 &, h6 & { + color: $anchor-font-color-hover; + } } -} -a:active { - h1, h2, h3, h4, h5, h6, - h1 &, h2 &, h3 &, h4 &, h5 &, h6 & { - color: $anchor-font-color-active; + a:active { + h1, h2, h3, h4, h5, h6, + h1 &, h2 &, h3 &, h4 &, h5 &, h6 & { + color: $anchor-font-color-active; + } } } // * Unordered Lists * // -ul { - &.square { @extend %square; } - &.circle { @extend %circle; } - &.disc { @extend %disc; } - &.no-bullet { @extend %no-bullet; } +@if $states-styleguide-unordered-lists { + ul { + &.square { @extend %square; } + &.circle { @extend %circle; } + &.disc { @extend %disc; } + &.no-bullet { @extend %no-bullet; } + } } // * Feed icon * // -.feed-icon img { - @include radius(0); - border: none; - padding: 0; +@if $states-styleguide-feed-icon { + .feed-icon img { + @include radius(0); + border: none; + padding: 0; + } } // ** Layouts ** // // * Header * // -#header { - .block { - @include breakpoint($medium) { - clear: right; - float: right; - margin-left: rem-calc(18); +@if $states-layout-header-blocks { + #header { + .block { + @include breakpoint($medium) { + clear: right; + float: right; + margin-left: rem-calc(18); + } } - } - .block-superfish { - @include breakpoint($medium) { - clear: both; - float: none; - margin-left: 0; + .block-superfish { + @include breakpoint($medium) { + clear: both; + float: none; + margin-left: 0; + } } - } - #block-user-login { - @include breakpoint($xlarge) { - clear: none; + #block-user-login { + @include breakpoint($xlarge) { + clear: none; + } } } } @@ -80,11 +88,15 @@ ul { // ** Modules ** // // * Secondary tabs * // -ul.tabs.secondary { - @include sub-nav(false); +@if $states-modules-secondary-tabs { + ul.tabs.secondary { + @include sub-nav(false); + } } // * Main-nav * // -ul.sf-menu.sf-accordion { - @include sf-main-nav-accordion; +@if $states-modules-main-nav-accordion { + ul.sf-menu.sf-accordion { + @include sf-main-nav-accordion; + } } diff --git a/sass/partials/_styleguide.scss b/sass/partials/_styleguide.scss index 84dfe6e..fbc862e 100644 --- a/sass/partials/_styleguide.scss +++ b/sass/partials/_styleguide.scss @@ -10,503 +10,555 @@ // -- http://smacss.com/book/type-base // * Global Elements * // -html, -body { - font-size: $base-font-size; -} +@if $styleguide-global { + html, + body { + font-size: $base-font-size; + } -body { - background: $body-bg; - color: $body-font-color; - cursor: $cursor-default-value; - font-family: $body-font-family; - font-style: $body-font-style; - font-weight: $body-font-weight; - line-height: $base-line-height; - margin: 0; - padding: 0; - position: relative; + body { + background: $body-bg; + color: $body-font-color; + cursor: $cursor-default-value; + font-family: $body-font-family; + font-style: $body-font-style; + font-weight: $body-font-weight; + line-height: $base-line-height; + margin: 0; + padding: 0; + position: relative; + } } // * Anchors * // -a { - &:link { - color: $anchor-font-color; - text-decoration: none; - } - &:visited { - color: $anchor-font-color-visited; - text-decoration: none; - } - &:hover, - &:focus { - color: $anchor-font-color-hover; - text-decoration: underline; - } - &:active { - color: $anchor-font-color-active; +@if $styleguide-anchors { + a { + &:link { + color: $anchor-font-color; + text-decoration: none; + } + &:visited { + color: $anchor-font-color-visited; + text-decoration: none; + } + &:hover, + &:focus { + color: $anchor-font-color-hover; + text-decoration: underline; + } + &:active { + color: $anchor-font-color-active; + } } } // * Headings * // -h1, h2, h3, h4, h5, h6 { - font-family: $OpenSans; - text-rendering: optimizeLegibility; -} -h1 { - @include adjust-font-size-to(36px); - @include boldheader(700, $eigengrau, "", ""); - margin: rhythm(0.5, 36px) 0 rhythm(1, 36px) 0; -} -h2 { - @include adjust-font-size-to(30px); - @include quietheader(300, $gray, "", ""); - margin: rhythm(1, 30px) 0; -} -h3 { - @include adjust-font-size-to(25px); - @include quietheader(300, $eigengrau, "", ""); - margin: rhythm(1, 25px) 0; -} -h4 { - @include adjust-font-size-to(21px); - @include boldheader(400, $gray, "", ""); - margin: rhythm(1, 21px) 0; -} -h5 { - @include adjust-font-size-to(18px); - @include quietheader(300, $eigengrau, italic, ""); - margin: rhythm(1, 18px) 0; -} -h6 { - @include adjust-font-size-to(15px); - @include boldheader(700, $gray, "", uppercase); - margin: rhythm(1, 15px) 0; +@if $styleguide-headings { + h1, h2, h3, h4, h5, h6 { + font-family: $OpenSans; + text-rendering: optimizeLegibility; + } + h1 { + @include adjust-font-size-to(36px); + @include boldheader(700, $eigengrau, "", ""); + margin: rhythm(0.5, 36px) 0 rhythm(1, 36px) 0; + } + h2 { + @include adjust-font-size-to(30px); + @include quietheader(300, $gray, "", ""); + margin: rhythm(1, 30px) 0; + } + h3 { + @include adjust-font-size-to(25px); + @include quietheader(300, $eigengrau, "", ""); + margin: rhythm(1, 25px) 0; + } + h4 { + @include adjust-font-size-to(21px); + @include boldheader(400, $gray, "", ""); + margin: rhythm(1, 21px) 0; + } + h5 { + @include adjust-font-size-to(18px); + @include quietheader(300, $eigengrau, italic, ""); + margin: rhythm(1, 18px) 0; + } + h6 { + @include adjust-font-size-to(15px); + @include boldheader(700, $gray, "", uppercase); + margin: rhythm(1, 15px) 0; + } } // * Images * // -// Get rid of gap under images by making them display: inline-block; by default -img { -// @include radius($global-radius); -// border: 1px solid $gray_8; - display: inline-block; -// padding: rem-calc(9); - vertical-align: middle; - - a & { - border: none; +@if $styleguide-images { + // Get rid of gap under images by making them display: inline-block; by default + img { + // @include radius($global-radius); + // border: 1px solid $gray_8; + display: inline-block; + // padding: rem-calc(9); + vertical-align: middle; + + a & { + border: none; + } } } // * Tables * // -table { - @include table; +@if $styleguide-tables { + table { + @include table; + } } // * Typography Defaults * // -p { - margin: rem-calc(18 0); -} +@if $styleguide-typo-defaults { + p { + margin: rem-calc(18 0); + } -hr { - border: solid $gray_8; - border-width: 1px 0 0; - clear: both; - height: 0; - margin: rem-calc(18 0); -} + hr { + border: solid $gray_8; + border-width: 1px 0 0; + clear: both; + height: 0; + margin: rem-calc(18 0); + } -em, -i { - font-style: italic; - line-height: inherit; -} + em, + i { + font-style: italic; + line-height: inherit; + } -strong, -b { - font-weight: bold; - line-height: inherit; -} + strong, + b { + font-weight: bold; + line-height: inherit; + } -small { - color: $gray; - font-size: 60%; - line-height: inherit; -} + small { + color: $gray; + font-size: 60%; + line-height: inherit; + } -pre { - @include box-shadow(rgba(0, 0, 0, .05) 0px 2px 10px inset); - background-color: tint($gray_8, 80%); - margin-bottom: rem-calc(18); - padding: rem-calc(14); -} + pre { + @include box-shadow(rgba(0, 0, 0, .05) 0px 2px 10px inset); + background-color: tint($gray_8, 80%); + margin-bottom: rem-calc(18); + padding: rem-calc(14); + } -code { - color: $secondary-color; - font-family: $monospace; - font-size: 90%; -} + code { + color: $secondary-color; + font-family: $monospace; + font-size: 90%; + } -sup { - @include adjust-font-size-to(11px); - margin: rem-calc(3 0 -3); -} + sup { + @include adjust-font-size-to(11px); + margin: rem-calc(3 0 -3); + } -sub { - @include adjust-font-size-to(11px); - margin: rem-calc(-3 0 3); + sub { + @include adjust-font-size-to(11px); + margin: rem-calc(-3 0 3); + } } // * Lists * // -:not(nav) ul, -ol, -dl { - list-style-position: outside; - margin-bottom: rem-calc(18); +@if $styleguide-lists { + :not(nav) ul, + ol, + dl { + list-style-position: outside; + margin-bottom: rem-calc(18); + } } // * Unordered Lists * // -ul { - margin-#{$default-float}: 1.1rem; - li { - ul, - ol { - font-size: 1rem; /* Override nested font-size change */ - margin-#{$default-float}: rem-calc(18); - margin-bottom: 0; +@if $styleguide-unordered-lists { + ul { + margin-#{$default-float}: 1.1rem; + li { + ul, + ol { + font-size: 1rem; /* Override nested font-size change */ + margin-#{$default-float}: rem-calc(18); + margin-bottom: 0; + } } } } // * Ordered Lists * // -ol { - margin-#{$default-float}: 1.4rem; - li { - ul, - ol { - margin-#{$default-float}: rem-calc(18); - margin-bottom: 0; +@if $styleguide-ordered-lists { + ol { + margin-#{$default-float}: 1.4rem; + li { + ul, + ol { + margin-#{$default-float}: rem-calc(18); + margin-bottom: 0; + } } } } // * Definition Lists * // -dl { - dt { - @include adjust-font-size-to(14px); - @include boldheader(700, $gray, "", uppercase); - margin-bottom: 0.3rem; +@if $styleguide-definition-lists { + dl { + dt { + @include adjust-font-size-to(14px); + @include boldheader(700, $gray, "", uppercase); + margin-bottom: 0.3rem; + } + dd { margin-bottom: rem-calc(14); } } - dd { margin-bottom: rem-calc(14); } } // * Abbreviations * // -abbr, -acronym { - border-bottom: 1px dotted $gray_8; - color: $body-font-color; - cursor: $cursor-help-value; - font-size: 90%; - text-transform: uppercase; -} -abbr { - text-transform: none; +@if $styleguide-abbreviations { + abbr, + acronym { + border-bottom: 1px dotted $gray_8; + color: $body-font-color; + cursor: $cursor-help-value; + font-size: 90%; + text-transform: uppercase; + } + abbr { + text-transform: none; + } } // * Blockquotes * // -blockquote { - background-color: tint($gray_8, 80%); - border-#{$default-float}: 1px solid $gray_8; - margin: rem-calc(0 0 18); - padding: rem-calc(3 18); - - cite { - color: $gray_6; - display: block; - font-size: rem-calc(14); - &:before { - content: "\2014 \0020"; - } - - a, - a:visited { +@if $styleguide-blockquotes { + blockquote { + background-color: tint($gray_8, 80%); + border-#{$default-float}: 1px solid $gray_8; + margin: rem-calc(0 0 18); + padding: rem-calc(3 18); + + cite { color: $gray_6; + display: block; + font-size: rem-calc(14); + &:before { + content: "\2014 \0020"; + } + + a, + a:visited { + color: $gray_6; + } } } -} -blockquote, -blockquote p { - color: scale-color($gray_3, $lightness: 35%); + blockquote, + blockquote p { + color: scale-color($gray_3, $lightness: 35%); + } } // ** Forms ** // -// * Standard Forms * // -form { margin: 0 0 rem-calc(16); } +@if $styleguide-forms { + // * Standard Forms * // + form { margin: 0 0 rem-calc(16); } -// * Label Styles * // -label { - @include form-label; + // * Label Styles * // + @if $styleguide-label-styles { + label { + @include form-label; - // Styles for required inputs - .form-required { - color: $red; - } -} - -// * Select * // -select { - @include radius($global-radius); - background: - $paperwhite - url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat; - background-position-x: 97%; - background-position-y: center; - border: 1px solid scale-color($white, $lightness: -20%); - font-size: rem-calc(14); - padding: rem-calc(16) / 2; - -webkit-appearance: none !important; - - &:hover, - &:focus { - background: - scale-color($paperwhite, $lightness: -3%) - url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat; - background-position-x: 97%; - background-position-y: center; - border-color: scale-color($white, $lightness: -40%); + // Styles for required inputs + .form-required { + color: $red; + } + } } -} - -// ::-ms-expand pseudo-element -// http://msdn.microsoft.com/en-us/library/windows/apps/hh465742.aspx -select::-ms-expand { - display: none; -} - -// ??? -@-moz-document url-prefix() { - select { background: $paperwhite; } - select:hover, select:focus { background: scale-color($paperwhite, $lightness: -3%); } -} -// 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 radius(0); @include side-radius(left, $global-radius); } -.postfix.button.radius { @include radius(0); @include side-radius(right, $global-radius); } -.prefix.button.round { @include radius(0); @include side-radius(left, $global-rounded); } -.postfix.button.round { @include radius(0); @include side-radius(right, $global-rounded); } - -// Separate prefix and postfix styles when on span or label so buttons keep their own -span.prefix, label.prefix { @include prefix(); - &.radius { @include radius(0); @include side-radius(left, $global-radius); } -} -span.postfix, label.postfix { @include postfix(); - &.radius { @include radius(0); @include side-radius(right, $global-radius); } -} + // * Select * // + @if $styleguide-select { + select { + @include radius($global-radius); + background: + $paperwhite + url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat; + background-position-x: 97%; + background-position-y: center; + border: 1px solid scale-color($white, $lightness: -20%); + font-size: rem-calc(14); + padding: rem-calc(16) / 2; + -webkit-appearance: none !important; + + &:hover, + &:focus { + background: + scale-color($paperwhite, $lightness: -3%) + url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat; + background-position-x: 97%; + background-position-y: center; + border-color: scale-color($white, $lightness: -40%); + } + } -// 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); + // ::-ms-expand pseudo-element + // http://msdn.microsoft.com/en-us/library/windows/apps/hh465742.aspx + select::-ms-expand { + display: none; } - &>*:last-child, &>*:last-child * { - @include side-radius($opposite-direction, $global-radius); + + // ??? + @-moz-document url-prefix() { + select { background: $paperwhite; } + select:hover, select:focus { background: scale-color($paperwhite, $lightness: -3%); } } } - &.round { - &>*:first-child, &>*:first-child * { - @include side-radius($default-float, $global-rounded); + + @if $styleguide-post-pre-fix { + // 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 radius(0); @include side-radius(left, $global-radius); } + .postfix.button.radius { @include radius(0); @include side-radius(right, $global-radius); } + .prefix.button.round { @include radius(0); @include side-radius(left, $global-rounded); } + .postfix.button.round { @include radius(0); @include side-radius(right, $global-rounded); } + + // Separate prefix and postfix styles when on span or label so buttons keep their own + span.prefix, label.prefix { @include prefix(); + &.radius { @include radius(0); @include side-radius(left, $global-radius); } } - &>*:last-child, &>*:last-child * { - @include side-radius($opposite-direction, $global-rounded); + span.postfix, label.postfix { @include postfix(); + &.radius { @include radius(0); @include side-radius(right, $global-radius); } } } -} -// 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; - @if not $input-include-glowing-effect { - @include single-transition(all, 0.15s, linear); - } - -webkit-appearance: none; - - // Error Handling - &.error { - @include form-error-color; + @if $styleguide-input-groups { + // 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, $global-rounded); + } + &>*:last-child, &>*:last-child * { + @include side-radius($opposite-direction, $global-rounded); + } + } + } } -} -// Add height value for select elements to match text input height -select { - height: (rem-calc(14) + (rem-calc(16) * 1.5) - rem-calc(1)); -} + @if $styleguide-inputs { + // 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; + @if not $input-include-glowing-effect { + @include single-transition(all, 0.15s, linear); + } + -webkit-appearance: none; + + // Error Handling + &.error { + @include form-error-color; + } + } -// Adjust margin for form elements below -input[type="file"], -input[type="checkbox"], -input[type="radio"], -select { - margin: 0 0 rem-calc(16) 0; -} + // Add height value for select elements to match text input height + select { + height: (rem-calc(14) + (rem-calc(16) * 1.5) - rem-calc(1)); + } -input[type="checkbox"] + label, -input[type="radio"] + label { - display: inline-block; - margin-#{$default-float}: rem-calc(16) * .5; - margin-#{$opposite-direction}: rem-calc(16); - margin-bottom: 0; - vertical-align: baseline; -} + // Adjust margin for form elements below + input[type="file"], + input[type="checkbox"], + input[type="radio"], + select { + margin: 0 0 rem-calc(16) 0; + } -// Normalize file input width -input[type="file"] { - width: 100%; -} + input[type="checkbox"] + label, + input[type="radio"] + label { + display: inline-block; + margin-#{$default-float}: rem-calc(16) * .5; + margin-#{$opposite-direction}: rem-calc(16); + margin-bottom: 0; + vertical-align: baseline; + } + + // Normalize file input width + input[type="file"] { + width: 100%; + } + } -// We add basic fieldset styling -fieldset { - @include fieldset; + @if $styleguide-fieldset { + // We add basic fieldset styling + fieldset { + @include fieldset; + } + } } // ** Buttons ** // -// Default styles -.button, button, -input[type="submit"], input[type="button"] { - @include button-base; - @include button-size; - @include button-style($radius:true); +@if $styleguide-buttons { + // Default styles + .button, button, + input[type="submit"], input[type="button"] { + @include button-base; + @include button-size; + @include button-style($radius:true); - @include single-transition(background-color); + @include single-transition(background-color); - &.secondary { @include button-style($bg:$secondary-color); } - &.success { @include button-style($bg:$success-color); } - &.alert { @include button-style($bg:$alert-color); } + &.secondary { @include button-style($bg:$secondary-color); } + &.success { @include button-style($bg:$success-color); } + &.alert { @include button-style($bg:$alert-color); } - &.large { @include button-size($padding:rem-calc(18)); } - &.small { @include button-size($padding:rem-calc(14)); } - &.tiny { @include button-size($padding:rem-calc(10)); } - &.expand { @include button-size($padding:null,$full-width:true); } + &.large { @include button-size($padding:rem-calc(18)); } + &.small { @include button-size($padding:rem-calc(14)); } + &.tiny { @include button-size($padding:rem-calc(10)); } + &.expand { @include button-size($padding:null,$full-width:true); } - &.left-align { text-align: left; text-indent: rem-calc(12); } - &.right-align { text-align: right; padding-right: rem-calc(12); } + &.left-align { text-align: left; text-indent: rem-calc(12); } + &.right-align { text-align: right; padding-right: rem-calc(12); } - &.radius { @include button-style($bg:false, $radius:true); } - &.round { @include button-style($bg:false, $radius:$global-rounded); } + &.radius { @include button-style($bg:false, $radius:true); } + &.round { @include button-style($bg:false, $radius:$global-rounded); } - &.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); } + &.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); } + } + } + button, input[type="submit"], input[type="button"] { + @include button-size($padding:false, $is-input:rem-calc(12)); } -} -button, input[type="submit"], input[type="button"] { - @include button-size($padding:false, $is-input:rem-calc(12)); } -// Button groups -.button-group { - @include button-group-container; +@if $styleguide-button-groups { + // Button groups + .button-group { + @include button-group-container; - @include button-group-style(); + @include button-group-style(); - // Override default button styles - .button, button, - input[type="submit"], input[type="button"] { - @include button-style($radius:0); - } + // Override default button styles + .button, button, + input[type="submit"], input[type="button"] { + @include button-style($radius:0); + } - &.radius { @include button-group-style($radius:$global-radius, $float:null); } - &.round { @include button-group-style($radius:$global-rounded, $float:null); } -} -.button-bar { - @include clearfix; - .button-group { @include button-group-container($styles:false, $float:true); } + &.radius { @include button-group-style($radius:$global-radius, $float:null); } + &.round { @include button-group-style($radius:$global-rounded, $float:null); } + } + .button-bar { + @include clearfix; + .button-group { @include button-group-container($styles:false, $float:true); } + } } // ** System ** // // * Messages * // -div.messages { - @include radius($global-radius); - background-position: rem-calc(14) rem-calc(18); - background-repeat: no-repeat; - border: 1px solid; - margin: rem-calc(18 0); - padding: rem-calc(14 18 14 44); -} -div.status { - background-color: $pale-green; - background-image: url(../vendor/alphecca/images/icons/status.svg); - background-size: 16px 16px; - border-color: $light-green; - color: $green; -} -div.warning { - background-color: $pale-orange; - background-image: url(../vendor/alphecca/images/icons/warning.svg); - background-size: 16px 16px; - border-color: $light-orange; - color: $orange; -} -div.error { - background-color: $pale-red; - background-image: url(../vendor/alphecca/images/icons/error.svg); - background-size: 16px 16px; - border-color: $light-red; - color: $red; +@if $styleguide-system-messages { + div.messages { + @include radius($global-radius); + background-position: rem-calc(14) rem-calc(18); + background-repeat: no-repeat; + border: 1px solid; + margin: rem-calc(18 0); + padding: rem-calc(14 18 14 44); + } + div.status { + background-color: $pale-green; + background-image: url(../vendor/alphecca/images/icons/status.svg); + background-size: 16px 16px; + border-color: $light-green; + color: $green; + } + div.warning { + background-color: $pale-orange; + background-image: url(../vendor/alphecca/images/icons/warning.svg); + background-size: 16px 16px; + border-color: $light-orange; + color: $orange; + } + div.error { + background-color: $pale-red; + background-image: url(../vendor/alphecca/images/icons/error.svg); + background-size: 16px 16px; + border-color: $light-red; + color: $red; + } } // * Inline Links * // -ul.links.inline { - @include horizontal-list; - margin: rem-calc(18 0); +@if $styleguide-system-inline-links { + ul.links.inline { + @include horizontal-list; + margin: rem-calc(18 0); + } } // * Description * // -div.description { - color: $gray_3; - @include adjust-font-size-to(13px); - margin-bottom: rem-calc(9); +@if $styleguide-system-description { + div.description { + color: $gray_3; + @include adjust-font-size-to(13px); + margin-bottom: rem-calc(9); + } } // * Forms * // -#edit-cancel { - @include button($bg:$gray_8); - @include single-transition(background-color); +@if $styleguide-system-forms { + #edit-cancel { + @include button($bg:$gray_8); + @include single-transition(background-color); + } } // * Tables * // -.draggable { - a.tabledrag-handle { - height: (rem-calc(14) + (rem-calc(16) * 1.5) - rem-calc(1)); - - .handle { - @include box-sizing(content-box); +@if $styleguide-system-tables { + .draggable { + a.tabledrag-handle { + height: (rem-calc(14) + (rem-calc(16) * 1.5) - rem-calc(1)); + + .handle { + @include box-sizing(content-box); + } } } } @@ -515,27 +567,33 @@ div.description { // ** Regions ** // // * Header * // -#header { - border-bottom: 1px solid $gray_8; +@if $styleguide-regions-header { + #header { + border-bottom: 1px solid $gray_8; + } } // * Footer * // -#footer { - @include border-top-right-radius($global-radius); - @include border-top-left-radius($global-radius); - background-color: tint($gray_8, 60%); - border: 1px solid $gray_8; - border-bottom: none; +@if $styleguide-regions-footer { + #footer { + @include border-top-right-radius($global-radius); + @include border-top-left-radius($global-radius); + background-color: tint($gray_8, 60%); + border: 1px solid $gray_8; + border-bottom: none; + } } // ** Blocks ** // // * User login * // -#header #block-user-login { - ul { - @include sub-nav(false); - clear: both; +@if $styleguide-header-block-user-login { + #header #block-user-login { + ul { + @include sub-nav(false); + clear: both; + } } } @@ -543,11 +601,15 @@ div.description { // ** Contrib ** // // * Chosen * // -.chosen-container { - margin: 0 0 rem-calc(16) 0; +@if $styleguide-contrib-chosen { + .chosen-container { + margin: 0 0 rem-calc(16) 0; + } } // * Vertical Tabs * // -div.vertical-tabs { - background-color: $white; +@if $styleguide-contrib-vertical-tabs { + div.vertical-tabs { + background-color: $white; + } } diff --git a/sass/partials/_variables.scss b/sass/partials/_variables.scss index 656cde3..b372b70 100644 --- a/sass/partials/_variables.scss +++ b/sass/partials/_variables.scss @@ -130,3 +130,90 @@ $cursor-text-value: text !default; // We use these to make sure border radius matches unless we want it different. $global-radius: 3px !default; $global-rounded: 1000px !default; + + +//////////////////////// +// Toggle Alphecca Styles +// +// Override inclusion of Alphecca styles in your theme. +//////////////////////// + +// * Styleguide * // +$styleguide-global: true !default; + +$styleguide-anchors: true !default; + +$styleguide-headings: true !default; + +$styleguide-images: true !default; + +$styleguide-tables: true !default; + +$styleguide-typo-defaults: true !default; + +$styleguide-lists: true !default; +$styleguide-unordered-lists: true !default; +$styleguide-ordered-lists: true !default; +$styleguide-definition-lists: true !default; + +$styleguide-abbreviations: true !default; + +$styleguide-blockquotes: true !default; + +$styleguide-forms: true !default; +$styleguide-label-styles: true !default; +$styleguide-select: true !default; +$styleguide-post-pre-fix: true !default; +$styleguide-input-groups: true !default; +$styleguide-inputs: true !default; +$styleguide-fieldset: true !default; + +$styleguide-buttons: true !default; +$styleguide-button-groups: true !default; + +$styleguide-system-messages: true !default; +$styleguide-system-inline-links: true !default; +$styleguide-system-description: true !default; +$styleguide-system-forms: true !default; +$styleguide-system-tables: true !default; + +$styleguide-regions-header: true !default; +$styleguide-regions-footer: true !default; + +$styleguide-header-block-user-login: true !default; + +$styleguide-contrib-chosen: true !default; +$styleguide-contrib-vertical-tabs: true !default; + +// * Layout * // +$layout-header: true !default; +$layout-footer: true !default; + +$layout-header-block-views-search: true !default; +$layout-header-block-user-login: true !default; +$layout-header-block-user-menu: true !default; + +// * Modules * // +$modules-breadcrumb: true !default; + +$modules-menus-main-nav-superfish: true !default; +$modules-menus-sub-nav: true !default; +$modules-menus-side-nav: true !default; + +$modules-tabs: true !default; + +$modules-pager: true !default; + +$modules-comments: true !default; + +$modules-orbit-slider: true !default; + +// * States * // +$states-styleguide-headings-anchors: true !default; +$states-styleguide-unordered-lists: true !default; +$states-styleguide-feed-icon: true !default; + +$states-layout-header-blocks: true !default; + +$states-modules-secondary-tabs: true !default; +$states-modules-main-nav-accordion: true !default;