semantic-ui-sass 1.12.3.0 → 2.0.4.0

data/app/assets/stylesheets/semantic-ui/elements/_step.scss

@@ -1,81 +1,135 @@
 /*!
- * # Semantic UI 1.12.3 - Step
+ * # Semantic UI 2.0.4 - Step
  * http://github.com/semantic-org/semantic-ui/
  *
  *
- * Copyright 2014 Contributors
+ * Copyright 2015 Contributors
  * Released under the MIT license
  * http://opensource.org/licenses/MIT
  *
  */
 
 
+/*******************************
+            Plural
+*******************************/
+
+.ui.steps {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -webkit-box-align: stretch;
+  -webkit-align-items: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+  margin: 1em 0em;
+  background: '';
+  box-shadow: none;
+  line-height: 1.14285714em;
+  border-radius: 0.28571429rem;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+}
+
+/* First Steps */
+.ui.steps:first-child {
+  margin-top: 0em;
+}
+
+/* Last Steps */
+.ui.steps:last-child {
+  margin-bottom: 0em;
+}
+
+
 /*******************************
            Singular
 *******************************/
 
 .ui.steps .step {
   position: relative;
-  display: table-cell;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+      -ms-flex-direction: row;
+          flex-direction: row;
   vertical-align: middle;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   margin: 0em 0em;
-  padding: 0.9285em 1.5em 0.9285em 2.25em;
+  padding: 1.14285714em 2em;
   background: #ffffff;
-  color: rgba(0, 0, 0, 0.8);
-  box-shadow: 0px 0px 0px 1px #d4d4d5;
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: none;
   border-radius: 0em;
+  border: none;
+  border-right: 1px solid rgba(34, 36, 38, 0.15);
+  -webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
+          transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
 }
+
+/* Arrow */
 .ui.steps .step:after {
+  display: none;
   position: absolute;
   z-index: 2;
   content: '';
   top: 50%;
-  right: 0em;
+  right: 0%;
   border: medium none;
   background-color: #ffffff;
-  width: 1.5em;
-  height: 1.5em;
-  border-bottom: 1px solid rgba(39, 41, 43, 0.15);
-  border-right: 1px solid rgba(39, 41, 43, 0.15);
+  width: 1.14285714em;
+  height: 1.14285714em;
+  border-style: solid;
+  border-color: rgba(34, 36, 38, 0.15);
+  border-width: 0px 1px 1px 0px;
+  -webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
+          transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
   -webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg);
       -ms-transform: translateY(-50%) translateX(50%) rotate(-45deg);
           transform: translateY(-50%) translateX(50%) rotate(-45deg);
 }
-.ui.steps .step,
-.ui.steps .step:after {
-  -webkit-transition: background-color 0.2s ease, opacity 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
-          transition: background-color 0.2s ease, opacity 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
-}
-
-
-/*******************************
-            Plural
-*******************************/
 
-.ui.steps {
-  display: table;
-  table-layout: fixed;
-  background: '';
-  box-shadow: '';
-  line-height: 1.142rem;
-  box-sizing: border-box;
-  border-radius: 0.2857rem;
-}
+/* First Step */
 .ui.steps .step:first-child {
-  padding-left: 1.5em;
-  border-radius: 0.2857rem 0em 0em 0.2857rem;
-}
-.ui.steps .step:last-child {
-  border-radius: 0em 0.2857rem 0.2857rem 0em;
+  padding-left: 2em;
+  border-radius: 0.28571429rem 0em 0em 0.28571429rem;
 }
+
+/* Only Step */
 .ui.steps .step:only-child {
-  border-radius: 0.2857rem;
+  border-radius: 0.28571429rem;
 }
+
+/* Last Step */
 .ui.steps .step:last-child {
-  margin-right: 0em;
+  border-radius: 0em 0.28571429rem 0.28571429rem 0em;
 }
