From c5bd4f7ec88e4d51ef0cbc993a50b6f3f20c9ce4 Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Tue, 16 Jun 2015 12:04:44 -0400 Subject: [PATCH 01/19] Build: Modularize build and add jsass-vars Closes gh-89 --- .gitignore | 1 + Gruntfile.js | 205 +------------------------ package.json | 14 +- performance/frameworks/bootstrap.js | 2 +- scss/_utilities/_colors.scss | 5 - scss/atoms/typography/_functions.scss | 2 +- scss/atoms/typography/_typography.scss | 4 +- scss/atoms/typography/_variables.scss | 22 --- scss/style.scss | 19 ++- scss/variables/chassis.js | 13 ++ scss/variables/colors.js | 48 ++++++ scss/variables/index.js | 10 ++ scss/variables/template.js | 13 ++ scss/variables/typography.js | 59 +++++++ tasks/alias.js | 12 ++ tasks/options/autoprefixer.js | 17 ++ tasks/options/csscomb.js | 13 ++ tasks/options/csslint.js | 3 + tasks/options/cssmin.js | 11 ++ tasks/options/jscs.js | 3 + tasks/options/jshint.js | 6 + tasks/options/perfjankie.js | 4 +- tasks/options/sass.js | 13 ++ tasks/options/svgmin.js | 21 +++ tasks/options/svgstore.js | 19 +++ tasks/options/watch.js | 16 ++ tasks/variables.js | 12 ++ 27 files changed, 319 insertions(+), 248 deletions(-) delete mode 100644 scss/_utilities/_colors.scss delete mode 100644 scss/atoms/typography/_variables.scss create mode 100644 scss/variables/chassis.js create mode 100644 scss/variables/colors.js create mode 100644 scss/variables/index.js create mode 100644 scss/variables/template.js create mode 100644 scss/variables/typography.js create mode 100644 tasks/alias.js create mode 100644 tasks/options/autoprefixer.js create mode 100644 tasks/options/csscomb.js create mode 100644 tasks/options/csslint.js create mode 100644 tasks/options/cssmin.js create mode 100644 tasks/options/jscs.js create mode 100644 tasks/options/jshint.js create mode 100644 tasks/options/sass.js create mode 100644 tasks/options/svgmin.js create mode 100644 tasks/options/svgstore.js create mode 100644 tasks/options/watch.js create mode 100644 tasks/variables.js diff --git a/.gitignore b/.gitignore index cf2aa3e..651780f 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ style.css # Folders bower_components/ node_modules/ +external/ icons/svg-min/ .sass-cache/ dist/ diff --git a/Gruntfile.js b/Gruntfile.js index 69c3890..7601acb 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,199 +1,10 @@ module.exports = function( grunt ) { -require( "load-grunt-tasks" )( grunt ); - -var config = { - htmllint: { - dist: { - options: {}, - src: [ "demos/*.html" ] - } - }, - autoprefixer: { - dist: { - options: { - map: true, - browsers: [ - "> 1%", - "last 2 versions", - "safari >= 5.1", - "ios >= 6.1", - "android 2.3", - "android >= 4", - "ie >= 8" - ] - }, - src: "dist/css/*.css" - } - }, - csscomb: { - dist: { - files: { - "dist/css/chassis.css": "dist/css/chassis.css" - } - }, - scss: { - files: [ { - expand: true, - src: [ "scss/**/*.scss" ] - } ] - } - }, - cssmin: { - options: { - report: "gzip", - sourceMap: true - }, - target: { - files: { - "dist/css/chassis.min.css": "dist/css/chassis.css" - } - } - }, - csslint: { - src: [ "dist/css/chassis.lint.css", "dist/css/chassis.lint.css", "demos/demos.css" ] - }, - jscs: { - all: [ "*.js", "performance/**/*.js" ] - }, - jshint: { - files: [ "*.js", "performance/**/*.js" ], - options: { - jshintrc: ".jshintrc" - } - }, - npmcopy: { - options: { - destPrefix: "external" - }, - normalize: { - files: { - "normalize.css/LICENSE.md": "normalize.css/LICENSE.md", - "normalize.css/normalize.scss": "normalize.css/normalize.css" - } - } - }, - sass: { - - // This is the same as lint below except including normalize.css - dist: { - options: { - sourceMap: true, - - // This actually does nested until libsass updates to support expanded - outputStyle: "expanded" - }, - files: { - "dist/css/chassis.css": "scss/style.scss" - } - }, - - // This is everything except normalize.css which won't pass our lint settings - lint: { - options: { - sourceMap: true, - - // This actually does nested until libsass updates to support expanded - outputStyle: "expanded" - }, - files: { - "dist/css/chassis.lint.css": "scss/lint.scss" - } - } - }, - - // Minifies SVGs - svgmin: { - options: { - plugins: [ - { - removeViewBox: false - }, - { - removeUselessStrokeAndFill: false - } - ] - }, - dist: { - files: [ { - expand: true, - cwd: "icons/svg-source", - src: [ "*.svg" ], - dest: "icons/svg-min/", - ext: ".svg" - } ] - } - }, - - // Combines SVGs into single file - svgstore: { - defaults: { - options: { - - // This will prefix each ID - prefix: "icon-", - - // Adds attributes to the resulting SVG - svg: { - viewBox: "0 0 24 24", - xmlns: "http://www.w3.org/2000/svg" - }, - cleanup: [ "style", "fill", "id" ] - }, - files: { - "icons/icons.svg": [ "icons/svg-min/*.svg" ] - } - } - }, - watch: { - sass: { - files: [ "scss/**/*.scss" ], - tasks: [ "build" ], - options: { - spawn: false - } - }, - svg: { - files: [ "svg-source/**/*.svg" ], - tasks: [ "svg" ], - options: { - spawn: false - } - } - }, - "stop-selenium-server": { - dev: {} - } - }; - -// This loads files in the options folder as task options -// and builds an object based on their file names -function loadConfig(path) { - var glob = require( "glob" ), - object = {}, - key; - - glob.sync( "*", { cwd: path } ).forEach( function( option ) { - key = option.replace( /\.js$/, "" ); - object[ key ] = require( path + option ); - }); - - return object; -} - -// We no combine the loaded task options with the ones defined in config above -grunt.util._.extend( config, loadConfig( "./tasks/options/" ) ); - -grunt.initConfig( config ); -grunt.loadTasks( "tasks" ); -grunt.loadNpmTasks( "perfjankie" ); -grunt.registerTask( "default", [ "test" ] ); -grunt.registerTask( "test", [ "build", "jshint", "jscs", "csslint", "htmllint" ] ); -grunt.registerTask( "build", [ "svg", "sass", "csscomb", "cssmin" ] ); -grunt.registerTask( "perf", [ - "start-selenium-server", - "connect:perf", - "perfjankie", - "stop-selenium-server" -]); -grunt.registerTask( "svg", [ "svgmin", "svgstore" ] ); +var path = require( "path" ); +require( "load-grunt-config" )( grunt, { + configPath: [ + path.join( process.cwd(), "tasks/options" ), + path.join( process.cwd(), "tasks" ) + ], + init: true +} ); }; diff --git a/package.json b/package.json index f7f9534..92c6e47 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "css-chassis", "title": "Chassis", "description": "An attempt at creating open standards designed for CSS libraries, JavaScript UI libraries, and web developers in general", - "version": "0.0.1-pre", + "version": "0.0.1", "author": { "name": "jQuery Foundation and other contributors", "url": "https://github.com/jquery/css-chassis/blob/master/AUTHORS.txt" @@ -40,15 +40,12 @@ "start": "grunt watch", "test": "grunt" }, - "dependencies": { - "normalize.css": "3.0.3" - }, + "dependencies": {}, "devDependencies": { "browser-perf": "1.2.3", "chromedriver": "2.13.0", "commitplease": "2.0.0", "ejs-template": "0.1.0", - "glob": "4.4.2", "grunt": "0.4.5", "grunt-autoprefixer": "2.1.0", "grunt-contrib-cssmin": "0.10.0", @@ -59,14 +56,13 @@ "grunt-csscomb": "3.0.0", "grunt-git-authors": "2.0.0", "grunt-html": "1.6.0", - "grunt-htmllint": "0.2.7", "grunt-jscs": "0.6.2", - "grunt-npmcopy": "0.1.0", - "grunt-sass": "0.18.1", + "grunt-sass": "0.17.0", "grunt-selenium-server": "0.1.2", "grunt-svgmin": "2.0.0", "grunt-svgstore": "0.5.0", - "load-grunt-tasks": "3.1.0", + "jsass-vars": "0.0.3", + "load-grunt-config": "0.16.0", "perfjankie": "1.2.2" }, "keywords": [] diff --git a/performance/frameworks/bootstrap.js b/performance/frameworks/bootstrap.js index 47346e1..1221e56 100644 --- a/performance/frameworks/bootstrap.js +++ b/performance/frameworks/bootstrap.js @@ -27,7 +27,7 @@ module.exports = { ], icon: [ false, - "asterisk", + "astrisk", "plus", "minus", "euro", diff --git a/scss/_utilities/_colors.scss b/scss/_utilities/_colors.scss deleted file mode 100644 index 4aa7c07..0000000 --- a/scss/_utilities/_colors.scss +++ /dev/null @@ -1,5 +0,0 @@ -/* -* ========================================================================== -* Colors -* ========================================================================== -*/ diff --git a/scss/atoms/typography/_functions.scss b/scss/atoms/typography/_functions.scss index fc0945d..6ff16ab 100644 --- a/scss/atoms/typography/_functions.scss +++ b/scss/atoms/typography/_functions.scss @@ -11,6 +11,6 @@ * 1. font-size: em(14px); * 2. font-size: em(30px/14px); */ -@function em($value, $context: map-get($root-font, font-size)) { +@function em($value, $context: map-get($defaultFont, font-size)) { @return ($value / $context * 1em); } diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index d4b8ac4..5d97583 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -5,12 +5,12 @@ */ @import - "variables", + "dist/chassis", "functions", "mixins"; body { - font: $normal #{ map-get( $root-font, font-size ) }/1.5 $sans-serif; + font: $normal #{ map-get( $defaultFont, font-size ) }/1.5 $sans; @media ( max-width: 800px ) { font-size: 16px; diff --git a/scss/atoms/typography/_variables.scss b/scss/atoms/typography/_variables.scss deleted file mode 100644 index 096eae5..0000000 --- a/scss/atoms/typography/_variables.scss +++ /dev/null @@ -1,22 +0,0 @@ -/* -* ========================================================================== -* Typography variables -* ========================================================================== -*/ - -/* -* Change these values when using custom fonts -* For example, normal: 400; -*/ -$normal: normal; -$bold: bold; -$root-font: ( - color: #222, - font-size: 20px, - line-height: 1.5 -); - -/* Typefaces */ -$monospace: "courier new", monospace; -$serif: Georgia, "Times New Roman", Times, serif; -$sans-serif: "Source Sans Pro", Helvetica, Arial, sans-serif; diff --git a/scss/style.scss b/scss/style.scss index 92e4354..f297126 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -1,10 +1,13 @@ -/* -* ========================================================================== -* CSS Chassis -* ========================================================================== -* This just adds normalize to the build see lint.scss for explanation. -*/ +// ========================================================================== +// CSS Chassis +// ========================================================================== @import - "external/normalize.css/normalize.scss", - "lint.scss"; + "_utilities/clearfix"; + +@import + "atoms/icons/icons", + "atoms/typography/typography"; + +@import + "views/main"; diff --git a/scss/variables/chassis.js b/scss/variables/chassis.js new file mode 100644 index 0000000..99715df --- /dev/null +++ b/scss/variables/chassis.js @@ -0,0 +1,13 @@ +// This is just boiuler plate dont worry about it +// This just supports loading in any enviroment +(function ( root, factory ) { + if ( typeof define === "function" && define.amd ) { + define( [], factory ); + } else if ( typeof exports === "object" ) { + module.exports = factory(); + } else { + root.chassis = factory(); + } +}( this, function () { +return {}; +} ) ); \ No newline at end of file diff --git a/scss/variables/colors.js b/scss/variables/colors.js new file mode 100644 index 0000000..16a577e --- /dev/null +++ b/scss/variables/colors.js @@ -0,0 +1,48 @@ +( 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 ) { +var colors = { + "chassis-gray-dark": { + "value": "#383838", + "name": "Chassis Gray - Dark" + }, + "chassis-gray": { + "value": "#c1c1c1", + "name": "Chassis Gray" + }, + "chassis-gray-light": { + "value": "#f2f2f2", + "name": "Chassis Gray - Light" + }, + "chassis-blue-dark": { + "value": "#388695", + "name": "Chassis Blue - Dark" + }, + "chassis-blue": { + "value": "#4fc0c8", + "name": "Chassis Blue" + }, + "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" + } +} +return chassis; +} ) ); diff --git a/scss/variables/index.js b/scss/variables/index.js new file mode 100644 index 0000000..840d981 --- /dev/null +++ b/scss/variables/index.js @@ -0,0 +1,10 @@ +var fs = require( "fs" ); +var path = require( "path" ); +var varPath = path.join( process.cwd(), "scss/variables" ); +var chassis; + +fs.readdirSync( varPath ).forEach( function( file ) { + chassis = require( path.join( process.cwd(), "scss/variables" ) + "/" + file ); +} ); + +module.exports = chassis; \ No newline at end of file diff --git a/scss/variables/template.js b/scss/variables/template.js new file mode 100644 index 0000000..1bc9c9a --- /dev/null +++ b/scss/variables/template.js @@ -0,0 +1,13 @@ +// This is just boiuler plate dont worry about it +// This just supports loading in any enviroment +(function ( root, factory ) { + if ( typeof define === "function" && define.amd ) { + define( [], factory ); + } else if ( typeof exports === "object" ) { + module.exports = factory(); + } else { + root.chassis = factory(); + } +}( this, function () { +//>> return chasses.moduleName; +} ) ); diff --git a/scss/variables/typography.js b/scss/variables/typography.js new file mode 100644 index 0000000..3b55a80 --- /dev/null +++ b/scss/variables/typography.js @@ -0,0 +1,59 @@ +( 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 ) { + +var color = "#222"; +var fontSize = "20px"; +var lineHeight = 1.5; + +chassis.typography = { + normal: { + name: "Font weight - Normal", + value: "normal" + }, + bold: { + name: "Font weight - Bold", + value: "bold" + }, + color: { + name: "Font color", + value: color + }, + fontSize: { + name: "Font size", + value: fontSize + }, + lineHeight: { + name: "Line Height", + value: lineHeight + }, + defaultFont: { + name: "Type Style - Default", + value: { + color: color, + "font-size": fontSize, + "line-height": lineHeight + } + }, + monospace: { + name: "Font Family - Monospace", + value :"\"courier new\", monospace" + }, + serif: { + name: "Font Family - Serif", + value :"Georgia, \"Times New Roman\", Times, serif" + }, + sans: { + name: "Font Family - Sans", + value :"Helvetica, Arial, sans-serif" + } +}; + +return chassis; +} ) ); diff --git a/tasks/alias.js b/tasks/alias.js new file mode 100644 index 0000000..0b1fe20 --- /dev/null +++ b/tasks/alias.js @@ -0,0 +1,12 @@ +module.exports = function( grunt ) { +grunt.registerTask( "default", [ "test" ] ); +grunt.registerTask( "test", [ "build", "jshint", "jscs", "csslint" ] ); +grunt.registerTask( "build", [ "svg", "sass", "csscomb", "cssmin" ] ); +grunt.registerTask( "perf", [ + "start-selenium-server", + "connect:perf", + "perfjankie", + "stop-selenium-server" +]); +grunt.registerTask( "svg", [ "svgmin", "svgstore" ] ); +}; diff --git a/tasks/options/autoprefixer.js b/tasks/options/autoprefixer.js new file mode 100644 index 0000000..05bc225 --- /dev/null +++ b/tasks/options/autoprefixer.js @@ -0,0 +1,17 @@ +module.exports = { + dist: { + options: { + map: true, + browsers: [ + "> 1%", + "last 2 versions", + "safari >= 5.1", + "ios >= 6.1", + "android 2.3", + "android >= 4", + "ie >= 8" + ] + }, + src: "dist/css/*.css" + } +}; diff --git a/tasks/options/csscomb.js b/tasks/options/csscomb.js new file mode 100644 index 0000000..2cc157c --- /dev/null +++ b/tasks/options/csscomb.js @@ -0,0 +1,13 @@ +module.exports = { + dist: { + files: { + "dist/css/chassis.css": "dist/css/chassis.css" + } + }, + scss: { + files: [ { + expand: true, + src: [ "scss/**/*.scss" ] + } ] + } +}; diff --git a/tasks/options/csslint.js b/tasks/options/csslint.js new file mode 100644 index 0000000..3e6c0d6 --- /dev/null +++ b/tasks/options/csslint.js @@ -0,0 +1,3 @@ +module.exports = { + src: [ "dist/css/*.css" ] +}; \ No newline at end of file diff --git a/tasks/options/cssmin.js b/tasks/options/cssmin.js new file mode 100644 index 0000000..7b57725 --- /dev/null +++ b/tasks/options/cssmin.js @@ -0,0 +1,11 @@ +module.exports = { + options: { + report: "gzip", + sourceMap: true + }, + target: { + files: { + "dist/css/chassis.min.css": "dist/css/chassis.css" + } + } +}; diff --git a/tasks/options/jscs.js b/tasks/options/jscs.js new file mode 100644 index 0000000..bea072d --- /dev/null +++ b/tasks/options/jscs.js @@ -0,0 +1,3 @@ +module.exports = { + all: [ "*.js", "performance/**/*.js" ] +}; \ No newline at end of file diff --git a/tasks/options/jshint.js b/tasks/options/jshint.js new file mode 100644 index 0000000..226c39e --- /dev/null +++ b/tasks/options/jshint.js @@ -0,0 +1,6 @@ +module.exports = { + files: [ "*.js", "performance/**/*.js" ], + options: { + jshintrc: ".jshintrc" + } +}; \ No newline at end of file diff --git a/tasks/options/perfjankie.js b/tasks/options/perfjankie.js index 29c9955..6f44de5 100644 --- a/tasks/options/perfjankie.js +++ b/tasks/options/perfjankie.js @@ -36,9 +36,7 @@ module.exports = { "http://localhost:4200/framework/semantic-ui/component/button/count/1000/" + "semantic-ui:button", "http://localhost:4200/framework/dojo/component/button/count/1000/" + - "dojo:button", - "http://localhost:4200/framework/kendo-ui/component/button/count/1000/" + - "kendo-ui:button" + "dojo:button" ] } } diff --git a/tasks/options/sass.js b/tasks/options/sass.js new file mode 100644 index 0000000..b100fe4 --- /dev/null +++ b/tasks/options/sass.js @@ -0,0 +1,13 @@ +module.exports = { + dist: { + options: { + sourceMap: true, + + // This actually does nested until libsass updates to support expanded + outputStyle: "expanded" + }, + files: { + "dist/css/chassis.css": "scss/style.scss" + } + } +}; \ No newline at end of file diff --git a/tasks/options/svgmin.js b/tasks/options/svgmin.js new file mode 100644 index 0000000..9819e5b --- /dev/null +++ b/tasks/options/svgmin.js @@ -0,0 +1,21 @@ +module.exports = { + options: { + plugins: [ + { + removeViewBox: false + }, + { + removeUselessStrokeAndFill: false + } + ] + }, + dist: { + files: [ { + expand: true, + cwd: "icons/svg-source", + src: [ "*.svg" ], + dest: "icons/svg-min/", + ext: ".svg" + } ] + } +}; diff --git a/tasks/options/svgstore.js b/tasks/options/svgstore.js new file mode 100644 index 0000000..f6422d2 --- /dev/null +++ b/tasks/options/svgstore.js @@ -0,0 +1,19 @@ +module.exports = { + defaults: { + options: { + + // This will prefix each ID + prefix: "icon-", + + // Adds attributes to the resulting SVG + svg: { + viewBox: "0 0 24 24", + xmlns: "http://www.w3.org/2000/svg" + }, + cleanup: [ "style", "fill", "id" ] + }, + files: { + "icons/icons.svg": [ "icons/svg-min/*.svg" ] + } + } +} \ No newline at end of file diff --git a/tasks/options/watch.js b/tasks/options/watch.js new file mode 100644 index 0000000..21eb0b0 --- /dev/null +++ b/tasks/options/watch.js @@ -0,0 +1,16 @@ +module.exports = { + sass: { + files: [ "scss/**/*.scss" ], + tasks: [ "build" ], + options: { + spawn: false + } + }, + svg: { + files: [ "svg-source/**/*.svg" ], + tasks: [ "svg" ], + options: { + spawn: false + } + } +} \ No newline at end of file diff --git a/tasks/variables.js b/tasks/variables.js new file mode 100644 index 0000000..5ba72e8 --- /dev/null +++ b/tasks/variables.js @@ -0,0 +1,12 @@ +module.exports = function( grunt ) { + grunt.registerTask( "buildVariables", function() { + var jsass = require( "jsass-vars" ); + var path = require( "path" ); + var varPath = path.join( process.cwd(), "scss/variables/*" ); + + jsass( varPath, { + "dest": path.join( process.cwd(), "dist" ), + "name": "chassis" + } ); + } ) +}; \ No newline at end of file From 6a9565edffc88a59b3a537061c5ebe306e9ae22c Mon Sep 17 00:00:00 2001 From: Satya Sudheer Date: Wed, 22 Jul 2015 15:27:05 +0530 Subject: [PATCH 02/19] package.json: update licenses tag to license Fixes gh-101 --- package.json | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/package.json b/package.json index 92c6e47..1a089eb 100644 --- a/package.json +++ b/package.json @@ -29,12 +29,7 @@ "url": "git://github.com/jquery/css-chassis.git" }, "bugs": "http://github.com/jquery/css-chassis/issues/", - "licenses": [ - { - "type": "MIT", - "url": "https://github.com/jquery/css-chassis/blob/master/LICENSE.txt" - } - ], + "license": "MIT", "scripts": { "build": "npm install && grunt build", "start": "grunt watch", From 509a5dc86183bec9e58d651e0022c51795ec9d3a Mon Sep 17 00:00:00 2001 From: Alexander Schmitz Date: Wed, 22 Jul 2015 07:13:57 -0400 Subject: [PATCH 03/19] Build: Run variables as part of build and create dist directory Fixes gh-107 Closes gh-104 --- tasks/alias.js | 2 +- tasks/options/perfjankie.js | 8 ++++++-- tasks/variables.js | 9 +++++---- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/tasks/alias.js b/tasks/alias.js index 0b1fe20..30a04c6 100644 --- a/tasks/alias.js +++ b/tasks/alias.js @@ -1,7 +1,7 @@ module.exports = function( grunt ) { grunt.registerTask( "default", [ "test" ] ); grunt.registerTask( "test", [ "build", "jshint", "jscs", "csslint" ] ); -grunt.registerTask( "build", [ "svg", "sass", "csscomb", "cssmin" ] ); +grunt.registerTask( "build", [ "variables", "svg", "sass", "csscomb", "cssmin" ] ); grunt.registerTask( "perf", [ "start-selenium-server", "connect:perf", diff --git a/tasks/options/perfjankie.js b/tasks/options/perfjankie.js index 6f44de5..e09bd08 100644 --- a/tasks/options/perfjankie.js +++ b/tasks/options/perfjankie.js @@ -1,4 +1,7 @@ -module.exports = { +module.exports = function( grunt ) { +grunt.loadNpmTasks( "perfjankie" ); + +return { options: { suite: "perfSlides - Performance Analysis" }, @@ -40,4 +43,5 @@ module.exports = { ] } } -} +}; +}; diff --git a/tasks/variables.js b/tasks/variables.js index 5ba72e8..36847ba 100644 --- a/tasks/variables.js +++ b/tasks/variables.js @@ -1,12 +1,13 @@ module.exports = function( grunt ) { - grunt.registerTask( "buildVariables", function() { + grunt.registerTask( "variables", function() { var jsass = require( "jsass-vars" ); var path = require( "path" ); var varPath = path.join( process.cwd(), "scss/variables/*" ); - + var distPath = path.join( process.cwd(), "dist" ); + grunt.file.mkdir( distPath ); jsass( varPath, { - "dest": path.join( process.cwd(), "dist" ), + "dest": distPath, "name": "chassis" } ); } ) -}; \ No newline at end of file +}; From 449546253224388f630afbd5f4f95ff9ddfc656a Mon Sep 17 00:00:00 2001 From: Arthur Verschaeve Date: Tue, 28 Jul 2015 19:16:45 +0200 Subject: [PATCH 04/19] Build: delete moot `.DS_Store` file Closes gh-108 --- tasks/.DS_Store | Bin 6148 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 tasks/.DS_Store diff --git a/tasks/.DS_Store b/tasks/.DS_Store deleted file mode 100644 index a89d1de049bd22a12bb4260be3f7dba6096f6d21..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHKOKQU~5S>X44P@hGmbyZ2AVPYAULdrlP$+T1&EBh=t4Hgb&!WcZ&RL|qfzgvj z^Ca{Z9*>CV{@m?ES`k^p4dr6P+-%=`W~+=S5RNl?Imz(W4X-c#Ec<%ExR2m{%9p(V z=Jy}AMWX^#fC^9nDnJDmRv-)Pdb9AkJdO%bf%{j$z7GX%SQE!U|8!vR768~F?1s7b z62M{sU`-qY5rJt?fkD-5F*N9im&~h)V_?ulv-!}xS+he?za8fnPZzC$9H{^mm@4oP z%hu}u6a0_ Date: Fri, 17 Jul 2015 00:16:28 -0400 Subject: [PATCH 05/19] Buttons: Initial pass at buttons, covering sizes, options, and states Fixes gh-96 --- demos/buttons.html | 104 ++++++++++++++++++++++ scss/atoms/buttons/_buttons.scss | 145 +++++++++++++++++++++++++++++++ scss/atoms/buttons/_extends.scss | 115 ++++++++++++++++++++++++ scss/lint.scss | 3 +- 4 files changed, 366 insertions(+), 1 deletion(-) create mode 100644 demos/buttons.html create mode 100644 scss/atoms/buttons/_buttons.scss create mode 100644 scss/atoms/buttons/_extends.scss diff --git a/demos/buttons.html b/demos/buttons.html new file mode 100644 index 0000000..2a32c0c --- /dev/null +++ b/demos/buttons.html @@ -0,0 +1,104 @@ + + + + + CSS Chassis - Buttons + + + + + + + + +

