richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Iteration on gulpfile design

pull/1191/head
jlukic 10 years ago
parent
958cfcc456
commit
dc5e672489
8 changed files with 133 additions and 790 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 327
      Gruntfile.js
  2. 10
      build.json
  3. 176
      gulpfile.js
  4. 9
      package.json
  5. 2
      src/themes/basic/elements/icon.variables
  6. 14
      src/themes/default/globals/site.variables
  7. 3
      src/themes/default/modules/tab.variables
  8. 382
      src/themes/flat/globals/site.variables

327
Gruntfile.js
View File

@ -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 <https://npmjs.org/package/grunt-contrib-watch>
grunt.event.on('watch', setWatchFiles);
};

10
build.json
View File

@ -4,13 +4,15 @@
"paths": { "paths": {
"source": { "source": {
"definitions" : "src/definitions/", "definitions" : "src/definitions/",
"site" : "src/_site/",
"themes" : "src/themes/", "themes" : "src/themes/",
"site" : "src/_site/"
"assets" : "src/themes/**/assets/**"
}, },
"output": { "output": {
"uncompressed" : "dist/uncompressed/",
"minified" : "dist/minified/",
"packaged" : "dist/packaged/"
"uncompressed" : "dist/elements/",
"compressed" : "dist/elements/",
"packaged" : "dist/packaged/",
"themes" : "dist/themes"
} }
}, },

176
gulpfile.js
View File

