├── .gitignore ├── sassdoc └── assets │ ├── images │ ├── favicon.png │ ├── logo_light_inline.svg │ ├── logo_light_compact.svg │ ├── logo_full_compact.svg │ └── logo_full_inline.svg │ ├── js │ ├── main.js │ ├── vendor │ │ ├── fuse.min.js │ │ └── prism.min.js │ ├── search.js │ ├── sidebar.js │ └── main.min.js │ └── css │ └── main.css ├── slate ├── config │ ├── _config-helpers.scss │ ├── _config-svg.scss │ ├── _config-accessibility.scss │ ├── _config-forms.scss │ ├── _config-colors.scss │ ├── _config-grid.scss │ ├── _config-ratios.scss │ ├── _config-tables.scss │ ├── _config-layout.scss │ ├── _config-forms-skin.scss │ ├── _config-font-stacks.scss │ ├── _config-typography.scss │ └── _config-buttons.scss ├── libs │ ├── _functions.scss │ ├── functions │ │ ├── _grid.scss │ │ ├── _svg.scss │ │ ├── _math.scss │ │ ├── _type.scss │ │ └── _util.scss │ └── _helpers.scss ├── _slate-config.scss ├── _slate.scss └── kits │ ├── forms │ ├── _form-kit.scss │ ├── _valid-kit.scss │ └── _input-kit.scss │ ├── tables │ └── _table-kit.scss │ ├── grids │ └── _grid-kit.scss │ ├── buttons │ ├── _button-icon-kit.scss │ └── _button-kit.scss │ ├── gradients │ └── _gradient-kit.scss │ ├── layouts │ └── _layout-kit.scss │ └── typography │ └── _type-kit.scss ├── package.json ├── LICENSE.md ├── README.md └── .sass-lint.yml /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | .vagrant 3 | node_modules 4 | .DS_Store 5 | package-lock.json 6 | yarn.lock 7 | yarn-error.log 8 | -------------------------------------------------------------------------------- /sassdoc/assets/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HashandSalt/slatecore/master/sassdoc/assets/images/favicon.png -------------------------------------------------------------------------------- /slate/config/_config-helpers.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Helpers 3 | // ====================================================================== 4 | 5 | // 16:9 ratio 6 | $ioe-padding: ((100 / 16) * 9) !default; 7 | -------------------------------------------------------------------------------- /slate/config/_config-svg.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // SVG Icons 3 | // ====================================================================== 4 | 5 | /// Default Icon Color. 6 | /// @group SVG 7 | $svg-icon-orginal-color: '#000000' !default; 8 | /// Global Replacement Icon Color. 9 | /// @group SVG 10 | $svg-icon-replace-color: $primary !default; 11 | -------------------------------------------------------------------------------- /slate/config/_config-accessibility.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Accessibility 3 | // ====================================================================== 4 | 5 | /// Accessibility border style to be used as a focus state on elements 6 | /// @group Accessibility 7 | $a11y-outline: 2px solid $warning !default; 8 | 9 | /// Accessibility background color to be used as a focus state on elements 10 | /// @group Accessibility 11 | $a11y-background: $warning; 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slatecore", 3 | "version": "6.0.3", 4 | "description": "Slate is a responsive, modern web framework written in Sass.", 5 | "main": "slate/_slate.scss", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/HashandSalt/slatecore" 9 | }, 10 | "bugs": { 11 | "url": "https://github.com/HashandSalt/slatecore/issues" 12 | }, 13 | "scripts": {}, 14 | "license": "MIT", 15 | "devDependencies": { 16 | "sassdoc": "^2.5.0" 17 | }, 18 | "dependencies": {} 19 | } 20 | -------------------------------------------------------------------------------- /slate/libs/_functions.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Functions 7 | // ====================================================================== 8 | 9 | @import 'functions/grid'; 10 | @import 'functions/math'; 11 | @import 'functions/util'; 12 | @import 'functions/type'; 13 | @import 'functions/svg'; 14 | -------------------------------------------------------------------------------- /slate/_slate-config.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Mission Control 7 | // ====================================================================== 8 | 9 | @import 'config/config-colors'; 10 | @import 'config/config-grid'; 11 | @import 'config/config-layout'; 12 | @import 'config/config-ratios'; 13 | @import 'config/config-font-stacks'; 14 | @import 'config/config-typography'; 15 | @import 'config/config-tables'; 16 | @import 'config/config-forms-skin'; 17 | @import 'config/config-forms'; 18 | @import 'config/config-buttons'; 19 | @import 'config/config-accessibility'; 20 | @import 'config/config-svg'; 21 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | 2 | The MIT License (MIT) 3 | 4 | Copyright (c) 2017 Hash&Salt 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. 23 | -------------------------------------------------------------------------------- /slate/config/_config-forms.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Form Complete Skin 3 | // ====================================================================== 4 | 5 | /// Custom Radio & Check Boxes 6 | /// --------------------------------------------------------------------- 7 | 8 | $form-skin: ( 9 | /// Components 10 | components: ( 11 | baseform: true, 12 | inputs: true, 13 | addons: true, 14 | select: true, 15 | validation: true 16 | ), 17 | /// Form Element 18 | form: ( 19 | margin: 0 0 0 0, 20 | padding: 0, 21 | color: $dark, 22 | ), 23 | /// Legend Element 24 | legend: ( 25 | margin: 0 0 24px 0, 26 | line-height: $global-line-height, 27 | ), 28 | /// Fieldset Element 29 | fieldset: ( 30 | margin: 0 0 $gutter-width, 31 | padding: 0 0 $gutter-width, 32 | ), 33 | /// Label Elements 34 | labels: ( 35 | color: $dark, 36 | spacing: 0 0 0 0, 37 | ), 38 | /// Skins 39 | skins: ( 40 | inputs: $input-skin, 41 | addons: $input-skin, 42 | select: $input-skin, 43 | validation: $input-skin, 44 | ), 45 | ) !default; 46 | -------------------------------------------------------------------------------- /slate/_slate.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Config 7 | // ====================================================================== 8 | 9 | @import 'slate-config'; 10 | 11 | // ====================================================================== 12 | // Functions 13 | // ====================================================================== 14 | 15 | @import 'libs/functions'; 16 | 17 | // ====================================================================== 18 | // Helpers 19 | // ====================================================================== 20 | 21 | @import 'libs/helpers'; 22 | 23 | // ====================================================================== 24 | // Kits 25 | // ====================================================================== 26 | 27 | @import 'kits/buttons/button-kit'; 28 | @import 'kits/buttons/button-icon-kit'; 29 | @import 'kits/forms/form-kit'; 30 | @import 'kits/gradients/gradient-kit'; 31 | @import 'kits/grids/grid-kit'; 32 | @import 'kits/layouts/layout-kit'; 33 | @import 'kits/tables/table-kit'; 34 | @import 'kits/typography/type-kit'; 35 | -------------------------------------------------------------------------------- /sassdoc/assets/js/main.js: -------------------------------------------------------------------------------- 1 | /* global document */ 2 | 3 | (function ($, global) { 4 | 'use strict'; 5 | 6 | // Constructor 7 | var App = function (conf) { 8 | this.conf = $.extend({ 9 | // Search module 10 | search: new global.Search(), 11 | 12 | // Sidebar module 13 | sidebar: new global.Sidebar(), 14 | 15 | // Initialisation 16 | init: true 17 | }, conf || {}); 18 | 19 | // Launch the module 20 | if (this.conf.init !== false) { 21 | this.initialize(); 22 | } 23 | }; 24 | 25 | // Initialisation method 26 | App.prototype.initialize = function () { 27 | this.codePreview(); 28 | }; 29 | 30 | // Toggle code preview collapsed/expanded modes 31 | App.prototype.codePreview = function () { 32 | var $item; 33 | var $code; 34 | var switchTo; 35 | 36 | $('.item__code--togglable').on('click', function () { 37 | $item = $(this); 38 | $code = $item.find('code'); 39 | switchTo = $item.attr('data-current-state') === 'expanded' ? 'collapsed' : 'expanded'; 40 | 41 | $item.attr('data-current-state', switchTo); 42 | $code.html($item.attr('data-' + switchTo)); 43 | Prism.highlightElement($code[0]); 44 | }); 45 | }; 46 | 47 | global.App = App; 48 | }(window.jQuery, window)); 49 | 50 | (function ($, global) { 51 | 52 | $(document).ready(function () { 53 | var app = new global.App(); 54 | }); 55 | 56 | }(window.jQuery, window)); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Slate Core 2 | 3 | This repository is part of the _Slate Framework_. _Slate_ is a responsive, modern web framework written in Sass. It is packed full of features to help you build the most awesome things for the web. This is _Slate Core_, the heart and soul of the framework. This is meant to be used in your own asset pipeline, along with [Slate Config](https://github.com/HashandSalt/slateconfig). 4 | 5 | ### Quick Start 6 | 7 | Assuming you have an existing project with an asset pipeline (Gulp, Grunt, Ruby, Laravel, .Net Core etc): 8 | 9 | ```sh 10 | $ cd your/project/folder 11 | $ yarn add slatecore -D 12 | ``` 13 | Include Slate in your project: 14 | 15 | ``` 16 | @import 'slate'; 17 | ``` 18 | However, this will leave you stuck at the default settings. You should take [Slate Config](https://github.com/HashandSalt/slateconfig) from its [repo](https://github.com/HashandSalt/slateconfig) and import that instead. It includes Slate as well as the configs. 19 | 20 | ``` 21 | @import 'slate/slate-engine'; 22 | ``` 23 | ### Don't have an asset pipeline? 24 | 25 | If you need a way to compile your project, we have that covered too. _Slate Engine_ is a build tool based on Laravel Mix, NPM scripts, and bash. It also has Slate ready wired up, and ready to rock. You can get this [here](https://github.com/HashandSalt/slateengine). 26 | 27 | For full documentation, visit www.slateengine.com. 28 | 29 | _Slate_ was made with ♥ by [Hash&Salt](https://www.hashandsalt.com). 30 | -------------------------------------------------------------------------------- /slate/config/_config-colors.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Colors 3 | // ====================================================================== 4 | 5 | /// Monochrome - Bright 6 | /// @group Monochrome Colors 7 | $bright: #eee !default; 8 | /// Monochrome - Gray 9 | /// @group Monochrome Colors 10 | $gray: #9f9f9f !default; 11 | /// Monochrome - Dark 12 | /// @group Monochrome Colors 13 | $dark: #3c3c3c !default; 14 | /// Monochrome - Jet 15 | /// @group Monochrome Colors 16 | $jet: #000 !default; 17 | 18 | /// Palette - Primary 19 | /// @group Palette Colors 20 | $primary: #96def0 !default; 21 | /// Palette - Secondary 22 | /// @group Palette Colors 23 | $secondary: #2980b9 !default; 24 | /// Palette - Secondary 25 | /// @group Palette Colors 26 | $tertiary: #8e44ad !default; 27 | 28 | /// Feedback - Positive 29 | /// @group Feedback Colors 30 | $positive: #2ecc71 !default; 31 | /// Feedback - Negative 32 | /// @group Feedback Colors 33 | $negative: #971318 !default; 34 | /// Feedback - Warning 35 | /// @group Feedback Colors 36 | $warning: #f39c12 !default; 37 | // Feedback - Disabled 38 | // @group Feedback Colors 39 | $disabled: #adadad !default; 40 | 41 | /// Gradient - Start 42 | /// @group Gradient Colors 43 | $gradient-start: $primary !default; 44 | /// Gradient - Middle 45 | /// @group Gradient Colors 46 | $gradient-middle: darken($primary, 20%) !default; 47 | /// Gradient - End 48 | /// @group Gradient Colors 49 | $gradient-end: darken($primary, 40%) !default; 50 | -------------------------------------------------------------------------------- /slate/libs/functions/_grid.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Grid Functions 7 | // ====================================================================== 8 | 9 | 10 | // Calculate element width 11 | @function element-width($column-index, $g-width: $gutter-width) { 12 | @if $total-width == 100% { 13 | $not-rounded-value: (100% + $g-width) / $total-columns * $column-index - $g-width; 14 | $not-rounded-value: $not-rounded-value * 100; 15 | $rounded-value: round($not-rounded-value) / 100; 16 | @return $rounded-value; 17 | } @else { 18 | @return ($total-width + $g-width) / $total-columns * $column-index - $g-width; 19 | } 20 | } 21 | 22 | // Calculate column width 23 | @function column-width($g-width: $gutter-width) { 24 | @if $total-width == 100% { 25 | $not-rounded-value: (100% + $g-width) / $total-columns - $g-width; 26 | $not-rounded-value: $not-rounded-value * 100; 27 | $rounded-value: round($not-rounded-value) / 100; 28 | @return $rounded-value * 1%; 29 | } @else { 30 | @return ($total-width - $g-width * ($total-columns - 1)) / $total-columns; 31 | } 32 | } 33 | 34 | // Calculate container width 35 | @function container-width($c-margin: $container-margin) { 36 | @if $total-width == 100% { 37 | @if $c-margin == auto { 38 | @return 100%; 39 | } 40 | @return 100% - 2 * $c-margin; 41 | } @else { 42 | @return $total-width; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /slate/config/_config-grid.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Grid 3 | // ====================================================================== 4 | 5 | /// Grid Total Columns 6 | /// @group Grid 7 | $total-columns: 12 !default; 8 | 9 | /// Grid Total Width 10 | /// @group Grid 11 | $total-width: 100% !default; 12 | 13 | /// Grid Gutter Width 14 | /// @group Grid 15 | $gutter-width: 2% !default; 16 | 17 | /// Grid Column Bottom Spacing 18 | /// @group Grid 19 | $column-bottom-spacing: 24px !default; 20 | 21 | /// Grid Container margin 22 | /// @group Grid 23 | $container-margin: 2% !default; 24 | 25 | /// Class to use for rows 26 | /// @group Grid 27 | $class-container: 'row' !default; 28 | 29 | /// Class to use for columns 30 | /// @group Grid 31 | $class-column: 'col' !default; 32 | 33 | /// Class to use for push 34 | /// @group Grid 35 | $class-push: 'push' !default; 36 | 37 | /// Center Containers 38 | /// @group Grid 39 | $center-containers: true !default; 40 | 41 | /// Center Containers Max Width 42 | /// @group Grid 43 | $center-container-max-width: 1140px !default; 44 | 45 | /// Breakpoint - tiny 46 | /// @group Breakpoints 47 | $bp-tiny: 320px !default; 48 | 49 | /// Breakpoint - xsmall 50 | /// @group Breakpoints 51 | $bp-xsmall: 480px !default; 52 | 53 | /// Breakpoint - small 54 | /// @group Breakpoints 55 | $bp-small: 640px !default; 56 | 57 | /// Breakpoint - medium 58 | /// @group Breakpoints 59 | $bp-medium: 800px !default; 60 | 61 | /// Breakpoint - large 62 | /// @group Breakpoints 63 | $bp-large: 960px !default; 64 | 65 | /// Breakpoint - xl 66 | /// @group Breakpoints 67 | $bp-xl: 1140px !default; 68 | -------------------------------------------------------------------------------- /slate/kits/forms/_form-kit.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Form Kit 7 | // ====================================================================== 8 | 9 | @import 'input-kit'; 10 | @import 'valid-kit'; 11 | 12 | // ====================================================================== 13 | // Form Globals 14 | // ====================================================================== 15 | 16 | /// [Basic setup for forms, using some sensible defaults.] 17 | /// @param {[type]} $map-name [$form-skin-default] [variable used for the forms skin] 18 | /// @author Hash&Salt 19 | /// @group Forms 20 | @mixin form($map-name: $form-skin) { 21 | @include rem(margin, map-deep-get($map-name, 'form', 'margin')); 22 | @include rem(padding, map-deep-get($map-name, 'form', 'padding')); 23 | 24 | legend { 25 | @include rem(margin, map-deep-get($map-name, 'legend', 'margin')); 26 | @include rem(line-height, map-deep-get($map-name, 'legend', 'line-height')); 27 | } 28 | 29 | fieldset { 30 | @include rem(margin, map-deep-get($map-name, 'fieldset', 'margin')); 31 | @include rem(padding, map-deep-get($map-name, 'fieldset', 'padding')); 32 | display: block; 33 | } 34 | 35 | label, 36 | span.label { 37 | @include rem(margin, map-deep-get($map-name, 'labels', 'spacing')); 38 | display: inline-block; 39 | font-style: inherit; 40 | color: map-deep-get($map-name, 'labels', 'color'); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /slate/libs/functions/_svg.scss: -------------------------------------------------------------------------------- 1 | /// Based on work by Kinaly (https://codepen.io/Kinaly/pen/OMNQpY) and Jacob-e (https://codepen.io/jakob-e/pen/doMoML). We salute you. 2 | @function svg-url($svg) { 3 | // 4 | // Chunk up string in order to avoid 5 | // "stack level too deep" error 6 | // 7 | $encoded: ''; 8 | $slice: 2000; 9 | $index: 0; 10 | $loops: ceil(str-length($svg)/$slice); 11 | @for $i from 1 through $loops { 12 | $chunk: str-slice($svg, $index, $index + $slice - 1); 13 | // 14 | // Encode (may need a few extra replacements) 15 | // 16 | $chunk: str-replace($chunk, '"', '\''); 17 | $chunk: str-replace($chunk, '%', '%25'); 18 | $chunk: str-replace($chunk, '&', '%26'); 19 | $chunk: str-replace($chunk, '#', '%23'); 20 | $chunk: str-replace($chunk, '{', '%7B'); 21 | $chunk: str-replace($chunk, '}', '%7D'); 22 | $chunk: str-replace($chunk, '<', '%3C'); 23 | $chunk: str-replace($chunk, '>', '%3E'); 24 | $encoded: #{$encoded}#{$chunk}; 25 | $index: $index + $slice; 26 | } 27 | @return url("data:image/svg+xml;charset=utf8,#{$encoded}"); 28 | } 29 | // Helper function to replace characters in a string 30 | @function str-replace($string, $search, $replace: '') { 31 | $index: str-index($string, $search); 32 | @if $index { 33 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 34 | } 35 | @return $string; 36 | } 37 | @function svg-url-with-replaced-fill($svg, $fill-to-replace, $new-fill) { 38 | $replaced-svg: str-replace($svg, $fill-to-replace, $new-fill); 39 | $replaced-svg-url: svg-url('#{$replaced-svg}'); 40 | @return $replaced-svg-url; 41 | } 42 | -------------------------------------------------------------------------------- /slate/config/_config-ratios.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Ratios 3 | // ====================================================================== 4 | 5 | /// Minor Second Ratio 6 | /// @group Ratios 7 | $minor-second: 1.067 !default; 8 | 9 | /// Major Second Ratio 10 | /// @group Ratios 11 | $major-second: 1.125 !default; 12 | 13 | /// Minor Third Ratio 14 | /// @group Ratios 15 | $minor-third: 1.2 !default; 16 | 17 | /// Miajor Third Ratio 18 | /// @group Ratios 19 | $major-third: 1.25 !default; 20 | 21 | /// Perfect Forth Ratio 22 | /// @group Ratios 23 | $perfect-fourth: 1.333 !default; 24 | 25 | /// Augmented Forth Ratio 26 | /// @group Ratios 27 | $augmented-fourth: 1.414 !default; 28 | 29 | /// Perfect Fith Ratio 30 | /// @group Ratios 31 | $perfect-fifth: 1.5 !default; 32 | 33 | /// Minor Sixth Ratio 34 | /// @group Ratios 35 | $minor-sixth: 1.6 !default; 36 | 37 | /// Golden Section Ratio 38 | /// @group Ratios 39 | $golden-section: 1.618 !default; 40 | 41 | /// Major Sixth Ratio 42 | /// @group Ratios 43 | $major-sixth: 1.667 !default; 44 | 45 | /// Minor Seventh Ratio 46 | /// @group Ratios 47 | $minor-seventh: 1.778 !default; 48 | 49 | /// Major Seventh Ratio 50 | /// @group Ratios 51 | $major-seventh: 1.875 !default; 52 | 53 | /// Octave Ratio 54 | /// @group Ratios 55 | $octave: 2 !default; 56 | 57 | /// Major Tenth Ratio 58 | /// @group Ratios 59 | $major-tenth: 2.5 !default; 60 | 61 | /// Major Eleventh Ratio 62 | /// @group Ratios 63 | $major-eleventh: 2.667 !default; 64 | 65 | /// Major Twelth Ratio 66 | /// @group Ratios 67 | $major-twelfth: 3 !default; 68 | 69 | /// Double Octave Ratio 70 | /// @group Ratios 71 | $double-octave: 4 !default; 72 | -------------------------------------------------------------------------------- /.sass-lint.yml: -------------------------------------------------------------------------------- 1 | options: 2 | formatter: stylish 3 | files: 4 | include: '**/*.s+(a|c)ss' 5 | rules: 6 | # Extends 7 | extends-before-mixins: 1 8 | extends-before-declarations: 1 9 | placeholder-in-extend: 1 10 | 11 | # Mixins 12 | mixins-before-declarations: 1 13 | 14 | # Line Spacing 15 | one-declaration-per-line: 1 16 | empty-line-between-blocks: 0 17 | single-line-per-selector: 1 18 | 19 | # Disallows 20 | no-attribute-selectors: 0 21 | no-color-hex: 0 22 | no-color-keywords: 1 23 | no-color-literals: 1 24 | no-combinators: 0 25 | no-css-comments: 1 26 | no-debug: 1 27 | no-disallowed-properties: 0 28 | no-duplicate-properties: 1 29 | no-empty-rulesets: 1 30 | no-extends: 0 31 | no-ids: 0 32 | no-important: 1 33 | no-invalid-hex: 1 34 | no-mergeable-selectors: 1 35 | no-misspelled-properties: 1 36 | no-qualifying-elements: 1 37 | no-trailing-whitespace: 0 38 | no-trailing-zero: 1 39 | no-transition-all: 1 40 | no-universal-selectors: 0 41 | no-url-domains: 0 42 | no-url-protocols: 0 43 | no-vendor-prefixes: 0 44 | no-warn: 1 45 | property-units: 0 46 | 47 | # Nesting 48 | declarations-before-nesting: 1 49 | force-attribute-nesting: 1 50 | force-element-nesting: 1 51 | force-pseudo-nesting: 0 52 | 53 | # Name Formats 54 | class-name-format: 1 55 | function-name-format: 1 56 | id-name-format: 0 57 | mixin-name-format: 1 58 | placeholder-name-format: 1 59 | variable-name-format: 1 60 | 61 | # Style Guide 62 | attribute-quotes: 1 63 | bem-depth: 0 64 | border-zero: 1 65 | brace-style: 1 66 | clean-import-paths: 1 67 | empty-args: 1 68 | hex-length: 1 69 | hex-notation: 1 70 | indentation: 0 71 | leading-zero: 1 72 | max-line-length: 0 73 | max-file-line-count: 0 74 | nesting-depth: 0 75 | property-sort-order: 0 76 | pseudo-element: 1 77 | quotes: 1 78 | shorthand-values: 1 79 | url-quotes: 1 80 | variable-for-property: 1 81 | zero-unit: 1 82 | 83 | # Inner Spacing 84 | space-after-comma: 1 85 | space-before-colon: 1 86 | space-after-colon: 1 87 | space-before-brace: 1 88 | space-before-bang: 1 89 | space-after-bang: 1 90 | space-between-parens: 1 91 | space-around-operator: 1 92 | 93 | # Final Items 94 | trailing-semicolon: 1 95 | final-newline: 1 96 | -------------------------------------------------------------------------------- /slate/config/_config-tables.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Tables 3 | // ====================================================================== 4 | 5 | /// Default Table Skin. 6 | /// @group Tables 7 | 8 | $default-table: ( 9 | fontfamily: $global-font-stack, 10 | layout: fixed, 11 | background: #fff, 12 | borderwidth: 1px 1px 1px 1px, 13 | bordercolor: #fff #fff #fff #fff, 14 | borderstyle: solid solid solid solid, 15 | margin: 24px 0 24px 0, 16 | bordercollapse: collapse, 17 | width: 100%, 18 | 19 | caption: ( 20 | background: #fff, 21 | padding: 24px 0, 22 | fontfamily: inherit, 23 | fontweight: $bold, 24 | fontcolor: $global-font-color, 25 | fontsize: 22px, 26 | textalign: center, 27 | borderwidth: 0 0 1px 0, 28 | bordercolor: $bright $bright $bright $bright, 29 | borderstyle: solid solid solid solid 30 | ), 31 | header: ( 32 | background: $bright, 33 | padding: 16px 0, 34 | fontfamily: inherit, 35 | fontweight: $global-font-weight, 36 | fontcolor: $global-font-color, 37 | fontsize: 16px, 38 | textalign: center, 39 | verticalalign: middle, 40 | borderwidth: 1px 1px 1px 1px, 41 | bordercolor: #fff #fff #fff #fff, 42 | borderstyle: solid solid solid solid 43 | ), 44 | body: ( 45 | background: $bright, 46 | oddbackground: $bright, 47 | evenbackground: #fff, 48 | padding: 8px 0, 49 | fontfamily: inherit, 50 | fontweight: $global-font-weight, 51 | fontcolor: $global-font-color, 52 | fontsize: 16px, 53 | textalign: center, 54 | verticalalign: middle, 55 | borderwidth: 1px 1px 1px 1px, 56 | bordercolor: #fff #fff #fff #fff, 57 | borderstyle: solid solid solid solid 58 | ), 59 | footer: ( 60 | background: $bright, 61 | padding: 8px 0, 62 | fontfamily: inherit, 63 | fontweight: $global-font-weight, 64 | fontcolor: $global-font-color, 65 | fontsize: 16px, 66 | textalign: center, 67 | borderwidth: 1px 1px 1px 1px, 68 | bordercolor: #fff #fff #fff #fff, 69 | borderstyle: solid solid solid solid 70 | ), 71 | ) !default; 72 | -------------------------------------------------------------------------------- /slate/libs/functions/_math.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Math Functions 7 | // ====================================================================== 8 | 9 | 10 | // Convert PX to REM 11 | // ====================================================================== 12 | 13 | // https://github.com/pierreburel/sass-rem 14 | @function rem-separator($list, $separator: false) { 15 | @if $separator == 'comma' or $separator == 'space' { 16 | @return append($list, null, $separator); 17 | } 18 | @if function-exists('list-separator') == true { 19 | @return list-separator($list); 20 | } 21 | // list-separator polyfill by Hugo Giraudel (https://sass-compatibility.github.io/#list_separator_function) 22 | $test-list: (); 23 | @each $item in $list { 24 | $test-list: append($test-list, $item, space); 25 | } 26 | @return if($test-list == $list, space, comma); 27 | } 28 | 29 | @function rem-convert($to, $values...) { 30 | $result: (); 31 | $separator: rem-separator($values); 32 | @each $value in $values { 33 | @if type-of($value) == 'number' and unit($value) == 'rem' and $to == 'px' { 34 | $result: append($result, $value / 1rem * $global-base-font-size + 0px, $separator); 35 | } @else 36 | if type-of($value) == 'number' and unit($value) == 'px' and $to == 'rem' { 37 | $result: append($result, $value / $global-base-font-size + 0rem, $separator); 38 | } @else 39 | if type-of($value) == 'list' { 40 | $value-separator: rem-separator($value); 41 | $value: rem-convert($to, $value...); 42 | $value: rem-separator($value, $value-separator); 43 | $result: append($result, $value, $separator); 44 | } @else { 45 | $result: append($result, $value, $separator); 46 | } 47 | } 48 | @return if(length($result) == 1, nth($result, 1), $result); 49 | } 50 | 51 | // REM Values from map 52 | // ====================================================================== 53 | 54 | @function rem($values...) { 55 | @if $rem-px-only { 56 | @return rem-convert(px, $values...); 57 | } @else { 58 | @return rem-convert(rem, $values...); 59 | } 60 | } 61 | 62 | 63 | // To Percentage 64 | // ====================================================================== 65 | 66 | @function to-percentage($input) { 67 | @return $input * 1%; 68 | } 69 | -------------------------------------------------------------------------------- /slate/libs/functions/_type.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Type Functions 7 | // ====================================================================== 8 | 9 | // Type Setting 10 | // ====================================================================== 11 | @function type-setting($base, $ratio, $level) { 12 | $scale: $base; 13 | @if($level < 0) { 14 | $scale: $base / $ratio; 15 | @while($level < -1) { 16 | $scale: $scale / $ratio; 17 | $level: $level + 1; 18 | } 19 | } @else { 20 | @if($level > 0) { 21 | $scale: $base * $ratio; 22 | @while($level > 1) { 23 | $scale: $scale * $ratio; 24 | $level: $level - 1; 25 | } 26 | } 27 | } 28 | @return $scale; 29 | } 30 | 31 | 32 | // Type Scale 33 | // ====================================================================== 34 | @function type-scale($level) { 35 | @return map-get($type-scale, $level); 36 | } 37 | 38 | // Line Heights 39 | // ====================================================================== 40 | @function line-height($level) { 41 | @return map-get($line-heights, $level); 42 | } 43 | 44 | // Unitless lineheight function 45 | // ====================================================================== 46 | @function unitless-line-height($global-base-font-size, $line-height: $global-line-height) { 47 | @return $line-height / $global-base-font-size; 48 | } 49 | 50 | // Fontface 51 | // ====================================================================== 52 | 53 | @function fontsrc($formats, $font-name, $font-family) { 54 | // Return the list of `src` values, in order, that 55 | // a good `@font-face` will need, including only 56 | // those formats specified in the list `$formats`. 57 | $result: (); 58 | @if index($formats, eot) { 59 | $eot-val: url('#{$custom-font-path}#{$font-name}.eot?#iefix') format('embedded-opentype'); 60 | $result: append($result, $eot-val, comma); 61 | } 62 | @if index($formats, woff2) { 63 | $woff2-val: url('#{$custom-font-path}#{$font-name}.woff2') format('woff2'); 64 | $result: append($result, $woff2-val, comma); 65 | } 66 | @if index($formats, woff) { 67 | $woff-val: url('#{$custom-font-path}#{$font-name}.woff') format('woff'); 68 | $result: append($result, $woff-val, comma); 69 | } 70 | @if index($formats, ttf) { 71 | $ttf-val: url('#{$custom-font-path}#{$font-name}.ttf') format('truetype'); 72 | $result: append($result, $ttf-val, comma); 73 | } 74 | @if index($formats, svg) { 75 | $svg-val: url('#{$custom-font-path}#{$font-name}.svg##{$font-family}') format('svg'); 76 | $result: append($result, $svg-val, comma); 77 | } 78 | @return $result; 79 | } 80 | -------------------------------------------------------------------------------- /slate/config/_config-layout.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Gridler Defaults 3 | // ====================================================================== 4 | 5 | /// Gridler Mixin - Class to use for the columns 6 | /// @group Gridler 7 | $gridler-element: $class-column !default; 8 | 9 | // Breakpoints 10 | 11 | /// Gridler Mixin - Small column breakpoint 12 | /// @group Gridler 13 | $gridler-sm: $bp-small !default; 14 | 15 | /// Gridler Mixin - Medium column breakpoint 16 | /// @group Gridler 17 | $gridler-me: $bp-medium !default; 18 | 19 | /// Gridler Mixin - Large column breakpoint 20 | /// @group Gridler 21 | $gridler-lg: $bp-large !default; 22 | 23 | // Columns 24 | 25 | /// Gridler Mixin - Small column count 26 | /// @group Gridler 27 | $gridler-sm-c: 6 !default; 28 | 29 | /// Gridler Mixin - Medium column count 30 | /// @group Gridler 31 | $gridler-me-c: 4 !default; 32 | 33 | /// Gridler Mixin - Large column count 34 | /// @group Gridler 35 | $gridler-lg-c: 3 !default; 36 | 37 | /// Gridler Mixin - Spacing below each column 38 | /// @group Gridler 39 | $gridler-column-bottom-spacing: $column-bottom-spacing !default; 40 | 41 | // ====================================================================== 42 | // Holy Grail Defaults 43 | // ====================================================================== 44 | 45 | /// Holy Grail Left Sidebar Element Class 46 | /// @group Layout Helpers 47 | $holygrail-left-element: 'left' !default; 48 | 49 | /// Holy Grail Middle Class 50 | /// @group Layout Helpers 51 | $holygrail-middle-element: 'middle' !default; 52 | 53 | /// Holy Grail Right Sidebar Class 54 | /// @group Layout Helpers 55 | $holygrail-right-element: 'right' !default; 56 | 57 | /// Holy Grail Left Sidebar Column Width 58 | /// @group Layout Helpers 59 | $holygrail-left-column: 3 !default; 60 | 61 | /// Holy Grail middle Sidebar Column Width 62 | /// @group Layout Helpers 63 | $holygrail-middle-column: 5 !default; 64 | 65 | /// Holy Grail right Sidebar Column Width 66 | /// @group Layout Helpers 67 | $holygrail-right-column: 4 !default; 68 | 69 | /// Holy Grail Breakpoint 70 | /// @group Layout Helpers 71 | $holygrail-breakpoint: $bp-medium !default; 72 | 73 | /// Holy Grail Bottom Spacing 74 | /// @group Layout Helpers 75 | $holygrail-column-bottom-spacing: $column-bottom-spacing !default; 76 | 77 | // ====================================================================== 78 | // Flank 79 | // ====================================================================== 80 | 81 | /// Flank Direction 82 | /// @group Layout Helpers 83 | $flankdir: 'right' !default; 84 | 85 | /// Flank Main Class 86 | /// @group Layout Helpers 87 | $flank-main-element: 'main' !default; 88 | 89 | /// Flank Flank Class 90 | /// @group Layout Helpers 91 | $flank-flank-element: 'flank' !default; 92 | 93 | /// Flank Main Column Width 94 | /// @group Layout Helpers 95 | $flank-main-column: 8 !default; 96 | 97 | /// Flank Column Width 98 | /// @group Layout Helpers 99 | $flank-flank-column: 4 !default; 100 | 101 | /// Flank Breakpoint 102 | /// @group Layout Helpers 103 | $flank-breakpoint: $bp-medium !default; 104 | 105 | /// Flank Bottom Spacing 106 | /// @group Layout Helpers 107 | $flank-column-bottom-spacing: $column-bottom-spacing !default; 108 | -------------------------------------------------------------------------------- /slate/kits/forms/_valid-kit.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Valid Inputs 7 | // ====================================================================== 8 | /// Built-in presentational styles for required elements. Set $form-validation-classes-toggle to false to use HTML5 validation instead. 9 | /// @example scss - Validation 10 | /// .form { 11 | /// @include validation; 12 | /// } 13 | /// @author Hash&Salt 14 | /// @param {Variable} $valid-classes [$form-validation-classes-toggle] - Toggle validation classes. 15 | /// @group Validation 16 | @mixin validation($map-name: $input-skin) { 17 | @if map-deep-get($map-name, 'validation', 'use-classes') == true { 18 | // Valid 19 | .#{map-deep-get($map-name, 'validation', 'valid-class')} { 20 | color: map-deep-get($map-name, 'validation', 'valid-color'); 21 | } 22 | // Invalid 23 | .#{map-deep-get($map-name, 'validation', 'invalid-class')} { 24 | color: map-deep-get($map-name, 'validation', 'invalid-color'); 25 | } 26 | // Required 27 | .#{map-deep-get($map-name, 'validation', 'required-class')} { 28 | color: map-deep-get($map-name, 'validation', 'required-color'); 29 | } 30 | // Classes for required Inputs 31 | @include inputs-all { 32 | // Valid 33 | &.#{map-deep-get($map-name, 'validation', 'valid-class')} { 34 | border-color: map-deep-get($map-name, 'validation', 'valid-input-border-color'); 35 | color: map-deep-get($map-name, 'validation', 'valid-color'); 36 | 37 | &:focus { 38 | border-color: map-deep-get($map-name, 'validation', 'valid-input-border-color'); 39 | color: map-deep-get($map-name, 'validation', 'valid-color'); 40 | } 41 | } 42 | // Invalid 43 | &.#{map-deep-get($map-name, 'validation', 'invalid-class')} { 44 | border-color: map-deep-get($map-name, 'validation', 'invalid-input-border-color'); 45 | color: map-deep-get($map-name, 'validation', 'invalid-color'); 46 | 47 | &:focus { 48 | border-color: map-deep-get($map-name, 'validation', 'invalid-input-border-color'); 49 | color: map-deep-get($map-name, 'validation', 'invalid-color'); 50 | } 51 | } 52 | // Required 53 | &.#{map-deep-get($map-name, 'validation', 'required-class')} { 54 | border-color: map-deep-get($map-name, 'validation', 'required-input-border-color'); 55 | color: map-deep-get($map-name, 'validation', 'required-color'); 56 | 57 | &:focus { 58 | border-color: map-deep-get($map-name, 'validation', 'required-input-border-color'); 59 | color: map-deep-get($map-name, 'validation', 'required-color'); 60 | } 61 | } 62 | } 63 | } @else { 64 | // HTML 5 for Required Inputs 65 | @include inputs-all { 66 | &:focus { 67 | // Required 68 | &:required { 69 | border-color: map-deep-get($map-name, 'validation', 'required-input-border-color'); 70 | color: map-deep-get($map-name, 'validation', 'required-color'); 71 | } 72 | // Valid 73 | &:valid { 74 | border-color: map-deep-get($map-name, 'validation', 'valid-input-border-color'); 75 | color: map-deep-get($map-name, 'validation', 'valid-color'); 76 | } 77 | // Invalid 78 | &:invalid { 79 | border-color: map-deep-get($map-name, 'validation', 'invalid-input-border-color'); 80 | color: map-deep-get($map-name, 'validation', 'invalid-color'); 81 | } 82 | } 83 | } 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /slate/config/_config-forms-skin.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Form Skins 3 | // ====================================================================== 4 | 5 | /// Inputs 6 | /// ---------------------------------------------------------------------- 7 | 8 | /// Default Input Theme 9 | /// @group Inputs 10 | $input-skin: ( 11 | // Global 12 | 'use-borders': true, 13 | 'textlight': $bright, 14 | 'textdark': $dark, 15 | 'width': 100%, 16 | 'height': 54px, 17 | 'margin': 0 0 24px, 18 | 'padding': 12px, 19 | 'font': inherit, 20 | 'font-size': $global-base-font-size, 21 | 'line-height': $global-line-height, 22 | // Backgrounds 23 | 'bg': ( 24 | 'bg-color': #fff, 25 | 'bg-color-hover': #eee, 26 | 'bg-color-focus': #eee, 27 | 'bg-color-disabled': $gray, 28 | ), 29 | // Borders 30 | 'borders': ( 31 | 'border-width': 2px 2px 2px 2px, 32 | 'border-style': solid solid solid solid, 33 | 'border-color': $gray $gray $gray $gray, 34 | 'border-focus-color': $dark $dark $dark $dark, 35 | 'border-hover-color': $positive $positive $positive $positive, 36 | 'border-disabled-color': $disabled $disabled $disabled $disabled, 37 | ), 38 | // Selects 39 | 'selects': ( 40 | 'arrow': '', 41 | 'triangle-color-dark': $dark, 42 | 'triangle-color-light': $gray, 43 | 'triangle-size': 11px 6px, 44 | 'triangle-position': 98% center, 45 | ), 46 | // Addons 47 | 'addons': ( 48 | 'addon-background-color': $primary, 49 | 'addon-hover': $positive, 50 | 'addon-focus': $positive, 51 | 'addon-active': $dark, 52 | 'addon-disabled': #adadad, 53 | 'wrapper': 'form-addon', 54 | 'icon': 'addon-icon', 55 | 'button': 'addon-button', 56 | 'field': 'addon-field', 57 | 'left': 'addon-left', 58 | 'right': 'addon-right', 59 | 'both': 'addon-both', 60 | 'font-weight': $semibold, 61 | 'button-width': 15%, 62 | ), 63 | // Radios & Checkboxes 64 | 'radios': ( 65 | 'width': 36px, 66 | 'height': 36px, 67 | 'selected-color': $positive, 68 | 'radio-radius': 50%, 69 | 'check-radio-margin': 8px, 70 | 71 | 'spacing': 36px, 72 | 'label-h-align': 48px, 73 | 'input-v-align': -5px, 74 | 75 | 'border-checked-color': $gray, 76 | 'border-focus-color': $positive, 77 | 'border-focus-checked-color': $positive, 78 | 'border-hover-color': $positive, 79 | 'border-hover-checked-color': $positive, 80 | 81 | 'checkicon': '', 82 | 'checkicon-size': 15px 14px, 83 | 84 | 'radioicon': '', 85 | 'radioicon-size': 10px 10px, 86 | 87 | ), 88 | // Validation 89 | 'validation': ( 90 | 91 | 'use-classes': true, 92 | 93 | 'invalid-class': 'invalid', 94 | 'valid-class': 'valid', 95 | 'required-class': 'required', 96 | 97 | 'valid-color': $positive, 98 | 'invalid-color': $warning, 99 | 'required-color': $negative, 100 | 'valid-input-border-color': $positive, 101 | 'invalid-input-border-color': $warning, 102 | 'required-input-border-color': $negative, 103 | 104 | ), 105 | 106 | 107 | )!default; 108 | -------------------------------------------------------------------------------- /sassdoc/assets/js/vendor/fuse.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Fuse - Lightweight fuzzy-search 4 | * 5 | * Copyright (c) 2012 Kirollos Risk . 6 | * All Rights Reserved. Apache Software License 2.0 7 | * 8 | * Licensed under the Apache License, Version 2.0 (the "License"); 9 | * you may not use this file except in compliance with the License. 10 | * You may obtain a copy of the License at 11 | * 12 | * http://www.apache.org/licenses/LICENSE-2.0 13 | * 14 | * Unless required by applicable law or agreed to in writing, software 15 | * distributed under the License is distributed on an "AS IS" BASIS, 16 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 17 | * See the License for the specific language governing permissions and 18 | * limitations under the License. 19 | */ 20 | !function(t){function e(t,n){this.list=t,this.options=n=n||{};var i,o,s;for(i=0,keys=["sort","includeScore","shouldSort"],o=keys.length;o>i;i++)s=keys[i],this.options[s]=s in n?n[s]:e.defaultOptions[s];for(i=0,keys=["searchFn","sortFn","keys","getFn"],o=keys.length;o>i;i++)s=keys[i],this.options[s]=n[s]||e.defaultOptions[s]}var n=function(t,e){if(e=e||{},this.options=e,this.options.location=e.location||n.defaultOptions.location,this.options.distance="distance"in e?e.distance:n.defaultOptions.distance,this.options.threshold="threshold"in e?e.threshold:n.defaultOptions.threshold,this.options.maxPatternLength=e.maxPatternLength||n.defaultOptions.maxPatternLength,this.pattern=e.caseSensitive?t:t.toLowerCase(),this.patternLen=t.length,this.patternLen>this.options.maxPatternLength)throw new Error("Pattern length is too long");this.matchmask=1<i;)this._bitapScore(e,l+o)<=u?i=o:d=o,o=Math.floor((d-i)/2+i);for(d=o,s=Math.max(1,l-o+1),r=Math.min(l+o,c)+this.patternLen,a=Array(r+2),a[r+1]=(1<=s;n--)if(p=this.patternAlphabet[t.charAt(n-1)],a[n]=0===e?(a[n+1]<<1|1)&p:(a[n+1]<<1|1)&p|((h[n+1]|h[n])<<1|1)|h[n+1],a[n]&this.matchmask&&(g=this._bitapScore(e,n-1),u>=g)){if(u=g,f=n-1,m.push(f),!(f>l))break;s=Math.max(1,2*l-f)}if(this._bitapScore(e+1,l)>u)break;h=a}return{isMatch:f>=0,score:g}};var i={deepValue:function(t,e){for(var n=0,e=e.split("."),i=e.length;i>n;n++){if(!t)return null;t=t[e[n]]}return t}};e.defaultOptions={id:null,caseSensitive:!1,includeScore:!1,shouldSort:!0,searchFn:n,sortFn:function(t,e){return t.score-e.score},getFn:i.deepValue,keys:[]},e.prototype.search=function(t){var e,n,o,s,r,a=new this.options.searchFn(t,this.options),h=this.list,p=h.length,c=this.options,l=this.options.keys,u=l.length,f=[],d={},g=[],m=function(t,e,n){void 0!==t&&null!==t&&"string"==typeof t&&(s=a.search(t),s.isMatch&&(r=d[n],r?r.score=Math.min(r.score,s.score):(d[n]={item:e,score:s.score},f.push(d[n]))))};if("string"==typeof h[0])for(var e=0;p>e;e++)m(h[e],e,e);else for(var e=0;p>e;e++)for(o=h[e],n=0;u>n;n++)m(this.options.getFn(o,l[n]),o,e);c.shouldSort&&f.sort(c.sortFn);for(var y=c.includeScore?function(t){return f[t]}:function(t){return f[t].item},L=c.id?function(t){return i.deepValue(y(t),c.id)}:function(t){return y(t)},e=0,v=f.length;v>e;e++)g.push(L(e));return g},"object"==typeof exports?module.exports=e:"function"==typeof define&&define.amd?define(function(){return e}):t.Fuse=e}(this); -------------------------------------------------------------------------------- /sassdoc/assets/js/search.js: -------------------------------------------------------------------------------- 1 | (function ($, global) { 2 | 3 | var Search = function (conf) { 4 | this.conf = $.extend({ 5 | // Search DOM 6 | search: { 7 | items: '.sassdoc__item', 8 | input: '#js-search-input', 9 | form: '#js-search', 10 | suggestionsWrapper: '#js-search-suggestions' 11 | }, 12 | 13 | // Fuse options 14 | fuse: { 15 | keys: ['name'], 16 | threshold: 0.3 17 | }, 18 | 19 | init: true 20 | }, conf || {}); 21 | 22 | if (this.conf.init === true) { 23 | this.initialize(); 24 | } 25 | }; 26 | 27 | Search.prototype.initialize = function () { 28 | // Fuse engine instanciation 29 | this.index = new Fuse($.map($(this.conf.search.items), function (item) { 30 | var $item = $(item); 31 | 32 | return { 33 | group: $item.data('group'), 34 | name: $item.data('name'), 35 | type: $item.data('type'), 36 | node: $item 37 | }; 38 | }), this.conf.fuse); 39 | 40 | this.initializeSearch(); 41 | }; 42 | 43 | // Fill DOM with search suggestions 44 | Search.prototype.fillSuggestions = function (items) { 45 | var searchSuggestions = $(this.conf.search.suggestionsWrapper); 46 | searchSuggestions.html(''); 47 | 48 | var suggestions = $.map(items.slice(0, 10), function (item) { 49 | var $li = $('
  • ', { 50 | 'data-group': item.group, 51 | 'data-type': item.type, 52 | 'data-name': item.name, 53 | 'html': '' + item.type.slice(0, 3) + ' ' + item.name + '' 54 | }); 55 | 56 | searchSuggestions.append($li); 57 | return $li; 58 | }); 59 | 60 | return suggestions; 61 | }; 62 | 63 | // Perform a search on a given term 64 | Search.prototype.search = function (term) { 65 | return this.fillSuggestions(this.index.search(term)); 66 | }; 67 | 68 | // Search logic 69 | Search.prototype.initializeSearch = function () { 70 | var searchForm = $(this.conf.search.form); 71 | var searchInput = $(this.conf.search.input); 72 | var searchSuggestions = $(this.conf.search.suggestionsWrapper); 73 | 74 | var currentSelection = -1; 75 | var suggestions = []; 76 | var selected; 77 | 78 | var self = this; 79 | 80 | // Clicking on a suggestion 81 | searchSuggestions.on('click', function (e) { 82 | var target = $(event.target); 83 | 84 | if (target.nodeName === 'A') { 85 | searchInput.val(target.parent().data('name')); 86 | suggestions = self.fillSuggestions([]); 87 | } 88 | }); 89 | 90 | // Filling the form 91 | searchForm.on('keyup', function (e) { 92 | e.preventDefault(); 93 | 94 | // Enter 95 | if (e.keyCode === 13) { 96 | if (selected) { 97 | suggestions = self.fillSuggestions([]); 98 | searchInput.val(selected.data('name')); 99 | window.location = selected.children().first().attr('href'); 100 | } 101 | 102 | e.stopPropagation(); 103 | } 104 | 105 | // KeyDown 106 | if (e.keyCode === 40) { 107 | currentSelection = (currentSelection + 1) % suggestions.length; 108 | } 109 | 110 | // KeyUp 111 | if (e.keyCode === 38) { 112 | currentSelection = currentSelection - 1; 113 | 114 | if (currentSelection < 0) { 115 | currentSelection = suggestions.length - 1; 116 | } 117 | } 118 | 119 | if (suggestions[currentSelection]) { 120 | if (selected) { 121 | selected.removeClass('selected'); 122 | } 123 | 124 | selected = suggestions[currentSelection]; 125 | selected.addClass('selected'); 126 | } 127 | 128 | }); 129 | 130 | searchInput.on('keyup', function (e) { 131 | if (e.keyCode !== 40 && e.keyCode !== 38) { 132 | currentSelection = -1; 133 | suggestions = self.search($(this).val()); 134 | } 135 | 136 | else { 137 | e.preventDefault(); 138 | } 139 | }).on('search', function () { 140 | suggestions = self.search($(this).val()); 141 | }); 142 | }; 143 | 144 | global.Search = Search; 145 | 146 | }(window.jQuery, window)); 147 | -------------------------------------------------------------------------------- /sassdoc/assets/js/sidebar.js: -------------------------------------------------------------------------------- 1 | (function ($, global) { 2 | 3 | var Sidebar = function (conf) { 4 | this.conf = $.extend({ 5 | 6 | // Collapsed class 7 | collapsedClass: 'is-collapsed', 8 | 9 | // Storage key 10 | storageKey: '_sassdoc_sidebar_index', 11 | 12 | // Index attribute 13 | indexAttribute: 'data-slug', 14 | 15 | // Toggle button 16 | toggleBtn: '.js-btn-toggle', 17 | 18 | // Automatic initialization 19 | init: true 20 | }, conf || {}); 21 | 22 | if (this.conf.init === true) { 23 | this.initialize(); 24 | } 25 | }; 26 | 27 | /** 28 | * Initialize module 29 | */ 30 | Sidebar.prototype.initialize = function () { 31 | this.conf.nodes = $('[' + this.conf.indexAttribute + ']'); 32 | 33 | this.load(); 34 | this.updateDOM(); 35 | this.bind(); 36 | this.loadToggle(); 37 | }; 38 | 39 | 40 | /** 41 | * Load sidebar toggle 42 | */ 43 | Sidebar.prototype.loadToggle = function () { 44 | $('', { 45 | 'class': 'layout-toggle', 46 | 'html': '×', 47 | 'data-alt': '→' 48 | }).appendTo( $('.header') ); 49 | 50 | $('.layout-toggle').on('click', function () { 51 | var $this = $(this); 52 | var alt; 53 | 54 | $('body').toggleClass('sidebar-closed'); 55 | 56 | alt = $this.html(); 57 | $this.html($this.data('alt')); 58 | $this.data('alt', alt); 59 | }); 60 | }; 61 | 62 | /** 63 | * Load data from storage or create fresh index 64 | */ 65 | Sidebar.prototype.load = function () { 66 | var index = 'localStorage' in global ? 67 | global.localStorage.getItem(this.conf.storageKey) : 68 | null; 69 | 70 | this.index = index ? JSON.parse(index) : this.buildIndex(); 71 | }; 72 | 73 | /** 74 | * Build a fresh index 75 | */ 76 | Sidebar.prototype.buildIndex = function () { 77 | var index = {}; 78 | var $item; 79 | 80 | this.conf.nodes.each($.proxy(function (index, item) { 81 | $item = $(item); 82 | 83 | index[$item.attr(this.conf.indexAttribute)] = !$item.hasClass(this.conf.collapsedClass); 84 | }, this)); 85 | 86 | return index; 87 | }; 88 | 89 | /** 90 | * Update DOM based on index 91 | */ 92 | Sidebar.prototype.updateDOM = function () { 93 | var item; 94 | 95 | for (item in this.index) { 96 | if (this.index[item] === false) { 97 | $('[' + this.conf.indexAttribute + '="' + item + '"]').addClass(this.conf.collapsedClass); 98 | } 99 | } 100 | }; 101 | 102 | /** 103 | * Save index in storage 104 | */ 105 | Sidebar.prototype.save = function () { 106 | if (!('localStorage' in global)) { 107 | return; 108 | } 109 | 110 | global.localStorage.setItem(this.conf.storageKey, JSON.stringify(this.index)); 111 | }; 112 | 113 | /** 114 | * Bind UI events 115 | */ 116 | Sidebar.prototype.bind = function () { 117 | var $item, slug, fn, text; 118 | var collapsed = false; 119 | 120 | // Save index in localStorage 121 | global.onbeforeunload = $.proxy(function () { 122 | this.save(); 123 | }, this); 124 | 125 | // Toggle all 126 | $(this.conf.toggleBtn).on('click', $.proxy(function (event) { 127 | $node = $(event.target); 128 | 129 | text = $node.attr('data-alt'); 130 | $node.attr('data-alt', $node.text()); 131 | $node.text(text); 132 | 133 | fn = collapsed === true ? 'removeClass' : 'addClass'; 134 | 135 | this.conf.nodes.each($.proxy(function (index, item) { 136 | $item = $(item); 137 | slug = $item.attr(this.conf.indexAttribute); 138 | 139 | this.index[slug] = collapsed; 140 | 141 | $('[' + this.conf.indexAttribute + '="' + slug + '"]')[fn](this.conf.collapsedClass); 142 | }, this)); 143 | 144 | collapsed = !collapsed; 145 | this.save(); 146 | }, this)); 147 | 148 | // Toggle item 149 | this.conf.nodes.on('click', $.proxy(function (event) { 150 | $item = $(event.target); 151 | slug = $item.attr(this.conf.indexAttribute); 152 | 153 | // Update index 154 | this.index[slug] = !this.index[slug]; 155 | 156 | // Update DOM 157 | $item.toggleClass(this.conf.collapsedClass); 158 | }, this)); 159 | }; 160 | 161 | global.Sidebar = Sidebar; 162 | 163 | }(window.jQuery, window)); 164 | -------------------------------------------------------------------------------- /slate/config/_config-font-stacks.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Font Stacks 3 | // ====================================================================== 4 | 5 | /// Simple Times Font Stack 6 | /// @example scss - Embed 7 | /// .example { 8 | /// font-family: $times; 9 | /// } 10 | /// @group Font Stacks 11 | 12 | $times: Times, 'Times New Roman', serif !default; 13 | 14 | /// Simple Arial Font Stack 15 | /// @example scss - Embed 16 | /// .example { 17 | /// font-family: $arial; 18 | /// } 19 | /// @group Font Stacks 20 | 21 | $arial: Arial, sans-serif !default; 22 | 23 | /// Simple Georgia Font Stack 24 | /// @example scss - Embed 25 | /// .example { 26 | /// font-family: $georgia; 27 | /// } 28 | /// @group Font Stacks 29 | 30 | $georgia: Georgia, serif !default; 31 | 32 | /// Simple Garamond Font Stack 33 | /// @example scss - Embed 34 | /// .example { 35 | /// font-family: $garamond; 36 | /// } 37 | /// @group Font Stacks 38 | 39 | $garamond: 'Apple Garamond', 'ITC Garamond Narrow', 'Garamond', serif !default; 40 | 41 | /// Simple Helvetica Font Stack 42 | /// @example scss - Embed 43 | /// .example { 44 | /// font-family: $helvetica; 45 | /// } 46 | /// @group Font Stacks 47 | 48 | $helvetica: 'Helvetica Neue', Helvetica, sans-serif !default; 49 | 50 | /// Simple Verdana Font Stack 51 | /// @example scss - Embed 52 | /// .example { 53 | /// font-family: $verdana; 54 | /// } 55 | /// @group Font Stacks 56 | 57 | $verdana: 'Verdana Ref', Verdana, sans-serif !default; 58 | 59 | /// Simple Trebuchet Font Stack 60 | /// @example scss - Embed 61 | /// .example { 62 | /// font-family: $trebuchet; 63 | /// } 64 | /// @group Font Stacks 65 | 66 | $trebuchet: 'Trebuchet MS', sans-serif !default; 67 | 68 | /// Simple Gill Sans Font Stack 69 | /// @example scss - Embed 70 | /// .example { 71 | /// font-family: $gillsans; 72 | /// } 73 | /// @group Font Stacks 74 | 75 | $gillsans: 'Gill Sans MT', 'Gill Sans', Tahoma, Geneva, sans-serif !default; 76 | 77 | /// Full Times Font Stack 78 | /// @example scss - Embed 79 | /// .example { 80 | /// font-family: $stimes; 81 | /// } 82 | /// @group Font Stacks 83 | 84 | $stimes: Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', 'Times New Roman', Times, serif !default; 85 | 86 | /// Full Georgia Font Stack 87 | /// @example scss - Embed 88 | /// .example { 89 | /// font-family: $sgeorgia; 90 | /// } 91 | /// @group Font Stacks 92 | 93 | $sgeorgia: Constantia, 'Lucida Bright', Lucidabright, 'Lucida Serif', Lucida, 'DejaVu Serif', 'Bitstream Vera Serif', 'Liberation Serif', Georgia, serif !default; 94 | 95 | /// Full Garamond Font Stack 96 | /// @example scss - Embed 97 | /// .example { 98 | /// font-family: $sgaramond; 99 | /// } 100 | /// @group Font Stacks 101 | 102 | $sgaramond: 'Palatino Linotype', Palatino, Palladio, 'URW Palladio L', 'Book Antiqua', Baskerville, 'Bookman Old Style', 'Bitstream Charter', 'Nimbus Roman No9 L', 'Apple Garamond', 'ITC Garamond Narrow', 'New Century Schoolbook', 'Century Schoolbook', 'Century Schoolbook L', Garamond, serif !default; 103 | 104 | /// Full Helvetica Font Stack 105 | /// @example scss - Embed 106 | /// .example { 107 | /// font-family: $shelvetica; 108 | /// } 109 | /// @group Font Stacks 110 | 111 | $shelvetica: Frutiger, 'Frutiger Linotype', Univers, Calibri, 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', Myriad, 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, 'Helvetica Neue', Helvetica, sans-serif !default; 112 | 113 | /// Full Verdana Font Stack 114 | /// @example scss - Embed 115 | /// .example { 116 | /// font-family: $sverdana; 117 | /// } 118 | /// @group Font Stacks 119 | 120 | $sverdana: Corbel, 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Liberation Sans', 'Verdana Ref', Verdana, sans-serif !default; 121 | 122 | /// Full Trebuchet Font Stack 123 | /// @example scss - Embed 124 | /// .example { 125 | /// font-family: $strebuchet; 126 | /// } 127 | /// @group Font Stacks 128 | 129 | $strebuchet: 'Segoe UI', Candara, 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Trebuchet, sans-serif !default; 130 | 131 | /// Full Gill Sans Font Stack 132 | /// @example scss - Embed 133 | /// .example { 134 | /// font-family: $sgillsans; 135 | /// } 136 | /// @group Font Stacks 137 | 138 | $sgillsans: Frutiger, 'Frutiger Linotype', Univers, Calibri, 'Myriad Pro', Myriad, 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, 'Gill Sans MT', 'Gill Sans', sans-serif !default; 139 | 140 | /// Terminal / Monospace font 141 | /// @example scss - Embed 142 | /// pre { 143 | /// font-family: $terminal; 144 | /// } 145 | /// @group Font Stacks 146 | 147 | $terminal: Monaco, 'Lucida Sans Typewriter', Consolas, 'Courier New', monospace !default; 148 | -------------------------------------------------------------------------------- /slate/kits/tables/_table-kit.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Table Kit 7 | // ====================================================================== 8 | // ====================================================================== 9 | // Tables 10 | // ====================================================================== 11 | /// Quickly skin tables using variables from a SASS map 12 | /// @example scss - Tables 13 | /// table { 14 | /// @include table($default-table); 15 | /// } 16 | /// @author Hash&Salt 17 | /// @param {Variable} $table-skin [$default-table] - SASS map to use for the skin. 18 | /// @group Tables 19 | @mixin table($table-skin: $default-table) { 20 | @include rem(border-width, map-deep-get($table-skin, 'borderwidth')); 21 | font-family: map-deep-get($table-skin, 'fontfamily'); 22 | table-layout: map-deep-get($table-skin, 'layout'); 23 | border-color: map-deep-get($table-skin, 'bordercolor'); 24 | border-style: map-deep-get($table-skin, 'borderstyle'); 25 | border-collapse: map-deep-get($table-skin, 'bordercollapse'); 26 | width: map-deep-get($table-skin, 'width'); 27 | margin: map-deep-get($table-skin, 'margin'); 28 | background: map-deep-get($table-skin, 'background'); 29 | 30 | caption { 31 | @include rem(padding, map-deep-get($table-skin, 'caption', 'padding')); 32 | @include rem(font-size, map-deep-get($table-skin, 'caption', 'fontsize')); 33 | @include rem(border-width, map-deep-get($table-skin, 'caption', 'borderwidth')); 34 | background: map-deep-get($table-skin, 'caption', 'background'); 35 | font-family: map-deep-get($table-skin, 'caption', 'fontfamily'); 36 | font-weight: map-deep-get($table-skin, 'caption', 'fontweight'); 37 | color: map-deep-get($table-skin, 'caption', 'fontcolor'); 38 | text-align: map-deep-get($table-skin, 'caption', 'textalign'); 39 | border-color: map-deep-get($table-skin, 'caption', 'bordercolor'); 40 | border-style: map-deep-get($table-skin, 'caption', 'borderstyle'); 41 | } 42 | 43 | thead { 44 | td, 45 | th { 46 | @include rem(border-width, map-deep-get($table-skin, 'header', 'borderwidth')); 47 | @include rem(font-size, map-deep-get($table-skin, 'header', 'fontsize')); 48 | @include rem(padding, map-deep-get($table-skin, 'header', 'padding')); 49 | background: map-deep-get($table-skin, 'header', 'background'); 50 | font-family: map-deep-get($table-skin, 'header', 'fontfamily'); 51 | font-weight: map-deep-get($table-skin, 'header', 'fontweight'); 52 | color: map-deep-get($table-skin, 'header', 'fontcolor'); 53 | text-align: map-deep-get($table-skin, 'header', 'textalign'); 54 | border-color: map-deep-get($table-skin, 'header', 'bordercolor'); 55 | border-style: map-deep-get($table-skin, 'header', 'borderstyle'); 56 | } 57 | } 58 | 59 | tbody { 60 | td { 61 | @include rem(font-size, map-deep-get($table-skin, 'body', 'fontsize')); 62 | @include rem(border-width, map-deep-get($table-skin, 'body', 'borderwidth')); 63 | @include rem(padding, map-deep-get($table-skin, 'body', 'padding')); 64 | background: map-deep-get($table-skin, 'body', 'background'); 65 | font-family: map-deep-get($table-skin, 'body', 'fontfamily'); 66 | font-weight: map-deep-get($table-skin, 'body', 'fontweight'); 67 | color: map-deep-get($table-skin, 'body', 'fontcolor'); 68 | text-align: map-deep-get($table-skin, 'body', 'textalign'); 69 | border-color: map-deep-get($table-skin, 'body', 'bordercolor'); 70 | border-style: map-deep-get($table-skin, 'body', 'borderstyle'); 71 | vertical-align: map-deep-get($table-skin, 'body', 'bverticalalign'); 72 | } 73 | 74 | tr:nth-child(even) { 75 | td { 76 | background: map-deep-get($table-skin, 'body', 'evenbackground'); 77 | } 78 | } 79 | 80 | tr:nth-child(odd) { 81 | td { 82 | background: map-deep-get($table-skin, 'body', 'oddbackground'); 83 | } 84 | } 85 | } 86 | 87 | tfoot { 88 | td { 89 | @include rem(font-size, map-deep-get($table-skin, 'footer', 'fontsize')); 90 | @include rem(border-width, map-deep-get($table-skin, 'footer', 'borderwidth')); 91 | @include rem(padding, map-deep-get($table-skin, 'footer', 'padding')); 92 | background: map-deep-get($table-skin, 'footer', 'background'); 93 | font-family: map-deep-get($table-skin, 'footer', 'fontfamily'); 94 | font-weight: map-deep-get($table-skin, 'footer', 'fontweight'); 95 | color: map-deep-get($table-skin, 'footer', 'fontcolor'); 96 | text-align: map-deep-get($table-skin, 'footer', 'textalign'); 97 | border-color: map-deep-get($table-skin, 'footer', 'bordercolor'); 98 | border-style: map-deep-get($table-skin, 'footer', 'borderstyle'); 99 | vertical-align: map-deep-get($table-skin, 'footer', 'bverticalalign'); 100 | } 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /slate/libs/functions/_util.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Utility Functions 7 | // ====================================================================== 8 | 9 | @mixin ios { 10 | @supports (-webkit-overflow-scrolling:touch) { 11 | @content; 12 | } 13 | } 14 | 15 | // Deep Map Get 16 | // ====================================================================== 17 | 18 | /// Map deep get 19 | /// @author Hugo Giraudel 20 | /// @param {Map} $map - Map 21 | /// @param {Arglist} $keys - Key chain 22 | /// @return {*} - Desired value 23 | @function map-deep-get($map, $keys...) { 24 | @each $key in $keys { 25 | $map: map-get($map, $key); 26 | } 27 | @return $map; 28 | } 29 | 30 | /// Update a key deeply nested 31 | /// @author Hugo Giraudel 32 | /// @param {Map} $map - Map to update 33 | /// @param {Arglist} $keys - Keys to access to value to update 34 | /// @param {*} $value - New value (last member of `$keys`) 35 | /// @return {Map} - Updated map 36 | @function map-deep-set($map, $keys.../*, $value */) { 37 | $map-list: ($map,); 38 | $result: null; 39 | 40 | @if length($keys) == 2 { 41 | @return map-merge($map, (nth($keys, 1): nth($keys, -1))); 42 | } 43 | 44 | @for $i from 1 through length($keys) - 2 { 45 | $map-list: append($map-list, map-get(nth($map-list, -1), nth($keys, $i))); 46 | } 47 | 48 | @for $i from length($map-list) through 1 { 49 | $result: map-merge(nth($map-list, $i), (nth($keys, $i): if($i == length($map-list), nth($keys, -1), $result))); 50 | } 51 | 52 | @return $result; 53 | } 54 | 55 | /// Compute the maximum depth of a map 56 | /// @param {Map} $map 57 | /// @return {Number} max depth of `$map` 58 | @function map-depth($map) { 59 | $level: 1; 60 | 61 | @each $key, $value in $map { 62 | @if type-of($value) == "map" { 63 | $level: max(map-depth($value) + 1, $level); 64 | } 65 | } 66 | 67 | @return $level; 68 | } 69 | 70 | /// Test if map got all `$keys` at first level 71 | /// @author Hugo Giraudel 72 | /// @param {Map} $map - Map 73 | /// @param {Arglist} $keys - Keys to test 74 | /// @return {Bool} 75 | @function map-has-keys($map, $keys...) { 76 | @each $key in $keys { 77 | @if not map-has-key($map, $key) { 78 | @return false; 79 | } 80 | } 81 | 82 | @return true; 83 | } 84 | 85 | /// Test if map got all `$keys` nested with each others 86 | /// @author Hugo Giraudel 87 | /// @param {Map} $map - Map 88 | /// @param {Arglist} $keys - Keys to test 89 | /// @return {Bool} 90 | @function map-has-nested-keys($map, $keys...) { 91 | @each $key in $keys { 92 | @if not map-has-key($map, $key) { 93 | @return false; 94 | } 95 | $map: map-get($map, $key); 96 | } 97 | 98 | @return true; 99 | } 100 | 101 | /// An equivalent of `zip` function but for maps. 102 | /// Takes two lists, the first for keys, second for values. 103 | /// @param {List} $keys - Keys for map 104 | /// @param {List} $values - Values for map 105 | /// @return {Map} Freshly created map 106 | /// @see http://sass-lang.com/documentation/Sass/Script/Functions.html#zip-instance_method 107 | @function map-zip($keys, $values) { 108 | $l-keys: length($keys); 109 | $l-values: length($values); 110 | $min: min($l-keys, $l-values); 111 | $map: (); 112 | 113 | @if $l-keys != $l-values { 114 | @warn "There are #{$l-keys} key(s) for #{$l-values} value(s) in the map for `map-zip`. " 115 | + "Resulting map will only have #{$min} pairs."; 116 | } 117 | 118 | @if $min == 0 { 119 | @return $map; 120 | } 121 | 122 | @for $i from 1 through $min { 123 | $map: map-merge($map, (nth($keys, $i): nth($values, $i))); 124 | } 125 | 126 | @return $map; 127 | } 128 | 129 | /// jQuery-style extend function 130 | /// About `map-merge()`: 131 | /// * only takes 2 arguments 132 | /// * is not recursive 133 | /// @param {Map} $map - first map 134 | /// @param {ArgList} $maps - other maps 135 | /// @param {Bool} $deep - recursive mode 136 | /// @return {Map} 137 | @function map-extend($map, $maps.../*, $deep */) { 138 | $last: nth($maps, -1); 139 | $deep: $last == true; 140 | $max: if($deep, length($maps) - 1, length($maps)); 141 | 142 | // Loop through all maps in $maps... 143 | @for $i from 1 through $max { 144 | // Store current map 145 | $current: nth($maps, $i); 146 | 147 | // If not in deep mode, simply merge current map with map 148 | @if not $deep { 149 | $map: map-merge($map, $current); 150 | } @else { 151 | // If in deep mode, loop through all tuples in current map 152 | @each $key, $value in $current { 153 | 154 | // If value is a nested map and same key from map is a nested map as well 155 | @if type-of($value) == "map" and type-of(map-get($map, $key)) == "map" { 156 | // Recursive extend 157 | $value: map-extend(map-get($map, $key), $value, true); 158 | } 159 | 160 | // Merge current tuple with map 161 | $map: map-merge($map, ($key: $value)); 162 | } 163 | } 164 | } 165 | 166 | @return $map; 167 | } 168 | -------------------------------------------------------------------------------- /slate/libs/_helpers.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Helpers 7 | // ====================================================================== 8 | 9 | /// Fix stupid box model in stupid browsers. 10 | /// @example scss 11 | /// html { 12 | /// @include fix-box-model; 13 | /// } 14 | /// @group Helpers 15 | @mixin fix-box-model { 16 | box-sizing: border-box; 17 | 18 | *, *:before, *:after { 19 | box-sizing: inherit; 20 | } 21 | } 22 | 23 | /// Multiple Clearfixes in one mixin! Use modern, PIE or Mojo Clearfixes, depending on your needs. 24 | /// @example scss - Clearfix 25 | /// .yourelement { 26 | /// @include clearfix(modern); 27 | /// @include clearfix(pie); 28 | /// @include clearfix(mojo); 29 | /// ... 30 | /// } 31 | /// @link http://www.positioniseverything.net/easyclearing.html 32 | /// @link http://cssmojo.com/latest_new_clearfix_so_far/ 33 | /// @param {string} $fix-type [modern] - Desired CSS property 34 | /// @group Clearfix 35 | @mixin clearfix($fix-type: "modern") { 36 | 37 | // Moden clearfix. 38 | @if $fix-type == "modern" { 39 | overflow: hidden; 40 | } 41 | // Position is everything clearfix clearfix. 42 | @if $fix-type == "pie" { 43 | *zoom: 1; 44 | 45 | &:after { 46 | content: "\0020"; 47 | display: block; 48 | height: 0; 49 | clear: both; 50 | overflow: hidden; 51 | visibility: hidden; 52 | } 53 | } 54 | // Mojo Clearfix. 55 | @if $fix-type == "mojo" { 56 | &:after { 57 | content: ""; 58 | display: table; 59 | clear: both; 60 | } 61 | } 62 | } 63 | 64 | 65 | /// iFrame / Object / Emded helper to make those elements responsive. Works a treat on things like google maps and youtube videos. 66 | /// Apply this to the PARENT element, not the iframe. 67 | /// @example scss - IOE 68 | /// .yourelement { 69 | /// @include ioe; 70 | /// ... 71 | /// } 72 | /// @group Media 73 | @mixin ioe { 74 | height: 0; 75 | padding-bottom: to-percentage($ioe-padding); 76 | position: relative; 77 | 78 | canvas, 79 | embed, 80 | iframe, 81 | object, 82 | video { 83 | border: 0; 84 | height: 100%; 85 | left: 0; 86 | position: absolute; 87 | top: 0; 88 | user-select: none; 89 | width: 100%; 90 | } 91 | } 92 | 93 | // Min-Width Media Query Mixin 94 | /// @example scss 95 | /// @include break(sm) { 96 | /// display: block; 97 | /// } 98 | /// @group Helpers 99 | @mixin minbreak($size: $bp-medium) { 100 | @media screen and (min-width: rem-convert(px, $size)) { 101 | @content; 102 | } 103 | } 104 | 105 | /// Max-Width Media Query Mixin 106 | /// @example scss 107 | /// @include break(sm) { 108 | /// display: block; 109 | /// } 110 | /// @group Helpers 111 | @mixin maxbreak($size: $bp-medium) { 112 | @media screen and (max-width: rem-convert(px, $size)) { 113 | @content; 114 | } 115 | } 116 | 117 | /// Retina Media Query Mixin 118 | /// @example scss 119 | /// @include retina { 120 | /// ... 121 | /// } 122 | /// @group Helpers 123 | @mixin retina { 124 | @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 125 | @content; 126 | } 127 | } 128 | 129 | /// Print Mixin 130 | /// @example scss 131 | /// @include print { 132 | /// ... 133 | /// } 134 | /// @group Helpers 135 | @mixin print { 136 | @media print { 137 | @content; 138 | } 139 | } 140 | 141 | /// REM Calculator. Generate REM sizes from a pixel value on almost any css property 142 | /// @example scss - Free Type 143 | /// .yourelement { 144 | /// @include rem(margin-top, 16px); 145 | /// } 146 | /// .yourelement { 147 | /// @include rem(margin, 16px 20px 16px 20px); 148 | /// } 149 | /// @param {string} $properties - Desired CSS property 150 | /// @param {number} $values - Desired values to convert 151 | /// @group Helpers 152 | @mixin rem($properties, $values...) { 153 | @if type-of($properties) == "map" { 154 | @each $property in map-keys($properties) { 155 | @include rem($property, map-get($properties, $property)); 156 | } 157 | } 158 | @else { 159 | @each $property in $properties{ 160 | @if $rem-fallback or $rem-px-only { 161 | #{$property}: rem-convert(px, $values...); 162 | } 163 | @if not $rem-px-only { 164 | #{$property}: rem-convert(rem, $values...); 165 | } 166 | } 167 | } 168 | } 169 | 170 | /// SVG. Use SVG graphic from a variable and optionally change its 171 | /// @example scss - SVG Icon Color 172 | /// .yourelement { 173 | /// @include svgbg($youriconvar); 174 | /// } 175 | /// @param {string} $icon - Variable with svg as a string 176 | /// @param {string} $newcolor - Variable with svg as a string 177 | /// @param {string} $oldcolor - Icons original color to replace 178 | /// @group Helpers 179 | @mixin svgbg($icon, $newcolor: $svg-icon-replace-color, $oldcolor: $svg-icon-orginal-color) { 180 | background-image: svg-url-with-replaced-fill($icon, $oldcolor, $newcolor); 181 | } 182 | -------------------------------------------------------------------------------- /slate/config/_config-typography.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Typography Setup 3 | // ====================================================================== 4 | 5 | /// Basic Setup 6 | /// ====================================================================== 7 | 8 | /// Enable Type Debug 9 | /// @group Debug 10 | $type-debug: true !default; 11 | 12 | // Basic Setup 13 | // ====================================================================== 14 | 15 | /// Set Global Font size 16 | /// @group Typography 17 | $global-base-font-size: 16px !default; 18 | 19 | /// Set Global Line height 20 | /// @group Typography 21 | $global-line-height: 1.5 !default; 22 | 23 | /// Set Global REM Fallback 24 | /// @group Typography 25 | $rem-fallback: true !default; 26 | 27 | /// Set Global PX units only 28 | /// @group Typography 29 | $rem-px-only: false !default; 30 | 31 | /// Set Global line-heights with no units 32 | /// @group Typography 33 | $unitless-lineheight: true !default; 34 | 35 | /// The ratio used to generate sizes and margins on heading tags 36 | /// @group Typography 37 | $type-ratio: $perfect-fourth !default; 38 | 39 | /// Toggle percenatage based font scaling based on screen size. 40 | /// @group Typography 41 | $responsive-text: false !default; 42 | 43 | /// Global Font Smoothing 44 | /// @group Typography 45 | $webkit-smoothing: antialiased !default; 46 | 47 | /// Modular Steps 48 | /// ====================================================================== 49 | 50 | /// Modular Stepping Multipliers 51 | /// @group Typography 52 | $modular-step-alpha: 5 !default; 53 | $modular-step-beta: 4 !default; 54 | $modular-step-gamma: 3 !default; 55 | $modular-step-delta: 2 !default; 56 | $modular-step-epsilon: 1 !default; 57 | $modular-step-zeta: 0 !default; 58 | $modular-step-eta: -1 !default; 59 | $modular-step-theta: -2 !default; 60 | $modular-step-iota: -3 !default; 61 | 62 | /// Font Weights 63 | /// ====================================================================== 64 | 65 | /// Thin 66 | /// @group Typography 67 | $thin: 100 !default; 68 | 69 | /// Extra light 70 | /// @group Typography 71 | $extralight: 200 !default; 72 | 73 | /// Light 74 | /// @group Typography 75 | $light: 300 !default; 76 | 77 | /// Regular 78 | /// @group Typography 79 | $regular: 400 !default; 80 | 81 | /// Medium 82 | /// @group Typography 83 | $medium: 500 !default; 84 | 85 | /// Semibold 86 | /// @group Typography 87 | $semibold: 600 !default; 88 | 89 | /// Bold 90 | /// @group Typography 91 | $bold: 700 !default; 92 | 93 | /// Extra Bold 94 | /// @group Typography 95 | $extra-bold: 800 !default; 96 | 97 | /// Black 98 | $black: 900 !default; 99 | 100 | /// Global font styles 101 | /// ====================================================================== 102 | 103 | /// Global Font Stack 104 | /// @group Typography 105 | $global-font-stack: $shelvetica !default; 106 | 107 | /// Global Font Weight 108 | /// @group Typography 109 | $global-font-weight: $thin !default; 110 | 111 | /// Global Font Color 112 | /// @group Typography 113 | $global-font-color: $dark !default; 114 | 115 | /// Global heading font styles 116 | /// ====================================================================== 117 | 118 | /// Heading Font Stack 119 | /// @group Typography 120 | $global-heading-stack: $gillsans !default; 121 | 122 | /// Heading Font Color 123 | /// @group Typography 124 | $global-heading-weight: $regular !default; 125 | 126 | /// Heading Font Weight 127 | /// @group Typography 128 | $global-heading-color: $dark !default; 129 | 130 | /// Custom Font Path 131 | /// @group Typography 132 | $custom-font-path: '/assets/fonts/' !default; 133 | 134 | /// Links 135 | /// ====================================================================== 136 | 137 | /// Link Color 138 | /// @group Typography 139 | $link: $primary !default; 140 | 141 | /// Link Hover Color 142 | /// @group Typography 143 | $link-hover: $primary !default; 144 | 145 | /// Link Hover Color 146 | /// @group Typography 147 | $link-hover-decoration: none !default; 148 | 149 | /// Horizontal Rules 150 | /// ====================================================================== 151 | 152 | /// Horizontal Rule color and thickness 153 | /// @group Typography 154 | $global-hr-style: 1px solid $primary !default; 155 | 156 | /// ====================================================================== 157 | /// Responsive type scaling (set $responsive-text true for this) 158 | /// Numbers match $perfect-fourth. Recalculate them for other ratios. 159 | /// ====================================================================== 160 | 161 | /// Base responsive font size for screens under $bp-tiny 162 | /// @group Typography 163 | $rt-bp-base: 50% !default; // 8px 164 | 165 | /// Responsive font size for screens between $bp-tiny and $bp-xsmall 166 | /// @group Typography 167 | $rt-bp-tiny: 62.5% !default; // 10px 168 | 169 | /// Responsive font size for screens between $bp-xsmall and $bp-small 170 | /// @group Typography 171 | $rt-bp-xsmall: 75% !default; // 12px 172 | 173 | /// Responsive font size for screens between $bp-xmall and $bp-medium 174 | /// @group Typography 175 | $rt-bp-small: 87.5% !default; // 14px 176 | 177 | /// Responsive font size for screens between $bp-medium and $bp-large 178 | /// @group Typography 179 | $rt-bp-medium: 100% !default; // 16px 180 | 181 | /// Responsive font size for screens between $bp-large and $bp-xl 182 | /// @group Typography 183 | $rt-bp-large: 125% !default; // 20px 184 | 185 | /// Responsive font size for screens between $bp-xl and above. 186 | /// @group Typography 187 | $rt-bp-xl: 137.5% !default; // 22px 188 | -------------------------------------------------------------------------------- /slate/kits/grids/_grid-kit.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Slate Grid 7 | // ====================================================================== 8 | // Insipired by: 9 | // ------------------- 10 | // Profound Grid: http://www.profoundgrid.com/ 11 | // Semantic Grid: http://www.semantic.gs 12 | // Susy: http://susy.oddbird.net 13 | // Negative Grid: http://chrisplaneta.com/freebies/negativegrid-fluid-css-grid-by-chris-planeta/ 14 | // ====================================================================== 15 | /// Establish the grid-containing element. This is wrapper element for your columns. 16 | /// @example scss - Container 17 | /// .element { 18 | /// @include container; 19 | /// } 20 | /// @param {Variable} $grid-max-width [$center-container-max-width] - Maximum width that the containers will grow too. 21 | /// @param {Variable} $grid-center [$center-containers] - Center the container on the page without the need for additional markup 22 | /// @group Grid 23 | @mixin container($grid-max-width: $center-container-max-width, $grid-center: $center-containers, $c-margin: $container-margin) { 24 | @include clearfix('mojo'); 25 | @if $grid-center { 26 | @include rem(max-width, $grid-max-width); 27 | margin: { 28 | left: auto; 29 | right: auto; 30 | } 31 | width: container-width($c-margin); 32 | } @else { 33 | width: container-width($c-margin); 34 | margin-left: $c-margin; 35 | margin-right: $c-margin; 36 | } 37 | } 38 | /// Define columns. 39 | /// @example scss - Column 40 | /// .element { 41 | /// @include container; 42 | /// .col {@include column(6,3);} 43 | /// } 44 | /// @param {Variable} $columns-width - How many columns to span 45 | /// @param {Variable} $padding-columns - How many columns to push over by 46 | /// @group Grid 47 | @mixin column($columns-width, $padding-columns: null, $g-width: $gutter-width) { 48 | float: left; 49 | margin-right: -100%; 50 | $width-perc: element-width($columns-width, $g-width); 51 | width: $width-perc; 52 | @if $padding-columns != null { 53 | @include push($padding-columns, $g-width); 54 | } 55 | } 56 | /// Push columns over. 57 | /// @example scss - Push 58 | /// .wrapper { 59 | /// @include container; 60 | /// .col {@include column(6); @include push(3);} 61 | /// } 62 | /// @param {Variable} $column-index - How many columns to push over by 63 | /// @group Grid 64 | @mixin push($column-index, $g-width: $gutter-width) { 65 | $width-perc: 0; 66 | @if $total-width == 100% { 67 | $width-perc: $g-width + element-width($column-index, $g-width); 68 | } @else { 69 | // $width-perc: (column_width() + $g-width)*$column-index; 70 | $width-perc: $g-width + element-width($column-index, $g-width); 71 | } 72 | margin-left: $width-perc; 73 | } 74 | // HELPER MIXINS 75 | /// Not really recommended, but if you like using a whole load of predefined classes, this is for you. It uses the column and container classes defined in the config.scss to generate CSS for a container, all columns as defined in $total-columns, and all matching push classes. Warning: This will add CSS to your project that you may or may not use. 76 | /// @example scss - Helper Classes 77 | /// @include generate_helper_classes; 78 | /// @example html - Helper Classes 79 | ///
    80 | ///
    6 wide column pushed over by 3
    81 | ///
    82 | /// @param {Variable} $helper-break [medium] - The breakpoint at which the columns stack up into full width columns. 83 | /// @group Grid 84 | @mixin generate-helper-classes($helper-break: $bp-medium) { 85 | // Helper Class: Container 86 | .#{$class-container} { 87 | @include container; 88 | } 89 | // Helper Class: Columns 90 | @for $i from 1 through $total-columns { 91 | .#{$class-column}#{$i} { 92 | @include column(12); 93 | margin-bottom: $column-bottom-spacing; 94 | clear: both; 95 | } 96 | } 97 | @include minbreak($helper-break) { 98 | // Helper Class: Columns 99 | @for $i from 1 through $total-columns { 100 | .#{$class-column}#{$i} { 101 | @include column($i); 102 | clear: none; 103 | } 104 | } 105 | // Helper Class: Horizontal Position 106 | @for $i from 0 through $total-columns - 1 { 107 | .#{$class-push}#{$i} { 108 | @include push($i); 109 | margin-bottom: $column-bottom-spacing; 110 | } 111 | } 112 | } 113 | } 114 | /// Use this to push equal columns over with the same class, for example a page equal sized product thumbnails or portfolio of images. 115 | /// Just so you know, it's much easier and more flexible to do this with the Gridler mixin :) 116 | /// @example scss - Grid Positions 117 | /// .wrapper { 118 | /// @include container; 119 | /// .positioncol {@include column(3);} 120 | /// @include generate_grid_positions('positioncol', 3, 26px); 121 | /// } 122 | /// @example html - Grid Positions 123 | ///
    124 | ///
    A Pushed Column
    125 | ///
    A Pushed Column
    126 | ///
    A Pushed Column
    127 | ///
    A Pushed Column
    128 | ///
    129 | /// @param {Variable} $column-selector - The class name of the element to effect. 130 | /// @param {Variable} $element-width - Desired column width. 131 | /// @param {Variable} $ggsp [$column-bottom-spacing] - Space under the repeated columns. 132 | /// @group Grid 133 | @mixin generate-grid-positions($column-selector, $element-width, $ggsp: $column-bottom-spacing, $g-width: $gutter-width) { 134 | $cols-per-row: floor($total-columns / $element-width); 135 | @for $i from 1 through $cols-per-row { 136 | #{$column-selector}:nth-child(#{$cols-per-row}n+#{$i}) { 137 | @include push(($i - 1) * $element-width, $g-width); 138 | @include rem(margin-bottom, $ggsp); 139 | @if $i == 1 { 140 | clear: both; 141 | } @else { 142 | clear: none; 143 | } 144 | } 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /slate/kits/buttons/_button-icon-kit.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Button Icon Kit 7 | // ====================================================================== 8 | 9 | %icon--display { 10 | display: $button-icons-display; 11 | } 12 | 13 | %icon--left { 14 | @include rem(margin, $button-icons-left-spacing) 15 | } 16 | 17 | %icon--right { 18 | @include rem(margin, $button-icons-right-spacing) 19 | } 20 | 21 | %icon--weight { 22 | font-weight: $button-icons-weight; 23 | } 24 | // Math Icon Modifiers 25 | @if $button-icons-math == true { 26 | .icon-plus-left::before { 27 | @extend %icon--left; 28 | @extend %icon--display; 29 | @extend %icon--weight; 30 | content: '\002B'; 31 | } 32 | 33 | .icon-plus-right::after { 34 | @extend %icon--right; 35 | @extend %icon--display; 36 | @extend %icon--weight; 37 | content: '\002B'; 38 | } 39 | 40 | .icon-minus-left::before { 41 | @extend %icon--left; 42 | @extend %icon--display; 43 | @extend %icon--weight; 44 | content: '\02212'; 45 | } 46 | 47 | .icon-minus-right::after { 48 | @extend %icon--right; 49 | @extend %icon--display; 50 | @extend %icon--weight; 51 | content: '\02212'; 52 | } 53 | 54 | .icon-multiply-left::before { 55 | @extend %icon--left; 56 | @extend %icon--display; 57 | @extend %icon--weight; 58 | content: '\000D7'; 59 | } 60 | 61 | .icon-multiply-right::after { 62 | @extend %icon--right; 63 | @extend %icon--display; 64 | @extend %icon--weight; 65 | content: '\000D7'; 66 | } 67 | 68 | .icon-division-left::before { 69 | @extend %icon--left; 70 | @extend %icon--display; 71 | @extend %icon--weight; 72 | content: '\000F7'; 73 | } 74 | 75 | .icon-division-right::after { 76 | @extend %icon--right; 77 | @extend %icon--display; 78 | @extend %icon--weight; 79 | content: '\000F7'; 80 | } 81 | 82 | .icon-equal-left::before { 83 | @extend %icon--left; 84 | @extend %icon--display; 85 | @extend %icon--weight; 86 | content: '\0003D'; 87 | } 88 | 89 | .icon-equal-right::after { 90 | @extend %icon--right; 91 | @extend %icon--display; 92 | @extend %icon--weight; 93 | content: '\0003D'; 94 | } 95 | } 96 | // Arrow Icon Modifiers 97 | // Solid 98 | @if $button-icons-solid-arrows == true { 99 | .icon-leftarrow-left::before { 100 | @extend %icon--left; 101 | @extend %icon--display; 102 | @extend %icon--weight; 103 | content: '\02190'; 104 | } 105 | 106 | .icon-leftarrow-right::after { 107 | @extend %icon--right; 108 | @extend %icon--display; 109 | @extend %icon--weight; 110 | content: '\02192'; 111 | } 112 | 113 | .icon-rightarrow-left::before { 114 | @extend %icon--left; 115 | @extend %icon--display; 116 | @extend %icon--weight; 117 | content: '\02192'; 118 | } 119 | 120 | .icon-rightarrow-right::after { 121 | @extend %icon--right; 122 | @extend %icon--display; 123 | @extend %icon--weight; 124 | content: '\02192'; 125 | } 126 | 127 | .icon-downarrow-left::before { 128 | @extend %icon--left; 129 | @extend %icon--display; 130 | @extend %icon--weight; 131 | content: '\02193'; 132 | } 133 | 134 | .icon-downarrow-right::after { 135 | @extend %icon--right; 136 | @extend %icon--display; 137 | @extend %icon--weight; 138 | content: '\02193'; 139 | } 140 | 141 | .icon-uparrow-left::before { 142 | @extend %icon--left; 143 | @extend %icon--display; 144 | @extend %icon--weight; 145 | content: '\02191'; 146 | } 147 | 148 | .icon-uparrow-right::after { 149 | @extend %icon--right; 150 | @extend %icon--display; 151 | @extend %icon--weight; 152 | content: '\02191'; 153 | } 154 | } 155 | // Dashed 156 | @if $button-icons-dashed-arrows == true { 157 | .icon-leftarrowdashed-left::before { 158 | @extend %icon--left; 159 | @extend %icon--display; 160 | @extend %icon--weight; 161 | content: '\021E0'; 162 | } 163 | 164 | .icon-leftarrowdashed-right::after { 165 | @extend %icon--right; 166 | @extend %icon--display; 167 | @extend %icon--weight; 168 | content: '\021E0'; 169 | } 170 | 171 | .icon-rightarrowdashed-left::before { 172 | @extend %icon--left; 173 | @extend %icon--display; 174 | @extend %icon--weight; 175 | content: '\021E2'; 176 | } 177 | 178 | .icon-rightarrowdashed-right::after { 179 | @extend %icon--right; 180 | @extend %icon--display; 181 | @extend %icon--weight; 182 | content: '\021E2'; 183 | } 184 | 185 | .icon-downarrowdashed-left::before { 186 | @extend %icon--left; 187 | @extend %icon--display; 188 | @extend %icon--weight; 189 | content: '\021E3'; 190 | } 191 | 192 | .icon-downarrowdashed-right::after { 193 | @extend %icon--right; 194 | @extend %icon--display; 195 | @extend %icon--weight; 196 | content: '\021E3'; 197 | } 198 | 199 | .icon-uparrowdashed-left::before { 200 | @extend %icon--left; 201 | @extend %icon--display; 202 | @extend %icon--weight; 203 | content: '\021E1'; 204 | } 205 | 206 | .icon-uparrowdashed-right::after { 207 | @extend %icon--right; 208 | @extend %icon--display; 209 | @extend %icon--weight; 210 | content: '\021E1'; 211 | } 212 | } 213 | // Chevrons 214 | @if $button-icons-chevrons == true { 215 | .icon-singlechevron-left::before { 216 | @extend %icon--left; 217 | @extend %icon--display; 218 | @extend %icon--weight; 219 | content: '\02039'; 220 | } 221 | 222 | .icon-singlechevron-right::after { 223 | @extend %icon--right; 224 | @extend %icon--display; 225 | @extend %icon--weight; 226 | content: '\0203A'; 227 | } 228 | 229 | .icon-doublechevron-left::before { 230 | @extend %icon--left; 231 | @extend %icon--display; 232 | @extend %icon--weight; 233 | content: '\000AB'; 234 | } 235 | 236 | .icon-doublechevron-right::after { 237 | @extend %icon--right; 238 | @extend %icon--display; 239 | @extend %icon--weight; 240 | content: '\000BB'; 241 | } 242 | } 243 | -------------------------------------------------------------------------------- /slate/kits/gradients/_gradient-kit.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Gradient Kit 7 | // ====================================================================== 8 | 9 | /// Horizontal Gradient mixin lets you quickly make horizontal gradients on an element. 10 | /// @example scss - Default Gradient using default gradient colors 11 | /// .element { 12 | /// @mixin gradient-horizontal; 13 | /// } 14 | /// .element { 15 | /// @mixin gradient-horizontal(#eee, #222, 0%, 90%); 16 | /// } 17 | /// @param {Variable} $start-color [$gradient-start] - Gradient Start Color 18 | /// @param {Variable} $end-color [$gradient-end] - Gradient End Color 19 | /// @param {Variable} $start-percent [0%] - Gradient Start Position Percentage 20 | /// @param {Variable} $end-percent [100%] - Gradient End Position Percentage 21 | /// @author Hash&Salt 22 | /// @group Gradients 23 | @mixin gradient-horizontal($start-color: $gradient-start, $end-color: $gradient-end, $start-percent: 0%, $end-percent: 100%) { 24 | background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); 25 | background-repeat: repeat-x; 26 | } 27 | 28 | /// Vertical Gradient mixin lets you quickly make vertical gradients on an element. 29 | /// @example scss - Default Gradient using default gradient colors 30 | /// .element { 31 | /// @mixin gradient-vertical; 32 | /// } 33 | /// .element { 34 | /// @mixin gradient-vertical(#eee, #222, 0%, 90%); 35 | /// } 36 | /// @param {Variable} $start-color [$gradient-start] - Gradient Start Color 37 | /// @param {Variable} $end-color [$gradient-end] - Gradient End Color 38 | /// @param {Variable} $start-percent [0%] - Gradient Start Position Percentage 39 | /// @param {Variable} $end-percent [100%] - Gradient End Position Percentage 40 | /// @author Hash&Salt 41 | /// @group Gradients 42 | @mixin gradient-vertical($start-color: $gradient-start, $end-color: $gradient-end, $start-percent: 0%, $end-percent: 100%) { 43 | background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); 44 | background-repeat: repeat-x; 45 | } 46 | 47 | /// Directional Gradient mixin lets you quickly make directional gradients on an element. 48 | /// @example scss - Default Gradient using default gradient color map 49 | /// .element { 50 | /// @mixin gradient-directional; 51 | /// } 52 | /// .element { 53 | /// @mixin gradient-directional(#eee, #222, 45deg); 54 | /// } 55 | /// @param {Variable} $start-color [$gradient-start] - Gradient Start Color 56 | /// @param {Variable} $end-color [$gradient-end] - Gradient End Color 57 | /// @param {Variable} $deg [45deg] - Gradient Start Position Percentage 58 | /// @author Hash&Salt 59 | /// @group Gradients 60 | @mixin gradient-directional($start-color: $gradient-start, $end-color: $gradient-end, $deg: 45deg) { 61 | background-repeat: no-repeat; 62 | background-image: linear-gradient($deg, $start-color, $end-color); 63 | } 64 | 65 | /// Radial Gradient mixin lets you quickly make radial gradients on an element. 66 | /// @example scss - Default Gradient using default gradient colors 67 | /// .element { 68 | /// @mixin gradient-radial; 69 | /// } 70 | /// .element { 71 | /// @mixin gradient-radial(#eee, #222); 72 | /// } 73 | /// @param {Variable} $start-color [$gradient-start] - Gradient Start Color 74 | /// @param {Variable} $end-color [$gradient-end] - Gradient End Color 75 | /// @author Hash&Salt 76 | /// @group Gradients 77 | @mixin gradient-radial($inner-color: $gradient-start, $outer-color: $gradient-end) { 78 | background-image: radial-gradient(circle, $inner-color, $outer-color); 79 | background-repeat: no-repeat; 80 | } 81 | 82 | /// Striped Gradient mixin lets you quickly make striped gradients on an element. 83 | /// @example scss - Striped Gradient using default gradient colors 84 | /// .element { 85 | /// @mixin gradient-striped; 86 | /// } 87 | /// .element { 88 | /// @mixin gradient-striped(#222, 45deg); 89 | /// } 90 | /// @param {Variable} $color [$gradient-start] - Stripe Color 91 | /// @param {Variable} $angle [45deg] - Stripe Angle 92 | /// @author Hash&Salt 93 | /// @group Gradients 94 | @mixin gradient-striped($color: $gradient-start, $angle: 45deg) { 95 | background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent); 96 | } 97 | 98 | /// Horizontal Gradient Three Colors mixin lets you quickly make horizontal gradients on an element usint three colors. 99 | /// @example scss - Default Gradient using default gradient colors 100 | /// .element { 101 | /// @mixin gradient-horizontal-three-colors; 102 | /// } 103 | /// .element { 104 | /// @mixin gradient-horizontal-three-colors(#eee, #666, 50%, #222, 90%); 105 | /// } 106 | /// @param {Variable} $start-color [$gradient-start] - Gradient Start Color 107 | /// @param {Variable} $mid-color [$gradient-middle] - Gradient Middle Color 108 | /// @param {Variable} $color-stop [50%] - Middle Color stop point 109 | /// @param {Variable} $end-color [$gradient-end] - Gradient End Color 110 | /// @author Hash&Salt 111 | /// @group Gradients 112 | @mixin gradient-horizontal-three-colors($start-color: $gradient-end, $mid-color: $gradient-middle, $color-stop: 50%, $end-color: $gradient-end) { 113 | background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color); 114 | background-repeat: no-repeat; 115 | } 116 | 117 | /// Vertical Gradient Three Colors mixin lets you quickly make veritcal gradients on an element usint three colors. 118 | /// @example scss - Default Gradient using default gradient colors 119 | /// .element { 120 | /// @mixin gradient-vertical-three-colors; 121 | /// } 122 | /// .element { 123 | /// @mixin gradient-vertical-three-colors(#eee, #666, 50%, #222, 90%); 124 | /// } 125 | /// @param {Variable} $start-color [$gradient-start] - Gradient Start Color 126 | /// @param {Variable} $mid-color [$gradient-middle] - Gradient Middle Color 127 | /// @param {Variable} $color-stop [50%] - Middle Color stop point 128 | /// @param {Variable} $end-color [$gradient-end] - Gradient End Color 129 | /// @author Hash&Salt 130 | /// @group Gradients 131 | @mixin gradient-vertical-three-colors($start-color: $gradient-end, $mid-color: $gradient-middle, $color-stop: 50%, $end-color: $gradient-end) { 132 | background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color); 133 | background-repeat: no-repeat; 134 | } 135 | -------------------------------------------------------------------------------- /sassdoc/assets/images/logo_light_inline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sassdoc/assets/images/logo_light_compact.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sassdoc/assets/images/logo_full_compact.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sassdoc/assets/images/logo_full_inline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /sassdoc/assets/js/vendor/prism.min.js: -------------------------------------------------------------------------------- 1 | /* http://prismjs.com/download.html?themes=prism&languages=markup+css+css-extras+clike+javascript+scss */ 2 | var self=typeof window!="undefined"?window:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content)):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+""};if(!self.document){if(!self.addEventListener)return self.Prism;self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return self.Prism}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}return self.Prism}();typeof module!="undefined"&&module.exports&&(module.exports=Prism);; 3 | Prism.languages.markup={comment://g,prolog:/<\?.+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});; 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/ig,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/ig};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/[\w\W]*?<\/style>/ig,inside:{tag:{pattern:/|<\/style>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});; 5 | Prism.languages.css.selector={pattern:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/g,"pseudo-class":/:[-\w]+(?:\(.*\))?/g,"class":/\.[-:\.\w]+/g,id:/#[-:\.\w]+/g}};Prism.languages.insertBefore("css","ignore",{hexcode:/#[\da-f]{3,6}/gi,entity:/\\[\da-f]{1,8}/gi,number:/[\d%\.]+/g});; 6 | Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/ig,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/ig,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};; 7 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/ig,inside:{tag:{pattern:/|<\/script>/ig,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}}); 8 | ; 9 | Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm});Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i});Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i});Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g});; -------------------------------------------------------------------------------- /slate/config/_config-buttons.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Buttons 3 | // ====================================================================== 4 | 5 | /// Button Themes 6 | /// --------------------------------------------------------------------- 7 | 8 | /// Default Button Theme 9 | $button-default: ( 10 | 11 | use-borders: true, 12 | 13 | default: $primary, 14 | hover: darken($primary, 15%), 15 | focus: darken($primary, 20%), 16 | active: darken($primary, 10%), 17 | disabled: $disabled, 18 | 19 | font-family: inherit, 20 | textlight: $bright, 21 | textdark: $dark, 22 | textweight: $semibold, 23 | font-size: $global-base-font-size, 24 | textalign: center, 25 | text-transform: uppercase, 26 | 27 | border-left: 2px solid $gray, 28 | border-right: 2px solid $gray, 29 | border-top: 2px solid $gray, 30 | border-bottom: 2px solid $gray, 31 | 32 | border-hover-left: 2px solid $dark, 33 | border-hover-right: 2px solid $dark, 34 | border-hover-top: 2px solid $dark, 35 | border-hover-bottom: 2px solid $dark, 36 | 37 | border-focus-left: 2px solid $dark, 38 | border-focus-right: 2px solid $dark, 39 | border-focus-top: 2px solid $dark, 40 | border-focus-bottom: 2px solid $dark, 41 | 42 | border-disabled-left: 2px solid darken($disabled, 20%), 43 | border-disabled-right: 2px solid darken($disabled, 20%), 44 | border-disabled-top: 2px solid darken($disabled, 20%), 45 | border-disabled-bottom: 2px solid darken($disabled, 20%), 46 | 47 | height: 50px, 48 | margin: 0 0 24px 0, 49 | padding: 0 9px, 50 | rounded: 0, 51 | 52 | display: inline-block, 53 | boxsizing: content-box 54 | 55 | ) !default; 56 | 57 | /// Positive Button Theme 58 | $button-positive: ( 59 | 60 | use-borders: true, 61 | 62 | default: $positive, 63 | hover: darken($positive, 15%), 64 | focus: darken($positive, 20%), 65 | active: darken($positive, 10%), 66 | disabled: $disabled, 67 | 68 | font-family: inherit, 69 | textlight: $bright, 70 | textdark: $dark, 71 | textweight: $semibold, 72 | font-size: $global-base-font-size, 73 | textalign: center, 74 | text-transform: uppercase, 75 | 76 | border-left: 2px solid darken($positive, 10%), 77 | border-right: 2px solid darken($positive, 10%), 78 | border-top: 2px solid darken($positive, 10%), 79 | border-bottom: 2px solid darken($positive, 10%), 80 | 81 | border-hover-left: 2px solid darken($positive, 15%), 82 | border-hover-right: 2px solid darken($positive, 15%), 83 | border-hover-top: 2px solid darken($positive, 15%), 84 | border-hover-bottom: 2px solid darken($positive, 15%), 85 | 86 | border-focus-left: 2px solid $dark, 87 | border-focus-right: 2px solid $dark, 88 | border-focus-top: 2px solid $dark, 89 | border-focus-bottom: 2px solid $dark, 90 | 91 | border-disabled-left: 2px solid darken($disabled, 20%), 92 | border-disabled-right: 2px solid darken($disabled, 20%), 93 | border-disabled-top: 2px solid darken($disabled, 20%), 94 | border-disabled-bottom: 2px solid darken($disabled, 20%), 95 | 96 | height: 50px, 97 | margin: 0 0 24px 0, 98 | padding: 0 9px, 99 | rounded: 0, 100 | 101 | display: inline-block, 102 | boxsizing: content-box 103 | 104 | ) !default; 105 | 106 | /// Negative Button Theme 107 | $button-negative: ( 108 | 109 | use-borders: true, 110 | 111 | default: $negative, 112 | hover: darken($negative, 15%), 113 | focus: darken($negative, 20%), 114 | active: darken($negative, 10%), 115 | disabled: $disabled, 116 | 117 | font-family: inherit, 118 | textlight: $bright, 119 | textdark: $dark, 120 | textweight: $semibold, 121 | font-size: $global-base-font-size, 122 | textalign: center, 123 | text-transform: uppercase, 124 | 125 | border-left: 2px solid darken($negative, 10%), 126 | border-right: 2px solid darken($negative, 10%), 127 | border-top: 2px solid darken($negative, 10%), 128 | border-bottom: 2px solid darken($negative, 10%), 129 | 130 | border-hover-left: 2px solid darken($negative, 15%), 131 | border-hover-right: 2px solid darken($negative, 15%), 132 | border-hover-top: 2px solid darken($negative, 15%), 133 | border-hover-bottom: 2px solid darken($negative, 15%), 134 | 135 | border-focus-left: 2px solid $dark, 136 | border-focus-right: 2px solid $dark, 137 | border-focus-top: 2px solid $dark, 138 | border-focus-bottom: 2px solid $dark, 139 | 140 | border-disabled-left: 2px solid darken($disabled, 20%), 141 | border-disabled-right: 2px solid darken($disabled, 20%), 142 | border-disabled-top: 2px solid darken($disabled, 20%), 143 | border-disabled-bottom: 2px solid darken($disabled, 20%), 144 | 145 | height: 50px, 146 | margin: 0 0 24px 0, 147 | padding: 0 9px, 148 | rounded: 0, 149 | 150 | display: inline-block, 151 | boxsizing: content-box 152 | 153 | ) !default; 154 | 155 | /// Gradient Button Theme 156 | $button-gradient: ( 157 | 158 | use-borders: true, 159 | 160 | font-family: inherit, 161 | textlight: $bright, 162 | textdark: $dark, 163 | textweight: $semibold, 164 | font-size: $global-base-font-size, 165 | textalign: center, 166 | text-transform: uppercase, 167 | 168 | height: 50px, 169 | margin: 0 0 24px 0, 170 | padding: 0 9px, 171 | rounded: 0, 172 | 173 | display: inline-block, 174 | boxsizing: content-box, 175 | 176 | mode: 'ttb', 177 | start-pos: 0%, 178 | end-pos: 100%, 179 | 180 | /// Default Colors 181 | start-color: $gradient-start, 182 | end-color: $gradient-end, 183 | /// Hover Colors 184 | start-color-hover: $gradient-start, 185 | end-color-hover: darken($gradient-end, 10%), 186 | /// Focus Colors 187 | start-color-focus: $gradient-start, 188 | end-color-focus: darken($gradient-end, 10%), 189 | /// Active Colors 190 | start-color-active: $gradient-start, 191 | end-color-active: darken($gradient-end, 10%), 192 | /// Disabled Colors 193 | start-color-disabled: $disabled, 194 | end-color-disabled: darken($disabled, 30%), 195 | 196 | border-left: 2px solid darken($gradient-start, 10%), 197 | border-right: 2px solid darken($gradient-start, 10%), 198 | border-top: 2px solid darken($gradient-start, 10%), 199 | border-bottom: 2px solid darken($gradient-start, 10%), 200 | 201 | border-hover-left: 2px solid darken($gradient-start, 15%), 202 | border-hover-right: 2px solid darken($gradient-start, 15%), 203 | border-hover-top: 2px solid darken($gradient-start, 15%), 204 | border-hover-bottom: 2px solid darken($gradient-start, 15%), 205 | 206 | border-focus-left: 2px solid $dark, 207 | border-focus-right: 2px solid $dark, 208 | border-focus-top: 2px solid $dark, 209 | border-focus-bottom: 2px solid $dark, 210 | 211 | border-disabled-left: 2px solid darken($disabled, 20%), 212 | border-disabled-right: 2px solid darken($disabled, 20%), 213 | border-disabled-top: 2px solid darken($disabled, 20%), 214 | border-disabled-bottom: 2px solid darken($disabled, 20%), 215 | 216 | ) !default; 217 | 218 | /// Button Icons 219 | /// --------------------------------------------------------------------- 220 | 221 | /// Button Icon Display 222 | $button-icons-display: inline-block !default; 223 | 224 | /// Button Icon Left Spacing 225 | /// @group Button Icons 226 | $button-icons-left-spacing: 0 8px 0 4px !default; 227 | 228 | /// Button Icon Right Spacing 229 | /// @group Button Icons 230 | $button-icons-right-spacing: 0 8px 0 4px !default; 231 | 232 | /// Button Icon Weight 233 | $button-icons-weight: $semibold !default; 234 | 235 | /// Button Math Icons 236 | $button-icons-math: false !default; 237 | 238 | /// Button Solid Arrows Icons 239 | $button-icons-solid-arrows: false !default; 240 | 241 | /// Button Dashed Arrows Icons 242 | $button-icons-dashed-arrows: false !default; 243 | 244 | /// Button Dashed Chevrons 245 | $button-icons-chevrons: false !default; 246 | -------------------------------------------------------------------------------- /slate/kits/layouts/_layout-kit.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Layout Kit 7 | // ====================================================================== 8 | 9 | /// The Gridler allows you to very quickly build grids of equal sized columns 10 | /// and set breakpoints for how the columns columns collapse. A use case for this would be something like a product list on an ecommerce site or a portfolio of work. 11 | /// @example scss - Default Gridler 12 | /// .parentdiv { 13 | /// @include gridler; 14 | /// ... 15 | /// } 16 | /// @example scss - Custom Gridler 17 | /// .parentdiv { 18 | /// @include gridler($gridler-elm: 'your-class', $gridler-base: 12, $gsmall: 6, $gmedium: 4, $glarge: 3, $gsmbp: $bp-small, $gmebp: $bp-medium, $glgbp: 1440px); 19 | /// ... 20 | /// } 21 | /// @param {Variable} $gridler-elm [$gridler-element] - Class to use for the columns. Set globally in the config, but can be set at will when using the mixin. 22 | /// @param {Variable} $gridler-base [$gridler-default-c] - Default column width to use before Media Queries kick in. 23 | /// @param {Variable} $gsmall [$gridler-sm-c] - Number of columns to use at the smallest size 24 | /// @param {Variable} $gmedium [$gridler-me-c] - Number of columns to use at the medium size 25 | /// @param {Variable} $glarge [$gridler-lg-c] - Number of columns to use at the largest size 26 | /// @param {Variable} $gsmbp [$gridler-sm] - Break point for the small range 27 | /// @param {Variable} $gmebp [$gridler-me] - Break point for the medium range 28 | /// @param {Variable} $glgbp [$gridler-lg] - Break point for the large range 29 | /// @author Hash&Salt 30 | /// @group Layout Helpers 31 | 32 | @mixin gridler($gridler-elm: $gridler-element, $gcbsp: $gridler-column-bottom-spacing, $gsmall: $gridler-sm-c, $gmedium: $gridler-me-c, $glarge: $gridler-lg-c, $g-width: $gutter-width, $c-margin: $container-margin, $gsmbp: $gridler-sm, $gmebp: $gridler-me, $glgbp: $gridler-lg, $gridler-center: $center-containers, $gridler-maxwidth: $center-container-max-width) { 33 | @include container($gridler-maxwidth, $gridler-center, $c-margin); 34 | 35 | > .#{$gridler-elm} { 36 | @include column($total-columns); 37 | @include rem(margin-bottom, $gcbsp); 38 | clear: both; 39 | } 40 | @media screen and (min-width: $gsmbp) { 41 | @include generate-grid-positions('.#{$gridler-elm}', $gsmall, $gcbsp, $g-width); 42 | 43 | > .#{$gridler-elm} { 44 | @include column($gsmall, null, $g-width); 45 | @include rem(margin-bottom, $gcbsp); 46 | clear: none; 47 | } 48 | } 49 | @media screen and (min-width: $gmebp) { 50 | @include generate-grid-positions('.#{$gridler-elm}', $gmedium, $gcbsp, $g-width); 51 | 52 | > .#{$gridler-elm} { 53 | @include column($gmedium, null, $g-width); 54 | @include rem(margin-bottom, $gcbsp); 55 | clear: none; 56 | } 57 | } 58 | @media screen and (min-width: $glgbp) { 59 | @include generate-grid-positions('.#{$gridler-elm}', $glarge, $gcbsp, $g-width); 60 | 61 | > .#{$gridler-elm} { 62 | @include column($glarge, null, $g-width); 63 | @include rem(margin-bottom, $gcbsp); 64 | clear: none; 65 | } 66 | } 67 | } 68 | 69 | // Holygrail 70 | // ====================================================================== 71 | 72 | /// Easily pull off a triple column layour aka The Holy Grail. 73 | /// @example scss - Default Holy Grail 74 | /// .parentdiv { 75 | /// @include holygrail; 76 | /// ... 77 | /// } 78 | /// @example scss - Custom Holy Grail 79 | /// .parentdiv { 80 | /// @include holygrail($holygrail-left-elm: 'holygrail-left', $holygrail-middle-elm: 'holygrail-middle', $holygrail-right-elm: 'holygrail-right', $holygrail-left-c: 2, $holygrail-middle-c: 3, $holygrail-right-c: 7, $holygrail-bp: 640px); 81 | /// ... 82 | /// } 83 | /// @param {Variable} $elm [$element] - Class to use for the columns. Set globally in the config, but can be set at will when using the mixin. 84 | /// @param {Variable} $gsmall [$sm-c] - Number of columns to use at the smallest size 85 | /// @param {Variable} $gmedium [$me-c] - Number of columns to use at the medium size 86 | /// @param {Variable} $glarge [$lg-c] - Number of columns to use at the largest size 87 | /// @group Layout Helpers 88 | 89 | @mixin holygrail($holygrail-left-elm: $holygrail-left-element, $holygrail-middle-elm: $holygrail-middle-element, $holygrail-right-elm: $holygrail-right-element, $holygrail-bp: $holygrail-breakpoint, $holygrail-left-c: $holygrail-left-column, $holygrail-middle-c: $holygrail-middle-column, $holygrail-right-c: $holygrail-right-column, $g-width: $gutter-width, $c-margin: $container-margin, $holygrail-center: $center-containers, $holygrail-maxwidth: $center-container-max-width, $gcbsp: $holygrail-column-bottom-spacing) { 90 | @include container($holygrail-maxwidth, $holygrail-center, $c-margin); 91 | 92 | .#{$holygrail-left-elm}, 93 | .#{$holygrail-middle-elm}, 94 | .#{$holygrail-right-elm} { 95 | @include column(12, null, $g-width); 96 | @include rem(margin-bottom, $gcbsp); 97 | clear: both; 98 | } 99 | @media screen and (min-width: $holygrail-bp) { 100 | .#{$holygrail-left-elm} { 101 | @include column($holygrail-left-c, null, $g-width); 102 | clear: none; 103 | } 104 | 105 | .#{$holygrail-middle-elm} { 106 | @include column($holygrail-middle-c, $holygrail-left-c, $g-width); 107 | clear: none; 108 | } 109 | 110 | .#{$holygrail-right-elm} { 111 | @include column($holygrail-right-c, $holygrail-left-c + $holygrail-middle-c, $g-width); 112 | clear: none; 113 | } 114 | } 115 | } 116 | 117 | // Flank 118 | // ====================================================================== 119 | 120 | /// Flank allows to you do a content area flank by a sidebar, either on the left or the right. 121 | /// @example scss - Default Gridler 122 | /// .parentdiv { 123 | /// @include flank; 124 | /// ... 125 | /// } 126 | /// @example scss - Custom Gridler 127 | /// .parentdiv { 128 | /// @include flank($flankdir: 'left', $flank-flank-elm: 'flank', $flank-main-elm: 'main', $flank-main-c: 7, $flank-flank-c: 5, $flank-bp: 640px); 129 | /// ... 130 | /// } 131 | /// @param {Variable} $flankdir - Side you want the to flank to appear. Set to right or left 132 | /// @param {Variable} $flank-main-elm [$flank-main-element] - Class for the large area 133 | /// @param {Variable} $flank-flank-elm [$flank-flank-element] - Class for the small area 134 | /// @param {Variable} $flank-bp [$flank-breakpoint] - Breakpoint at which the flank collapse to one column 135 | /// @param {Variable} $flank-main-c [$flank-main-column] - Width in columns of large area 136 | /// @param {Variable} $flank-flank-c [$flank-flank-column] - Width in columns of large area 137 | /// @group Layout Helpers 138 | 139 | @mixin flank($flankdir: 'right', $flank-main-elm: $flank-main-element, $flank-flank-elm: $flank-flank-element, $flank-main-c: $flank-main-column, $flank-flank-c: $flank-flank-column, $flank-bp: $flank-breakpoint, $gcbsp: $flank-column-bottom-spacing, $g-width: $gutter-width, $c-margin: $container-margin, $flank-center: $center-containers, $flank-maxwidth: $center-container-max-width) { 140 | @include container($flank-maxwidth, $flank-center, $c-margin); 141 | 142 | .#{$flank-flank-elm}, 143 | .#{$flank-main-elm} { 144 | @include column(12, null, $g-width); 145 | @include rem(margin-bottom, $gcbsp); 146 | clear: both; 147 | } 148 | 149 | @if $flankdir == 'left' { 150 | // left flank 151 | @media screen and (min-width: $flank-bp) { 152 | .#{$flank-main-elm} { 153 | @include column($flank-main-c, $flank-flank-c, $g-width); 154 | clear: none; 155 | } 156 | 157 | .#{$flank-flank-elm} { 158 | @include column($flank-flank-c, 0, $g-width); 159 | clear: none; 160 | } 161 | } 162 | } 163 | 164 | @if $flankdir == 'right' { 165 | // right flank 166 | @media screen and (min-width: $flank-bp) { 167 | .#{$flank-main-elm} { 168 | @include column($flank-main-c, 0, $g-width); 169 | clear: none; 170 | } 171 | 172 | .#{$flank-flank-elm} { 173 | @include column($flank-flank-c, $flank-main-c, $g-width); 174 | clear: none; 175 | } 176 | } 177 | } 178 | } 179 | -------------------------------------------------------------------------------- /slate/kits/typography/_type-kit.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Type Kit 7 | // ====================================================================== 8 | 9 | $modular-scale-alpha: type-setting($global-base-font-size, $type-ratio, $modular-step-alpha); 10 | $modular-scale-beta: type-setting($global-base-font-size, $type-ratio, $modular-step-beta); 11 | $modular-scale-gamma: type-setting($global-base-font-size, $type-ratio, $modular-step-gamma); 12 | $modular-scale-delta: type-setting($global-base-font-size, $type-ratio, $modular-step-delta); 13 | $modular-scale-epsilon: type-setting($global-base-font-size, $type-ratio, $modular-step-epsilon); 14 | $modular-scale-zeta: type-setting($global-base-font-size, $type-ratio, $modular-step-zeta); 15 | $modular-scale-eta: type-setting($global-base-font-size, $type-ratio, $modular-step-eta); 16 | $modular-scale-theta: type-setting($global-base-font-size, $type-ratio, $modular-step-theta); 17 | $modular-scale-iota: type-setting($global-base-font-size, $type-ratio, $modular-step-iota); 18 | 19 | $lineheight-alpha: $modular-scale-alpha * $global-line-height; 20 | $lineheight-beta: $modular-scale-beta * $global-line-height; 21 | $lineheight-gamma: $modular-scale-gamma * $global-line-height; 22 | $lineheight-delta: $modular-scale-delta * $global-line-height; 23 | $lineheight-epsilon: $modular-scale-epsilon * $global-line-height; 24 | $lineheight-zeta: $modular-scale-zeta * $global-line-height; 25 | $lineheight-eta: $modular-scale-eta * $global-line-height; 26 | $lineheight-theta: $modular-scale-theta * $global-line-height; 27 | $lineheight-iota: $modular-scale-iota * $global-line-height; 28 | 29 | // Map of modular font scales 30 | // @group Typography 31 | $type-scale: ( alpha: $modular-scale-alpha, beta: $modular-scale-beta, gamma: $modular-scale-gamma, delta: $modular-scale-delta, epsilon: $modular-scale-epsilon, zeta: $modular-scale-zeta, eta: $modular-scale-eta, theta: $modular-scale-theta, iota: $modular-scale-iota ); 32 | 33 | // Map of line heights 34 | // @group Typography 35 | $line-heights: ( alpha: $lineheight-alpha, beta: $lineheight-beta, gamma: $lineheight-gamma, delta: $lineheight-delta, epsilon: $lineheight-epsilon, zeta: $lineheight-zeta, eta: $lineheight-eta, theta: $lineheight-theta, iota: $lineheight-iota ); 36 | 37 | /// Modular type mixin lets you easily generate a font size on an element with lineheights and margins based on a modular scale. 38 | /// @example scss - Modular Type 39 | /// p { 40 | /// @include type-modular(gamma, 24px, 24px, 24px, true ) 41 | /// } 42 | /// @param {string} $type-scale - Desired modular scale 43 | /// @param {string} $type-scale-vtspace - Desired margin above element (optional) 44 | /// @param {string} $type-scale-vbspace - Desired margin below element (optional) 45 | /// @param {string} $tflh - Overide line-height. Use pixel values, they will be converted. (optional) 46 | /// @param {string} $tfuline - Generate unitless lineheights. (optional) 47 | /// @group Typography 48 | 49 | @mixin type-modular($type-scale, $type-scale-vtspace: $global-base-font-size * $global-line-height, $type-scale-vbspace: $global-base-font-size * $global-line-height, $mlh: line-height($type-scale), $muline: $unitless-lineheight) { 50 | @include rem(font-size, type-scale($type-scale)); 51 | @if $muline == true { 52 | @include unitless-line-height(type-scale($type-scale), $mlh); 53 | } @else { 54 | @include rem(line-height, $mlh); 55 | } 56 | @include rem(margin-top, $type-scale-vtspace); 57 | @include rem(margin-bottom, $type-scale-vbspace); 58 | } 59 | 60 | /// Free type mixin lets you easily generate a font size on an element with lineheights and margins based on a pixel value. 61 | /// @example scss - Free Type 62 | /// p { 63 | /// @include type-free(16px, 24px, 24px, 24px, true) 64 | /// } 65 | /// @param {string} $type-size - Desired font size in pixels 66 | /// @param {string} $type-scale-vtspace - Desired margin above element (optional) 67 | /// @param {string} $type-scale-vbspace - Desired margin below element (optional) 68 | /// @param {string} $tflh - Overide line-height. Use pixel values, they will be converted. (optional) 69 | /// @param {string} $tfuline - Generate unitless lineheights. (optional) 70 | /// @group Typography 71 | 72 | @mixin type-free($type-size, $type-scale-vtspace, $type-scale-vbspace, $tflh: $global-line-height, $tfuline: $unitless-lineheight) { 73 | @include rem(font-size, $type-size); 74 | @if $tfuline == true { 75 | @include unitless-line-height($type-size, $tflh); 76 | } @else { 77 | @include rem(line-height, $tflh); 78 | } 79 | @include rem(margin-top, $type-scale-vtspace); 80 | @include rem(margin-bottom, $type-scale-vbspace); 81 | } 82 | 83 | /// Font face mixin lets you very easily add custom fonts in multiple formats. 84 | /// @example scss - Fontface 85 | /// @include fontface("IM FELL English", "IMFeENrm28P", $extrabold, normal, $formats: eot woff woff2 ttf svg); 86 | /// 87 | /// .custom-font { 88 | /// font-family: "IM FELL English"; 89 | /// } 90 | /// @param {string} $font-family - The fonts name eg "IM FELL English" 91 | /// @param {string} $font-name - The fonts filename without the extension "IMFeENrm28P" 92 | /// @param {string} $weight [normal] - Font weight 93 | /// @param {string} $style [normal] - Font style 94 | /// @param {string} $formats - List of font file types to use 95 | /// @group Typography 96 | 97 | @mixin fontface($font-family, $font-name, $weight: normal, $style: normal, $formats: eot woff ttf svg) { 98 | @if index('italic' 'oblique', $weight) { 99 | $style: $weight; 100 | $weight: normal; 101 | } 102 | @font-face { 103 | font-family: $font-family; 104 | font-weight: $weight; 105 | font-style: $style; 106 | @if index($formats, eot) { 107 | src: url('#{$custom-font-path}#{$font-name}.eot'); 108 | } 109 | src: fontsrc($formats, $font-name, $font-family); 110 | } 111 | } 112 | 113 | /// Responsive Type 114 | /// @example scss - Free Type 115 | /// :root { 116 | /// @include responsive-type; 117 | /// } 118 | /// @group Type Kit 119 | 120 | @mixin responsive-type { 121 | @if $responsive-text == true { 122 | @include rem-baseline($rt-bp-base); 123 | @media only screen and (min-width: $bp-tiny) { 124 | @include rem-baseline($rt-bp-tiny); 125 | } 126 | @media only screen and (min-width: $bp-xsmall) { 127 | @include rem-baseline($rt-bp-xsmall); 128 | } 129 | @media only screen and (min-width: $bp-small) { 130 | @include rem-baseline($rt-bp-small); 131 | } 132 | @media only screen and (min-width: $bp-medium) { 133 | @include rem-baseline($rt-bp-medium); 134 | } 135 | @media only screen and (min-width: $bp-large) { 136 | @include rem-baseline($rt-bp-large); 137 | } 138 | @media only screen and (min-width: $bp-xl) { 139 | @include rem-baseline($rt-bp-xl); 140 | } 141 | } 142 | } 143 | 144 | /// REM Baseline 145 | /// @example scss - Free Type 146 | /// .yourelement { 147 | /// @include rem-baseline; 148 | /// } 149 | /// @param {number} $zoom - zoom amount 150 | /// @group Type Kit 151 | @mixin rem-baseline($zoom: 100%) { 152 | font-size: ($zoom / 16px) * $global-base-font-size; 153 | } 154 | 155 | // unitless line height mixin 156 | @mixin unitless-line-height($font-size, $line-height: $global-line-height) { 157 | line-height: unitless-line-height($font-size, $line-height); 158 | } 159 | 160 | /// Draw Baselines to help with setting typography. 161 | /// @example scss - lines 162 | /// .yourelement { 163 | /// @include lines($global-base-font-size, $global-line-height); 164 | /// } 165 | /// @param {number} $line-font-size - Overide the font size used to calculate the lines 166 | /// @param {number} $line-line-height - Overide the lineheight used to calculate the lines 167 | /// @group Type Kit 168 | @mixin baseline($line-font-size: $global-base-font-size, $line-line-height: $global-line-height) { 169 | @if($type-debug == true) { 170 | @include rem(background-size, ($line-font-size * $line-line-height) ($line-font-size * $line-line-height)); 171 | background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, .3) 1px, transparent 1px); 172 | background-position: left -1px; 173 | background-repeat: repeat; 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /sassdoc/assets/css/main.css: -------------------------------------------------------------------------------- 1 | .container:after,.header:after,.searchbar:after{content:"";display:table;clear:both}.visually-hidden{width:1px;height:1px;position:absolute;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.sidebar__title{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}code[class*='language-'],pre[class*='language-']{color:black;text-shadow:0 1px white;font-family:Consolas, Monaco, 'Andale Mono', monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*='language-']::-moz-selection,pre[class*='language-'] ::-moz-selection,code[class*='language-']::-moz-selection,code[class*='language-'] ::-moz-selection{text-shadow:none;background:#b3d4fc}pre[class*='language-']::selection,pre[class*='language-'] ::selection,code[class*='language-']::selection,code[class*='language-'] ::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*='language-'],pre[class*='language-']{text-shadow:none}}pre[class*='language-']{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*='language-'],pre[class*='language-']{background:white}:not(pre)>code[class*='language-']{padding:.1em;border-radius:.3em}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:slategray}.token.punctuation{color:#999}.namespace{opacity:.7}.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol{color:#905}.token.selector,.token.attr-name,.token.string,.token.builtin{color:#690}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#a67f59;background:rgba(255,255,255,0.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.regex,.token.important{color:#e90}.token.important{font-weight:bold}.token.entity{cursor:help}html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*,*::after,*::before{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}body{font:1em/1.35 "Open Sans","Helvetica Neue Light","Helvetica Neue","Helvetica","Arial",sans-serif;overflow:auto;margin:0}a{transition:0.15s;text-decoration:none;color:#dd5a6f}a:hover,a:hover code{color:#333}table p{margin:0 0 0.5rem}:not(pre)>code{color:#dd5a6f;white-space:nowrap;font-weight:normal}@media (max-width: 800px){table,tbody,tr,td,th{display:block}thead{width:1px;height:1px;position:absolute;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}tr{padding-bottom:1em;margin-bottom:1em;border-bottom:2px solid #ddd}td::before,th::before{content:attr(data-label) ": ";text-transform:capitalize;font-weight:bold}td p,th p{display:inline}}.layout-toggle{display:none}@media (min-width: 801px){.layout-toggle{position:absolute;top:8px;left:20px;font-size:2em;cursor:pointer;color:white;display:block}}@media (min-width: 801px){.sidebar-closed .sidebar{-webkit-transform:translateX(-280px);-ms-transform:translateX(-280px);transform:translateX(-280px)}.sidebar-closed .main{padding-left:0}.sidebar-closed .header{left:0}}.list-unstyled{padding-left:0;list-style:none;line-height:1.5;margin-top:0;margin-bottom:1.5rem}.list-inline li{display:inline-block}.container{max-width:100%;width:1170px;margin:0 auto;padding:0 2rem}.relative{position:relative}.clear{clear:both}.header{position:fixed;top:0;right:0;left:280px;box-shadow:0 2px 5px rgba(0,0,0,0.26);padding:1em 0;background:#dd5a6f;color:#e0e0e0;z-index:4000}@media (max-width: 800px){.header{left:0}}@media (min-width: 801px){.header{transition:0.2s cubic-bezier(0.215, 0.61, 0.355, 1)}}.header__title{font-weight:500;text-align:center;margin:0 0 0.5em 0}.header__title a{color:#e0e0e0}@media (min-width: 801px){.header__title{float:left;font-size:1em;margin-top:.25em;margin-bottom:0}}.searchbar{display:inline-block;float:right}@media (max-width: 800px){.searchbar{display:block;float:none}}.searchbar__form{float:right;position:relative}@media (max-width: 800px){.searchbar__form{float:none}}@media (min-width: 801px){.searchbar__form{min-width:15em}}.searchbar__field{border:none;padding:0.5em;font-size:1em;margin:0;width:100%;box-shadow:0 1.5px 4px rgba(0,0,0,0.24),0 1.5px 6px rgba(0,0,0,0.12);border:1px solid #e0e0e0}.searchbar__suggestions{position:absolute;top:100%;right:0;left:0;box-shadow:0 1.5px 4px rgba(0,0,0,0.24),0 1.5px 6px rgba(0,0,0,0.12);border:1px solid #e0e0e0;background:white;padding:0;margin:0;list-style:none;z-index:2}.searchbar__suggestions:empty{display:none}.searchbar__suggestions .selected{background:#ddd}.searchbar__suggestions li{border-bottom:1px solid #e0e0e0}.searchbar__suggestions li:last-of-type{border:none}.searchbar__suggestions a{display:block;padding:0.5em;font-size:0.9em}.searchbar__suggestions a:hover,.searchbar__suggestions a:active,.searchbar__suggestions a:focus{background:#e0e0e0}.searchbar__suggestions code{margin-right:.5em}@media (min-width: 801px){.sidebar{position:fixed;top:0;bottom:0;left:0;overflow:auto;box-shadow:1px 0 1.5px rgba(0,0,0,0.12);width:280px;z-index:2;border-right:1px solid #e0e0e0;transition:0.2s cubic-bezier(0.215, 0.61, 0.355, 1)}}@media (max-width: 800px){.sidebar{margin-top:4em}}.sidebar__annotation{color:#5c4863}.sidebar__item{font-size:0.9em}.sidebar__item a{padding:0.5em 4.5em;display:block;text-decoration:none;color:#333}.sidebar__item:hover,.sidebar__item:active,.sidebar__item:focus{background:#e0e0e0}.sidebar__item.is-collapsed+*{display:none}.sidebar__item--heading{padding:1em 1.5em}.sidebar__item--heading a{font-weight:bold}.sidebar__item--sub-heading{padding:0.5em 2.5em}.sidebar__item--sub-heading a{color:#888}.sidebar__item--heading,.sidebar__item--sub-heading{position:relative}.sidebar__item--heading:after,.sidebar__item--sub-heading:after{position:absolute;top:50%;right:2em;content:'\25BC';margin-top:-0.5em;color:#ddd;font-size:0.7em}.sidebar__item--heading.is-collapsed:after,.sidebar__item--sub-heading.is-collapsed:after{content:'\25B6'}.sidebar__item--heading a,.sidebar__item--sub-heading a{padding:0;display:inline}.sidebar__description{color:#e0e0e0;padding-right:2em}.sidebar__header{border-bottom:1px solid #e0e0e0}.sidebar__title{font-size:1em;margin:0;padding:1.45em}.btn-toggle{background:#EFEFEF;border:none;border-bottom:1px solid #e0e0e0;display:block;padding:1em;width:100%;cursor:pointer;color:#999;font-weight:bold;margin:0;transition:0.15s ease-out}.btn-toggle:hover,.btn-toggle:active,.btn-toggle:focus{background:#DFDFDF}.main{background:#f9f9f9;position:relative}@media (min-width: 801px){.main{transition:0.2s cubic-bezier(0.215, 0.61, 0.355, 1);padding-left:280px;padding-top:4em;min-height:45em}}.main__section{margin-top:5em;border-top:5px solid rgba(92,72,99,0.2)}.header+.main__section{margin-top:0;border-top:none}.main__heading,.main__heading--secondary{padding:1em 0;margin-top:0}@media (min-width: 801px){.main__heading,.main__heading--secondary{padding:2em 0 0}}.main__heading{color:#5c4863;font-size:3.5em;text-align:center;border-bottom:5px solid rgba(92,72,99,0.2);padding-bottom:.5em;margin-bottom:1em;background:rgba(92,72,99,0.1)}.main__heading--secondary{font-size:3em;color:#dd5a6f;text-transform:uppercase;font-weight:bold;padding-top:0;margin-bottom:-3rem;position:relative}.main__heading--secondary .container{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.main__heading--secondary::before{content:'';position:absolute;left:0;right:0;bottom:0.15em;height:0.2em;background-color:#dd5a6f}.footer{background:#e0e0e0;padding:1em 0}.footer .container{position:relative}.footer__project-info{float:left}.footer__watermark{position:absolute;right:0;top:-0.7em}.footer__watermark img{display:block;max-width:7em}.project-info__name,.project-info__version,.project-info__license{display:inline-block}.project-info__version,.project-info__license{color:#555}.project-info__license{text-indent:-0.25em}.main__section{margin-bottom:4.5rem}.item__heading{color:#333;margin:4.5rem 0 1.5rem 0;position:relative;font-size:2em;font-weight:300;float:left}.item__name{color:#dd5a6f}.item__example{margin-bottom:1.5rem}.item__example,.item__code{box-shadow:0 1.5px 4px rgba(0,0,0,0.24),0 1.5px 6px rgba(0,0,0,0.12);border:1px solid #e0e0e0;word-wrap:break-word;line-height:1.42}.item__code{padding-right:7em;clear:both;cursor:pointer}.item__code--togglable::after{position:absolute;right:0;bottom:-2.5em;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0;color:#c4c4c4;font-size:0.8em;transition:0.2s ease-out}.item__code--togglable:hover::after,.item__code--togglable:active::after,.item__code--togglable:focus::after{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1}.item__code--togglable[data-current-state='expanded']::after{content:'Click to collapse.'}.item__code--togglable[data-current-state='collapsed']::after{content:'Click to expand.'}.example__description{padding:1em;background:#EFEFEF}.example__description p{margin:0}.example__code[class*='language-']{margin:0}.item__anchor{font-size:0.6em;color:#eeafb9}@media (min-width: 801px){.item__anchor{position:absolute;right:101%;bottom:0.25em;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";opacity:0}.item:hover .item__anchor{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";opacity:1}}.item__deprecated{display:inline-block;overflow:hidden;margin-top:5.5em;margin-left:1em}.item__deprecated strong{float:left;color:#c00;text-transform:uppercase}.item__deprecated p{float:left;margin:0;padding-left:0.5em}.item__type{color:#ddd;text-transform:capitalize;font-size:0.75em}.item__alias,.item__aliased{color:#ddd;font-size:0.8em}.item__sub-heading{color:#333;margin-top:0;margin-bottom:1.5rem;font-size:1.2em}.item__parameters{width:100%;margin-bottom:1em;border-collapse:collapse}.item__parameters thead th{vertical-align:bottom;border-bottom:2px solid #ddd;border-top:none;text-align:left;color:#707070}.item__parameters tbody th{text-align:left}.item__parameters td,.item__parameters th{padding:0.5em 0.5em 0.5em 0;vertical-align:top}@media (min-width: 801px){tbody>.item__parameter:first-of-type>td{border-top:none}.item__parameters td,.item__parameters th{border-top:1px solid #ddd}}.item__access{text-transform:capitalize;color:#5c4863;font-size:0.8em}.item__since{float:right;padding-top:0.9em;color:#c4c4c4;margin-bottom:1em}.item__source-link{position:absolute;top:1px;right:1px;background:white;padding:1em;z-index:2;color:#c4c4c4}.item__cross-type{color:#4d4d4d;font-family:'Consolas', 'Monaco', 'Andale Mono', monospace;font-size:0.8em}.item__description{margin-bottom:1.5rem}li.item__description{margin-bottom:0}.item__description--inline>*{display:inline-block;margin:0}.item__code-wrapper{position:relative;clear:both;margin-bottom:1.5rem}.color-preview--inline{padding:2px 4px;border:1px solid rgba(0,0,0,0.1);border-radius:3px}.color-preview--block{width:2em;height:2em;position:absolute;top:140%;right:0;top:calc(100% + 20px);border:1px solid rgba(0,0,0,0.1);border-radius:3px} 2 | -------------------------------------------------------------------------------- /slate/kits/buttons/_button-kit.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Button Kit 7 | // ====================================================================== 8 | /// Button mixin lets you quickly make flat ui style buttons consistently accross all types of buttons (input, button and anchor). 9 | /// @example scss - Default Button using default sass map 10 | /// .button { 11 | /// @include button; 12 | /// } 13 | /// @example scss - Custom Button using custom sass map 14 | /// .button { 15 | /// @include button($my-map); 16 | /// } 17 | /// @author Hash&Salt 18 | /// @param {Variable} $map-name [$button-default] - Skin variable to use for the button. 19 | /// @group Buttons 20 | 21 | @mixin button($map-name: $button-default) { 22 | // Base Button Style 23 | @include rem(margin, map-get($map-name, margin)); 24 | @include rem(padding, map-get($map-name, padding)); 25 | @include rem(line-height, map-get($map-name, height)); 26 | @include rem(font-size, map-get($map-name, font-size)); 27 | @include rem(height, map-get($map-name, height)); 28 | @include rem(border-radius, map-get($map-name, rounded)); 29 | font-family: map-get($map-name, font-family); 30 | text-transform: map-get($map-name, text-transform); 31 | display: map-get($map-name, display); 32 | font-weight: map-get($map-name, textweight); 33 | text-align: map-get($map-name, textalign); 34 | box-sizing: map-get($map-name, boxsizing); 35 | border: 0; 36 | text-decoration: none; 37 | cursor: pointer; 38 | // Background Color 39 | background: map-get($map-name, default); 40 | // Borders 41 | @if map-get($map-name, use-borders) == true { 42 | border-left: map-get($map-name, border-left); 43 | border-right: map-get($map-name, border-right); 44 | border-top: map-get($map-name, border-top); 45 | border-bottom: map-get($map-name, border-bottom); 46 | } @else { 47 | border: 0; 48 | } 49 | @if lightness(map-get($map-name, default)) < 60% { 50 | color: map-get($map-name, textlight); 51 | } @else { 52 | color: map-get($map-name, textdark); 53 | } 54 | 55 | &:hover { 56 | background: map-get($map-name, hover); 57 | @if lightness(map-get($map-name, hover)) < 60% { 58 | color: map-get($map-name, textlight); 59 | } @else { 60 | color: map-get($map-name, textdark); 61 | } 62 | @if map-get($map-name, use-borders) == true { 63 | border-left: map-get($map-name, border-hover-left); 64 | border-right: map-get($map-name, border-hover-right); 65 | border-top: map-get($map-name, border-hover-top); 66 | border-bottom: map-get($map-name, border-hover-bottom); 67 | } @else { 68 | border: 0; 69 | } 70 | } 71 | 72 | &:focus { 73 | background: map-get($map-name, focus); 74 | outline: none; 75 | 76 | @if lightness(map-get($map-name, focus)) < 60% { 77 | color: map-get($map-name, textlight); 78 | } @else { 79 | color: map-get($map-name, textdark); 80 | } 81 | @if map-get($map-name, use-borders) == true { 82 | border-left: map-get($map-name, border-focus-left); 83 | border-right: map-get($map-name, border-focus-right); 84 | border-top: map-get($map-name, border-focus-top); 85 | border-bottom: map-get($map-name, border-focus-bottom); 86 | } @else { 87 | border: 0; 88 | } 89 | } 90 | 91 | &:active { 92 | background: map-get($map-name, active); 93 | 94 | @if lightness(map-get($map-name, active)) < 60% { 95 | color: map-get($map-name, textlight); 96 | } @else { 97 | color: map-get($map-name, textdark); 98 | } 99 | @if map-get($map-name, use-borders) == true { 100 | border-left: map-get($map-name, border-focus-left); 101 | border-right: map-get($map-name, border-focus-right); 102 | border-top: map-get($map-name, border-focus-top); 103 | border-bottom: map-get($map-name, border-focus-bottom); 104 | } @else { 105 | border: 0; 106 | } 107 | } 108 | 109 | &:disabled { 110 | background: map-get($map-name, disabled); 111 | 112 | @if lightness(map-get($map-name, disabled)) < 60% { 113 | color: map-get($map-name, textlight); 114 | } @else { 115 | color: map-get($map-name, textdark); 116 | } 117 | cursor: default; 118 | @if map-get($map-name, use-borders) == true { 119 | border-left: map-get($map-name, border-disabled-left); 120 | border-right: map-get($map-name, border-disabled-right); 121 | border-top: map-get($map-name, border-disabled-top); 122 | border-bottom: map-get($map-name, border-disabled-bottom); 123 | } @else { 124 | border: 0; 125 | } 126 | } 127 | } 128 | /// Gradient button mixin lets you quickly make gradient buttons consistently accross all types of buttons (input, button and anchor). 129 | /// @example scss - Default Gradient button using default gradient color map 130 | /// .button { 131 | /// @include button-gradient; 132 | /// } 133 | /// @example scss - Custom gradient button using custom color map 134 | /// .button { 135 | /// @include button-gradient($my-map); 136 | /// } 137 | /// @param {Variable} $map-name [$button-gradient] - Skin variable to use for the gradient button. 138 | /// @group Buttons 139 | @mixin button-gradient($map-name: $button-gradient) { 140 | // Gradient Button Style 141 | @include rem(margin, map-get($map-name, margin)); 142 | @include rem(padding, map-get($map-name, padding)); 143 | @include rem(line-height, map-get($map-name, height)); 144 | @include rem(font-size, map-get($map-name, font-size)); 145 | @include rem(height, map-get($map-name, height)); 146 | @include rem(border-radius, map-get($map-name, rounded)); 147 | font-family: map-get($map-name, font-family); 148 | text-transform: map-get($map-name, text-transform); 149 | display: map-get($map-name, display); 150 | font-weight: map-get($map-name, textweight); 151 | text-align: map-get($map-name, textalign); 152 | box-sizing: map-get($map-name, boxsizing); 153 | border: 0; 154 | text-decoration: none; 155 | cursor: pointer; 156 | @if lightness(map-get($map-name, start-color)) < 60% { 157 | color: map-get($map-name, textlight); 158 | } @else { 159 | color: map-get($map-name, textdark); 160 | } 161 | @if map-get($map-name, use-borders) == true { 162 | border-left: map-get($map-name, border-left); 163 | border-right: map-get($map-name, border-right); 164 | border-top: map-get($map-name, border-top); 165 | border-bottom: map-get($map-name, border-bottom); 166 | } @else { 167 | border: 0; 168 | } 169 | // Left to right 170 | @if map-get($map-name, mode) == 'ltr' { 171 | @include gradient-horizontal(map-get($map-name, start-color), map-get($map-name, end-color), map-get($map-name, start-pos), map-get($map-name, end-pos)); 172 | 173 | &:hover { 174 | @include gradient-horizontal(map-get($map-name, start-color-hover), map-get($map-name, end-color-hover), map-get($map-name, start-pos), map-get($map-name, end-pos)); 175 | @if lightness(map-get($map-name, start-color)) < 60% { 176 | color: map-get($map-name, textlight); 177 | } @else { 178 | color: map-get($map-name, textdark); 179 | } 180 | @if map-get($map-name, use-borders) == true { 181 | border-left: map-get($map-name, border-hover-left); 182 | border-right: map-get($map-name, border-hover-right); 183 | border-top: map-get($map-name, border-hover-top); 184 | border-bottom: map-get($map-name, border-hover-bottom); 185 | } @else { 186 | border: 0; 187 | } 188 | } 189 | 190 | &:focus { 191 | @include gradient-horizontal(map-get($map-name, start-color-hover), map-get($map-name, end-color-hover), map-get($map-name, start-pos), map-get($map-name, end-pos)); 192 | outline: none; 193 | @if lightness(map-get($map-name, start-color)) < 60% { 194 | color: map-get($map-name, textlight); 195 | } @else { 196 | color: map-get($map-name, textdark); 197 | } 198 | @if map-get($map-name, use-borders) == true { 199 | border-left: map-get($map-name, border-focus-left); 200 | border-right: map-get($map-name, border-focus-right); 201 | border-top: map-get($map-name, border-focus-top); 202 | border-bottom: map-get($map-name, border-focus-bottom); 203 | } @else { 204 | border: 0; 205 | } 206 | } 207 | 208 | &:active { 209 | @include gradient-horizontal(map-get($map-name, start-color-hover), map-get($map-name, end-color-hover), map-get($map-name, start-pos), map-get($map-name, end-pos)); 210 | @if lightness(map-get($map-name, start-color)) < 60% { 211 | color: map-get($map-name, textlight); 212 | } @else { 213 | color: map-get($map-name, textdark); 214 | } 215 | @if map-get($map-name, use-borders) == true { 216 | border-left: map-get($map-name, border-focus-left); 217 | border-right: map-get($map-name, border-focus-right); 218 | border-top: map-get($map-name, border-focus-top); 219 | border-bottom: map-get($map-name, border-focus-bottom); 220 | } @else { 221 | border: 0; 222 | } 223 | } 224 | 225 | &:disabled { 226 | @include gradient-horizontal(map-get($map-name, start-color-disabled), map-get($map-name, end-color-disabled)); 227 | @if lightness(map-get($map-name, start-color)) < 60% { 228 | color: map-get($map-name, textlight); 229 | } @else { 230 | color: map-get($map-name, textdark); 231 | } 232 | @if map-get($map-name, use-borders) == true { 233 | border-left: map-get($map-name, border-disabled-left); 234 | border-right: map-get($map-name, border-disabled-right); 235 | border-top: map-get($map-name, border-disabled-top); 236 | border-bottom: map-get($map-name, border-disabled-bottom); 237 | } @else { 238 | border: 0; 239 | } 240 | } 241 | } 242 | 243 | @if map-get($map-name, mode) == 'ttb' { 244 | @include gradient-vertical(map-get($map-name, start-color), map-get($map-name, end-color), map-get($map-name, start-pos), map-get($map-name, end-pos)); 245 | 246 | &:hover { 247 | @include gradient-vertical(map-get($map-name, start-color-hover), map-get($map-name, end-color-hover), map-get($map-name, start-pos), map-get($map-name, end-pos)); 248 | @if lightness(map-get($map-name, start-color)) < 60% { 249 | color: map-get($map-name, textlight); 250 | } @else { 251 | color: map-get($map-name, textdark); 252 | } 253 | @if map-get($map-name, use-borders) == true { 254 | border-left: map-get($map-name, border-hover-left); 255 | border-right: map-get($map-name, border-hover-right); 256 | border-top: map-get($map-name, border-hover-top); 257 | border-bottom: map-get($map-name, border-hover-bottom); 258 | } @else { 259 | border: 0; 260 | } 261 | } 262 | 263 | &:focus { 264 | @include gradient-vertical(map-get($map-name, start-color-hover), map-get($map-name, end-color-hover), map-get($map-name, start-pos), map-get($map-name, end-pos)); 265 | outline: none; 266 | @if lightness(map-get($map-name, start-color)) < 60% { 267 | color: map-get($map-name, textlight); 268 | } @else { 269 | color: map-get($map-name, textdark); 270 | } 271 | @if map-get($map-name, use-borders) == true { 272 | border-left: map-get($map-name, border-focus-left); 273 | border-right: map-get($map-name, border-focus-right); 274 | border-top: map-get($map-name, border-focus-top); 275 | border-bottom: map-get($map-name, border-focus-bottom); 276 | } @else { 277 | border: 0; 278 | } 279 | } 280 | 281 | &:active { 282 | @include gradient-vertical(map-get($map-name, start-color-hover), map-get($map-name, end-color-hover), map-get($map-name, start-pos), map-get($map-name, end-pos)); 283 | @if lightness(map-get($map-name, start-color)) < 60% { 284 | color: map-get($map-name, textlight); 285 | } @else { 286 | color: map-get($map-name, textdark); 287 | } 288 | @if map-get($map-name, use-borders) == true { 289 | border-left: map-get($map-name, border-focus-left); 290 | border-right: map-get($map-name, border-focus-right); 291 | border-top: map-get($map-name, border-focus-top); 292 | border-bottom: map-get($map-name, border-focus-bottom); 293 | } @else { 294 | border: 0; 295 | } 296 | } 297 | 298 | &:disabled { 299 | @include gradient-vertical(map-get($map-name, start-color-disabled), map-get($map-name, end-color-disabled)); 300 | @if lightness(map-get($map-name, start-color)) < 60% { 301 | color: map-get($map-name, textlight); 302 | } @else { 303 | color: map-get($map-name, textdark); 304 | } 305 | @if map-get($map-name, use-borders) == true { 306 | border-left: map-get($map-name, border-disabled-left); 307 | border-right: map-get($map-name, border-disabled-right); 308 | border-top: map-get($map-name, border-disabled-top); 309 | border-bottom: map-get($map-name, border-disabled-bottom); 310 | } @else { 311 | border: 0; 312 | } 313 | } 314 | } 315 | 316 | @if map-get($map-name, mode) == 'rad' { 317 | @include gradient-radial(map-get($map-name, start-color), map-get($map-name, end-color)); 318 | 319 | &:hover { 320 | @include gradient-radial(map-get($map-name, start-color-hover), map-get($map-name, end-color-hover)); 321 | @if lightness(map-get($map-name, start-color)) < 60% { 322 | color: map-get($map-name, textlight); 323 | } @else { 324 | color: map-get($map-name, textdark); 325 | } 326 | } 327 | 328 | &:focus { 329 | @include gradient-radial(map-get($map-name, start-color-focus), map-get($map-name, end-color-focus)); 330 | outline: none; 331 | @if lightness(map-get($map-name, start-color)) < 60% { 332 | color: map-get($map-name, textlight); 333 | } @else { 334 | color: map-get($map-name, textdark); 335 | } 336 | } 337 | 338 | &:active { 339 | @include gradient-radial(map-get($map-name, start-color-active), map-get($map-name, end-color-active)); 340 | @if lightness(map-get($map-name, start-color)) < 60% { 341 | color: map-get($map-name, textlight); 342 | } @else { 343 | color: map-get($map-name, textdark); 344 | } 345 | } 346 | 347 | &:disabled { 348 | @include gradient-radial(map-get($map-name, start-color-disabled), map-get($map-name, end-color-disabled)); 349 | @if lightness(map-get($map-name, start-color)) < 60% { 350 | color: map-get($map-name, textlight); 351 | } @else { 352 | color: map-get($map-name, textdark); 353 | } 354 | } 355 | } 356 | } 357 | -------------------------------------------------------------------------------- /sassdoc/assets/js/main.min.js: -------------------------------------------------------------------------------- 1 | !function(t){function e(t,n){this.list=t,this.options=n=n||{};var i,o,s;for(i=0,keys=["sort","includeScore","shouldSort"],o=keys.length;o>i;i++)s=keys[i],this.options[s]=s in n?n[s]:e.defaultOptions[s];for(i=0,keys=["searchFn","sortFn","keys","getFn"],o=keys.length;o>i;i++)s=keys[i],this.options[s]=n[s]||e.defaultOptions[s]}var n=function(t,e){if(e=e||{},this.options=e,this.options.location=e.location||n.defaultOptions.location,this.options.distance="distance"in e?e.distance:n.defaultOptions.distance,this.options.threshold="threshold"in e?e.threshold:n.defaultOptions.threshold,this.options.maxPatternLength=e.maxPatternLength||n.defaultOptions.maxPatternLength,this.pattern=e.caseSensitive?t:t.toLowerCase(),this.patternLen=t.length,this.patternLen>this.options.maxPatternLength)throw new Error("Pattern length is too long");this.matchmask=1<i;)this._bitapScore(e,l+o)<=u?i=o:d=o,o=Math.floor((d-i)/2+i);for(d=o,s=Math.max(1,l-o+1),r=Math.min(l+o,c)+this.patternLen,a=Array(r+2),a[r+1]=(1<=s;n--)if(p=this.patternAlphabet[t.charAt(n-1)],a[n]=0===e?(a[n+1]<<1|1)&p:(a[n+1]<<1|1)&p|((h[n+1]|h[n])<<1|1)|h[n+1],a[n]&this.matchmask&&(g=this._bitapScore(e,n-1),u>=g)){if(u=g,f=n-1,m.push(f),!(f>l))break;s=Math.max(1,2*l-f)}if(this._bitapScore(e+1,l)>u)break;h=a}return{isMatch:f>=0,score:g}};var i={deepValue:function(t,e){for(var n=0,e=e.split("."),i=e.length;i>n;n++){if(!t)return null;t=t[e[n]]}return t}};e.defaultOptions={id:null,caseSensitive:!1,includeScore:!1,shouldSort:!0,searchFn:n,sortFn:function(t,e){return t.score-e.score},getFn:i.deepValue,keys:[]},e.prototype.search=function(t){var e,n,o,s,r,a=new this.options.searchFn(t,this.options),h=this.list,p=h.length,c=this.options,l=this.options.keys,u=l.length,f=[],d={},g=[],m=function(t,e,n){void 0!==t&&null!==t&&"string"==typeof t&&(s=a.search(t),s.isMatch&&(r=d[n],r?r.score=Math.min(r.score,s.score):(d[n]={item:e,score:s.score},f.push(d[n]))))};if("string"==typeof h[0])for(var e=0;p>e;e++)m(h[e],e,e);else for(var e=0;p>e;e++)for(o=h[e],n=0;u>n;n++)m(this.options.getFn(o,l[n]),o,e);c.shouldSort&&f.sort(c.sortFn);for(var y=c.includeScore?function(t){return f[t]}:function(t){return f[t].item},L=c.id?function(t){return i.deepValue(y(t),c.id)}:function(t){return y(t)},e=0,v=f.length;v>e;e++)g.push(L(e));return g},"object"==typeof exports?module.exports=e:"function"==typeof define&&define.amd?define(function(){return e}):t.Fuse=e}(this);(function($,global){var Sidebar=function(conf){this.conf=$.extend({collapsedClass:"is-collapsed",storageKey:"_sassdoc_sidebar_index",indexAttribute:"data-slug",toggleBtn:".js-btn-toggle",init:true},conf||{});if(this.conf.init===true){this.initialize()}};Sidebar.prototype.initialize=function(){this.conf.nodes=$("["+this.conf.indexAttribute+"]");this.load();this.updateDOM();this.bind();this.loadToggle()};Sidebar.prototype.loadToggle=function(){$("",{"class":"layout-toggle",html:"×","data-alt":"→"}).appendTo($(".header"));$(".layout-toggle").on("click",function(){var $this=$(this);var alt;$("body").toggleClass("sidebar-closed");alt=$this.html();$this.html($this.data("alt"));$this.data("alt",alt)})};Sidebar.prototype.load=function(){var index="localStorage"in global?global.localStorage.getItem(this.conf.storageKey):null;this.index=index?JSON.parse(index):this.buildIndex()};Sidebar.prototype.buildIndex=function(){var index={};var $item;this.conf.nodes.each($.proxy(function(index,item){$item=$(item);index[$item.attr(this.conf.indexAttribute)]=!$item.hasClass(this.conf.collapsedClass)},this));return index};Sidebar.prototype.updateDOM=function(){var item;for(item in this.index){if(this.index[item]===false){$("["+this.conf.indexAttribute+'="'+item+'"]').addClass(this.conf.collapsedClass)}}};Sidebar.prototype.save=function(){if(!("localStorage"in global)){return}global.localStorage.setItem(this.conf.storageKey,JSON.stringify(this.index))};Sidebar.prototype.bind=function(){var $item,slug,fn,text;var collapsed=false;global.onbeforeunload=$.proxy(function(){this.save()},this);$(this.conf.toggleBtn).on("click",$.proxy(function(event){$node=$(event.target);text=$node.attr("data-alt");$node.attr("data-alt",$node.text());$node.text(text);fn=collapsed===true?"removeClass":"addClass";this.conf.nodes.each($.proxy(function(index,item){$item=$(item);slug=$item.attr(this.conf.indexAttribute);this.index[slug]=collapsed;$("["+this.conf.indexAttribute+'="'+slug+'"]')[fn](this.conf.collapsedClass)},this));collapsed=!collapsed;this.save()},this));this.conf.nodes.on("click",$.proxy(function(event){$item=$(event.target);slug=$item.attr(this.conf.indexAttribute);this.index[slug]=!this.index[slug];$item.toggleClass(this.conf.collapsedClass)},this))};global.Sidebar=Sidebar})(window.jQuery,window);(function($,global){var Search=function(conf){this.conf=$.extend({search:{items:".sassdoc__item",input:"#js-search-input",form:"#js-search",suggestionsWrapper:"#js-search-suggestions"},fuse:{keys:["name"],threshold:.3},init:true},conf||{});if(this.conf.init===true){this.initialize()}};Search.prototype.initialize=function(){this.index=new Fuse($.map($(this.conf.search.items),function(item){var $item=$(item);return{group:$item.data("group"),name:$item.data("name"),type:$item.data("type"),node:$item}}),this.conf.fuse);this.initializeSearch()};Search.prototype.fillSuggestions=function(items){var searchSuggestions=$(this.conf.search.suggestionsWrapper);searchSuggestions.html("");var suggestions=$.map(items.slice(0,10),function(item){var $li=$("
  • ",{"data-group":item.group,"data-type":item.type,"data-name":item.name,html:''+item.type.slice(0,3)+" "+item.name+""});searchSuggestions.append($li);return $li});return suggestions};Search.prototype.search=function(term){return this.fillSuggestions(this.index.search(term))};Search.prototype.initializeSearch=function(){var searchForm=$(this.conf.search.form);var searchInput=$(this.conf.search.input);var searchSuggestions=$(this.conf.search.suggestionsWrapper);var currentSelection=-1;var suggestions=[];var selected;var self=this;searchSuggestions.on("click",function(e){var target=$(event.target);if(target.nodeName==="A"){searchInput.val(target.parent().data("name"));suggestions=self.fillSuggestions([])}});searchForm.on("keyup",function(e){e.preventDefault();if(e.keyCode===13){if(selected){suggestions=self.fillSuggestions([]);searchInput.val(selected.data("name"));window.location=selected.children().first().attr("href")}e.stopPropagation()}if(e.keyCode===40){currentSelection=(currentSelection+1)%suggestions.length}if(e.keyCode===38){currentSelection=currentSelection-1;if(currentSelection<0){currentSelection=suggestions.length-1}}if(suggestions[currentSelection]){if(selected){selected.removeClass("selected")}selected=suggestions[currentSelection];selected.addClass("selected")}});searchInput.on("keyup",function(e){if(e.keyCode!==40&&e.keyCode!==38){currentSelection=-1;suggestions=self.search($(this).val())}else{e.preventDefault()}}).on("search",function(){suggestions=self.search($(this).val())})};global.Search=Search})(window.jQuery,window);(function($,global){"use strict";var App=function(conf){this.conf=$.extend({search:new global.Search,sidebar:new global.Sidebar,init:true},conf||{});if(this.conf.init!==false){this.initialize()}};App.prototype.initialize=function(){this.codePreview()};App.prototype.codePreview=function(){var $item;var $code;var switchTo;$(".item__code--togglable").on("click",function(){$item=$(this);$code=$item.find("code");switchTo=$item.attr("data-current-state")==="expanded"?"collapsed":"expanded";$item.attr("data-current-state",switchTo);$code.html($item.attr("data-"+switchTo));Prism.highlightElement($code[0])})};global.App=App})(window.jQuery,window);(function($,global){$(document).ready(function(){var app=new global.App})})(window.jQuery,window);var self=typeof window!="undefined"?window:{},Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content)):t.util.type(e)==="Array"?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(p instanceof i)continue;a.lastIndex=0;var d=a.exec(p);if(d){l&&(c=d[1].length);var v=d.index-1+c,d=d[0].slice(c),m=d.length,g=v+m,y=p.slice(0,v+1),b=p.slice(g+1),w=[h,1];y&&w.push(y);var E=new i(u,f?t.tokenize(d,f):d);w.push(E);b&&w.push(b);Array.prototype.splice.apply(s,w)}}}return s},hooks:{all:{},add:function(e,n){var r=t.hooks.all;r[e]=r[e]||[];r[e].push(n)},run:function(e,n){var r=t.hooks.all[e];if(!r||!r.length)return;for(var i=0,s;s=r[i++];)s(n)}}},n=t.Token=function(e,t){this.type=e;this.content=t};n.stringify=function(e,r,i){if(typeof e=="string")return e;if(Object.prototype.toString.call(e)=="[object Array]")return e.map(function(t){return n.stringify(t,r,e)}).join("");var s={type:e.type,content:n.stringify(e.content,r,i),tag:"span",classes:["token",e.type],attributes:{},language:r,parent:i};s.type=="comment"&&(s.attributes.spellcheck="true");t.hooks.run("wrap",s);var o="";for(var u in s.attributes)o+=u+'="'+(s.attributes[u]||"")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'" '+o+">"+s.content+""};if(!self.document){if(!self.addEventListener)return self.Prism;self.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,i=n.code;self.postMessage(JSON.stringify(t.tokenize(i,t.languages[r])));self.close()},!1);return self.Prism}var r=document.getElementsByTagName("script");r=r[r.length-1];if(r){t.filename=r.src;document.addEventListener&&!r.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)}return self.Prism}();typeof module!="undefined"&&module.exports&&(module.exports=Prism);Prism.languages.markup={comment://g,prolog:/<\?.+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi};Prism.hooks.add("wrap",function(e){e.type==="entity"&&(e.attributes.title=e.content.replace(/&/,"&"))});Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/gi};Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{style:{pattern:/[\w\W]*?<\/style>/gi,inside:{tag:{pattern:/|<\/style>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.css}}});Prism.languages.css.selector={pattern:/[^\{\}\s][^\{\}]*(?=\s*\{)/g,inside:{"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/g,"pseudo-class":/:[-\w]+(?:\(.*\))?/g,"class":/\.[-:\.\w]+/g,id:/#[-:\.\w]+/g}};Prism.languages.insertBefore("css","ignore",{hexcode:/#[\da-f]{3,6}/gi,entity:/\\[\da-f]{1,8}/gi,number:/[\d%\.]+/g});Prism.languages.clike={comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|(^|[^:])\/\/.*?(\r?\n|$))/g,lookbehind:!0},string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/gi,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/gi,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g});Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}});Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/gi,inside:{tag:{pattern:/|<\/script>/gi,inside:Prism.languages.markup.tag.inside},rest:Prism.languages.javascript}}});Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm});Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i});Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i});Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g}); 2 | -------------------------------------------------------------------------------- /slate/kits/forms/_input-kit.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Slate Framework 3 | // ====================================================================== 4 | // 5 | // ====================================================================== 6 | // Inputs & Skins 7 | // ====================================================================== 8 | /// [Setup input styles. These are controlled by a SASS map variable (`$input-default`) in the config files.Copy this variable and modify to make multiple styles. Simply pass the new variable as a parameter on the mixin.] 9 | /// @param {Variable} $map-name [$input-default] Variable for the inputs style. 10 | /// @example scss - Basic Inputs 11 | /// @include inputs($map-variable); 12 | /// @author Hash&Salt 13 | /// @group Forms 14 | @mixin inputs($map-name: $input-skin) { 15 | input, 16 | select, 17 | textarea { 18 | display: inline-block; 19 | width: auto; 20 | } 21 | 22 | textarea { 23 | @include rem(margin, map-deep-get($map-name, 'margin')); 24 | @include rem(min-height, 150px); 25 | position: relative; 26 | overflow: auto; 27 | outline: none; 28 | line-height: map-deep-get($map-name, 'line-height'); 29 | box-sizing: border-box; 30 | resize: vertical; 31 | 32 | } 33 | 34 | [type='range'] { 35 | @include rem(margin, map-deep-get($map-name, 'margin')); 36 | @include rem(height, map-deep-get($map-name, 'height')); 37 | width: map-deep-get($map-name, width); 38 | } 39 | 40 | [type='checkbox'], 41 | [type='radio'] { 42 | margin: 0; 43 | padding: 0; 44 | vertical-align: middle; 45 | display: inline; 46 | height: auto; 47 | width: auto; 48 | @include rem(margin, map-deep-get($map-name, 'radios', 'check-radio-margin')); 49 | } 50 | 51 | 52 | @include inputs-all { 53 | @include rem(height, map-deep-get($map-name, 'height')); 54 | @include rem(margin, map-deep-get($map-name, 'margin')); 55 | @include rem(font-size, map-deep-get($map-name, 'font-size')); 56 | @include rem(padding, map-deep-get($map-name, 'padding')); 57 | width: map-deep-get($map-name, 'width'); 58 | font-family: map-deep-get($map-name, 'font'); 59 | box-sizing: border-box; 60 | @if map-deep-get($map-name, use-borders) == true { 61 | border-width: map-deep-get($map-name, 'borders', 'border-width'); 62 | border-style: map-deep-get($map-name, 'borders', 'border-style'); 63 | border-color: map-deep-get($map-name, 'borders', 'border-color'); 64 | } @else { 65 | border: 0; 66 | } 67 | background-color: map-deep-get($map-name, 'bg', 'bg-color'); 68 | @if lightness(map-deep-get($map-name, 'bg', 'bg-color')) < 60% { 69 | // if background is dark... 70 | color: map-deep-get($map-name, 'textlight'); 71 | } @else { 72 | // if background is light... 73 | color: map-deep-get($map-name, 'textdark'); 74 | } 75 | 76 | &:hover { 77 | background-color: map-deep-get($map-name, 'bg', 'bg-color-hover'); 78 | outline: none; 79 | @if map-deep-get($map-name, use-borders) == true { 80 | border-color: map-deep-get($map-name, 'borders', 'border-hover-color'); 81 | } @else { 82 | border: 0; 83 | } 84 | @if lightness(map-deep-get($map-name, 'bg', 'bg-color-hover')) < 60% { 85 | // if background is dark... 86 | color: map-deep-get($map-name, 'textlight'); 87 | } @else { 88 | // if background is light... 89 | color: map-deep-get($map-name, 'textdark'); 90 | } 91 | } 92 | 93 | 94 | &:focus { 95 | background-color: map-deep-get($map-name, 'bg', 'bg-color-focus'); 96 | outline: none; 97 | @if map-deep-get($map-name, use-borders) == true { 98 | border-color: map-deep-get($map-name, 'borders', 'border-focus-color'); 99 | } @else { 100 | border: 0; 101 | } 102 | @if lightness(map-deep-get($map-name, 'bg', 'bg-color-focus')) < 60% { 103 | // if background is dark... 104 | color: map-deep-get($map-name, 'textlight'); 105 | } @else { 106 | // if background is light... 107 | color: map-deep-get($map-name, 'textdark'); 108 | } 109 | } 110 | 111 | &:disabled { 112 | cursor: disabled; 113 | background-color: map-deep-get($map-name, 'bg', 'bg-color-disabled'); 114 | @if map-deep-get($map-name, use-borders) == true { 115 | border-color: map-deep-get($map-name, 'borders', 'border-disabled-color'); 116 | } @else { 117 | border: 0; 118 | } 119 | @if lightness(map-deep-get($map-name, 'bg', 'bg-color-disabled')) < 60% { 120 | // if background is dark... 121 | color: map-deep-get($map-name, 'textlight'); 122 | } @else { 123 | // if background is light... 124 | color: map-deep-get($map-name, 'textdark'); 125 | } 126 | } 127 | } 128 | 129 | [type='search'] { 130 | -webkit-appearance: none; 131 | } 132 | 133 | [type='color'] { 134 | @include rem(height, map-deep-get($map-name, height)); 135 | @include rem(margin, map-deep-get($map-name, margin)); 136 | @include rem(font-size, map-deep-get($map-name, font-size)); 137 | width: map-deep-get($map-name, width); 138 | box-sizing: border-box; 139 | display: block; 140 | background-color: transparent; 141 | outline: none; 142 | cursor: pointer; 143 | @if map-deep-get($map-name, use-borders) == true { 144 | border-width: map-deep-get($map-name, 'borders', 'border-width'); 145 | border-style: map-deep-get($map-name, 'borders', 'border-style'); 146 | border-color: map-deep-get($map-name, 'borders', 'border-color'); 147 | } @else { 148 | border: 0; 149 | } 150 | 151 | &:focus { 152 | @if map-deep-get($map-name, use-borders) == true { 153 | border-color: map-deep-get($map-name, 'borders', 'border-focus-color'); 154 | } @else { 155 | border: 0; 156 | } 157 | } 158 | 159 | &:disabled { 160 | @if map-deep-get($map-name, use-borders) == true { 161 | border-color: map-deep-get($map-name, 'borders', 'border-disabled-color'); 162 | } @else { 163 | border: 0; 164 | } 165 | } 166 | } 167 | } 168 | /// Setup select styles. These are controlled by a SASS map variable (`$select-default`) in the config files. 169 | /// Copy this variable and modify to make multiple styles. Simply pass the new variable as a parameter on 170 | /// the mixin. 171 | /// @param {Variable} $map-name [$select-default] [Skin to use for the select element] 172 | /// @example scss - Basic Select 173 | /// .form { 174 | /// @include select($map-variable); 175 | /// } 176 | /// @author Hash&Salt 177 | /// @group Forms 178 | @mixin select($map-name: $input-skin) { 179 | select { 180 | // Common 181 | @include rem(height, map-deep-get($map-name, 'height')); 182 | @include rem(width, map-deep-get($map-name, 'width')); 183 | @include rem(margin, map-deep-get($map-name, 'margin')); 184 | @include rem(font-size, map-deep-get($map-name, 'font-size')); 185 | @include rem(padding, map-deep-get($map-name, 'padding')); 186 | background-color: map-deep-get($map-name, 'bg', 'bg-color'); 187 | font-family: map-deep-get($map-name, 'font'); 188 | border-radius: map-deep-get($map-name, 'radius'); 189 | line-height: normal; 190 | border-radius: 0; 191 | -webkit-appearance: none; 192 | -moz-appearance: none; 193 | 194 | &::-ms-expand { 195 | display: none; 196 | } 197 | 198 | &[multiple] { 199 | height: auto; 200 | } 201 | // Triangle 202 | @if map-deep-get($map-name, 'bg', 'bg-color') != transparent { 203 | background-size: map-deep-get($map-name, 'selects', 'triangle-size'); 204 | background-position: map-deep-get($map-name, 'selects', 'triangle-position'); 205 | background-origin: content-box; 206 | background-repeat: no-repeat; 207 | @if lightness(map-deep-get($map-name, 'bg', 'bg-color')) < 60% { 208 | background-image: svg-url-with-replaced-fill(map-deep-get($map-name, 'selects', 'arrow'), '#000000', map-deep-get($map-name, 'selects', 'triangle-color-light')); 209 | } @else { 210 | background-image: svg-url-with-replaced-fill(map-deep-get($map-name, 'selects', 'arrow'), '#000000', map-deep-get($map-name, 'selects', 'triangle-color-dark')); 211 | } 212 | } 213 | @if map-deep-get($map-name, use-borders) == true { 214 | border-width: map-deep-get($map-name, 'borders', 'border-width'); 215 | border-style: map-deep-get($map-name, 'borders', 'border-style'); 216 | border-color: map-deep-get($map-name, 'borders', 'border-color'); 217 | } @else { 218 | border: 0; 219 | } 220 | @if lightness(map-deep-get($map-name, 'bg', 'bg-color')) < 60% { 221 | color: map-deep-get($map-name, 'textlight'); 222 | } @else { 223 | color: map-deep-get($map-name, 'textdark'); 224 | } 225 | 226 | &:hover { 227 | outline: 0; 228 | background-color: map-deep-get($map-name, 'bg', 'bg-color-hover'); 229 | @if map-deep-get($map-name, use-borders) == true { 230 | border-color: map-deep-get($map-name, 'borders', 'border-hover-color'); 231 | } @else { 232 | border: 0; 233 | } 234 | @if lightness(map-deep-get($map-name, 'bg', 'bg-color-hover')) < 60% { 235 | color: map-deep-get($map-name, 'textlight'); 236 | } @else { 237 | color: map-deep-get($map-name, 'textdark'); 238 | } 239 | } 240 | 241 | 242 | &:focus { 243 | outline: 0; 244 | background-color: map-deep-get($map-name, 'bg', 'bg-color-focus'); 245 | @if map-deep-get($map-name, use-borders) == true { 246 | border-color: map-deep-get($map-name, 'borders', 'border-focus-color'); 247 | } @else { 248 | border: 0; 249 | } 250 | @if lightness(map-deep-get($map-name, 'bg', 'bg-color-focus')) < 60% { 251 | color: map-deep-get($map-name, 'textlight'); 252 | } @else { 253 | color: map-deep-get($map-name, 'textdark'); 254 | } 255 | } 256 | 257 | &:disabled { 258 | background-color: map-deep-get($map-name, 'bg', 'bg-color-disabled'); 259 | @if map-deep-get($map-name, use-borders) == true { 260 | border-color: map-deep-get($map-name, 'borders', 'border-disabled-color'); 261 | } @else { 262 | border: 0; 263 | } 264 | @if lightness(map-deep-get($map-name, 'bg', 'bg-color-disabled')) < 60% { 265 | color: map-deep-get($map-name, 'textlight'); 266 | } @else { 267 | color: map-deep-get($map-name, 'textdark'); 268 | } 269 | } 270 | } 271 | } 272 | /// Append or prepend an icon / button / link to an input or select box. These are controlled by a SASS map variable (`$select-default`) in the config files. 273 | /// Copy this variable and modify to make multiple styles. Simply pass the new variable as a parameter on 274 | /// the mixin. 275 | /// @example scss - Basic Select 276 | /// .form { 277 | /// @include select($map-variable); 278 | /// } 279 | /// @example html - Addon HTML 280 | ///
    281 | /// 284 | ///
    285 | ///
    286 | /// @param {Variable} $map-name [$input-default] - SASS map variable for the select element style. 287 | /// @author Hash&Salt 288 | /// @group Forms 289 | @mixin addons ($map-name: $input-skin) { 290 | // Addon Wrapper 291 | .#{map-deep-get($map-name, 'addons', 'wrapper')} { 292 | @include rem(height, map-deep-get($map-name, 'height')); 293 | display: table; 294 | border-collapse: separate; 295 | width: 100%; 296 | } 297 | 298 | .#{map-deep-get($map-name, 'addons', 'icon')} { 299 | @include rem(height, map-deep-get($map-name, 'height')); 300 | @include rem(font-size, map-deep-get($map-name, 'font-size')); 301 | @include rem(padding, map-deep-get($map-name, 'padding')); 302 | display: table-cell; 303 | line-height: 1; 304 | width: auto; 305 | text-align: center; 306 | white-space: nowrap; 307 | vertical-align: top; 308 | font-weight: $semibold; 309 | background-color: map-deep-get($map-name, 'addons', 'addon-background-color'); 310 | @if lightness(map-deep-get($map-name, 'addons', 'addon-background-color')) < 60% { 311 | color: map-deep-get($map-name, 'textlight'); 312 | } @else { 313 | color: map-deep-get($map-name, 'textdark'); 314 | } 315 | @if map-deep-get($map-name, use-borders) == true { 316 | border-width: map-deep-get($map-name, 'borders', 'border-width'); 317 | border-style: map-deep-get($map-name, 'borders', 'border-style'); 318 | border-color: map-deep-get($map-name, 'borders', 'border-color'); 319 | } @else { 320 | border: 0; 321 | } 322 | } 323 | 324 | .#{map-deep-get($map-name, 'addons', 'button')} { 325 | display: table-cell; 326 | white-space: nowrap; 327 | vertical-align: top; 328 | width: map-deep-get($map-name, 'addons', 'button-width'); 329 | 330 | [type='reset'], 331 | [type='submit'], 332 | span, 333 | button { 334 | @include rem(height, map-deep-get($map-name, 'height')); 335 | @include rem(font-size, map-deep-get($map-name, 'font-size')); 336 | @include rem(padding, map-deep-get($map-name, 'padding')); 337 | background-color: map-deep-get($map-name, 'addons', 'addon-background-color'); 338 | // Text Color 339 | @if lightness(map-deep-get($map-name, 'addons', 'addon-background-color')) < 60% { 340 | color: map-deep-get($map-name, 'textlight'); 341 | } @else { 342 | color: map-deep-get($map-name, 'textdark'); 343 | } 344 | font-weight: map-deep-get($map-name, 'addons', 'font-weight'); 345 | font-family: map-deep-get($map-name, 'font'); 346 | @if map-deep-get($map-name, use-borders) == true { 347 | border-width: map-deep-get($map-name, 'borders', 'border-width'); 348 | border-style: map-deep-get($map-name, 'borders', 'border-style'); 349 | border-color: map-deep-get($map-name, 'borders', 'border-color'); 350 | } @else { 351 | border: 0; 352 | } 353 | line-height: 1; 354 | text-align: center; 355 | display: block; 356 | cursor: pointer; 357 | width: 100%; 358 | 359 | &:focus { 360 | background: map-deep-get($map-name, 'addons', 'addon-focus'); 361 | outline: none; 362 | // Text Color 363 | @if lightness(map-deep-get($map-name, 'addons', 'addon-focus')) < 60% { 364 | color: map-deep-get($map-name, 'textlight'); 365 | } @else { 366 | color: map-deep-get($map-name, 'textdark'); 367 | } 368 | } 369 | 370 | &:hover { 371 | background: map-deep-get($map-name, 'addons', 'addon-hover'); 372 | // Text Color 373 | @if lightness(map-deep-get($map-name, 'addons', 'addon-hover')) < 60% { 374 | color: map-deep-get($map-name, 'textlight'); 375 | } @else { 376 | color: map-deep-get($map-name, 'textdark'); 377 | } 378 | } 379 | 380 | &:active { 381 | background: map-deep-get($map-name, 'addons', 'addon-active'); 382 | // Text Color 383 | @if lightness(map-deep-get($map-name, 'addons', 'addon-active')) < 60% { 384 | color: map-deep-get($map-name, 'textlight'); 385 | } @else { 386 | color: map-deep-get($map-name, 'textdark'); 387 | } 388 | } 389 | 390 | &:disabled { 391 | background: map-deep-get($map-name, 'addons', 'addon-disabled'); 392 | @if map-deep-get($map-name, use-borders) == true { 393 | border-color: map-deep-get($map-name, 'borders', 'border-disabled-color'); 394 | } @else { 395 | border: 0; 396 | } 397 | @if lightness(map-deep-get($map-name, 'addons', 'addon-disabled')) < 60% { 398 | color: map-deep-get($map-name, 'textlight'); 399 | } @else { 400 | color: map-deep-get($map-name, 'textdark'); 401 | } 402 | } 403 | } 404 | 405 | div, 406 | span { 407 | @include rem(line-height, map-deep-get($map-name, line-height)); 408 | cursor: auto; 409 | display: block; 410 | } 411 | } 412 | // Inputs inside Addons 413 | select.#{map-deep-get($map-name, 'addons', 'field')} { 414 | margin: 0; 415 | display: table-cell; 416 | position: relative; 417 | z-index: 2; 418 | float: left; 419 | } 420 | 421 | @include inputs-all { 422 | &.#{map-deep-get($map-name, 'addons', 'field')} { 423 | margin: 0; 424 | display: table-cell; 425 | position: relative; 426 | z-index: 2; 427 | width: 100%; 428 | background-color: map-deep-get($map-name, 'bg', 'bg-color'); 429 | @if map-deep-get($map-name, use-borders) == true { 430 | border-width: map-deep-get($map-name, 'borders', 'border-width'); 431 | border-style: map-deep-get($map-name, 'borders', 'border-style'); 432 | border-color: map-deep-get($map-name, 'borders', 'border-color'); 433 | } @else { 434 | border: 0; 435 | } 436 | 437 | @if lightness(map-deep-get($map-name, 'bg', 'bg-color')) < 60% { 438 | color: map-deep-get($map-name, 'textlight'); 439 | } @else { 440 | color: map-deep-get($map-name, 'textdark'); 441 | } 442 | 443 | &:hover { 444 | @if map-deep-get($map-name, use-borders) == true { 445 | border-color: map-deep-get($map-name, 'borders', 'border-hover-color'); 446 | } @else { 447 | border: 0; 448 | } 449 | background-color: map-deep-get($map-name, 'bg', 'bg-color-hover'); 450 | @if lightness(map-deep-get($map-name, 'bg', 'bg-color-hover')) < 60% { 451 | color: map-deep-get($map-name, 'textlight'); 452 | } @else { 453 | color: map-deep-get($map-name, 'textdark'); 454 | } 455 | } 456 | 457 | &:focus { 458 | @if map-deep-get($map-name, use-borders) == true { 459 | border-color: map-deep-get($map-name, 'borders', 'border-focus-color'); 460 | } @else { 461 | border: 0; 462 | } 463 | background-color: map-deep-get($map-name, 'bg', 'bg-color-focus'); 464 | @if lightness(map-deep-get($map-name, 'bg', 'bg-color-focus')) < 60% { 465 | color: map-deep-get($map-name, 'textlight'); 466 | } @else { 467 | color: map-deep-get($map-name, 'textdark'); 468 | } 469 | } 470 | 471 | &:disabled { 472 | @if map-deep-get($map-name, use-borders) == true { 473 | border-color: map-deep-get($map-name, 'borders', 'border-disabled-color'); 474 | } @else { 475 | border: 0; 476 | } 477 | background-color: map-deep-get($map-name, 'bg', 'bg-color-disabled'); 478 | @if lightness(map-deep-get($map-name, 'bg', 'bg-color-disabled')) < 60% { 479 | color: map-deep-get($map-name, 'textlight'); 480 | } @else { 481 | color: map-deep-get($map-name, 'textdark'); 482 | } 483 | } 484 | } 485 | } 486 | // Kill Borders next to buttons 487 | @if map-deep-get($map-name, use-borders) == true { 488 | .#{map-deep-get($map-name, 'addons', 'both')}, 489 | .#{map-deep-get($map-name, 'addons', 'left')}, 490 | .#{map-deep-get($map-name, 'addons', 'right')} { 491 | .#{map-deep-get($map-name, 'addons', 'button')}:first-child { 492 | [type='reset'], 493 | [type='submit'], 494 | span, 495 | button, 496 | div { 497 | border-right: 0; 498 | } 499 | } 500 | 501 | .#{map-deep-get($map-name, 'addons', 'button')}:last-child { 502 | [type='reset'], 503 | [type='submit'], 504 | span, 505 | button, 506 | div { 507 | border-left: 0; 508 | } 509 | } 510 | 511 | .#{map-deep-get($map-name, 'addons', 'icon')}:first-child { 512 | border-right: 0; 513 | } 514 | 515 | .#{map-deep-get($map-name, 'addons', 'icon')}:last-child { 516 | border-left: 0; 517 | } 518 | } 519 | } 520 | } 521 | // Custom radios 522 | // ====================================================================== 523 | @mixin checkradio($map-name: $input-skin) { 524 | label { 525 | @include rem(padding-left, map-deep-get($map-name, 'radios', 'label-h-align')); 526 | @include rem(margin-bottom, map-deep-get($map-name, 'radios', 'spacing')); 527 | display: inline-block; 528 | cursor: pointer; 529 | position: relative; 530 | 531 | &::before { 532 | @include rem(width, map-deep-get($map-name, 'radios', 'width')); 533 | @include rem(height, map-deep-get($map-name, 'radios', 'height')); 534 | @include rem(bottom, map-deep-get($map-name, 'radios', 'input-v-align')); 535 | content: ''; 536 | color: map-deep-get($map-name, 'radios', 'selected-color'); 537 | display: inline-block; 538 | position: absolute; 539 | left: 0; 540 | background-color: map-deep-get($map-name, 'bg', 'bg-color'); 541 | @if map-deep-get($map-name, use-borders) == true { 542 | border-width: map-deep-get($map-name, 'borders', 'border-width'); 543 | border-style: map-deep-get($map-name, 'borders', 'border-style'); 544 | border-color: map-deep-get($map-name, 'borders', 'border-color'); 545 | } @else { 546 | border: 0; 547 | } 548 | } 549 | } 550 | 551 | [type='checkbox'], 552 | [type='radio'] { 553 | position: absolute; 554 | left: -99999px; 555 | 556 | + label { 557 | @include rem(margin-bottom, map-deep-get($map-name, 'radios', 'spacing')); 558 | margin-left: 0; 559 | } 560 | // checked 561 | &:checked { 562 | + label { 563 | &::before { 564 | content: ''; 565 | background-image: svg-url-with-replaced-fill(map-deep-get($map-name, 'radios', 'checkicon'), '#000000', map-deep-get($map-name, 'radios', 'selected-color')); 566 | background-size: map-deep-get($map-name, 'radios', 'checkicon-size'); 567 | background-repeat: no-repeat; 568 | background-position: center center; 569 | @if map-deep-get($map-name, use-borders) == true { 570 | 571 | border-color: map-deep-get($map-name, 'radios', 'border-checked-color'); 572 | } @else { 573 | border: 0; 574 | } 575 | } 576 | } 577 | } 578 | // focus 579 | &:focus { 580 | + label { 581 | &::before { 582 | @if map-deep-get($map-name, use-borders) == true { 583 | border-color: map-deep-get($map-name, 'radios', 'border-focus-color'); 584 | } @else { 585 | border: 0; 586 | } 587 | color: map-deep-get($map-name, 'radios', selected-color); 588 | background-color: map-deep-get($map-name, 'bg', 'bg-color-focus'); 589 | } 590 | } 591 | // focus + checked 592 | &:checked { 593 | + label { 594 | &::before { 595 | @if map-deep-get($map-name, use-borders) == true { 596 | border-color: map-deep-get($map-name, 'radios', 'border-checked-color'); 597 | } @else { 598 | border: 0; 599 | } 600 | color: map-deep-get($map-name, 'radios', selected-color); 601 | background-color: map-deep-get($map-name, 'bg', 'bg-color-focus'); 602 | } 603 | } 604 | } 605 | } 606 | // hover 607 | &:hover { 608 | + label { 609 | &::before { 610 | color: map-deep-get($map-name, 'radios', 'selected-color'); 611 | background-color: map-deep-get($map-name, 'bg', 'bg-color-hover'); 612 | @if map-deep-get($map-name, use-borders) == true { 613 | border-color: map-deep-get($map-name, 'radios', 'border-hover-color'); 614 | } @else { 615 | border: 0; 616 | } 617 | } 618 | } 619 | // hover + checked 620 | &:checked { 621 | + label { 622 | &::before { 623 | color: map-deep-get($map-name, 'radios', 'selected-color'); 624 | background-color: map-get($map-name, background-color-hover-checked); 625 | @if map-deep-get($map-name, use-borders) == true { 626 | border-color: map-deep-get($map-name, 'radios', 'border-hover-checked-color'); 627 | } @else { 628 | border: 0; 629 | } 630 | } 631 | } 632 | } 633 | } 634 | } 635 | 636 | [type='radio'] { 637 | + label { 638 | &::before { 639 | border-radius: map-deep-get($map-name, 'radios', 'radio-radius'); 640 | } 641 | } 642 | 643 | &:checked { 644 | + label { 645 | &::before { 646 | content: ''; 647 | background-image: svg-url-with-replaced-fill(map-deep-get($map-name, 'radios', 'radioicon'), '#000000', map-deep-get($map-name, 'radios', 'selected-color')); 648 | background-size: map-deep-get($map-name, 'radios', 'radioicon-size'); 649 | background-repeat: no-repeat; 650 | background-position: center center; 651 | } 652 | } 653 | } 654 | } 655 | } 656 | /// Style all inputs at once except select and textareas 657 | /// @author Hash&Salt 658 | /// @group Forms 659 | @mixin inputs-all { 660 | [type='date'], 661 | [type='datetime'], 662 | [type='datetime-local'], 663 | [type='email'], 664 | [type='month'], 665 | [type='number'], 666 | [type='password'], 667 | [type='search'], 668 | [type='tel'], 669 | [type='text'], 670 | [type='time'], 671 | [type='url'], 672 | [type='week'], 673 | textarea { 674 | @content; 675 | } 676 | } 677 | /// A quick way to add all of the form mixins (baseform, inputs, addons, select, validation) in one go based on settings in the `$form-skin-default` SASS map 678 | /// @param {Variable} $map-name [$form-skin-default] [Config variable to use for forms] 679 | /// @author Hash&Salt 680 | /// @group Forms 681 | @mixin form-complete($map-name: $form-skin) { 682 | @if map-deep-get($map-name, 'components', 'baseform') == true { 683 | @include form; 684 | } 685 | @if map-deep-get($map-name, 'components', 'inputs') == true { 686 | @include inputs(map-deep-get($map-name, 'skins', 'inputs')); 687 | } 688 | @if map-deep-get($map-name, 'components', 'select') == true { 689 | @include select(map-deep-get($map-name, 'skins', 'select')); 690 | } 691 | @if map-deep-get($map-name, 'components', 'addons') == true { 692 | @include addons(map-deep-get($map-name, 'skins', 'addons')); 693 | } 694 | @if map-deep-get($map-name, 'components', 'validation') == true { 695 | @include validation(map-deep-get($map-name, 'skins', 'validation')); 696 | } 697 | } 698 | --------------------------------------------------------------------------------