CSS Chassis

+ +

Button tag

+ +

Use the button classes on an <a>, <button>, or <input> element. + + +

+ +

Options

+ + + +

Sizes

+ + + + +

Disabled State

+ +

Button Element

+ +

Add the disabled attribute to <button> buttons.

+ + + +

Anchor Element

Add --disabled to the end of the button class.

+ + + + diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss new file mode 100644 index 0000000..af22b47 --- /dev/null +++ b/scss/atoms/buttons/_buttons.scss @@ -0,0 +1,145 @@ +/* +* ========================================================================== +* Buttons +* ========================================================================== +*/ + +@import "extends"; + +.ui-button { + &--default { + @extend %ui-button; + @extend %ui-button--default; + @extend %ui-button--default--hover; + @extend %ui-button--default--focus; + @extend %ui-button--default--active; + @extend %ui-button--default--disabled; + @extend %ui-button--default-size; + + &--disabled { + @extend %ui-button; + @extend %ui-button--default; + @extend %ui-button--disabled; + @extend %ui-button--default-size; + } + + &--large { + @extend %ui-button; + @extend %ui-button--default; + @extend %ui-button--default--hover; + @extend %ui-button--default--focus; + @extend %ui-button--default--active; + @extend %ui-button--default--disabled; + @extend %ui-button--large; + + &--disabled { + @extend %ui-button; + @extend %ui-button--default; + @extend %ui-button--disabled; + @extend %ui-button--large; + } + } + + &--small { + @extend %ui-button; + @extend %ui-button--default; + @extend %ui-button--default--hover; + @extend %ui-button--default--focus; + @extend %ui-button--default--active; + @extend %ui-button--default--disabled; + @extend %ui-button--small; + + &--disabled { + @extend %ui-button; + @extend %ui-button--default; + @extend %ui-button--disabled; + @extend %ui-button--small; + } + } + + &--extra-small { + @extend %ui-button; + @extend %ui-button--default; + @extend %ui-button--default--hover; + @extend %ui-button--default--focus; + @extend %ui-button--default--active; + @extend %ui-button--default--disabled; + @extend %ui-button--extra-small; + + &--disabled { + @extend %ui-button; + @extend %ui-button--default; + @extend %ui-button--disabled; + @extend %ui-button--extra-small; + } + } + } + + &--primary { + @extend %ui-button; + @extend %ui-button--primary; + @extend %ui-button--primary--hover; + @extend %ui-button--primary--focus; + @extend %ui-button--primary--active; + @extend %ui-button--primary--disabled; + @extend %ui-button--default-size; + + &--disabled { + @extend %ui-button; + @extend %ui-button--primary; + @extend %ui-button--disabled; + @extend %ui-button--default-size; + } + + &--large { + @extend %ui-button; + @extend %ui-button--primary; + @extend %ui-button--primary--hover; + @extend %ui-button--primary--focus; + @extend %ui-button--primary--active; + @extend %ui-button--primary--disabled; + @extend %ui-button--large; + + &--disabled { + @extend %ui-button; + @extend %ui-button--primary; + @extend %ui-button--disabled; + @extend %ui-button--large; + } + } + + &--small { + @extend %ui-button; + @extend %ui-button--primary; + @extend %ui-button--primary--hover; + @extend %ui-button--primary--focus; + @extend %ui-button--primary--active; + @extend %ui-button--primary--disabled; + @extend %ui-button--small; + + &--disabled { + @extend %ui-button; + @extend %ui-button--primary; + @extend %ui-button--disabled; + @extend %ui-button--small; + } + } + + &--extra-small { + @extend %ui-button; + @extend %ui-button--primary; + @extend %ui-button--primary--hover; + @extend %ui-button--primary--focus; + @extend %ui-button--primary--active; + @extend %ui-button--primary--disabled; + @extend %ui-button--extra-small; + + &--disabled { + @extend %ui-button; + @extend %ui-button--primary; + @extend %ui-button--disabled; + @extend %ui-button--extra-small; + } + } + } +} diff --git a/scss/atoms/buttons/_extends.scss b/scss/atoms/buttons/_extends.scss new file mode 100644 index 0000000..65c886f --- /dev/null +++ b/scss/atoms/buttons/_extends.scss @@ -0,0 +1,115 @@ +/* +* ========================================================================== +* Buttons (Extends) +* ========================================================================== +*/ + +/* These colors won't remain here, will be removed with jsass */ +$background: #fff; +$chassis-blue: #4fc0c8; +$chassis-gray-light: #f2f2f2; +$chassis-gray-dark: #383838; + +%ui-button { + border: 0; + box-sizing: border-box; + display: inline-block; + font-weight: 500; + margin: .25em; + text-align: center; + text-decoration: none; + text-transform: uppercase; +} + +%ui-button--large { + font-size: 20px; + line-height: 20px; + padding: .75em; +} + +%ui-button--default-size { + font-size: 16px; + line-height: 16px; + padding: .5em; +} + +%ui-button--small { + font-size: 14px; + line-height: 14px; + padding: .2em .5em; + height: 20px; +} + +%ui-button--extra-small { + font-size: 12px; + line-height: 12px; + padding: .2em .5em; +} + +%ui-button--default { + background: $background; + color: $chassis-gray-dark; +} + +%ui-button--default--active { + &:active, + &:active:focus { + background: darken($background, 20%); + } +} + +%ui-button--default--focus { + &:focus { + background: darken($background, 15%); + } +} + +%ui-button--default--hover { + &:hover { + background: darken($background, 10%); + } +} + +%ui-button--default--disabled { + &:disabled { + opacity: .6; + background: $background; + } +} + + +%ui-button--primary { + background: $chassis-blue; + color: $chassis-gray-light; +} + +%ui-button--primary--active { + &:active, + &:active:focus { + background: darken($chassis-blue, 20%); + } +} + +%ui-button--primary--focus { + &:focus { + background: darken($chassis-blue, 15%); + } +} + +%ui-button--primary--hover { + &:hover { + background: darken($chassis-blue, 10%); + } +} + +%ui-button--primary--disabled { + &:disabled { + background: $chassis-blue; + opacity: .6; + } +} + +%ui-button--disabled { + opacity: .6; + cursor: default; +} diff --git a/scss/lint.scss b/scss/lint.scss index d3cf487..c29923b 100644 --- a/scss/lint.scss +++ b/scss/lint.scss @@ -15,7 +15,8 @@ @import "atoms/icons/icons", - "atoms/typography/typography"; + "atoms/typography/typography", + "atoms/buttons/buttons"; @import "views/main"; From b672e22d29a419659722de060cd84a022daef19b Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Fri, 17 Jul 2015 00:17:57 -0400 Subject: [PATCH 06/19] Buttons: Spaces to Tabs fix for buttons.html --- demos/buttons.html | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/demos/buttons.html b/demos/buttons.html index 2a32c0c..1c70366 100644 --- a/demos/buttons.html +++ b/demos/buttons.html @@ -82,22 +82,22 @@

