Initial commit

This commit is contained in:
Samuel Philipp 2016-10-28 19:33:25 +02:00
commit b953a6c158
326 changed files with 76065 additions and 0 deletions

View file

@ -0,0 +1,32 @@
////
/// @group accordion-menu
////
/// Sets if accordion menus have the default arrow styles.
/// @type Boolean
$accordionmenu-arrows: true !default;
/// Sets accordion menu arrow color if arrow is used.
/// @type Color
$accordionmenu-arrow-color: $primary-color !default;
@mixin foundation-accordion-menu {
@if $accordionmenu-arrows {
.is-accordion-submenu-parent > a {
position: relative;
&::after {
@include css-triangle(6px, $accordionmenu-arrow-color, down);
position: absolute;
top: 50%;
margin-top: -4px;
right: 1rem;
}
}
.is-accordion-submenu-parent[aria-expanded='true'] > a::after {
transform-origin: 50% 50%;
transform: scaleY(-1);
}
}
}

View file

@ -0,0 +1,129 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group accordion
////
/// Default background color of an accordion group.
/// @type Color
$accordion-background: $white !default;
/// If `true`, adds plus and minus icons to the side of each accordion title.
/// @type Boolean
$accordion-plusminus: true !default;
/// Default text color for items in a Menu.
/// @type Color
$accordion-item-color: foreground($accordion-background, $primary-color) !default;
/// Default background color on hover for items in a Menu.
/// @type Color
$accordion-item-background-hover: $light-gray !default;
/// Default padding of an accordion item.
/// @type Number | List
$accordion-item-padding: 1.25rem 1rem !default;
/// Default background color of tab content.
/// @type Color
$accordion-content-background: $white !default;
/// Default border color of tab content.
/// @type Color
$accordion-content-border: 1px solid $light-gray !default;
/// Default text color of tab content.
/// @type Color
$accordion-content-color: foreground($accordion-content-background, $body-font-color) !default;
/// Default padding for tab content.
/// @type Number | List
$accordion-content-padding: 1rem !default;
/// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`.
@mixin accordion-container {
list-style-type: none;
background: $accordion-background;
margin-#{$global-left}: 0;
}
/// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
@mixin accordion-item {
&:first-child > :first-child {
border-radius: $global-radius $global-radius 0 0;
}
&:last-child > :last-child {
border-radius: 0 0 $global-radius $global-radius;
}
}
/// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
@mixin accordion-title {
display: block;
padding: $accordion-item-padding;
line-height: 1;
font-size: rem-calc(12);
color: $accordion-item-color;
position: relative;
border: $accordion-content-border;
border-bottom: 0;
:last-child:not(.is-active) > & {
border-radius: 0 0 $global-radius $global-radius;
border-bottom: $accordion-content-border;
}
&:hover,
&:focus {
background-color: $accordion-item-background-hover;
}
@if $accordion-plusminus {
&::before {
content: '+';
position: absolute;
#{$global-right}: 1rem;
top: 50%;
margin-top: -0.5rem;
}
.is-active > &::before {
content: '';
}
}
}
/// Adds styles for accordion content. Apply this to the content pane below an accordion item's title.
@mixin accordion-content {
padding: $accordion-content-padding;
display: none;
border: $accordion-content-border;
border-bottom: 0;
background-color: $accordion-content-background;
color: $accordion-content-color;
:last-child > &:last-child {
border-bottom: $accordion-content-border;
}
}
@mixin foundation-accordion {
.accordion {
@include accordion-container;
}
.accordion-item {
@include accordion-item;
}
.accordion-title {
@include accordion-title;
}
.accordion-content {
@include accordion-content;
}
}

View file

@ -0,0 +1,55 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group badge
////
/// Default background color for badges.
/// @type Color
$badge-background: $primary-color !default;
/// Default text color for badges.
/// @type Color
$badge-color: foreground($badge-background) !default;
/// Default padding inside badges.
/// @type Number
$badge-padding: 0.3em !default;
/// Minimum width of a badge.
/// @type Number
$badge-minwidth: 2.1em !default;
/// Default font size for badges.
/// @type Number
$badge-font-size: 0.6rem !default;
/// Generates the base styles for a badge.
@mixin badge {
display: inline-block;
padding: $badge-padding;
min-width: $badge-minwidth;
font-size: $badge-font-size;
text-align: center;
border-radius: 50%;
}
@mixin foundation-badge {
.badge {
@include badge;
background: $badge-background;
color: $badge-color;
@each $name, $color in $foundation-palette {
@if $name != primary {
&.#{$name} {
background: $color;
color: foreground($color);
}
}
}
}
}

View file

@ -0,0 +1,95 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group breadcrumbs
////
/// Margin around a breadcrumbs container.
/// @type Number
$breadcrumbs-margin: 0 0 $global-margin 0 !default;
/// Font size of breadcrumb links.
/// @type Number
$breadcrumbs-item-font-size: rem-calc(11) !default;
/// Color of breadcrumb links.
/// @type Color
$breadcrumbs-item-color: $primary-color !default;
/// Color of the active breadcrumb link.
/// @type Color
$breadcrumbs-item-color-current: $black !default;
/// Opacity of disabled breadcrumb links.
/// @type Number
$breadcrumbs-item-color-disabled: $medium-gray !default;
/// Margin between breadcrumb items.
/// @type Number
$breadcrumbs-item-margin: 0.75rem !default;
/// If `true`, makes breadcrumb links uppercase.
/// @type Boolean
$breadcrumbs-item-uppercase: true !default;
/// If `true`, adds a slash between breadcrumb links.
/// @type Boolean
$breadcrumbs-item-slash: true !default;
/// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
@mixin breadcrumbs-container {
@include clearfix;
list-style: none;
margin: $breadcrumbs-margin;
// Item wrapper
li {
float: #{$global-left};
color: $breadcrumbs-item-color-current;
font-size: $breadcrumbs-item-font-size;
cursor: default;
@if $breadcrumbs-item-uppercase {
text-transform: uppercase;
}
@if $breadcrumbs-item-slash {
// Need to escape the backslash
$slash: if($global-text-direction == 'ltr', '/', '\\');
&:not(:last-child)::after {
color: $medium-gray;
content: $slash;
margin: 0 $breadcrumbs-item-margin;
position: relative;
top: 1px;
opacity: 1;
}
}
@else {
margin-#{$global-right}: $breadcrumbs-item-margin;
}
}
// Page links
a {
color: $breadcrumbs-item-color;
&:hover {
text-decoration: underline;
}
}
}
@mixin foundation-breadcrumbs {
.breadcrumbs {
@include breadcrumbs-container;
.disabled {
color: $breadcrumbs-item-color-disabled;
cursor: not-allowed;
}
}
}

View file

@ -0,0 +1,195 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group button-group
////
/// Margin for button groups.
/// @type Number
$buttongroup-margin: 1rem !default;
/// Margin between buttons in a button group.
/// @type Border
$buttongroup-spacing: 1px !default;
/// Selector for the buttons inside a button group.
/// @type String
$buttongroup-child-selector: '.button' !default;
/// Maximum number of buttons that can be in an even-width button group.
/// @type Number
$buttongroup-expand-max: 6 !default;
/// Add styles for a button group container.
/// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
@mixin button-group(
$child-selector: $buttongroup-child-selector
) {
@include clearfix;
margin-bottom: $buttongroup-margin;
@if $global-flexbox {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
}
@else {
font-size: 0;
}
#{$child-selector} {
margin: 0;
margin-#{$global-right}: $buttongroup-spacing;
margin-bottom: $buttongroup-spacing;
font-size: map-get($button-sizes, default);
@if $global-flexbox {
flex: 0 0 auto;
}
&:last-child {
margin-#{$global-right}: 0;
}
}
}
/// Creates a full-width button group, making each button equal width.
/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
@mixin button-group-expand(
$selector: $buttongroup-child-selector,
$count: null
) {
@if not $global-flexbox {
margin-#{$global-right}: -$buttongroup-spacing;
&::before,
&::after {
display: none;
}
}
// scss-lint:disable ZeroUnit
#{$selector} {
@if $global-flexbox {
flex: 1 1 0px;
}
@else {
@for $i from 2 through $buttongroup-expand-max {
&:first-child:nth-last-child(#{$i}) {
&, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {
display: inline-block;
width: calc(#{percentage(1 / $i)} - #{$buttongroup-spacing});
margin-#{$global-right}: $buttongroup-spacing;
&:last-child {
margin-#{$global-right}: $buttongroup-spacing * -$buttongroup-expand-max;
}
}
}
}
}
}
}
/// Stacks the buttons in a button group.
/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.
@mixin button-group-stack(
$selector: $buttongroup-child-selector
) {
@if $global-flexbox {
flex-wrap: wrap;
}
#{$selector} {
@if $global-flexbox {
flex: 0 0 100%;
}
@else {
width: 100%;
}
&:last-child {
margin-bottom: 0;
}
}
}
/// Un-stacks the buttons in a button group.
/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.
@mixin button-group-unstack(
$selector: $buttongroup-child-selector
) {
// scss-lint:disable ZeroUnit
#{$selector} {
@if $global-flexbox {
flex: 1 1 0px;
}
@else {
width: auto;
}
margin-bottom: 0;
}
}
@mixin foundation-button-group {
.button-group {
@include button-group;
// Sizes
@each $size, $value in map-remove($button-sizes, default) {
&.#{$size} #{$buttongroup-child-selector} {
font-size: $value;
}
}
// Even-width Group
&.expanded { @include button-group-expand; }
// Colors
@each $name, $color in $foundation-palette {
@if $button-fill != hollow {
&.#{$name} #{$buttongroup-child-selector} {
@include button-style($color, auto, auto);
}
}
@else {
&.#{$name} #{$buttongroup-child-selector} {
@include button-hollow;
@include button-hollow-style($color);
}
}
}
&.stacked,
&.stacked-for-small,
&.stacked-for-medium {
@include button-group-stack;
}
&.stacked-for-small {
@include breakpoint(medium) {
@include button-group-unstack;
}
}
&.stacked-for-medium {
@include breakpoint(large) {
@include button-group-unstack;
}
}
// scss-lint:disable MergeableSelector
&.stacked-for-small.expanded {
@include breakpoint(small only) {
display: block;
#{$buttongroup-child-selector} {
display: block;
margin-#{$global-right}: 0;
}
}
}
}
}

