less-rails-semantic_ui 2.0.2.0 → 2.0.5.0

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

@@ -165,6 +165,7 @@
     position: static;
     left: 0;
     border-left: none;
+    border-right: none;
     content: '';
     display: table-cell;
     position: relative;

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

@@ -372,6 +372,19 @@ i.inverted.circular.grey.icon {
   color: @white !important;
 }
 
+/* Black */
+i.black.icon {
+  color: @black !important;
+}
+i.inverted.black.icon {
+  color: @lightBlack !important;
+}
+i.inverted.bordeblack.black.icon,
+i.inverted.circular.black.icon {
+  background-color: @black !important;
+  color: @white !important;
+}
+
 /*-------------------
         Sizes
 --------------------*/

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

@@ -433,8 +433,8 @@
 }
 .ui[class*="left action"].input > input {
   border-left: none;
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
+  border-top-left-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
 }
 
 /*--------------------

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

@@ -34,7 +34,7 @@
 
 .ui.segment {
   position: relative;
-  background-color: @background;
+  background: @background;
   box-shadow: @boxShadow;
   margin: @margin;
   padding: @padding;
@@ -56,7 +56,7 @@
   padding-left: 0em;
   padding-right: 0em;
 
-  background-color: transparent;
+  background: none transparent;
   border-radius: 0px;
   box-shadow: none;
   border: none;
@@ -197,7 +197,7 @@
   left: 0%;
 
   border-top: 1px solid @borderColor;
-  background-color: @stackedPageBackground;
+  background: @stackedPageBackground;
 
   width: 100%;
   height: @stackedHeight;
@@ -370,6 +370,7 @@
 /* Horizontal Segment */
 .ui.horizontal.segments > .segment {
   flex: 1 1 auto;
+  -ms-flex: 1 1 0px; /* Solves #2550 MS Flex */
   margin: 0em;
   min-width: 0px;
   background-color: transparent;
@@ -639,19 +640,21 @@
   border: none;
   box-shadow: none;
 }
+.ui.inverted.segment,
+.ui.primary.inverted.segment {
+  background: @invertedBackground;
+  color: @invertedTextColor;
+}
+
+/* Nested */
 .ui.inverted.segment .segment {
   color: @textColor;
 }
 .ui.inverted.segment .inverted.segment {
-  color: @white;
-}
-.ui.inverted.segment,
-.ui.primary.inverted.segment {
-  background-color: @black;
-  color: @white;
+  color: @invertedTextColor;
 }
 
-.ui.inverted.block.segment,
+/* Attached */
 .ui.inverted.attached.segment {
   border-color: @solidWhiteBorderColor;
 }
@@ -685,26 +688,27 @@
       Attached
 --------------------*/
 