Button Element

Anchor Element

Add --disabled to the end of the button class.

From 889e914f6deda3f8a41f6a4f4f54b6e846136d16 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Fri, 17 Jul 2015 01:19:01 -0400 Subject: [PATCH 07/19] Buttons: Switched to Mixins --- scss/atoms/buttons/_buttons.scss | 133 +++++++++++-------------------- scss/atoms/buttons/_extends.scss | 115 -------------------------- scss/atoms/buttons/_mixins.scss | 65 +++++++++++++++ 3 files changed, 110 insertions(+), 203 deletions(-) delete mode 100644 scss/atoms/buttons/_extends.scss create mode 100644 scss/atoms/buttons/_mixins.scss diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss index af22b47..33c4086 100644 --- a/scss/atoms/buttons/_buttons.scss +++ b/scss/atoms/buttons/_buttons.scss @@ -3,142 +3,99 @@ * Buttons * ========================================================================== */ +@import "mixins"; -@import "extends"; +/* These colors won't remain here, will be removed with jsass */ +$background: #fff; +$chassis-blue: #4fc0c8; +$chassis-gray-light: #f2f2f2; +$chassis-gray-dark: #383838; .ui-button { &--default { - @extend %ui-button; - @extend %ui-button--default; - @extend %ui-button--default--hover; - @extend %ui-button--default--focus; - @extend %ui-button--default--active; - @extend %ui-button--default--disabled; - @extend %ui-button--default-size; + @include ui-button($chassis-gray-dark, $background); + @include ui-button-sizes(default); + @include ui-button-states($chassis-gray-dark, $background); &--disabled { - @extend %ui-button; - @extend %ui-button--default; - @extend %ui-button--disabled; - @extend %ui-button--default-size; + @include ui-button-sizes(default); + @include ui-button($chassis-gray-dark, $background, true); } &--large { - @extend %ui-button; - @extend %ui-button--default; - @extend %ui-button--default--hover; - @extend %ui-button--default--focus; - @extend %ui-button--default--active; - @extend %ui-button--default--disabled; - @extend %ui-button--large; + @include ui-button($chassis-gray-dark, $background); + @include ui-button-sizes(large); + @include ui-button-states($chassis-gray-dark, $background); &--disabled { - @extend %ui-button; - @extend %ui-button--default; - @extend %ui-button--disabled; - @extend %ui-button--large; + @include ui-button($chassis-gray-dark, $background, true); + @include ui-button-sizes(large); } } &--small { - @extend %ui-button; - @extend %ui-button--default; - @extend %ui-button--default--hover; - @extend %ui-button--default--focus; - @extend %ui-button--default--active; - @extend %ui-button--default--disabled; - @extend %ui-button--small; + @include ui-button($chassis-gray-dark, $background); + @include ui-button-sizes(small); + @include ui-button-states($chassis-gray-dark, $background); &--disabled { - @extend %ui-button; - @extend %ui-button--default; - @extend %ui-button--disabled; - @extend %ui-button--small; + @include ui-button($chassis-gray-dark, $background, true); + @include ui-button-sizes(small); } } &--extra-small { - @extend %ui-button; - @extend %ui-button--default; - @extend %ui-button--default--hover; - @extend %ui-button--default--focus; - @extend %ui-button--default--active; - @extend %ui-button--default--disabled; @extend %ui-button--extra-small; + @include ui-button($chassis-gray-dark, $background); + @include ui-button-states($chassis-gray-dark, $background); &--disabled { - @extend %ui-button; - @extend %ui-button--default; - @extend %ui-button--disabled; - @extend %ui-button--extra-small; + @include ui-button($chassis-gray-dark, $background, true); + @include ui-button-sizes(extra-small); } } } &--primary { - @extend %ui-button; - @extend %ui-button--primary; - @extend %ui-button--primary--hover; - @extend %ui-button--primary--focus; - @extend %ui-button--primary--active; - @extend %ui-button--primary--disabled; - @extend %ui-button--default-size; + @include ui-button($chassis-gray-light, $chassis-blue); + @include ui-button-sizes(default); + @include ui-button-states($chassis-gray-light, $chassis-blue); &--disabled { - @extend %ui-button; - @extend %ui-button--primary; - @extend %ui-button--disabled; - @extend %ui-button--default-size; + @include ui-button($chassis-gray-light, $chassis-blue, true); + @include ui-button-sizes(default); } &--large { - @extend %ui-button; - @extend %ui-button--primary; - @extend %ui-button--primary--hover; - @extend %ui-button--primary--focus; - @extend %ui-button--primary--active; - @extend %ui-button--primary--disabled; - @extend %ui-button--large; + @include ui-button($chassis-gray-light, $chassis-blue); + @include ui-button-sizes(large); + @include ui-button-states($chassis-gray-light, $chassis-blue); &--disabled { - @extend %ui-button; - @extend %ui-button--primary; - @extend %ui-button--disabled; - @extend %ui-button--large; + @include ui-button($chassis-gray-light, $chassis-blue, true); + @include ui-button-sizes(large); } } &--small { - @extend %ui-button; - @extend %ui-button--primary; - @extend %ui-button--primary--hover; - @extend %ui-button--primary--focus; - @extend %ui-button--primary--active; - @extend %ui-button--primary--disabled; - @extend %ui-button--small; + @include ui-button($chassis-gray-light, $chassis-blue); + @include ui-button-sizes(small); + @include ui-button-states($chassis-gray-light, $chassis-blue); &--disabled { - @extend %ui-button; - @extend %ui-button--primary; - @extend %ui-button--disabled; - @extend %ui-button--small; + @include ui-button($chassis-gray-light, $chassis-blue, true); + @include ui-button-sizes(small); } } &--extra-small { - @extend %ui-button; - @extend %ui-button--primary; - @extend %ui-button--primary--hover; - @extend %ui-button--primary--focus; - @extend %ui-button--primary--active; - @extend %ui-button--primary--disabled; - @extend %ui-button--extra-small; + @include ui-button($chassis-gray-light, $chassis-blue); + @include ui-button-sizes(extra-small); + @include ui-button-states($chassis-gray-light, $chassis-blue); &--disabled { - @extend %ui-button; - @extend %ui-button--primary; - @extend %ui-button--disabled; - @extend %ui-button--extra-small; + @include ui-button($chassis-gray-light, $chassis-blue, true); + @include ui-button-sizes(extra-small); } } } diff --git a/scss/atoms/buttons/_extends.scss b/scss/atoms/buttons/_extends.scss deleted file mode 100644 index 65c886f..0000000 --- a/scss/atoms/buttons/_extends.scss +++ /dev/null @@ -1,115 +0,0 @@ -/* -* ========================================================================== -* Buttons (Extends) -* ========================================================================== -*/ - -/* These colors won't remain here, will be removed with jsass */ -$background: #fff; -$chassis-blue: #4fc0c8; -$chassis-gray-light: #f2f2f2; -$chassis-gray-dark: #383838; - -%ui-button { - border: 0; - box-sizing: border-box; - display: inline-block; - font-weight: 500; - margin: .25em; - text-align: center; - text-decoration: none; - text-transform: uppercase; -} - -%ui-button--large { - font-size: 20px; - line-height: 20px; - padding: .75em; -} - -%ui-button--default-size { - font-size: 16px; - line-height: 16px; - padding: .5em; -} - -%ui-button--small { - font-size: 14px; - line-height: 14px; - padding: .2em .5em; - height: 20px; -} - -%ui-button--extra-small { - font-size: 12px; - line-height: 12px; - padding: .2em .5em; -} - -%ui-button--default { - background: $background; - color: $chassis-gray-dark; -} - -%ui-button--default--active { - &:active, - &:active:focus { - background: darken($background, 20%); - } -} - -%ui-button--default--focus { - &:focus { - background: darken($background, 15%); - } -} - -%ui-button--default--hover { - &:hover { - background: darken($background, 10%); - } -} - -%ui-button--default--disabled { - &:disabled { - opacity: .6; - background: $background; - } -} - - -%ui-button--primary { - background: $chassis-blue; - color: $chassis-gray-light; -} - -%ui-button--primary--active { - &:active, - &:active:focus { - background: darken($chassis-blue, 20%); - } -} - -%ui-button--primary--focus { - &:focus { - background: darken($chassis-blue, 15%); - } -} - -%ui-button--primary--hover { - &:hover { - background: darken($chassis-blue, 10%); - } -} - -%ui-button--primary--disabled { - &:disabled { - background: $chassis-blue; - opacity: .6; - } -} - -%ui-button--disabled { - opacity: .6; - cursor: default; -} diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss new file mode 100644 index 0000000..010c324 --- /dev/null +++ b/scss/atoms/buttons/_mixins.scss @@ -0,0 +1,65 @@ +/* +* ========================================================================== +* Buttons (Mixins) +* ========================================================================== +*/ + +@mixin ui-button($color, $bgcolor, $disabled: false) { + background: $bgcolor; + border: 0; + box-sizing: border-box; + color: $color; + display: inline-block; + font-weight: 500; + margin: .25em; + text-align: center; + text-decoration: none; + text-transform: uppercase; + + @if($disabled) { + cursor: default; + opacity: .6; + } +} + +@mixin ui-button-sizes($size: default) { + @if($size == large) { + font-size: 20px; + line-height: 20px; + padding: .75em; + } + + @if($size == default) { + font-size: 16px; + line-height: 16px; + padding: .5em; + } + + @if($size == small) { + font-size: 14px; + line-height: 14px; + padding: .2em .5em; + } + + @if($size == extra-small) { + font-size: 12px; + line-height: 12px; + padding: .2em .5em; + } +} + +@mixin ui-button-states($color, $bgcolor) { + &:active { + background: darken($bgcolor, 20%); + } + &:focus { + background: darken($bgcolor, 15%); + } + &:hover { + background: darken($bgcolor, 10%); + } + &:disabled { + background: $bgcolor; + opacity: .6; + } +} From 10efba162867444fe55f0e093d6a54aae7f202ba Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Fri, 17 Jul 2015 01:21:02 -0400 Subject: [PATCH 08/19] Buttons: Removing box-sizing --- scss/atoms/buttons/_mixins.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss index 010c324..3e0b62a 100644 --- a/scss/atoms/buttons/_mixins.scss +++ b/scss/atoms/buttons/_mixins.scss @@ -7,7 +7,6 @@ @mixin ui-button($color, $bgcolor, $disabled: false) { background: $bgcolor; border: 0; - box-sizing: border-box; color: $color; display: inline-block; font-weight: 500; From 12be9ed1f7a3a7eeacf04cec6d3f34c9f7472496 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Fri, 17 Jul 2015 01:31:00 -0400 Subject: [PATCH 09/19] Buttons: Adding reset demo --- demos/buttons.html | 1 + 1 file changed, 1 insertion(+) diff --git a/demos/buttons.html b/demos/buttons.html index 1c70366..f1e22f5 100644 --- a/demos/buttons.html +++ b/demos/buttons.html @@ -23,6 +23,7 @@