View file

@ -0,0 +1,265 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group button
////
/// Padding inside buttons.
/// @type List
$button-padding: 0.85em 1em !default;
/// Margin around buttons.
/// @type List
$button-margin: 0 0 $global-margin 0 !default;
/// Default fill for buttons. Can either be `solid` or `hollow`.
/// @type Keyword
$button-fill: solid !default;
/// Default background color for buttons.
/// @type Color
$button-background: $primary-color !default;
/// Background color on hover for buttons.
/// @type Color
$button-background-hover: scale-color($button-background, $lightness: -15%) !default;
/// Font color for buttons.
/// @type List
$button-color: $white !default;
/// Font color for buttons, if the background is light.
/// @type List
$button-color-alt: $black !default;
/// Border radius for buttons, defaulted to global-radius.
/// @type Number
$button-radius: $global-radius !default;
/// Sizes for buttons.
/// @type Map
$button-sizes: (
tiny: 0.6rem,
small: 0.75rem,
default: 0.9rem,
large: 1.25rem,
) !default;
/// opacity for a disabled button.
/// @type List
$button-opacity-disabled: 0.25 !default;
// Internal: flip from margin-right to margin-left for defaults
@if $global-text-direction == 'rtl' {
$button-margin: 0 0 $global-margin $global-margin !default;
}
// TODO: Document button-base() mixin
@mixin button-base {
@include disable-mouse-outline;
display: inline-block;
text-align: center;
line-height: 1;
cursor: pointer;
-webkit-appearance: none;
transition: background-color 0.25s ease-out, color 0.25s ease-out;
vertical-align: middle;
border: 1px solid transparent;
border-radius: $button-radius;
padding: $button-padding;
margin: $button-margin;
font-size: map-get($button-sizes, default);
}
/// Expands a button to make it full-width.
/// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.
@mixin button-expand($expand: true) {
@if $expand {
display: block;
width: 100%;
margin-left: 0;
margin-right: 0;
}
@else {
display: inline-block;
width: auto;
margin: $button-margin;
}
}
/// Sets the visual style of a button.
/// @param {Color} $background [$button-background] - Background color of the button.
/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
@mixin button-style(
$background: $button-background,
$background-hover: $button-background-hover,
$color: $button-color
) {
@if $color == auto {
$color: foreground($background, $button-color-alt, $button-color);
}
@if $background-hover == auto {
$background-hover: scale-color($background, $lightness: -20%);
}
background-color: $background;
color: $color;
&:hover, &:focus {
background-color: $background-hover;
color: $color;
}
}
/// Removes background fill on hover and focus for hollow buttons.
@mixin button-hollow {
&,
&:hover, &:focus {
background-color: transparent;
}
}
@mixin button-hollow-style($color: $primary-color) {
$color-hover: scale-color($color, $lightness: -50%);
border: 1px solid $color;
color: $color;
&:hover, &:focus {
border-color: $color-hover;
color: $color-hover;
}
}
/// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
@mixin button-disabled {
opacity: $button-opacity-disabled;
cursor: not-allowed;
&:hover, &:focus {
background-color: $button-background;
color: $button-color;
}
}
/// Adds a dropdown arrow to a button.
/// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.
/// @param {Color} $color [white] - Color of the arrow.
/// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.
@mixin button-dropdown(
$size: 0.4em,
$color: $white,
$offset: get-side($button-padding, right)
) {
&::after {
@include css-triangle($size, $color, down);
position: relative;
top: 0.4em; // Aligns the arrow with the text of the button
float: #{$global-right};
margin-#{$global-left}: get-side($button-padding, right);
display: inline-block;
}
}
/// Adds all styles for a button. For more granular control over styles, use the individual button mixins.
/// @param {Boolean} $expand [false] - Set to `true` to make the button full-width.
/// @param {Color} $background [$button-background] - Background color of the button.
/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.
/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.
/// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.
@mixin button(
$expand: false,
$background: $button-background,
$background-hover: $button-background-hover,
$color: $button-color,
$style: $button-fill
) {
@include button-base;
@if $style == solid {
@include button-style($background, $background-hover, $color);
}
@else if $style == hollow {
@include button-hollow;
@include button-hollow-style($background);
}
@if $expand {
@include button-expand;
}
}
@mixin foundation-button {
.button {
@include button;
// Sizes
@each $size, $value in map-remove($button-sizes, default) {
&.#{$size} {
font-size: $value;
}
}
&.expanded { @include button-expand; }
// Colors
@each $name, $color in $foundation-palette {
@if $button-fill != hollow {
&.#{$name} {
@include button-style($color, auto, auto);
}
}
@else {
&.#{$name} {
@include button-hollow-style($color);
}
&.#{$name}.dropdown::after {
border-top-color: $color;
}
}
}
// Hollow style
@if $button-fill != hollow {
&.hollow {
@include button-hollow;
@include button-hollow-style;
@each $name, $color in $foundation-palette {
&.#{$name} {
@include button-hollow-style($color);
}
}
}
}
// Disabled style
&.disabled,
&[disabled] {
@include button-disabled;
}
// Dropdown arrow
&.dropdown {
@include button-dropdown;
@if $button-fill == hollow {
&::after {
border-top-color: $button-background;
}
}
}
// Button with dropdown arrow only
&.arrow-only::after {
margin-#{$global-left}: 0;
float: none;
top: -0.1em;
}
}
}

View file

@ -0,0 +1,105 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group callout
////
/// Default background color.
/// @type Color
$callout-background: $white !default;
/// Default fade value for callout backgrounds.
/// @type Number
$callout-background-fade: 85% !default;
/// Default border style for callouts.
/// @type List
$callout-border: 1px solid rgba($black, 0.25) !default;
/// Default bottom margin for callouts.
/// @type Number
$callout-margin: 0 0 1rem 0 !default;
/// Default inner padding for callouts.
/// @type Number
$callout-padding: 1rem !default;
/// Default font color for callouts.
/// @type Color
$callout-font-color: $body-font-color !default;
/// Default font color for callouts, if the callout has a dark background.
/// @type Color
$callout-font-color-alt: $body-background !default;
/// Default border radius for callouts.
/// @type Color
$callout-radius: $global-radius !default;
/// Amount to tint links used within colored panels. Set to `false` to disable this feature.
/// @type Number | Boolean
$callout-link-tint: 30% !default;
/// Adds basic styles for a callout, including padding and margin.
@mixin callout-base() {
margin: $callout-margin;
padding: $callout-padding;
border: $callout-border;
border-radius: $callout-radius;
position: relative;
color: $callout-font-color;
// Respect the padding, fool.
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}
/// Generate quick styles for a callout using a single color as a baseline.
/// @param {Color} $color [$callout-background] - Color to use.
@mixin callout-style($color: $callout-background) {
$background: scale-color($color, $lightness: $callout-background-fade);
background-color: $background;
}
@mixin callout-size($padding) {
padding-top: $padding;
padding-right: $padding;
padding-bottom: $padding;
padding-left: $padding;
}
/// Adds styles for a callout.
/// @param {Color} $color [$callout-background] - Color to use.
@mixin callout($color: $callout-background) {
@include callout-base;
@include callout-style($color);
}
@mixin foundation-callout {
.callout {
@include callout;
@each $name, $color in $foundation-palette {
&.#{$name} {
@include callout-style($color);
}
}
&.small {
@include callout-size(0.5rem);
}
&.large {
@include callout-size(3rem);
}
}
}

View file

@ -0,0 +1,61 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group close-button
////
/// Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`.
/// @type List
$closebutton-position: right top !default;
/// Right (or left) offset for a close button.
/// @type Number
$closebutton-offset-horizontal: 1rem !default;
/// Top (or bottom) offset for a close button.
/// @type Number
$closebutton-offset-vertical: 0.5rem !default;
/// Default font size of the close button.
/// @type Number
$closebutton-size: 2em !default;
/// The line-height of the close button. It affects the spacing of the element.
/// @type Number
$closebutton-lineheight: 1 !default;
/// Default color of the close button.
/// @type Color
$closebutton-color: $dark-gray !default;
/// Default color of the close button when being hovered on.
/// @type Color
$closebutton-color-hover: $black !default;
/// Adds styles for a close button, using the styles in the settings variables.
@mixin close-button {
$x: nth($closebutton-position, 1);
$y: nth($closebutton-position, 2);
@include disable-mouse-outline;
position: absolute;
color: $closebutton-color;
#{$x}: $closebutton-offset-horizontal;
#{$y}: $closebutton-offset-vertical;
font-size: $closebutton-size;
line-height: $closebutton-lineheight;
cursor: pointer;
&:hover,
&:focus {
color: $closebutton-color-hover;
}
}
@mixin foundation-close-button {
.close-button {
@include close-button;
}
}

View file

@ -0,0 +1,79 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group drilldown
////
/// Transition property to use for animating menus.
/// @type Transition
$drilldown-transition: transform 0.15s linear !default;
/// Adds arrows to drilldown items with submenus, as well as the back button.
/// @type Boolean
$drilldown-arrows: true !default;
/// Sets drilldown arrow color if arrow is used.
/// @type Color
$drilldown-arrow-color: $primary-color !default;
/// Background color for drilldown submenus.
/// @type Color
$drilldown-background: $white !default;
@mixin foundation-drilldown-menu {
// Applied to the Menu container
.is-drilldown {
position: relative;
overflow: hidden;
li {
display: block !important;
}
}
// Applied to nested <ul>s
.is-drilldown-submenu {
position: absolute;
top: 0;
#{$global-left}: 100%;
z-index: -1;
height: 100%;
width: 100%;
background: $drilldown-background;
transition: $drilldown-transition;
&.is-active {
z-index: 1;
display: block;
transform: translateX(if($global-text-direction == ltr, -100%, 100%));
}
&.is-closing {
transform: translateX(if($global-text-direction == ltr, 100%, -100%));
}
}
@if $drilldown-arrows {
.is-drilldown-submenu-parent > a {
position: relative;
&::after {
@include css-triangle(6px, $drilldown-arrow-color, $global-right);
position: absolute;
top: 50%;
margin-top: -6px;
#{$global-right}: 1rem;
}
}
.js-drilldown-back > a::before {
@include css-triangle(6px, $drilldown-arrow-color, $global-left);
border-#{$global-left}-width: 0;
display: inline-block;
vertical-align: middle;
margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
}
}
}

