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

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');
       }

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

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;
 }
 
 /*-------------------

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 */

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

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;

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

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,

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
 *******************************/

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

tasks/defaults.js

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