Button tag

Options

From f425e314cf418b9c3d9ea0da82ed90071061fd27 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Fri, 17 Jul 2015 01:36:52 -0400 Subject: [PATCH 10/19] Buttons: IE=edge and adding a type=button example --- demos/buttons.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/demos/buttons.html b/demos/buttons.html index f1e22f5..4bdb0d2 100644 --- a/demos/buttons.html +++ b/demos/buttons.html @@ -2,6 +2,7 @@ + CSS Chassis - Buttons @@ -20,7 +21,8 @@

Button tag

Link - + + From ff413db1e9a4582f863fed0cd003dcb25df0f2d0 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Fri, 17 Jul 2015 19:40:32 -0400 Subject: [PATCH 11/19] Buttons: Added classes for each state, demos, cleaned up variable names --- demos/buttons.html | 88 +++++++++-- scss/atoms/buttons/_buttons.scss | 237 +++++++++++++++++++++++------ scss/atoms/buttons/_mixins.scss | 77 +++++----- scss/atoms/buttons/_variables.scss | 34 +++++ 4 files changed, 344 insertions(+), 92 deletions(-) create mode 100644 scss/atoms/buttons/_variables.scss diff --git a/demos/buttons.html b/demos/buttons.html index 4bdb0d2..31ff813 100644 --- a/demos/buttons.html +++ b/demos/buttons.html @@ -82,26 +82,96 @@

