Initial public release.
This commit is contained in:
174
src/foundation/components/_accordion-menu.scss
Normal file
174
src/foundation/components/_accordion-menu.scss
Normal file
@@ -0,0 +1,174 @@
|
||||
////
|
||||
/// @group accordion-menu
|
||||
////
|
||||
|
||||
/// Sets accordion menu padding.
|
||||
/// @type Number
|
||||
$accordionmenu-padding: $global-menu-padding !default;
|
||||
|
||||
/// Sets accordion menu nested margin
|
||||
/// @type Number
|
||||
$accordionmenu-nested-margin: $global-menu-nested-margin !default;
|
||||
|
||||
/// Sets accordion menu submenu padding.
|
||||
/// @type Number
|
||||
$accordionmenu-submenu-padding: $accordionmenu-padding !default;
|
||||
|
||||
/// 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;
|
||||
|
||||
/// Sets accordion menu item padding.
|
||||
/// @type Color
|
||||
$accordionmenu-item-background: null !default;
|
||||
|
||||
/// Sets accordion menu item border.
|
||||
/// @type Color
|
||||
$accordionmenu-border: null !default;
|
||||
|
||||
/// Sets accordion menu item padding.
|
||||
/// @type Color
|
||||
$accordionmenu-submenu-toggle-background: null !default;
|
||||
|
||||
/// Sets accordion menu item padding.
|
||||
/// @type List
|
||||
$accordion-submenu-toggle-border: $accordionmenu-border !default;
|
||||
|
||||
/// Sets accordion menu submenu toggle background width.
|
||||
/// @type Number
|
||||
$accordionmenu-submenu-toggle-width: 40px !default;
|
||||
|
||||
/// Sets accordion menu submenu toggle background height.
|
||||
/// @type Number
|
||||
$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width !default;
|
||||
|
||||
/// Sets accordion menu arrow size if arrow is used.
|
||||
/// @type Length
|
||||
$accordionmenu-arrow-size: 6px !default;
|
||||
|
||||
@mixin zf-accordion-menu-left-right-arrows {
|
||||
.is-accordion-submenu-parent:not(.has-submenu-toggle) > a {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@include css-triangle($accordionmenu-arrow-size, $accordionmenu-arrow-color, down);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -1 * ($accordionmenu-arrow-size / 2);
|
||||
#{$global-right}: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.align-left .is-accordion-submenu-parent > a::after {
|
||||
right: 1rem;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
&.align-right .is-accordion-submenu-parent > a::after {
|
||||
right: auto;
|
||||
left: 1rem;
|
||||
}
|
||||
}
|
||||
@mixin foundation-accordion-menu {
|
||||
|
||||
.accordion-menu {
|
||||
@if $accordionmenu-border {
|
||||
border-bottom: $accordionmenu-border;
|
||||
}
|
||||
|
||||
li {
|
||||
@if $accordionmenu-border {
|
||||
border-top: $accordionmenu-border;
|
||||
border-right: $accordionmenu-border;
|
||||
border-left: $accordionmenu-border;
|
||||
}
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
@if $accordionmenu-item-background {
|
||||
background: $accordionmenu-item-background;
|
||||
}
|
||||
padding: $accordionmenu-padding;
|
||||
}
|
||||
|
||||
.is-accordion-submenu a {
|
||||
padding: $accordionmenu-submenu-padding;
|
||||
}
|
||||
|
||||
.nested.is-accordion-submenu {
|
||||
@include menu-nested($accordionmenu-nested-margin);
|
||||
}
|
||||
|
||||
&.align-#{$global-right} {
|
||||
.nested.is-accordion-submenu {
|
||||
@include menu-nested($accordionmenu-nested-margin, right);
|
||||
}
|
||||
}
|
||||
|
||||
@if $accordionmenu-arrows {
|
||||
@include zf-accordion-menu-left-right-arrows;
|
||||
|
||||
.is-accordion-submenu-parent[aria-expanded='true'] > a::after {
|
||||
transform: rotate(180deg);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-accordion-submenu li {
|
||||
@if $accordionmenu-border {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.is-accordion-submenu-parent {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.has-submenu-toggle > a {
|
||||
margin-#{$global-right}: $accordionmenu-submenu-toggle-width;
|
||||
}
|
||||
|
||||
// Submenu toggle
|
||||
.submenu-toggle {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$global-right}: 0;
|
||||
|
||||
width: $accordionmenu-submenu-toggle-width;
|
||||
height: $accordionmenu-submenu-toggle-height;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
border-#{$global-left}: $accordion-submenu-toggle-border;
|
||||
|
||||
@if $accordionmenu-submenu-toggle-background {
|
||||
background: $accordionmenu-submenu-toggle-background;
|
||||
}
|
||||
|
||||
// Add the arrow to the toggle
|
||||
&::after {
|
||||
@include css-triangle(6px, $accordionmenu-arrow-color, down);
|
||||
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Rotate the arrow when menu is open
|
||||
.submenu-toggle[aria-expanded='true']::after {
|
||||
transform: scaleY(-1);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
.submenu-toggle-text {
|
||||
@include element-invisible;
|
||||
}
|
||||
}
|
||||
164
src/foundation/components/_accordion.scss
Normal file
164
src/foundation/components/_accordion.scss
Normal file
@@ -0,0 +1,164 @@
|
||||
// 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;
|
||||
|
||||
/// Content for the plus icon when `$accordion-plusminus` is `true`
|
||||
/// @type String
|
||||
$accordion-plus-content: '\002B' !default;
|
||||
|
||||
/// Content for the minus icon when `$accordion-plusminus` is `true`
|
||||
/// @type String
|
||||
$accordion-minus-content: '\2013' !default;
|
||||
|
||||
/// Font size of accordion titles.
|
||||
/// @type Number
|
||||
$accordion-title-font-size: rem-calc(12) !default;
|
||||
|
||||
/// Default text color for items in a Menu.
|
||||
/// @type Color
|
||||
$accordion-item-color: $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: $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 (
|
||||
$background: $accordion-background
|
||||
) {
|
||||
margin-#{$global-left}: 0;
|
||||
background: $background;
|
||||
list-style-type: none;
|
||||
|
||||
&[disabled] {
|
||||
.accordion-title {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// 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 (
|
||||
$padding: $accordion-item-padding,
|
||||
$font-size: $accordion-title-font-size,
|
||||
$color: $accordion-item-color,
|
||||
$border: $accordion-content-border,
|
||||
$background-hover: $accordion-item-background-hover
|
||||
) {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: $padding;
|
||||
|
||||
border: $border;
|
||||
border-bottom: 0;
|
||||
|
||||
font-size: $font-size;
|
||||
line-height: 1;
|
||||
color: $color;
|
||||
|
||||
:last-child:not(.is-active) > & {
|
||||
border-bottom: $border;
|
||||
border-radius: 0 0 $global-radius $global-radius;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $background-hover;
|
||||
}
|
||||
|
||||
@if $accordion-plusminus {
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
#{$global-right}: 1rem;
|
||||
margin-top: -0.5rem;
|
||||
content: $accordion-plus-content;
|
||||
}
|
||||
|
||||
.is-active > &::before {
|
||||
content: $accordion-minus-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,
|
||||
$border: $accordion-content-border,
|
||||
$background: $accordion-content-background,
|
||||
$color: $accordion-content-color
|
||||
) {
|
||||
display: none;
|
||||
padding: $padding;
|
||||
|
||||
border: $border;
|
||||
border-bottom: 0;
|
||||
background-color: $background;
|
||||
|
||||
color: $color;
|
||||
|
||||
:last-child > &:last-child {
|
||||
border-bottom: $border;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin foundation-accordion {
|
||||
.accordion {
|
||||
@include accordion-container;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
@include accordion-item;
|
||||
}
|
||||
|
||||
.accordion-title {
|
||||
@include accordion-title;
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
@include accordion-content;
|
||||
}
|
||||
}
|
||||
63
src/foundation/components/_badge.scss
Normal file
63
src/foundation/components/_badge.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
// 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: $white !default;
|
||||
|
||||
/// Alternate text color for badges.
|
||||
/// @type Color
|
||||
$badge-color-alt: $black !default;
|
||||
|
||||
/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
|
||||
/// @type Map
|
||||
$badge-palette: $foundation-palette !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;
|
||||
min-width: $badge-minwidth;
|
||||
padding: $badge-padding;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
font-size: $badge-font-size;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@mixin foundation-badge {
|
||||
.badge {
|
||||
@include badge;
|
||||
|
||||
background: $badge-background;
|
||||
color: $badge-color;
|
||||
|
||||
@each $name, $color in $badge-palette {
|
||||
&.#{$name} {
|
||||
background: $color;
|
||||
color: color-pick-contrast($color, ($badge-color, $badge-color-alt));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
119
src/foundation/components/_breadcrumbs.scss
Normal file
119
src/foundation/components/_breadcrumbs.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
// 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 seperator between breadcrumb links.
|
||||
/// @type Boolean
|
||||
$breadcrumbs-item-separator: true !default;
|
||||
|
||||
// If it exists $breadcrumbs-item-slash is used to build $breadcrumbs-item-separator. See the documentation.
|
||||
@if variable-exists(breadcrumbs-item-slash) {
|
||||
$breadcrumbs-item-separator: $breadcrumbs-item-slash;
|
||||
}
|
||||
|
||||
/// Used character for the breadcrumb separator.
|
||||
/// @type Content
|
||||
$breadcrumbs-item-separator-item: '/' !default;
|
||||
|
||||
/// Used character for the breadcrumb separator in rtl mode.
|
||||
/// @type Content
|
||||
$breadcrumbs-item-separator-item-rtl: '\\' !default;
|
||||
|
||||
/// Color of breadcrumb item.
|
||||
/// @type Color
|
||||
$breadcrumbs-item-separator-color: $medium-gray !default;
|
||||
|
||||
// If it exists $breadcrumbs-item-slash-color is used to build $breadcrumbs-item-separator-color. See the documentation.
|
||||
@if variable-exists(breadcrumbs-item-slash-color) {
|
||||
$breadcrumbs-item-separator-color: $breadcrumbs-item-slash-color;
|
||||
}
|
||||
|
||||
/// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
|
||||
@mixin breadcrumbs-container {
|
||||
@include clearfix;
|
||||
margin: $breadcrumbs-margin;
|
||||
list-style: none;
|
||||
|
||||
// Item wrapper
|
||||
li {
|
||||
float: #{$global-left};
|
||||
|
||||
font-size: $breadcrumbs-item-font-size;
|
||||
color: $breadcrumbs-item-color-current;
|
||||
cursor: default;
|
||||
|
||||
@if $breadcrumbs-item-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@if $breadcrumbs-item-separator {
|
||||
// Need to escape the backslash
|
||||
$separator: if($global-text-direction == 'ltr', $breadcrumbs-item-separator-item, $breadcrumbs-item-separator-item-rtl);
|
||||
|
||||
&:not(:last-child) {
|
||||
&::after {
|
||||
position: relative;
|
||||
margin: 0 $breadcrumbs-item-margin;
|
||||
opacity: 1;
|
||||
content: $separator;
|
||||
color: $breadcrumbs-item-separator-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
299
src/foundation/components/_button-group.scss
Normal file
299
src/foundation/components/_button-group.scss
Normal file
@@ -0,0 +1,299 @@
|
||||
// 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 Number
|
||||
$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. (Only needed when $global-flexbox: false;)
|
||||
/// @type Number
|
||||
$buttongroup-expand-max: 6 !default;
|
||||
|
||||
/// Determines if $button-radius is applied to each button or the button group as a whole. Use $global-radius in _settings.scss to change radius.
|
||||
/// @type Boolean
|
||||
$buttongroup-radius-on-each: true !default;
|
||||
|
||||
/// Add styles for a button group container.
|
||||
/// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
|
||||
/// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.
|
||||
@mixin button-group(
|
||||
$child-selector: $buttongroup-child-selector,
|
||||
$spacing: $buttongroup-spacing
|
||||
) {
|
||||
@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}: $spacing;
|
||||
margin-bottom: $spacing;
|
||||
font-size: map-get($button-sizes, default);
|
||||
|
||||
@if $global-flexbox {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-#{$global-right}: 0;
|
||||
}
|
||||
|
||||
@if not $buttongroup-radius-on-each {
|
||||
border-radius: 0;
|
||||
|
||||
&:first-child {
|
||||
border-top-#{$global-left}-radius: $button-radius;
|
||||
border-bottom-#{$global-left}-radius: $button-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-#{$global-right}-radius: $button-radius;
|
||||
border-bottom-#{$global-right}-radius: $button-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Make buttons bonded without gap between them. Borders between buttons are merged
|
||||
/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.
|
||||
@mixin button-group-no-gaps(
|
||||
$selector: $buttongroup-child-selector,
|
||||
$border-width: $button-hollow-border-width
|
||||
) {
|
||||
#{$selector} {
|
||||
margin-#{$global-right}: rem-calc(-$border-width);
|
||||
|
||||
+ #{$selector} {
|
||||
border-#{$global-left}-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// 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.
|
||||
/// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.
|
||||
@mixin button-group-expand(
|
||||
$selector: $buttongroup-child-selector,
|
||||
$spacing: $buttongroup-spacing,
|
||||
$count: null
|
||||
) {
|
||||
@if not $global-flexbox {
|
||||
margin-#{$global-right}: -$spacing;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#{$selector} {
|
||||
@if $global-flexbox {
|
||||
flex: 1 1 0px; // sass-lint:disable-line zero-unit
|
||||
}
|
||||
@else {
|
||||
// One child
|
||||
&:first-child {
|
||||
&:last-child {
|
||||
width: calc(100% - #{$spacing});
|
||||
}
|
||||
}
|
||||
|
||||
// Two or more childreen
|
||||
@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)} - #{$spacing});
|
||||
margin-#{$global-right}: $spacing;
|
||||
|
||||
&:last-child {
|
||||
margin-#{$global-right}: $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;
|
||||
}
|
||||
|
||||
|
||||
@if not $buttongroup-radius-on-each {
|
||||
border-radius: 0;
|
||||
|
||||
&:first-child {
|
||||
border-top-#{$global-left}-radius: $global-radius;
|
||||
border-top-#{$global-right}-radius: $global-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom-#{$global-left}-radius: $global-radius;
|
||||
border-bottom-#{$global-right}-radius: $global-radius;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/// 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
|
||||
) {
|
||||
#{$selector} {
|
||||
@if $global-flexbox {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
@else {
|
||||
width: auto;
|
||||
}
|
||||
margin-bottom: 0;
|
||||
|
||||
@if not $buttongroup-radius-on-each {
|
||||
&:first-child {
|
||||
border-top-#{$global-left}-radius: $global-radius;
|
||||
border-top-#{$global-right}-radius: 0;
|
||||
border-bottom-#{$global-left}-radius: $global-radius;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-#{$global-right}-radius: $global-radius;
|
||||
border-bottom-#{$global-right}-radius: $global-radius;
|
||||
border-bottom-#{$global-left}-radius: 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;
|
||||
}
|
||||
|
||||
// Solid, hollow & clear styles
|
||||
@each $filling in (solid hollow clear) {
|
||||
$base-selector: if($button-fill == $filling, null, '.#{$filling}');
|
||||
|
||||
&#{$base-selector} {
|
||||
// Do not generate button base styles for the default filling
|
||||
@if($button-fill != $filling) {
|
||||
#{$buttongroup-child-selector} {
|
||||
@include button-fill($filling);
|
||||
@include button-fill-style($filling);
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $button-palette {
|
||||
$individual-selector: if($button-fill == $filling, null, ' #{$buttongroup-child-selector}.#{$name}');
|
||||
|
||||
&.#{$name} #{$buttongroup-child-selector}, #{$individual-selector} {
|
||||
@include button-fill-style($filling, $color, auto, auto);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.no-gaps {
|
||||
@include button-group-no-gaps;
|
||||
}
|
||||
|
||||
&.stacked,
|
||||
&.stacked-for-small,
|
||||
&.stacked-for-medium {
|
||||
@include button-group-stack;
|
||||
|
||||
&.expanded {
|
||||
@include button-group-expand;
|
||||
}
|
||||
}
|
||||
|
||||
&.stacked-for-small {
|
||||
@include breakpoint(medium) {
|
||||
@include button-group-unstack;
|
||||
}
|
||||
}
|
||||
|
||||
&.stacked-for-medium {
|
||||
@include breakpoint(large) {
|
||||
@include button-group-unstack;
|
||||
}
|
||||
}
|
||||
|
||||
&.stacked-for-small.expanded {
|
||||
@include breakpoint(small only) {
|
||||
display: block;
|
||||
|
||||
#{$buttongroup-child-selector} {
|
||||
display: block;
|
||||
margin-#{$global-right}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.stacked-for-medium.expanded {
|
||||
@include breakpoint(medium down) {
|
||||
display: block;
|
||||
|
||||
#{$buttongroup-child-selector} {
|
||||
display: block;
|
||||
margin-#{$global-right}: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
428
src/foundation/components/_button.scss
Normal file
428
src/foundation/components/_button.scss
Normal file
@@ -0,0 +1,428 @@
|
||||
// Foundation for Sites by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
////
|
||||
/// @group button
|
||||
////
|
||||
|
||||
/// Font family for button elements.
|
||||
/// @type Font
|
||||
$button-font-family: inherit !default;
|
||||
|
||||
/// Font weight for button elements.
|
||||
/// Ignored if null (default)
|
||||
/// @type Font-Weight
|
||||
$button-font-weight: null !default;
|
||||
|
||||
/// 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;
|
||||
|
||||
/// Alternative font color for buttons.
|
||||
/// @type List
|
||||
$button-color-alt: $black !default;
|
||||
|
||||
/// Border radius for buttons, defaulted to global-radius.
|
||||
/// @type Number
|
||||
$button-radius: $global-radius !default;
|
||||
|
||||
/// Border for buttons, transparent by default
|
||||
/// @type List
|
||||
$button-border: 1px solid transparent !default;
|
||||
|
||||
/// Border width for hollow outline buttons
|
||||
/// @type Number
|
||||
$button-hollow-border-width: 1px !default;
|
||||
|
||||
/// Sizes for buttons.
|
||||
/// @type Map
|
||||
$button-sizes: (
|
||||
tiny: 0.6rem,
|
||||
small: 0.75rem,
|
||||
default: 0.9rem,
|
||||
large: 1.25rem,
|
||||
) !default;
|
||||
|
||||
/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
|
||||
/// @type Map
|
||||
$button-palette: $foundation-palette !default;
|
||||
|
||||
/// opacity for a disabled button.
|
||||
/// @type List
|
||||
$button-opacity-disabled: 0.25 !default;
|
||||
|
||||
/// Background color lightness on hover for buttons.
|
||||
/// @type Number
|
||||
$button-background-hover-lightness: -20% !default;
|
||||
|
||||
/// Color lightness on hover for hollow buttons.
|
||||
/// @type Number
|
||||
$button-hollow-hover-lightness: -50% !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;
|
||||
}
|
||||
|
||||
/// transitions for buttons.
|
||||
/// @type List
|
||||
$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;
|
||||
|
||||
/// Additional responsive classes for .expanded
|
||||
/// @type Boolean
|
||||
$button-responsive-expanded: false !default;
|
||||
|
||||
// TODO: Document button-base() mixin
|
||||
@mixin button-base {
|
||||
@include disable-mouse-outline;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: $button-margin;
|
||||
|
||||
@if (type-of($button-padding) == 'map') {
|
||||
@each $size, $padding in $button-padding {
|
||||
@include breakpoint($size) {
|
||||
padding: $padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
padding: $button-padding;
|
||||
}
|
||||
|
||||
border: $button-border;
|
||||
border-radius: $button-radius;
|
||||
transition: $button-transition;
|
||||
font-family: $button-font-family;
|
||||
font-size: map-get($button-sizes, default);
|
||||
font-weight: $button-font-weight;
|
||||
-webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/// 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-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
@else {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin: $button-margin;
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets the base styles of a hollow or clear button filling according to `$fill`.
|
||||
/// See mixin `button-fill-style` for the filling styles.
|
||||
/// @param {Keyword} $fill [$button-fill] - Type of filling between `hollow` and `clear`. `solid` has no effects.
|
||||
@mixin button-fill(
|
||||
$fill: $button-fill
|
||||
) {
|
||||
@if $fill == hollow {
|
||||
@include button-hollow;
|
||||
}
|
||||
@else if $fill == clear {
|
||||
@include button-clear;
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets the visual styles of a solid/hollow/clear button filling according to `$fill`.
|
||||
/// See mixins `button-style`, `button-hollow-style` and `button-clear-style` for effects of visual styling parameters.
|
||||
/// @param {Keyword} $fill [$button-fill] - Type of filling between `hollow` and `clear`.
|
||||
/// @param {Color} $background [$button-background] - -
|
||||
/// @param {Color} $background-hover [$button-background-hover] - -
|
||||
/// @param {Color} $color [$button-color] - -
|
||||
@mixin button-fill-style(
|
||||
$fill: $button-fill,
|
||||
$background: $button-background,
|
||||
$background-hover: $button-background-hover,
|
||||
$color: $button-color
|
||||
) {
|
||||
@if $fill == solid {
|
||||
@include button-style($background, $background-hover, $color);
|
||||
}
|
||||
@else if $fill == hollow {
|
||||
@include button-hollow-style($background);
|
||||
}
|
||||
@else if $fill == clear {
|
||||
@include button-clear-style($background);
|
||||
}
|
||||
}
|
||||
|
||||
/// 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,
|
||||
$background-hover-lightness: $button-background-hover-lightness
|
||||
) {
|
||||
@if $color == auto {
|
||||
$color: color-pick-contrast($background, ($button-color, $button-color-alt));
|
||||
}
|
||||
|
||||
@if $background-hover == auto {
|
||||
$background-hover: scale-color($background, $lightness: $background-hover-lightness);
|
||||
}
|
||||
|
||||
// Default and disabled states
|
||||
&,
|
||||
&.disabled, &[disabled],
|
||||
&.disabled:hover, &[disabled]:hover,
|
||||
&.disabled:focus, &[disabled]:focus {
|
||||
background-color: $background;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
background-color: $background-hover;
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets the base styles of a hollow button.
|
||||
/// See mixin `button-hollow-style` for the filling styles.
|
||||
@mixin button-hollow {
|
||||
&, &.disabled, &[disabled] {
|
||||
&, &:hover, &:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets the visual style of a hollow button.
|
||||
/// @param {Color} $color [$button-background] - Text and border color of the button.
|
||||
/// @param {Color} $hover-lightness [$button-hollow-hover-lightness] - Color lightness on hover.
|
||||
/// @param {Color} $border-width [$button-hollow-border-width] - Border width of the button.
|
||||
@mixin button-hollow-style(
|
||||
$color: $button-background,
|
||||
$hover-lightness: $button-hollow-hover-lightness,
|
||||
$border-width: $button-hollow-border-width
|
||||
) {
|
||||
$color-hover: scale-color($color, $lightness: $hover-lightness);
|
||||
|
||||
// Default and disabled states
|
||||
&,
|
||||
&.disabled, &[disabled],
|
||||
&.disabled:hover, &[disabled]:hover,
|
||||
&.disabled:focus, &[disabled]:focus {
|
||||
border: $border-width solid $color;
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
border-color: $color-hover;
|
||||
color: $color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets the base styles of a clear button.
|
||||
/// See mixin `button-clear-style` for the filling styles.
|
||||
@mixin button-clear {
|
||||
&, &.disabled, &[disabled] {
|
||||
&, &:hover, &:focus {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets the visual style of a clear button.
|
||||
/// @param {Color} $color [$button-background] - Text color of the button.
|
||||
/// @param {Color} $hover-lightness [$button-hollow-hover-lightness] - Color lightness on hover.
|
||||
@mixin button-clear-style(
|
||||
$color: $button-background,
|
||||
$hover-lightness: $button-hollow-hover-lightness
|
||||
) {
|
||||
$color-hover: scale-color($color, $lightness: $hover-lightness);
|
||||
|
||||
// Default and disabled states
|
||||
&,
|
||||
&.disabled, &[disabled],
|
||||
&.disabled:hover, &[disabled]:hover,
|
||||
&.disabled:focus, &[disabled]:focus {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
/// Adds disabled styles to a button by fading the element and reseting the cursor.
|
||||
/// @param {Number} $opacity [$button-opacity-disabled] - Opacity of the disabled button.
|
||||
@mixin button-disabled(
|
||||
$opacity: $button-opacity-disabled
|
||||
) {
|
||||
opacity: $button-opacity-disabled;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/// 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
|
||||
|
||||
display: inline-block;
|
||||
float: #{$global-right};
|
||||
margin-#{$global-left}: $offset;
|
||||
}
|
||||
}
|
||||
|
||||
/// 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;
|
||||
@include button-fill($style);
|
||||
@include button-fill-style($style, $background, $background-hover, $color);
|
||||
|
||||
@if $expand {
|
||||
@include button-expand;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin foundation-button {
|
||||
.button {
|
||||
@include button($style: none);
|
||||
|
||||
// Sizes
|
||||
@each $size, $value in map-remove($button-sizes, default) {
|
||||
&.#{$size} {
|
||||
font-size: $value;
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded { @include button-expand; }
|
||||
|
||||
@if $button-responsive-expanded {
|
||||
@each $size in $breakpoint-classes {
|
||||
@include breakpoint(#{$size} only) {
|
||||
&.#{$size}-only-expanded {
|
||||
@include button-expand;
|
||||
}
|
||||
}
|
||||
@if $size != $-zf-zero-breakpoint {
|
||||
@include breakpoint(#{$size} down) {
|
||||
&.#{$size}-down-expanded {
|
||||
@include button-expand;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(#{$size}) {
|
||||
&.#{$size}-expanded {
|
||||
@include button-expand;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Solid, hollow & clear styles
|
||||
@each $filling in (solid hollow clear) {
|
||||
$selector: if($button-fill == $filling, null, '.#{$filling}');
|
||||
|
||||
&#{$selector} {
|
||||
@include button-fill($filling);
|
||||
@include button-fill-style($filling);
|
||||
|
||||
@each $name, $color in $button-palette {
|
||||
&.#{$name} {
|
||||
@include button-fill-style($filling, $color, auto, auto);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&.disabled, &[disabled] {
|
||||
@include button-disabled;
|
||||
}
|
||||
|
||||
// Dropdown arrow
|
||||
&.dropdown {
|
||||
@include button-dropdown;
|
||||
|
||||
@if $button-fill == hollow {
|
||||
&::after {
|
||||
border-top-color: $button-background;
|
||||
}
|
||||
}
|
||||
|
||||
&.hollow, &.clear {
|
||||
&::after {
|
||||
border-top-color: $button-background;
|
||||
}
|
||||
|
||||
@each $name, $color in $button-palette {
|
||||
&.#{$name} {
|
||||
&::after {
|
||||
border-top-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button with dropdown arrow only
|
||||
&.arrow-only::after {
|
||||
top: -0.1em;
|
||||
float: none;
|
||||
margin-#{$global-left}: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a.button { // sass-lint:disable-line no-qualifying-elements
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
108
src/foundation/components/_callout.scss
Normal file
108
src/foundation/components/_callout.scss
Normal file
@@ -0,0 +1,108 @@
|
||||
// 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;
|
||||
|
||||
/// Sizes for Callout paddings.
|
||||
/// @type Map
|
||||
$callout-sizes: (
|
||||
small: 0.5rem,
|
||||
default: 1rem,
|
||||
large: 3rem,
|
||||
) !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() {
|
||||
position: relative;
|
||||
margin: $callout-margin;
|
||||
padding: map-get($callout-sizes, default);
|
||||
|
||||
border: $callout-border;
|
||||
border-radius: $callout-radius;
|
||||
|
||||
// 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;
|
||||
color: color-pick-contrast($background, ($callout-font-color, $callout-font-color-alt));
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
@each $size, $padding in map-remove($callout-sizes, default) {
|
||||
&.#{$size} {
|
||||
@include callout-size($padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
129
src/foundation/components/_card.scss
Normal file
129
src/foundation/components/_card.scss
Normal file
@@ -0,0 +1,129 @@
|
||||
// Foundation for Sites by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
////
|
||||
/// @group card
|
||||
////
|
||||
|
||||
/// Default background color.
|
||||
/// @type Color
|
||||
$card-background: $white !default;
|
||||
|
||||
/// Default font color for cards.
|
||||
/// @type Color
|
||||
$card-font-color: $body-font-color !default;
|
||||
|
||||
/// Default background.
|
||||
/// @type Color
|
||||
$card-divider-background: $light-gray !default;
|
||||
|
||||
/// Default border style.
|
||||
/// @type List
|
||||
$card-border: 1px solid $light-gray !default;
|
||||
|
||||
/// Default card shadow.
|
||||
/// @type List
|
||||
$card-shadow: none !default;
|
||||
|
||||
/// Default border radius.
|
||||
/// @type List
|
||||
$card-border-radius: $global-radius !default;
|
||||
|
||||
/// Default padding.
|
||||
/// @type Number
|
||||
$card-padding: $global-padding !default;
|
||||
|
||||
/// Default bottom margin.
|
||||
/// @type number
|
||||
$card-margin-bottom: $global-margin !default;
|
||||
|
||||
/// Adds styles for a card container.
|
||||
/// @param {Color} $background - Background color of the card.
|
||||
/// @param {Color} $color - font color of the card.
|
||||
/// @param {Number} $margin - Bottom margin of the card.
|
||||
/// @param {List} $border - Border around the card.
|
||||
/// @param {List} $radius - border radius of the card.
|
||||
/// @param {List} $shadow - box shadow of the card.
|
||||
@mixin card-container(
|
||||
$background: $card-background,
|
||||
$color: $card-font-color,
|
||||
$margin: $card-margin-bottom,
|
||||
$border: $card-border,
|
||||
$radius: $card-border-radius,
|
||||
$shadow: $card-shadow
|
||||
) {
|
||||
@if $global-flexbox {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
margin-bottom: $margin;
|
||||
|
||||
border: $border;
|
||||
border-radius: $radius;
|
||||
|
||||
background: $background;
|
||||
box-shadow: $shadow;
|
||||
|
||||
overflow: hidden;
|
||||
color: $color;
|
||||
|
||||
& > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/// Adds styles for a card divider.
|
||||
@mixin card-divider(
|
||||
$background: $card-divider-background,
|
||||
$padding: $card-padding
|
||||
) {
|
||||
@if $global-flexbox {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
padding: $padding;
|
||||
background: $background;
|
||||
|
||||
& > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/// Adds styles for a card section.
|
||||
@mixin card-section(
|
||||
$padding: $card-padding
|
||||
) {
|
||||
@if $global-flexbox {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
padding: $padding;
|
||||
|
||||
& > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin foundation-card {
|
||||
.card {
|
||||
@include card-container;
|
||||
}
|
||||
|
||||
.card-divider {
|
||||
@include card-divider;
|
||||
}
|
||||
|
||||
.card-section {
|
||||
@include card-section;
|
||||
}
|
||||
|
||||
// For IE 11 - Flexbug
|
||||
// https://github.com/philipwalton/flexbugs/issues/75
|
||||
.card-image {
|
||||
min-height: 1px;
|
||||
}
|
||||
}
|
||||
127
src/foundation/components/_close-button.scss
Normal file
127
src/foundation/components/_close-button.scss
Normal file
@@ -0,0 +1,127 @@
|
||||
// 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;
|
||||
|
||||
/// Default z-index for a close button.
|
||||
/// @type Number
|
||||
$closebutton-z-index: 10 !default;
|
||||
|
||||
/// Button size to use as default
|
||||
/// @type String
|
||||
/// @see $closebutton-size
|
||||
/// @see $closebutton-offset-horizontal
|
||||
/// @see $closebutton-offset-vertical
|
||||
$closebutton-default-size: medium !default;
|
||||
|
||||
/// Right (or left) offset(s) for a close button.
|
||||
/// @type Number|Map
|
||||
$closebutton-offset-horizontal: (
|
||||
small: 0.66rem,
|
||||
medium: 1rem,
|
||||
) !default;
|
||||
|
||||
/// Top (or bottom) offset(s) for a close button.
|
||||
/// @type Number|Map
|
||||
$closebutton-offset-vertical: (
|
||||
small: 0.33em,
|
||||
medium: 0.5rem,
|
||||
) !default;
|
||||
|
||||
/// Size(s) of the close button. Used to generate sizing modifiers.
|
||||
/// @type Number|Map
|
||||
$closebutton-size: (
|
||||
small: 1.5em,
|
||||
medium: 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;
|
||||
|
||||
|
||||
/// Get the size and position for a close button. If the input value is a number, the number is returned. If the input value is a config map and the map has the key `$size`, the value is returned.
|
||||
///
|
||||
/// @param {Number|Map} $value - A number or map that represents the size or position value(s) of the close button.
|
||||
/// @param {Keyword} $size - The size of the close button to use.
|
||||
///
|
||||
/// @return {Number} The given number or the value found in the map.
|
||||
@function -zf-get-size-val($value, $size) {
|
||||
// Check if the value is a number
|
||||
@if type-of($value) == 'number' {
|
||||
// If it is, just return the number
|
||||
@return $value;
|
||||
}
|
||||
|
||||
// Check if the size name exists in the value map
|
||||
@else if map-has-key($value, $size) {
|
||||
// If it does, return the value
|
||||
@return map-get($value, $size);
|
||||
}
|
||||
}
|
||||
|
||||
/// Sets the size and position of a close button.
|
||||
/// @param {Keyword} $size [medium] - The size to use. Set to `small` to create a small close button. The 'medium' values defined in `$closebutton-*` variables will be used as the default size and position of the close button.
|
||||
@mixin close-button-size($size) {
|
||||
$x: nth($closebutton-position, 1);
|
||||
$y: nth($closebutton-position, 2);
|
||||
|
||||
#{$x}: -zf-get-size-val($closebutton-offset-horizontal, $size);
|
||||
#{$y}: -zf-get-size-val($closebutton-offset-vertical, $size);
|
||||
font-size: -zf-get-size-val($closebutton-size, $size);
|
||||
line-height: -zf-get-size-val($closebutton-lineheight, $size);
|
||||
}
|
||||
|
||||
/// 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;
|
||||
z-index: $closebutton-z-index;
|
||||
color: $closebutton-color;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $closebutton-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin foundation-close-button {
|
||||
.close-button {
|
||||
@include close-button;
|
||||
|
||||
// Generate a placeholder and a class for each size
|
||||
@each $name, $size in $closebutton-size {
|
||||
@at-root {
|
||||
%zf-close-button--#{$name} {
|
||||
@include close-button-size($name);
|
||||
}
|
||||
}
|
||||
|
||||
&.#{$name} {
|
||||
@extend %zf-close-button--#{$name};
|
||||
}
|
||||
}
|
||||
|
||||
// Use by default the placeholder of the default size
|
||||
@extend %zf-close-button--#{$closebutton-default-size};
|
||||
}
|
||||
}
|
||||
140
src/foundation/components/_drilldown.scss
Normal file
140
src/foundation/components/_drilldown.scss
Normal file
@@ -0,0 +1,140 @@
|
||||
// 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 menu item padding.
|
||||
/// @type Number
|
||||
$drilldown-padding: $global-menu-padding !default;
|
||||
|
||||
/// Sets drilldown menu nested margin
|
||||
/// @type Number
|
||||
$drilldown-nested-margin: 0 !default;
|
||||
|
||||
/// Background color for drilldown top level items.
|
||||
/// @type Color
|
||||
$drilldown-background: $white !default;
|
||||
|
||||
/// Sets drilldown menu item padding in the submenu.
|
||||
/// @type Number
|
||||
$drilldown-submenu-padding: $drilldown-padding !default;
|
||||
|
||||
/// Background color for drilldown submenus.
|
||||
/// @type Color
|
||||
$drilldown-submenu-background: $white !default;
|
||||
|
||||
/// Sets drilldown arrow color if arrow is used.
|
||||
/// @type Color
|
||||
$drilldown-arrow-color: $primary-color !default;
|
||||
|
||||
/// Sets drilldown arrow size if arrow is used.
|
||||
/// @type Length
|
||||
$drilldown-arrow-size: 6px !default;
|
||||
|
||||
@mixin zf-drilldown-left-right-arrows {
|
||||
.is-drilldown-submenu-parent > a {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
@include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-right);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -1 * $drilldown-arrow-size;
|
||||
#{$global-right}: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.align-left .is-drilldown-submenu-parent > a::after {
|
||||
@include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
|
||||
right: 1rem;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
&.align-right .is-drilldown-submenu-parent > a::after {
|
||||
@include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
|
||||
right: auto;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin foundation-drilldown-menu {
|
||||
// Applied to the Menu container
|
||||
.is-drilldown {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.animate-height {
|
||||
transition: height 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
// The top level <ul>
|
||||
.drilldown {
|
||||
a {
|
||||
padding: $drilldown-padding;
|
||||
background: $drilldown-background;
|
||||
}
|
||||
|
||||
// Applied to submenu <ul>s
|
||||
.is-drilldown-submenu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$global-left}: 100%;
|
||||
z-index: -1;
|
||||
|
||||
width: 100%;
|
||||
background: $drilldown-submenu-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%));
|
||||
}
|
||||
|
||||
// Submenu item padding
|
||||
a {
|
||||
padding: $drilldown-submenu-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.nested.is-drilldown-submenu {
|
||||
@include menu-nested($drilldown-nested-margin);
|
||||
}
|
||||
|
||||
.drilldown-submenu-cover-previous {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
@if $drilldown-arrows {
|
||||
@include zf-drilldown-left-right-arrows;
|
||||
|
||||
.js-drilldown-back > a::before {
|
||||
@include css-triangle($drilldown-arrow-size, $drilldown-arrow-color, $global-left);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-#{$global-right}: 0.75rem; // Creates space between the arrow and the text
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
279
src/foundation/components/_dropdown-menu.scss
Normal file
279
src/foundation/components/_dropdown-menu.scss
Normal file
@@ -0,0 +1,279 @@
|
||||
// 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;
|
||||
|
||||
/// Sets dropdown menu arrow size if arrow is used.
|
||||
/// @type Length
|
||||
$dropdownmenu-arrow-size: 6px !default;
|
||||
|
||||
/// Sets dropdown menu arrow padding for aligning the arrow correctly.
|
||||
/// @type Length
|
||||
$dropdownmenu-arrow-padding: 1.5rem !default;
|
||||
|
||||
/// Minimum width of dropdown sub-menus.
|
||||
/// @type Length
|
||||
$dropdownmenu-min-width: 200px !default;
|
||||
|
||||
/// Background color for top level items.
|
||||
/// @type Color
|
||||
$dropdownmenu-background: null !default;
|
||||
|
||||
/// Background color for dropdowns.
|
||||
/// @type Color
|
||||
$dropdownmenu-submenu-background: $white !default;
|
||||
|
||||
/// Padding for top level items.
|
||||
/// @type Number
|
||||
$dropdownmenu-padding: $global-menu-padding !default;
|
||||
|
||||
/// Sets dropdown menu nested margin
|
||||
/// @type Number
|
||||
$dropdownmenu-nested-margin: 0 !default;
|
||||
|
||||
/// Padding for sub-menu items.
|
||||
/// @type Number
|
||||
$dropdownmenu-submenu-padding: $dropdownmenu-padding !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);
|
||||
|
||||
/// Text color of an active dropdown menu item. Explicit override for menu defaults
|
||||
/// @type Color
|
||||
$dropdown-menu-item-color-active: get-color(primary) !default;
|
||||
|
||||
/// Background color of an active dropdown menu item. Explicit override for menu defaults
|
||||
/// @type Color
|
||||
$dropdown-menu-item-background-active: transparent !default;
|
||||
|
||||
@mixin zf-dropdown-left-right-arrows {
|
||||
> a::after {
|
||||
#{$global-right}: 14px;
|
||||
}
|
||||
|
||||
&.opens-left > a::after {
|
||||
@include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, left);
|
||||
right: auto;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
&.opens-right > a::after {
|
||||
@include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, right);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin dropdown-menu-direction($dir: horizontal) {
|
||||
@if $dir == horizontal {
|
||||
> li.opens-left { // sass-lint:disable-line no-qualifying-elements
|
||||
> .is-dropdown-submenu {
|
||||
top: 100%;
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
> li.opens-right { // sass-lint:disable-line no-qualifying-elements
|
||||
> .is-dropdown-submenu {
|
||||
top: 100%;
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@if $dropdownmenu-arrows {
|
||||
> li.is-dropdown-submenu-parent > a { // sass-lint:disable-line no-qualifying-elements
|
||||
position: relative;
|
||||
padding-#{$global-right}: $dropdownmenu-arrow-padding;
|
||||
}
|
||||
|
||||
> li.is-dropdown-submenu-parent > a::after { // sass-lint:disable-line no-qualifying-elements
|
||||
@include css-triangle($dropdownmenu-arrow-size, $dropdownmenu-arrow-color, down);
|
||||
#{$global-right}: 5px;
|
||||
#{$global-left}: auto;
|
||||
margin-top: -1 * ($dropdownmenu-arrow-size / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@else if $dir == vertical {
|
||||
> li {
|
||||
.is-dropdown-submenu {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.opens-left {
|
||||
> .is-dropdown-submenu {
|
||||
top: 0;
|
||||
right: 100%;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.opens-right {
|
||||
> .is-dropdown-submenu {
|
||||
right: auto;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@if $dropdownmenu-arrows {
|
||||
@include zf-dropdown-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;
|
||||
}
|
||||
|
||||
// Top-level item
|
||||
> li > a {
|
||||
background: $dropdownmenu-background;
|
||||
padding: $dropdownmenu-padding;
|
||||
}
|
||||
|
||||
// Top-level item active state
|
||||
> li.is-active > a {
|
||||
background: $dropdown-menu-item-background-active;
|
||||
color: $dropdown-menu-item-color-active;
|
||||
}
|
||||
|
||||
.no-js & ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nested.is-dropdown-submenu {
|
||||
@include menu-nested($dropdownmenu-nested-margin);
|
||||
}
|
||||
|
||||
&.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%;
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
#{$global-left}: auto;
|
||||
margin-top: -1 * $dropdownmenu-arrow-size;
|
||||
}
|
||||
|
||||
&.opens-inner > .is-dropdown-submenu {
|
||||
|
||||
top: 100%;
|
||||
@if $global-text-direction == 'rtl' {
|
||||
right: auto;
|
||||
}
|
||||
@else {
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.opens-left > .is-dropdown-submenu {
|
||||
right: 100%;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
&.opens-right > .is-dropdown-submenu {
|
||||
right: auto;
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.is-dropdown-submenu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$global-left}: 100%;
|
||||
z-index: 1;
|
||||
|
||||
display: none;
|
||||
min-width: $dropdownmenu-min-width;
|
||||
|
||||
border: $dropdownmenu-border;
|
||||
background: $dropdownmenu-submenu-background;
|
||||
|
||||
.dropdown & a {
|
||||
padding: $dropdownmenu-submenu-padding;
|
||||
}
|
||||
|
||||
.is-dropdown-submenu-parent {
|
||||
@if $dropdownmenu-arrows {
|
||||
@include zf-dropdown-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
|
||||
//&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
82
src/foundation/components/_dropdown.scss
Normal file
82
src/foundation/components/_dropdown.scss
Normal file
@@ -0,0 +1,82 @@
|
||||
// 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;
|
||||
|
||||
/// Background for dropdown panes.
|
||||
/// @type Color
|
||||
$dropdown-background: $body-background !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 {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
|
||||
display: none;
|
||||
|
||||
width: $dropdown-width;
|
||||
padding: $dropdown-padding;
|
||||
|
||||
visibility: hidden;
|
||||
border: $dropdown-border;
|
||||
border-radius: $dropdown-radius;
|
||||
background-color: $dropdown-background;
|
||||
|
||||
font-size: $dropdown-font-size;
|
||||
|
||||
|
||||
// Allow an intermittent state to do positioning before making visible.
|
||||
&.is-opening {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.is-open {
|
||||
display: block;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin foundation-dropdown {
|
||||
.dropdown-pane {
|
||||
@include dropdown-container;
|
||||
}
|
||||
|
||||
@each $name, $size in $dropdown-sizes {
|
||||
.dropdown-pane {
|
||||
&.#{$name} {
|
||||
width: $size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
src/foundation/components/_flex-video.scss
Normal file
1
src/foundation/components/_flex-video.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import 'responsive-embed';
|
||||
119
src/foundation/components/_flex.scss
Normal file
119
src/foundation/components/_flex.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
// Foundation for Sites by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
////
|
||||
/// @group Flexbox Utilities
|
||||
////
|
||||
//
|
||||
/// Default value for the count of source ordering`
|
||||
/// @type Number
|
||||
$flex-source-ordering-count: 6 !default;
|
||||
|
||||
/// Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers.
|
||||
/// @type Boolean
|
||||
$flexbox-responsive-breakpoints: true !default;
|
||||
|
||||
@mixin flex-helpers {
|
||||
.flex-container {
|
||||
@include flex;
|
||||
}
|
||||
|
||||
.flex-child-auto {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.flex-child-grow {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.flex-child-shrink {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
@each $dir, $prop in $-zf-flex-direction {
|
||||
.flex-dir-#{$dir} {
|
||||
@include flex-direction($prop);
|
||||
}
|
||||
}
|
||||
|
||||
@if ($flexbox-responsive-breakpoints) {
|
||||
// Loop through Responsive Breakpoints
|
||||
@each $size in $breakpoint-classes {
|
||||
@include breakpoint($size) {
|
||||
@if $size != $-zf-zero-breakpoint {
|
||||
.#{$size}-flex-container {
|
||||
@include flex;
|
||||
}
|
||||
|
||||
.#{$size}-flex-child-auto {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.#{$size}-flex-child-grow {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
.#{$size}-flex-child-shrink {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
@each $dir, $prop in $-zf-flex-direction {
|
||||
.#{$size}-flex-dir-#{$dir} {
|
||||
@include flex-direction($prop);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin foundation-flex-classes {
|
||||
// Horizontal alignment using justify-content
|
||||
@each $hdir, $prop in $-zf-flex-justify {
|
||||
.align-#{$hdir} {
|
||||
@include flex-align($x: $hdir);
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal alignment Specifically for Vertical Menu
|
||||
@each $hdir, $prop in map-remove($-zf-flex-justify, 'justify', 'spaced') {
|
||||
.align-#{$hdir} {
|
||||
&.vertical {
|
||||
&.menu > li > a {
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
// Central alignment of content
|
||||
.align-center-middle {
|
||||
@include flex-align($x: center, $y: middle);
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
// Source ordering
|
||||
@include -zf-each-breakpoint {
|
||||
@for $i from 1 through $flex-source-ordering-count {
|
||||
.#{$-zf-size}-order-#{$i} {
|
||||
@include flex-order($i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Vanilla Flexbox Helpers
|
||||
@include flex-helpers;
|
||||
}
|
||||
27
src/foundation/components/_float.scss
Normal file
27
src/foundation/components/_float.scss
Normal 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-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
@include clearfix;
|
||||
}
|
||||
}
|
||||
64
src/foundation/components/_label.scss
Normal file
64
src/foundation/components/_label.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
// 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: $white !default;
|
||||
|
||||
/// Alternate text color for labels.
|
||||
/// @type Color
|
||||
$label-color-alt: $black !default;
|
||||
|
||||
/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
|
||||
/// @type Map
|
||||
$label-palette: $foundation-palette !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;
|
||||
|
||||
border-radius: $label-radius;
|
||||
|
||||
font-size: $label-font-size;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@mixin foundation-label {
|
||||
.label {
|
||||
@include label;
|
||||
|
||||
background: $label-background;
|
||||
color: $label-color;
|
||||
|
||||
@each $name, $color in $label-palette {
|
||||
&.#{$name} {
|
||||
background: $color;
|
||||
color: color-pick-contrast($color, ($label-color, $label-color-alt));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
114
src/foundation/components/_media-object.scss
Normal file
114
src/foundation/components/_media-object.scss
Normal file
@@ -0,0 +1,114 @@
|
||||
// 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 {
|
||||
display: if($global-flexbox, flex, block);
|
||||
margin-bottom: $mediaobject-margin-bottom;
|
||||
|
||||
@if $global-flexbox {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
@if $global-flexbox {
|
||||
&.stack-for-#{$-zf-zero-breakpoint} {
|
||||
@include breakpoint($-zf-zero-breakpoint only) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// 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;
|
||||
}
|
||||
|
||||
.stack-for-#{$-zf-zero-breakpoint} & {
|
||||
@include breakpoint($-zf-zero-breakpoint only) {
|
||||
@include media-object-stack;
|
||||
}
|
||||
}
|
||||
|
||||
@if $global-flexbox {
|
||||
&.main-section {
|
||||
flex: 1 1 0px; // sass-lint:disable-line zero-unit
|
||||
}
|
||||
}
|
||||
@else {
|
||||
&.middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// 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;
|
||||
}
|
||||
|
||||
.media-object-section {
|
||||
@include media-object-section;
|
||||
}
|
||||
}
|
||||
9
src/foundation/components/_menu-icon.scss
Normal file
9
src/foundation/components/_menu-icon.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
495
src/foundation/components/_menu.scss
Normal file
495
src/foundation/components/_menu.scss
Normal file
@@ -0,0 +1,495 @@
|
||||
// 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-nested-margin: $global-menu-nested-margin !default;
|
||||
|
||||
/// Padding for items in a pill menu.
|
||||
/// @type Number
|
||||
$menu-items-padding: $global-menu-padding !default;
|
||||
|
||||
/// margin for items in a simple menu.
|
||||
/// @type Number
|
||||
$menu-simple-margin: 1rem !default;
|
||||
|
||||
/// Text color of an active menu item.
|
||||
/// @type Color
|
||||
$menu-item-color-active: $white !default;
|
||||
|
||||
/// Alternative text color of an active menu item..
|
||||
/// @type Color
|
||||
$menu-item-color-alt-active: $black !default;
|
||||
|
||||
/// Background color of an active menu item.
|
||||
/// @type Color
|
||||
$menu-item-background-active: get-color(primary) !default;
|
||||
|
||||
/// Spacing between an icon and text in a menu item.
|
||||
/// @type Number
|
||||
$menu-icon-spacing: 0.25rem !default;
|
||||
|
||||
/// Backward compatibility for menu state. If true, this duplicate `active` with `is-active`.
|
||||
/// But please note that `active` will be removed in upcoming versions.
|
||||
/// @type Boolean
|
||||
$menu-state-back-compat: true !default;
|
||||
|
||||
/// Backward compatibility for menu centered. If true, this duplicate `.menu-centered > .menu` with `.menu.align-center`.
|
||||
/// But please note that `menu-centered` will be removed in upcoming versions.
|
||||
/// @type Boolean
|
||||
$menu-centered-back-compat: true !default;
|
||||
|
||||
/// Backward compatibility for using `icon-*` classes without `.icons` classes
|
||||
/// But please note that this backward compatibility will be removed in upcoming versions.
|
||||
/// @type Boolean
|
||||
$menu-icons-back-compat: true !default;
|
||||
|
||||
/// Creates the base styles for a Menu.
|
||||
@mixin menu-base {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
|
||||
@if $global-flexbox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
li {
|
||||
@include disable-mouse-outline;
|
||||
}
|
||||
|
||||
a,
|
||||
.button {
|
||||
line-height: 1;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: $menu-items-padding;
|
||||
}
|
||||
|
||||
// Reset styles of inner elements
|
||||
input,
|
||||
select,
|
||||
a,
|
||||
button {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/// Expands the items of a Menu, so each item is the same width.
|
||||
@mixin menu-expand {
|
||||
@if $global-flexbox {
|
||||
li {
|
||||
flex: 1 1 0px; // sass-lint:disable-line zero-unit
|
||||
}
|
||||
}
|
||||
@else {
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
||||
> li {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Align menu items.
|
||||
@mixin menu-align($alignment) {
|
||||
@if $alignment == left {
|
||||
@if $global-flexbox {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
@else {
|
||||
text-align: $global-left;
|
||||
}
|
||||
}
|
||||
@else if $alignment == right {
|
||||
@if $global-flexbox {
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.submenu li {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical li {
|
||||
display: block;
|
||||
text-align: $global-right;
|
||||
|
||||
.submenu li {
|
||||
text-align: $global-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
text-align: $global-right;
|
||||
|
||||
.submenu li {
|
||||
text-align: $global-left;
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
.submenu li {
|
||||
text-align: $global-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@else if $alignment == center {
|
||||
@if $global-flexbox {
|
||||
li {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.submenu li {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
@else {
|
||||
text-align: center;
|
||||
|
||||
.submenu li {
|
||||
text-align: $global-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// 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: wrap;
|
||||
flex-direction: row;
|
||||
}
|
||||
@else {
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@else if $dir == vertical {
|
||||
@if $global-flexbox {
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
}
|
||||
@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.
|
||||
/// @param {Keyword} $dir [$global-left] - Direction of the menu. This effects the side of the `<li>` that receives the margin.
|
||||
/// @param {Number} $margin [$menu-simple-margin] - The margin to apply to each `<li>`.
|
||||
@mixin menu-simple($dir: $global-left, $margin: $menu-simple-margin) {
|
||||
@if $global-flexbox {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
li + li {
|
||||
margin-#{$dir}: $margin;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/// Adds styles for a nested Menu, by adding `margin-left` to the menu.
|
||||
/// @param {Keyword|Number} $margin [$menu-nested-margin] - Length of the margin.
|
||||
/// @param {Keyword} $nested-alignment [left] - Alignment of the nested class
|
||||
@mixin menu-nested(
|
||||
$margin: $menu-nested-margin,
|
||||
$nested-alignment: left
|
||||
) {
|
||||
@if $nested-alignment == right {
|
||||
margin-#{$global-right}: $margin;
|
||||
margin-#{$global-left}: 0;
|
||||
}
|
||||
@else {
|
||||
margin-#{$global-right}: 0;
|
||||
margin-#{$global-left}: $margin;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/// Adds basic styles for icons in menus.
|
||||
@mixin menu-icons() {
|
||||
@if $global-flexbox {
|
||||
a {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
img,
|
||||
i,
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
|
||||
+ span {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Adds position classes for icons within a menu.
|
||||
@mixin menu-icon-position($position: left, $spacing: $menu-icon-spacing) {
|
||||
@if $position == left {
|
||||
li a {
|
||||
@if $global-flexbox {
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
img,
|
||||
i,
|
||||
svg {
|
||||
margin-#{$global-right}: $spacing;
|
||||
|
||||
@if not $global-flexbox {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@else if $position == right {
|
||||
li a {
|
||||
@if $global-flexbox {
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
img,
|
||||
i,
|
||||
svg {
|
||||
margin-#{$global-left}: $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 $spacing;
|
||||
}
|
||||
@else {
|
||||
align-self: stretch;
|
||||
margin-bottom: $spacing;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@else if $position == bottom {
|
||||
li a {
|
||||
@if $global-flexbox {
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
@else {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img,
|
||||
i,
|
||||
svg {
|
||||
@if not $global-flexbox {
|
||||
display: block;
|
||||
margin: $spacing auto 0;
|
||||
}
|
||||
@else {
|
||||
align-self: stretch;
|
||||
margin-bottom: $spacing;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin menu-text {
|
||||
padding: $global-menu-padding;
|
||||
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@mixin menu-state-active {
|
||||
background: $menu-item-background-active;
|
||||
color: color-pick-contrast($menu-item-background-active, ($menu-item-color-active, $menu-item-color-alt-active));
|
||||
}
|
||||
|
||||
@mixin foundation-menu {
|
||||
.menu {
|
||||
@include menu-base;
|
||||
|
||||
// Default orientation: horizontal
|
||||
&, &.horizontal {
|
||||
@include menu-direction(horizontal);
|
||||
}
|
||||
|
||||
// Vertical orientation modifier
|
||||
&.vertical {
|
||||
@include menu-direction(vertical);
|
||||
}
|
||||
|
||||
// Even-width modifier for horizontal orientation
|
||||
&.expanded {
|
||||
@include menu-expand;
|
||||
}
|
||||
|
||||
// Simple
|
||||
&.simple {
|
||||
@include menu-simple;
|
||||
}
|
||||
|
||||
// Breakpoint specific versions
|
||||
@include -zf-each-breakpoint($small: false) {
|
||||
&.#{$-zf-size}-horizontal {
|
||||
@include menu-direction(horizontal);
|
||||
}
|
||||
|
||||
&.#{$-zf-size}-vertical {
|
||||
@include menu-direction(vertical);
|
||||
}
|
||||
|
||||
&.#{$-zf-size}-expanded {
|
||||
@include menu-expand;
|
||||
}
|
||||
|
||||
&.#{$-zf-size}-simple {
|
||||
@include menu-expand;
|
||||
}
|
||||
}
|
||||
|
||||
// Nesting
|
||||
&.nested {
|
||||
@include menu-nested;
|
||||
}
|
||||
|
||||
// Icon Base Styles
|
||||
&.icons {
|
||||
@include menu-icons;
|
||||
}
|
||||
|
||||
// Backward Compatibility for active state
|
||||
@if $menu-icons-back-compat {
|
||||
&.icon-top,
|
||||
&.icon-right,
|
||||
&.icon-bottom,
|
||||
&.icon-left {
|
||||
@include menu-icons;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon Left
|
||||
&.icon-left {
|
||||
@include menu-icon-position(left);
|
||||
}
|
||||
|
||||
// Icon Right
|
||||
&.icon-right {
|
||||
@include menu-icon-position(right);
|
||||
}
|
||||
|
||||
// Icon Top
|
||||
&.icon-top {
|
||||
@include menu-icon-position(top);
|
||||
}
|
||||
|
||||
// Icon Bottom
|
||||
&.icon-bottom {
|
||||
@include menu-icon-position(bottom);
|
||||
}
|
||||
|
||||
// Active state
|
||||
.is-active > a {
|
||||
@include menu-state-active;
|
||||
}
|
||||
|
||||
// Backward Compatibility for active state
|
||||
@if $menu-state-back-compat {
|
||||
.active > a {
|
||||
@include menu-state-active;
|
||||
}
|
||||
}
|
||||
|
||||
// Align left
|
||||
&.align-#{$global-left} {
|
||||
@include menu-align(left);
|
||||
}
|
||||
|
||||
// Align right
|
||||
&.align-#{$global-right} {
|
||||
@include menu-align(right);
|
||||
|
||||
.nested {
|
||||
@include menu-nested($nested-alignment: right);
|
||||
}
|
||||
}
|
||||
|
||||
// Align center
|
||||
&.align-center {
|
||||
@include menu-align(center);
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
@include menu-text;
|
||||
}
|
||||
}
|
||||
|
||||
@if $menu-centered-back-compat {
|
||||
.menu-centered {
|
||||
> .menu {
|
||||
@if $global-flexbox {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@include menu-align(center);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent FOUC when using the Responsive Menu plugin
|
||||
.no-js [data-responsive-menu] ul {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
511
src/foundation/components/_off-canvas.scss
Normal file
511
src/foundation/components/_off-canvas.scss
Normal file
@@ -0,0 +1,511 @@
|
||||
// Foundation for Sites by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
////
|
||||
/// @group off-canvas
|
||||
////
|
||||
|
||||
/// Width map of a left/right off-canvas panel.
|
||||
/// @type Map
|
||||
$offcanvas-sizes: (
|
||||
small: 250px,
|
||||
) !default;
|
||||
|
||||
/// Height map of a top/bottom off-canvas panel.
|
||||
/// @type Map
|
||||
$offcanvas-vertical-sizes: (
|
||||
small: 250px,
|
||||
) !default;
|
||||
|
||||
/// Background color of an off-canvas panel.
|
||||
/// @type Color
|
||||
$offcanvas-background: $light-gray !default;
|
||||
|
||||
/// Box shadow for the off-canvas overlap panel.
|
||||
/// @type Shadow
|
||||
$offcanvas-shadow: 0 0 10px rgba($black, 0.7) !default;
|
||||
|
||||
/// Inner box shadow size for the off-canvas push panel.
|
||||
/// @type Number
|
||||
$offcanvas-inner-shadow-size: 20px !default;
|
||||
|
||||
/// Inner box shadow color for the off-canvas push panel.
|
||||
/// @type Color
|
||||
$offcanvas-inner-shadow-color: rgba($black, 0.25) !default;
|
||||
|
||||
/// Z-index of an off-canvas content overlay.
|
||||
/// @type Number
|
||||
$offcanvas-overlay-zindex: 11 !default;
|
||||
|
||||
/// Z-index of an off-canvas panel with the `push` transition.
|
||||
/// @type Number
|
||||
$offcanvas-push-zindex: 12 !default;
|
||||
|
||||
/// Z-index of an off-canvas panel with the `overlap` transition.
|
||||
/// @type Number
|
||||
$offcanvas-overlap-zindex: 13 !default;
|
||||
|
||||
/// Z-index of an off-canvas panel using the `reveal-for-*` classes or mixin.
|
||||
/// @type Number
|
||||
$offcanvas-reveal-zindex: 12 !default;
|
||||
|
||||
/// Length of the animation on an off-canvas panel.
|
||||
/// @type Number
|
||||
$offcanvas-transition-length: 0.5s !default;
|
||||
|
||||
/// Timing function of the animation on an off-canvas panel.
|
||||
/// @type Keyword
|
||||
$offcanvas-transition-timing: ease !default;
|
||||
|
||||
/// If `true`, a revealed off-canvas will be fixed-position, and scroll with the screen.
|
||||
/// @type Bool
|
||||
$offcanvas-fixed-reveal: true !default;
|
||||
|
||||
/// Background color for the overlay that appears when an off-canvas panel 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 content.
|
||||
$maincontent-class: 'off-canvas-content' !default;
|
||||
|
||||
/// Adds baseline styles for off-canvas. This CSS is required to make the other pieces work.
|
||||
@mixin off-canvas-basics {
|
||||
|
||||
/// Transform deprecated size settings into map & show warning
|
||||
@if variable-exists(offcanvas-size) {
|
||||
$offcanvas-sizes: (small: $offcanvas-size, medium: $offcanvas-size) !global;
|
||||
@warn '$offcanvas-size is deprecated and not used anymore! Please update your settings and use the map $offcanvas-sizes instead';
|
||||
}
|
||||
@if variable-exists(offcanvas-vertical-size) {
|
||||
$offcanvas-vertical-sizes: (small: $offcanvas-vertical-size, medium: $offcanvas-vertical-size) !global;
|
||||
@warn '$offcanvas-vertical-size is deprecated and not used anymore! Please update your settings and use the map $offcanvas-vertical-sizes instead';
|
||||
}
|
||||
|
||||
// Checks the z-indexes and increase them due to backwards compatibility.
|
||||
// This is necessary because the overlay's z-index is new since v6.4 and may be identical to the user custom settings of the push z-index.
|
||||
@if $offcanvas-push-zindex <= $offcanvas-overlay-zindex { $offcanvas-push-zindex: $offcanvas-overlay-zindex + 1 !global; }
|
||||
@if $offcanvas-overlap-zindex <= $offcanvas-push-zindex { $offcanvas-overlap-zindex: $offcanvas-push-zindex + 1 !global; }
|
||||
@if $offcanvas-reveal-zindex <= $offcanvas-overlay-zindex { $offcanvas-reveal-zindex: $offcanvas-overlay-zindex + 1 !global; }
|
||||
|
||||
// Hides overflow on body when an off-canvas panel is open.
|
||||
.is-off-canvas-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Off-canvas overlay (generated by JavaScript)
|
||||
.js-off-canvas-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $offcanvas-overlay-zindex;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
transition: opacity $offcanvas-transition-length $offcanvas-transition-timing, visibility $offcanvas-transition-length $offcanvas-transition-timing;
|
||||
|
||||
background: $offcanvas-exit-background;
|
||||
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
&.is-visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&.is-closable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.is-overlay-absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&.is-overlay-fixed {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Adds basic styles for an off-canvas wrapper.
|
||||
@mixin off-canvas-wrapper() {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/// Adds basic styles for an off-canvas panel.
|
||||
@mixin off-canvas-base(
|
||||
$background: $offcanvas-background,
|
||||
$transition: $offcanvas-transition-length $offcanvas-transition-timing,
|
||||
$fixed: true
|
||||
) {
|
||||
@include disable-mouse-outline;
|
||||
|
||||
@if $fixed == true {
|
||||
position: fixed;
|
||||
}
|
||||
@else {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
// Set the off-canvas z-index.
|
||||
z-index: $offcanvas-push-zindex;
|
||||
|
||||
// Increase CSS specificity
|
||||
&.is-transition-push {
|
||||
z-index: $offcanvas-push-zindex;
|
||||
}
|
||||
|
||||
transition: transform $transition;
|
||||
backface-visibility: hidden;
|
||||
|
||||
background: $background;
|
||||
|
||||
// Hide inactive off-canvas within the content that have the same position
|
||||
&.is-closed {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Overlap only styles.
|
||||
&.is-transition-overlap {
|
||||
z-index: $offcanvas-overlap-zindex;
|
||||
|
||||
&.is-open {
|
||||
box-shadow: $offcanvas-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
// Sets transform to 0 to show an off-canvas panel.
|
||||
&.is-open {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/// Adds styles to position an off-canvas panel to the left/right/top/bottom.
|
||||
@mixin off-canvas-position(
|
||||
$position: left,
|
||||
$orientation: horizontal,
|
||||
$sizes: if($orientation == horizontal, $offcanvas-sizes, $offcanvas-vertical-sizes)
|
||||
) {
|
||||
@if $position == left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
@each $name, $size in $sizes {
|
||||
@include breakpoint($name) {
|
||||
width: $size;
|
||||
transform: translateX(-$size);
|
||||
}
|
||||
}
|
||||
|
||||
// Sets the position for nested off-canvas element
|
||||
@at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
|
||||
|
||||
@each $name, $size in $sizes {
|
||||
@include breakpoint($name) {
|
||||
transform: translateX(-$size);
|
||||
}
|
||||
}
|
||||
&.is-transition-overlap.is-open {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Sets the open position for the content
|
||||
@at-root .#{$maincontent-class}.is-open-#{$position} {
|
||||
&.has-transition-push {
|
||||
@each $name, $size in $sizes {
|
||||
@include breakpoint($name) {
|
||||
transform: translateX($size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@else if $position == right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
@each $name, $size in $sizes {
|
||||
@include breakpoint($name) {
|
||||
width: $size;
|
||||
transform: translateX($size);
|
||||
}
|
||||
}
|
||||
|
||||
// Sets the position for nested off-canvas element
|
||||
@at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
|
||||
|
||||
@each $name, $size in $sizes {
|
||||
@include breakpoint($name) {
|
||||
transform: translateX($size);
|
||||
}
|
||||
}
|
||||
&.is-transition-overlap.is-open {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Sets the open position for the content
|
||||
@at-root .#{$maincontent-class}.is-open-#{$position} {
|
||||
&.has-transition-push {
|
||||
@each $name, $size in $sizes {
|
||||
@include breakpoint($name) {
|
||||
transform: translateX(-$size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@else if $position == top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
|
||||
@each $name, $size in $sizes {
|
||||
@include breakpoint($name) {
|
||||
height: $size;
|
||||
transform: translateY(-$size);
|
||||
}
|
||||
}
|
||||
|
||||
// Sets the position for nested off-canvas element
|
||||
@at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
|
||||
@each $name, $size in $sizes {
|
||||
@include breakpoint($name) {
|
||||
transform: translateY(-$size);
|
||||
}
|
||||
}
|
||||
&.is-transition-overlap.is-open {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Sets the open position for the content
|
||||
@at-root .#{$maincontent-class}.is-open-#{$position} {
|
||||
&.has-transition-push {
|
||||
@each $name, $size in $sizes {
|
||||
@include breakpoint($name) {
|
||||
transform: translateY($size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@else if $position == bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
|
||||
@each $name, $size in $sizes {
|
||||
@include breakpoint($name) {
|
||||
height: $size;
|
||||
transform: translateY($size);
|
||||
}
|
||||
}
|
||||
|
||||
// Sets the position for nested off-canvas element
|
||||
@at-root .#{$maincontent-class} .off-canvas.position-#{$position} {
|
||||
@each $name, $size in $sizes {
|
||||
@include breakpoint($name) {
|
||||
transform: translateY($size);
|
||||
}
|
||||
}
|
||||
&.is-transition-overlap.is-open {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Sets the open position for the content
|
||||
@at-root .#{$maincontent-class}.is-open-#{$position} {
|
||||
&.has-transition-push {
|
||||
@each $name, $size in $sizes {
|
||||
@include breakpoint($name) {
|
||||
transform: translateY(-$size);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If $offcanvas-inner-shadow-size is set, add inner box-shadow.
|
||||
// This mimics the off-canvas panel having a lower z-index, without having to have one.
|
||||
@if $offcanvas-inner-shadow-size {
|
||||
&.is-transition-push {
|
||||
@if $position == left {
|
||||
@include inner-side-shadow(right, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
|
||||
}
|
||||
@else if $position == right {
|
||||
@include inner-side-shadow(left, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
|
||||
}
|
||||
@else if $position == top {
|
||||
@include inner-side-shadow(bottom, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
|
||||
}
|
||||
@else if $position == bottom {
|
||||
@include inner-side-shadow(top, $offcanvas-inner-shadow-size, $offcanvas-inner-shadow-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/// Sets the styles for the content container.
|
||||
@mixin off-canvas-content() {
|
||||
transform: none;
|
||||
backface-visibility: hidden;
|
||||
|
||||
// Bind to has-transition-X class to prevent transition for transform:none
|
||||
&.has-transition-overlap,
|
||||
&.has-transition-push {
|
||||
transition: transform $offcanvas-transition-length $offcanvas-transition-timing;
|
||||
}
|
||||
|
||||
// Transform scope until the element is closed (makes sure transitionend gets triggered)
|
||||
&.has-transition-push {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
// Consider element & content, nested in another content
|
||||
.off-canvas.is-open {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/// Adds styles that reveal an off-canvas panel.
|
||||
@mixin off-canvas-reveal(
|
||||
$position: left,
|
||||
$zindex: $offcanvas-reveal-zindex,
|
||||
$content: $maincontent-class,
|
||||
$breakpoint: small
|
||||
) {
|
||||
transform: none;
|
||||
z-index: $zindex;
|
||||
transition: none;
|
||||
visibility: visible;
|
||||
|
||||
@if not $offcanvas-fixed-reveal {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Consider revealed element is nested in content
|
||||
.#{$maincontent-class} & {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
@at-root .#{$content}.has-reveal-#{$position} {
|
||||
margin-#{$position}: -zf-get-bp-val($offcanvas-sizes, $breakpoint);
|
||||
}
|
||||
|
||||
// backwards compatibility (prior to v6.4)
|
||||
& ~ .#{$content} {
|
||||
margin-#{$position}: -zf-get-bp-val($offcanvas-sizes, $breakpoint);
|
||||
}
|
||||
}
|
||||
|
||||
/// Overrides the off-canvas styles
|
||||
@mixin in-canvas() {
|
||||
visibility: visible;
|
||||
height: auto;
|
||||
position: static;
|
||||
background: none;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
transition: none;
|
||||
|
||||
// Increase CSS specificity
|
||||
&.position-left,
|
||||
&.position-right,
|
||||
&.position-top,
|
||||
&.position-bottom {
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin foundation-off-canvas {
|
||||
@include off-canvas-basics;
|
||||
|
||||
// Off-canvas wrapper
|
||||
.off-canvas-wrapper {
|
||||
@include off-canvas-wrapper;
|
||||
}
|
||||
|
||||
// Off-canvas container
|
||||
.off-canvas {
|
||||
@include off-canvas-base;
|
||||
|
||||
// Force position absolute for nested off-canvas because fixed doesn't work for push transition within the transform scope.
|
||||
@at-root .#{$maincontent-class} & {
|
||||
// NOTE: since overlap transition is currently forced if nested, there's no need to force position absolute until nested push transition is supported.
|
||||
// position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
// Off-canvas container with absolute position
|
||||
.off-canvas-absolute {
|
||||
@include off-canvas-base($fixed: false);
|
||||
}
|
||||
|
||||
// Off-canvas position classes
|
||||
.position-left { @include off-canvas-position(left, horizontal); }
|
||||
.position-right { @include off-canvas-position(right, horizontal); }
|
||||
.position-top { @include off-canvas-position(top, vertical); }
|
||||
.position-bottom { @include off-canvas-position(bottom, vertical); }
|
||||
|
||||
.off-canvas-content {
|
||||
@include off-canvas-content;
|
||||
}
|
||||
|
||||
// Reveal off-canvas panel 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, $offcanvas-reveal-zindex, $maincontent-class, $name);
|
||||
}
|
||||
|
||||
.position-right.reveal-for-#{$name} {
|
||||
@include off-canvas-reveal(right, $offcanvas-reveal-zindex, $maincontent-class, $name);
|
||||
}
|
||||
|
||||
.position-top.reveal-for-#{$name} {
|
||||
@include off-canvas-reveal(top, $offcanvas-reveal-zindex, $maincontent-class, $name);
|
||||
}
|
||||
|
||||
.position-bottom.reveal-for-#{$name} {
|
||||
@include off-canvas-reveal(bottom, $offcanvas-reveal-zindex, $maincontent-class, $name);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Move in-canvas for larger screens
|
||||
@each $name, $value in $breakpoint-classes {
|
||||
@if $name != $-zf-zero-breakpoint {
|
||||
@include breakpoint($name) {
|
||||
.off-canvas.in-canvas-for-#{$name} {
|
||||
@include in-canvas;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
197
src/foundation/components/_orbit.scss
Normal file
197
src/foundation/components/_orbit.scss
Normal file
@@ -0,0 +1,197 @@
|
||||
// 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;
|
||||
height: 0; // Prevent FOUC by not showing until JS sets height
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/// Adds styles for the individual slides of an Orbit slider. These styles are used on the `.orbit-slide` class.
|
||||
@mixin orbit-slide {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
|
||||
&.no-motionui {
|
||||
&.is-active {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin orbit-figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/// Adds styles for a slide containing an image. These styles are used on the `.orbit-image` class.
|
||||
@mixin orbit-image {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/// 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%;
|
||||
margin-bottom: 0;
|
||||
padding: $orbit-caption-padding;
|
||||
|
||||
background-color: $orbit-caption-background;
|
||||
color: color-pick-contrast($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;
|
||||
|
||||
border-radius: 50%;
|
||||
background-color: $orbit-bullet-background;
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
201
src/foundation/components/_pagination.scss
Normal file
201
src/foundation/components/_pagination.scss
Normal file
@@ -0,0 +1,201 @@
|
||||
// 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 pagination 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: $white !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
|
||||
/// and optionally current page number.
|
||||
/// @type Boolean
|
||||
$pagination-mobile-items: false !default;
|
||||
|
||||
/// If `true`, display the current page number on mobile even if `$pagination-mobile-items` is set to `false`.
|
||||
/// This parameter will only override the visibility setting of the current item for `$pagination-mobile-items: false;`,
|
||||
/// it will not affect the current page number visibility when `$pagination-mobile-items` is set to `true`.
|
||||
/// @type Boolean
|
||||
$pagination-mobile-current-item: false !default;
|
||||
|
||||
/// If `true`, arrows are added to the next and previous links of pagination.
|
||||
/// @type Boolean
|
||||
$pagination-arrows: true !default;
|
||||
|
||||
/// Content for the previous arrow when `$pagination-arrows` is `true`
|
||||
/// @type String
|
||||
$pagination-arrow-previous: '\00AB' !default;
|
||||
|
||||
/// Content for the next arrow when `$pagination-arrows` is `true`
|
||||
/// @type String
|
||||
$pagination-arrow-next: '\00BB' !default;
|
||||
|
||||
/// Adds styles for a pagination container. Apply this to a `<ul>`.
|
||||
@mixin pagination-container (
|
||||
$margin-bottom: $pagination-margin-bottom,
|
||||
$font-size: $pagination-font-size,
|
||||
$spacing: $pagination-item-spacing,
|
||||
$radius: $pagination-radius,
|
||||
$color: $pagination-item-color,
|
||||
$padding: $pagination-item-padding,
|
||||
$background-hover: $pagination-item-background-hover
|
||||
) {
|
||||
@include clearfix;
|
||||
margin-#{$global-left}: 0;
|
||||
margin-bottom: $margin-bottom;
|
||||
|
||||
// List item
|
||||
li {
|
||||
margin-#{$global-right}: $spacing;
|
||||
border-radius: $radius;
|
||||
font-size: $font-size;
|
||||
|
||||
@if $pagination-mobile-items {
|
||||
display: inline-block;
|
||||
}
|
||||
@else {
|
||||
display: none;
|
||||
|
||||
&:last-child,
|
||||
&:first-child {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@if $pagination-mobile-current-item {
|
||||
&.current {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Page links
|
||||
a,
|
||||
button {
|
||||
display: block;
|
||||
padding: $padding;
|
||||
border-radius: $radius;
|
||||
color: $color;
|
||||
|
||||
&:hover {
|
||||
background: $background-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Adds styles for the current pagination item. Apply this to an `<a>`.
|
||||
@mixin pagination-item-current (
|
||||
$padding: $pagination-item-padding,
|
||||
$background-current: $pagination-item-background-current,
|
||||
$color-current: $pagination-item-color-current
|
||||
) {
|
||||
padding: $padding;
|
||||
background: $background-current;
|
||||
color: $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
|
||||
) {
|
||||
padding: $padding;
|
||||
color: $color;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/// Adds styles for an ellipsis for use in a pagination list.
|
||||
@mixin pagination-ellipsis (
|
||||
$padding: $pagination-item-padding,
|
||||
$color: $pagination-ellipsis-color
|
||||
) {
|
||||
padding: $padding;
|
||||
content: '\2026';
|
||||
color: $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 {
|
||||
display: inline-block;
|
||||
margin-#{$global-right}: 0.5rem;
|
||||
content: $pagination-arrow-previous;
|
||||
}
|
||||
|
||||
.pagination-next a::after,
|
||||
.pagination-next.disabled::after {
|
||||
display: inline-block;
|
||||
margin-#{$global-left}: 0.5rem;
|
||||
content: $pagination-arrow-next;
|
||||
}
|
||||
}
|
||||
}
|
||||
63
src/foundation/components/_progress-bar.scss
Normal file
63
src/foundation/components/_progress-bar.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
// Foundation for Sites by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
/// Adds styles for a progress bar container.
|
||||
@mixin progress-container {
|
||||
height: $progress-height;
|
||||
margin-bottom: $progress-margin-bottom;
|
||||
border-radius: $progress-radius;
|
||||
background-color: $progress-background;
|
||||
}
|
||||
|
||||
/// 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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
57
src/foundation/components/_responsive-embed.scss
Normal file
57
src/foundation/components/_responsive-embed.scss
Normal file
@@ -0,0 +1,57 @@
|
||||
// Foundation for Sites by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
////
|
||||
/// @group responsive-embed
|
||||
////
|
||||
|
||||
/// Margin below a responsive embed container.
|
||||
/// @type Number
|
||||
$responsive-embed-margin-bottom: rem-calc(16) !default;
|
||||
|
||||
/// Aspect ratios used to determine padding-bottom of responsive embed containers.
|
||||
/// @type Map
|
||||
$responsive-embed-ratios: (
|
||||
default: 4 by 3,
|
||||
widescreen: 16 by 9,
|
||||
) !default;
|
||||
|
||||
/// Creates a responsive embed container.
|
||||
/// @param {String|List} $ratio [default] - Ratio of the container. Can be a key from the `$responsive-embed-ratios` map or a list formatted as `x by y`.
|
||||
@mixin responsive-embed($ratio: default) {
|
||||
@if type-of($ratio) == 'string' {
|
||||
$ratio: map-get($responsive-embed-ratios, $ratio);
|
||||
}
|
||||
position: relative;
|
||||
height: 0;
|
||||
margin-bottom: $responsive-embed-margin-bottom;
|
||||
padding-bottom: ratio-to-percentage($ratio);
|
||||
overflow: hidden;
|
||||
|
||||
iframe,
|
||||
object,
|
||||
embed,
|
||||
video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$global-left}: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin foundation-responsive-embed {
|
||||
.responsive-embed,
|
||||
.flex-video {
|
||||
@include responsive-embed($ratio: default);
|
||||
|
||||
$ratios: map-remove($responsive-embed-ratios,default);
|
||||
|
||||
@each $name, $ratio in $ratios {
|
||||
&.#{$name} {
|
||||
padding-bottom: ratio-to-percentage($ratio);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
185
src/foundation/components/_reveal.scss
Normal file
185
src/foundation/components/_reveal.scss
Normal file
@@ -0,0 +1,185 @@
|
||||
// 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;
|
||||
|
||||
|
||||
// Placeholder selector for medium-and-up modals
|
||||
// Prevents duplicate CSS when defining multiple Reveal sizes
|
||||
// This should be in the same breakpoint then `@mixin reveal-modal-width`
|
||||
@include breakpoint(medium) {
|
||||
%reveal-centered {
|
||||
right: auto;
|
||||
left: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/// Adds styles for a modal overlay.
|
||||
/// @param {Color} $background [$reveal-overlay-background] - Background color of the overlay.
|
||||
@mixin reveal-overlay($background: $reveal-overlay-background) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $reveal-zindex;
|
||||
|
||||
display: none;
|
||||
background-color: $background;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/// Adds base styles for a modal.
|
||||
@mixin reveal-modal-base {
|
||||
@include disable-mouse-outline;
|
||||
z-index: $reveal-zindex + 1;
|
||||
// Workaround android browser z-index bug
|
||||
backface-visibility: hidden;
|
||||
|
||||
display: none;
|
||||
padding: $reveal-padding;
|
||||
|
||||
border: $reveal-border;
|
||||
border-radius: $reveal-radius;
|
||||
background-color: $reveal-background;
|
||||
|
||||
@include breakpoint(medium) {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
// Make sure rows don't have a min-width on them
|
||||
.column {
|
||||
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
|
||||
) {
|
||||
// Extends must be made outside of breakpoints for compatibility with newer Sass versions (libsass v3.5)
|
||||
@extend %reveal-centered;
|
||||
@include breakpoint(medium) {
|
||||
width: $width;
|
||||
max-width: $max-width;
|
||||
}
|
||||
}
|
||||
|
||||
/// Creates a full-screen modal, which stretches the full width and height of the window.
|
||||
@mixin reveal-modal-fullscreen {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
margin-left: 0;
|
||||
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@mixin foundation-reveal {
|
||||
|
||||
/// Disables the scroll when Reveal is shown to prevent the background from shifting
|
||||
html.is-reveal-open {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
|
||||
&.zf-has-scroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
body { // sass-lint:disable-line no-qualifying-elements
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay
|
||||
.reveal-overlay {
|
||||
@include reveal-overlay;
|
||||
}
|
||||
|
||||
// Modal container
|
||||
.reveal {
|
||||
@include reveal-modal-base;
|
||||
@include reveal-modal-width($reveal-width);
|
||||
position: relative;
|
||||
top: 100px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
overflow-y: 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
137
src/foundation/components/_slider.scss
Executable file
137
src/foundation/components/_slider.scss
Executable file
@@ -0,0 +1,137 @@
|
||||
// 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;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
|
||||
display: inline-block;
|
||||
width: $slider-handle-width;
|
||||
height: $slider-handle-height;
|
||||
|
||||
border-radius: $slider-radius;
|
||||
background-color: $slider-handle-background;
|
||||
transition: $slider-transition;
|
||||
touch-action: manipulation;
|
||||
|
||||
&: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);
|
||||
}
|
||||
}
|
||||
}
|
||||
39
src/foundation/components/_sticky.scss
Normal file
39
src/foundation/components/_sticky.scss
Normal file
@@ -0,0 +1,39 @@
|
||||
// Foundation for Sites by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@mixin foundation-sticky {
|
||||
.sticky-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.sticky.is-stuck {
|
||||
position: fixed;
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
|
||||
&.is-at-top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&.is-at-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.sticky.is-anchored {
|
||||
position: relative;
|
||||
right: auto;
|
||||
left: auto;
|
||||
|
||||
&.is-at-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
261
src/foundation/components/_switch.scss
Normal file
261
src/foundation/components/_switch.scss
Normal file
@@ -0,0 +1,261 @@
|
||||
// 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;
|
||||
|
||||
/// Opacity of a disabled switch.
|
||||
/// @type Number
|
||||
$switch-opacity-disabled: .5 !default;
|
||||
|
||||
/// Cursor for a disabled switch.
|
||||
/// @type Cursor
|
||||
$switch-cursor-disabled: not-allowed !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 {
|
||||
position: relative;
|
||||
margin-bottom: $switch-margin;
|
||||
outline: 0;
|
||||
|
||||
// These properties cascade down to the switch text
|
||||
font-size: rem-calc(14);
|
||||
font-weight: bold;
|
||||
color: $white;
|
||||
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/// Adds styles for a switch input. Apply this to an `<input>` within a switch.
|
||||
@mixin switch-input {
|
||||
position: absolute;
|
||||
margin-bottom: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/// Adds styles for the background and paddle of a switch. Apply this to a `<label>` within a switch.
|
||||
@mixin switch-paddle {
|
||||
$switch-width: $switch-height * 2;
|
||||
$paddle-height: $switch-height - ($switch-paddle-offset * 2);
|
||||
$paddle-width: $switch-height - ($switch-paddle-offset * 2);
|
||||
$paddle-active-offest: $switch-width - $paddle-width - $switch-paddle-offset;
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
width: $switch-width;
|
||||
height: $switch-height;
|
||||
|
||||
border-radius: $switch-radius;
|
||||
background: $switch-background;
|
||||
transition: $switch-paddle-transition;
|
||||
|
||||
// Resetting these <label> presets so type styles cascade down
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
// Needed to override specificity
|
||||
input + & {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// The paddle itself
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: $switch-paddle-offset;
|
||||
#{$global-left}: $switch-paddle-offset;
|
||||
|
||||
display: block;
|
||||
width: $paddle-width;
|
||||
height: $paddle-height;
|
||||
|
||||
transform: translate3d(0, 0, 0);
|
||||
border-radius: $switch-paddle-radius;
|
||||
background: $switch-paddle-background;
|
||||
transition: $switch-paddle-transition;
|
||||
content: '';
|
||||
}
|
||||
|
||||
// Change the visual style when the switch is active
|
||||
input:checked ~ & {
|
||||
background: $switch-background-active;
|
||||
|
||||
&::after {
|
||||
#{$global-left}: $paddle-active-offest;
|
||||
}
|
||||
}
|
||||
|
||||
// indicate a disabled switch
|
||||
input:disabled ~ & {
|
||||
cursor: $switch-cursor-disabled;
|
||||
opacity: $switch-opacity-disabled;
|
||||
}
|
||||
|
||||
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} $switch-height [2rem] - Height of the switch body.
|
||||
/// @param {Number} $paddle-offset [0.25rem] - Spacing between the switch paddle and the edge of the switch body.
|
||||
@mixin switch-size(
|
||||
$font-size: 1rem,
|
||||
$switch-height: 2rem,
|
||||
$paddle-offset: 0.25rem
|
||||
) {
|
||||
|
||||
$switch-width: $switch-height * 2;
|
||||
$paddle-width: $switch-height - ($paddle-offset * 2);
|
||||
$paddle-height: $switch-height - ($paddle-offset * 2);
|
||||
$paddle-active-offest: $switch-width - $paddle-width - $paddle-offset;
|
||||
|
||||
height: $switch-height;
|
||||
|
||||
.switch-paddle {
|
||||
width: $switch-width;
|
||||
height: $switch-height;
|
||||
font-size: $font-size;
|
||||
}
|
||||
|
||||
.switch-paddle::after {
|
||||
top: $paddle-offset;
|
||||
#{$global-left}: $paddle-offset;
|
||||
width: $paddle-width;
|
||||
height: $paddle-height;
|
||||
}
|
||||
|
||||
input:checked ~ .switch-paddle::after {
|
||||
#{$global-left}: $paddle-active-offest;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin foundation-switch {
|
||||
// Container class
|
||||
.switch {
|
||||
height: $switch-height;
|
||||
@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), $switch-height-tiny, $switch-paddle-offset);
|
||||
}
|
||||
|
||||
.switch.small {
|
||||
@include switch-size(rem-calc(12), $switch-height-small, $switch-paddle-offset);
|
||||
}
|
||||
|
||||
.switch.large {
|
||||
@include switch-size(rem-calc(16), $switch-height-large, $switch-paddle-offset);
|
||||
}
|
||||
}
|
||||
328
src/foundation/components/_table.scss
Normal file
328
src/foundation/components/_table.scss
Normal file
@@ -0,0 +1,328 @@
|
||||
// Foundation for Sites by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
// sass-lint:disable no-qualifying-elements
|
||||
|
||||
////
|
||||
/// @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;
|
||||
|
||||
/// If `true`, tables are striped by default and an .unstriped class is created. If `false`, a .striped class is created.
|
||||
/// @type Boolean
|
||||
$table-is-striped: true !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 of header rows on hover.
|
||||
/// @type List
|
||||
$table-head-row-hover: darken($table-head-background, $table-hover-scale) !default;
|
||||
|
||||
/// Default color for footer background.
|
||||
/// @type Color
|
||||
$table-foot-background: smart-scale($table-background, $table-color-scale) !default;
|
||||
|
||||
/// Default color of footer rows on hover.
|
||||
/// @type List
|
||||
$table-foot-row-hover: darken($table-foot-background, $table-hover-scale) !default;
|
||||
|
||||
/// Default font color for header.
|
||||
/// @type Color
|
||||
$table-head-font-color: $body-font-color !default;
|
||||
|
||||
/// Default font color for footer.
|
||||
/// @type Color
|
||||
$table-foot-font-color: $body-font-color !default;
|
||||
|
||||
/// Default value for showing the header when using stacked tables.
|
||||
/// @type Boolean
|
||||
$show-header-for-stacked: false !default;
|
||||
|
||||
/// Breakpoint at which stacked table switches from mobile to desktop view.
|
||||
/// @type Breakpoint
|
||||
$table-stack-breakpoint: medium !default;
|
||||
|
||||
@mixin -zf-table-stripe($stripe: $table-stripe) {
|
||||
tr {
|
||||
// If stripe is set to even, darken the even rows.
|
||||
@if $stripe == even {
|
||||
&:nth-child(even) {
|
||||
border-bottom: 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin -zf-table-unstripe() {
|
||||
tr {
|
||||
border-bottom: 0;
|
||||
border-bottom: $table-border;
|
||||
background-color: $table-background;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin -zf-table-children-styles($stripe: $table-stripe, $is-striped: $table-is-striped) {
|
||||
thead,
|
||||
tbody,
|
||||
tfoot {
|
||||
border: $table-border;
|
||||
background-color: $table-background;
|
||||
}
|
||||
|
||||
// Caption
|
||||
caption {
|
||||
padding: $table-padding;
|
||||
font-weight: $global-weight-bold;
|
||||
}
|
||||
|
||||
// Table head
|
||||
thead {
|
||||
background: $table-head-background;
|
||||
color: $table-head-font-color;
|
||||
}
|
||||
|
||||
// Table foot
|
||||
tfoot {
|
||||
background: $table-foot-background;
|
||||
color: $table-foot-font-color;
|
||||
}
|
||||
|
||||
// Table head and foot
|
||||
thead,
|
||||
tfoot {
|
||||
// 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 {
|
||||
th,
|
||||
td {
|
||||
padding: $table-padding;
|
||||
}
|
||||
}
|
||||
|
||||
// If tables are striped
|
||||
@if $is-striped == true {
|
||||
tbody {
|
||||
@include -zf-table-stripe($stripe);
|
||||
}
|
||||
|
||||
&.unstriped {
|
||||
tbody {
|
||||
@include -zf-table-unstripe();
|
||||
background-color: $table-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If tables are not striped
|
||||
@else if $is-striped == false {
|
||||
tbody {
|
||||
@include -zf-table-unstripe();
|
||||
}
|
||||
|
||||
&.striped {
|
||||
tbody {
|
||||
@include -zf-table-stripe($stripe);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// 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.
|
||||
/// @param {Boolean} $nest [false] - Needed if you only want to apply this to a specific table.
|
||||
@mixin table(
|
||||
$stripe: $table-stripe,
|
||||
$nest: false
|
||||
) {
|
||||
border-collapse: collapse;
|
||||
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 {
|
||||
thead tr {
|
||||
//Darkens the table header rows on hover.
|
||||
&:hover {
|
||||
background-color: $table-head-row-hover;
|
||||
}
|
||||
}
|
||||
|
||||
tfoot tr {
|
||||
//Darkens the table footer rows on hover.
|
||||
&:hover {
|
||||
background-color: $table-foot-row-hover;
|
||||
}
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
//Darkens the non-striped table rows on hover.
|
||||
&:hover {
|
||||
background-color: $table-row-hover;
|
||||
}
|
||||
}
|
||||
|
||||
@if $table-is-striped == true {
|
||||
// Darkens the even striped table rows.
|
||||
@if($table-stripe == even) {
|
||||
&:not(.unstriped) tr:nth-of-type(even):hover {
|
||||
background-color: $table-row-stripe-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// Darkens the odd striped table rows.
|
||||
@else if($table-stripe == odd) {
|
||||
&:not(.unstriped) tr:nth-of-type(odd):hover {
|
||||
background-color: $table-row-stripe-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@else if $table-is-striped == false {
|
||||
// Darkens the even striped table rows.
|
||||
@if($table-stripe == even) {
|
||||
&.striped tr:nth-of-type(even):hover {
|
||||
background-color: $table-row-stripe-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// Darkens the odd striped table rows.
|
||||
@else if($table-stripe == odd) {
|
||||
&.striped tr: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 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@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($table-stack-breakpoint down) {
|
||||
@include table-stack;
|
||||
}
|
||||
}
|
||||
|
||||
table.scroll {
|
||||
@include table-scroll;
|
||||
}
|
||||
|
||||
table.hover {
|
||||
@include table-hover;
|
||||
}
|
||||
|
||||
.table-scroll {
|
||||
overflow-x: auto;
|
||||
|
||||
}
|
||||
}
|
||||
193
src/foundation/components/_tabs.scss
Normal file
193
src/foundation/components/_tabs.scss
Normal file
@@ -0,0 +1,193 @@
|
||||
// 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;
|
||||
|
||||
/// Font color of tab item.
|
||||
/// @type Color
|
||||
$tab-color: $primary-color !default;
|
||||
|
||||
/// Active background color of a tab bar.
|
||||
/// @type Color
|
||||
$tab-background-active: $light-gray !default;
|
||||
|
||||
/// Active font color of tab item.
|
||||
/// @type Color
|
||||
$tab-active-color: $primary-color !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;
|
||||
|
||||
/// 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: $body-font-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 (
|
||||
$margin: $tab-margin,
|
||||
$background: $tab-background,
|
||||
$border-color: $tab-content-border
|
||||
) {
|
||||
@include clearfix;
|
||||
margin: $margin;
|
||||
border: 1px solid $border-color;
|
||||
background: $background;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
/// Augments a tab container to have vertical tabs. Use this in conjunction with `tabs-container()`.
|
||||
@mixin tabs-container-vertical {
|
||||
> li {
|
||||
display: block;
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
/// Adds styles for the links within a tab container. Apply this to the `<li>` elements inside a tab container.
|
||||
@mixin tabs-title (
|
||||
$padding: $tab-item-padding,
|
||||
$font-size: $tab-item-font-size,
|
||||
$color: $tab-color,
|
||||
$color-active: $tab-active-color,
|
||||
$background-hover: $tab-item-background-hover,
|
||||
$background-active: $tab-background-active
|
||||
) {
|
||||
float: #{$global-left};
|
||||
|
||||
> a {
|
||||
@include disable-mouse-outline;
|
||||
display: block;
|
||||
padding: $padding;
|
||||
font-size: $font-size;
|
||||
line-height: 1;
|
||||
color: $color;
|
||||
|
||||
&:hover {
|
||||
background: $background-hover;
|
||||
color: scale-color($color, $lightness: -14%);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&[aria-selected='true'] {
|
||||
background: $background-active;
|
||||
color: $color-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Adds styles for the wrapper that surrounds a tab group's content panes.
|
||||
@mixin tabs-content (
|
||||
$background: $tab-content-background,
|
||||
$color: $tab-content-color,
|
||||
$border-color: $tab-content-border
|
||||
) {
|
||||
border: 1px solid $border-color;
|
||||
border-top: 0;
|
||||
background: $background;
|
||||
color: $color;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
/// 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-color: $tab-content-border
|
||||
) {
|
||||
border: 1px solid $border-color;
|
||||
border-#{$global-left}: 0;
|
||||
}
|
||||
|
||||
/// Adds styles for an individual tab content panel within the tab content container.
|
||||
@mixin tabs-panel (
|
||||
$padding: $tab-content-padding
|
||||
) {
|
||||
display: none;
|
||||
padding: $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: color-pick-contrast($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;
|
||||
}
|
||||
}
|
||||
67
src/foundation/components/_thumbnail.scss
Normal file
67
src/foundation/components/_thumbnail.scss
Normal file
@@ -0,0 +1,67 @@
|
||||
// Foundation for Sites by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
////
|
||||
/// @group thumbnail
|
||||
////
|
||||
|
||||
/// Border around thumbnail images.
|
||||
/// @type Border
|
||||
$thumbnail-border: 4px solid $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 {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-bottom: $thumbnail-margin-bottom;
|
||||
|
||||
border: $thumbnail-border;
|
||||
border-radius: $thumbnail-radius;
|
||||
box-shadow: $thumbnail-shadow;
|
||||
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
@mixin thumbnail-link {
|
||||
transition: $thumbnail-transition;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: $thumbnail-shadow-hover;
|
||||
}
|
||||
|
||||
image {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin foundation-thumbnail {
|
||||
.thumbnail {
|
||||
@include thumbnail;
|
||||
}
|
||||
|
||||
a.thumbnail {
|
||||
@include thumbnail-link;
|
||||
}
|
||||
}
|
||||
84
src/foundation/components/_title-bar.scss
Normal file
84
src/foundation/components/_title-bar.scss
Normal file
@@ -0,0 +1,84 @@
|
||||
// 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 {
|
||||
padding: $titlebar-padding;
|
||||
background: $titlebar-background;
|
||||
color: $titlebar-color;
|
||||
|
||||
@if $global-flexbox {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
@else {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
margin-#{$global-left}: $titlebar-icon-spacing;
|
||||
margin-#{$global-right}: $titlebar-icon-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
@if $global-flexbox {
|
||||
.title-bar-left,
|
||||
.title-bar-right {
|
||||
flex: 1 1 0px; // sass-lint:disable-line zero-unit
|
||||
}
|
||||
|
||||
.title-bar-right {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.title-bar-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.title-bar-right {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.title-bar-title {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-weight: $titlebar-text-font-weight;
|
||||
}
|
||||
}
|
||||
160
src/foundation/components/_tooltip.scss
Normal file
160
src/foundation/components/_tooltip.scss
Normal file
@@ -0,0 +1,160 @@
|
||||
// Foundation for Sites by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
////
|
||||
/// @group tooltip
|
||||
////
|
||||
|
||||
/// Default cursor of the defined term.
|
||||
/// @type Keyword
|
||||
$has-tip-cursor: help !default;
|
||||
|
||||
/// 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 max width for tooltips.
|
||||
/// @type Number
|
||||
$tooltip-max-width: 10rem !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 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
border-bottom: $has-tip-border-bottom;
|
||||
font-weight: $has-tip-font-weight;
|
||||
cursor: $has-tip-cursor;
|
||||
}
|
||||
|
||||
@mixin tooltip {
|
||||
position: absolute;
|
||||
top: calc(100% + #{$tooltip-pip-height});
|
||||
z-index: 1200;
|
||||
|
||||
max-width: $tooltip-max-width;
|
||||
padding: $tooltip-padding;
|
||||
|
||||
border-radius: $tooltip-radius;
|
||||
background-color: $tooltip-background-color;
|
||||
font-size: $tooltip-font-size;
|
||||
color: $tooltip-color;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
&::before {
|
||||
@include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
&.align-center::before {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&.top {
|
||||
&::before {
|
||||
@include css-triangle($tooltip-pip-width, $tooltip-background-color, down);
|
||||
top: 100%;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
&.align-center::before {
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
&::before {
|
||||
@include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
&.align-center::before {
|
||||
bottom: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
&::before {
|
||||
@include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
|
||||
right: 100%;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
&.align-center::before {
|
||||
bottom: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
&.align-top::before {
|
||||
bottom: auto;
|
||||
top: 10%;
|
||||
}
|
||||
|
||||
&.align-bottom::before {
|
||||
bottom: 10%;
|
||||
top: auto;
|
||||
}
|
||||
|
||||
&.align-left::before {
|
||||
left: 10%;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
&.align-right::before {
|
||||
left: auto;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin foundation-tooltip {
|
||||
.has-tip {
|
||||
@include has-tip;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
@include tooltip;
|
||||
}
|
||||
}
|
||||
175
src/foundation/components/_top-bar.scss
Normal file
175
src/foundation/components/_top-bar.scss
Normal file
@@ -0,0 +1,175 @@
|
||||
// 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: 0.5rem 1rem 0.5rem 0 !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;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
@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;
|
||||
}
|
||||
|
||||
input.button { // sass-lint:disable-line no-qualifying-elements
|
||||
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;
|
||||
|
||||
.top-bar-left {
|
||||
flex: 1 1 auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.top-bar-right {
|
||||
flex: 0 1 auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
@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: $topbar-title-spacing;
|
||||
}
|
||||
|
||||
.top-bar-left,
|
||||
.top-bar-right {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
.top-bar-title {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: $topbar-title-spacing;
|
||||
|
||||
.menu-icon {
|
||||
bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.top-bar-right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
135
src/foundation/components/_visibility.scss
Normal file
135
src/foundation/components/_visibility.scss
Normal file
@@ -0,0 +1,135 @@
|
||||
// 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);
|
||||
// Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).
|
||||
// Use a precision under 1px to support browser zoom, but not to low to avoid rounding.
|
||||
// See https://github.com/zurb/foundation-sites/issues/11313
|
||||
$size: -zf-bp-to-em($size) - .00125;
|
||||
|
||||
@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) - .00125;
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user