Adds variables for labels, adds some new loader styles using css animations

RELEASE NOTES.md

@@ -1,6 +1,5 @@
 ## RELEASE NOTES
 
-<<<<<<< HEAD
 ### Version 1.0.0 - XX XX, 2014
 
 **Breaking Changes**
@@ -10,8 +9,10 @@
 - **Grid** - Divided and celled grids can now be inverted for dark backgrounds
 - **Grid** - Vertically divided grid now does not include left/right gutters in divider
 - **Grid** - Fixed page grid allows for fixed pixel size containers used with a grid instead of percentage
+- **Label** - Added tag label and empty circular label style
+- **Button** - Now has compact form, used for fitting into tight spaces
+- **Label** - Now has compact form, for fitting into tight spaces
 
-=======
 ### Version 0.13.0 - Feb 20, 2014
 
 **Enhancements**

server/documents/elements/label.html.eco

@@ -100,6 +100,13 @@ type        : 'UI Element'
       <img src="/images/demo/highres3.jpg">
     </div>
   </div>
+  <div class="clearing example">
+    <h4 class="ui header">Tag</h4>
+    <p>A label can appear as a tag</p>
+    <a class="ui tag label">New</a>
+    <a class="ui red tag label">Upcoming</a>
+    <a class="ui teal tag label">Featured</a>
+  </div>
 
   <div class="clearing example">
     <h4 class="ui header">Ribbon</h4>
@@ -182,27 +189,14 @@ type        : 'UI Element'
   <div class="example">
     <h4 class="ui header">Colors</h4>
     <p>A label can have different colors</p>
-    <a class="ui black label">
-      First
-    </a>
-    <a class="ui green label">
-      Fun
-    </a>
-    <a class="ui red label">
-      Happy
-    </a>
-    <a class="ui blue label">
-      Smart
-    </a>
-    <a class="ui orange label">
-      Radical
-    </a>
-    <a class="ui purple label">
-      Insane
-    </a>
-    <a class="ui teal label">
-      Exciting
-    </a>
+    <a class="ui black label">Black Label</a>
+    <a class="ui yellow label">Yellow Label</a>
+    <a class="ui green label">Green Label</a>
+    <a class="ui blue label">Blue Label</a>
+    <a class="ui orange label">Orange Label</a>
+    <a class="ui purple label">Purple Label</a>
+    <a class="ui red label">Red Label</a>
+    <a class="ui teal label">Teal Label</a>
   </div>
 
   <div class="example">
@@ -251,12 +245,12 @@ type        : 'UI Element'
     </a>
   </div>
   <div class="another example">
-    <div class="ui black circular label"></div>
-    <div class="ui green circular label"></div>
-    <div class="ui red circular label"></div>
-    <div class="ui blue circular label"></div>
-    <div class="ui purple circular label"></div>
-    <div class="ui teal circular label"></div>
+    <div class="ui black empty circular label"></div>
+    <div class="ui green empty circular label"></div>
+    <div class="ui red empty circular label"></div>
+    <div class="ui blue empty circular label"></div>
+    <div class="ui purple empty circular label"></div>
+    <div class="ui teal empty circular label"></div>
   </div>
 
   <div class="example">
@@ -365,6 +359,28 @@ type        : 'UI Element'
     </div>
   </div>
 
+  <div class="example">
+    <h4 class="ui header">Tag</h4>
+    <p>Labels can share tag formatting</p>
+    <div class="ui tag labels">
+      <a class="ui label">
+        $10.00
+      </a>
+      <a class="ui label">
+        $19.99
+      </a>
+      <a class="ui label">
+        $24.99
+      </a>
+      <a class="ui label">
+        $30.99
+      </a>
+      <a class="ui label">
+        $10.25
+      </a>
+    </div>
+  </div>
+
   <div class="example">
     <h4 class="ui header">Circular</h4>
     <p>Labels can share shapes</p>

server/documents/elements/loader.html.eco

@@ -22,6 +22,7 @@ type        : 'UI Element'
   <div class="example">
     <h4 class="ui header">Loader</h4>
     <p>A loader</p>
+    <div class="ui ignored info message">The default loader uses images, this ensures maximum compatability with other components.</div>
     <div class="ui ignored info message">Loaders by default are hidden unless inside of a dimmer.</div>
     <div class="ui segment">
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
@@ -31,6 +32,37 @@ type        : 'UI Element'
     </div>
   </div>
 