View file

@ -0,0 +1,221 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group dropdown-menu
////
/// Enables arrows for items with dropdown menus.
/// @type Boolean
$dropdownmenu-arrows: true !default;
/// Sets dropdown menu arrow color if arrow is used.
/// @type Color
$dropdownmenu-arrow-color: $anchor-color !default;
/// Minimum width of dropdown sub-menus.
/// @type Length
$dropdownmenu-min-width: 200px !default;
/// Background color for dropdowns.
/// @type Color
$dropdownmenu-background: $white !default;
/// Border for dropdown sub-menus.
/// @type List
$dropdownmenu-border: 1px solid $medium-gray !default;
// Border width for dropdown sub-menus.
// Used to adjust top margin of a sub-menu if a border is used.
// @type Length
$dropdownmenu-border-width: nth($dropdownmenu-border, 1);
@mixin left-right-arrows {
> a::after {
#{$global-right}: 14px;
margin-top: -3px;
}
&.opens-left > a::after {
@include css-triangle(5px, $dropdownmenu-arrow-color, left);
}
&.opens-right > a::after {
@include css-triangle(5px, $dropdownmenu-arrow-color, right);
}
}
@mixin dropdown-menu-direction($dir: horizontal) {
@if $dir == horizontal {
> li.opens-left {
> .is-dropdown-submenu {
left: auto;
right: 0;
top: 100%;
}
}
> li.opens-right {
> .is-dropdown-submenu {
right: auto;
left: 0;
top: 100%;
}
}
@if $dropdownmenu-arrows {
> li.is-dropdown-submenu-parent > a {
padding-#{$global-right}: 1.5rem;
position: relative;
}
> li.is-dropdown-submenu-parent > a::after {
@include css-triangle(5px, $dropdownmenu-arrow-color, down);
#{$global-right}: 5px;
margin-top: -2px;
}
}
}
@else if $dir == vertical {
> li {
.is-dropdown-submenu {
top: 0;
}
&.opens-left {
> .is-dropdown-submenu {
left: auto;
right: 100%;
}
}
&.opens-right {
> .is-dropdown-submenu {
right: auto;
left: 100%;
}
}
@if $dropdownmenu-arrows {
@include left-right-arrows;
}
}
}
@else {
@warn 'The direction used for dropdown-menu-direction() must be horizontal or vertical.';
}
}
@mixin foundation-dropdown-menu {
.dropdown.menu {
@include dropdown-menu-direction(horizontal);
a {
@include disable-mouse-outline;
}
.no-js & ul {
display: none;
}
&.vertical {
@include dropdown-menu-direction(vertical);
}
@each $size in $breakpoint-classes {
@if $size != $-zf-zero-breakpoint {
@include breakpoint($size) {
&.#{$size}-horizontal {
@include dropdown-menu-direction(horizontal);
}
&.#{$size}-vertical {
@include dropdown-menu-direction(vertical);
}
}
}
}
&.align-right {
.is-dropdown-submenu.first-sub {
top: 100%;
left: auto;
right: 0;
}
}
}
.is-dropdown-menu.vertical {
width: 100px;
&.align-right {
float: right;
}
}
.is-dropdown-submenu-parent {
position: relative;
a::after {
position: absolute;
top: 50%;
#{$global-right}: 5px;
margin-top: -2px;
}
&.opens-inner > .is-dropdown-submenu {
top: 100%;
@if $global-text-direction == 'rtl' {
right: auto;
} @else {
left: auto;
}
}
&.opens-left > .is-dropdown-submenu {
left: auto;
right: 100%;
}
&.opens-right > .is-dropdown-submenu {
right: auto;
left: 100%;
}
}
.is-dropdown-submenu {
display: none;
position: absolute;
top: 0;
#{$global-left}: 100%;
min-width: $dropdownmenu-min-width;
z-index: 1;
background: $dropdownmenu-background;
border: $dropdownmenu-border;
.is-dropdown-submenu-parent {
@if $dropdownmenu-arrows {
@include left-right-arrows;
}
}
@if (type-of($dropdownmenu-border-width) == 'number') {
.is-dropdown-submenu {
margin-top: (-$dropdownmenu-border-width);
}
}
> li {
width: 100%;
}
// [TODO] Cut back specificity
// scss-lint:disable SelectorDepth
//&:not(.js-dropdown-nohover) > .is-dropdown-submenu-parent:hover > &, // why is this line needed? Opening is handled by JS and this causes some ugly flickering when the sub is re-positioned automatically...
&.js-dropdown-active {
display: block;
}
}
}

View file

@ -0,0 +1,65 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group dropdown
////
/// Padding for dropdown panes.
/// @type List
$dropdown-padding: 1rem !default;
/// Border for dropdown panes.
/// @type List
$dropdown-border: 1px solid $medium-gray !default;
/// Font size for dropdown panes.
/// @type List
$dropdown-font-size: 1rem !default;
/// Width for dropdown panes.
/// @type Number
$dropdown-width: 300px !default;
/// Border radius dropdown panes.
/// @type Number
$dropdown-radius: $global-radius !default;
/// Sizes for dropdown panes. Each size is a CSS class you can apply.
/// @type Map
$dropdown-sizes: (
tiny: 100px,
small: 200px,
large: 400px,
) !default;
/// Applies styles for a basic dropdown.
@mixin dropdown-container {
background-color: $body-background;
border: $dropdown-border;
border-radius: $dropdown-radius;
display: block;
font-size: $dropdown-font-size;
padding: $dropdown-padding;
position: absolute;
visibility: hidden;
width: $dropdown-width;
z-index: 10;
&.is-open {
visibility: visible;
}
}
@mixin foundation-dropdown {
.dropdown-pane {
@include dropdown-container;
}
@each $name, $size in $dropdown-sizes {
.dropdown-pane.#{$name} {
width: $size;
}
}
}

View file

@ -0,0 +1,63 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group flex-video
////
/// Margin below a flex video container.
/// @type Number
$flexvideo-margin-bottom: rem-calc(16) !default;
/// Padding used to create a 4:3 aspect ratio.
/// @type Number
$flexvideo-ratio: 4 by 3 !default;
/// Padding used to create a 16:9 aspect ratio.
/// @type Number
$flexvideo-ratio-widescreen: 16 by 9 !default;
/// Creates a percentage height that can be used as padding in a flex video container.
/// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`.
/// @return {Number} A percentage value that can be used as the `padding-bottom` parameter of a flex video container.
@function flex-video($ratio) {
$w: nth($ratio, 1);
$h: nth($ratio, 3);
@return $h / $w * 100%;
}
/// Creates a flex video container.
/// @param {List} $ratio [$flexvideo-ratio] - Ratio to use for the container, formatted as `x by y`.
@mixin flex-video($ratio: $flexvideo-ratio) {
position: relative;
height: 0;
padding-bottom: flex-video($ratio);
margin-bottom: $flexvideo-margin-bottom;
overflow: hidden;
iframe,
object,
embed,
video {
position: absolute;
top: 0;
#{$global-left}: 0;
width: 100%;
height: 100%;
}
}
@mixin foundation-flex-video {
.flex-video {
@include flex-video;
&.widescreen {
padding-bottom: flex-video($flexvideo-ratio-widescreen);
}
&.vimeo {
padding-top: 0;
}
}
}

View file

@ -0,0 +1,28 @@
@mixin foundation-flex-classes {
// Horizontal alignment using justify-content
@each $hdir, $prop in map-remove($-zf-flex-justify, left) {
.align-#{$hdir} {
@include flex-align($x: $hdir);
}
}
// Vertical alignment using align-items and align-self
@each $vdir, $prop in $-zf-flex-align {
.align-#{$vdir} {
@include flex-align($y: $vdir);
}
.align-self-#{$vdir} {
@include flex-align-self($y: $vdir);
}
}
// Source ordering
@include -zf-each-breakpoint {
@for $i from 1 through 6 {
.#{$-zf-size}-order-#{$i} {
@include flex-order($i);
}
}
}
}

View file

@ -0,0 +1,27 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group float
////
@mixin foundation-float-classes {
.float-left {
float: left !important;
}
.float-right {
float: right !important;
}
.float-center {
display: block;
margin-left: auto;
margin-right: auto;
}
.clearfix {
@include clearfix;
}
}

View file

@ -0,0 +1,56 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group label
////
/// Default background color for labels.
/// @type Color
$label-background: $primary-color !default;
/// Default text color for labels.
/// @type Color
$label-color: foreground($label-background) !default;
/// Default font size for labels.
/// @type Number
$label-font-size: 0.8rem !default;
/// Default padding inside labels.
/// @type Number
$label-padding: 0.33333rem 0.5rem !default;
/// Default radius of labels.
/// @type Number
$label-radius: $global-radius !default;
/// Generates base styles for a label.
@mixin label {
display: inline-block;
padding: $label-padding;
font-size: $label-font-size;
line-height: 1;
white-space: nowrap;
cursor: default;
border-radius: $label-radius;
}
@mixin foundation-label {
.label {
@include label;
background: $label-background;
color: $label-color;
@each $name, $color in $foundation-palette {
@if $name != primary {
&.#{$name} {
background: $color;
color: foreground($color);
}
}
}
}
}

View file