Button Element

Anchor Element

+ +

Setting Button Appearence Via Classes

+ +

Sometimes you might need to set the class of a ui-button to display a state. This code works a<a>, <button>, or <input> elements.

+ +

Disabled Class

Add --disabled to the end of the button class.

+ +

Active Class

Add --active to the end of the button class.

+ + +

Focus Class

Add --focus to the end of the button class.

+ +

Hover Class

Add --hover to the end of the button class.

+ + + + diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss index 33c4086..e9618f9 100644 --- a/scss/atoms/buttons/_buttons.scss +++ b/scss/atoms/buttons/_buttons.scss @@ -3,99 +3,246 @@ * Buttons * ========================================================================== */ +@import "variables"; @import "mixins"; -/* These colors won't remain here, will be removed with jsass */ -$background: #fff; -$chassis-blue: #4fc0c8; -$chassis-gray-light: #f2f2f2; -$chassis-gray-dark: #383838; - .ui-button { &--default { - @include ui-button($chassis-gray-dark, $background); - @include ui-button-sizes(default); - @include ui-button-states($chassis-gray-dark, $background); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button-sizes(default); - @include ui-button($chassis-gray-dark, $background, true); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-default-background); + } + + &--focus { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-default-background); + } + + &--active { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-default-background); + } + + &--hover { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-default-background); } &--large { - @include ui-button($chassis-gray-dark, $background); - @include ui-button-sizes(large); - @include ui-button-states($chassis-gray-dark, $background); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button($chassis-gray-dark, $background, true); - @include ui-button-sizes(large); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-default-background); + } + + &--focus { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-default-background); + } + + &--active { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-default-background); + } + + &--hover { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-default-background); } } &--small { - @include ui-button($chassis-gray-dark, $background); - @include ui-button-sizes(small); - @include ui-button-states($chassis-gray-dark, $background); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button($chassis-gray-dark, $background, true); - @include ui-button-sizes(small); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-default-background); + } + + &--focus { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-default-background); + } + + &--active { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-default-background); + } + + &--hover { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-default-background); } } &--extra-small { @extend %ui-button--extra-small; - @include ui-button($chassis-gray-dark, $background); - @include ui-button-states($chassis-gray-dark, $background); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button($chassis-gray-dark, $background, true); - @include ui-button-sizes(extra-small); + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-default-background); + } + + &--focus { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-default-background); + } + + &--active { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-default-background); + } + + &--hover { + @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-default-background); } } } &--primary { - @include ui-button($chassis-gray-light, $chassis-blue); - @include ui-button-sizes(default); - @include ui-button-states($chassis-gray-light, $chassis-blue); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($chassis-gray-light, $chassis-blue, true); - @include ui-button-sizes(default); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-primary-background); + } + + &--focus { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-primary-background); + } + + &--active { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-primary-background); + } + + &--hover { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-primary-background); } &--large { - @include ui-button($chassis-gray-light, $chassis-blue); - @include ui-button-sizes(large); - @include ui-button-states($chassis-gray-light, $chassis-blue); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($chassis-gray-light, $chassis-blue, true); - @include ui-button-sizes(large); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-primary-background); + } + + &--focus { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-primary-background); + } + + &--active { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-primary-background); + } + + &--hover { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-primary-background); } } &--small { - @include ui-button($chassis-gray-light, $chassis-blue); - @include ui-button-sizes(small); - @include ui-button-states($chassis-gray-light, $chassis-blue); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($chassis-gray-light, $chassis-blue, true); - @include ui-button-sizes(small); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-primary-background); + } + + &--focus { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-primary-background); + } + + &--active { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-primary-background); + } + + &--hover { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-primary-background); } } &--extra-small { - @include ui-button($chassis-gray-light, $chassis-blue); - @include ui-button-sizes(extra-small); - @include ui-button-states($chassis-gray-light, $chassis-blue); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($chassis-gray-light, $chassis-blue, true); - @include ui-button-sizes(extra-small); + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-primary-background); + } + + &--focus { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-focus($ui-button-primary-background); + } + + &--active { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-primary-background); + } + + &--hover { + @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-primary-background); } } } diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss index 3e0b62a..d887324 100644 --- a/scss/atoms/buttons/_mixins.scss +++ b/scss/atoms/buttons/_mixins.scss @@ -4,61 +4,62 @@ * ========================================================================== */ -@mixin ui-button($color, $bgcolor, $disabled: false) { +@mixin ui-button($color, $bgcolor,) { background: $bgcolor; border: 0; color: $color; display: inline-block; - font-weight: 500; - margin: .25em; + font-weight: $ui-button-font-weight; + margin: $ui-button-margin; text-align: center; text-decoration: none; - text-transform: uppercase; - - @if($disabled) { - cursor: default; - opacity: .6; - } + text-transform: $ui-button-text-transform; + touch-action: manipulation; + vertical-align: middle; } -@mixin ui-button-sizes($size: default) { - @if($size == large) { - font-size: 20px; - line-height: 20px; - padding: .75em; - } - - @if($size == default) { - font-size: 16px; - line-height: 16px; - padding: .5em; - } - - @if($size == small) { - font-size: 14px; - line-height: 14px; - padding: .2em .5em; - } - - @if($size == extra-small) { - font-size: 12px; - line-height: 12px; - padding: .2em .5em; - } +@mixin ui-button-sizes($size) { + font-size: map-get( $size, font-size); + line-height: map-get( $size, line-height); + padding: map-get( $size, padding); } @mixin ui-button-states($color, $bgcolor) { &:active { - background: darken($bgcolor, 20%); + @include ui-button-state-active($bgcolor); } &:focus { - background: darken($bgcolor, 15%); + @include ui-button-state-focus($bgcolor); } &:hover { - background: darken($bgcolor, 10%); + @include ui-button-state-active($bgcolor); } &:disabled { - background: $bgcolor; - opacity: .6; + @include ui-button-state-disabled($bgcolor); + } + &[aria-disabled="true"] { + @include ui-button-state-disabled($bgcolor); } } + +@mixin ui-button-state-active($bgcolor) { + background: darken($bgcolor, 20%); +} + +@mixin ui-button-state-focus($bgcolor) { + background: darken($bgcolor, 15%); +} + +@mixin ui-button-state-hover($bgcolor) { + background: darken($bgcolor, 10%); +} + +@mixin ui-button-state-disabled($bgcolor) { + background: $bgcolor; + cursor: default; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$ui-button-disabled-opacity+")"; + filter: alpha(opacity=$ui-button-disabled-opacity); + -moz-opacity: $ui-button-disabled-opacity; + -khtml-opacity: $ui-button-disabled-opacity; + opacity: $ui-button-disabled-opacity; +} diff --git a/scss/atoms/buttons/_variables.scss b/scss/atoms/buttons/_variables.scss new file mode 100644 index 0000000..a7430a8 --- /dev/null +++ b/scss/atoms/buttons/_variables.scss @@ -0,0 +1,34 @@ +/* +* ========================================================================== +* Buttons (Variables) +* ========================================================================== +*/ +/* These variables won't remain here, will be removed with jsass. */ +$ui-button-default-color: #383838; +$ui-button-default-background: #fff; +$ui-button-primary-color: #f2f2f2; +$ui-button-primary-background: #4fc0c8; +$ui-button-disabled-opacity: .6; +$ui-button-font-weight: 500; +$ui-button-margin: .25em; +$ui-button-text-transform: uppercase; +$ui-button-large: ( + font-size: 20px, + line-height: 20px, + padding: .75em +); +$ui-button-default: ( + font-size: 16px, + line-height: 16px, + padding: .5em +); +$ui-button-small: ( + font-size: 14px, + line-height: 14px, + padding: .2em .5em +); +$ui-button-extra-small: ( + font-size: 12px, + line-height: 12px, + padding: .2em .5em +); From 765b19be8f0fa0cf913e2cb19ed9bd856e8fe935 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Fri, 17 Jul 2015 19:44:58 -0400 Subject: [PATCH 12/19] Buttons: bug fix --- scss/atoms/buttons/_buttons.scss | 2 +- scss/atoms/buttons/_mixins.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss index e9618f9..2996310 100644 --- a/scss/atoms/buttons/_buttons.scss +++ b/scss/atoms/buttons/_buttons.scss @@ -21,7 +21,7 @@ &--focus { @include ui-button($ui-button-default-color, $ui-button-default-background); @include ui-button-sizes($ui-button-default); - @include ui-button-state-disabled($ui-button-default-background); + @include ui-button-state-focus($ui-button-default-background); } &--active { diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss index d887324..bad995e 100644 --- a/scss/atoms/buttons/_mixins.scss +++ b/scss/atoms/buttons/_mixins.scss @@ -4,7 +4,7 @@ * ========================================================================== */ -@mixin ui-button($color, $bgcolor,) { +@mixin ui-button($color, $bgcolor) { background: $bgcolor; border: 0; color: $color; From 5fa9d3ce381d7a6ccf9f330cfa17c95d96cc2fb1 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Mon, 20 Jul 2015 13:16:06 -0400 Subject: [PATCH 13/19] Buttons: Fixed Typos --- demos/buttons.html | 4 ++-- scss/atoms/buttons/_buttons.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/demos/buttons.html b/demos/buttons.html index 31ff813..54a1d43 100644 --- a/demos/buttons.html +++ b/demos/buttons.html @@ -14,7 +14,7 @@

