less-rails-semantic_ui 1.7.3.0 → 1.8.0.0

data/assets/stylesheets/semantic_ui/definitions/elements/label.less

@@ -325,7 +325,7 @@ a.ui.label {
   position: relative;
   margin: 0em;
 
-  left: -@ribbonDistance;
+  left: @ribbonOffset;
   padding-left: @ribbonDistance;
   border-radius: 0em @borderRadius @borderRadius 0em;
   border-color: @ribbonShadowColor;
@@ -351,7 +351,7 @@ a.ui.label {
 .ui[class*="right ribbon"].label {
   text-align: left;
   transform: translateX(-100%);
-  left: ~"calc(100% + "@ribbonDistance~")";
+  left: @rightRibbonOffset;
   border-radius: @borderRadius 0em 0em @borderRadius;
   padding-left: @horizontalPadding;
   padding-right: @ribbonDistance;
@@ -367,7 +367,7 @@ a.ui.label {
 }
 
 /*-------------------
-       Attached
+      Attached
 --------------------*/
 
 .ui.top.attached.label,

data/assets/stylesheets/semantic_ui/definitions/elements/list.less

@@ -795,7 +795,6 @@ ol.ui.horizontal.list li:before,
        Relaxed
 --------------------*/
 
-.ui.relaxed.list:not(.horizontal) .list > .item,
 .ui.relaxed.list:not(.horizontal) > .item {
   padding-top: @relaxedVerticalPadding;
   padding-bottom: @relaxedVerticalPadding;
@@ -810,7 +809,6 @@ ol.ui.horizontal.list li:before,
 }
 
 /* Very Relaxed */
-.ui[class*="very relaxed"].list:not(.horizontal) .list > .item,
 .ui[class*="very relaxed"].list:not(.horizontal) > .item {
   padding-top: @veryRelaxedVerticalPadding;
   padding-bottom: @veryRelaxedVerticalPadding;
@@ -829,36 +827,28 @@ ol.ui.horizontal.list li:before,
       Sizes
 --------------------*/
 
-.ui.mini.list .list > .item,
-.ui.mini.list > .item {
+.ui.mini.list {
   font-size: @relativeMini;
 }
-.ui.tiny.list .list > .item,
-.ui.tiny.list > .item {
+.ui.tiny.list {
   font-size: @relativeTiny;
 }
-.ui.small.list .list > .item,
-.ui.small.list > .item {
+.ui.small.list {
   font-size: @relativeSmall;
 }
-.ui.list .list > .item,
-.ui.list > .item {
+.ui.list {
   font-size: @relativeMedium;
 }
-.ui.large.list .list > .item,
-.ui.large.list > .item {
+.ui.large.list {
   font-size: @relativeLarge;
 }
-.ui.big.list .list > .item,
-.ui.big.list > .item {
+.ui.big.list {
   font-size: @relativeBig;
 }
-.ui.huge.list .list > .item,
-.ui.huge.list > .item {
+.ui.huge.list {
   font-size: @relativeHuge;
 }
-.ui.massive.list .list > .item,
-.ui.massive.list > .item {
+.ui.massive.list {
   font-size: @relativeMassive;
 }
 

data/assets/stylesheets/semantic_ui/definitions/modules/checkbox.less

@@ -48,7 +48,8 @@
   outline: none;
   vertical-align: middle;
 }
-.ui.checkbox input {
+.ui.checkbox input[type="checkbox"],
+.ui.checkbox input[type="radio"] {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -158,7 +159,8 @@
   background: @checkboxSelectedBackground;
   border: 1px solid @checkboxSelectedBorder;
 }
-.ui.checkbox input:active ~ label {
+.ui.checkbox input[type="checkbox"]:active ~ label,
+.ui.checkbox input[type="radio"]:active ~ label {
   color: @labelSelectedColor;
 }
 
@@ -166,12 +168,15 @@
       Focus
 ---------------*/
 
-.ui.checkbox input:focus ~ .box:before,
-.ui.checkbox input:focus ~ label:before {
+.ui.checkbox input[type="checkbox"]:focus ~ .box:before,
+.ui.checkbox input[type="checkbox"]:focus ~ label:before,
+.ui.checkbox input[type="radio"]:focus ~ .box:before,
+.ui.checkbox input[type="radio"]:focus ~ label:before {
   background: @checkboxSelectedBackground;
   border: 1px solid @checkboxSelectedBorder;
 }
-.ui.checkbox input:focus ~ label {
+.ui.checkbox input[type="checkbox"]:focus ~ label,
+.ui.checkbox input[type="radio"]:focus ~ label {
   color: @labelSelectedColor;
 }
 
@@ -180,8 +185,10 @@
      Active
 ---------------*/
 
-.ui.checkbox input:checked ~ .box:after,
-.ui.checkbox input:checked ~ label:after {
+.ui.checkbox input[type="checkbox"]:checked ~ .box:after,
+.ui.checkbox input[type="checkbox"]:checked ~ label:after,
+.ui.checkbox input[type="radio"]:checked ~ .box:after,
+.ui.checkbox input[type="radio"]:checked ~ label:after {
   opacity: 1;
 }
 
@@ -201,8 +208,10 @@
 
 .ui.disabled.checkbox .box:after,
 .ui.disabled.checkbox label,
-.ui.checkbox input[disabled] ~ .box:after,
-.ui.checkbox input[disabled] ~ label {
+.ui.checkbox input[type="checkbox"][disabled] ~ .box:after,
+.ui.checkbox input[type="checkbox"][disabled] ~ label,
+.ui.checkbox input[type="radio"][disabled] ~ .box:after,
+.ui.checkbox input[type="radio"][disabled] ~ label {
   cursor: default;
   opacity: @disabledCheckboxOpacity;
   color: @disabledCheckboxLabelColor;
@@ -319,8 +328,10 @@
 }
 
 /* Focus */
-.ui.slider.checkbox input:focus ~ .box:before,
-.ui.slider.checkbox input:focus ~ label:before {
+.ui.slider.checkbox input[type="checkbox"]:focus ~ .box:before,
+.ui.slider.checkbox input[type="checkbox"]:focus ~ label:before,
+.ui.slider.checkbox input[type="radio"]:focus ~ .box:before,
+.ui.slider.checkbox input[type="radio"]:focus ~ label:before {
   background-color: @toggleFocusColor;
   border: none;
 }
@@ -336,16 +347,22 @@
 }
 
 /* Active */
-.ui.slider.checkbox input:checked ~ .box,
-.ui.slider.checkbox input:checked ~ label {
+.ui.slider.checkbox input[type="checkbox"]:checked ~ .box,
+.ui.slider.checkbox input[type="checkbox"]:checked ~ label,
+.ui.slider.checkbox input[type="radio"]:checked ~ .box,
+.ui.slider.checkbox input[type="radio"]:checked ~ label {
   color: @sliderOnLabelColor;
 }
-.ui.slider.checkbox input:checked ~ .box:before,
-.ui.slider.checkbox input:checked ~ label:before {
+.ui.slider.checkbox input[type="checkbox"]:checked ~ .box:before,
+.ui.slider.checkbox input[type="checkbox"]:checked ~ label:before,
+.ui.slider.checkbox input[type="radio"]:checked ~ .box:before,
+.ui.slider.checkbox input[type="radio"]:checked ~ label:before {
   background-color: @sliderOnLineColor;
 }
-.ui.slider.checkbox input:checked ~ .box:after,
-.ui.slider.checkbox input:checked ~ label:after {
+.ui.slider.checkbox input[type="checkbox"]:checked ~ .box:after,
+.ui.slider.checkbox input[type="checkbox"]:checked ~ label:after,
+.ui.slider.checkbox input[type="radio"]:checked ~ .box:after,
+.ui.slider.checkbox input[type="radio"]:checked ~ label:after {
   left: @sliderTravelDistance;
 }
 
@@ -411,14 +428,18 @@
   ;
 }
 
-.ui.toggle.checkbox input ~ .box:after,
-.ui.toggle.checkbox input ~ label:after {
+.ui.toggle.checkbox input[type="checkbox"] ~ .box:after,
+.ui.toggle.checkbox input[type="checkbox"] ~ label:after,
+.ui.toggle.checkbox input[type="radio"] ~ .box:after,
+.ui.toggle.checkbox input[type="radio"] ~ label:after {
   left: @toggleOffOffset;
 }
 
 /* Focus */
-.ui.toggle.checkbox input:focus ~ .box:before,
-.ui.toggle.checkbox input:focus ~ label:before {
+.ui.toggle.checkbox input[type="checkbox"]:focus ~ .box:before,
+.ui.toggle.checkbox input[type="checkbox"]:focus ~ label:before,
+.ui.toggle.checkbox input[type="radio"]:focus ~ .box:before,
+.ui.toggle.checkbox input[type="radio"]:focus ~ label:before {
   background-color: @toggleFocusColor;
   border: none;
 }
@@ -431,16 +452,22 @@
 }
 
 /* Active */
-.ui.toggle.checkbox input:checked ~ .box,
-.ui.toggle.checkbox input:checked ~ label {
+.ui.toggle.checkbox input[type="checkbox"]:checked ~ .box,
+.ui.toggle.checkbox input[type="checkbox"]:checked ~ label,
+.ui.toggle.checkbox input[type="radio"]:checked ~ .box,
+.ui.toggle.checkbox input[type="radio"]:checked ~ label {
   color: @toggleOnLabelColor;
 }
-.ui.toggle.checkbox input:checked ~ .box:before,
-.ui.toggle.checkbox input:checked ~ label:before {
+.ui.toggle.checkbox input[type="checkbox"]:checked ~ .box:before,
+.ui.toggle.checkbox input[type="checkbox"]:checked ~ label:before,
+.ui.toggle.checkbox input[type="radio"]:checked ~ .box:before,
+.ui.toggle.checkbox input[type="radio"]:checked ~ label:before {
   background-color: @toggleOnLaneColor;
 }
-.ui.toggle.checkbox input:checked ~ .box:after,
-.ui.toggle.checkbox input:checked ~ label:after {
+.ui.toggle.checkbox input[type="checkbox"]:checked ~ .box:after,
+.ui.toggle.checkbox input[type="checkbox"]:checked ~ label:after,
+.ui.toggle.checkbox input[type="radio"]:checked ~ .box:after,
+.ui.toggle.checkbox input[type="radio"]:checked ~ label:after {
   left: @toggleOnOffset;
 }
 

data/assets/stylesheets/semantic_ui/definitions/modules/modal.less

@@ -31,7 +31,7 @@
 .ui.modal {
   display: none;
   position: fixed;
-  z-index: 1001;
+  z-index: @zIndex;
 
   top: 50%;
   left: 50%;
@@ -271,6 +271,7 @@
 .ui.basic.modal {
   background-color: transparent;
   border: none;
+  border-radius: 0em;
   box-shadow: 0px 0px 0px 0px;
   color: @basicModalColor;
 }

data/assets/stylesheets/semantic_ui/definitions/modules/popup.less

@@ -24,6 +24,7 @@
 
 @import 'semantic_ui/theme.config';
 
+
 /*******************************
             Popup
 *******************************/
@@ -33,6 +34,10 @@
   position: absolute;
   top: 0px;
   right: 0px;
+
+  /* Fixes content being squished when inline (moz only) */
+  min-width: -moz-max-content;
+
   z-index: @zIndex;
 
   border: @border;

data/assets/stylesheets/semantic_ui/definitions/modules/sidebar.less

@@ -131,6 +131,7 @@ body.pushable {
 .pushable > .pusher {
   position: relative;
   backface-visibility: hidden;
+  overflow: hidden;
   min-height: 100%;
   transition: transform @duration @easing;
   z-index: @middleLayer;

data/assets/stylesheets/semantic_ui/definitions/modules/transition.less

@@ -29,11 +29,6 @@
           Transitions
 *******************************/
 
-/*
-  Some transitions adapted from Animate CSS
-  https://github.com/daneden/animate.css
-*/
-
 .transition {
   animation-iteration-count: 1;
   animation-duration: @transitionDefaultDuration;

data/assets/stylesheets/semantic_ui/themes/default/collections/menu.variables

@@ -132,14 +132,16 @@
 
 /* Pointing Arrow */
 @arrowSize: 0.6em;
-@arrowOffset: -(@arrowSize / 2);
-@arrowBorder: 1px solid rgba(0, 0, 0, 0.1);
+@arrowBorderSize: 1px;
+@arrowBorder: @arrowBorderSize solid @solidBorderColor;
+@arrowTransition: background @transitionDuration @transitionEasing;
+@arrowZIndex: 2;
 
 @arrowHoverColor: #FAFAFA;
-@arrowActiveColor: #F6F6F6;
+@arrowActiveColor: #F7F7F7;
 
-@arrowVerticalHoverColor: #FAFAFA;
-@arrowVerticalActiveColor: #FCFCFC;
+@arrowVerticalHoverColor: @arrowHoverColor;
+@arrowVerticalActiveColor: @arrowActiveColor;
 
 /*--------------
      States

data/assets/stylesheets/semantic_ui/themes/default/collections/table.variables

@@ -146,7 +146,7 @@
 /* Attached */
 @attachedHorizontalOffset: -1px;
 @attachedBoxShadow: none;
-@attachedTableWidth: ~"calc(100% + "-@attachedHorizontalOffset * 2~")";
+@attachedTableWidth: ~"calc(100% + "@attachedHorizontalOffset * -2~")";
 
 /* Striped */
 @stripedBackground: rgba(0, 0, 50, 0.03);

data/assets/stylesheets/semantic_ui/themes/default/elements/button.variables

@@ -223,8 +223,8 @@
 
 
 /* Basic Group */
-@basicGroupBorder: 1px solid @borderColor;
-@basicGroupBoxShadow: 0px 0px 0px 1px @borderColor;
+@basicGroupBorder: @basicBorderSize solid @borderColor;
+@basicGroupBoxShadow: 0px 0px 0px @basicBorderSize @borderColor;
 
 /*-------------------
       Variations

data/assets/stylesheets/semantic_ui/themes/default/elements/header.variables

@@ -21,18 +21,9 @@
 @horizontalPadding: 0em;
 @verticalPadding: 0em;
 
-/* Sizing */
-@tiny: 1em;
-@small: 1.071em;
-@medium: 1.285em;
-@large: 1.714em;
-@huge: 2em;
-
 /* Sub Header */
-@subHeaderFontSize: 1.0714rem;
 @subHeaderLineHeight: 1.2em;
 @subHeaderColor: rgba(0, 0, 0, 0.5);
-
 /* Icon */
 @iconOpacity: 1;
 @iconSize: 1.5em;
@@ -55,6 +46,26 @@
       Variations
 --------------------*/
 
+/* Sizing */
+@huge   : unit(@h1, em);
+@large  : unit(@h2, em);
+@medium : unit(@h3, em);
+@small  : unit(@h4, em);
+@tiny   : unit(@h5, em);
+
+/* Sub Header */
+@h1SubHeaderFontSize: 1.4285rem;
+@h2SubHeaderFontSize: 1.1428rem;
+@h3SubHeaderFontSize: 1.1428rem;
+@h4SubHeaderFontSize: 1rem;
+@h5SubHeaderFontSize: 0.9285rem;
+
+@hugeSubHeaderFontSize  : @h1SubHeaderFontSize;
+@largeSubHeaderFontSize : @h2SubHeaderFontSize;
+@subHeaderFontSize      : @h3SubHeaderFontSize;
+@smallSubHeaderFontSize : @h4SubHeaderFontSize;
+@tinySubHeaderFontSize  : @h5SubHeaderFontSize;
+
 /* Icon Header */
 @iconHeaderSize: 3em;
 @iconHeaderOpacity: 1;

data/assets/stylesheets/semantic_ui/themes/default/elements/label.variables

@@ -90,9 +90,11 @@
 @tagTransition: background @labelTransitionDuration @labelTransitionEasing;
 
 /* Ribbon */
-@ribbonDistance: 2rem;
-@ribbonMargin: 1em;
 @ribbonTriangleSize: 1.2em;
+@ribbonMargin: 1rem;
+@ribbonOffset: ~"calc("-@ribbonMargin~" - "@ribbonTriangleSize~")";
+@ribbonDistance: ~"calc("@ribbonMargin~" + "@ribbonTriangleSize~")";
+@rightRibbonOffset:  ~"calc(100% + "@ribbonMargin~" + "@ribbonTriangleSize~")";
 @ribbonShadowColor: rgba(0, 0, 0, 0.15);
 
 @blackRibbonShadow: darken(@black, 10);
@@ -115,7 +117,7 @@
 @cornerTransition: color @labelTransitionDuration @labelTransitionEasing;
 @cornerTriangleSize: 3.25em;
 @cornerTriangleTransition: border-color @labelTransitionDuration @labelTransitionEasing;
-@cornerTriangleZIndex: 10;
+@cornerTriangleZIndex: 1;
 
 @cornerIconSize: 1em;
 @cornerIconTopOffset: 0.4em;

data/assets/stylesheets/semantic_ui/themes/default/globals/site.variables

@@ -351,6 +351,7 @@
 
 @borderColor                   : rgba(39, 41, 43, 0.15);
 @selectedBorderColor           : rgba(39, 41, 43, 0.3);
+@disabledBorderColor           : rgba(39, 41, 43, 0.5);
 
 @solidBorderColor              : #D4D4D5;
 @solidSelectedBorderColor      : #BEBEBF;

data/assets/stylesheets/semantic_ui/themes/default/modules/accordion.variables

@@ -12,7 +12,7 @@
 @titleColor: @textColor;
 
 /* Icon */
-@iconOpacity: 0.75;
+@iconOpacity: 1;
 @iconFontSize: 1em;
 @iconFloat: none;
 @iconWidth: 1.25em;
@@ -21,12 +21,11 @@
 @iconMargin: 0em 0.25rem 0em 0rem;
 @iconPadding: 0em;
 @iconTransition:
-  transform 0.2s ease,
-  opacity 0.2s ease
+  transform @transitionDuration @transitionEasing,
+  opacity @transitionDuration @transitionEasing
 ;
 @iconVerticalAlign: baseline;
-
-@iconTransform: rotate(0deg);
+@iconTransform: none;
 
 /* Child Accordion */
 @childAccordionMargin: 1em 0em 0em;
@@ -78,7 +77,7 @@
 @styledTitlePadding: 0.75em 1em;
 @styledTitleFontWeight: bold;
 @styledTitleColor: @unselectedTextColor;
-@styledTitleTransition: background-color 0.2s ease;
+@styledTitleTransition: background-color @transitionDuration @transitionEasing;
 @styledTitleBorder: 1px solid @borderColor;
 @styledTitleTransition:
   background @transitionDuration @transitionEasing,