@ -0,0 +1,115 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group media-object
////
/// Bottom margin of a media object.
/// @type Number
$mediaobject-margin-bottom: $global-margin !default;
/// Left and right padding on sections within a media object.
/// @type Number
$mediaobject-section-padding: $global-padding !default;
/// Width of images within a media object, when the object is stacked vertically. Set to 'auto' to use the image's natural width.
/// @type Number
$mediaobject-image-width-stacked: 100% !default;
/// Adds styles for a media object container.
@mixin media-object-container {
margin-bottom: $mediaobject-margin-bottom;
display: if($global-flexbox, flex, block);
@if $global-flexbox {
flex-wrap: nowrap;
}
}
/// Adds styles for sections within a media object.
/// @param {Number} $padding [$mediaobject-section-padding] - Padding between sections.
@mixin media-object-section($padding: $mediaobject-section-padding) {
@if $global-flexbox {
flex: 0 1 auto;
}
@else {
display: table-cell;
vertical-align: top;
}
&:first-child {
padding-#{$global-right}: $padding;
}
&:last-child:not(:nth-child(2)) {
padding-#{$global-left}: $padding;
}
> :last-child {
margin-bottom: 0;
}
}
/// Adds styles to stack sections of a media object. Apply this to the section elements, not the container.
@mixin media-object-stack {
padding: 0;
padding-bottom: $mediaobject-section-padding;
@if $global-flexbox {
flex-basis: 100%;
max-width: 100%;
}
@else {
display: block;
}
img {
width: $mediaobject-image-width-stacked;
}
}
@mixin foundation-media-object {
.media-object {
@include media-object-container;
img {
max-width: none;
}
@if $global-flexbox {
&.stack-for-#{$-zf-zero-breakpoint} {
@include breakpoint($-zf-zero-breakpoint only) {
flex-wrap: wrap;
}
}
}
&.stack-for-#{$-zf-zero-breakpoint} .media-object-section {
@include breakpoint($-zf-zero-breakpoint only) {
@include media-object-stack;
}
}
}
.media-object-section {
@include media-object-section;
@if $global-flexbox {
// scss-lint:disable ZeroUnit
&.main-section {
flex: 1 1 0px;
}
}
@else {
&.middle {
vertical-align: middle;
}
&.bottom {
vertical-align: bottom;
}
}
}
}

View file

@ -0,0 +1,9 @@
@mixin foundation-menu-icon {
.menu-icon {
@include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover);
}
.menu-icon.dark {
@include hamburger;
}
}

View file

@ -0,0 +1,314 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group menu
////
/// Margin of a menu.
/// @type Number
$menu-margin: 0 !default;
/// Left-hand margin of a nested menu.
/// @type Number
$menu-margin-nested: 1rem !default;
/// Padding for items in a menu.
/// @type Number
$menu-item-padding: 0.7rem 1rem !default;
/// Text color of an active menu item.
/// @type Color
$menu-item-color-active: $white !default;
/// Background color of an active menu item.
/// @type Color
$menu-item-background-active: map-get($foundation-palette, primary) !default;
/// Spacing between an icon and text in a menu item.
/// @type Number
$menu-icon-spacing: 0.25rem !default;
/// Creates the base styles for a Menu.
@mixin menu-base {
margin: $menu-margin;
list-style-type: none;
@if $global-flexbox {
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
}
// List items are table cell to allow for vertical alignment
> li {
@include disable-mouse-outline;
@if $global-flexbox {
flex: 0 0 auto;
}
@else {
display: table-cell;
vertical-align: middle;
}
}
// Reset line height to make the height of the overall item easier to calculate
> li > a {
display: block;
padding: $menu-item-padding;
line-height: 1;
}
// Reset styles of inner elements
input,
a,
button {
margin-bottom: 0;
}
}
/// Expands the items of a Menu, so each item is the same width.
@mixin menu-expand {
@if $global-flexbox {
// scss-lint:disable ZeroUnit
> li {
flex: 1 1 0px;
}
}
@else {
width: 100%;
display: table;
table-layout: fixed;
}
}
/// Sets the direction of a Menu.
/// @param {Keyword} $dir [horizontal] - Direction of the Menu. Can be `horizontal` or `vertical`.
@mixin menu-direction($dir: horizontal) {
@if $dir == horizontal {
@if $global-flexbox {
flex-wrap: nowrap;
> li {
flex: 0 0 auto;
}
}
@else {
> li {
display: table-cell;
}
}
}
@else if $dir == vertical {
@if $global-flexbox {
flex-wrap: wrap;
> li {
flex: 0 0 100%;
max-width: 100%;
}
> li > a {
align-items: flex-start;
justify-content: flex-start;
}
}
@else {
> li {
display: block;
}
}
}
@else {
@warn 'The direction used for menu-direction() must be horizontal or vertical.';
}
}
/// Creates a simple Menu, which has no padding or hover state.
@mixin menu-simple {
li {
line-height: 1;
display: inline-block;
margin-#{$global-right}: get-side($menu-item-padding, $global-right);
}
a {
padding: 0;
}
}
/// Adds styles for a nested Menu, by adding `margin-left` to the menu.
/// @param {Keyword|Number} $padding [auto] - Length of the margin.
@mixin menu-nested($margin: $menu-margin-nested) {
margin-#{$global-left}: $margin;
}
/// Adds support for icons to Menu items.
/// @param {Keyword} $position [side] - Positioning for icons. Can be `side` (left, or right on RTL) or `top`.
/// @param {Boolean} $base [true] - Set to `false` to prevent the shared CSS between side- and top-aligned icons from being printed. Set this to `false` if you're calling the mixin multiple times on the same element.
@mixin menu-icons($position: side, $base: true) {
@if $base {
@if $global-flexbox {
> li > a {
display: flex;
}
}
@else {
> li > a {
img,
i,
svg {
vertical-align: middle;
+ span {
vertical-align: middle;
}
}
}
}
}
@if $position == side {
> li > a {
@if $global-flexbox {
flex-flow: row nowrap;
}
img,
i,
svg {
margin-#{$global-right}: $menu-icon-spacing;
@if not $global-flexbox {
display: inline-block;
}
}
}
}
@else if $position == top {
> li > a {
@if $global-flexbox {
flex-flow: column nowrap;
}
@else {
text-align: center;
}
img,
i,
svg {
@if not $global-flexbox {
display: block;
margin: 0 auto $menu-icon-spacing;
}
@else {
align-self: stretch;
text-align: center;
margin-bottom: $menu-icon-spacing;
}
}
}
}
}
@mixin menu-text {
font-weight: bold;
color: inherit;
line-height: 1;
padding-top: 0;
padding-bottom: 0;
padding: $menu-item-padding;
}
@mixin foundation-menu {
.menu {
@include menu-base;
@include menu-icons;
// Orientation
@include menu-direction(horizontal);
&.vertical {
@include menu-direction(vertical);
}
@each $size in $breakpoint-classes {
@if $size != $-zf-zero-breakpoint {
@include breakpoint($size) {
&.#{$size}-horizontal {
@include menu-direction(horizontal);
}
&.#{$size}-vertical {
@include menu-direction(vertical);
}
}
}
}
// Simple
&.simple {
@include menu-simple;
}
// Align right
&.align-#{$global-right} {
@if $global-flexbox {
justify-content: flex-end;
}
@else {
@include clearfix;
> li {
float: $global-right;
}
}
}
// Even-width
&.expanded {
@include menu-expand;
> li:first-child:last-child {
width: 100%;
}
}
// Vertical icons
&.icon-top {
@include menu-icons(top, $base: false);
}
// Nesting
&.nested {
@include menu-nested;
}
// Active state
.active > a {
color: $menu-item-color-active;
background: $menu-item-background-active;
}
}
.menu-text {
@include menu-text;
}
// Align center
.menu-centered {
text-align: center;
> .menu {
display: inline-block;
}
}
// Prevent FOUC when using the Responsive Menu plugin
.no-js [data-responsive-menu] ul {
display: none;
}
}

View file

@ -0,0 +1,177 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group off-canvas
////
/// Width of an off-canvas menu.
/// @type Number
$offcanvas-size: 250px !default;
/// Background color of an off-canvas menu.
/// @type Color
$offcanvas-background: $light-gray !default;
/// Z-index of an off-canvas menu.
/// @type Number
$offcanvas-zindex: -1 !default;
/// Length of the animation on an off-canvas menu.
/// @type Number
$offcanvas-transition-length: 0.5s !default;
/// Timing function of the animation on an off-canvas menu.
/// @type Keyword
$offcanvas-transition-timing: ease !default;
/// If `true`, a revealed off-canvas will be fixed-position, and scroll with the screen.
$offcanvas-fixed-reveal: true !default;
/// Background color for the overlay that appears when an off-canvas menu is open.
/// @type Color
$offcanvas-exit-background: rgba($white, 0.25) !default;
/// CSS class used for the main content area. The off-canvas mixins use this to target the page body.
$maincontent-class: 'off-canvas-content' !default;
/// Box shadow to place under the main content area. This shadow overlaps the off-canvas menus.
/// @type Shadow
$maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
/// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.
@mixin off-canvas-basics {
// Extra properties needed on <html> and <body> to make off-canvas work
html,
body {
height: 100%;
}
.off-canvas-wrapper {
width: 100%;
overflow-x: hidden;
position: relative;
backface-visibility: hidden;
-webkit-overflow-scrolling: auto;
}
.off-canvas-wrapper-inner {
@include clearfix;
position: relative;
width: 100%;
transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
}
// Container for page content
.off-canvas-content,
.#{$maincontent-class} {
min-height: 100%;
background: $body-background;
transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
backface-visibility: hidden;
z-index: 1;
padding-bottom: 0.1px; // Prevents margin collapsing, which would reveal the box shadow of the wrapper
@if has-value($maincontent-shadow) {
box-shadow: $maincontent-shadow;
}
}
// Click-to-exit overlay (generated by JavaScript)
.js-off-canvas-exit {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: $offcanvas-exit-background;
cursor: pointer;
transition: background $offcanvas-transition-length $offcanvas-transition-timing;
}
}
/// Adds basic styles for an off-canvas menu.
@mixin off-canvas-base {
@include disable-mouse-outline;
position: absolute;
background: $offcanvas-background;
z-index: $offcanvas-zindex;
max-height: 100%;
overflow-y: auto;
transform: translateX(0);
}
@mixin off-canvas-position(
$position: left,
$size: $offcanvas-size,
$fixed: false
) {
@if $position == left {
left: -$size;
top: 0;
width: $size;
}
@else if $position == right {
right: -$size;
top: 0;
width: $size;
}
// Generates an open state class that matches the width of the menu
@at-root {
.is-open-#{$position} {
@if $position == left {
transform: translateX($size);
}
@else if $position == right {
transform: translateX(-$size);
}
}
}
}
/// Adds styles that reveal an off-canvas menu.
/// @param {Keyword} $position [left] - Position of the off-canvas menu being revealed.
@mixin off-canvas-reveal(
$position: left
) {
#{$position}: 0;
z-index: auto;
@if $offcanvas-fixed-reveal {
position: fixed;
}
& ~ .#{$maincontent-class} {
margin-#{$position}: $offcanvas-size;
}
}
@mixin foundation-off-canvas {
@include off-canvas-basics;
// Off-canvas container
.off-canvas {
@include off-canvas-base;
&.position-left { @include off-canvas-position(left); }
&.position-right { @include off-canvas-position(right); }
}
// Reveal off-canvas menu on larger screens
@each $name, $value in $breakpoint-classes {
@if $name != $-zf-zero-breakpoint {
@include breakpoint($name) {
.position-left.reveal-for-#{$name} {
@include off-canvas-reveal(left);
}
.position-right.reveal-for-#{$name} {
@include off-canvas-reveal(right);
}
}
}
}
}

