+
Download
diff --git a/src/elements/label.less b/src/elements/label.less
index 2a5059ea2..30c4a889f 100755
--- a/src/elements/label.less
+++ b/src/elements/label.less
@@ -9,6 +9,16 @@
*
*/
+/*******************************
+ Theme
+*******************************/
+
+@type : 'element';
+@element : 'label';
+
+@import '../semantic.config';
+
+
/*******************************
Label
*******************************/
@@ -16,39 +26,23 @@
.ui.label {
display: inline-block;
vertical-align: middle;
+ line-height: 1;
- margin: -0.25em 0.25em 0em;
+ margin: @verticalMargin @horizontalMargin;
- background-color: #E8E8E8;
- border-color: #E8E8E8;
+ background-color: @backgroundColor;
+ border-color: @backgroundColor;
- padding: 0.5em 0.8em;
- color: rgba(0, 0, 0, 0.65);
+ background-image: @backgroundImage;
- text-transform: uppercase;
- font-weight: normal;
+ padding: @verticalPadding @horizontalPadding;
+ color: @labelTextColor;
- -webkit-border-radius: 0.325em;
- -moz-border-radius: 0.325em;
- border-radius: 0.325em;
+ text-transform: @textTransform;
+ font-weight: @fontWeight;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- -ms-box-sizing: border-box;
+ border-radius: @borderRadius;
box-sizing: border-box;
-
- -webkit-transition:
- background 0.1s linear
- ;
- -moz-transition:
- background 0.1s linear
- ;
- -o-transition:
- background 0.1s linear
- ;
- -ms-transition:
- background 0.1s linear
- ;
transition:
background 0.1s linear
;
@@ -71,7 +65,7 @@ a.ui.label {
.ui.label a {
cursor: pointer;
color: inherit;
- opacity: 0.8;
+ opacity: @linkOpacity;
transition: 0.2s opacity ease;
}
.ui.label a:hover {
@@ -81,9 +75,9 @@ a.ui.label {
/* Detail */
.ui.label .detail {
display: inline-block;
- margin-left: 0.5em;
+ margin-left: @detailMargin;
font-weight: bold;
- opacity: 0.8;
+ opacity: @detailOpacity;
}
/* Icon */
@@ -94,27 +88,15 @@ a.ui.label {
/* Removable label */
.ui.label .delete.icon {
cursor: pointer;
- margin: 0em 0em 0em 0.5em;
- opacity: 0.7;
-
- -webkit-transition:
- background 0.1s linear
- ;
- -moz-transition:
- background 0.1s linear
- ;
- -o-transition:
- background 0.1s linear
- ;
- -ms-transition:
- background 0.1s linear
- ;
+ margin-right: 0em;
+ margin-left: @deleteMargin;
+ opacity: @linkOpacity;
transition:
background 0.1s linear
;
}
.ui.label .delete.icon:hover {
- opacity: 0.99;
+ opacity: 1;
}
@@ -124,11 +106,11 @@ a.ui.label {
/* Padding on next content after a label */
.ui.segment > .attached.label:first-child + * {
- margin-top: 2.5em;
+ margin-top: @attachedSegmentPadding;
}
.ui.segment > .bottom.attached.label:first-child ~ :last-child {
margin-top: 0em;
- margin-bottom: 2.5em;
+ margin-bottom: @attachedSegmentPadding;
}
@@ -137,30 +119,25 @@ a.ui.label {
*******************************/
.ui.image.label {
+ background-color: @imageLabelBackgroundColor;
width: auto !important;
margin-top: 0em;
margin-bottom: 0em;
- padding-top: 0.4em;
- padding-bottom: 0.4em;
+ padding-top: @verticalPadding;
+ padding-bottom: @verticalPadding;
- line-height: 1.5em;
vertical-align: baseline;
text-transform: none;
- -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
- -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
- box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+ box-shadow: @imageLabelBoxShadow;
}
.ui.image.label img {
display: inline-block;
- height: 2.25em;
- margin: -0.4em 0.8em -0.4em -0.8em;
+ height: @imageLabelImageHeight;
+ margin: -@verticalPadding @horizontalPadding -@verticalPadding -@horizontalPadding;
vertical-align: top;
-
- -moz-border-radius: 0.325em 0em 0em 0.325em;
- -webkit-border-radius: 0.325em 0em 0em 0.325em;
- border-radius: 0.325em 0em 0em 0.325em;
+ border-radius: @borderRadius 0em 0em @borderRadius;
}
/*******************************
@@ -182,14 +159,17 @@ a.ui.label {
a.ui.labels .label:hover,
a.ui.label:hover {
- background-color: #E0E0E0;
- border-color: #E0E0E0;
- color: rgba(0, 0, 0, 0.7);
+ background-color: @labelHoverBackgroundColor;
+ border-color: @labelHoverBackgroundColor;
+
+ background-image: @labelHoverBackgroundImage;
+ color: @labelHoverTextColor;
}
.ui.labels a.label:hover:before,
a.ui.label:hover:before {
- background-color: #E0E0E0;
- color: rgba(0, 0, 0, 0.7);
+ background-color: @labelHoverBackgroundColor;
+ background-image: @labelHoverBackgroundImage;
+ color: @labelHoverTextColor;
}
/*-------------------
@@ -225,41 +205,25 @@ a.ui.label:hover:before {
.ui.tag.label {
margin-left: 1em;
position: relative;
- padding: 0.33em 1.3em 0.33em 1.4em;
+ padding-left: @tagHorizontalPadding;
+ padding-right: @tagHorizontalPadding;
- -webkit-border-radius: 0px 3px 3px 0px;
- -moz-border-radius: 0px 3px 3px 0px;
- border-radius: 0px 3px 3px 0px;
+ border-radius: 0em @borderRadius @borderRadius 0em;
}
.ui.tag.labels .label:before,
.ui.tag.label:before {
position: absolute;
- top: 0.3em;
- left: 0.3em;
+ top: @tagTriangleTopOffset;
+ left: @tagTriangleLeftOffset;
content: '';
- margin-left: -1em;
- background-image: none;
+ background-color: @backgroundColor;
+ background-image: @backgroundImage;
- width: 1.5em;
- height: 1.5em;
+ width: @tagTriangleSize;
+ height: @tagTriangleSize;
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
transform: rotate(45deg);
-
- -webkit-transition:
- background 0.1s linear
- ;
- -moz-transition:
- background 0.1s linear
- ;
- -o-transition:
- background 0.1s linear
- ;
- -ms-transition:
- background 0.1s linear
- ;
transition:
background 0.1s linear
;
@@ -271,20 +235,15 @@ a.ui.label:hover:before {
position: absolute;
content: '';
top: 50%;
- left: -0.25em;
+ left: -(@tagCircleSize / 2);
- margin-top: -0.3em;
- background-color: #FFFFFF;
- width: 0.55em;
- height: 0.55em;
+ margin-top: -(@tagCircleSize / 2);
+ background-color: @tagCircleColor;
+ width: @tagCircleSize;
+ height: @tagCircleSize;
- -webkit-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
- -moz-box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
- box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
-
- -moz-border-radius: 100px 100px 100px 100px;
- -webkit-border-radius: 100px 100px 100px 100px;
- border-radius: 100px 100px 100px 100px;
+ box-shadow: @tagCircleBoxShadow;
+ border-radius: @circularRadius;
}
/*-------------------
Ribbon
@@ -292,14 +251,13 @@ a.ui.label:hover:before {
.ui.ribbon.label {
position: relative;
- margin: 0em 0.2em;
- left: -2rem;
- padding-left: 2rem;
- -webkit-border-radius: 0px 4px 4px 0px;
- -moz-border-radius: 0px 4px 4px 0px;
- border-radius: 0px 4px 4px 0px;
+ margin: 0em;
+ left: -@ribbonDistance;
+ padding-left: @ribbonDistance;
- border-color: rgba(0, 0, 0, 0.15);
+ border-radius: 0em @borderRadius @borderRadius 0em;
+
+ border-color: @ribbonShadowColor;
}
.ui.ribbon.label:after {
@@ -310,10 +268,10 @@ a.ui.label:hover:before {
left: 0%;
border-top: 0em solid transparent;
- border-right-width: 1em;
+ border-right-width: @ribbonTriangleSize;
border-right-color: inherit;
border-right-style: solid;
- border-bottom: 1em solid transparent;
+ border-bottom: @ribbonTriangleSize solid transparent;
border-left: 0em solid transparent;
width: 0em;
@@ -332,47 +290,34 @@ a.ui.label:hover:before {
top: 0em;
left: 0em;
- padding: 0.75em 1em;
+ padding: @attachedVerticalPadding @attachedHorizontalPadding;
- -webkit-border-radius: 4px 4px 0em 0em;
- -moz-border-radius: 4px 4px 0em 0em;
- border-radius: 4px 4px 0em 0em;
+ border-radius: @borderRadius @borderRadius 0em 0em;
}
.ui.bottom.attached.label {
top: auto;
bottom: 0em;
-
- -webkit-border-radius: 0em 0em 4px 4px;
- -moz-border-radius: 0em 0em 4px 4px;
- border-radius: 0em 0em 4px 4px;
+ border-radius: 0em 0em @borderRadius @borderRadius;
}
.ui.top.left.attached.label {
width: auto;
margin-top: 0em !important;
-
- -webkit-border-radius: 4px 0em 4px 0em;
- -moz-border-radius: 4px 0em 4px 0em;
- border-radius: 4px 0em 4px 0em;
+ border-radius: @borderRadius 0em @borderRadius 0em;
}
.ui.top.right.attached.label {
width: auto;
left: auto;
right: 0em;
-
- -webkit-border-radius: 0em 4px 0em 4px;
- -moz-border-radius: 0em 4px 0em 4px;
- border-radius: 0em 4px 0em 4px;
+ border-radius: 0em @borderRadius 0em @borderRadius;
}
.ui.bottom.left.attached.label {
width: auto;
top: auto;
bottom: 0em;
- -webkit-border-radius: 4px 0em 0em 4px;
- -moz-border-radius: 4px 0em 0em 4px;
- border-radius: 4px 0em 0em 4px;
+ border-radius: @borderRadius 0em 0em @borderRadius;
}
.ui.bottom.right.attached.label {
top: auto;
@@ -380,9 +325,7 @@ a.ui.label:hover:before {
left: auto;
right: 0em;
width: auto;
- -webkit-border-radius: 4px 0em 4px 0em;
- -moz-border-radius: 4px 0em 4px 0em;
- border-radius: 4px 0em 4px 0em;
+ border-radius: @borderRadius 0em @borderRadius 0em;
}
/*-------------------
@@ -397,16 +340,11 @@ a.ui.label:hover:before {
z-index: 10;
margin: 0em;
- width: 3em;
- height: 3em;
+ width: @cornerTriangleSize;
+ height: @cornerTriangleSize;
padding: 0em;
text-align: center;
-
- -webkit-transition: color 0.2s ease;
- -moz-transition: color 0.2s ease;
- -o-transition: color 0.2s ease;
- -ms-transition: color 0.2s ease;
transition: color 0.2s ease;
}
.ui.corner.label:after {
@@ -420,46 +358,68 @@ a.ui.label:hover:before {
height: 0em;
border-top: 0em solid transparent;
- border-right: 3em solid transparent;
- border-bottom: 3em solid transparent;
+ border-right: @cornerTriangleSize solid transparent;
+ border-bottom: @cornerTriangleSize solid transparent;
border-left: 0em solid transparent;
border-right-color: inherit;
-
- -webkit-transition: border-color 0.2s ease;
- -moz-transition: border-color 0.2s ease;
- -o-transition: border-color 0.2s ease;
- -ms-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
.ui.corner.label .icon {
- font-size: 0.875em;
- margin: 0.5em 0em 0em 1.25em;
+ position: relative;
+ top: @cornerTopOffset;
+ left: @cornerLeftOffset;
+
+ font-size: @cornerIconSize;
+ margin: 0em;
}
.ui.corner.label .text {
display: inline-block;
- font-weight: bold;
- margin: 0.5em 0em 0em 1em;
- width: 2.5em;
- font-size: 0.875em;
+ position: relative;
+ top: @cornerTopOffset;
+ left: @cornerLeftOffset;
- text-align: center;
+ margin: 0em;
+ width: @cornerTextWidth;
+ font-size: @cornerTextSize;
+ font-weight: bold;
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
+ text-align: center;
transform: rotate(45deg);
}
+/* Left Corner */
+.ui.left.corner.label,
+.ui.left.corner.label:after {
+ right: auto;
+ left: 0em;
+}
+.ui.left.corner.label:after {
+ border-top: @cornerTriangleSize solid transparent;
+ border-right: @cornerTriangleSize solid transparent;
+ border-bottom: 0em solid transparent;
+ border-left: 0em solid transparent;
+
+ border-top-color: inherit;
+}
+.ui.left.corner.label .icon {
+ left: -@cornerLeftOffset;
+}
+.ui.left.corner.label .text {
+ left: -@cornerLeftOffset;
+ transform: rotate(-45deg);
+}
+
/* Coupling */
.ui.rounded.image > .ui.corner.label,
.ui.input > .ui.corner.label,
.ui.segment > .ui.corner.label {
overflow: hidden;
}
+
+/* Corner Segment Label */
.ui.segment > .ui.corner.label {
top: -1px;
right: -1px;
@@ -468,6 +428,8 @@ a.ui.label:hover:before {
right: auto;
left: -1px;
}
+
+/* Corner Input Label */
.ui.input > .ui.corner.label{
top: 1px;
right: 1px;
@@ -478,34 +440,6 @@ a.ui.label:hover:before {
}
-
-/* Left Corner */
-.ui.left.corner.label,
-.ui.left.corner.label:after {
- right: auto;
- left: 0em;
-}
-.ui.left.corner.label:after {
- border-top: 3em solid transparent;
- border-right: 3em solid transparent;
- border-bottom: 0em solid transparent;
- border-left: 0em solid transparent;
-
- border-top-color: inherit;
-}
-.ui.left.corner.label .icon {
- margin: 0.5em 0em 0em -1em;
-}
-.ui.left.corner.label .text {
- margin: 0.5em 0em 0em -1em;
- -webkit-transform: rotate(-45deg);
- -moz-transform: rotate(-45deg);
- -o-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg);
-}
-
-
/* Hover */
.ui.corner.label:hover {
background-color: transparent;
@@ -519,9 +453,6 @@ a.ui.label:hover:before {
.ui.label.fluid,
.ui.fluid.labels > .label {
width: 100%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- -ms-box-sizing: border-box;
box-sizing: border-box;
}
@@ -531,7 +462,7 @@ a.ui.label:hover:before {
.ui.inverted.labels .label,
.ui.inverted.label {
- color: #FFFFFF !important;
+ color: @invertedTextColor !important;
}
/*-------------------
@@ -541,251 +472,287 @@ a.ui.label:hover:before {
/*--- Black ---*/
.ui.black.labels .label,
.ui.black.label {
- background-color: #5C6166 !important;
- border-color: #5C6166 !important;
- color: #FFFFFF !important;
+ background-color: @black !important;
+ border-color: @black !important;
+ color: @invertedTextColor !important;
}
.ui.labels .black.label:before,
.ui.black.labels .label:before,
.ui.black.label:before {
- background-color: #5C6166 !important;
+ background-color: @black !important;
}
-/* Hover */
a.ui.black.labels .label:hover,
a.ui.black.label:hover {
- background-color: #333333 !important;
- border-color: #333333 !important;
+ background-color: @blackHover !important;
+ border-color: @blackHover !important;
}
.ui.labels a.black.label:hover:before,
.ui.black.labels a.label:hover:before,
a.ui.black.label:hover:before {
- background-color: #333333 !important;
+ background-color: @blackHover !important;
}
-
-/* Corner */
.ui.black.corner.label,
.ui.black.corner.label:hover {
background-color: transparent !important;
}
-/* Ribbon */
.ui.black.ribbon.label {
- border-color: #333333 !important;
+ border-color: @blackHover !important;
}
+/*--- Blue ---*/
+.ui.blue.labels .label,
+.ui.blue.label {
+ background-color: @blue !important;
+ border-color: @blue !important;
+ color: @invertedTextColor !important;
+}
+.ui.labels .blue.label:before,
+.ui.blue.labels .label:before,
+.ui.blue.label:before {
+ background-color: @blue !important;
+}
+a.ui.blue.labels .label:hover,
+.ui.blue.labels a.label:hover,
+a.ui.blue.label:hover {
+ background-color: @blueHover !important;
+ border-color: @blueHover !important;
+ color: @invertedTextColor !important;
+}
+.ui.labels a.blue.label:hover:before,
+.ui.blue.labels a.label:hover:before,
+a.ui.blue.label:hover:before {
+ background-color: @blueHover !important;
+}
+.ui.blue.corner.label,
+.ui.blue.corner.label:hover {
+ background-color: transparent !important;
+}
+.ui.blue.ribbon.label {
+ border-color: @blueHover !important;
+}
/*--- Green ---*/
.ui.green.labels .label,
.ui.green.label {
- background-color: #A1CF64 !important;
- border-color: #A1CF64 !important;
- color: #FFFFFF !important;
+ background-color: @green !important;
+ border-color: @green !important;
+ color: @invertedTextColor !important;
}
.ui.labels .green.label:before,
.ui.green.labels .label:before,
.ui.green.label:before {
- background-color: #A1CF64 !important;
+ background-color: @green !important;
}
-/* Hover */
a.ui.green.labels .label:hover,
a.ui.green.label:hover {
- background-color: #89B84C !important;
- border-color: #89B84C !important;
+ background-color: @greenHover !important;
+ border-color: @greenHover !important;
}
.ui.labels a.green.label:hover:before,
.ui.green.labels a.label:hover:before,
a.ui.green.label:hover:before {
- background-color: #89B84C !important;
+ background-color: @greenHover !important;
}
-/* Corner */
.ui.green.corner.label,
.ui.green.corner.label:hover {
background-color: transparent !important;
}
-/* Ribbon */
.ui.green.ribbon.label {
- border-color: #89B84C !important;
+ border-color: @greenHover !important;
}
-
-/*--- Red ---*/
-.ui.red.labels .label,
-.ui.red.label {
- background-color: #D95C5C !important;
- border-color: #D95C5C !important;
- color: #FFFFFF !important;
-}
-.ui.labels .red.label:before,
-.ui.red.labels .label:before,
-.ui.red.label:before {
- background-color: #D95C5C !important;
-}
-/* Corner */
-.ui.red.corner.label,
-.ui.red.corner.label:hover {
- background-color: transparent !important;
-}
-
-/* Hover */
-a.ui.red.labels .label:hover,
-a.ui.red.label:hover{
- background-color: #DE3859 !important;
- border-color: #DE3859 !important;
- color: #FFFFFF !important;
-}
-.ui.labels a.red.label:hover:before,
-.ui.red.labels a.label:hover:before,
-a.ui.red.label:hover:before {
- background-color: #DE3859 !important;
-}
-/* Ribbon */
-.ui.red.ribbon.label {
- border-color: #DE3859 !important;
+/*--- Orange ---*/
+.ui.orange.labels .label,
+.ui.orange.label {
+ background-color: @orange !important;
+ border-color: @orange !important;
+ color: @invertedTextColor !important;
}
-
-
-/*--- Blue ---*/
-.ui.blue.labels .label,
-.ui.blue.label {
- background-color: #6ECFF5 !important;
- border-color: #6ECFF5 !important;
- color: #FFFFFF !important;
+.ui.labels .orange.label:before,
+.ui.orange.labels .label:before,
+.ui.orange.label:before {
+ background-color: @orange !important;
}
-.ui.labels .blue.label:before,
-.ui.blue.labels .label:before,
-.ui.blue.label:before {
- background-color: #6ECFF5 !important;
+a.ui.orange.labels .label:hover,
+.ui.orange.labels a.label:hover,
+a.ui.orange.label:hover {
+ background-color: @orangeHover !important;
+ border-color: @orangeHover !important;
+ color: @invertedTextColor !important;
}
-/* Hover */
-a.ui.blue.labels .label:hover,
-.ui.blue.labels a.label:hover,
-a.ui.blue.label:hover {
- background-color: #1AB8F3 !important;
- border-color: #1AB8F3 !important;
- color: #FFFFFF !important;
+.ui.labels a.orange.label:hover:before,
+.ui.orange.labels a.label:hover:before,
+a.ui.orange.label:hover:before {
+ background-color: @orangeHover !important;
}
-.ui.labels a.blue.label:hover:before,
-.ui.blue.labels a.label:hover:before,
-a.ui.blue.label:hover:before {
- background-color: #1AB8F3 !important;
+.ui.orange.corner.label,
+.ui.orange.corner.label:hover {
+ background-color: transparent !important;
}
-/* Corner */
-.ui.blue.corner.label,
-.ui.blue.corner.label:hover {
+.ui.orange.ribbon.label {
+ border-color: @orangeHover !important;
+}
+
+/*--- Pink ---*/
+.ui.pink.labels .label,
+.ui.pink.label {
+ background-color: @pink !important;
+ border-color: @pink !important;
+ color: @invertedTextColor !important;
+}
+.ui.labels .pink.label:before,
+.ui.pink.labels .label:before,
+.ui.pink.label:before {
+ background-color: @pink !important;
+}
+a.ui.pink.labels .label:hover,
+.ui.pink.labels a.label:hover,
+a.ui.pink.label:hover {
+ background-color: @pinkHover !important;
+ border-color: @pinkHover !important;
+ color: @invertedTextColor !important;
+}
+.ui.labels a.pink.label:hover:before,
+.ui.pink.labels a.label:hover:before,
+a.ui.pink.label:hover:before {
+ background-color: @pinkHover !important;
+}
+.ui.pink.corner.label,
+.ui.pink.corner.label:hover {
background-color: transparent !important;
}
-/* Ribbon */
-.ui.blue.ribbon.label {
- border-color: #1AB8F3 !important;
+.ui.pink.ribbon.label {
+ border-color: @pinkHover !important;
}
/*--- Purple ---*/
.ui.purple.labels .label,
.ui.purple.label {
- background-color: #564F8A !important;
- border-color: #564F8A !important;
- color: #FFFFFF !important;
+ background-color: @purple !important;
+ border-color: @purple !important;
+ color: @invertedTextColor !important;
}
.ui.labels .purple.label:before,
.ui.purple.labels .label:before,
.ui.purple.label:before {
- background-color: #564F8A !important;
+ background-color: @purple !important;
}
-/* Hover */
a.ui.purple.labels .label:hover,
.ui.purple.labels a.label:hover,
a.ui.purple.label:hover {
- background-color: #3E3773 !important;
- border-color: #3E3773 !important;
- color: #FFFFFF !important;
+ background-color: @purpleHover !important;
+ border-color: @purpleHover !important;
+ color: @invertedTextColor !important;
}
.ui.labels a.purple.label:hover:before,
.ui.purple.labels a.label:hover:before,
a.ui.purple.label:hover:before {
- background-color: #3E3773 !important;
+ background-color: @purpleHover !important;
}
-/* Corner */
.ui.purple.corner.label,
.ui.purple.corner.label:hover {
background-color: transparent !important;
}
-/* Ribbon */
.ui.purple.ribbon.label {
- border-color: #3E3773 !important;
+ border-color: @purpleHover !important;
}
-/*--- Orange ---*/
-.ui.orange.labels .label,
-.ui.orange.label {
- background-color: #F05940 !important;
- border-color: #F05940 !important;
- color: #FFFFFF !important;
+/*--- Red ---*/
+.ui.red.labels .label,
+.ui.red.label {
+ background-color: @red !important;
+ border-color: @red !important;
+ color: @invertedTextColor !important;
}
-.ui.labels .orange.label:before,
-.ui.orange.labels .label:before,
-.ui.orange.label:before {
- background-color: #F05940 !important;
+.ui.labels .red.label:before,
+.ui.red.labels .label:before,
+.ui.red.label:before {
+ background-color: @red !important;
}
-/* Hover */
-a.ui.orange.labels .label:hover,
-.ui.orange.labels a.label:hover,
-a.ui.orange.label:hover {
- background-color: #FF4121 !important;
- border-color: #FF4121 !important;
- color: #FFFFFF !important;
+.ui.red.corner.label,
+.ui.red.corner.label:hover {
+ background-color: transparent !important;
}
-.ui.labels a.orange.label:hover:before,
-.ui.orange.labels a.label:hover:before,
-a.ui.orange.label:hover:before {
- background-color: #FF4121 !important;
+
+a.ui.red.labels .label:hover,
+a.ui.red.label:hover{
+ background-color: @redHover !important;
+ border-color: @redHover !important;
+ color: @invertedTextColor !important;
}
-/* Corner */
-.ui.orange.corner.label,
-.ui.orange.corner.label:hover {
- background-color: transparent !important;
+.ui.labels a.red.label:hover:before,
+.ui.red.labels a.label:hover:before,
+a.ui.red.label:hover:before {
+ background-color: @redHover !important;
}
-/* Ribbon */
-.ui.orange.ribbon.label {
- border-color: #FF4121 !important;
+.ui.red.ribbon.label {
+ border-color: @redHover !important;
}
-
-
-
/*--- Teal ---*/
.ui.teal.labels .label,
.ui.teal.label {
- background-color: #00B5AD !important;
- border-color: #00B5AD !important;
- color: #FFFFFF !important;
+ background-color: @teal !important;
+ border-color: @teal !important;
+ color: @invertedTextColor !important;
}
.ui.labels .teal.label:before,
.ui.teal.labels .label:before,
.ui.teal.label:before {
- background-color: #00B5AD !important;
+ background-color: @teal !important;
}
-/* Hover */
a.ui.teal.labels .label:hover,
.ui.teal.labels a.label:hover,
a.ui.teal.label:hover {
- background-color: #009A93 !important;
- border-color: #009A93 !important;
- color: #FFFFFF !important;
+ background-color: @tealHover !important;
+ border-color: @tealHover !important;
+ color: @invertedTextColor !important;
}
.ui.labels a.teal.label:hover:before,
.ui.teal.labels a.label:hover:before,
a.ui.teal.label:hover:before {
- background-color: #009A93 !important;
+ background-color: @tealHover !important;
}
-/* Corner */
.ui.teal.corner.label,
.ui.teal.corner.label:hover {
background-color: transparent !important;
}
-/* Ribbon */
.ui.teal.ribbon.label {
- border-color: #009A93 !important;
+ border-color: @tealHover !important;
+}
+
+/*--- Yellow ---*/
+.ui.yellow.labels .label,
+.ui.yellow.label {
+ background-color: @yellow !important;
+ border-color: @yellow !important;
+ color: @invertedTextColor !important;
+}
+.ui.labels .yellow.label:before,
+.ui.yellow.labels .label:before,
+.ui.yellow.label:before {
+ background-color: @yellow !important;
+}
+a.ui.yellow.labels .label:hover,
+.ui.yellow.labels a.label:hover,
+a.ui.yellow.label:hover {
+ background-color: @yellowHover !important;
+ border-color: @yellowHover !important;
+ color: @invertedTextColor !important;
+}
+.ui.labels a.yellow.label:hover:before,
+.ui.yellow.labels a.label:hover:before,
+a.ui.yellow.label:hover:before {
+ background-color: @yellowHover !important;
+}
+.ui.yellow.corner.label,
+.ui.yellow.corner.label:hover {
+ background-color: transparent !important;
+}
+.ui.yellow.ribbon.label {
+ border-color: @tealHover !important;
}
/*-------------------
@@ -794,10 +761,10 @@ a.ui.teal.label:hover:before {
.ui.horizontal.labels .label,
.ui.horizontal.label {
- margin: -0.125em 0.5em -0.125em 0em;
+ margin: 0em @horizontalLabelMargin 0em 0em;
- padding: 0.35em 1em;
- min-width: 6em;
+ padding: @horizontalLabelVerticalPadding @horizontalPadding;
+ min-width: @horizontalLabelMinWidth;
text-align: center;
}
@@ -808,17 +775,20 @@ a.ui.teal.label:hover:before {
.ui.circular.labels .label,
.ui.circular.label {
- min-height: 1em;
- max-height: 2em;
+ min-width: @circularMinSize;
+ min-height: @circularMinSize;
- padding: 0.5em !important;
+ padding: @circularPadding !important;
line-height: 1em;
text-align: center;
-
- -webkit-border-radius: 500rem;
- -moz-border-radius: 500rem;
- border-radius: 500rem;
+ border-radius: @circularRadius;
+}
+.ui.empty.circular.labels .label,
+.ui.empty.circular.label {
+ min-width: 0.5em;
+ min-height: 0.5em;
+ vertical-align: middle;
}
/*-------------------
@@ -834,37 +804,23 @@ a.ui.teal.label:hover:before {
.ui.pointing.label:before {
position: absolute;
- content: "";
+ content: '';
- width: 0.6em;
- height: 0.6em;
+ width: @pointingTriangleSize;
+ height: @pointingTriangleSize;
background-image: none;
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 2;
-
- -webkit-transition:
- background 0.1s linear
- ;
- -moz-transition:
- background 0.1s linear
- ;
- -o-transition:
- background 0.1s linear
- ;
- -ms-transition:
- background 0.1s linear
- ;
transition:
background 0.1s linear
;
}
/*--- Above ---*/
.ui.pointing.label:before {
- background-color: #E8E8E8;
+ background-color: @backgroundColor;
+ background-image: @backgroundImage;
}
.ui.pointing.label,
.ui.pointing.above.label {
@@ -872,8 +828,8 @@ a.ui.teal.label:hover:before {
}
.ui.pointing.label:before,
.ui.pointing.above.label:before {
- margin-left: -0.3em;
- top: -0.3em;
+ margin-left: -@pointingTriangleOffset;
+ top: -@pointingTriangleOffset;
left: 50%;
}
/*--- Below ---*/
@@ -882,10 +838,10 @@ a.ui.teal.label:hover:before {
margin-bottom: 1em;
}
.ui.pointing.below.label:before {
- margin-left: -0.3em;
+ margin-left: -@pointingTriangleOffset;
top: auto;
right: auto;
- bottom: -0.3em;
+ bottom: -@pointingTriangleOffset;
left: 50%;
}
/*--- Left ---*/
@@ -894,7 +850,7 @@ a.ui.teal.label:hover:before {
margin-left: 1em;
}
.ui.pointing.left.label:before {
- margin-top: -0.3em;
+ margin-top: -@pointingTriangleOffset;
bottom: auto;
right: auto;
top: 50%;
@@ -906,8 +862,8 @@ a.ui.teal.label:hover:before {
margin-right: 1em;
}
.ui.pointing.right.label:before {
- margin-top: -0.3em;
- right: -0.3em;
+ margin-top: -@pointingTriangleOffset;
+ right: -@pointingTriangleOffset;
top: 50%;
bottom: auto;
left: auto;
@@ -920,9 +876,9 @@ a.ui.teal.label:hover:before {
.ui.floating.label {
position: absolute;
z-index: 100;
- top: -1em;
+ top: @floatingTopOffset;
left: 100%;
- margin: 0em 0em 0em -1.5em !important;
+ margin: 0em 0em 0em @floatingLeftOffset !important;
}
/*-------------------
@@ -931,16 +887,16 @@ a.ui.teal.label:hover:before {
.ui.small.labels .label,
.ui.small.label {
- font-size: 0.75rem;
+ font-size: @small;
}
.ui.label {
- font-size: 0.8125rem;
+ font-size: @medium;
}
.ui.large.labels .label,
.ui.large.label {
- font-size: 0.875rem;
+ font-size: @large;
}
.ui.huge.labels .label,
.ui.huge.label {
- font-size: 1rem;
+ font-size: @huge;
}
diff --git a/src/elements/loader.less b/src/elements/loader.less
index 17fa544a5..69d0cbe22 100755
--- a/src/elements/loader.less
+++ b/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;
}
diff --git a/src/elements/segment.less b/src/elements/segment.less
index bf60c0dc2..6f379f520 100755
--- a/src/elements/segment.less
+++ b/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%;
diff --git a/src/themes/_site/elements/label.overrides b/src/themes/_site/elements/label.overrides
new file mode 100644
index 000000000..c5c53367f
--- /dev/null
+++ b/src/themes/_site/elements/label.overrides
@@ -0,0 +1,3 @@
+/*******************************
+ Overrides
+*******************************/
diff --git a/src/themes/_site/elements/label.variables b/src/themes/_site/elements/label.variables
new file mode 100644
index 000000000..6f085f935
--- /dev/null
+++ b/src/themes/_site/elements/label.variables
@@ -0,0 +1,3 @@
+/*******************************
+ User Variable Overrides
+*******************************/
diff --git a/src/themes/_site/elements/loader.overrides b/src/themes/_site/elements/loader.overrides
new file mode 100644
index 000000000..c5c53367f
--- /dev/null
+++ b/src/themes/_site/elements/loader.overrides
@@ -0,0 +1,3 @@
+/*******************************
+ Overrides
+*******************************/
diff --git a/src/themes/_site/elements/loader.variables b/src/themes/_site/elements/loader.variables
new file mode 100644
index 000000000..6f085f935
--- /dev/null
+++ b/src/themes/_site/elements/loader.variables
@@ -0,0 +1,3 @@
+/*******************************
+ User Variable Overrides
+*******************************/
diff --git a/src/themes/default/elements/label.overrides b/src/themes/default/elements/label.overrides
new file mode 100644
index 000000000..c5c53367f
--- /dev/null
+++ b/src/themes/default/elements/label.overrides
@@ -0,0 +1,3 @@
+/*******************************
+ Overrides
+*******************************/
diff --git a/src/themes/default/elements/label.variables b/src/themes/default/elements/label.variables
new file mode 100644
index 000000000..75a7e37c9
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/themes/default/elements/loader.overrides b/src/themes/default/elements/loader.overrides
new file mode 100644
index 000000000..c5c53367f
--- /dev/null
+++ b/src/themes/default/elements/loader.overrides
@@ -0,0 +1,3 @@
+/*******************************
+ Overrides
+*******************************/
diff --git a/src/themes/default/elements/loader.variables b/src/themes/default/elements/loader.variables
new file mode 100644
index 000000000..7d3f5f94b
--- /dev/null
+++ b/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
+--------------------*/
diff --git a/src/themes/default/elements/segment.variables b/src/themes/default/elements/segment.variables
index f33332814..a5af3e957 100755
--- a/src/themes/default/elements/segment.variables
+++ b/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 */
diff --git a/src/themes/packaged/default/elements/label.overrides b/src/themes/packaged/default/elements/label.overrides
new file mode 100644
index 000000000..c5c53367f
--- /dev/null
+++ b/src/themes/packaged/default/elements/label.overrides
@@ -0,0 +1,3 @@
+/*******************************
+ Overrides
+*******************************/
diff --git a/src/themes/packaged/default/elements/label.variables b/src/themes/packaged/default/elements/label.variables
new file mode 100644
index 000000000..6f085f935
--- /dev/null
+++ b/src/themes/packaged/default/elements/label.variables
@@ -0,0 +1,3 @@
+/*******************************
+ User Variable Overrides
+*******************************/
diff --git a/src/themes/packaged/default/elements/loader.overrides b/src/themes/packaged/default/elements/loader.overrides
new file mode 100644
index 000000000..c5c53367f
--- /dev/null
+++ b/src/themes/packaged/default/elements/loader.overrides
@@ -0,0 +1,3 @@
+/*******************************
+ Overrides
+*******************************/
diff --git a/src/themes/packaged/default/elements/loader.variables b/src/themes/packaged/default/elements/loader.variables
new file mode 100644
index 000000000..6f085f935
--- /dev/null
+++ b/src/themes/packaged/default/elements/loader.variables
@@ -0,0 +1,3 @@
+/*******************************
+ User Variable Overrides
+*******************************/
+