less-rails-semantic_ui 1.12.3.0 → 2.0.0.0

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

@@ -13,7 +13,7 @@
  * http://github.com/semantic-org/semantic-ui/
  *
  *
- * Copyright 2014 Contributors
+ * Copyright 2015 Contributors
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
@@ -35,7 +35,6 @@
 .ui.accordion,
 .ui.accordion .accordion {
   max-width: 100%;
-  font-size: @fontSize;
 }
 .ui.accordion .accordion {
   margin: @childAccordionMargin;

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

@@ -13,7 +13,7 @@
  * http://github.com/semantic-org/semantic-ui/
  *
  *
- * Copyright 2014 Contributors
+ * Copyright 2015 Contributors
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
@@ -40,25 +40,26 @@
 .ui.checkbox {
   position: relative;
   display: inline-block;
+  backface-visibility: hidden;
+  outline: none;
+  vertical-align: baseline;
 
   min-height: @checkboxSize;
-
-  font-size: 1rem;
+  font-size: @medium;
   line-height: @checkboxLineHeight;
   min-width: @checkboxSize;
-  backface-visibility: hidden;
-
-  outline: none;
-  vertical-align: middle;
 }
 .ui.checkbox input[type="checkbox"],
 .ui.checkbox input[type="radio"] {
+  cursor: pointer;
   position: absolute;
   top: 0px;
   left: 0px;
   opacity: 0 !important;
   outline: none;
-  z-index: -1;
+  z-index: 3;
+  width: @checkboxSize;
+  height: @checkboxSize;
 }
 
 
@@ -69,11 +70,14 @@
 
 .ui.checkbox .box,
 .ui.checkbox label {
+  cursor: auto;
+  position: relative;
   display: block;
-  cursor: pointer;
-  padding-left: @labelPadding;
+  padding-left: @labelDistance;
   outline: none;
 }
+
+.ui.checkbox .box,
 .ui.checkbox label {
   font-size: @fontSize;
 }
@@ -81,12 +85,11 @@
 .ui.checkbox .box:before,
 .ui.checkbox label:before {
   position: absolute;
+  top: 0px;
+  left: 0px;
 
-  line-height: 1;
   width: @checkboxSize;
   height: @checkboxSize;
-  top: 0em;
-  left: 0em;
   content: '';
 
   background: @checkboxBackground;
@@ -103,16 +106,16 @@
 .ui.checkbox .box:after,
 .ui.checkbox label:after {
   position: absolute;
+  font-size: @checkboxCheckFontSize;
   top: @checkboxCheckTop;
   left: @checkboxCheckLeft;
-  line-height: @checkboxSize;
-  width: @checkboxSize;
-  height: @checkboxSize;
+  width: @checkboxCheckSize;
+  height: @checkboxCheckSize;
   text-align: center;
 
   opacity: 0;
   color: @checkboxColor;
-  transition: all 0.1s ease;
+  transition: @checkboxTransition;
 }
 
 /*--------------
@@ -122,10 +125,8 @@
 /* Inside */
 .ui.checkbox label,
 .ui.checkbox + label {
-  cursor: pointer;
   color: @labelColor;
-  transition: color 0.2s ease;
-  user-select: none;
+  transition: @labelTransition;
 }
 
 /* Outside */
@@ -146,7 +147,7 @@
 .ui.checkbox .box:hover::before,
 .ui.checkbox label:hover::before {
   background: @checkboxHoverBackground;
-  border: @checkboxHoverBorder;
+  border-color: @checkboxHoverBorderColor;
 }
 .ui.checkbox label:hover,
 .ui.checkbox + label:hover {
@@ -159,42 +160,83 @@
 
 .ui.checkbox .box:active::before,
 .ui.checkbox label:active::before {
-  background: @checkboxSelectedBackground;
-  border: 1px solid @checkboxSelectedBorder;
+  background: @checkboxPressedBackground;
+  border-color: @checkboxPressedBorderColor;
+}
+.ui.checkbox .box:active::after,
+.ui.checkbox label:active::after {
+  color: @checkboxPressedColor;
 }
 .ui.checkbox input[type="checkbox"]:active ~ label,
 .ui.checkbox input[type="radio"]:active ~ label {
-  color: @labelSelectedColor;
+  color: @labelPressedColor;
 }
 
 /*--------------
-      Focus
+     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: @checkboxSelectedBackground;
-  border: 1px solid @checkboxSelectedBorder;
+  background: @checkboxFocusedBackground;
+  border-color: @checkboxFocusedBorderColor;
+}
+.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[type="checkbox"]:focus ~ label,
 .ui.checkbox input[type="radio"]:focus ~ label {
-  color: @labelSelectedColor;
+  color: @labelFocusedColor;
 }
 
-
 /*--------------
      Active
 ---------------*/
 
-.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;
+.ui.checkbox input:checked ~ .box:before,
+.ui.checkbox input:checked ~ label:before {
+  background: @checkboxActiveBackground;
+  border-color: @checkboxActiveBorderColor;
+}
+.ui.checkbox input:checked ~ .box:after,
+.ui.checkbox input:checked ~ label:after {
+  opacity: @checkboxActiveCheckOpacity;
+  color: @checkboxActiveCheckColor;
+}
+
+/*--------------
+  Indeterminate
+---------------*/
+
+.ui.checkbox input:indeterminate ~ .box:before,
+.ui.checkbox input:indeterminate ~ label:before {
+  background: @checkboxIndeterminateBackground;
+  border-color: @checkboxIndeterminateBorderColor;
+}
+.ui.checkbox input:indeterminate ~ .box:after,
+.ui.checkbox input:indeterminate ~ label:after {
+  opacity: @checkboxIndeterminateCheckOpacity;
+  color: @checkboxIndeterminateCheckColor;
 }
 
+/*--------------
+  Active Focus
+---------------*/
+
+.ui.checkbox input[type="radio"]:indeterminate:focus ~ .box:before,
+.ui.checkbox input[type="radio"]:indeterminate:focus ~ label:before,
+.ui.checkbox input[type="radio"]:checked:focus ~ .box:before,
+.ui.checkbox input[type="radio"]:checked:focus ~ label:before  {
+  background: @checkboxFocusedBackground;
+  border-color: @checkboxFocusedBorderColor;
+}
+
+
 /*--------------
     Read-Only
 ---------------*/
@@ -211,15 +253,33 @@
 
 .ui.disabled.checkbox .box:after,
 .ui.disabled.checkbox 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 {
+.ui.checkbox input[disabled] ~ .box:after,
+.ui.checkbox input[disabled] ~ label {
   cursor: default;
   opacity: @disabledCheckboxOpacity;
   color: @disabledCheckboxLabelColor;
 }
 
+/*--------------
+     Hidden
+---------------*/
+
+/* Initialized checkbox moves input below element
+ to prevent manually triggering */
+.ui.checkbox input[type="checkbox"].hidden,
+.ui.checkbox input[type="radio"].hidden {
+  z-index: -1;
+}
+
+/* Selectable Label */
+.ui.checkbox input[type="checkbox"].hidden + label,
+.ui.checkbox input[type="radio"].hidden + label {
+  cursor: pointer;
+  user-select: none;
+}
+
+
+
 
 /*******************************
              Types
@@ -231,51 +291,75 @@
 ---------------*/
 
 .ui.radio.checkbox {
-  min-height: @checkboxRadioSize;
+  min-height: @radioSize;
+}
+
+.ui.radio.checkbox .box,
+.ui.radio.checkbox label {
+  padding-left: @radioLabelDistance;
 }
 
 /* Box */
 .ui.radio.checkbox .box:before,
 .ui.radio.checkbox label:before {
-  width: @checkboxRadioSize;
-  height: @checkboxRadioSize;
-  border-radius: @circularRadius;
-  top: @checkboxRadioTop;
-  left: @checkboxRadioLeft;
+  content: '';
   transform: none;
+
+  width: @radioSize;
+  height: @radioSize;
+  border-radius: @circularRadius;
+  top: @radioTop;
+  left: @radioLeft;
 }
 
-/* Circle */
+/* Bullet */
 .ui.radio.checkbox .box:after,
 .ui.radio.checkbox label:after {
   border: none;
-  width: @checkboxRadioSize;
-  height: @checkboxRadioSize;
-  line-height: @checkboxRadioSize;
-  top: @checkboxRadioTop;
-  left: @checkboxRadioLeft;
-  font-size: @checkboxRadioCircleSize;
+  content: '' !important;
+  width: @radioSize;
+  height: @radioSize;
+  line-height: @radioSize;
 }
+
 /* Radio Checkbox */
 .ui.radio.checkbox .box:after,
 .ui.radio.checkbox label:after {
-  width: @checkboxRadioSize;
-  height: @checkboxRadioSize;
-  border-radius: @checkboxBulletRadius;
-  transform: scale(@checkboxBulletScale);
-  background-color: @checkboxBulletColor;
+  top: @bulletTop;
+  left: @bulletLeft;
+  width: @radioSize;
+  height: @radioSize;
+  border-radius: @bulletRadius;
+  transform: scale(@bulletScale);
+  background-color: @bulletColor;
 }
 
+/* Active */
+.ui.radio.checkbox input[type="radio"]:checked ~ .box:before,
+.ui.radio.checkbox input[type="radio"]:checked ~ label:before {
+  background-color: @radioActiveBackground;
+}
+.ui.radio.checkbox input[type="radio"]:checked ~ .box:after,
+.ui.radio.checkbox input[type="radio"]:checked ~ label:after {
+  background-color: @radioActiveBulletColor;
+}
 
 /*--------------
      Slider
 ---------------*/
 
 .ui.slider.checkbox {
-  cursor: pointer;
   min-height: @sliderHeight;
 }
 
+/* Input */
+.ui.slider.checkbox input[type="checkbox"],
+.ui.slider.checkbox input[type="radio"] {
+  width: @sliderWidth;
+  height: @sliderHeight;
+}
+
+/* Label */
 .ui.slider.checkbox .box,
 .ui.slider.checkbox label {
   padding-left: @sliderLabelDistance;
@@ -286,15 +370,15 @@
 /* Line */
 .ui.slider.checkbox .box:before,
 .ui.slider.checkbox label:before {
-  cursor: pointer;
   display: block;
-
   position: absolute;
   content: '';
-  top: @sliderLineVerticalOffset;
+  transform: none;
+  border: none !important;
   left: 0em;
   z-index: 1;
-  border: none !important;
+
+  top: @sliderLineVerticalOffset;
 
   background-color: @sliderLineColor;
   width: @sliderLineWidth;
@@ -302,9 +386,8 @@
 
   transform: none;
   border-radius: @sliderLineRadius;
-  transition:
-    background 0.3s ease
-  ;
+  transition: @sliderLineTransition;
+
 }
 
 /* Handle */
@@ -312,7 +395,7 @@
 .ui.slider.checkbox label:after {
   background: @handleBackground;
   position: absolute;
-  content: '';
+  content: '' !important;
   opacity: 1;
   z-index: 2;
 
@@ -325,9 +408,7 @@
   transform: none;
 
   border-radius: @circularRadius;
-  transition:
-    left 0.3s ease 0s
-  ;
+  transition: @sliderHandleTransition;
 }
 
 /* Focus */
@@ -350,22 +431,16 @@
 }
 
 /* Active */
-.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 {
+.ui.slider.checkbox :checked ~ .box,
+.ui.slider.checkbox :checked ~ label {
   color: @sliderOnLabelColor;
 }
-.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 {
+.ui.slider.checkbox :checked ~ .box:before,
+.ui.slider.checkbox :checked ~ label:before {
   background-color: @sliderOnLineColor;
 }
-.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 {
+.ui.slider.checkbox :checked ~ .box:after,
+.ui.slider.checkbox :checked ~ label:after {
   left: @sliderTravelDistance;
 }
 
@@ -375,10 +450,17 @@
 ---------------*/
 
 .ui.toggle.checkbox {
-  cursor: pointer;
   min-height: @toggleHeight;
 }
 
+/* Input */
+.ui.toggle.checkbox input[type="checkbox"],
+.ui.toggle.checkbox input[type="radio"] {
+  width: @toggleWidth;
+  height: @toggleHeight;
+}
+
+/* Label */
 .ui.toggle.checkbox .box,
 .ui.toggle.checkbox label {
   min-height: @toggleHandleSize;
@@ -392,17 +474,16 @@
 /* Switch */
 .ui.toggle.checkbox .box:before,
 .ui.toggle.checkbox label:before {
-  cursor: pointer;
   display: block;
-
   position: absolute;
   content: '';
-
-  top: @toggleLaneVerticalOffset;
   z-index: 1;
+  transform: none;
   border: none;
 
-  background-color: @neutralCheckbox;
+  top: @toggleLaneVerticalOffset;
+
+  background: @toggleLaneBackground;
   width: @toggleLaneWidth;
   height: @toggleLaneHeight;
   border-radius: @toggleHandleRadius;
@@ -413,7 +494,7 @@
 .ui.toggle.checkbox label:after {
   background: @handleBackground;
   position: absolute;
-  content: '';
+  content: '' !important;
   opacity: 1;
   z-index: 2;
 
@@ -425,10 +506,7 @@
   left: 0em;
 
   border-radius: @circularRadius;
-  transition:
-    background 0.3s ease 0s,
-    left 0.3s ease 0s
-  ;
+  transition: @toggleHandleTransition;
 }
 
 .ui.toggle.checkbox input[type="checkbox"] ~ .box:after,
@@ -455,22 +533,16 @@
 }
 
 /* Active */
-.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 {
+.ui.toggle.checkbox input:checked ~ .box,
+.ui.toggle.checkbox input:checked ~ label {
   color: @toggleOnLabelColor;
 }
-.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 {
+.ui.toggle.checkbox input:checked ~ .box:before,
+.ui.toggle.checkbox input:checked ~ label:before {
   background-color: @toggleOnLaneColor;
 }
-.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 {
+.ui.toggle.checkbox input:checked ~ .box:after,
+.ui.toggle.checkbox input:checked ~ label:after {
   left: @toggleOnOffset;
 }