View file

@ -0,0 +1,193 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group orbit
////
/// Default color for Orbit's bullets.
/// @type Color
$orbit-bullet-background: $medium-gray !default;
/// Default active color for Orbit's bullets.
/// @type Color
$orbit-bullet-background-active: $dark-gray !default;
/// Default diameter for Orbit's bullets.
/// @type Number
$orbit-bullet-diameter: 1.2rem !default;
/// Default margin between Orbit's bullets.
/// @type Number
$orbit-bullet-margin: 0.1rem !default;
/// Default distance from slide region for Orbit's bullets.
/// @type Number
$orbit-bullet-margin-top: 0.8rem !default;
/// Default bottom margin from Orbit's bullets to whatever content may lurk below it.
/// @type Number
$orbit-bullet-margin-bottom: 0.8rem !default;
/// Default background color for Orbit's caption.
/// @type Color
$orbit-caption-background: rgba($black, 0.5) !default;
/// Default padding for Orbit's caption.
/// @type Number
$orbit-caption-padding: 1rem !default;
/// Default background color for Orbit's controls when hovered.
/// @type Color
$orbit-control-background-hover: rgba($black, 0.5) !default;
/// Default padding for Orbit's controls.
/// @type Number
$orbit-control-padding: 1rem !default;
/// Default z-index for Orbit's controls.
/// @type Number
$orbit-control-zindex: 10 !default;
/// Adds styles for the outer Orbit wrapper. These styles are used on the `.orbit` class.
@mixin orbit-wrapper {
position: relative;
}
/// Adds styles for the inner Orbit slide container. These styles are used on the `.orbit-container` class.
@mixin orbit-container {
position: relative;
margin: 0;
overflow: hidden;
list-style: none;
}
/// Adds styles for the individual slides of an Orbit slider. These styles are used on the `.orbit-slide` class.
@mixin orbit-slide {
width: 100%;
max-height: 100%;
&.no-motionui {
&.is-active {
top: 0;
left: 0;
}
}
}
@mixin orbit-figure {
margin: 0;
}
@mixin orbit-image {
margin: 0;
width: 100%;
max-width: 100%;
}
/// Adds styles for an orbit slide caption. These styles are used on the `.orbit-caption` class.
@mixin orbit-caption {
position: absolute;
bottom: 0;
width: 100%;
padding: $orbit-caption-padding;
margin-bottom: 0;
color: foreground($orbit-caption-background);
background-color: $orbit-caption-background;
}
/// Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the `.orbit-next` and `.orbit-previous` classes in the default CSS.
@mixin orbit-control {
@include disable-mouse-outline;
@include vertical-center;
z-index: $orbit-control-zindex;
padding: $orbit-control-padding;
color: $white;
&:hover,
&:active,
&:focus {
background-color: $orbit-control-background-hover;
}
}
/// Adds styles for the Orbit previous button. These styles are used on the `.orbit-previous` class.
@mixin orbit-previous {
#{$global-left}: 0;
}
/// Adds styles for the Orbit next button. These styles are used on the `.orbit-next` class.
@mixin orbit-next {
#{$global-left}: auto;
#{$global-right}: 0;
}
/// Adds styles for a container of Orbit bullets. /// Adds styles for the Orbit previous button. These styles are used on the `.orbit-bullets` class.
@mixin orbit-bullets {
@include disable-mouse-outline;
position: relative;
margin-top: $orbit-bullet-margin-top;
margin-bottom: $orbit-bullet-margin-bottom;
text-align: center;
button {
width: $orbit-bullet-diameter;
height: $orbit-bullet-diameter;
margin: $orbit-bullet-margin;
background-color: $orbit-bullet-background;
border-radius: 50%;
&:hover {
background-color: $orbit-bullet-background-active;
}
&.is-active {
background-color: $orbit-bullet-background-active;
}
}
}
@mixin foundation-orbit {
.orbit {
@include orbit-wrapper;
}
.orbit-container {
@include orbit-container;
}
.orbit-slide {
@include orbit-slide;
}
.orbit-figure {
@include orbit-figure;
}
.orbit-image {
@include orbit-image;
}
.orbit-caption {
@include orbit-caption;
}
%orbit-control {
@include orbit-control;
}
.orbit-previous {
@extend %orbit-control;
@include orbit-previous;
}
.orbit-next {
@extend %orbit-control;
@include orbit-next;
}
.orbit-bullets {
@include orbit-bullets;
}
}

View file

@ -0,0 +1,162 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group pagination
////
/// Font size of pagination items.
/// @type Number
$pagination-font-size: rem-calc(14) !default;
/// Default bottom margin of the media object.
/// @type Number
$pagination-margin-bottom: $global-margin !default;
/// Text color of pagination items.
/// @type Color
$pagination-item-color: $black !default;
/// Padding inside of pagination items.
/// @type Number
$pagination-item-padding: rem-calc(3 10) !default;
/// Right margin to separate pagination items.
/// @type Number
$pagination-item-spacing: rem-calc(1) !default;
/// Default radius for pagination items.
/// @type Number
$pagination-radius: $global-radius !default;
/// Background color of pagination items on hover.
/// @type Color
$pagination-item-background-hover: $light-gray !default;
/// Background color of pagination item for the current page.
/// @type Color
$pagination-item-background-current: $primary-color !default;
/// Text color of the pagination item for the current page.
/// @type Color
$pagination-item-color-current: foreground($pagination-item-background-current) !default;
/// Text color of a disabled pagination item.
/// @type Color
$pagination-item-color-disabled: $medium-gray !default;
/// Color of the ellipsis in a pagination menu.
/// @type Color
$pagination-ellipsis-color: $black !default;
/// If `false`, don't display page number links on mobile, only next/previous links.
/// @type Boolean
$pagination-mobile-items: false !default;
/// If `true`, arrows are added to the next and previous links of pagination.
/// @type Boolean
$pagination-arrows: true !default;
/// Adds styles for a pagination container. Apply this to a `<ul>`.
@mixin pagination-container {
@include clearfix;
margin-#{$global-left}: 0;
margin-bottom: $pagination-margin-bottom;
// List item
li {
font-size: $pagination-font-size;
margin-#{$global-right}: $pagination-item-spacing;
border-radius: $pagination-radius;
@if $pagination-mobile-items {
display: inline-block;
}
@else {
display: none;
&:last-child,
&:first-child {
display: inline-block;
}
@include breakpoint(medium) {
display: inline-block;
}
}
}
// Page links
a,
button {
color: $pagination-item-color;
display: block;
padding: $pagination-item-padding;
border-radius: $global-radius;
&:hover {
background: $pagination-item-background-hover;
}
}
}
/// Adds styles for the current pagination item. Apply this to an `<a>`.
@mixin pagination-item-current {
padding: $pagination-item-padding;
background: $pagination-item-background-current;
color: $pagination-item-color-current;
cursor: default;
}
/// Adds styles for a disabled pagination item. Apply this to an `<a>`.
@mixin pagination-item-disabled {
padding: $pagination-item-padding;
color: $pagination-item-color-disabled;
cursor: not-allowed;
&:hover {
background: transparent;
}
}
/// Adds styles for an ellipsis for use in a pagination list.
@mixin pagination-ellipsis {
content: '\2026';
padding: $pagination-item-padding;
color: $pagination-ellipsis-color;
}
@mixin foundation-pagination {
.pagination {
@include pagination-container;
.current {
@include pagination-item-current;
}
.disabled {
@include pagination-item-disabled;
}
.ellipsis::after {
@include pagination-ellipsis;
}
}
@if $pagination-arrows {
.pagination-previous a::before,
.pagination-previous.disabled::before {
content: '\00ab';
display: inline-block;
margin-#{$global-right}: 0.5rem;
}
.pagination-next a::after,
.pagination-next.disabled::after {
content: '\00bb';
display: inline-block;
margin-#{$global-left}: 0.5rem;
}
}
}

View file

@ -0,0 +1,64 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
/// Adds styles for a progress bar container.
@mixin progress-container {
background-color: $progress-background;
height: $progress-height;
margin-bottom: $progress-margin-bottom;
border-radius: $progress-radius;
}
/// Adds styles for the inner meter of a progress bar.
@mixin progress-meter {
position: relative;
display: block;
width: 0%;
height: 100%;
background-color: $progress-meter-background;
@if has-value($progress-radius) {
border-radius: $global-radius;
}
}
/// Adds styles for text in the progress meter.
@mixin progress-meter-text {
@include absolute-center;
position: absolute;
margin: 0;
font-size: 0.75rem;
font-weight: bold;
color: $white;
white-space: nowrap;
@if has-value($progress-radius) {
border-radius: $progress-radius;
}
}
@mixin foundation-progress-bar {
// Progress bar
.progress {
@include progress-container;
@each $name, $color in $foundation-palette {
&.#{$name} {
.progress-meter {
background-color: $color;
}
}
}
}
// Inner meter
.progress-meter {
@include progress-meter;
}
// Inner meter text
.progress-meter-text {
@include progress-meter-text;
}
}