+  <h3 class="ui header">CSS Loaders</h3>
+
+  <div class="example">
+    <h4 class="ui header">Flipping Loader</h4>
+    <p>A loader can animate by flipping</p>
+    <div class="ui segment">
+      <div class="ui active dimmer">
+        <div class="ui flipping loader">
+          <div class="shape"></div>
+          Loading
+        </div>
+      </div>
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    </div>
+  </div>
+  <div class="another example">
+    <div class="ui segment">
+      <div class="ui active dimmer">
+        <div class="ui flipping circular loader">
+          <div class="shape"></div>
+          Loading
+        </div>
+      </div>
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
+    </div>
+  </div>
+
   <div class="example">
     <h4 class="ui header">Text Loader</h4>
     <p>A loader can contain text</p>

server/files/javascript/semantic.js

@@ -137,6 +137,10 @@ semantic.ready = function() {
             element : $themeDropdown.data('element')
           }
         ;
+        if(theme == 'default') {
+          variableURL = '/build/less/themes/{$theme}/{$type}s/{$element}.variables';
+          overrideURL = '/build/less/themes/{$theme}/{$type}s/{$element}.overrides';
+        }
         $themeDropdown
           .api({
             on       : 'now',
@@ -835,7 +839,7 @@ semantic.ready = function() {
       }
     })
   ;
-  $('body')
+/*  $('body')
     .waypoint({
       handler: function(direction) {
         if(direction == 'down') {
@@ -850,7 +854,7 @@ semantic.ready = function() {
       },
       offset: 'bottom-in-view'
      })
-  ;
+  ;*/
   $peek
     .waypoint('sticky', {
       offset     : 85,

server/files/stylesheets/semantic.css

@@ -427,6 +427,9 @@ body.guide .main.container > * {
   vertical-align: top;
   width: 100%;
 }
+#example .introduction .download.icon {
+  margin: 0em 0em 0em 0.5em;
+}
 #example .introduction h1 {
   margin-bottom: 0em;
 }

server/layouts/default.html.eco

@@ -32,8 +32,8 @@
   <link rel="stylesheet" type="text/css" href="/stylesheets/reset.css">
   <link rel="stylesheet" type="text/css" href="/stylesheets/library/basic.icon.css">
 
-  <link rel="stylesheet/less" type="text/css" href="/build/less/site.less" />
   <% if 'development' in @getEnvironments(): %>
+  <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/site.css">
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/icon.css">
 
   <link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/button.css">
@@ -77,6 +77,8 @@
   <link rel="stylesheet" type="text/css" class="ui" href="/build/packaged/css/semantic.min.css">
   <% end %>
 
+  <!-- <link rel="stylesheet/less" type="text/css" href="/build/less/site.less" /> -->
+
   <link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">
 
   <% if 'development' in @getEnvironments(): %>

server/partials/header.html.eco

@@ -34,7 +34,7 @@
         </div>
       </div>
       <% end %>
-      <div class="ui primary button">
+      <div class="ui secondary button">
         Download
         <i class="download icon"></i>
       </div>

src/elements/loader.less

@@ -9,6 +9,15 @@
  *
  */
 
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'loader';
+
+@import '../semantic.config';
+
 
 /*******************************
             Loader
@@ -19,15 +28,11 @@
 .ui.loader {
   display: none;
   position: absolute;
-  top: 50%;
-  left: 50%;
+  top: @loaderTopOffset;
+  left: @loaderLeftOffset;
   margin: 0px;
+  text-align: center;
   z-index: 1000;
-
-  -webkit-transform: translateX(-50%) translateY(-50%);
-  -moz-transform: translateX(-50%) translateY(-50%);
-  -o-transform: translateX(-50%) translateY(-50%);
-  -ms-transform: translateX(-50%) translateY(-50%);
   transform: translateX(-50%) translateY(-50%);
 }
 
@@ -35,10 +40,88 @@
   display: block;
 }
 
+.ui.dimmer .ui.loader,
+.ui.inverted.loader {
+  color: @loaderTextColor
+}
+
 /*******************************
              Types
 *******************************/
 
