fomantic-ui-sass 2.8.6 → 2.8.8

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

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI - Icon
+ * # Fomantic-UI 2.8.8 - Icon
  * http://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -54,9 +54,12 @@ i.icon:before {
       Loading
   ---------------*/
 
-i.icon.loading {
+i.loading.icon {
   height: 1em;
   line-height: 1;
+}
+i.loading.icon,
+i.loading.icons {
   -webkit-animation: loader 2s linear infinite;
           animation: loader 2s linear infinite;
 }
@@ -125,6 +128,10 @@ i.circular.icon {
   width: 2em !important;
   height: 2em !important;
 }
+i.circular.icon.colored {
+  -webkit-box-shadow: 0 0 0 0.1em currentColor inset;
+          box-shadow: 0 0 0 0.1em currentColor inset;
+}
 i.circular.inverted.icon {
   border: none;
   -webkit-box-shadow: none;
@@ -144,6 +151,15 @@ i.vertically.flipped.icon {
   -webkit-transform: scale(1, -1);
           transform: scale(1, -1);
 }
+.icons i.flipped.icon:not(.corner):not(:first-child),
+.icons i.horizontally.flipped.icon:not(.corner):not(:first-child) {
+  -webkit-transform: translateX(-50%) translateY(-50%) scale(-1, 1);
+          transform: translateX(-50%) translateY(-50%) scale(-1, 1);
+}
+.icons i.vertically.flipped.icon:not(.corner):not(:first-child) {
+  -webkit-transform: translateX(-50%) translateY(-50%) scale(1, -1);
+          transform: translateX(-50%) translateY(-50%) scale(1, -1);
+}
 
 /*-------------------
         Rotated
@@ -164,6 +180,21 @@ i.halfway.rotated.icon {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
+.icons i.rotated.rotated.icon:not(.corner):not(:first-child),
+.icons i.right.rotated.icon:not(.corner):not(:first-child),
+.icons i.clockwise.rotated.icon:not(.corner):not(:first-child) {
+  -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
+          transform: translateX(-50%) translateY(-50%) rotate(90deg);
+}
+.icons i.left.rotated.icon:not(.corner):not(:first-child),
+.icons i.counterclockwise.rotated.icon:not(.corner):not(:first-child) {
+  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
+          transform: translateX(-50%) translateY(-50%) rotate(-90deg);
+}
+.icons i.halfway.rotated.icon:not(.corner):not(:first-child) {
+  -webkit-transform: translateX(-50%) translateY(-50%) rotate(180deg);
+          transform: translateX(-50%) translateY(-50%) rotate(180deg);
+}
 
 /*--------------------------
         Flipped & Rotated
@@ -199,6 +230,36 @@ i.halfway.rotated.vertically.flipped.icon {
   -webkit-transform: scale(1, -1) rotate(180deg);
           transform: scale(1, -1) rotate(180deg);
 }
+.icons i.rotated.flipped.icon:not(.corner):not(:first-child),
+.icons i.right.rotated.flipped.icon:not(.corner):not(:first-child),
+.icons i.clockwise.rotated.flipped.icon:not(.corner):not(:first-child) {
+  -webkit-transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(90deg);
+          transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(90deg);
+}
+.icons i.left.rotated.flipped.icon:not(.corner):not(:first-child),
+.icons i.counterclockwise.rotated.flipped.icon:not(.corner):not(:first-child) {
+  -webkit-transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(-90deg);
+          transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(-90deg);
+}
+.icons i.halfway.rotated.flipped.icon:not(.corner):not(:first-child) {
+  -webkit-transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(180deg);
+          transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(180deg);
+}
+.icons i.rotated.vertically.flipped.icon:not(.corner):not(:first-child),
+.icons i.right.rotated.vertically.flipped.icon:not(.corner):not(:first-child),
+.icons i.clockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) {
+  -webkit-transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(90deg);
+          transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(90deg);
+}
+.icons i.left.rotated.vertically.flipped.icon:not(.corner):not(:first-child),
+.icons i.counterclockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) {
+  -webkit-transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(-90deg);
+          transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(-90deg);
+}
+.icons i.halfway.rotated.vertically.flipped.icon:not(.corner):not(:first-child) {
+  -webkit-transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(180deg);
+          transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(180deg);
+}
 
 /*-------------------
         Bordered
@@ -213,6 +274,10 @@ i.bordered.icon {
   -webkit-box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
           box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
 }
+i.bordered.icon.colored {
+  -webkit-box-shadow: 0 0 0 0.1em currentColor inset;
+          box-shadow: 0 0 0 0.1em currentColor inset;
+}
 i.bordered.inverted.icon {
   border: none;
   -webkit-box-shadow: none;
@@ -238,168 +303,198 @@ i.inverted.icon {
        Colors
 --------------------*/
 
-i.primary.icon.icon.icon.icon {
+i.primary.icon.icon.icon.icon.icon {
   color: #2185D0;
 }
-i.inverted.primary.icon.icon.icon.icon {
+i.inverted.primary.icon.icon.icon.icon.icon {
   color: #54C8FF;
 }
-i.inverted.bordered.primary.icon.icon.icon.icon,
-i.inverted.circular.primary.icon.icon.icon.icon {
+i.inverted.bordered.primary.icon.icon.icon.icon.icon,
+i.inverted.circular.primary.icon.icon.icon.icon.icon,
+i.inverted.bordered.primary.icons,
+i.inverted.circular.primary.icons {
   background-color: #2185D0;
   color: #FFFFFF;
 }
-i.secondary.icon.icon.icon.icon {
+i.secondary.icon.icon.icon.icon.icon {
   color: #1B1C1D;
 }
-i.inverted.secondary.icon.icon.icon.icon {
+i.inverted.secondary.icon.icon.icon.icon.icon {
   color: #545454;
 }
-i.inverted.bordered.secondary.icon.icon.icon.icon,
-i.inverted.circular.secondary.icon.icon.icon.icon {
+i.inverted.bordered.secondary.icon.icon.icon.icon.icon,
+i.inverted.circular.secondary.icon.icon.icon.icon.icon,
+i.inverted.bordered.secondary.icons,
+i.inverted.circular.secondary.icons {
   background-color: #1B1C1D;
   color: #FFFFFF;
 }
-i.red.icon.icon.icon.icon {
+i.red.icon.icon.icon.icon.icon {
   color: #DB2828;
 }
-i.inverted.red.icon.icon.icon.icon {
+i.inverted.red.icon.icon.icon.icon.icon {
   color: #FF695E;
 }
-i.inverted.bordered.red.icon.icon.icon.icon,
-i.inverted.circular.red.icon.icon.icon.icon {
+i.inverted.bordered.red.icon.icon.icon.icon.icon,
+i.inverted.circular.red.icon.icon.icon.icon.icon,
+i.inverted.bordered.red.icons,
+i.inverted.circular.red.icons {
   background-color: #DB2828;
   color: #FFFFFF;
 }
-i.orange.icon.icon.icon.icon {
+i.orange.icon.icon.icon.icon.icon {
   color: #F2711C;
 }
-i.inverted.orange.icon.icon.icon.icon {
+i.inverted.orange.icon.icon.icon.icon.icon {
   color: #FF851B;
 }
-i.inverted.bordered.orange.icon.icon.icon.icon,
-i.inverted.circular.orange.icon.icon.icon.icon {
+i.inverted.bordered.orange.icon.icon.icon.icon.icon,
+i.inverted.circular.orange.icon.icon.icon.icon.icon,
+i.inverted.bordered.orange.icons,
+i.inverted.circular.orange.icons {
   background-color: #F2711C;
   color: #FFFFFF;
 }
-i.yellow.icon.icon.icon.icon {
+i.yellow.icon.icon.icon.icon.icon {
   color: #FBBD08;
 }
-i.inverted.yellow.icon.icon.icon.icon {
+i.inverted.yellow.icon.icon.icon.icon.icon {
   color: #FFE21F;
 }
-i.inverted.bordered.yellow.icon.icon.icon.icon,
-i.inverted.circular.yellow.icon.icon.icon.icon {
+i.inverted.bordered.yellow.icon.icon.icon.icon.icon,
+i.inverted.circular.yellow.icon.icon.icon.icon.icon,
+i.inverted.bordered.yellow.icons,
+i.inverted.circular.yellow.icons {
   background-color: #FBBD08;
   color: #FFFFFF;
 }
-i.olive.icon.icon.icon.icon {
+i.olive.icon.icon.icon.icon.icon {
   color: #B5CC18;
 }
-i.inverted.olive.icon.icon.icon.icon {
+i.inverted.olive.icon.icon.icon.icon.icon {
   color: #D9E778;
 }
-i.inverted.bordered.olive.icon.icon.icon.icon,
-i.inverted.circular.olive.icon.icon.icon.icon {
+i.inverted.bordered.olive.icon.icon.icon.icon.icon,
+i.inverted.circular.olive.icon.icon.icon.icon.icon,
+i.inverted.bordered.olive.icons,
+i.inverted.circular.olive.icons {
   background-color: #B5CC18;
   color: #FFFFFF;
 }
-i.green.icon.icon.icon.icon {
+i.green.icon.icon.icon.icon.icon {
   color: #21BA45;
 }
-i.inverted.green.icon.icon.icon.icon {
+i.inverted.green.icon.icon.icon.icon.icon {
   color: #2ECC40;
 }
-i.inverted.bordered.green.icon.icon.icon.icon,
-i.inverted.circular.green.icon.icon.icon.icon {
+i.inverted.bordered.green.icon.icon.icon.icon.icon,
+i.inverted.circular.green.icon.icon.icon.icon.icon,
+i.inverted.bordered.green.icons,
+i.inverted.circular.green.icons {
   background-color: #21BA45;
   color: #FFFFFF;
 }
-i.teal.icon.icon.icon.icon {
+i.teal.icon.icon.icon.icon.icon {
   color: #00B5AD;
 }
-i.inverted.teal.icon.icon.icon.icon {
+i.inverted.teal.icon.icon.icon.icon.icon {
   color: #6DFFFF;
 }
-i.inverted.bordered.teal.icon.icon.icon.icon,
-i.inverted.circular.teal.icon.icon.icon.icon {
+i.inverted.bordered.teal.icon.icon.icon.icon.icon,
+i.inverted.circular.teal.icon.icon.icon.icon.icon,
+i.inverted.bordered.teal.icons,
+i.inverted.circular.teal.icons {
   background-color: #00B5AD;
   color: #FFFFFF;
 }
-i.blue.icon.icon.icon.icon {
+i.blue.icon.icon.icon.icon.icon {
   color: #2185D0;
 }
-i.inverted.blue.icon.icon.icon.icon {
+i.inverted.blue.icon.icon.icon.icon.icon {
   color: #54C8FF;
 }
-i.inverted.bordered.blue.icon.icon.icon.icon,
-i.inverted.circular.blue.icon.icon.icon.icon {
+i.inverted.bordered.blue.icon.icon.icon.icon.icon,
+i.inverted.circular.blue.icon.icon.icon.icon.icon,
+i.inverted.bordered.blue.icons,
+i.inverted.circular.blue.icons {
   background-color: #2185D0;
   color: #FFFFFF;
 }
-i.violet.icon.icon.icon.icon {
+i.violet.icon.icon.icon.icon.icon {
   color: #6435C9;
 }
-i.inverted.violet.icon.icon.icon.icon {
+i.inverted.violet.icon.icon.icon.icon.icon {
   color: #A291FB;
 }
-i.inverted.bordered.violet.icon.icon.icon.icon,
-i.inverted.circular.violet.icon.icon.icon.icon {
+i.inverted.bordered.violet.icon.icon.icon.icon.icon,
+i.inverted.circular.violet.icon.icon.icon.icon.icon,
+i.inverted.bordered.violet.icons,
+i.inverted.circular.violet.icons {
   background-color: #6435C9;
   color: #FFFFFF;
 }
-i.purple.icon.icon.icon.icon {
+i.purple.icon.icon.icon.icon.icon {
   color: #A333C8;
 }
-i.inverted.purple.icon.icon.icon.icon {
+i.inverted.purple.icon.icon.icon.icon.icon {
   color: #DC73FF;
 }
-i.inverted.bordered.purple.icon.icon.icon.icon,
-i.inverted.circular.purple.icon.icon.icon.icon {
+i.inverted.bordered.purple.icon.icon.icon.icon.icon,
+i.inverted.circular.purple.icon.icon.icon.icon.icon,
+i.inverted.bordered.purple.icons,
+i.inverted.circular.purple.icons {
   background-color: #A333C8;
   color: #FFFFFF;
 }
-i.pink.icon.icon.icon.icon {
+i.pink.icon.icon.icon.icon.icon {
   color: #E03997;
 }
-i.inverted.pink.icon.icon.icon.icon {
+i.inverted.pink.icon.icon.icon.icon.icon {
   color: #FF8EDF;
 }
-i.inverted.bordered.pink.icon.icon.icon.icon,
-i.inverted.circular.pink.icon.icon.icon.icon {
+i.inverted.bordered.pink.icon.icon.icon.icon.icon,
+i.inverted.circular.pink.icon.icon.icon.icon.icon,
+i.inverted.bordered.pink.icons,
+i.inverted.circular.pink.icons {
   background-color: #E03997;
   color: #FFFFFF;
 }
-i.brown.icon.icon.icon.icon {
+i.brown.icon.icon.icon.icon.icon {
   color: #A5673F;
 }
-i.inverted.brown.icon.icon.icon.icon {
+i.inverted.brown.icon.icon.icon.icon.icon {
   color: #D67C1C;
 }
-i.inverted.bordered.brown.icon.icon.icon.icon,
-i.inverted.circular.brown.icon.icon.icon.icon {
+i.inverted.bordered.brown.icon.icon.icon.icon.icon,
+i.inverted.circular.brown.icon.icon.icon.icon.icon,
+i.inverted.bordered.brown.icons,
+i.inverted.circular.brown.icons {
   background-color: #A5673F;
   color: #FFFFFF;
 }
-i.grey.icon.icon.icon.icon {
+i.grey.icon.icon.icon.icon.icon {
   color: #767676;
 }
-i.inverted.grey.icon.icon.icon.icon {
+i.inverted.grey.icon.icon.icon.icon.icon {
   color: #DCDDDE;
 }
-i.inverted.bordered.grey.icon.icon.icon.icon,
-i.inverted.circular.grey.icon.icon.icon.icon {
+i.inverted.bordered.grey.icon.icon.icon.icon.icon,
+i.inverted.circular.grey.icon.icon.icon.icon.icon,
+i.inverted.bordered.grey.icons,
+i.inverted.circular.grey.icons {
   background-color: #767676;
   color: #FFFFFF;
 }
-i.black.icon.icon.icon.icon {
+i.black.icon.icon.icon.icon.icon {
   color: #1B1C1D;
 }
-i.inverted.black.icon.icon.icon.icon {
+i.inverted.black.icon.icon.icon.icon.icon {
   color: #545454;
 }
-i.inverted.bordered.black.icon.icon.icon.icon,
-i.inverted.circular.black.icon.icon.icon.icon {
+i.inverted.bordered.black.icon.icon.icon.icon.icon,
+i.inverted.circular.black.icon.icon.icon.icon.icon,
+i.inverted.bordered.black.icons,
+i.inverted.circular.black.icons {
   background-color: #1B1C1D;
   color: #FFFFFF;
 }
@@ -412,6 +507,7 @@ i.icon,
 i.icons {
   font-size: 1em;
   line-height: 1;
+  font-style: normal;
 }
 i.mini.mini.mini.icon,
 i.mini.mini.mini.icons {
@@ -463,15 +559,19 @@ i.icons .icon {
   position: absolute;
   top: 50%;
   left: 50%;
+  margin: 0;
+}
+i.icons .icon:not(.corner):not(.rotated):not(.flipped) {
   -webkit-transform: translateX(-50%) translateY(-50%);
           transform: translateX(-50%) translateY(-50%);
-  margin: 0;
 }
 i.icons .icon:first-child {
   position: static;
   width: auto;
   height: auto;
   vertical-align: top;
+}
+i.icons:not(.bordered):not(.circular) .icon:first-child:not(.rotated):not(.flipped) {
   -webkit-transform: none;
           transform: none;
 }
@@ -482,11 +582,13 @@ i.icons .corner.icon {
   left: auto;
   right: 0;
   bottom: 0;
-  -webkit-transform: none;
-          transform: none;
   font-size: 0.45em;
   text-shadow: -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF;
 }
+i.icons .corner.icon:not(.rotated):not(.flipped) {
+  -webkit-transform: none;
+          transform: none;
+}
 i.icons .icon.corner[class*="top right"] {
   top: 0;
   left: auto;
@@ -514,6 +616,76 @@ i.icons .icon.corner[class*="bottom right"] {
 i.icons .inverted.corner.icon {
   text-shadow: -1px -1px 0 #1B1C1D, 1px -1px 0 #1B1C1D, -1px 1px 0 #1B1C1D, 1px 1px 0 #1B1C1D;
 }
+
+
+/*************************************************
+     Bordered/circular with corner or group icons
+  *************************************************/
+
+i.bordered.icons,
+i.circular.icons {
+  width: 2em;
+  height: 2em;
+  -webkit-box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
+          box-shadow: 0 0 0 0.1em rgba(0, 0, 0, 0.1) inset;
+  vertical-align: middle;
+}
+i.bordered.icons.colored,
+i.circular.icons.colored {
+  -webkit-box-shadow: 0 0 0 0.1em currentColor inset;
+          box-shadow: 0 0 0 0.1em currentColor inset;
+}
+i.circular.icons {
+  border-radius: 500em;
+}
+i.bordered.icons i.icon:first-child,
+i.circular.icons i.icon:first-child {
+  position: absolute;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+          transform: translateX(-50%) translateY(-50%);
+}
+
+/* Inverted Icon */
+i.bordered.inverted.icons,
+i.circular.inverted.icons {
+  border: none;
+  -webkit-box-shadow: none;
+          box-shadow: none;
+  background-color: #1B1C1D;
+  color: #FFFFFF;
+}
+
+/* Corner Icon */
+i.bordered.icons .icon.corner,
+i.circular.icons .icon.corner,
+i.bordered.icons .icon.corner[class*="bottom right"],
+i.circular.icons .icon.corner[class*="bottom right"] {
+  top: auto;
+  left: auto;
+  right: 1.15em;
+  bottom: 1.15em;
+}
+i.bordered.icons .icon.corner[class*="top right"],
+i.circular.icons .icon.corner[class*="top right"] {
+  top: 1.15em;
+  left: auto;
+  right: 1.15em;
+  bottom: auto;
+}
+i.bordered.icons .icon.corner[class*="top left"],
+i.circular.icons .icon.corner[class*="top left"] {
+  top: 1.15em;
+  left: 1.15em;
+  right: auto;
+  bottom: auto;
+}
+i.bordered.icons .icon.corner[class*="bottom left"],
+i.circular.icons .icon.corner[class*="bottom left"] {
+  top: auto;
+  left: 1.15em;
+  right: auto;
+  bottom: 1.15em;
+}
 /*
 * Font Awesome 5.13.0 by @fontawesome [https://fontawesome.com]
 * License - https://fontawesome.com/license (Icons: CC BY 4.0 License, Fonts: SIL OFL 1.1 License, CSS: MIT License)
@@ -1061,6 +1233,9 @@ i.icon.chart.bar:before {
 i.icon.chart.line:before {
   content: "\f201";
 }
+i.icon.chartline:before {
+  content: "\f201";
+}
 i.icon.chart.pie:before {
   content: "\f200";
 }
@@ -3044,7 +3219,7 @@ i.icon.stop.circle:before {
 i.icon.stopwatch:before {
   content: "\f2f2";
 }
-i.icon.stopwatch.20:before {
+i.icon.stopwatch.twenty:before {
   content: "\f96f";
 }
 i.icon.store:before {
@@ -3970,6 +4145,9 @@ i.icon.like:before {
 i.icon.line.graph:before {
   content: "\f201";
 }
+i.icon.linegraph:before {
+  content: "\f201";
+}
 i.icon.linkify:before {
   content: "\f0c1";
 }

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

@@ -1,5 +1,5 @@
 /*!
- * # Fomantic-UI - Image
+ * # Fomantic-UI 2.8.8 - Image
  * http://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -74,27 +74,39 @@ img.ui.image {
     Vertical Aligned
   -------------------*/
 
-.ui.top.aligned.images .image,
 .ui.top.aligned.image,
 .ui.top.aligned.image svg,
 .ui.top.aligned.image img {
   display: inline-block;
   vertical-align: top;
 }
-.ui.middle.aligned.images .image,
 .ui.middle.aligned.image,
 .ui.middle.aligned.image svg,
 .ui.middle.aligned.image img {
   display: inline-block;
   vertical-align: middle;
 }
-.ui.bottom.aligned.images .image,
 .ui.bottom.aligned.image,
 .ui.bottom.aligned.image svg,
 .ui.bottom.aligned.image img {
   display: inline-block;
   vertical-align: bottom;
 }
+.ui.top.aligned.images .image,
+.ui.images .ui.top.aligned.image {
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+}
+.ui.middle.aligned.images .image,
+.ui.images .ui.middle.aligned.image {
+  -ms-flex-item-align: center;
+      align-self: center;
+}
+.ui.bottom.aligned.images .image,
+.ui.images .ui.bottom.aligned.image {
+  -ms-flex-item-align: end;
+      align-self: flex-end;
+}
 
 /*--------------
        Rounded
@@ -206,11 +218,28 @@ img.ui.bordered.image {
 .ui.floated.image:last-child {
   margin-bottom: 0;
 }
-.ui.centered.images,
 .ui.centered.image {
+  display: block;
   margin-left: auto;
   margin-right: auto;
 }
+.ui.centered.images {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: stretch;
+      -ms-flex-align: stretch;
+          align-items: stretch;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+}
 
 /*--------------
      Sizes