+ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ + ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++Default +Primary +Success +Info +Warning +Danger +
+ ++ + + + + + +
+ ++ + + + + + +
+ ++ + + + + + +
+ + + + diff --git a/demos/demos.css b/demos/demos.css index 4f0c13a..6c50aa0 100644 --- a/demos/demos.css +++ b/demos/demos.css @@ -1,5 +1,5 @@ body { - max-width: 700px; + max-width: 900px; margin: 3em auto; padding: 0 1em; } diff --git a/scss/_utilities/_functions.scss b/scss/_utilities/_functions.scss new file mode 100644 index 0000000..1341886 --- /dev/null +++ b/scss/_utilities/_functions.scss @@ -0,0 +1,13 @@ +/* +* ========================================================================== +* Misc. Sass Functions to ease calculations +* ========================================================================== +*/ + +@function map-deep-get($map, $keys...) { + $value: $map; + @each $key in $keys { + $value: map-get($value, $key); + } + @return $value; +} diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss new file mode 100644 index 0000000..00a9bb2 --- /dev/null +++ b/scss/atoms/buttons/_buttons.scss @@ -0,0 +1,87 @@ +/* +* ========================================================================== +* Buttons +* ========================================================================== +*/ + +@import + "dist/chassis", + "mixins"; + +.btn-group { + position: relative; + display: inline-block; + vertical-align: middle; + + &--btn { + float: left; + @include btn(0); + } + + &--btn:first-child { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &--btn:last-child { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + + &--btn:not(:first-child):not(:last-child) { + border-radius: 0; + } +} + +.btn-block { + display: block; + width: 100%; +} + +.btn { + @include btn( map-get($ui-btn, margin)); +} + +/* Button Colors */ + +.btn-default { + @include btn-colors($ui-btn-default); +} + +.btn-primary { + @include btn-colors($ui-btn-primary); +} + +.btn-success { + @include btn-colors($ui-btn-success); +} + +.btn-info { + @include btn-colors($ui-btn-info); +} + +.btn-warning { + @include btn-colors($ui-btn-warning); +} + +.btn-danger { + @include btn-colors($ui-btn-danger ); +} + +/* Button Sizes */ + +.btn-lg { + @include btn-size($ui-btn-lg); +} + +.btn-md { + @include btn-size($ui-btn-md); +} + +.btn-sm { + @include btn-size($ui-btn-sm); +} + +.btn-xs { + @include btn-size($ui-btn-xs); +} diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss new file mode 100644 index 0000000..193f36c --- /dev/null +++ b/scss/atoms/buttons/_mixins.scss @@ -0,0 +1,87 @@ +@mixin btn($margin) { + border: 1px solid transparent; + cursor: pointer; + letter-spacing: map-get($ui-btn, letter-spacing); + font-family: $ui-btn-font; + font-weight: map-get($ui-btn, font-weight); + margin: $margin; + text-decoration: none; + text-transform: map-get($ui-btn, text-transform); +} + +@mixin btn-colors($btn-colors) { + color: map-get($btn-colors, color); + background: map-deep-get($btn-colors, "background", "base"); + border-color: map-get($btn-colors, border); + @if (map-get($btn-colors, shadow) == true) { + transition: map-get($ui-btn-shadows, transition); + box-shadow: map-get($ui-btn-shadows, box-shadow-base); + } + + &:active, + &.active { + @include btn-active($btn-colors); + @if (map-get($btn-colors, shadow) == true) { + box-shadow: map-get($ui-btn-shadows, box-shadow-active); + } + } + + &:focus, + &.focus { + @include btn-focus($btn-colors); + } + + &:hover, + &.hover { + @include btn-hover($btn-colors); + } + + &:disabled, + &.disabled { + @include btn-disabled($btn-colors); + @if (map-get($btn-colors, shadow) == true) { + box-shadow: map-get($ui-btn-shadows, box-shadow-disabled); + } + } +} + +@mixin btn-size($btn-size) { + border-radius: map-get($btn-size, border-radius); + font-size: map-get($btn-size, font-size); + line-height: map-get($btn-size, line-height); + padding: map-get($btn-size, padding); +} + +@mixin btn-active($btn-colors) { + color: map-get($btn-colors, color); + background: map-deep-get($btn-colors, "background", "dark"); + border-color: map-get($btn-colors, border); +} + +@mixin btn-focus($btn-colors) { + color: map-get($btn-colors, color); + background: map-deep-get($btn-colors, "background", "darker"); + border-color: map-get($btn-colors, border); +} + +@mixin btn-hover($btn-colors) { + color: map-get($btn-colors, color); + background: map-deep-get($btn-colors, "background", "light"); + border-color: map-get($btn-colors, border); +} + +@mixin btn-disabled($btn-colors) { + cursor: map-get($ui-btn-disabled, cursor); + color: rgba(map-get($btn-colors, color), map-get($ui-btn-disabled, "color-opacity")); + $bg: map-deep-get($btn-colors, "background", "base"); + @if ($bg == transparent) { + background: map-deep-get($btn-colors, "background", "base"); + } @else { + background: rgba($bg, map-get($ui-btn-disabled, "background-opacity")); + } + @if (map-get($btn-colors, border) == transparent) { + border-color: map-get($btn-colors, border); + } @else { + border-color: rgba(map-get($btn-colors, border), map-get($ui-btn-disabled, "background-opacity")); + } +} diff --git a/scss/lint.scss b/scss/lint.scss index a219908..ac0fa34 100644 --- a/scss/lint.scss +++ b/scss/lint.scss @@ -12,11 +12,13 @@ @import "_utilities/clearfix", "_utilities/colors", + "_utilities/functions", "_utilities/hidden"; @import "atoms/icons/icons", - "atoms/typography/typography"; + "atoms/typography/typography", + "atoms/buttons/buttons"; @import "views/main"; diff --git a/scss/style.scss b/scss/style.scss index 4b93524..81b166a 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -4,11 +4,13 @@ @import "_utilities/clearfix", + "_utilities/functions", "_utilities/hidden"; @import "atoms/icons/icons", - "atoms/typography/typography"; + "atoms/typography/typography", + "atoms/buttons/buttons"; @import "views/main"; diff --git a/scss/variables/colors.js b/scss/variables/colors.js index 5f7cb5d..b64c2ae 100644 --- a/scss/variables/colors.js +++ b/scss/variables/colors.js @@ -8,41 +8,73 @@ } }( this, function( chassis ) { -var colors = { - "chassis-gray-dark": { - "value": "#383838", - "name": "Chassis Gray - Dark" +chassis.colors = { + "default": { + name: "Default Colors", + value: { + "base": "#F5F5F5", + "light": "#FFFFFF", + "dark": "#EEEEEE", + "darker": "#E0E0E0" + } }, - "chassis-gray": { - "value": "#c1c1c1", - "name": "Chassis Gray" + "primary": { + name: "Primary Colors", + value: { + "base": "#3F51B5", + "light": "#5C6BC0", + "dark": "#3949AB", + "darker": "#303F9F" + } }, - "chassis-gray-light": { - "value": "#f2f2f2", - "name": "Chassis Gray - Light" + "success": { + name: "Success Colors", + value: { + "base": "#43A047", + "light": "#4CAF50", + "dark": "#388E3C", + "darker": "#2E7D32" + } }, - "chassis-blue-dark": { - "value": "#388695", - "name": "Chassis Blue - Dark" + "warning": { + name: "Warning Colors", + value: { + "base": "#FF5722", + "light": "#FF7043", + "dark": "#F4511E", + "darker": "#E64A19" + } }, - "chassis-blue": { - "value": "#4fc0c8", - "name": "Chassis Blue" + "info": { + name: "Info Colors", + value: { + "base": "#039BE5", + "light": "#03A9F4", + "dark": "#0288D1", + "darker": "#0277BD" + } }, - "chassis-yellow": { - "value": "#fadf51", - "name": "Chassis Yellow" - } -}; -chassis.colors = { - "background": colors[ "chassis-gray-dark" ], - "font": colors[ "chassis-gray-dark" ], - "link": colors[ "chassis-blue-dark" ], - "button": colors[ "chassis-blue" ], - "buttonText": colors[ "chassis-gray-light" ], - "blockquoteBorder": { - name: "Chassis - Blockquote color", - value: "#eee" + "error": { + name: "Error Colors", + value: { + "base": "#F44336", + "light": "#EF5350", + "dark": "#E53935", + "darker": "#D32F2F" + } + }, + "text": { + name: "Text Colors", + value: { + "base": "#212121", + "light": "#727272" + } + }, + "background": { + name: "Background Colors", + value: { + "base": "#fff" + } } }; return chassis; diff --git a/scss/variables/z_buttons.js b/scss/variables/z_buttons.js new file mode 100644 index 0000000..3c16375 --- /dev/null +++ b/scss/variables/z_buttons.js @@ -0,0 +1,137 @@ +( function( root, factory ) { + if ( typeof define === "function" && define.amd ) { + define( [ "./chassis" ], factory ); + } else if ( typeof exports === "object" ) { + module.exports = factory( require( "./chassis" ) ); + } else { + root.chassis = factory( root.chassis ); + } +}( this, function( chassis ) { + +chassis.uiButton = { + "ui-btn-shadows": { + name: "Button Shadow Styles", + value: { + "transition": "box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)", + "box-shadow-base": "0 2px 5px 0 rgba(0,0,0,.26)", + "box-shadow-active": "0 3px 10px 0 rgba(0,0,0,.2)", + "box-shadow-disabled": "0 0 0 rgba(0,0,0,0)" + } + }, + + "ui-btn": { + name: "Generic Button Styles", + value: { + "font-weight": 500, + "margin": ".25em", + "text-transform": "uppercase", + "letter-spacing": "1px" + } + }, + "ui-btn-font": { + name: "Button Font", + value: "$sans" + }, + "ui-btn-default": { + name: "Default Button", + value: { + "color": "#212121", + "background": "$default", + "border": "transparent", + "shadow": "true" + } + }, + "ui-btn-primary": { + name: "Primary Button", + value: { + "color": "#ffffff", + "background": "$primary", + "border": "transparent", + "shadow": "true" + } + }, + "ui-btn-success": { + name: "Success Button", + value: { + "color": "#ffffff", + "background": "$success", + "border": "transparent", + "shadow": "true" + } + }, + + "ui-btn-info": { + name: "Info Button", + value: { + "color": "#ffffff", + "background": "$info", + "border": "transparent", + "shadow": "true" + } + }, + "ui-btn-warning": { + name: "Warning Button", + value: { + "color": "#ffffff", + "background": "$warning", + "border": "transparent", + "shadow": "true" + } + }, + "ui-btn-danger": { + name: "Danger Button", + value: { + "color": "#ffffff", + "background": "$error", + "border": "transparent", + "shadow": "true" + } + }, + "ui-btn-disabled": { + name: "Disabled Button", + value: { + "color-opacity": 0.6, + "background-opacity": 0.3, + "cursor": "not-allowed" + } + }, + "ui-btn-lg": { + name: "Large Button", + value: { + "border-radius": "2px", + "font-size": "16px", + "line-height": "16px", + "padding": ".75em 1.25em" + } + }, + "ui-btn-md": { + name: "Medium Sized Button", + value: { + "border-radius": "2px", + "font-size": "14px", + "line-height": "14px", + "padding": ".5em 1em" + } + }, + "ui-btn-sm": { + name: "Small Button", + value: { + "border-radius": "2px", + "font-size": "12px", + "line-height": "12px", + "padding": ".45em .75em" + } + }, + "ui-btn-xs": { + name: "Extra Small Button", + value: { + "border-radius": "2px", + "font-size": "12px", + "line-height": "12px", + "padding": ".35em" + } + } +}; + +return chassis; +} ) );