View file

@ -0,0 +1,172 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group reveal
////
/// Default background color of a modal.
/// @type Color
$reveal-background: $white !default;
/// Default width of a modal, with no class applied.
/// @type Number
$reveal-width: 600px !default;
/// Default maximum width of a modal.
/// @type Number
$reveal-max-width: $global-width !default;
/// Default padding inside a modal.
/// @type Number
$reveal-padding: $global-padding !default;
/// Default border around a modal.
/// @type Number
$reveal-border: 1px solid $medium-gray !default;
/// Default radius for modal.
/// @type Number
$reveal-radius: $global-radius !default;
/// z-index for modals. The overlay uses this value, while the modal itself uses this value plus one.
/// @type Number
$reveal-zindex: 1005 !default;
/// Background color of modal overlays.
/// @type Color
$reveal-overlay-background: rgba($black, 0.45) !default;
/// Adds styles for a modal overlay.
/// @param {Color} $background [$reveal-overlay-background] - Background color of the overlay.
@mixin reveal-overlay {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: $reveal-zindex;
background-color: $reveal-overlay-background;
overflow-y: scroll;
}
/// Adds base styles for a modal.
@mixin reveal-modal-base {
@include disable-mouse-outline;
display: none;
z-index: $reveal-zindex + 1;
padding: $reveal-padding;
border: $reveal-border;
background-color: $reveal-background;
border-radius: $reveal-radius;
@include breakpoint(medium) {
min-height: 0;
}
// Make sure rows don't have a min-width on them
.column,
.columns {
min-width: 0;
}
// Strip margins from the last item in the modal
> :last-child {
margin-bottom: 0;
}
}
/// Adjusts the width of a modal.
/// @param {Number} $width - Width of the modal. Generally a percentage.
/// @param {Number} $max-width [$reveal-max-width] - Maximum width of the modal.
@mixin reveal-modal-width(
$width: $reveal-width,
$max-width: $reveal-max-width
) {
@include breakpoint(medium) {
@extend %reveal-centered;
width: $width;
max-width: $reveal-max-width;
}
}
/// Creates a full-screen modal, which stretches the full width and height of the window.
@mixin reveal-modal-fullscreen {
// scss-lint:disable DuplicateProperty
top: 0;
left: 0;
width: 100%;
height: 100%;
height: 100vh;
min-height: 100vh;
max-width: none;
margin-left: 0;
border: 0;
border-radius: 0;
}
@mixin foundation-reveal {
// [TODO] Is this necessary?
// scss-lint:disable QualifyingElement
body.is-reveal-open {
overflow: hidden;
}
// html gets this class only in iOS
html.is-reveal-open,
html.is-reveal-open body {
height: 100%;
overflow: hidden;
user-select: none;
}
// Overlay
.reveal-overlay {
@include reveal-overlay;
}
// Modal container
.reveal {
@include reveal-modal-base;
@include reveal-modal-width($reveal-width);
position: relative;
top: 100px;
margin-left: auto;
margin-right: auto;
overflow-y: auto;
// Placeholder selector for medium-and-up modals
// Prevents duplicate CSS when defining multiple Reveal sizes
@include breakpoint(medium) {
%reveal-centered {
left: auto;
right: auto;
margin: 0 auto;
}
}
// Remove padding
&.collapse {
padding: 0;
}
// Sizing classes
&.tiny { @include reveal-modal-width(30%); }
&.small { @include reveal-modal-width(50%); }
&.large { @include reveal-modal-width(90%); }
// Full-screen mode
&.full {
@include reveal-modal-fullscreen;
}
@include breakpoint($-zf-zero-breakpoint only) {
@include reveal-modal-fullscreen;
}
&.without-overlay {
position: fixed;
}
}
}

View file

@ -0,0 +1,133 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
// [TODO] Check how plugin confirms disabled or vertical status
// [TODO] Check if transition: all; is necessary
////
/// @group slider
////
/// Default slider width of a vertical slider. (Doesn't apply to the native slider.)
/// @type Number
$slider-width-vertical: 0.5rem !default;
/// Transition properties to apply to the slider handle and fill. (Doesn't apply to the native slider.)
/// @type Transition
$slider-transition: all 0.2s ease-in-out !default;
/// Adds the general styles for sliders.
@mixin slider-container {
position: relative;
height: $slider-height;
margin-top: 1.25rem;
margin-bottom: 2.25rem;
background-color: $slider-background;
cursor: pointer;
user-select: none;
touch-action: none;
}
/// Adds the general styles for active fill for sliders.
@mixin slider-fill {
position: absolute;
top: 0;
left: 0;
display: inline-block;
max-width: 100%;
height: $slider-height;
background-color: $slider-fill-background;
transition: $slider-transition;
&.is-dragging {
transition: all 0s linear;
}
}
/// Adds the general styles for the slider handles.
@mixin slider-handle {
@include disable-mouse-outline;
@include vertical-center;
position: absolute;
left: 0;
z-index: 1;
display: inline-block;
width: $slider-handle-width;
height: $slider-handle-height;
background-color: $slider-handle-background;
transition: $slider-transition;
touch-action: manipulation;
border-radius: $slider-radius;
&:hover {
background-color: scale-color($slider-handle-background, $lightness: -15%);
}
&.is-dragging {
transition: all 0s linear;
}
}
@mixin slider-disabled {
opacity: $slider-opacity-disabled;
cursor: not-allowed;
}
@mixin slider-vertical {
display: inline-block;
width: $slider-width-vertical;
height: 12.5rem;
margin: 0 1.25rem;
transform: scale(1, -1);
.slider-fill {
top: 0;
width: $slider-width-vertical;
max-height: 100%;
}
.slider-handle {
position: absolute;
top: 0;
left: 50%;
width: $slider-handle-height;
height: $slider-handle-width;
transform: translateX(-50%);
}
}
@mixin foundation-slider {
// Container
.slider {
@include slider-container;
}
// Fill area
.slider-fill {
@include slider-fill;
}
// Draggable handle
.slider-handle {
@include slider-handle;
}
// Disabled state
.slider.disabled,
.slider[disabled] {
@include slider-disabled;
}
// Vertical slider
.slider.vertical {
@include slider-vertical;
}
// RTL support
@if $global-text-direction == rtl {
.slider:not(.vertical) {
transform: scale(-1, 1);
}
}
}

View file

@ -0,0 +1,38 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
@mixin foundation-sticky {
.sticky-container {
position: relative;
}
.sticky {
position: absolute;
z-index: 0;
transform: translate3d(0, 0, 0);
}
.sticky.is-stuck {
position: fixed;
z-index: 5;
&.is-at-top {
top: 0;
}
&.is-at-bottom {
bottom: 0;
}
}
.sticky.is-anchored {
position: absolute;
left: auto;
right: auto;
&.is-at-bottom {
bottom: 0;
}
}
}

View file

@ -0,0 +1,232 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group switch
////
/// Background color of a switch.
/// @type Color
$switch-background: $medium-gray !default;
/// Background active color of a switch.
/// @type Color
$switch-background-active: $primary-color !default;
/// Height of a switch, with no class applied.
/// @type Number
$switch-height: 2rem !default;
/// Height of a switch with .tiny class.
/// @type Number
$switch-height-tiny: 1.5rem !default;
/// Height of a switch with .small class.
/// @type Number
$switch-height-small: 1.75rem !default;
/// Height of a switch with .large class.
/// @type Number
$switch-height-large: 2.5rem !default;
/// Border radius of the switch
/// @type Number
$switch-radius: $global-radius !default;
/// border around a modal.
/// @type Number
$switch-margin: $global-margin !default;
/// Background color for the switch container and paddle.
/// @type Color
$switch-paddle-background: $white !default;
/// Spacing between a switch paddle and the edge of the body.
/// @type Number
$switch-paddle-offset: 0.25rem !default;
/// border radius of the switch paddle
/// @type Number
$switch-paddle-radius: $global-radius !default;
/// switch transition.
/// @type Number
$switch-paddle-transition: all 0.25s ease-out !default;
// make them variables
// ask about accessibility on label
// change class name for text
/// Adds styles for a switch container. Apply this to a container class.
@mixin switch-container {
margin-bottom: $switch-margin;
outline: 0;
position: relative;
user-select: none;
// These properties cascade down to the switch text
color: $white;
font-weight: bold;
font-size: rem-calc(14);
}
/// Adds styles for a switch input. Apply this to an `<input>` within a switch.
@mixin switch-input {
opacity: 0;
position: absolute;
}
/// Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch.
@mixin switch-paddle {
background: $switch-background;
cursor: pointer;
display: block;
position: relative;
width: 4rem;
height: $switch-height;
transition: $switch-paddle-transition;
border-radius: $switch-radius;
// Resetting these <label> presets so type styles cascade down
color: inherit;
font-weight: inherit;
// Needed to override specificity
input + & {
margin: 0;
}
// The paddle itself
&::after {
background: $switch-paddle-background;
content: '';
display: block;
position: absolute;
height: 1.5rem;
#{$global-left}: 0.25rem;
top: 0.25rem;
width: 1.5rem;
transition: $switch-paddle-transition;
transform: translate3d(0, 0, 0);
border-radius: $switch-paddle-radius;
}
// Change the visual style when the switch is active
input:checked ~ & {
background: $switch-background-active;
&::after {
#{$global-left}: 2.25rem;
}
}
input:focus ~ & {
@include disable-mouse-outline;
}
}
/// Adds base styles for active/inactive text inside a switch. Apply this to text elements inside the switch `<label>`.
@mixin switch-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
/// Adds styles for the active state text within a switch.
@mixin switch-text-active {
#{$global-left}: 8%;
display: none;
input:checked + label > & {
display: block;
}
}
/// Adds styles for the inactive state text within a switch.
@mixin switch-text-inactive {
#{$global-right}: 15%;
input:checked + label > & {
display: none;
}
}
/// Changes the size of a switch by modifying the size of the body and paddle. Apply this to a switch container.
/// @param {Number} $font-size [1rem] - Font size of label text within the switch.
/// @param {Number} $width [4rem] - Width of the switch body.
/// @param {Number} $height [2rem] - Height of the switch body.
/// @param {Number} $paddle-width [1.5rem] - Width of the switch paddle.
/// @param {Number} $paddle-offset [0.25rem] - Spacing between the switch paddle and the edge of the switch body.
@mixin switch-size(
$font-size: 1rem,
$width: 4rem,
$height: 2rem,
$paddle-width: 1.5rem,
$paddle-offset: 0.25rem
) {
$paddle-height: $height - ($paddle-offset * 2);
$paddle-left-active: $width - $paddle-width - $paddle-offset;
.switch-paddle {
width: $width;
height: $height;
font-size: $font-size;
}
.switch-paddle::after {
width: $paddle-width;
height: $paddle-height;
}
input:checked ~ .switch-paddle::after {
#{$global-left}: $paddle-left-active;
}
}
@mixin foundation-switch {
// Container class
.switch {
@include switch-container;
}
// <input> element
.switch-input {
@include switch-input;
}
// <label> element
.switch-paddle {
@include switch-paddle;
}
// Base label text styles
%switch-text {
@include switch-text;
}
// Active label text styles
.switch-active {
@extend %switch-text;
@include switch-text-active;
}
// Inactive label text styles
.switch-inactive {
@extend %switch-text;
@include switch-text-inactive;
}
// Switch sizes
.switch.tiny {
@include switch-size(rem-calc(10), 3rem, $switch-height-tiny, 1rem, $switch-paddle-offset);
}
.switch.small {
@include switch-size(rem-calc(12), 3.5rem, $switch-height-small, 1.25rem, $switch-paddle-offset);
}
.switch.large {
@include switch-size(rem-calc(16), 5rem, $switch-height-large, 2rem, $switch-paddle-offset);
}
}