-.ui.steps .step:last-child:after {
-  display: none;
+.ui.steps .step:last-child {
+  border-right: none;
+  margin-right: 0em;
 }
 
 
@@ -87,30 +141,53 @@
 /* Title */
 .ui.steps .step .title {
   font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
-  font-size: 1.0714em;
+  font-size: 1.14285714em;
   font-weight: bold;
 }
+.ui.steps .step > .title {
+  width: 100%;
+}
 
 /* Description */
 .ui.steps .step .description {
   font-weight: normal;
-  font-size: 0.9285em;
-  color: rgba(0, 0, 0, 0.8);
+  font-size: 0.92857143em;
+  color: rgba(0, 0, 0, 0.87);
+}
+.ui.steps .step > .description {
+  width: 100%;
 }
 .ui.steps .step .title ~ .description {
-  margin-top: 0.1em;
+  margin-top: 0.25em;
 }
 
 /* Icon */
+.ui.steps .step > .icon {
+  line-height: 1;
+  font-size: 2.5em;
+  margin: 0em 1rem 0em 0em;
+}
 .ui.steps .step > .icon,
 .ui.steps .step > .icon ~ .content {
-  display: table-cell;
-  vertical-align: middle;
+  display: block;
+  -webkit-box-flex: 0;
+  -webkit-flex: 0 1 auto;
+      -ms-flex: 0 1 auto;
+          flex: 0 1 auto;
+  -webkit-align-self: middle;
+      -ms-flex-item-align: middle;
+          align-self: middle;
 }
-.ui.steps .step > .icon {
-  font-size: 2em;
-  margin: 0em;
-  padding-right: 0.6em;
+.ui.steps .step > .icon ~ .content {
+  -webkit-box-flex: 1 0 auto;
+  -webkit-flex-grow: 1 0 auto;
+      -ms-flex-positive: 1 0 auto;
+          flex-grow: 1 0 auto;
+}
+
+/* Horizontal Icon */
+.ui.steps:not(.vertical) .step > .icon {
+  width: auto;
 }
 
 /* Link */
@@ -133,18 +210,24 @@
   counter-reset: ordered;
 }
 .ui.ordered.steps .step:before {
-  display: table-cell;
+  display: block;
   position: static;
   text-align: center;
   content: counters(ordered, ".");
-  vertical-align: middle;
-  padding-right: 0.6em;
-  font-size: 2em;
+  -webkit-align-self: middle;
+      -ms-flex-item-align: middle;
+          align-self: middle;
+  margin-right: 1rem;
+  font-size: 2.5em;
   counter-increment: ordered;
+  font-family: inherit;
+  font-weight: bold;
 }
 .ui.ordered.steps .step > * {
-  display: table-cell;
-  vertical-align: middle;
+  display: block;
+  -webkit-align-self: middle;
+      -ms-flex-item-align: middle;
+          align-self: middle;
 }
 
 /*--------------
@@ -152,31 +235,57 @@
 ---------------*/
 
 .ui.vertical.steps {
-  display: inline-block;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
   overflow: visible;
 }
 .ui.vertical.steps .step {
-  display: block;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
   border-radius: 0em;
-  padding: 0.9285em 1.5em;
+  padding: 1.14285714em 2em;
+  border-right: none;
+  border-bottom: 1px solid rgba(34, 36, 38, 0.15);
 }
 .ui.vertical.steps .step:first-child {
-  padding: 0.9285em 1.5em;
-  border-radius: 0.2857rem 0.2857rem 0em 0em;
+  padding: 1.14285714em 2em;
+  border-radius: 0.28571429rem 0.28571429rem 0em 0em;
 }
 .ui.vertical.steps .step:last-child {
-  border-radius: 0em 0em 0.2857rem 0.2857rem;
+  border-bottom: none;
+  border-radius: 0em 0em 0.28571429rem 0.28571429rem;
 }
 
 /* Arrow */
 .ui.vertical.steps .step:after {
   display: none;
 }
-
-/* Active Arrow */
+.ui.vertical.steps .step:after {
+  top: 50%;
+  right: 0%;
+  border-width: 0px 1px 1px 0px;
+}
+.ui.vertical.steps .step:after {
+  display: none;
+}
 .ui.vertical.steps .active.step:after {
   display: block;
 }
+.ui.vertical.steps .step:last-child:after {
+  display: none;
+}
+.ui.vertical.steps .active.step:last-child:after {
+  display: block;
+}
 
 /*---------------
     Responsive
@@ -186,24 +295,49 @@
 /* Mobile (Default) */
 @media only screen and (max-width: 767px) {
   .ui.steps {
+    display: -webkit-inline-box;
+    display: -webkit-inline-flex;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
     overflow: visible;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column;
   }
   .ui.steps .step {
-    display: block;
+    width: 100% !important;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column;
     border-radius: 0em;
-    padding: 0.9285em 1.5em;
+    padding: 1.14285714em 2em;
   }
   .ui.steps .step:first-child {
-    padding: 0.9285em 1.5em;
-    border-radius: 0.2857rem 0.2857rem 0em 0em;
+    padding: 1.14285714em 2em;
+    border-radius: 0.28571429rem 0.28571429rem 0em 0em;
   }
   .ui.steps .step:last-child {
-    border-radius: 0em 0em 0.2857rem 0.2857rem;
+    border-radius: 0em 0em 0.28571429rem 0.28571429rem;
   }
   
 /* Arrow */
   .ui.steps .step:after {
-    display: none;
+    display: none !important;
+  }
+  
+/* Content */
+  .ui.steps .step .content {
+    text-align: center;
+  }
+  
+/* Icon */
+  .ui.steps .step > .icon,
+  .ui.ordered.steps .step:before {
+    margin: 0em 0em 1rem 0em;
   }
 }
 
@@ -218,7 +352,7 @@
 .ui.steps .link.step:hover,
 .ui.steps a.step:hover::after,
 .ui.steps a.step:hover {
-  background: #fafafa;
+  background: #f9fafb;
   color: rgba(0, 0, 0, 0.8);
 }
 
@@ -227,40 +361,54 @@
 .ui.steps .link.step:active,
 .ui.steps a.step:active::after,
 .ui.steps a.step:active {
-  background: #f0f0f0;
-  color: rgba(0, 0, 0, 0.8);
+  background: #f3f4f5;
+  color: rgba(0, 0, 0, 0.9);
 }
 
 /* Active */
 .ui.steps .step.active {
   cursor: auto;
-  background: #f0f0f0;
+  background: #f3f4f5;
 }
 .ui.steps .step.active:after {
-  background: #f0f0f0;
+  background: #f3f4f5;
 }
 .ui.steps .step.active .title {
-  color: #009fda;
+  color: #4183c4;
 }
 .ui.ordered.steps .step.active:before,
 .ui.steps .active.step .icon {
   color: rgba(0, 0, 0, 0.85);
 }
 
+/* Active Arrow */
+.ui.steps .step:after {
+  display: block;
+}
+.ui.steps .active.step:after {
+  display: block;
+}
+.ui.steps .step:last-child:after {
+  display: none;
+}
+.ui.steps .active.step:last-child:after {
+  display: none;
+}
+
 /* Active Hover */
 .ui.steps .link.active.step:hover::after,
 .ui.steps .link.active.step:hover,
 .ui.steps a.active.step:hover::after,
 .ui.steps a.active.step:hover {
   cursor: pointer;
-  background: #ececec;
-  color: rgba(0, 0, 0, 0.8);
+  background: #dcddde;
+  color: rgba(0, 0, 0, 0.87);
 }
 
 /* Completed */
 .ui.steps .step.completed > .icon:before,
 .ui.ordered.steps .step.completed:before {
-  color: #5bbd72;
+  color: #21ba45;
 }
 
 /* Disabled */
@@ -290,26 +438,52 @@
 
 
 /* Tablet Or Below */
-@media only screen and (min-width: 992px) {
+@media only screen and (max-width: 992px) {
   .ui[class*="tablet stackable"].steps {
+    display: -webkit-inline-box;
+    display: -webkit-inline-flex;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
     overflow: visible;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column;
   }
+  
+/* Steps */
   .ui[class*="tablet stackable"].steps .step {
-    display: block;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+        -ms-flex-direction: column;
+            flex-direction: column;
     border-radius: 0em;
-    padding: 0.9285em 1.5em;
+    padding: 1.14285714em 2em;
   }
   .ui[class*="tablet stackable"].steps .step:first-child {
-    padding: 0.9285em 1.5em;
-    border-radius: 0.2857rem 0.2857rem 0em 0em;
+    padding: 1.14285714em 2em;
+    border-radius: 0.28571429rem 0.28571429rem 0em 0em;
   }
   .ui[class*="tablet stackable"].steps .step:last-child {
-    border-radius: 0em 0em 0.2857rem 0.2857rem;
+    border-radius: 0em 0em 0.28571429rem 0.28571429rem;
   }
   
 /* Arrow */
   .ui[class*="tablet stackable"].steps .step:after {
-    display: none;
+    display: none !important;
+  }
+  
+/* Content */
+  .ui[class*="tablet stackable"].steps .step .content {
+    text-align: center;
+  }
+  
+/* Icon */
+  .ui[class*="tablet stackable"].steps .step > .icon,
+  .ui[class*="tablet stackable"].ordered.steps .step:before {
+    margin: 0em 0em 1rem 0em;
   }
 }
 
@@ -320,6 +494,10 @@
 
 /* Fluid */
 .ui.fluid.steps {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   width: 100%;
 }
 
@@ -329,27 +507,29 @@
 
 
 /* Top */
-.attached.ui.steps {
-  margin: 0em;
-  border-radius: 0.2857rem 0.2857rem 0em 0em;
+.ui.attached.steps {
+  width: calc(100% +  2px ) !important;
+  margin: 0em -1px -1px;
+  max-width: calc(100% +  2px );
+  border-radius: 0.28571429rem 0.28571429rem 0em 0em;
 }
-.attached.ui.steps .step:first-child {
-  border-radius: 0.2857rem 0em 0em 0em;
+.ui.attached.steps .step:first-child {
+  border-radius: 0.28571429rem 0em 0em 0em;
 }
-.attached.ui.steps .step:last-child {
-  border-radius: 0em 0.2857rem 0em 0em;
+.ui.attached.steps .step:last-child {
+  border-radius: 0em 0.28571429rem 0em 0em;
 }
 
 /* Bottom */
-.bottom.attached.ui.steps {
-  margin: -1px 0em 0em;
-  border-radius: 0em 0em 0.2857rem 0.2857rem;
+.ui.bottom.attached.steps {
+  margin: -1px -1px 0em;
+  border-radius: 0em 0em 0.28571429rem 0.28571429rem;
 }
-.bottom.attached.ui.steps .step:first-child {
-  border-radius: 0em 0em 0em 0.2857rem;
+.ui.bottom.attached.steps .step:first-child {
+  border-radius: 0em 0em 0em 0.28571429rem;
 }
-.bottom.attached.ui.steps .step:last-child {
-  border-radius: 0em 0em 0.2857rem 0em;
+.ui.bottom.attached.steps .step:last-child {
+  border-radius: 0em 0em 0.28571429rem 0em;
 }
 
 /*-------------------
@@ -366,6 +546,18 @@
 .ui.eight.steps {
   width: 100%;
 }
+.ui.one.steps > .step,
+.ui.two.steps > .step,
+.ui.three.steps > .step,
+.ui.four.steps > .step,
+.ui.five.steps > .step,
+.ui.six.steps > .step,
+.ui.seven.steps > .step,
+.ui.eight.steps > .step {
+  -webkit-flex-wrap: nowrap;
+      -ms-flex-wrap: nowrap;
+          flex-wrap: nowrap;
+}
 .ui.one.steps > .step {
   width: 100%;
 }