CSS Chassis

Button tag

Button Classes

Use the button classes on an <a>, <button>, or <input> element. @@ -99,7 +99,7 @@

Disabled Class

Disabled

- Disabled/a> + Disabled Disabled

diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss index 2996310..fa32cf7 100644 --- a/scss/atoms/buttons/_buttons.scss +++ b/scss/atoms/buttons/_buttons.scss @@ -97,8 +97,8 @@ } &--extra-small { - @extend %ui-button--extra-small; @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button-sizes($ui-button-extra-small); @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { From b88bbbde1abe9deb165e77a6d5c512ab2542407b Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Mon, 20 Jul 2015 13:33:20 -0400 Subject: [PATCH 14/19] Buttons: Removing # of background declarations per selector --- scss/atoms/buttons/_buttons.scss | 144 +++++++++++++++---------------- scss/atoms/buttons/_mixins.scss | 34 +++++--- 2 files changed, 93 insertions(+), 85 deletions(-) diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss index fa32cf7..a1aad66 100644 --- a/scss/atoms/buttons/_buttons.scss +++ b/scss/atoms/buttons/_buttons.scss @@ -8,241 +8,241 @@ .ui-button { &--default { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-disabled($ui-button-default-background); + @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background); } &--focus { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-focus($ui-button-default-background); + @include ui-button-state-focus($ui-button-default-color, $ui-button-default-background); } &--active { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-active($ui-button-default-background); + @include ui-button-state-active($ui-button-default-color, $ui-button-default-background); } &--hover { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-hover($ui-button-default-background); + @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background); } &--large { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-disabled($ui-button-default-background); + @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background); } &--focus { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-focus($ui-button-default-background); + @include ui-button-state-focus($ui-button-default-color, $ui-button-default-background); } &--active { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-active($ui-button-default-background); + @include ui-button-state-active($ui-button-default-color, $ui-button-default-background); } &--hover { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-hover($ui-button-default-background); + @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background); } } &--small { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-disabled($ui-button-default-background); + @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background); } &--focus { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-focus($ui-button-default-background); + @include ui-button-state-focus($ui-button-default-color, $ui-button-default-background); } &--active { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-active($ui-button-default-background); + @include ui-button-state-active($ui-button-default-color, $ui-button-default-background); } &--hover { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-hover($ui-button-default-background); + @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background); } } &--extra-small { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); @include ui-button-states($ui-button-default-color, $ui-button-default-background); &--disabled { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-disabled($ui-button-default-background); + @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background); } &--focus { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-hover($ui-button-default-background); + @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background); } &--active { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-active($ui-button-default-background); + @include ui-button-state-active($ui-button-default-color, $ui-button-default-background); } &--hover { - @include ui-button($ui-button-default-color, $ui-button-default-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-hover($ui-button-default-background); + @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background); } } } &--primary { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-disabled($ui-button-primary-background); + @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background); } &--focus { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-focus($ui-button-primary-background); + @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background); } &--active { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-active($ui-button-primary-background); + @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background); } &--hover { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-default); - @include ui-button-state-hover($ui-button-primary-background); + @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background); } &--large { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-disabled($ui-button-primary-background); + @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background); } &--focus { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-focus($ui-button-primary-background); + @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background); } &--active { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-active($ui-button-primary-background); + @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background); } &--hover { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-large); - @include ui-button-state-hover($ui-button-primary-background); + @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background); } } &--small { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-disabled($ui-button-primary-background); + @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background); } &--focus { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-focus($ui-button-primary-background); + @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background); } &--active { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-active($ui-button-primary-background); + @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background); } &--hover { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-small); - @include ui-button-state-hover($ui-button-primary-background); + @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background); } } &--extra-small { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); &--disabled { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-disabled($ui-button-primary-background); + @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background); } &--focus { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-focus($ui-button-primary-background); + @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background); } &--active { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-active($ui-button-primary-background); + @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background); } &--hover { - @include ui-button($ui-button-primary-color, $ui-button-primary-background); + @include ui-button(); @include ui-button-sizes($ui-button-extra-small); - @include ui-button-state-hover($ui-button-primary-background); + @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background); } } } diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss index bad995e..10cbaff 100644 --- a/scss/atoms/buttons/_mixins.scss +++ b/scss/atoms/buttons/_mixins.scss @@ -4,17 +4,14 @@ * ========================================================================== */ -@mixin ui-button($color, $bgcolor) { - background: $bgcolor; +@mixin ui-button() { border: 0; - color: $color; display: inline-block; font-weight: $ui-button-font-weight; margin: $ui-button-margin; text-align: center; text-decoration: none; text-transform: $ui-button-text-transform; - touch-action: manipulation; vertical-align: middle; } @@ -25,37 +22,48 @@ } @mixin ui-button-states($color, $bgcolor) { + background: $bgcolor; + color: $color; &:active { - @include ui-button-state-active($bgcolor); + @include ui-button-state-active($color, $bgcolor); } &:focus { - @include ui-button-state-focus($bgcolor); + @include ui-button-state-focus($color, $bgcolor); } &:hover { - @include ui-button-state-active($bgcolor); + @include ui-button-state-active($color, $bgcolor); } &:disabled { - @include ui-button-state-disabled($bgcolor); + @include ui-button-state-disabled($color, $bgcolor); } &[aria-disabled="true"] { - @include ui-button-state-disabled($bgcolor); + @include ui-button-state-disabled($color, $bgcolor); } } -@mixin ui-button-state-active($bgcolor) { +@mixin ui-button-state-default($color, $bgcolor) { + background: $bgcolor; + color: $color; +} + +@mixin ui-button-state-active($color, $bgcolor) { background: darken($bgcolor, 20%); + color: $color; } -@mixin ui-button-state-focus($bgcolor) { +@mixin ui-button-state-focus($color, $bgcolor) { background: darken($bgcolor, 15%); + color: $color; } -@mixin ui-button-state-hover($bgcolor) { +@mixin ui-button-state-hover($color, $bgcolor) { background: darken($bgcolor, 10%); + color: $color; } -@mixin ui-button-state-disabled($bgcolor) { +@mixin ui-button-state-disabled($color, $bgcolor) { background: $bgcolor; + color: $color; cursor: default; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$ui-button-disabled-opacity+")"; filter: alpha(opacity=$ui-button-disabled-opacity); From 5c0a7ec291604b0ec0a9eb5b2a65c4f6db36b8c3 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Mon, 20 Jul 2015 13:38:06 -0400 Subject: [PATCH 15/19] Buttons: Fixing typos in demo file --- demos/buttons.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demos/buttons.html b/demos/buttons.html index 54a1d43..38dd5c2 100644 --- a/demos/buttons.html +++ b/demos/buttons.html @@ -83,9 +83,9 @@

Button Element

Setting Button Appearence Via Classes

Setting Button Appearance Via Classes

Sometimes you might need to set the class of a ui-button to display a state. This code works a<a>, <button>, or <input> elements.

Sometimes you might need to set the class of a ui-button to display a state. This code works with <a>, <button>, or <input> elements.

Disabled Class

Add --disabled to the end of the button class.

From ccc4bf9c83c1e28033a01665f98a472084dfc3ab Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Thu, 23 Jul 2015 13:34:46 -0400 Subject: [PATCH 16/19] Buttons: Fixing css linting breaking the build --- .csslintrc | 1 + package.json | 4 ++-- scss/atoms/buttons/_mixins.scss | 9 ++++++--- scss/style.scss | 3 ++- 4 files changed, 11 insertions(+), 6 deletions(-) diff --git a/.csslintrc b/.csslintrc index 4273f5c..aa4fe55 100644 --- a/.csslintrc +++ b/.csslintrc @@ -4,6 +4,7 @@ "box-sizing": false, "compatible-vendor-prefixes": false, "duplicate-background-images": false, + "font-sizes": false, "import": false, "important": false, "outline-none": false, diff --git a/package.json b/package.json index 1a089eb..79bc361 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,8 @@ "maintainers": [ { "name": "Sarah Frisk", - "email": "sarah@sarahfrisk.net", - "url": "http://sarahfrisk.net" + "email": "sarah@sarahfrisk.com", + "url": "http://sarahfrisk.com" }, { "name": "Alexander Schmitz", diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss index 10cbaff..fdc32ce 100644 --- a/scss/atoms/buttons/_mixins.scss +++ b/scss/atoms/buttons/_mixins.scss @@ -36,9 +36,12 @@ &:disabled { @include ui-button-state-disabled($color, $bgcolor); } - &[aria-disabled="true"] { - @include ui-button-state-disabled($color, $bgcolor); - } + /** + * This triggers 'unqualified-attributes' in csslint + * &[aria-disabled="true"] { + * @include ui-button-state-disabled($color, $bgcolor); + * } + **/ } @mixin ui-button-state-default($color, $bgcolor) { diff --git a/scss/style.scss b/scss/style.scss index f297126..048218a 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -7,7 +7,8 @@ @import "atoms/icons/icons", - "atoms/typography/typography"; + "atoms/typography/typography", + "atoms/buttons/buttons"; @import "views/main"; From e23fde7be741a6e630174812b1ce716e4b247c73 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Sun, 16 Aug 2015 12:13:34 -0400 Subject: [PATCH 17/19] Buttons: Pull in jsass-vars into button variables --- scss/atoms/buttons/_buttons.scss | 5 +- scss/atoms/buttons/_variables.scss | 34 ------------- scss/variables/buttons.js | 80 ++++++++++++++++++++++++++++++ tasks/options/csslint.js | 5 +- 4 files changed, 87 insertions(+), 37 deletions(-) delete mode 100644 scss/atoms/buttons/_variables.scss create mode 100644 scss/variables/buttons.js diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss index a1aad66..d3f2445 100644 --- a/scss/atoms/buttons/_buttons.scss +++ b/scss/atoms/buttons/_buttons.scss @@ -3,8 +3,9 @@ * Buttons * ========================================================================== */ -@import "variables"; -@import "mixins"; +@import + "dist/chassis", + "mixins"; .ui-button { &--default { diff --git a/scss/atoms/buttons/_variables.scss b/scss/atoms/buttons/_variables.scss deleted file mode 100644 index a7430a8..0000000 --- a/scss/atoms/buttons/_variables.scss +++ /dev/null @@ -1,34 +0,0 @@ -/* -* ========================================================================== -* Buttons (Variables) -* ========================================================================== -*/ -/* These variables won't remain here, will be removed with jsass. */ -$ui-button-default-color: #383838; -$ui-button-default-background: #fff; -$ui-button-primary-color: #f2f2f2; -$ui-button-primary-background: #4fc0c8; -$ui-button-disabled-opacity: .6; -$ui-button-font-weight: 500; -$ui-button-margin: .25em; -$ui-button-text-transform: uppercase; -$ui-button-large: ( - font-size: 20px, - line-height: 20px, - padding: .75em -); -$ui-button-default: ( - font-size: 16px, - line-height: 16px, - padding: .5em -); -$ui-button-small: ( - font-size: 14px, - line-height: 14px, - padding: .2em .5em -); -$ui-button-extra-small: ( - font-size: 12px, - line-height: 12px, - padding: .2em .5em -); diff --git a/scss/variables/buttons.js b/scss/variables/buttons.js new file mode 100644 index 0000000..663683f --- /dev/null +++ b/scss/variables/buttons.js @@ -0,0 +1,80 @@ +( 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-button-default-color": { + name: "Default Button Color", + value: "#383838" + }, + "ui-button-default-background": { + name: "Default Button Background", + value: "#ffffff" + }, + "ui-button-primary-color": { + name: "Primary Button Color", + value: "#ffffff" + }, + "ui-button-primary-background": { + name: "Primary Button Background", + value: "#337ab7" + }, + "ui-button-disabled-opacity": { + name: "Disabled Button Opacity", + value: .6 + }, + "ui-button-font-weight": { + name: "Button Font Weight", + value: 500 + }, + "ui-button-margin": { + name: "Button Margin", + value: ".25em" + }, + "ui-button-text-transform": { + name: "Button Text Transform", + value: "uppercase" + }, + "ui-button-large": { + name: "Large Button", + value: { + "font-size": "20px", + "line-height": "20px", + "padding": ".75em" + } + }, + "ui-button-default": { + name: "Default Button", + value: { + "font-size": "16px", + "line-height": "16px", + "padding": ".5em" + } + }, + "ui-button-small": { + name: "Small Button", + value: { + "font-size": "14px", + "line-height": "14px", + "padding": ".2em .5em" + } + }, + "ui-button-extra-small": { + name: "Extra Small Button", + value: { + "font-size": "12px", + "line-height": "12px", + "padding": ".2em .5em" + } + }, +}; + +return chassis; +} ) ); diff --git a/tasks/options/csslint.js b/tasks/options/csslint.js index 3e6c0d6..41c6c36 100644 --- a/tasks/options/csslint.js +++ b/tasks/options/csslint.js @@ -1,3 +1,6 @@ module.exports = { + options: { + csslintrc: ".csslintrc" + }, src: [ "dist/css/*.css" ] -}; \ No newline at end of file +}; From 3cb15652e8d403a681047a1f3c016309a1d7e57d Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Mon, 17 Aug 2015 22:19:00 -0400 Subject: [PATCH 18/19] Buttons: Adding Success/Info/Warning/Danger buttons --- demos/buttons.html | 168 ++++++++--- scss/atoms/buttons/_buttons.scss | 480 +++++++++++++++++++++++++++++++ scss/atoms/buttons/_mixins.scss | 16 +- scss/variables/buttons.js | 62 +++- 4 files changed, 678 insertions(+), 48 deletions(-) diff --git a/demos/buttons.html b/demos/buttons.html index 38dd5c2..6801b00 100644 --- a/demos/buttons.html +++ b/demos/buttons.html @@ -31,28 +31,50 @@

Button Classes

Options

Sizes

@@ -65,20 +87,36 @@

Button Element

@@ -91,20 +129,36 @@

Disabled Class

Add --disabled to the end of the button class.

@@ -112,20 +166,36 @@

Active Class

Add --active to the end of the button class.

@@ -133,20 +203,36 @@

Focus Class

Add --focus to the end of the button class.

@@ -154,20 +240,36 @@

Hover Class

Add --hover to the end of the button class.

diff --git a/scss/atoms/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss index d3f2445..90f5e35 100644 --- a/scss/atoms/buttons/_buttons.scss +++ b/scss/atoms/buttons/_buttons.scss @@ -247,4 +247,484 @@ } } } + + &--success { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-success-color, $ui-button-success-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-success-color, $ui-button-success-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-success-color, $ui-button-success-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-success-color, $ui-button-success-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-success-color, $ui-button-success-background); + } + + &--large { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-success-color, $ui-button-success-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-success-color, $ui-button-success-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-success-color, $ui-button-success-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-success-color, $ui-button-success-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-success-color, $ui-button-success-background); + } + } + + &--small { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-success-color, $ui-button-success-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-success-color, $ui-button-success-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-success-color, $ui-button-success-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-success-color, $ui-button-success-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-success-color, $ui-button-success-background); + } + } + + &--extra-small { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-success-color, $ui-button-success-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-success-color, $ui-button-success-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-focus($ui-button-success-color, $ui-button-success-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-success-color, $ui-button-success-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-success-color, $ui-button-success-background); + } + } + } + + &--info { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-info-color, $ui-button-info-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-info-color, $ui-button-info-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-info-color, $ui-button-info-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-info-color, $ui-button-info-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-info-color, $ui-button-info-background); + } + + &--large { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-info-color, $ui-button-info-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-info-color, $ui-button-info-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-info-color, $ui-button-info-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-info-color, $ui-button-info-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-info-color, $ui-button-info-background); + } + } + + &--small { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-info-color, $ui-button-info-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-info-color, $ui-button-info-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-info-color, $ui-button-info-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-info-color, $ui-button-info-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-info-color, $ui-button-info-background); + } + } + + &--extra-small { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-info-color, $ui-button-info-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-info-color, $ui-button-info-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-focus($ui-button-info-color, $ui-button-info-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-info-color, $ui-button-info-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-info-color, $ui-button-info-background); + } + } + } + + &--warning { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-warning-color, $ui-button-warning-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-warning-color, $ui-button-warning-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-warning-color, $ui-button-warning-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-warning-color, $ui-button-warning-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-warning-color, $ui-button-warning-background); + } + + &--large { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-warning-color, $ui-button-warning-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-warning-color, $ui-button-warning-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-warning-color, $ui-button-warning-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-warning-color, $ui-button-warning-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-warning-color, $ui-button-warning-background); + } + } + + &--small { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-warning-color, $ui-button-warning-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-warning-color, $ui-button-warning-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-warning-color, $ui-button-warning-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-warning-color, $ui-button-warning-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-warning-color, $ui-button-warning-background); + } + } + + &--extra-small { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-warning-color, $ui-button-warning-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-warning-color, $ui-button-warning-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-focus($ui-button-warning-color, $ui-button-warning-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-warning-color, $ui-button-warning-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-warning-color, $ui-button-warning-background); + } + } + } + + &--danger { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-danger-color, $ui-button-danger-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-danger-color, $ui-button-danger-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-danger-color, $ui-button-danger-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-danger-color, $ui-button-danger-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-danger-color, $ui-button-danger-background); + } + + &--large { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-danger-color, $ui-button-danger-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-danger-color, $ui-button-danger-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-danger-color, $ui-button-danger-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-danger-color, $ui-button-danger-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-danger-color, $ui-button-danger-background); + } + } + + &--small { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-danger-color, $ui-button-danger-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-danger-color, $ui-button-danger-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-danger-color, $ui-button-danger-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-danger-color, $ui-button-danger-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-danger-color, $ui-button-danger-background); + } + } + + &--extra-small { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-danger-color, $ui-button-danger-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-danger-color, $ui-button-danger-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-focus($ui-button-danger-color, $ui-button-danger-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-danger-color, $ui-button-danger-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-danger-color, $ui-button-danger-background); + } + } + } } diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss index fdc32ce..a009005 100644 --- a/scss/atoms/buttons/_mixins.scss +++ b/scss/atoms/buttons/_mixins.scss @@ -5,7 +5,6 @@ */ @mixin ui-button() { - border: 0; display: inline-block; font-weight: $ui-button-font-weight; margin: $ui-button-margin; @@ -13,17 +12,21 @@ text-decoration: none; text-transform: $ui-button-text-transform; vertical-align: middle; + white-space: nowrap; } @mixin ui-button-sizes($size) { - font-size: map-get( $size, font-size); - line-height: map-get( $size, line-height); - padding: map-get( $size, padding); + border-radius: map-get( $size, border-radius ); + font-size: map-get( $size, font-size ); + line-height: map-get( $size, line-height ); + padding: map-get( $size, padding ); } @mixin ui-button-states($color, $bgcolor) { background: $bgcolor; + border: $ui-button-border-width solid darken($bgcolor, 10%); color: $color; + &:active { @include ui-button-state-active($color, $bgcolor); } @@ -46,26 +49,31 @@ @mixin ui-button-state-default($color, $bgcolor) { background: $bgcolor; + border: $ui-button-border-width solid darken($bgcolor, 10%); color: $color; } @mixin ui-button-state-active($color, $bgcolor) { background: darken($bgcolor, 20%); + border: $ui-button-border-width solid darken($bgcolor, 30%); color: $color; } @mixin ui-button-state-focus($color, $bgcolor) { background: darken($bgcolor, 15%); + border: $ui-button-border-width solid darken($bgcolor, 25%); color: $color; } @mixin ui-button-state-hover($color, $bgcolor) { background: darken($bgcolor, 10%); + border: $ui-button-border-width solid darken($bgcolor, 20%); color: $color; } @mixin ui-button-state-disabled($color, $bgcolor) { background: $bgcolor; + border: $ui-button-border-width solid darken($bgcolor, 10%); color: $color; cursor: default; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$ui-button-disabled-opacity+")"; diff --git a/scss/variables/buttons.js b/scss/variables/buttons.js index 663683f..b51f4e6 100644 --- a/scss/variables/buttons.js +++ b/scss/variables/buttons.js @@ -26,6 +26,38 @@ chassis.uiButton = { name: "Primary Button Background", value: "#337ab7" }, + "ui-button-success-color": { + name: "Success Button Color", + value: "#ffffff" + }, + "ui-button-success-background": { + name: "Success Button Background", + value: "#5cb85c" + }, + "ui-button-info-color": { + name: "Info Button Color", + value: "#ffffff" + }, + "ui-button-info-background": { + name: "Info Button Background", + value: "#5bc0de" + }, + "ui-button-warning-color": { + name: "Warning Button Color", + value: "#ffffff" + }, + "ui-button-warning-background": { + name: "Warning Button Background", + value: "#f0ad4e" + }, + "ui-button-danger-color": { + name: "Danger Button Color", + value: "#ffffff" + }, + "ui-button-danger-background": { + name: "Danger Button Background", + value: "#d9534f" + }, "ui-button-disabled-opacity": { name: "Disabled Button Opacity", value: .6 @@ -40,38 +72,46 @@ chassis.uiButton = { }, "ui-button-text-transform": { name: "Button Text Transform", - value: "uppercase" + value: "none" + }, + "ui-button-border-width": { + name: "Button Border Width", + value: "1px" }, "ui-button-large": { name: "Large Button", value: { - "font-size": "20px", - "line-height": "20px", - "padding": ".75em" + "border-radius": "6px", + "font-size": "16px", + "line-height": "16px", + "padding": ".75em 1.25em" } }, "ui-button-default": { name: "Default Button", value: { - "font-size": "16px", - "line-height": "16px", - "padding": ".5em" + "border-radius": "4px", + "font-size": "14px", + "line-height": "14px", + "padding": ".5em 1em" } }, "ui-button-small": { name: "Small Button", value: { - "font-size": "14px", - "line-height": "14px", - "padding": ".2em .5em" + "border-radius": "3px", + "font-size": "12px", + "line-height": "12px", + "padding": ".35em .75em" } }, "ui-button-extra-small": { name: "Extra Small Button", value: { + "border-radius": "3px", "font-size": "12px", "line-height": "12px", - "padding": ".2em .5em" + "padding": ".2em .35em" } }, }; From e74e4db5aa1f36403e5bd6375435da5a43f11a67 Mon Sep 17 00:00:00 2001 From: Sarah Frisk Date: Mon, 17 Aug 2015 22:26:46 -0400 Subject: [PATCH 19/19] Buttons: Adjusting rounded corner variable --- scss/variables/buttons.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/scss/variables/buttons.js b/scss/variables/buttons.js index b51f4e6..9104176 100644 --- a/scss/variables/buttons.js +++ b/scss/variables/buttons.js @@ -81,7 +81,7 @@ chassis.uiButton = { "ui-button-large": { name: "Large Button", value: { - "border-radius": "6px", + "border-radius": "2px", "font-size": "16px", "line-height": "16px", "padding": ".75em 1.25em" @@ -90,7 +90,7 @@ chassis.uiButton = { "ui-button-default": { name: "Default Button", value: { - "border-radius": "4px", + "border-radius": "2px", "font-size": "14px", "line-height": "14px", "padding": ".5em 1em" @@ -99,7 +99,7 @@ chassis.uiButton = { "ui-button-small": { name: "Small Button", value: { - "border-radius": "3px", + "border-radius": "2px", "font-size": "12px", "line-height": "12px", "padding": ".35em .75em" @@ -108,7 +108,7 @@ chassis.uiButton = { "ui-button-extra-small": { name: "Extra Small Button", value: { - "border-radius": "3px", + "border-radius": "2px", "font-size": "12px", "line-height": "12px", "padding": ".2em .35em"