Browse Source

Adds new loading style to form, adds loading variation to segment

pull/1191/head
jlukic 10 years ago
parent
commit
947c25a1c3
11 changed files with 180 additions and 51 deletions
  1. 42
      gulpfile.js
  2. 60
      src/definitions/collections/form.less
  3. 9
      src/definitions/elements/button.less
  4. 4
      src/definitions/elements/list.less
  5. 61
      src/definitions/elements/segment.less
  6. 2
      src/definitions/globals/site.less
  7. 15
      src/themes/default/collections/form.variables
  8. 7
      src/themes/default/elements/button.variables
  9. 15
      src/themes/default/elements/segment.variables
  10. 12
      src/themes/default/globals/site.variables
  11. 4
      tasks/defaults.js

42
gulpfile.js

@ -52,17 +52,16 @@ var
settings = require('./tasks/gulp-settings'),
// local
runSetup = false,
overwrite = true,
// derived
config,
package,
// derived
base,
clean,
output,
source,
assetPaths,
componentGlob,
@ -94,6 +93,7 @@ var
getConfigValues = function() {
if(!config) {
runSetup = true;
config = defaults;
}
config = extend(true, {}, defaults, config);
@ -136,6 +136,7 @@ var
getConfigValues();
/*******************************
Tasks
*******************************/
@ -149,7 +150,7 @@ gulp.task('watch', 'Watch for site/theme changes (Default Task)', function () {
console.clear();
console.log('Watching source files');
if(!fs.existsSync(defaults.files.theme)) {
if(!fs.existsSync(config.files.theme)) {
console.error('Cant compile LESS. Run "grunt install" to create a theme config file');
return;
}
@ -175,13 +176,14 @@ gulp.task('watch', 'Watch for site/theme changes (Default Task)', function () {
// recompile only definition file
srcPath = util.replaceExtension(file.path, '.less');
srcPath = srcPath.replace(source.themes, source.definitions);
srcPath = srcPath.replace(config.regExp.themePath, source.definitions);
srcPath = srcPath.replace(source.site, source.definitions);
// get relative asset path (path returns wrong path? hardcoded)
// assetPaths.source = path.relative(srcPath, path.resolve(source.themes));
assetPaths.source = '../../themes';
if( fs.existsSync(srcPath) ) {
// unified css stream
@ -278,7 +280,7 @@ gulp.task('build', 'Builds all files from source', function(callback) {
console.info('Building Semantic');
if(!fs.existsSync(defaults.files.theme)) {
if(!fs.existsSync(config.files.theme)) {
console.error('Cant build LESS. Run "grunt install" to create a theme config file');
return;
}
@ -414,7 +416,7 @@ gulp.task('package compressed js', false, function() {
gulp.task('check install', false, function () {
setTimeout(function() {
if( !config || !fs.existsSync(defaults.files.site)) {
if( runSetup || !fs.existsSync(config.files.site)) {
console.log('No semantic.json file found. Starting install...');
gulp.start('install');
}
@ -432,18 +434,18 @@ gulp.task('install', 'Set-up project for first time', function () {
var
siteVariable = /@siteFolder .*\'(.*)/mg,
siteDestination = answers.site || defaults.folders.site,
siteDestination = answers.site || config.folders.site,
pathToSite = path.relative(path.resolve(defaults.folders.theme), path.resolve(siteDestination)),
pathToSite = path.relative(path.resolve(config.folders.theme), path.resolve(siteDestination)),
sitePathReplace = "@siteFolder : '" + pathToSite + "/';",
configExists = fs.existsSync(defaults.files.config),
themeConfigExists = fs.existsSync(defaults.files.theme),
configExists = fs.existsSync(config.files.config),
themeConfigExists = fs.existsSync(config.files.theme),
siteExists = fs.existsSync(siteDestination),
jsonSource = (configExists)
? defaults.files.config
: defaults.templates.config,
? config.files.config
: config.templates.config,
json = {
paths: {
source: {},
@ -469,22 +471,22 @@ gulp.task('install', 'Set-up project for first time', function () {
console.info('Creating site theme folder', siteDestination);
}
// copy recursively without overwrite
wrench.copyDirSyncRecursive(defaults.templates.site, siteDestination, settings.wrench.recursive);
wrench.copyDirSyncRecursive(config.templates.site, siteDestination, settings.wrench.recursive);
// adjust less variable for site folder location
console.info('Adjusting @siteFolder', sitePathReplace);
if(themeConfigExists) {
gulp.src(defaults.files.site)
gulp.src(config.files.site)
.pipe(replace(siteVariable, sitePathReplace))
.pipe(gulp.dest(defaults.folders.theme))
.pipe(gulp.dest(config.folders.theme))
;
}
else {
console.info('Creating src/theme.config (LESS config)');
gulp.src(defaults.templates.theme)
gulp.src(config.templates.theme)
.pipe(rename({ extname : '' }))
.pipe(replace(siteVariable, sitePathReplace))
.pipe(gulp.dest(defaults.folders.theme))
.pipe(gulp.dest(config.folders.theme))
;
}
@ -539,10 +541,10 @@ gulp.task('install', 'Set-up project for first time', function () {
}))
.pipe(prompt.prompt(questions.cleanup, function(answers) {
if(answers.cleanup == 'yes') {
del(defaults.setupFiles);
del(config.setupFiles);
}
if(answers.build == 'yes') {
config = require(defaults.files.config);
config = require(config.files.config);
getConfigValues();
gulp.start('build');
}

60
src/definitions/collections/form.less

@ -454,26 +454,63 @@
}
/*--------------------
Loading State
---------------------*/
/*--------------
Loading
---------------*/
/* On Form */
.ui.form.loading {
.ui.loading.form {
position: relative;
}
.ui.form.loading:after {
cursor: default;
point-events: none;
text-shadow: none !important;
color: transparent !important;
transition: all 0s linear;
z-index: 100;
}
.ui.loading.form:before {
position: absolute;
content: '';
top: 0%;
left: 0%;
content: '';
background: @loaderDimmerColor;
width: 100%;
height: 100%;
background: @formLoaderDimmerColor url(@formLoaderPath) no-repeat @formLoaderPosition;
z-index: @loaderDimmerZIndex;
}
.ui.loading.form:after {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: @loaderMargin;
width: @loaderSize;
height: @loaderSize;
animation: form-spin @loaderSpeed linear;
animation-iteration-count: infinite;
border-radius: @circularRadius;
border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;
border-style: solid;
border-width: @loaderLineWidth;
box-shadow: 0px 0px 0px 1px transparent;
visibility: visible;
z-index: @loaderLineZIndex;
}
@keyframes form-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*******************************
Element Types
*******************************/
@ -510,9 +547,6 @@
.ui.inverted.form .ui.checkbox .box {
color: @invertedLabelColor;
}
.ui.inverted.form.loading:after {
background: @formInvertedLoaderDimmerColor url(@formInvertedLoaderPath) no-repeat @formLoaderPosition;
}
/*--------------------
Field Groups

9
src/definitions/elements/button.less

@ -148,7 +148,7 @@
height: @loaderSize;
border-radius: @circularRadius;
border: @loaderLineWidth solid @loaderFillColor;
border: @loaderLineWidth solid @invertedLoaderFillColor;
}
.ui.loading.button:after {
position: absolute;
@ -165,7 +165,7 @@
border-radius: @circularRadius;
border-color: @loaderLineColor transparent transparent;
border-color: @invertedLoaderLineColor transparent transparent;
border-style: solid;
border-width: @loaderLineWidth;
@ -185,8 +185,11 @@
}
}
.ui.basic.loading.button:not(.inverted):before {
border-color-top: @loaderFillColor;
}
.ui.basic.loading.button:not(.inverted):after {
border-color: @invertedLoaderLineColor transparent transparent;
border-color-top: @loaderLineColor;
}
/*-------------------

4
src/definitions/elements/list.less

@ -177,11 +177,11 @@ ol.ui.list ol,
.ui.list .list > a.item,
.ui.list > a.item {
cursor: pointer;
color: @itemLinkColor !important;
color: @itemLinkColor;
}
.ui.list .list > a.item:hover,
.ui.list > a.item:hover {
color: @itemLinkHoverColor !important;
color: @itemLinkHoverColor;
}
/* Linked Item Icons */

61
src/definitions/elements/segment.less

@ -246,11 +246,72 @@
States
*******************************/
/*--------------
Disabled
---------------*/
.ui.disabled.segment {
opacity: @disabledOpacity;
color: @disabledTextColor;
}
/*--------------
Loading
---------------*/
.ui.loading.segment {
position: relative;
cursor: default;
point-events: none;
text-shadow: none !important;
color: transparent !important;
transition: all 0s linear;
z-index: 100;
}
.ui.loading.segment:before {
position: absolute;
content: '';
top: 0%;
left: 0%;
background: @loaderDimmerColor;
width: 100%;
height: 100%;
border-radius: @borderRadius;
z-index: @loaderDimmerZIndex;
}
.ui.loading.segment:after {
position: absolute;
content: '';
top: 50%;
left: 50%;
margin: @loaderMargin;
width: @loaderSize;
height: @loaderSize;
animation: segment-spin @loaderSpeed linear;
animation-iteration-count: infinite;
border-radius: @circularRadius;
border-color: @loaderLineColor @loaderFillColor @loaderFillColor @loaderFillColor;
border-style: solid;
border-width: @loaderLineWidth;
box-shadow: 0px 0px 0px 1px transparent;
visibility: visible;
z-index: @loaderLineZIndex;
}
@keyframes segment-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*******************************
Variations

2
src/definitions/globals/site.less

@ -33,6 +33,7 @@
html,
body {
height: 100%;
font-size: @fontSize;
font-smoothing: @fontSmoothing;
}
@ -44,7 +45,6 @@ body {
background: @pageBackground;
font-family: @pageFont;
font-size: @fontSize;
line-height: @lineHeight;
color: @textColor;
overflow-x: @pageOverflowX;

15
src/themes/default/collections/form.variables

@ -133,11 +133,16 @@
@inputErrorPlaceholderColor: lighten(@formErrorColor, 10);
@inputErrorPlaceholderFocusColor: lighten(@formErrorColor, 5);
/* Loading */
@formLoaderDimmerColor: rgba(255, 255, 255, 0.6);
@formLoaderPath: "@{imagePath}/loader-large.gif";
@formLoaderPosition: 50% 50%;
/* Loading Dimmer */
@loaderDimmerColor: rgba(255, 255, 255, 0.8);
@loaderDimmerZIndex: 100;
/* Loading Spinner */
@loaderSize: 3em;
@loaderOffset: -(@loaderSize / 2);
@loaderMargin: @loaderOffset 0em 0em @loaderOffset;
@loaderLineZIndex: 101;
/*-------------------
Types
@ -149,8 +154,6 @@
/* Inverted */
@invertedLabelColor: @invertedTextColor;
@formInvertedLoaderPath: "@{imagePath}/loader-large-inverted.gif";
@formInvertedLoaderDimmerColor: rgba(0, 0, 0, 0.8);
/*-------------------
Variations

7
src/themes/default/elements/button.variables

@ -51,12 +51,7 @@
@loaderSize: 1.2857em;
@loaderOffset: -(@loaderSize / 2);
@loaderMargin: @loaderOffset 0em 0em @loaderOffset;
@loaderLineWidth: 3px;
@loaderSpeed: 0.75s;
@loaderFillColor: rgba(0, 0, 0, 0.15);
@loaderLineColor: rgba(255, 255, 255, 0.8);
@invertedLoaderLineColor: @darkGrey;
@invertedLoaderFillColor: rgba(0, 0, 0, 0.15);
@transition:
opacity 0.1s @transitionEasing,

15
src/themes/default/elements/segment.variables

@ -29,6 +29,21 @@
@pageGridMargin: (2 * @verticalPadding);
/*******************************
States
*******************************/
/* Loading Dimmer */
@loaderDimmerColor: rgba(255, 255, 255, 0.8);
@loaderDimmerZIndex: 100;
/* Loading Spinner */
@loaderSize: 3em;
@loaderOffset: -(@loaderSize / 2);
@loaderMargin: @loaderOffset 0em 0em @loaderOffset;
@loaderLineZIndex: 101;
/*******************************
Variations
*******************************/

12
src/themes/default/globals/site.variables

@ -78,6 +78,18 @@
@transparentWhite : rgba(255, 255, 255, 0.05);
@strongTransparentWhite : rgba(255, 255, 255, 0.07);
/*-------------------
Loader
--------------------*/
@loaderSpeed: 0.75s;
@loaderLineWidth: 3px;
@loaderFillColor: rgba(0, 0, 0, 0.1);
@loaderLineColor: rgba(0, 0, 0, 0.3);
@invertedLoaderFillColor: rgba(255, 255, 255, 0.15);
@invertedLoaderLineColor: rgba(255, 255, 255, 0.8);
/*-------------------
Accents

4
tasks/defaults.js

@ -26,6 +26,10 @@ module.exports = {
theme : './src/theme.config.example'
},
regExp: {
themeRoot: /.*\/themes\/.*?\//mg
},
// folder pathsr
folders: {
config : './',

Loading…
Cancel
Save