diff --git a/Gruntfile.js b/Gruntfile.js deleted file mode 100644 index a5a49c041..000000000 --- a/Gruntfile.js +++ /dev/null @@ -1,327 +0,0 @@ -module.exports = function(grunt) { - - var - - site = grunt.file.readJSON('build.config'), - - // shortcut - paths = site.paths, - - defaultTasks = [ - // run grunt watch - 'watch' - ], - - watchTasks = [ - // compiles less - 'less:build', - - // copy js - 'copy:file', - - // auto prefix modified file - 'autoprefixer:prefixFile', - - // creates minified js of modified file if it is js - 'newer:uglify:minifyOutput', - - // creates minified css of modified file if it is css - 'newer:cssmin:minifyOutput', - - // create concatenated css release if modified file is css - 'newer:concat:createCSSPackage', - - // create concatenated js release if modified file is js - 'newer:concat:createJSPackage' - ], - - resetTasks = [ - // clean build directory - 'clean:output' - ], - - buildTasks = [ - // clean build directory - 'clean:output', - - // compiles less definitions - 'less:buildAll', - - // copy assets - 'copy:uncompressedAssets', - 'copy:minifiedAssets', - 'copy:packagedAssets', - - // copy javascript definitions - 'copy:javascript', - - // auto prefix all modified files - 'autoprefixer:prefixOutput', - - // creates minified js of each output file - 'uglify:minifyOutput', - - // creates minified css of each output file - 'cssmin:minifyOutput', - - // create concatenated css release - 'concat:createCSSPackage', - - // create concatenated js release - 'concat:createJSPackage' - ], - - setWatchFiles = function(action, filePath) { - var - outputPath = filePath.replace(paths.source.definitions, paths.output.uncompressed + 'definitions/'), - regExp = new RegExp(paths.source.themes + '.*\/([^\/]*\/[^\/]*)\.(?:overrides|variables)$') - ; - // convert backslashes to slashes for Windows compatibility - if(process.platform === 'win32') { - filePath = filePath.replace(/\\/g, '/'); - } - // find relevant .less file for each modified .overrides or .variables file - if(filePath.search(regExp) !== -1) { - filePath = filePath.replace(regExp, paths.source.definitions + '$1.less'); - } - // build less and prefix - if(filePath.search('.less') !== -1) { - outputPath = outputPath.replace('less', 'css'); - grunt.config('less.build.src', filePath); - grunt.config('less.build.dest', outputPath); - grunt.config('autoprefixer.prefixFile.src', outputPath); - } - // copy just the one js file - else if(filePath.search('.js') !== -1) { - grunt.config('copy.file.src', filePath); - grunt.config('copy.file.dest', outputPath); - } - // do nothing - else { - grunt.config('less.build.src', 'non/existant/path'); - grunt.config('less.build.dest', 'non/existant/path'); - grunt.config('autoprefixer.prefixFile.src', 'non/existant/path'); - } - }, - - // this allows filenames with multiple extensions to be preserved - preserveFileExtensions = function(folder, filename) { - return folder + filename.substring(0, filename.lastIndexOf('.') ) + '.css'; - }, - preserveMinFileExtensions = function(folder, filename) { - return folder + filename.substring(0, filename.lastIndexOf('.') ) + '.min.css'; - }, - - config - ; - - config = { - - site : site, - paths : site.paths, - - /******************************* - Watch - *******************************/ - - // watches for changes in a source folder - watch: { - options: { - spawn: false - }, - src: { - files: [ - paths.source.definitions + '**/*.less', - paths.source.themes + '**/*.variables', - paths.source.themes + '**/*.overrides', - paths.source.definitions + '**/*.js' - ], - tasks : watchTasks - } - }, - - /******************************* - Test - *******************************/ - - // Clear terminal output - clear: { - terminal: {} - }, - - // Configured at run time - copy: { - file: {}, - uncompressedAssets: { - expand: true, - cwd: paths.source.themes, - src : [ - [ - '**/assets/**/*' - ] - ], - dest : paths.output.uncompressed + '/themes' - }, - minifiedAssets: { - expand: true, - cwd: paths.source.themes, - src : [ - [ - '**/assets/**/*' - ] - ], - dest : paths.output.minified + '/themes' - }, - packagedAssets: { - expand: true, - cwd: paths.source.themes, - src : [ - [ - '**/assets/**/*' - ] - ], - dest : paths.output.packaged + '/themes' - }, - javascript: { - expand : true, - cwd : paths.source.definitions, - src : ['**/*.js'], - dest : paths.output.uncompressed + '/definitions/' - } - }, - less: { - options: { - paths : ['src'], - compress : false, - optimization : 2 - }, - build: { - rename : preserveFileExtensions - }, - buildAll: { - expand : true, - cwd : paths.source.definitions, - src : ['**/*.less'], - dest : paths.output.uncompressed + '/definitions/', - rename : preserveFileExtensions - } - }, - - // Clean a folder - clean: { - options: { - force: true - }, - output : [ - paths.output.uncompressed, - paths.output.minified, - paths.output.packaged - ] - }, - - // Prefix - autoprefixer: { - options: { - browsers: site.support - }, - prefixOutput: { - expand : true, - cwd : paths.output.uncompressed, - dest : paths.output.uncompressed, - src : [ - '**/*.css' - ] - }, - prefixFile: { - src : paths.output.uncompressed + '**/*.css' - } - }, - - // Minify - cssmin: { - options : { - keepSpecialComments: 0, - report: 'min', - banner : '' + - '/*\n' + - '* # Semantic UI ' + - '* http://github.com/semantic-org/semantic-ui\n' + - '*\n' + - '* Copyright <%= grunt.template.today("yyyy") %> \n' + - '* Built: <%= grunt.template.today("mm/dd/yyyy") %>\n' + - '*/\n' - }, - minifyOutput: { - expand : true, - cwd : paths.output.uncompressed, - src : [ - '**/*.css' - ], - dest : paths.output.minified, - rename : preserveMinFileExtensions - } - }, - - // Minify JS - uglify: { - - minifyOutput: { - expand : true, - cwd : paths.output.uncompressed, - src : [ - '**/*.js' - ], - dest : paths.output.minified, - ext : '.min.js', - banner : '' + - '/*' + - '* # Semantic UI\n' + - '* http://github.com/semantic-org/semantic-ui\n' + - '*\n' + - '* Copyright <%= grunt.template.today("yyyy") %> Contributors\n' + - '*\n' + - '* Build Date: <%= grunt.template.today("mm/dd/yyyy") %>\n' + - '*/\n' - } - }, - - concat: { - options: { - }, - createCSSPackage: { - src: [ paths.output.minified + '**/*.css'], - dest: paths.output.packaged + 'definitions/css/semantic.css' - }, - createJSPackage: { - src: [ paths.output.minified + '**/*.js'], - dest: paths.output.packaged + 'definitions/js/semantic.js' - } - } - - }; - - // filesys & terminal - grunt.loadNpmTasks('grunt-contrib-clean'); - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-contrib-copy'); - grunt.loadNpmTasks('grunt-clear'); - grunt.loadNpmTasks('grunt-contrib-concat'); - grunt.loadNpmTasks('grunt-newer'); - - // css - grunt.loadNpmTasks('grunt-contrib-cssmin'); - grunt.loadNpmTasks('grunt-contrib-less'); - grunt.loadNpmTasks('grunt-autoprefixer'); - - // javascript - grunt.loadNpmTasks('grunt-contrib-uglify'); - - grunt.initConfig(config); - grunt.registerTask('default', defaultTasks); - grunt.registerTask('build', buildTasks); - grunt.registerTask('reset', resetTasks); - - // compiles only changed less files - grunt.event.on('watch', setWatchFiles); - -}; \ No newline at end of file diff --git a/build.json b/build.json index 179fcb854..5a7da2cfb 100644 --- a/build.json +++ b/build.json @@ -4,13 +4,15 @@ "paths": { "source": { "definitions" : "src/definitions/", + "site" : "src/_site/", "themes" : "src/themes/", - "site" : "src/_site/" + "assets" : "src/themes/**/assets/**" }, "output": { - "uncompressed" : "dist/uncompressed/", - "minified" : "dist/minified/", - "packaged" : "dist/packaged/" + "uncompressed" : "dist/elements/", + "compressed" : "dist/elements/", + "packaged" : "dist/packaged/", + "themes" : "dist/themes" } }, diff --git a/gulpfile.js b/gulpfile.js index 72c556493..5dd515996 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -8,16 +8,11 @@ */ var - gulp = require('gulp'), + gulp = require('gulp-help')(require('gulp')), // read settings file config = require('./build.json'), - // formats comments in output - variableComments = /[\s\S]+\/\* End Config \*\//m, - largeComment = /(\/\*\*\*\*[\s\S]+?\*\/)/mg, - smallComment = /(\/\*---[\s\S]+?\*\/)/mg, - // shorthand base = config.base, source = config.paths.source, @@ -26,17 +21,19 @@ var // required node components del = require('del'), fs = require('fs'), + path = require('path'), // required gulp components autoprefixer = require('gulp-autoprefixer'), - batch = require('gulp-batch'), concat = require('gulp-concat'), copy = require('gulp-copy'), csscomb = require('gulp-csscomb'), karma = require('gulp-karma'), less = require('gulp-less'), + minifyCSS = require('gulp-minify-css'), notify = require('gulp-notify'), plumber = require('gulp-plumber'), + rename = require('gulp-rename'), replace = require('gulp-replace'), sourcemaps = require('gulp-sourcemaps'), uglify = require('gulp-uglify'), @@ -44,76 +41,85 @@ var watch = require('gulp-watch'), settings = { + minify: { + processImport: false, + keepSpecialComments: 0 + }, prefix: { - browsers: config.browsers + browsers: [ + "last 2 version", + "> 1%", + "opera 12.1", + "safari 6", + "ie 9", + "bb 10", + "android 4" + ] + }, + minJS: { + extname: '.min.js' + }, + minCSS: { + extname: '.min.css' + } + }, + + comments = { + // remove variable comments from css + variables : { + in : /[\s\S]+\/\* End Config \*\//m, + out : '', + }, + // adds spacing around comments + large: { + in : /(\/\*\*\*\*[\s\S]+?\*\/)/mg, + out : '\n\n$1\n' + }, + small: { + in : /(\/\*---[\s\S]+?\*\/)/mg, + out : '\n$1\n' + }, + tiny: { + in : /(\/\* [\s\S]+? \*\/)/mg, + out : '\n$1' } + }, + + assetPaths = { + uncompressed : path.relative(output.uncompressed, output.themes), + compressed : path.relative(output.compressed, output.themes), + packaged : path.relative(output.packaged, output.themes) } ; // Add base to all paths -for(var path in source) { - if(source.hasOwnProperty(path)) { - source[path] = base + source[path]; +for(var folder in source) { + if(source.hasOwnProperty(folder)) { + source[folder] = base + source[folder]; } } -for(var path in output) { - if(output.hasOwnProperty(path)) { - output[path] = base + output[path]; +for(var folder in output) { + if(output.hasOwnProperty(folder)) { + output[folder] = base + output[folder]; } } /******************************* - Commands + Tasks *******************************/ - /*-------------- User ---------------*/ -// Watches for changes to site and recompilesz -gulp.task('default', [ - 'watch src' -]); - -// Rebuilds all files -gulp.task('build', [ - 'build files' -]); - -// Rebuilds all files -gulp.task('clean', [ - 'clean dist' -]); - - -/*-------------- - Maintainer ----------------*/ - -gulp.task('watch all', [ - 'watch site', - 'watch themes', - 'watch definitions', - 'watch module definitions' -]); - -gulp.task('release', [ - 'build release' +gulp.task('default', 'Defaults task is watch', [ + 'watch' ]); -/******************************* - Tasks -*******************************/ - -/*-------------- - User ----------------*/ - // cleans distribution files -gulp.task('clean dist', function(callback) { +gulp.task('clean', 'Clean dist folder', function(callback) { del([ config.output.compressed, config.output.minified, @@ -122,37 +128,65 @@ gulp.task('clean dist', function(callback) { }); -gulp.task('watch src', function () { +gulp.task('watch', 'Watch source directory for changes', function () { - // watch for changes in site + gulp.watch([ + source.definitions + '**/*.less', + source.site + '**/*.{overrides,variables}', + source.themes + '**/*.{overrides,variables}' + ], function(file) { - gulp.watch(source.site + '**/*.{overrides,variables}', function(file) { - var path; + var + path, + css, + uncompressed, + compressed, + assets + ; - // recompile definition + // recompile related definition file path = util.replaceExtension(file.path, '.less'); + + path = path.replace(source.themes, source.definitions); path = path.replace(source.site, source.definitions); + console.log(path); + if( fs.existsSync(path) ) { - console.log('Creating file', path); - return gulp.src(path) + + // copy assets + assets = gulp.src(source.assets) + .pipe(gulp.dest(output.themes)) + ; + + // replace paths + + // build less + css = gulp.src(path) .pipe(plumber()) - .pipe(less()) + .pipe(less(settings.less)) + .pipe(replace(comments.variables.in, comments.variables.out)) + .pipe(replace(comments.large.in, comments.large.out)) + .pipe(replace(comments.small.in, comments.small.out)) + .pipe(replace(comments.tiny.in, comments.tiny.out)) .pipe(autoprefixer(settings.prefix)) - .pipe(replace(variableComments, '')) - .pipe(replace(largeComment, '\n\n$1\n')) - .pipe(csscomb()) + ; + uncompressed = css + .pipe(replace(comments.tiny.in, comments.tiny.out)) .pipe(gulp.dest(output.uncompressed)) ; + compressed = css + .pipe(minifyCSS(settings.minify)) + .pipe(rename(settings.minCSS)) + .pipe(gulp.dest(output.compressed)) + ; + } else { console.log('Definition file not found', path); } }); - - - }); @@ -162,7 +196,7 @@ gulp.task('watch src', function () { /* These tasks are designed for updates to the core library */ -gulp.task('watch module definition', function () { +gulp.task('rtl', 'Create RTL Release', function () { watch('src/definitions/**/*.js', function (files, callback) { gulp.start('library module changed', callback); }); @@ -177,6 +211,10 @@ gulp.task('watch definitions', function () { // Build release gulp.task('build release', function () { + // create RTL release + + // create bower releases + }); diff --git a/package.json b/package.json index a11cd41aa..52f87814c 100755 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "author": "Jack Lukic ", "license": "MIT", "scripts": { - "test": "grunt test" + "test": "gulp test" }, "repository": { "type": "git", @@ -25,16 +25,21 @@ "gulp-autoprefixer": "^1.0.1", "gulp-batch": "^1.0.1", "gulp-concat": "^2.4.1", + "gulp-concat-css": "^1.0.0", "gulp-copy": "0.0.2", "gulp-csscomb": "^3.0.3", + "gulp-help": "^1.2.0", "gulp-karma": "0.0.4", "gulp-less": "^1.3.6", + "gulp-minify-css": "^0.3.10", "gulp-notify": "^2.0.0", "gulp-plumber": "^0.6.6", + "gulp-rename": "^1.2.0", "gulp-replace": "^0.4.0", "gulp-sourcemaps": "^1.2.4", "gulp-uglify": "^1.0.1", "gulp-util": "^3.0.1", - "gulp-watch": "^1.1.0" + "gulp-watch": "^1.1.0", + "rtlcss": "^1.4.0" } } diff --git a/src/themes/basic/elements/icon.variables b/src/themes/basic/elements/icon.variables index 2e0467234..388707a76 100644 --- a/src/themes/basic/elements/icon.variables +++ b/src/themes/basic/elements/icon.variables @@ -1,3 +1,5 @@ /*------------------- Icon Variables --------------------*/ + +@fontPath : "../../themes/basic/assets/fonts"; diff --git a/src/themes/default/globals/site.variables b/src/themes/default/globals/site.variables index 299f3c060..90d576785 100644 --- a/src/themes/default/globals/site.variables +++ b/src/themes/default/globals/site.variables @@ -2,13 +2,6 @@ Site Settings *******************************/ -/*------------------- - Paths ---------------------*/ - -@imagePath : "../../themes/packages/default/assets/images"; -@fontPath : "../../themes/packages/default/assets/fonts"; - /*------------------- Fonts --------------------*/ @@ -123,6 +116,13 @@ Power-User *******************************/ +/*------------------- + Paths +--------------------*/ + +@imagePath : "../../themes/default/assets/images"; +@fontPath : "../../themes/default/assets/fonts"; + /*------------------- Icons --------------------*/ diff --git a/src/themes/default/modules/tab.variables b/src/themes/default/modules/tab.variables index a613afc39..9e8db0ace 100644 --- a/src/themes/default/modules/tab.variables +++ b/src/themes/default/modules/tab.variables @@ -6,7 +6,8 @@ @loadingMinHeight: 250px; @loadingText: 'Loading...'; @loadingTextDistance: 50px; -@loadingBackground: url(../../themes/packages/default/assets/images/loader-large.gif) no-repeat 50% 0px; + +@loadingBackground: url("@{imagePath}/loader-large.gif") no-repeat 50% 0px; @loadingTextColor: @lightTextColor; @loadingAlign: center; diff --git a/src/themes/flat/globals/site.variables b/src/themes/flat/globals/site.variables index 3cb0cd11f..781c4b34a 100644 --- a/src/themes/flat/globals/site.variables +++ b/src/themes/flat/globals/site.variables @@ -6,8 +6,8 @@ Paths --------------------*/ -@imagePath : "../../themes/packages/default/assets/images"; -@fontPath : "../../themes/packages/default/assets/fonts"; +@imagePath : "../../themes/default/assets/images"; +@fontPath : "../../themes/default/assets/fonts"; /*------------------- Fonts @@ -104,381 +104,3 @@ @largeMonitorBreakpoint : 1400px; @widescreenMonitorBreakpoint : 1900px; - -/******************************* - Power-User -*******************************/ - -/*------------------- - Icons ---------------------*/ - -/* Max Width of Icon */ -@iconWidth : 1.23em; - -/*------------------- - Easing ---------------------*/ - -@defaultEasing: ease; - - -/*--- Neutrals ---*/ -@fullBlack : #000000; -@lightBlack : #333333; -@darkGrey : #AAAAAA; -@lightGrey : #DCDDDE; -@offWhite : #FAFAFA; -@darkWhite : #F0F0F0; - -/*--- Colored Backgrounds ---*/ -@blueBackground : #D3E4F3; -@greenBackground : #DEF2E0; -@orangeBackground : #F7E5D6; -@pinkBackground : #F9CEE6; -@purpleBackground : #E0DDF5; -@redBackground : #F8D5D3; -@tealBackground : #D2F5F5; -@yellowBackground : #FCF5D8; - -/*--- Colored Text ---*/ -@blueTextColor : @blue; -@orangeTextColor : @orange; -@pinkTextColor : @pink; -@purpleTextColor : @purple; -@redTextColor : @red; -@greenTextColor : #1EBC30; // Green is difficult to read -@tealTextColor : #10A3A3; // Teal text is difficult to read -@yellowTextColor : #B58105; // Yellow text is difficult to read - -/*--- Colored Headers ---*/ -@blueHeaderColor : darken(@blueTextColor, 5); -@greenHeaderColor : darken(@greenTextColor, 5); -@orangeHeaderColor : darken(@orangeTextColor, 5); -@pinkHeaderColor : darken(@pinkTextColor, 5); -@purpleHeaderColor : darken(@purpleTextColor, 5); -@redHeaderColor : darken(@redTextColor, 5); -@tealHeaderColor : darken(@tealTextColor, 5); -@yellowHeaderColor : darken(@yellowTextColor, 5); - - - -/*------------------- - Emotive Colors ---------------------*/ - -/* Mood */ -@positiveBackgroundColor : #E4F5DD; -@negativeBackgroundColor : #FAE8E8; - -@positiveBorderColor : #B7CAA7; -@negativeBorderColor : #DBB1B1; - -/* Solid Background Color */ -@positiveColor : @green; -@negativeColor : @red; - -@positiveTextColor : #3C763D; -@negativeTextColor : #A94442; - - -/* Status */ -@infoBackgroundColor : #E5F6FB; -@warningBackgroundColor : #FCF8E3; -@successBackgroundColor : @positiveBackgroundColor; -@errorBackgroundColor : @negativeBackgroundColor; - -@infoBorderColor : #AAD6DF; -@warningBorderColor : #D3C4A5; -@successBorderColor : @positiveBorderColor; -@errorBorderColor : @negativeBorderColor; - -@infoTextColor : #337B92; -@warningTextColor : #8A6D3B; -@successTextColor : @positiveTextColor; -@errorTextColor : @negativeTextColor; - -/* Darkened Headers */ -@positiveHeaderColor : darken(@positiveTextColor, 5); -@negativeHeaderColor : darken(@negativeTextColor, 5); -@infoHeaderColor : darken(@infoTextColor, 5); -@warningHeaderColor : darken(@warningTextColor, 5); -@successHeaderColor : darken(@successTextColor, 5); -@errorHeaderColor : darken(@errorTextColor, 5); - -/*------------------- - Neutral Text ---------------------*/ - -@darkTextColor : rgba(0, 0, 0, 0.85); -@lightTextColor : rgba(0, 0, 0, 0.4); - -@invertedTextColor : rgba(255, 255, 255, 1); -@invertedLightTextColor : rgba(255, 255, 255, 0.8); -@invertedUnselectedTextColor : rgba(255, 255, 255, 0.5); -@invertedSelectedTextColor : rgba(255, 255, 255, 1); -@invertedDisabledTextColor : rgba(255, 255, 255, 0.3); - -@unselectedTextColor : rgba(0, 0, 0, 0.4); -@selectedTextColor : rgba(0, 0, 0, 0.8); -@disabledTextColor : rgba(0, 0, 0, 0.2); - -/*------------------- - Brand Colors ---------------------*/ - -@facebookColor : #3B579D; -@twitterColor : #4092CC; -@googlePlusColor : #D34836; -@linkedInColor : #1F88BE; -@youtubeColor : #CC181E; -@instagramColor : #49769C; -@pinterestColor : #00ACED; -@vkColor : #4D7198; - -/*------------------- - Grid Columns ---------------------*/ - -@oneWide : (1 / @columnCount * 100%); -@twoWide : (2 / @columnCount * 100%); -@threeWide : (3 / @columnCount * 100%); -@fourWide : (4 / @columnCount * 100%); -@fiveWide : (5 / @columnCount * 100%); -@sixWide : (6 / @columnCount * 100%); -@sevenWide : (7 / @columnCount * 100%); -@eightWide : (8 / @columnCount * 100%); -@nineWide : (9 / @columnCount * 100%); -@tenWide : (10 / @columnCount * 100%); -@elevenWide : (11 / @columnCount * 100%); -@twelveWide : (12 / @columnCount * 100%); -@thirteenWide : (13 / @columnCount * 100%); -@fourteenWide : (14 / @columnCount * 100%); -@fifteenWide : (15 / @columnCount * 100%); -@sixteenWide : (16 / @columnCount * 100%); - -@oneColumn : (1 / 1 * 100%); -@twoColumn : (1 / 2 * 100%); -@threeColumn : (1 / 3 * 100%); -@fourColumn : (1 / 4 * 100%); -@fiveColumn : (1 / 5 * 100%); -@sixColumn : (1 / 6 * 100%); -@sevenColumn : (1 / 7 * 100%); -@eightColumn : (1 / 8 * 100%); -@nineColumn : (1 / 9 * 100%); -@tenColumn : (1 / 10 * 100%); -@elevenColumn : (1 / 11 * 100%); -@twelveColumn : (1 / 12 * 100%); -@thirteenColumn : (1 / 13 * 100%); -@fourteenColumn : (1 / 14 * 100%); -@fifteenColumn : (1 / 15 * 100%); -@sixteenColumn : (1 / 16 * 100%); - -/*------------------- - Borders ---------------------*/ - -@circularRadius : 500rem; - -@borderColor : rgba(0, 0, 0, 0.1); -@selectedBorderColor : rgba(0, 0, 0, 0.2); - -@solidBorderColor : #DDDDDD; -@solidSelectedBorderColor : #B0B0B0; - -@whiteBorderColor : rgba(255, 255, 255, 0.2); -@selectedWhiteBorderColor : rgba(255, 255, 255, 0.8); - -@solidWhiteBorderColor : #555555; -@selectedSolidWhiteBorderColor : #999999; - -/*------------------- - Sizes ---------------------*/ - -@mini : 0.7em; -@tiny : 0.8em; -@small : 0.875em; -@medium : 1em; -@large : 1.125em; -@big : 1.25em; -@huge : 1.375em; -@massive : 1.5em; - - -/*------------------- - Transitions ---------------------*/ - -@transitionDuration : 0.25s; -@transitionEasing : ease; - - -/******************************* - States -*******************************/ - -/*------------------- - Disabled ---------------------*/ - -@disabledOpacity: 0.3; - -/*------------------- - Hover ---------------------*/ - -/*--- Colors ---*/ -@primaryColorHover : lighten( @primaryColor, 7); -@secondaryColorHover : lighten( @secondaryColor, 7); - -@blueHover : lighten( @blue, 7); -@greenHover : lighten( @green, 7); -@orangeHover : lighten( @orange, 7); -@pinkHover : lighten( @pink, 7); -@purpleHover : lighten( @purple, 7); -@redHover : lighten( @red, 7); -@tealHover : lighten( @teal, 7); -@yellowHover : lighten( @yellow, 7); - -@lightBlueHover : lighten( @lightBlue, 7); -@lightGreenHover : lighten( @lightGreen, 7); -@lightOrangeHover : lighten( @lightOrange, 7); -@lightPinkHover : lighten( @lightPink, 7); -@lightPurpleHover : lighten( @lightPurple, 7); -@lightRedHover : lighten( @lightRed, 7); -@lightTealHover : lighten( @lightTeal, 7); -@lightYellowHover : lighten( @lightYellow, 7); - -/*--- Emotive ---*/ -@positiveColorHover : lighten( @positiveColor, 7); -@negativeColorHover : lighten( @negativeColor, 7); - -/*--- Neutrals ---*/ -@fullBlackHover : lighten( @fullBlack, 7); -@blackHover : lighten( @black, 7); -@lightBlackHover : lighten( @lightBlack, 7); - -@lightGreyHover : lighten( @lightGrey, 7); -@greyHover : lighten( @grey, 7); -@darkGreyHover : lighten( @darkGrey, 7); - -@whiteHover : lighten( @white, 7); -@offWhiteHover : lighten( @offWhite, 7); -@darkWhiteHover : lighten( @darkWhite, 7); - -@facebookHoverColor : lighten( @facebookColor, 7); -@twitterHoverColor : lighten( @twitterColor, 7); -@googlePlusHoverColor : lighten( @googlePlusColor, 7); -@linkedInHoverColor : lighten( @linkedInColor, 7); -@youtubeHoverColor : lighten( @youtubeColor, 7); -@instagramHoverColor : lighten( @instagramColor, 7); -@pinterestHoverColor : lighten( @pinterestColor, 7); -@vkHoverColor : lighten( @vkColor, 7); - - -/*------------------- - Down (:active) ---------------------*/ - - -/*--- Colors ---*/ -@primaryColorDown : darken(@primaryColor, 7); -@secondaryColorDown : darken(@secondaryColor, 7); - -@blueDown : darken(@blue, 7); -@greenDown : darken(@green, 7); -@orangeDown : darken(@orange, 7); -@pinkDown : darken(@pink, 7); -@purpleDown : darken(@purple, 7); -@redDown : darken(@red, 7); -@tealDown : darken(@teal, 7); -@yellowDown : darken(@yellow, 7); - -@lightBlueDown : darken(@lightBlue, 7); -@lightGreenDown : darken(@lightGreen, 7); -@lightOrangeDown : darken(@lightOrange, 7); -@lightPinkDown : darken(@lightPink, 7); -@lightPurpleDown : darken(@lightPurple, 7); -@lightRedDown : darken(@lightRed, 7); -@lightTealDown : darken(@lightTeal, 7); -@lightYellowDown : darken(@lightYellow, 7); - -/*--- Emotive ---*/ -@positiveColorDown : darken(@positiveColor, 7); -@negativeColorDown : darken(@negativeColor, 7); - -/*--- Neutrals ---*/ -@fullBlackDown : darken(@fullBlack, 7); -@blackDown : darken(@black, 7); -@lightBlackDown : darken(@lightBlack, 7); - -@lightGreyDown : darken(@lightGrey, 7); -@greyDown : darken(@grey, 7); -@darkGreyDown : darken(@darkGrey, 7); - -@whiteDown : darken(@white, 7); -@offWhiteDown : darken(@offWhite, 7); -@darkWhiteDown : darken(@darkWhite, 7); - -@facebookDownColor : darken(@facebookColor, 7); -@twitterDownColor : darken(@twitterColor, 7); -@googlePlusDownColor : darken(@googlePlusColor, 7); -@linkedInDownColor : darken(@linkedInColor, 7); -@youtubeDownColor : darken(@youtubeColor, 7); -@instagramDownColor : darken(@instagramColor, 7); -@pinterestDownColor : darken(@pinterestColor, 7); -@vkDownColor : darken(@vkColor, 7); - - -/*------------------- - Active ---------------------*/ - -/*--- Standard ---*/ -@primaryColorActive : darken(@primaryColor, 5); -@secondaryColorActive : darken(@secondaryColor, 5); - -@blueActive : darken(@blue, 5); -@greenActive : darken(@green, 5); -@orangeActive : darken(@orange, 5); -@pinkActive : darken(@pink, 5); -@purpleActive : darken(@purple, 5); -@redActive : darken(@red, 5); -@tealActive : darken(@teal, 5); -@yellowActive : darken(@yellow, 5); - -@lightBlueActive : darken(@lightBlue, 5); -@lightGreenActive : darken(@lightGreen, 5); -@lightOrangeActive : darken(@lightOrange, 5); -@lightPinkActive : darken(@lightPink, 5); -@lightPurpleActive : darken(@lightPurple, 5); -@lightRedActive : darken(@lightRed, 5); -@lightTealActive : darken(@lightTeal, 5); -@lightYellowActive : darken(@lightYellow, 5); - -/*--- Emotive ---*/ -@positiveColorActive : darken(@positiveColor, 5); -@negativeColorActive : darken(@negativeColor, 5); - -/*--- Neutrals ---*/ -@fullBlackActive : darken(@fullBlack, 5); -@blackActive : darken(@black, 5); -@lightBlackActive : darken(@lightBlack, 5); - -@lightGreyActive : darken(@lightGrey, 5); -@greyActive : darken(@grey, 5); -@darkGreyActive : darken(@darkGrey, 5); - -@whiteActive : darken(@white, 5); -@offWhiteActive : darken(@offWhite, 5); -@darkWhiteActive : darken(@darkWhite, 5); - -@facebookActiveColor : darken(@facebookColor, 5); -@twitterActiveColor : darken(@twitterColor, 5); -@googlePlusActiveColor : darken(@googlePlusColor, 5); -@linkedInActiveColor : darken(@linkedInColor, 5); -@youtubeActiveColor : darken(@youtubeColor, 5); -@instagramActiveColor : darken(@instagramColor, 5); -@pinterestActiveColor : darken(@pinterestColor, 5); -@vkActiveColor : darken(@vkColor, 5);