View file

@ -0,0 +1,234 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
// scss-lint:disable MergeableSelector, QualifyingElement
////
/// @group table
////
/// Default color for table background.
/// @type Color
$table-background: $white !default;
/// Default scale for darkening the striped table rows and the table border.
/// @type Number
$table-color-scale: 5% !default;
/// Default style for table border.
/// @type List
$table-border: 1px solid smart-scale($table-background, $table-color-scale) !default;
/// Default padding for table.
/// @type Number
$table-padding: rem-calc(8 10 10) !default;
/// Default scale for darkening the table rows on hover.
/// @type Number
$table-hover-scale: 2% !default;
/// Default color of standard rows on hover.
/// @type List
$table-row-hover: darken($table-background, $table-hover-scale) !default;
/// Default color of striped rows on hover.
/// @type List
$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale) !default;
/// Default background color for striped rows.
/// @type Color
$table-striped-background: smart-scale($table-background, $table-color-scale) !default;
/// Default value for showing the stripe on rows of the tables, excluding the header and footer. If even, the even rows will have a background color. If odd, the odd rows will have a background color. If empty, or any other value, the table rows will have no striping.
/// @type Keyword
$table-stripe: even !default;
/// Default color for header background.
/// @type Color
$table-head-background: smart-scale($table-background, $table-color-scale / 2) !default;
/// Default color for footer background.
/// @type Color
$table-foot-background: smart-scale($table-background, $table-color-scale) !default;
/// Default font color for header.
/// @type Color
$table-head-font-color: $body-font-color !default;
/// Default value for showing the header when using stacked tables.
/// @type Boolean
$show-header-for-stacked: false !default;
@mixin -zf-table-children-styles($stripe: $table-stripe) {
thead,
tbody,
tfoot {
border: $table-border;
background-color: $table-background;
}
// Caption
caption {
font-weight: $global-weight-bold;
padding: $table-padding;
}
// Table head and foot
thead,
tfoot {
background: $table-head-background;
color: $table-head-font-color;
// Rows within head and foot
tr {
background: transparent;
}
// Cells within head and foot
th,
td {
padding: $table-padding;
font-weight: $global-weight-bold;
text-align: #{$global-left};
}
}
// Table rows
tbody {
tr {
// If stripe is set to even, darken the even rows.
@if $stripe == even {
&:nth-child(even) {
background-color: $table-striped-background;
}
}
// If stripe is set to odd, darken the odd rows.
@else if $stripe == odd {
&:nth-child(odd) {
background-color: $table-striped-background;
}
}
}
th,
td {
padding: $table-padding;
}
}
}
/// Adds the general styles for tables.
/// @param {Keyword} $stripe [$table-stripe] - Uses keywords even, odd, or none to darken rows of the table. The default value is even.
@mixin table(
$stripe: $table-stripe,
$nest: false
) {
width: 100%;
margin-bottom: $global-margin;
border-radius: $global-radius;
@if $nest {
@include -zf-table-children-styles($stripe);
}
@else {
@at-root {
@include -zf-table-children-styles($stripe);
}
}
}
/// Adds the ability to horizontally scroll the table when the content overflows horizontally.
@mixin table-scroll {
display: block;
width: 100%;
overflow-x: auto;
}
/// Slightly darkens the table rows on hover.
@mixin table-hover {
tr {
//Darkens the non-striped table rows on hover.
&:hover {
background-color: $table-row-hover;
}
//Darkens the even striped table rows.
@if($table-stripe == even) {
&:nth-of-type(even):hover {
background-color: $table-row-stripe-hover;
}
}
//Darkens the odd striped table rows.
@elseif($table-stripe == odd) {
&:nth-of-type(odd):hover {
background-color: $table-row-stripe-hover;
}
}
}
}
/// Adds styles for a stacked table. Useful for small-screen layouts.
/// @param {Boolean} $header [$show-header-for-stacked] - Show the first th of header when stacked.
@mixin table-stack($header: $show-header-for-stacked) {
@if $header {
thead {
th:first-child {
display: block;
}
th {
display: none;
}
}
}
@else {
thead {
display: none;
}
}
tfoot {
display: none;
}
tr,
th,
td {
display: block;
}
td {
border-top: 0;
}
}
@mixin foundation-table($nest: false) {
table {
@include table($nest: $nest);
}
table.stack {
@include breakpoint(medium down) {
@include table-stack;
}
}
table.scroll {
@include table-scroll;
}
table.hover {
@include table-hover;
}
.table-scroll {
overflow-x: auto;
table {
width: auto;
}
}
}

View file

@ -0,0 +1,165 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group tabs
////
/// Default margin of the tab bar.
/// @type Number
$tab-margin: 0 !default;
/// Default background color of a tab bar.
/// @type Color
$tab-background: $white !default;
/// active background color of a tab bar.
/// @type Color
$tab-background-active: $light-gray !default;
/// Font size of tab items.
/// @type Number
$tab-item-font-size: rem-calc(12) !default;
/// Default background color on hover for items in a Menu.
$tab-item-background-hover: $white !default;
/// Default padding of a tab item.
/// @type Number
$tab-item-padding: 1.25rem 1.5rem !default;
/// Maximum number of `expand-n` classes to include in the CSS.
/// @type Number
$tab-expand-max: 6 !default;
/// Default background color of tab content.
/// @type Color
$tab-content-background: $white !default;
/// Default border color of tab content.
/// @type Color
$tab-content-border: $light-gray !default;
/// Default text color of tab content.
/// @type Color
$tab-content-color: foreground($tab-background, $primary-color) !default;
/// Default padding for tab content.
/// @type Number | List
$tab-content-padding: 1rem !default;
/// Adds styles for a tab container. Apply this to a `<ul>`.
@mixin tabs-container {
@include clearfix;
margin: $tab-margin;
list-style-type: none;
background: $tab-background;
border: 1px solid $tab-content-border;
}
/// Augments a tab container to have vertical tabs. Use this in conjunction with `tabs-container()`.
@mixin tabs-container-vertical {
> li {
width: auto;
float: none;
display: block;
}
}
/// Adds styles for the links within a tab container. Apply this to the `<li>` elements inside a tab container.
@mixin tabs-title {
float: #{$global-left};
> a {
display: block;
padding: $tab-item-padding;
line-height: 1;
font-size: $tab-item-font-size;
&:hover {
background: $tab-item-background-hover;
}
&:focus,
&[aria-selected='true'] {
background: $tab-background-active;
}
}
}
/// Adds styles for the wrapper that surrounds a tab group's content panes.
@mixin tabs-content {
background: $tab-content-background;
transition: all 0.5s ease;
border: 1px solid $tab-content-border;
border-top: 0;
}
/// Augments a tab content container to have a vertical style, by shifting the border around. Use this in conjunction with `tabs-content()`.
@mixin tabs-content-vertical {
border: 1px solid $tab-content-border;
border-#{$global-left}: 0;
}
/// Adds styles for an individual tab content panel within the tab content container.
@mixin tabs-panel {
display: none;
padding: $tab-content-padding;
&.is-active {
display: block;
}
}
@mixin foundation-tabs {
.tabs {
@include tabs-container;
}
// Vertical
.tabs.vertical {
@include tabs-container-vertical;
}
// Simple
.tabs.simple {
> li > a {
padding: 0;
&:hover {
background: transparent;
}
}
}
// Primary color
.tabs.primary {
background: $primary-color;
> li > a {
color: foreground($primary-color);
&:hover,
&:focus {
background: smart-scale($primary-color);
}
}
}
.tabs-title {
@include tabs-title;
}
.tabs-content {
@include tabs-content;
}
.tabs-content.vertical {
@include tabs-content-vertical;
}
.tabs-panel {
@include tabs-panel;
}
}

View file