+/*--------------
+      CSS
+---------------*/
+
+/* Flipping */
+.ui.flipping.loader {
+  width: auto;
+  height: auto;
+  background-image: none !important;
+}
+.ui.flipping.loader .shape {
+  position: relative;
+  margin: 0em auto 1em;
+  color: transparent;
+  box-shadow: 0px 0px 0px 1px;
+  animation: loaderFlipping 1s infinite ease-in-out;
+  margin-bottom: 1em;
+  transform-style: preserve-3d;
+}
+.ui.flipping.loader .shape:before,
+.ui.flipping.loader .shape:after {
+  position: absolute;
+  content: '';
+  top: 0px;
+  left: 0px;
+  box-shadow: 0px 0px 0px 1px;
+  backface-visibility: hidden;
+}
+.ui.flipping.loader .shape:before {
+  background-color: @blue;
+  transform: rotateY(0deg);
+  z-index: 2;
+}
+.ui.flipping.loader .shape:after {
+  background-color: @red;
+  transform: rotateY(180deg);
+}
+
+/* Circular */
+.ui.flipping.circular.loader .shape,
+.ui.flipping.circular.loader .shape:before,
+.ui.flipping.circular.loader .shape:after {
+  border-radius: @circularRadius;
+}
+
+/* Sizes */
+.ui.mini.flipping.loader .shape,
+.ui.mini.flipping.loader .shape:before,
+.ui.mini.flipping.loader .shape:after {
+  width: @miniSize;
+  height: @miniSize;
+}
+.ui.flipping.loader .shape,
+.ui.flipping.loader .shape:before,
+.ui.flipping.loader .shape:after {
+  width: @mediumSize;
+  height: @mediumSize;
+}
+
+
+@keyframes loaderFlipping {
+  0% {
+    transform: perspective(6em) rotateX(0deg) rotateY(0deg);
+  }
+  50% {
+    transform: perspective(6em) rotateX(-180deg) rotateY(0deg);
+  }
+  100% {
+    transform: perspective(6em) rotateX(-180deg) rotateY(-180deg);
+  }
+}
+
+
 /*-------------------
         Text
 --------------------*/
@@ -51,24 +134,20 @@
 }
 
 .ui.mini.text.loader {
-  min-width: 16px;
-  padding-top: 2em;
-  font-size: 0.875em;
+  min-width: @miniSize;
+  padding-top: (@miniSize + @textDistance);
 }
 .ui.small.text.loader {
-  min-width: 24px;
-  padding-top: 2.5em;
-  font-size: 0.875em;
+  min-width: @smallSize;
+  padding-top: (@smallSize + @textDistance);
 }
 .ui.text.loader {
-  min-width: 32px;
-  font-size: 1em;
-  padding-top: 3em;
+  min-width: @mediumSize;
+  padding-top: (@mediumSize + @textDistance);
 }
 .ui.large.text.loader {
-  min-width: 64px;
-  padding-top: 5em;
-  font-size: 1.2em;
+  min-width: @largeSize;
+  padding-top: (@largeSize + @textDistance);
 }
 
 /*******************************
@@ -79,90 +158,89 @@
 .ui.loader.visible {
   display: block;
 }
-
 .ui.loader.disabled,
 .ui.loader.hidden {
   display: none;
 }
 
-
 /*******************************
             Variations
 *******************************/
 
+
 /*-------------------
-       Inverted
+        Sizes
 --------------------*/
 
-.ui.dimmer .ui.text.loader,
-.ui.inverted.text.loader {
-  color: rgba(255, 255, 255, 0.8);
-}
-.ui.inverted.dimmer .ui.text.loader {
-  color: rgba(0, 0, 0, 0.8);
-}
-
 /* Tiny Size */