-.ui.segment.attached {
+/* Middle */
+.ui.attached.segment {
   top: 0px;
   bottom: 0px;
+  border-radius: 0px;
   margin: 0em @attachedHorizontalOffset;
   width: @attachedWidth;
   max-width: @attachedWidth;
-  border-radius: 0px;
   box-shadow: @attachedBoxShadow;
   border: @attachedBorder;
 }
-.ui.segment.attached + .ui.segment.attached:not(.top) {
+.ui.attached + .ui.attached.segment:not(.top) {
   border-top: none;
 }
 
 /* Top */
 .ui[class*="top attached"].segment {
-  top: @attachedTopOffset;
   bottom: 0px;
-  margin-top: @verticalMargin;
   margin-bottom: 0em;
+  top: @attachedTopOffset;
+  margin-top: @verticalMargin;
   border-radius: @borderRadius @borderRadius 0em 0em;
 }
 .ui.segment[class*="top attached"]:first-child {
@@ -713,9 +717,9 @@
 
 /* Bottom */
 .ui.segment[class*="bottom attached"] {
-  top: @attachedBottomOffset;
   bottom: 0px;
   margin-top: 0em;
+  top: @attachedBottomOffset;
   margin-bottom: @verticalMargin;
   box-shadow: @attachedBottomBoxShadow;
   border-radius: 0em 0em @borderRadius @borderRadius;

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

@@ -49,33 +49,16 @@
   border: @stepsBorder;
 }
 
+/* First Steps */
 .ui.steps:first-child {
   margin-top: 0em;
 }
+
+/* Last Steps */
 .ui.steps:last-child {
   margin-bottom: 0em;
 }
 
-.ui.steps .step:first-child {
-  padding-left: @horizontalPadding;
-  border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius;
-}
-.ui.steps .step:last-child {
-  border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em;
-}
-.ui.steps .step:only-child {
-  -webkit-border-radius: @stepsBorderRadius;
-  -moz-border-radius: @stepsBorderRadius;
-  border-radius: @stepsBorderRadius;
-}
-
-.ui.steps .step:last-child {
-  border-right: none;
-  margin-right: 0em;
-}
-.ui.steps .step:last-child:after {
-  display: @lastArrowDisplay;
-}
 
 /*******************************
            Singular
@@ -99,9 +82,10 @@
   border-radius: @borderRadius;
   border: @border;
   border-right: @divider;
+  transition: @transition;
 }
 
-
+/* Arrow */
 .ui.steps .step:after {
   display: none;
   position: absolute;
@@ -118,13 +102,30 @@
   border-color: @borderColor;
   border-width: @arrowBorderWidth;
 
+  transition: @transition;
   transform: translateY(-50%) translateX(50%) rotate(-45deg);
 }
 
-.ui.steps .step,
-.ui.steps .step:after {
-  transition: @transition;
+/* First Step */
+.ui.steps .step:first-child {
+  padding-left: @horizontalPadding;
+  border-radius: @stepsBorderRadius 0em 0em @stepsBorderRadius;
+}
+
+/* Only Step */
+.ui.steps .step:only-child {
+  border-radius: @stepsBorderRadius;
+}
+
+/* Last Step */
+.ui.steps .step:last-child {
+  border-radius: 0em @stepsBorderRadius @stepsBorderRadius 0em;
 }
+.ui.steps .step:last-child {
+  border-right: none;
+  margin-right: 0em;
+}
+
 
 /*******************************
             Content
@@ -223,6 +224,7 @@
   justify-content: flex-start;
   border-radius: @borderRadius;
   padding: @verticalPadding @horizontalPadding;
+  border-right: none;
   border-bottom: @verticalDivider;
 }
 .ui.vertical.steps .step:first-child {
@@ -253,6 +255,9 @@
 .ui.vertical.steps .step:last-child:after {
   display: @verticalLastArrowDisplay;
 }
+.ui.vertical.steps .active.step:last-child:after {
+  display: @verticalActiveLastArrowDisplay;
+}
 
 
 /*---------------
@@ -344,7 +349,12 @@
 .ui.steps .active.step:after {
   display: @activeArrowDisplay;
 }
-
+.ui.steps .step:last-child:after {
+  display: @lastArrowDisplay;
+}
+.ui.steps .active.step:last-child:after {
+  display: @activeLastArrowDisplay;
+}
 
 /* Active Hover */
 .ui.steps .link.active.step:hover::after,

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

@@ -226,4 +226,5 @@
   color: @invertedTitleColor;
 }
 
-.loadUIOverrides();
+.loadUIOverrides();
+

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

@@ -49,6 +49,8 @@
   line-height: @checkboxLineHeight;
   min-width: @checkboxSize;
 }
+
+/* HTML Checkbox */
 .ui.checkbox input[type="checkbox"],
 .ui.checkbox input[type="radio"] {
   cursor: pointer;
@@ -163,8 +165,7 @@
 .ui.checkbox label:active::after {
   color: @checkboxPressedColor;
 }
-.ui.checkbox input[type="checkbox"]:active ~ label,
-.ui.checkbox input[type="radio"]:active ~ label {
+.ui.checkbox input:active ~ label {
   color: @labelPressedColor;
 }
 
@@ -172,22 +173,17 @@
      Focus
 ---------------*/
 
-.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: @checkboxFocusedBackground;
-  border-color: @checkboxFocusedBorderColor;
+.ui.checkbox input:focus ~ .box:before,
+.ui.checkbox input:focus ~ label:before {
+  background: @checkboxFocusBackground;
+  border-color: @checkboxFocusBorderColor;
 }
-.ui.checkbox input[type="checkbox"]:focus ~ .box:after,
-.ui.checkbox input[type="checkbox"]:focus ~ label:after,
-.ui.checkbox input[type="radio"]:focus ~ .box:after,
-.ui.checkbox input[type="radio"]:focus ~ label:after {
-  color: @checkboxFocusedColor;
+.ui.checkbox input:focus ~ .box:after,
+.ui.checkbox input:focus ~ label:after {
+  color: @checkboxFocusCheckColor;
 }
-.ui.checkbox input[type="checkbox"]:focus ~ label,
-.ui.checkbox input[type="radio"]:focus ~ label {
-  color: @labelFocusedColor;
+.ui.checkbox input:focus ~ label {
+  color: @labelFocusColor;
 }
 
 /*--------------
@@ -209,13 +205,13 @@
   Indeterminate
 ---------------*/
 
-.ui.checkbox input[type="checkbox"]:indeterminate ~ .box:before,
-.ui.checkbox input[type="checkbox"]:indeterminate ~ label:before {
+.ui.checkbox input:indeterminate ~ .box:before,
+.ui.checkbox input:indeterminate ~ label:before {
   background: @checkboxIndeterminateBackground;
   border-color: @checkboxIndeterminateBorderColor;
 }
-.ui.checkbox input[type="checkbox"]:indeterminate ~ .box:after,
-.ui.checkbox input[type="checkbox"]:indeterminate ~ label:after {
+.ui.checkbox input:indeterminate ~ .box:after,
+.ui.checkbox input:indeterminate ~ label:after {
   opacity: @checkboxIndeterminateCheckOpacity;
   color: @checkboxIndeterminateCheckColor;
 }
@@ -224,12 +220,18 @@
   Active Focus
 ---------------*/
 
-.ui.checkbox input[type="checkbox"]:indeterminate:focus ~ .box:before,
-.ui.checkbox input[type="checkbox"]:indeterminate:focus ~ label:before,
-.ui.checkbox input[type="checkbox"]:checked:focus ~ .box:before,
-.ui.checkbox input[type="checkbox"]:checked:focus ~ label:before  {
-  background: @checkboxFocusedBackground;
-  border-color: @checkboxFocusedBorderColor;
+.ui.checkbox input:indeterminate:focus ~ .box:before,
+.ui.checkbox input:indeterminate:focus ~ label:before,
+.ui.checkbox input:checked:focus ~ .box:before,
+.ui.checkbox input:checked:focus ~ label:before  {
+  background: @checkboxActiveFocusBackground;
+  border-color: @checkboxActiveFocusBorderColor;
+}
+.ui.checkbox input:indeterminate:focus ~ .box:after,
+.ui.checkbox input:indeterminate:focus ~ label:after,
+.ui.checkbox input:checked:focus ~ .box:after,
+.ui.checkbox input:checked:focus ~ label:after {
+  color: @checkboxActiveFocusCheckColor;
 }
 
 
@@ -262,21 +264,17 @@
 
 /* Initialized checkbox moves input below element
  to prevent manually triggering */
-.ui.checkbox input[type="checkbox"].hidden,
-.ui.checkbox input[type="radio"].hidden {
+.ui.checkbox input.hidden {
   z-index: -1;
 }
 
 /* Selectable Label */
-.ui.checkbox input[type="checkbox"].hidden + label,
-.ui.checkbox input[type="radio"].hidden + label {
+.ui.checkbox input.hidden + label {
   cursor: pointer;
   user-select: none;
 }
 
 
-
-
 /*******************************
              Types
 *******************************/
@@ -330,16 +328,42 @@
   background-color: @bulletColor;
 }
 
+/* Focus */
+.ui.radio.checkbox input:focus ~ .box:before,
+.ui.radio.checkbox input:focus ~ label:before {
+  background-color: @radioFocusBackground;
+}
+.ui.radio.checkbox input:focus ~ .box:after,
+.ui.radio.checkbox input:focus ~ label:after {
+  background-color: @radioFocusBulletColor;
+}
+
+/* Indeterminate */
+.ui.radio.checkbox input:indeterminate ~ .box:after,
+.ui.radio.checkbox input:indeterminate ~ label:after {
+  opacity: 0;
+}
+
 /* Active */
-.ui.radio.checkbox input[type="radio"]:checked ~ .box:before,
-.ui.radio.checkbox input[type="radio"]:checked ~ label:before {
+.ui.radio.checkbox input:checked ~ .box:before,
+.ui.radio.checkbox input:checked ~ label:before {
   background-color: @radioActiveBackground;
 }
-.ui.radio.checkbox input[type="radio"]:checked ~ .box:after,
-.ui.radio.checkbox input[type="radio"]:checked ~ label:after {
+.ui.radio.checkbox input:checked ~ .box:after,
+.ui.radio.checkbox input:checked ~ label:after {
   background-color: @radioActiveBulletColor;
 }
 
+/* Active Focus */
+.ui.radio.checkbox input:focus:checked ~ .box:before,
+.ui.radio.checkbox input:focus:checked ~ label:before {
+  background-color: @radioActiveFocusBackground;
+}
+.ui.radio.checkbox input:focus:checked ~ .box:after,
+.ui.radio.checkbox input:focus:checked ~ label:after {
+  background-color: @radioActiveFocusBulletColor;
+}
+
 /*--------------
      Slider
 ---------------*/
@@ -349,8 +373,7 @@
 }
 
 /* Input */
-.ui.slider.checkbox input[type="checkbox"],
-.ui.slider.checkbox input[type="radio"] {
+.ui.slider.checkbox input {
   width: @sliderWidth;
   height: @sliderHeight;
 }
@@ -408,10 +431,8 @@
 }
 
 /* Focus */
-.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 {
+.ui.slider.checkbox input:focus ~ .box:before,
+.ui.slider.checkbox input:focus ~ label:before {
   background-color: @toggleFocusColor;
   border: none;
 }
@@ -427,19 +448,29 @@
 }
 
 /* Active */
-.ui.slider.checkbox :checked ~ .box,
-.ui.slider.checkbox :checked ~ label {
-  color: @sliderOnLabelColor;
+.ui.slider.checkbox input:checked ~ .box,
+.ui.slider.checkbox input:checked ~ label {
+  color: @sliderOnLabelColor !important;
 }
-.ui.slider.checkbox :checked ~ .box:before,
-.ui.slider.checkbox :checked ~ label:before {
-  background-color: @sliderOnLineColor;
+.ui.slider.checkbox input:checked ~ .box:before,
+.ui.slider.checkbox input:checked ~ label:before {
+  background-color: @sliderOnLineColor !important;
 }
-.ui.slider.checkbox :checked ~ .box:after,
-.ui.slider.checkbox :checked ~ label:after {
+.ui.slider.checkbox input:checked ~ .box:after,
+.ui.slider.checkbox input:checked ~ label:after {
   left: @sliderTravelDistance;
 }
 
+/* Active Focus */
+.ui.slider.checkbox input:focus:checked ~ .box,
+.ui.slider.checkbox input:focus:checked ~ label {
+  color: @sliderOnFocusLabelColor !important;
+}
+.ui.slider.checkbox input:focus:checked ~ .box:before,
+.ui.slider.checkbox input:focus:checked ~ label:before {
+  background-color: @sliderOnFocusLineColor !important;
+}
+
 
 /*--------------
      Toggle
@@ -450,8 +481,7 @@
 }
 
 /* Input */
-.ui.toggle.checkbox input[type="checkbox"],
-.ui.toggle.checkbox input[type="radio"] {
+.ui.toggle.checkbox input {
   width: @toggleWidth;
   height: @toggleHeight;
 }
@@ -505,18 +535,14 @@
   transition: @toggleHandleTransition;
 }
 
-.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 {
+.ui.toggle.checkbox input ~ .box:after,
+.ui.toggle.checkbox input ~ label:after {
   left: @toggleOffOffset;
 }
 
 /* Focus */
-.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 {
+.ui.toggle.checkbox input:focus ~ .box:before,
+.ui.toggle.checkbox input:focus ~ label:before {
   background-color: @toggleFocusColor;
   border: none;
 }
@@ -531,17 +557,28 @@
 /* Active */
 .ui.toggle.checkbox input:checked ~ .box,
 .ui.toggle.checkbox input:checked ~ label {
-  color: @toggleOnLabelColor;
+  color: @toggleOnLabelColor !important;
 }
 .ui.toggle.checkbox input:checked ~ .box:before,
 .ui.toggle.checkbox input:checked ~ label:before {
-  background-color: @toggleOnLaneColor;
+  background-color: @toggleOnLaneColor !important;
 }
 .ui.toggle.checkbox input:checked ~ .box:after,
 .ui.toggle.checkbox input:checked ~ label:after {
   left: @toggleOnOffset;
 }
 
+
+/* Active Focus */
+.ui.toggle.checkbox input:focus:checked ~ .box,
+.ui.toggle.checkbox input:focus:checked ~ label {
+  color: @toggleOnFocusLabelColor !important;
+}
+.ui.toggle.checkbox input:focus:checked ~ .box:before,
+.ui.toggle.checkbox input:focus:checked ~ label:before {
+  background-color: @toggleOnFocusLaneColor !important;
+}
+
 /*******************************
             Variations
 *******************************/