@ -0,0 +1,54 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group thumbnail
////
/// Border around thumbnail images.
/// @type Border
$thumbnail-border: solid 4px $white !default;
/// Bottom margin for thumbnail images.
/// @type Length
$thumbnail-margin-bottom: $global-margin !default;
/// Box shadow under thumbnail images.
/// @type Shadow
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default;
/// Box shadow under thumbnail images.
/// @type Shadow
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default;
/// Transition proprties for thumbnail images.
/// @type Transition
$thumbnail-transition: box-shadow 200ms ease-out !default;
/// Default radius for thumbnail images.
/// @type Number
$thumbnail-radius: $global-radius !default;
/// Adds thumbnail styles to an element.
@mixin thumbnail {
border: $thumbnail-border;
box-shadow: $thumbnail-shadow;
display: inline-block;
line-height: 0;
max-width: 100%;
transition: $thumbnail-transition;
border-radius: $thumbnail-radius;
margin-bottom: $thumbnail-margin-bottom;
&:hover,
&:focus {
box-shadow: $thumbnail-shadow-hover;
}
}
@mixin foundation-thumbnail {
.thumbnail {
@include thumbnail;
}
}

View file

@ -0,0 +1,89 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group title-bar
////
/// Background color of a title bar.
/// @type Color
$titlebar-background: $black !default;
/// Color of text inside a title bar.
/// @type Color
$titlebar-color: $white !default;
/// Padding inside a title bar.
/// @type Length
$titlebar-padding: 0.5rem !default;
/// Font weight of text inside a title bar.
/// @type Weight
$titlebar-text-font-weight: bold !default;
/// Color of menu icons inside a title bar.
/// @type Color
$titlebar-icon-color: $white !default;
/// Color of menu icons inside a title bar on hover.
/// @type Color
$titlebar-icon-color-hover: $medium-gray !default;
/// Spacing between the menu icon and text inside a title bar.
/// @type Length
$titlebar-icon-spacing: 0.25rem !default;
@mixin foundation-title-bar {
.title-bar {
background: $titlebar-background;
color: $titlebar-color;
padding: $titlebar-padding;
@if $global-flexbox {
display: flex;
align-items: center;
justify-content: space-between;
}
@else {
@include clearfix;
}
.menu-icon {
margin-#{$global-left}: $titlebar-icon-spacing;
margin-#{$global-right}: $titlebar-icon-spacing;
}
}
@if $global-flexbox {
// scss-lint:disable ZeroUnit
.title-bar-left,
.title-bar-right {
flex: 1 1 0px;
}
.title-bar-right {
text-align: right;
}
}
@else {
.title-bar-left {
float: left;
}
.title-bar-right {
float: right;
text-align: right;
}
}
.title-bar-title {
font-weight: $titlebar-text-font-weight;
vertical-align: middle;
display: inline-block;
}
.menu-icon.dark {
@include hamburger;
}
}

View file

@ -0,0 +1,104 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group tooltip
////
/// Default font weight of the defined term.
/// @type Keyword | Number
$has-tip-font-weight: $global-weight-bold !default;
/// Default border bottom of the defined term.
/// @type List
$has-tip-border-bottom: dotted 1px $dark-gray !default;
/// Default color of the tooltip background.
/// @type Color
$tooltip-background-color: $black !default;
/// Default color of the tooltip font.
/// @type Color
$tooltip-color: $white !default;
/// Default padding of the tooltip background.
/// @type Number
$tooltip-padding: 0.75rem !default;
/// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.
/// @type Number
$tooltip-font-size: $small-font-size !default;
/// Default pip width for tooltips.
/// @type Number
$tooltip-pip-width: 0.75rem !default;
/// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.
/// @type Number
$tooltip-pip-height: $tooltip-pip-width * 0.866 !default;
/// Default radius for tooltips.
/// @type Number
$tooltip-radius: $global-radius !default;
@mixin has-tip {
border-bottom: $has-tip-border-bottom;
font-weight: $has-tip-font-weight;
position: relative;
display: inline-block;
cursor: help;
}
@mixin tooltip {
background-color: $tooltip-background-color;
color: $tooltip-color;
font-size: $tooltip-font-size;
padding: $tooltip-padding;
position: absolute;
z-index: 10;
top: calc(100% + #{$tooltip-pip-height});
max-width: 10rem !important;
border-radius: $tooltip-radius;
&::before {
@include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
bottom: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
&.top::before {
@include css-triangle($tooltip-pip-width, $tooltip-background-color, down);
top: 100%;
bottom: auto;
}
&.left::before {
@include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
bottom: auto;
left: 100%;
top: 50%;
transform: translateY(-50%);
}
&.right::before {
@include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
bottom: auto;
left: auto;
right: 100%;
top: 50%;
transform: translateY(-50%);
}
}
@mixin foundation-tooltip {
.has-tip {
@include has-tip;
}
.tooltip {
@include tooltip;
}
}

View file

@ -0,0 +1,168 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
////
/// @group top-bar
////
/// Padding for the top bar.
/// @type Number
$topbar-padding: 0.5rem !default;
/// Background color for the top bar. This color also cascades to menus within the top bar.
/// @type Color
$topbar-background: $light-gray !default;
/// Background color submenus within the top bar. Usefull if $topbar-background is transparent.
/// @type Color
$topbar-submenu-background: $topbar-background !default;
/// Spacing for the top bar title.
/// @type Number
$topbar-title-spacing: 1rem !default;
/// Maximum width of `<input>` elements inside the top bar.
/// @type Number
$topbar-input-width: 200px !default;
/// Breakpoint at which top bar switches from mobile to desktop view.
/// @type Breakpoint
$topbar-unstack-breakpoint: medium !default;
/// Adds styles for a top bar container.
@mixin top-bar-container {
@if $global-flexbox {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
}
@else {
@include clearfix;
}
padding: $topbar-padding;
&,
ul {
background-color: $topbar-background;
}
// Check if $topbar-background is differnt from $topbar-background-submenu
@if ($topbar-background != $topbar-submenu-background) {
ul ul {
background-color: $topbar-submenu-background;
}
}
// Restrain width of inputs by default to make them easier to arrange
input {
max-width: $topbar-input-width;
margin-#{$global-right}: 1rem;
}
// The above styles shouldn't apply to input group fields
.input-group-field {
width: 100%;
margin-#{$global-right}: 0;
}
// scss-lint:disable QualifyingElement
input.button {
width: auto;
}
}
/// Makes sections of a top bar stack on top of each other.
@mixin top-bar-stacked {
@if $global-flexbox {
flex-wrap: wrap;
// Sub-sections
.top-bar-left,
.top-bar-right {
flex: 0 0 100%;
max-width: 100%;
}
}
@else {
// Sub-sections
.top-bar-left,
.top-bar-right {
width: 100%;
}
}
}
/// Undoes the CSS applied by the `top-bar-stacked()` mixin.
@mixin top-bar-unstack {
@if $global-flexbox {
flex-wrap: nowrap;
// scss-lint:disable ZeroUnit
.top-bar-left,
.top-bar-right {
flex: 1 1 0px;
}
}
@else {
.top-bar-left,
.top-bar-right {
width: auto;
}
}
}
@mixin foundation-top-bar {
// Top bar container
.top-bar {
@include top-bar-container;
// Stack on small screens by default
@include top-bar-stacked;
@include breakpoint($topbar-unstack-breakpoint) {
@include top-bar-unstack;
}
// Generate classes for stacking on each screen size (defined in $breakpoint-classes)
@each $size in $breakpoint-classes {
@if $size != $-zf-zero-breakpoint {
&.stacked-for-#{$size} {
@include breakpoint($size down) {
@include top-bar-stacked;
}
}
}
}
}
// Sub-sections
@if $global-flexbox {
.top-bar-title {
flex: 0 0 auto;
margin-right: $topbar-title-spacing;
}
.top-bar-left,
.top-bar-right {
flex: 0 0 auto;
}
}
@else {
.top-bar-title {
float: left;
margin-right: $topbar-title-spacing;
}
.top-bar-left {
float: left;
}
.top-bar-right {
float: right;
}
}
}

View file

@ -0,0 +1,132 @@
// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
/// Hide an element by default, only displaying it above a certain screen size.
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
@mixin show-for($size) {
$size: map-get($breakpoints, $size);
$size: -zf-bp-to-em($size) - (1 / 16);
@include breakpoint($size down) {
display: none !important;
}
}
/// Hide an element by default, only displaying it within a certain breakpoint.
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
@mixin show-for-only($size) {
$lower-bound-size: map-get($breakpoints, $size);
$upper-bound-size: -zf-map-next($breakpoints, $size);
// more often than not this will be correct, just one time round the loop it won't so set in scope here
$lower-bound: -zf-bp-to-em($lower-bound-size) - (1 / 16);
// test actual lower-bound-size, if 0 set it to 0em
@if strip-unit($lower-bound-size) == 0 {
$lower-bound: -zf-bp-to-em($lower-bound-size);
}
@if $upper-bound-size == null {
@media screen and (max-width: $lower-bound) {
display: none !important;
}
}
@else {
$upper-bound: -zf-bp-to-em($upper-bound-size);
@media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {
display: none !important;
}
}
}
/// Show an element by default, and hide it above a certain screen size.
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
@mixin hide-for($size) {
@include breakpoint($size) {
display: none !important;
}
}
/// Show an element by default, and hide it above a certain screen size.
/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**
@mixin hide-for-only($size) {
@include breakpoint($size only) {
display: none !important;
}
}
@mixin foundation-visibility-classes {
// Basic hiding classes
.hide {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Responsive visibility classes
@each $size in $breakpoint-classes {
@if $size != $-zf-zero-breakpoint {
.hide-for-#{$size} {
@include hide-for($size);
}
.show-for-#{$size} {
@include show-for($size);
}
}
.hide-for-#{$size}-only {
@include hide-for-only($size);
}
.show-for-#{$size}-only {
@include show-for-only($size);
}
}
// Screen reader visibility classes
// Need a "hide-for-sr" class? Add aria-hidden='true' to the element
.show-for-sr,
.show-on-focus {
@include element-invisible;
}
// Only display the element when it's focused
.show-on-focus {
&:active,
&:focus {
@include element-invisible-off;
}
}
// Landscape and portrait visibility
.show-for-landscape,
.hide-for-portrait {
display: block !important;
@include breakpoint(landscape) {
display: block !important;
}
@include breakpoint(portrait) {
display: none !important;
}
}
.hide-for-landscape,
.show-for-portrait {
display: none !important;
@include breakpoint(landscape) {
display: none !important;
}
@include breakpoint(portrait) {
display: block !important;
}
}
}