-.ui.dimmer .mini.ui.loader,
-.ui.inverted .mini.ui.loader {
-  background-image: url(../images/loader-mini-inverted.gif);
+.ui.inverted.dimmer .ui.mini.loader,
+.ui.mini.loader {
+  width: @miniSize;
+  height: @miniSize;
+  font-size: @miniFontSize;
+  background-image: url(@miniLoaderPath);
 }
 
 /* Small Size */
-.ui.dimmer .small.ui.loader,
-.ui.inverted .small.ui.loader {
-  background-image: url(../images/loader-small-inverted.gif);
+.ui.inverted.dimmer .ui.small.loader,
+.ui.small.loader {
+  width: @smallSize;
+  height: @smallSize;
+  font-size: @smallFontSize;
+  background-image: url(@smallLoaderPath);
 }
 
-/* Standard Size */
-.ui.dimmer .ui.loader,
-.ui.inverted.loader  {
-  background-image: url(../images/loader-medium-inverted.gif);
+.ui.inverted.dimmer .ui.loader,
+.ui.loader {
+  width: @mediumSize;
+  height: @mediumSize;
+  font-size: @mediumFontSize;
+  background: url(@mediumLoaderPath) no-repeat;
+  background-position: 50% 0px;
 }
 
 /* Large Size */
-.ui.dimmer .large.ui.loader,
-.ui.inverted .large.ui.loader {
-  background-image: url(../images/loader-large-inverted.gif);
+.ui.inverted.dimmer .ui.loader.large,
+.ui.loader.large {
+  width: @largeSize;
+  height: @largeSize;
+  font-size: @largeFontSize;
+  background-image: url(@largeLoaderPath);
 }
 
+
 /*-------------------
-        Sizes
+       Inverted
 --------------------*/
 
+.ui.inverted.dimmer .ui.loader {
+  color: @invertedLoaderTextColor;
+}
+
 /* Tiny Size */
-.ui.inverted.dimmer .ui.mini.loader,
-.ui.mini.loader {
-  width: 16px;
-  height: 16px;
-  background-image: url(../images/loader-mini.gif);
+.ui.dimmer .mini.ui.loader,
+.ui.inverted .mini.ui.loader {
+  background-image: url(@miniInvertedLoaderPath);
 }
 
 /* Small Size */
-.ui.inverted.dimmer .ui.small.loader,
-.ui.small.loader {
-  width: 24px;
-  height: 24px;
-  background-image: url(../images/loader-small.gif);
+.ui.dimmer .small.ui.loader,
+.ui.inverted .small.ui.loader {
+  background-image: url(@smallInvertedLoaderPath);
 }
 
-.ui.inverted.dimmer .ui.loader,
-.ui.loader {
-  width: 32px;
-  height: 32px;
-  background: url(../images/loader-medium.gif) no-repeat;
-  background-position: 48% 0px;
+/* Standard Size */
+.ui.dimmer .ui.loader,
+.ui.inverted.loader  {
+  background-image: url(@mediumInvertedLoaderPath);
 }
 
 /* Large Size */
-.ui.inverted.dimmer .ui.loader.large,
-.ui.loader.large {
-  width: 64px;
-  height: 64px;
-  background-image: url(../images/loader-large.gif);
+.ui.dimmer .large.ui.loader,
+.ui.inverted .large.ui.loader {
+  background-image: url(@largeInvertedLoaderPath);
 }
 
-
 /*-------------------
        Inline
 --------------------*/
@@ -171,11 +249,6 @@
   position: static;
   vertical-align: middle;
   margin: 0em;
-
-  -webkit-transform: none;
-  -moz-transform: none;
-  -o-transform: none;
-  -ms-transform: none;
   transform: none;
 }
 

src/elements/segment.less

@@ -59,7 +59,7 @@
 
   background-color: transparent;
   border-radius: 0px;
-  box-shadow: 0px 1px 0px @borderColor;
+  box-shadow: 0px @segmentBorderWidth 0px @borderColor;
 }
 .ui.vertical.segment:first-child {
   padding-top: 0em;
@@ -72,7 +72,7 @@
 
   background-color: transparent;
   border-radius: 0px;
-  box-shadow: 1px 0px 0px @borderColor;
+  box-shadow: @segmentBorderWidth 0px 0px @borderColor;
 }
 .ui.horizontal.segment:first-child {
   padding-left: 0em;
@@ -163,7 +163,7 @@
   bottom: -3px;
   left: 0%;
 
-  border-top: 1px solid @borderColor;
+  border-top: @segmentBorderWidth solid @borderColor;
   background-color: @subtleTransparentBlack;
 
   width: 100%;

src/themes/_site/elements/label.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/_site/elements/label.variables

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

src/themes/_site/elements/loader.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/_site/elements/loader.variables

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

src/themes/default/elements/label.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/default/elements/label.variables

@@ -0,0 +1,119 @@
+/*-------------------
+    Globals Used
+--------------------*/
+
+// (Color Variables)
+// @transitionDuration
+// @transitionEasing
+
+/*-------------------
+      Standard
+--------------------*/
+
+@verticalMargin: -0.25em;
+@horizontalMargin: 0.125em;
+
+@backgroundColor: #E8E8E8;
+@backgroundImage: none;
+
+@labelTextColor: @textColor;
+
+@verticalPadding: 0.8em;
+@horizontalPadding: 0.8em;
+
+@borderRadius: 0.325em;
+
+@textTransform: uppercase;
+@fontWeight: normal;
+
+/*-------------------
+      Elements
+--------------------*/
+
+@linkOpacity: 0.8;
+
+@detailOpacity: 0.8;
+
+@detailMargin: 0.5em;
+@deleteMargin: 0.5em;
+
+/*-------------------
+        Types
+--------------------*/
+
+@imageLabelBackgroundColor: @backgroundColor;
+
+@imageLabelImageHeight: (1em + @verticalPadding * 2);
+@imageLabelBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+
+
+/*-------------------
+        States
+--------------------*/
+
+@labelHoverBackgroundColor: #E0E0E0;
+@labelHoverBackgroundImage: none;
+@labelHoverTextColor: @selectedTextColor;
+
+
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Tag */
+@tagCircleColor: #FFFFFF;
+@tagCircleSize: 0.5em;
+@tagHorizontalPadding: 1.5em;
+@tagCircleBoxShadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
+
+@tagTriangleLeftOffset: -0.82em;
+@tagTriangleTopOffset: 0.325em;
+@tagTriangleSize: 1.75em;
+
+/* Ribbon */
+@ribbonDistance: 2rem;
+@ribbonTriangleSize: 1.3em;
+@ribbonShadowColor: rgba(0, 0, 0, 0.15);
+
+/* Attached */
+@attachedSegmentPadding: 2.5em;
+@attachedVerticalPadding: 0.75em;
+@attachedHorizontalPadding: 1em;
+
+/* Corner */
+@cornerTriangleSize: 3em;
+@cornerTextWidth: 2.5em;
+
+@cornerTextSize: 0.7em;
+@cornerIconSize: 0.7em;
+
+@cornerTopOffset: 0.45em;
+@cornerLeftOffset: 0.75em;
+
+/* Horizontal */
+@horizontalLabelMinWidth: 3em;
+@horizontalLabelMargin: 0.5em;
+@horizontalLabelVerticalPadding: 0.4em;
+
+/* Circular Padding */
+@circularPadding: 0.5em;
+@circularMinSize: 2em;
+
+/* Pointing */
+@pointingTriangleSize: 0.6em;
+@pointingTriangleOffset: (@pointingTriangleSize / 2);
+
+/* Floating */
+@floatingTopOffset: -1em;
+@floatingLeftOffset: -1.5em;
+
+/*-------------------
+        Group
+--------------------*/
+
+/* Sizing */
+@small: 0.75rem;
+@medium: 0.8125rem;
+@large: 0.875rem;
+@huge: 1rem;

src/themes/default/elements/loader.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/default/elements/loader.variables

@@ -0,0 +1,57 @@
+/*-------------------
+    Globals Used
+--------------------*/
+
+// (Color Variables)
+// @transitionDuration
+// @transitionEasing
+
+/*-------------------
+      Standard
+--------------------*/
+
+@loaderTopOffset: 50%;
+@loaderLeftOffset: 50%;
+
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Image */
+@miniSize: 16px;
+@smallSize: 24px;
+@mediumSize: 32px;
+@largeSize: 64px;
+
+@textDistance: 15px;
+
+@miniFontSize: 0.8em;
+@smallFontSize: 0.875em;
+@mediumFontSize: 1em;
+@largeFontSize: 1.2em;
+
+@miniLoaderPath: "@{imagePath}/loader-mini.gif";
+@smallLoaderPath: "@{imagePath}/loader-small.gif";
+@mediumLoaderPath: "@{imagePath}/loader-medium.gif";
+@largeLoaderPath: "@{imagePath}/loader-large.gif";
+
+@miniInvertedLoaderPath: "@{imagePath}/loader-mini-inverted.gif";
+@smallInvertedLoaderPath: "@{imagePath}/loader-small-inverted.gif";
+@mediumInvertedLoaderPath: "@{imagePath}/loader-medium-inverted.gif";
+@largeInvertedLoaderPath: "@{imagePath}/loader-large-inverted.gif";
+
+/* Text */
+@loaderTextColor: @invertedTextColor;
+@invertedLoaderTextColor: @textColor;
+
+
+/*-------------------
+        States
+--------------------*/
+
+
+
+/*-------------------
+      Variations
+--------------------*/

src/themes/default/elements/segment.variables

@@ -3,19 +3,20 @@
 *******************************/
 
 /*-------------------
-       Segment 
+       Segment
 --------------------*/
 
-@boxShadow: 0px 0px 0px 1px @borderColor;
+@segmentBorderWidth: 1px;
+@boxShadow: 0px 0px 0px @segmentBorderWidth @borderColor;
 
 @verticalPadding: 1em;
 @horizontalPadding: 1em;
 
 @margin: 1em;
-@borderRadius: 5px;
+@borderRadius: 0.25em;
 
 /*-------------------
-       Coupling 
+       Coupling
 --------------------*/
 
 /* Page Grid Segment */

src/themes/packaged/default/elements/label.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/packaged/default/elements/label.variables

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/

src/themes/packaged/default/elements/loader.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/packaged/default/elements/loader.variables

@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/