@ -8,16 +8,11 @@
*/ */
var var
gulp = require('gulp'),
gulp = require('gulp-help')(require('gulp')),
// read settings file // read settings file
config = require('./build.json'), config = require('./build.json'),
// formats comments in output
variableComments = /[\s\S]+\/\* End Config \*\//m,
largeComment = /(\/\*\*\*\*[\s\S]+?\*\/)/mg,
smallComment = /(\/\*---[\s\S]+?\*\/)/mg,
// shorthand // shorthand
base = config.base, base = config.base,
source = config.paths.source, source = config.paths.source,
@ -26,17 +21,19 @@ var
// required node components // required node components
del = require('del'), del = require('del'),
fs = require('fs'), fs = require('fs'),
path = require('path'),
// required gulp components // required gulp components
autoprefixer = require('gulp-autoprefixer'), autoprefixer = require('gulp-autoprefixer'),
batch = require('gulp-batch'),
concat = require('gulp-concat'), concat = require('gulp-concat'),
copy = require('gulp-copy'), copy = require('gulp-copy'),
csscomb = require('gulp-csscomb'), csscomb = require('gulp-csscomb'),
karma = require('gulp-karma'), karma = require('gulp-karma'),
less = require('gulp-less'), less = require('gulp-less'),
minifyCSS = require('gulp-minify-css'),
notify = require('gulp-notify'), notify = require('gulp-notify'),
plumber = require('gulp-plumber'), plumber = require('gulp-plumber'),
rename = require('gulp-rename'),
replace = require('gulp-replace'), replace = require('gulp-replace'),
sourcemaps = require('gulp-sourcemaps'), sourcemaps = require('gulp-sourcemaps'),
uglify = require('gulp-uglify'), uglify = require('gulp-uglify'),
@ -44,76 +41,85 @@ var
watch = require('gulp-watch'), watch = require('gulp-watch'),
settings = { settings = {
minify: {
processImport: false,
keepSpecialComments: 0
},
prefix: { 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 // 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 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 // cleans distribution files
gulp.task('clean dist', function(callback) {
gulp.task('clean', 'Clean dist folder', function(callback) {
del([ del([
config.output.compressed, config.output.compressed,
config.output.minified, 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 = util.replaceExtension(file.path, '.less');
path = path.replace(source.themes, source.definitions);
path = path.replace(source.site, source.definitions); path = path.replace(source.site, source.definitions);
console.log(path);
if( fs.existsSync(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(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(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)) .pipe(gulp.dest(output.uncompressed))
; ;
compressed = css
.pipe(minifyCSS(settings.minify))
.pipe(rename(settings.minCSS))
.pipe(gulp.dest(output.compressed))
;
} }
else { else {
console.log('Definition file not found', path); 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 */ /* 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) { watch('src/definitions/**/*.js', function (files, callback) {
gulp.start('library module changed', callback); gulp.start('library module changed', callback);
}); });
@ -177,6 +211,10 @@ gulp.task('watch definitions', function () {
// Build release // Build release
gulp.task('build release', function () { gulp.task('build release', function () {
// create RTL release
// create bower releases
}); });

9
package.json
View File

@ -7,7 +7,7 @@
"author": "Jack Lukic <jacklukic@gmail.com>", "author": "Jack Lukic <jacklukic@gmail.com>",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"test": "grunt test"
"test": "gulp test"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -25,16 +25,21 @@
"gulp-autoprefixer": "^1.0.1", "gulp-autoprefixer": "^1.0.1",
"gulp-batch": "^1.0.1", "gulp-batch": "^1.0.1",
"gulp-concat": "^2.4.1", "gulp-concat": "^2.4.1",
"gulp-concat-css": "^1.0.0",
"gulp-copy": "0.0.2", "gulp-copy": "0.0.2",
"gulp-csscomb": "^3.0.3", "gulp-csscomb": "^3.0.3",
"gulp-help": "^1.2.0",
"gulp-karma": "0.0.4", "gulp-karma": "0.0.4",
"gulp-less": "^1.3.6", "gulp-less": "^1.3.6",
"gulp-minify-css": "^0.3.10",
"gulp-notify": "^2.0.0", "gulp-notify": "^2.0.0",
"gulp-plumber": "^0.6.6", "gulp-plumber": "^0.6.6",
"gulp-rename": "^1.2.0",
"gulp-replace": "^0.4.0", "gulp-replace": "^0.4.0",
"gulp-sourcemaps": "^1.2.4", "gulp-sourcemaps": "^1.2.4",
"gulp-uglify": "^1.0.1", "gulp-uglify": "^1.0.1",
"gulp-util": "^3.0.1", "gulp-util": "^3.0.1",
"gulp-watch": "^1.1.0"
"gulp-watch": "^1.1.0",
"rtlcss": "^1.4.0"
} }
} }

2
src/themes/basic/elements/icon.variables
View File

@ -1,3 +1,5 @@
/*------------------- /*-------------------
Icon Variables Icon Variables
--------------------*/ --------------------*/
@fontPath : "../../themes/basic/assets/fonts";

14
src/themes/default/globals/site.variables
View File

@ -2,13 +2,6 @@
Site Settings Site Settings
*******************************/ *******************************/
/*-------------------
Paths
--------------------*/
@imagePath : "../../themes/packages/default/assets/images";
@fontPath : "../../themes/packages/default/assets/fonts";
/*------------------- /*-------------------
Fonts Fonts
--------------------*/ --------------------*/
@ -123,6 +116,13 @@
Power-User Power-User
*******************************/ *******************************/
/*-------------------
Paths
--------------------*/
@imagePath : "../../themes/default/assets/images";
@fontPath : "../../themes/default/assets/fonts";
/*------------------- /*-------------------
Icons Icons
--------------------*/ --------------------*/

3
src/themes/default/modules/tab.variables
View File

@ -6,7 +6,8 @@
@loadingMinHeight: 250px; @loadingMinHeight: 250px;
@loadingText: 'Loading...'; @loadingText: 'Loading...';
@loadingTextDistance: 50px; @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; @loadingTextColor: @lightTextColor;
@loadingAlign: center; @loadingAlign: center;

382
src/themes/flat/globals/site.variables
View File

@ -6,8 +6,8 @@
Paths Paths
--------------------*/ --------------------*/
@imagePath : "../../themes/packages/default/assets/images";
@fontPath : "../../themes/packages/default/assets/fonts";
@imagePath : "../../themes/default/assets/images";
@fontPath : "../../themes/default/assets/fonts";
/*------------------- /*-------------------
Fonts Fonts
@ -104,381 +104,3 @@
@largeMonitorBreakpoint : 1400px; @largeMonitorBreakpoint : 1400px;
@widescreenMonitorBreakpoint : 1900px; @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);
Write Preview
Loading…
Cancel
Save