├── .gitignore ├── slate ├── config │ ├── _config-svg.scss │ ├── _config-accessibility.scss │ ├── _config-colors.scss │ ├── _config-grid.scss │ ├── _config-forms.scss │ ├── _config-ratios.scss │ ├── _config-validation.scss │ ├── _config-tables.scss │ ├── _config-layout.scss │ ├── _config-font-stacks.scss │ ├── _config-typography.scss │ ├── _config-forms-skin.scss │ └── _config-buttons.scss └── _slate-engine.scss ├── package.json ├── README.md └── .sass-lint.yml /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | yarn.lock 4 | -------------------------------------------------------------------------------- /slate/config/_config-svg.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // SVG Icons 3 | // ====================================================================== 4 | 5 | /// Default Icon Color. 6 | $svg-icon-orginal-color: '#000000'; 7 | /// Global Replacement Icon Color. 8 | $svg-icon-replace-color: $primary; 9 | -------------------------------------------------------------------------------- /slate/config/_config-accessibility.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Accessibility 3 | // ====================================================================== 4 | 5 | /// Accessibility border style to be used as a focus state on elements 6 | $a11y-outline: 2px solid $warning !default; 7 | 8 | /// Accessibility background color to be used as a focus state on elements 9 | $a11y-background: $warning; 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slateconfig", 3 | "version": "5.3.1", 4 | "description": "Config files for the Slate Framework", 5 | "author": "Hash&Salt", 6 | "email": "hello@hashandsalt.com", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/HashandSalt/slateconfig" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/HashandSalt/slateconfig/issues" 14 | }, 15 | "main": "slate/_slate-engine.scss", 16 | "devDependencies": { 17 | 18 | }, 19 | "dependencies": { 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /slate/_slate-engine.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Mission Control 3 | // ====================================================================== 4 | 5 | @import 'config/config-colors'; 6 | @import 'config/config-grid'; 7 | @import 'config/config-layout'; 8 | @import 'config/config-ratios'; 9 | @import 'config/config-font-stacks'; 10 | @import 'config/config-typography'; 11 | @import 'config/config-tables'; 12 | @import 'config/config-validation'; 13 | @import 'config/config-forms-skin'; 14 | @import 'config/config-forms'; 15 | @import 'config/config-buttons'; 16 | @import 'config/config-accessibility'; 17 | @import 'config/config-svg'; 18 | 19 | @import 'slate'; 20 | -------------------------------------------------------------------------------- /slate/config/_config-colors.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Colors 3 | // ====================================================================== 4 | 5 | /// Monochrome - Bright 6 | $bright: #eee; 7 | /// Monochrome - Medium 8 | $medium: #9f9f9f; 9 | /// Monochrome - Dark 10 | $dark: #202020; 11 | /// Monochrome - Black 12 | $black: #000; 13 | 14 | /// Palette - Primary 15 | $primary: #96def0; 16 | /// Palette - Secondary 17 | $secondary: #2980b9; 18 | /// Palette - Secondary 19 | $tertiary: #8e44ad; 20 | 21 | /// Feedback - Positive 22 | $positive: #2ecc71; 23 | /// Feedback - Negative 24 | $negative: #971318; 25 | /// Feedback - Warning 26 | $warning: #f39c12; 27 | // Feedback - Disabled 28 | $disabled: #adadad; 29 | 30 | /// Gradient - Start 31 | $gradient-start: $primary; 32 | /// Gradient - Middle 33 | $gradient-middle: darken($primary, 20%); 34 | /// Gradient - End 35 | $gradient-end: darken($primary, 40%); 36 | -------------------------------------------------------------------------------- /slate/config/_config-grid.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Grid 3 | // ====================================================================== 4 | 5 | /// Grid Total Columns 6 | $total-columns: 12; 7 | 8 | /// Grid Total Width 9 | $total-width: 100%; 10 | 11 | /// Grid Gutter Width 12 | $gutter-width: 2%; 13 | 14 | /// Grid Column Bottom Spacing 15 | $column-bottom-spacing: 24px; 16 | 17 | /// Grid Container margin 18 | $container-margin: 2%; 19 | 20 | /// Class to use for rows 21 | $class-container: 'row'; 22 | 23 | /// Class to use for columns 24 | $class-column: 'col'; 25 | 26 | /// Class to use for push 27 | $class-push: 'push'; 28 | 29 | /// Center Containers 30 | $center-containers: true; 31 | 32 | /// Center Containers Max Width 33 | $center-container-max-width: 1140px; 34 | 35 | /// Breakpoint - tiny 36 | $bp-tiny: 320px; 37 | 38 | /// Breakpoint - xsmall 39 | $bp-xsmall: 480px; 40 | 41 | /// Breakpoint - small 42 | $bp-small: 640px; 43 | 44 | /// Breakpoint - medium 45 | $bp-medium: 800px; 46 | 47 | /// Breakpoint - large 48 | $bp-large: 960px; 49 | 50 | /// Breakpoint - xl 51 | $bp-xl: 1140px; 52 | -------------------------------------------------------------------------------- /slate/config/_config-forms.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Form Complete Skin 3 | // ====================================================================== 4 | 5 | /// Custom Radio & Check Boxes 6 | /// --------------------------------------------------------------------- 7 | 8 | $form-skin-default: ( 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 24px, 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-default, 41 | addons: $addon-default, 42 | select: $select-default, 43 | validation: $validation-default, 44 | ), 45 | ); 46 | -------------------------------------------------------------------------------- /slate/config/_config-ratios.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Ratios 3 | // ====================================================================== 4 | 5 | /// Minor Second Ratio 6 | $minor-second: 1.067; 7 | 8 | /// Major Second Ratio 9 | $major-second: 1.125; 10 | 11 | /// Minor Third Ratio 12 | $minor-third: 1.2; 13 | 14 | /// Miajor Third Ratio 15 | $major-third: 1.25; 16 | 17 | /// Perfect Forth Ratio 18 | $perfect-fourth: 1.333; 19 | 20 | /// Augmented Forth Ratio 21 | $augmented-fourth: 1.414; 22 | 23 | /// Perfect Fith Ratio 24 | $perfect-fifth: 1.5; 25 | 26 | /// Minor Sixth Ratio 27 | $minor-sixth: 1.6; 28 | 29 | /// Golden Section Ratio 30 | $golden-section: 1.618; 31 | 32 | /// Major Sixth Ratio 33 | $major-sixth: 1.667; 34 | 35 | /// Minor Seventh Ratio 36 | $minor-seventh: 1.778; 37 | 38 | /// Major Seventh Ratio 39 | $major-seventh: 1.875; 40 | 41 | /// Octave Ratio 42 | $octave: 2; 43 | 44 | /// Major Tenth Ratio 45 | $major-tenth: 2.5; 46 | 47 | /// Major Eleventh Ratio 48 | $major-eleventh: 2.667; 49 | 50 | /// Major Twelth Ratio 51 | $major-twelfth: 3; 52 | 53 | /// Double Octave Ratio 54 | $double-octave: 4; 55 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Slate Config 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 a copy of the default config variables for reference or use in your own projects if you not using Slate Engine, which has them already set. They are intended to be used with [Slate Core](https://github.com/HashandSalt/slatecore), in your own asset pipeline. 4 | 5 | ### Quick Start 6 | 7 | Download the files and import `_slate-engine.scss` at the top of your sass file to override the default variables. _Slate Core_ was intended to be used along side [Normalize](https://necolas.github.io/normalize.css/), so please install that into your project too, and include it above `_slate-engine.scss` in your Sass file. 8 | 9 | ### Don't have an asset pipeline? 10 | 11 | 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). 12 | 13 | For full documentation, visit www.slateengine.com. 14 | 15 | _Slate_ was made with ♥ by [Hash&Salt](https://www.hashandsalt.com) 16 | -------------------------------------------------------------------------------- /slate/config/_config-validation.scss: -------------------------------------------------------------------------------- 1 | // Validation 2 | // ====================================================================== 3 | 4 | // Validation Class Names 5 | // ---------------------------------------------------------------------- 6 | 7 | // Class name to use to change color of invalid elements / labels 8 | $form-invalid-class: 'invalid'; 9 | 10 | // Class name to use to change color of valid elements / labels 11 | $form-valid-class: 'valid'; 12 | 13 | // Class name to use to change color of required elements / labels 14 | $form-required-class: 'required'; 15 | 16 | 17 | // Validation Theme 18 | // ---------------------------------------------------------------------- 19 | 20 | $validation-default: ( 21 | 22 | use-classes: true, 23 | 24 | color-required: $warning, 25 | color-valid: $positive, 26 | color-invalid: $negative, 27 | 28 | // You must put the valid/invalid/required classes 29 | // on labels for these to have an effect 30 | label-color-required: $warning, 31 | label-color-valid: $positive, 32 | label-color-invalid: $negative, 33 | 34 | border-required: 2px solid $warning, 35 | border-valid: 2px solid $positive, 36 | border-invalid: 2px solid $negative, 37 | 38 | focus-border-required: 2px solid darken($warning, 10%), 39 | focus-border-valid: 2px solid darken($positive, 10%), 40 | focus-border-invalid: 2px solid darken($negative, 10%), 41 | 42 | ); 43 | -------------------------------------------------------------------------------- /.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: 1 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: 1 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: 1 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: 1 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 | 7 | $default-table: ( 8 | fontfamily: $global-font-stack, 9 | layout: fixed, 10 | background: #fff, 11 | borderwidth: 1px 1px 1px 1px, 12 | bordercolor: #fff #fff #fff #fff, 13 | borderstyle: solid solid solid solid, 14 | margin: 24px 0 24px 0, 15 | bordercollapse: collapse, 16 | width: 100%, 17 | 18 | caption: ( 19 | background: #fff, 20 | padding: 24px 0, 21 | fontfamily: inherit, 22 | fontweight: $bold, 23 | fontcolor: $global-font-color, 24 | fontsize: 22px, 25 | textalign: center, 26 | borderwidth: 0 0 1px 0, 27 | bordercolor: $bright $bright $bright $bright, 28 | borderstyle: solid solid solid solid 29 | ), 30 | header: ( 31 | background: $bright, 32 | padding: 16px 0, 33 | fontfamily: inherit, 34 | fontweight: $global-font-weight, 35 | fontcolor: $global-font-color, 36 | fontsize: 16px, 37 | textalign: center, 38 | verticalalign: middle, 39 | borderwidth: 1px 1px 1px 1px, 40 | bordercolor: #fff #fff #fff #fff, 41 | borderstyle: solid solid solid solid 42 | ), 43 | body: ( 44 | background: $bright, 45 | oddbackground: $bright, 46 | evenbackground: #fff, 47 | padding: 8px 0, 48 | fontfamily: inherit, 49 | fontweight: $global-font-weight, 50 | fontcolor: $global-font-color, 51 | fontsize: 16px, 52 | textalign: center, 53 | verticalalign: middle, 54 | borderwidth: 1px 1px 1px 1px, 55 | bordercolor: #fff #fff #fff #fff, 56 | borderstyle: solid solid solid solid 57 | ), 58 | footer: ( 59 | background: $bright, 60 | padding: 8px 0, 61 | fontfamily: inherit, 62 | fontweight: $global-font-weight, 63 | fontcolor: $global-font-color, 64 | fontsize: 16px, 65 | textalign: center, 66 | borderwidth: 1px 1px 1px 1px, 67 | bordercolor: #fff #fff #fff #fff, 68 | borderstyle: solid solid solid solid 69 | ), 70 | ); 71 | -------------------------------------------------------------------------------- /slate/config/_config-layout.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Gridler Defaults 3 | // ====================================================================== 4 | 5 | /// Gridler Mixin - Class to use for the columns 6 | $gridler-element: $class-column; 7 | 8 | // Breakpoints 9 | 10 | /// Gridler Mixin - Small column breakpoint 11 | $gridler-sm: $bp-small; 12 | 13 | /// Gridler Mixin - Medium column breakpoint 14 | $gridler-me: $bp-medium; 15 | 16 | /// Gridler Mixin - Large column breakpoint 17 | $gridler-lg: $bp-large; 18 | 19 | // Columns 20 | 21 | /// Gridler Mixin - Small column count 22 | $gridler-sm-c: 6; 23 | 24 | /// Gridler Mixin - Medium column count 25 | $gridler-me-c: 4; 26 | 27 | /// Gridler Mixin - Large column count 28 | $gridler-lg-c: 3; 29 | 30 | /// Gridler Mixin - Spacing below each column 31 | $gridler-column-bottom-spacing: $column-bottom-spacing; 32 | 33 | // ====================================================================== 34 | // Holy Grail Defaults 35 | // ====================================================================== 36 | 37 | /// Holy Grail Left Sidebar Element Class 38 | $holygrail-left-element: 'left'; 39 | 40 | /// Holy Grail Middle Class 41 | $holygrail-middle-element: 'middle'; 42 | 43 | /// Holy Grail Right Sidebar Class 44 | $holygrail-right-element: 'right'; 45 | 46 | /// Holy Grail Left Sidebar Column Width 47 | $holygrail-left-column: 3; 48 | 49 | /// Holy Grail middle Sidebar Column Width 50 | $holygrail-middle-column: 5; 51 | 52 | /// Holy Grail right Sidebar Column Width 53 | $holygrail-right-column: 4; 54 | 55 | /// Holy Grail Breakpoint 56 | $holygrail-breakpoint: $bp-medium; 57 | 58 | /// Holy Grail Bottom Spacing 59 | $holygrail-column-bottom-spacing: $column-bottom-spacing; 60 | 61 | // ====================================================================== 62 | // Flank 63 | // ====================================================================== 64 | 65 | /// Flank Direction 66 | $flankdir: 'right'; 67 | 68 | /// Flank Main Class 69 | $flank-main-element: 'main'; 70 | 71 | /// Flank Flank Class 72 | $flank-flank-element: 'flank'; 73 | 74 | /// Flank Main Column Width 75 | $flank-main-column: 8; 76 | 77 | /// Flank Column Width 78 | $flank-flank-column: 4; 79 | 80 | /// Flank Breakpoint 81 | $flank-breakpoint: $bp-medium; 82 | 83 | /// Flank Bottom Spacing 84 | $flank-column-bottom-spacing: $column-bottom-spacing; 85 | -------------------------------------------------------------------------------- /slate/config/_config-font-stacks.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Font Stacks 3 | // ====================================================================== 4 | 5 | /// Simple Times Font Stack 6 | $times: Times, 'Times New Roman', serif !default; 7 | 8 | /// Simple Arial Font Stack 9 | $arial: Arial, sans-serif !default; 10 | 11 | /// Simple Georgia Font Stack 12 | $georgia: Georgia, serif !default; 13 | 14 | /// Simple Garamond Font Stack 15 | $garamond: 'Apple Garamond', 'ITC Garamond Narrow', 'Garamond', serif !default; 16 | 17 | /// Simple Helvetica Font Stack 18 | $helvetica: 'Helvetica Neue', Helvetica, sans-serif !default; 19 | 20 | /// Simple Verdana Font Stack 21 | $verdana: 'Verdana Ref', Verdana, sans-serif !default; 22 | 23 | /// Simple Trebuchet Font Stack 24 | $trebuchet: 'Trebuchet MS', sans-serif !default; 25 | 26 | /// Simple Gill Sans Font Stack 27 | $gillsans: 'Gill Sans MT', 'Gill Sans', Tahoma, Geneva, sans-serif !default; 28 | 29 | /// Full Times Font Stack 30 | $stimes: Cambria, 'Hoefler Text', Utopia, 'Liberation Serif', 'Nimbus Roman No9 L Regular', 'Times New Roman', Times, serif !default; 31 | 32 | /// Full Georgia Font Stack 33 | $sgeorgia: Constantia, 'Lucida Bright', Lucidabright, 'Lucida Serif', Lucida, 'DejaVu Serif', 'Bitstream Vera Serif', 'Liberation Serif', Georgia, serif !default; 34 | 35 | /// Full Garamond Font Stack 36 | $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; 37 | 38 | /// Full Helvetica Font Stack 39 | $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; 40 | 41 | /// Full Verdana Font Stack 42 | $sverdana: Corbel, 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Liberation Sans', 'Verdana Ref', Verdana, sans-serif !default; 43 | 44 | /// Full Trebuchet Font Stack 45 | $strebuchet: 'Segoe UI', Candara, 'Bitstream Vera Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Trebuchet MS', Trebuchet, sans-serif !default; 46 | 47 | /// Full Gill Sans Font Stack 48 | $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; 49 | 50 | /// Terminal / Monospace font 51 | $terminal: Monaco, 'Lucida Sans Typewriter', Consolas, 'Courier New', monospace !default; 52 | -------------------------------------------------------------------------------- /slate/config/_config-typography.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Typography Setup 3 | // ====================================================================== 4 | 5 | // Basic Setup 6 | // ====================================================================== 7 | 8 | /// Enable Type Debug 9 | $type-debug: true; 10 | 11 | // Basic Setup 12 | // ====================================================================== 13 | 14 | /// Set Global Font size 15 | $global-base-font-size: 16px; 16 | 17 | /// Set Global Line height 18 | $global-line-height: 1.5; 19 | 20 | /// Set Global REM Fallback 21 | $rem-fallback: true; 22 | 23 | /// Set Global PX units only 24 | $rem-px-only: false; 25 | 26 | /// Set Global line-heights with no units 27 | $unitless-lineheight: true; 28 | 29 | /// The ratio used to generate sizes and margins on heading tags 30 | $type-ratio: $perfect-fourth; 31 | 32 | /// Toggle percenatage based font scaling based on screen size. 33 | $responsive-text: false; 34 | 35 | /// Global Font Smoothing 36 | $webkit-smoothing: antialiased; 37 | 38 | // Modular Steps 39 | // ====================================================================== 40 | 41 | /// Modular Stepping Multipliers 42 | $modular-step-alpha: 5; 43 | $modular-step-beta: 4; 44 | $modular-step-gamma: 3; 45 | $modular-step-delta: 2; 46 | $modular-step-epsilon: 1; 47 | $modular-step-zeta: 0; 48 | $modular-step-eta: -1; 49 | $modular-step-theta: -2; 50 | $modular-step-iota: -3; 51 | 52 | // Weights 53 | // ====================================================================== 54 | 55 | /// Ultralight Font Weight 56 | $ultralight: 100; 57 | 58 | /// Thin Font Weight 59 | $thin: 200; 60 | 61 | /// Light Font Weight 62 | $light: 300; 63 | 64 | /// Regular Font Weight 65 | $regular: 400; 66 | 67 | /// Semibold Font Weight 68 | $semibold: 500; 69 | 70 | /// Bold Font Weight 71 | $bold: 600; 72 | 73 | /// Extra Bold Font Weight 74 | $extrabold: 700; 75 | 76 | /// Heavy Font Weight 77 | $heavy: 800; 78 | 79 | /// Ultra Heavry Font Weight 80 | $ultraheavy: 900; 81 | 82 | // Global font styles 83 | // ====================================================================== 84 | 85 | /// Global Font Stack 86 | $global-font-stack: $shelvetica; 87 | 88 | /// Global Font Weight 89 | $global-font-weight: $thin; 90 | 91 | /// Global Font Color 92 | $global-font-color: $dark; 93 | 94 | // Global heading font styles 95 | // ====================================================================== 96 | 97 | /// Heading Font Stack 98 | $global-heading-stack: $gillsans; 99 | 100 | /// Heading Font Color 101 | $global-heading-weight: $regular; 102 | 103 | /// Heading Font Weight 104 | $global-heading-color: $dark; 105 | 106 | /// Custom Font Path 107 | $custom-font-path: '/assets/fonts/'; 108 | 109 | // Links 110 | // ====================================================================== 111 | 112 | /// Link Color 113 | $link: $primary; 114 | 115 | /// Link Hover Color 116 | $link-hover: $primary; 117 | 118 | /// Link Hover Color 119 | $link-hover-decoration: none; 120 | 121 | // Horizontal Rules 122 | // ====================================================================== 123 | 124 | /// Horizontal Rule color and thickness 125 | $global-hr-style: 1px solid $primary; 126 | 127 | // ====================================================================== 128 | // Responsive type scaling (set $responsive-text true for this) 129 | // Numbers match $perfect-fourth. Recalculate them for other ratios. 130 | // ====================================================================== 131 | 132 | /// Base responsive font size for screens under $bp-tiny 133 | $rt-bp-base: 50%; // 8px 134 | 135 | /// Responsive font size for screens between $bp-tiny and $bp-xsmall 136 | $rt-bp-tiny: 62.5%; // 10px 137 | 138 | /// Responsive font size for screens between $bp-xsmall and $bp-small 139 | $rt-bp-xsmall: 75%; // 12px 140 | 141 | /// Responsive font size for screens between $bp-xmall and $bp-medium 142 | $rt-bp-small: 87.5%; // 14px 143 | 144 | /// Responsive font size for screens between $bp-medium and $bp-large 145 | $rt-bp-medium: 100%; // 16px 146 | 147 | /// Responsive font size for screens between $bp-large and $bp-xl 148 | $rt-bp-large: 125%; // 20px 149 | 150 | /// Responsive font size for screens between $bp-xl and above. 151 | $rt-bp-xl: 137.5%; // 22px 152 | -------------------------------------------------------------------------------- /slate/config/_config-forms-skin.scss: -------------------------------------------------------------------------------- 1 | // ====================================================================== 2 | // Form Skins 3 | // ====================================================================== 4 | 5 | /// Inputs 6 | /// ---------------------------------------------------------------------- 7 | 8 | /// Default Input Theme 9 | $input-default: ( 10 | 11 | use-borders: true, 12 | 13 | textlight: $bright, 14 | textdark: $dark, 15 | 16 | width: 100%, 17 | height: 54px, 18 | 19 | margin: 0 0 24px 0, 20 | padding: 12px, 21 | 22 | font: inherit, 23 | font-size: $global-base-font-size, 24 | line-height: $global-line-height, 25 | 26 | background-color: #fff, 27 | background-color-focus: #eee, 28 | background-color-disabled: $medium, 29 | 30 | border-left: 2px solid $medium, 31 | border-right: 2px solid $medium, 32 | border-top: 2px solid $medium, 33 | border-bottom: 2px solid $medium, 34 | 35 | border-focus-left: 2px solid $dark, 36 | border-focus-right: 2px solid $dark, 37 | border-focus-top: 2px solid $dark, 38 | border-focus-bottom: 2px solid $dark, 39 | 40 | border-disabled-left: 2px solid darken($disabled, 20%), 41 | border-disabled-right: 2px solid darken($disabled, 20%), 42 | border-disabled-top: 2px solid darken($disabled, 20%), 43 | border-disabled-bottom: 2px solid darken($disabled, 20%), 44 | 45 | check-radio-margin: 8px, 46 | 47 | ); 48 | 49 | 50 | /// Custom Select Elements 51 | /// ---------------------------------------------------------------------- 52 | 53 | /// Defualt Select Theme 54 | $select-default: ( 55 | 56 | use-borders: true, 57 | 58 | height: 54px, 59 | width: 100%, 60 | margin: 0 0 24px 0, 61 | padding: 12px, 62 | radius: 0, 63 | 64 | textlight: $bright, 65 | textdark: $dark, 66 | font: inherit, 67 | font-size: $global-base-font-size, 68 | 69 | border-left: 2px solid $medium, 70 | border-right: 2px solid $medium, 71 | border-top: 2px solid $medium, 72 | border-bottom: 2px solid $medium, 73 | 74 | border-focus-left: 2px solid $dark, 75 | border-focus-right: 2px solid $dark, 76 | border-focus-top: 2px solid $dark, 77 | border-focus-bottom: 2px solid $dark, 78 | 79 | border-disabled-left: 2px solid darken($disabled, 10%), 80 | border-disabled-right: 2px solid darken($disabled, 10%), 81 | border-disabled-top: 2px solid darken($disabled, 10%), 82 | border-disabled-bottom: 2px solid darken($disabled, 10%), 83 | 84 | arrow: '', 85 | triangle-color-dark: $dark, 86 | triangle-color-light: $medium, 87 | triangle-size: 11px 6px, 88 | triangle-position: 98% center, 89 | 90 | background-color: #fff, 91 | background-color-focus: #eee, 92 | background-color-disabled: $disabled, 93 | 94 | ); 95 | 96 | /// Select Addon 97 | $select-addon: ( 98 | 99 | use-borders: true, 100 | 101 | height: 54px, 102 | width: 100%, 103 | margin: 0 0 24px 0, 104 | padding: 12px, 105 | radius: 0, 106 | 107 | textlight: $bright, 108 | textdark: $dark, 109 | font: inherit, 110 | font-size: $global-base-font-size, 111 | 112 | border-left: 2px solid $medium, 113 | border-right: 2px solid $medium, 114 | border-top: 2px solid $medium, 115 | border-bottom: 2px solid $medium, 116 | 117 | border-focus-left: 2px solid $dark, 118 | border-focus-right: 2px solid $dark, 119 | border-focus-top: 2px solid $dark, 120 | border-focus-bottom: 2px solid $dark, 121 | 122 | border-disabled-left: 2px solid darken($disabled, 10%), 123 | border-disabled-right: 2px solid darken($disabled, 10%), 124 | border-disabled-top: 2px solid darken($disabled, 10%), 125 | border-disabled-bottom: 2px solid darken($disabled, 10%), 126 | 127 | triangle-color: $dark, 128 | triangle-size: 9px 6px, 129 | triangle-position: 98% center, 130 | 131 | background-color: $primary, 132 | background-color-focus: #eee, 133 | background-color-disabled: $disabled, 134 | 135 | ); 136 | 137 | 138 | /// Addons 139 | /// ---------------------------------------------------------------------- 140 | 141 | /// Defualt Addon Theme 142 | $addon-default: ( 143 | 144 | use-borders: true, 145 | 146 | textlight: $bright, 147 | textdark: $dark, 148 | 149 | font: inherit, 150 | font-size: 24px, 151 | font-weight: $semibold, 152 | line-height: 48px, 153 | 154 | padding: 0 0 0 0, 155 | spacing: 0 0 24px 0, 156 | height: 54px, 157 | 158 | border: 2px solid $medium, 159 | border-focus: 2px solid $dark, 160 | 161 | input-focus: $medium, 162 | input-focus-color: #fff, 163 | 164 | addon-background-color: $primary, 165 | addon-hover: darken($dark, 15%), 166 | addon-focus: darken($dark, 15%), 167 | addon-active: darken($dark, 15%), 168 | addon-disabled: #adadad, 169 | 170 | // Classes 171 | wrapper: 'form-addon', 172 | icon: 'addon-icon', 173 | button: 'addon-button', 174 | field: 'addon-field', 175 | left: 'addon-left', 176 | right: 'addon-right', 177 | both: 'addon-both', 178 | 179 | // Select Skin 180 | selectskin: $select-default, 181 | 182 | ); 183 | 184 | 185 | /// Custom Radio & Check Boxes 186 | /// ---------------------------------------------------------------------- 187 | 188 | $checkradio-default: ( 189 | 190 | use-borders: true, 191 | 192 | checkicon: '', 193 | checkicon-size: 15px 14px, 194 | radioicon: '', 195 | radioicon-size: 10px 10px, 196 | 197 | spacing: 36px, 198 | 199 | width: 36px, 200 | height: 36px, 201 | 202 | selected-color: $positive, 203 | 204 | border: 2px solid #9f9f9f, 205 | border-checked: 2px solid $positive, 206 | 207 | border-focus: 2px solid $positive, 208 | border-focus-checked: 2px solid $positive, 209 | 210 | border-hover: 2px solid $positive, 211 | border-hover-checked: 2px solid $positive, 212 | 213 | background-color: #fff, 214 | 215 | background-color-focus: #eee, 216 | background-color-focus-checked: #eee, 217 | 218 | background-color-hover: #eee, 219 | background-color-hover-checked: #eee, 220 | 221 | // Label Spacing 222 | label-h-align: 48px, 223 | 224 | // Input Vertical Position 225 | input-v-align: -5px, 226 | 227 | // Radio Radius 228 | radio-radius: 50%, 229 | 230 | ); 231 | -------------------------------------------------------------------------------- /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 $medium, 28 | border-right: 2px solid $medium, 29 | border-top: 2px solid $medium, 30 | border-bottom: 2px solid $medium, 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 | ); 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 | ); 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 | ); 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 | ); 217 | 218 | // Button Icons 219 | // ---------------------------------------------------------------------- 220 | 221 | // Button Icon Display 222 | $button-icons-display: inline-block; 223 | 224 | // Button Icon Left Spacing 225 | $button-icons-left-spacing: 0 8px 0 4px; 226 | 227 | // Button Icon Right Spacing 228 | $button-icons-right-spacing: 0 8px 0 4px; 229 | 230 | // Button Icon Weight 231 | $button-icons-weight: $semibold; 232 | 233 | // Button Math Icons 234 | $button-icons-math: false; 235 | 236 | // Button Solid Arrows Icons 237 | $button-icons-solid-arrows: false; 238 | 239 | // Button Dashed Arrows Icons 240 | $button-icons-dashed-arrows: false; 241 | 242 | // Button Dashed Chevrons 243 | $button-icons-chevrons: false; 244 | --------------------------------------------------------------------------------