RubyGems - fomantic-ui-sass - Versions diffs - 2.8.2 → 2.8.7 - Mend

fomantic-ui-sass 2.8.2 → 2.8.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

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

@@ -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

data/app/assets/stylesheets/semantic-ui/elements/_input.scss CHANGED Viewed

@@ -175,7 +175,7 @@
   color: #e7bdbc;
 }
 .ui.input.error > input:-ms-input-placeholder {
-  color: #e7bdbc;
+  color: #e7bdbc !important;
 }
 /* Focused Placeholder */
@@ -186,7 +186,7 @@
   color: #da9796;
 }
 .ui.input.error > input:focus:-ms-input-placeholder {
-  color: #da9796;
+  color: #da9796 !important;
 }
 .ui.input.info > input {
   background-color: #F8FFFF;
@@ -204,7 +204,7 @@
   color: #98cfe1;
 }
 .ui.input.info > input:-ms-input-placeholder {
-  color: #98cfe1;
+  color: #98cfe1 !important;
 }
 /* Focused Placeholder */
@@ -215,7 +215,7 @@
   color: #70bdd6;
 }
 .ui.input.info > input:focus:-ms-input-placeholder {
-  color: #70bdd6;
+  color: #70bdd6 !important;
 }
 .ui.input.success > input {
   background-color: #FCFFF5;
@@ -233,7 +233,7 @@
   color: #8fcf90;
 }
 .ui.input.success > input:-ms-input-placeholder {
-  color: #8fcf90;
+  color: #8fcf90 !important;
 }
 /* Focused Placeholder */
@@ -244,7 +244,7 @@
   color: #6cbf6d;
 }
 .ui.input.success > input:focus:-ms-input-placeholder {
-  color: #6cbf6d;
+  color: #6cbf6d !important;
 }
 .ui.input.warning > input {
   background-color: #FFFAF3;
@@ -262,7 +262,7 @@
   color: #edad3e;
 }
 .ui.input.warning > input:-ms-input-placeholder {
-  color: #edad3e;
+  color: #edad3e !important;
 }
 /* Focused Placeholder */
@@ -273,7 +273,7 @@
   color: #e39715;
 }
 .ui.input.warning > input:focus:-ms-input-placeholder {
-  color: #e39715;
+  color: #e39715 !important;
 }
@@ -458,7 +458,7 @@
 .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input {
   padding-right: 3.25em !important;
 }
-.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > .icon {
+.ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > i.icon {
   margin-right: 1.25em;
 }
@@ -471,13 +471,13 @@
 .ui[class*="left corner labeled"].icon.input > input {
   padding-left: 3.25em !important;
 }
-.ui[class*="left corner labeled"].icon.input > .icon {
+.ui[class*="left corner labeled"].icon.input > i.icon {
   margin-left: 1.25em;
 }
-.ui.icon.input > textarea ~ .icon {
+.ui.icon.input > textarea ~ i.icon {
   height: 3em;
 }
-:not(.field) > .ui.transparent.icon.input > textarea ~ .icon {
+:not(.field) > .ui.transparent.icon.input > textarea ~ i.icon {
   height: 1.3em;
 }
@@ -492,97 +492,97 @@
 }
 /* Labeled and action input states */
-.ui.form > .field.error > .ui.action.input > .ui.button,
-.ui.form > .field.error > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
+.ui.form .field.error > .ui.action.input > .ui.button,
+.ui.form .field.error > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
 .ui.action.input.error > .ui.button,
 .ui.labeled.input.error:not([class*="corner labeled"]) > .ui.label {
-  border-top: 1px solid #9F3A38;
-  border-bottom: 1px solid #9F3A38;
+  border-top: 1px solid #E0B4B4;
+  border-bottom: 1px solid #E0B4B4;
 }
-.ui.form > .field.error > .ui.left.action.input > .ui.button,
-.ui.form > .field.error > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
-.ui.left.action.input.error > .ui.button,
+.ui.form .field.error > .ui[class*="left action"].input > .ui.button,
+.ui.form .field.error > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
+.ui[class*="left action"].input.error > .ui.button,
 .ui.labeled.input.error:not(.right):not([class*="corner labeled"]) > .ui.label {
-  border-left: 1px solid #9F3A38;
+  border-left: 1px solid #E0B4B4;
 }
-.ui.form > .field.error > .ui.action.input:not(.left) > input + .ui.button,
-.ui.form > .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
-.ui.action.input.error:not(.left) > input + .ui.button,
+.ui.form .field.error > .ui.action.input:not([class*="left action"]) > input + .ui.button,
+.ui.form .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
+.ui.action.input.error:not([class*="left action"]) > input + .ui.button,
 .ui.right.labeled.input.error:not([class*="corner labeled"]) > input + .ui.label {
-  border-right: 1px solid #9F3A38;
+  border-right: 1px solid #E0B4B4;
 }
-.ui.form > .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
+.ui.form .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
 .ui.right.labeled.input.error:not([class*="corner labeled"]) > .ui.label:first-child {
-  border-left: 1px solid #9F3A38;
+  border-left: 1px solid #E0B4B4;
 }
-.ui.form > .field.info > .ui.action.input > .ui.button,
-.ui.form > .field.info > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
+.ui.form .field.info > .ui.action.input > .ui.button,
+.ui.form .field.info > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
 .ui.action.input.info > .ui.button,
 .ui.labeled.input.info:not([class*="corner labeled"]) > .ui.label {
-  border-top: 1px solid #276F86;
-  border-bottom: 1px solid #276F86;
+  border-top: 1px solid #A9D5DE;
+  border-bottom: 1px solid #A9D5DE;
 }
-.ui.form > .field.info > .ui.left.action.input > .ui.button,
-.ui.form > .field.info > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
-.ui.left.action.input.info > .ui.button,
+.ui.form .field.info > .ui[class*="left action"].input > .ui.button,
+.ui.form .field.info > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
+.ui[class*="left action"].input.info > .ui.button,
 .ui.labeled.input.info:not(.right):not([class*="corner labeled"]) > .ui.label {
-  border-left: 1px solid #276F86;
+  border-left: 1px solid #A9D5DE;
 }
-.ui.form > .field.info > .ui.action.input:not(.left) > input + .ui.button,
-.ui.form > .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
-.ui.action.input.info:not(.left) > input + .ui.button,
+.ui.form .field.info > .ui.action.input:not([class*="left action"]) > input + .ui.button,
+.ui.form .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
+.ui.action.input.info:not([class*="left action"]) > input + .ui.button,
 .ui.right.labeled.input.info:not([class*="corner labeled"]) > input + .ui.label {
-  border-right: 1px solid #276F86;
+  border-right: 1px solid #A9D5DE;
 }
-.ui.form > .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
+.ui.form .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
 .ui.right.labeled.input.info:not([class*="corner labeled"]) > .ui.label:first-child {
-  border-left: 1px solid #276F86;
+  border-left: 1px solid #A9D5DE;
 }
-.ui.form > .field.success > .ui.action.input > .ui.button,
-.ui.form > .field.success > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
+.ui.form .field.success > .ui.action.input > .ui.button,
+.ui.form .field.success > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
 .ui.action.input.success > .ui.button,
 .ui.labeled.input.success:not([class*="corner labeled"]) > .ui.label {
-  border-top: 1px solid #2C662D;
-  border-bottom: 1px solid #2C662D;
+  border-top: 1px solid #A3C293;
+  border-bottom: 1px solid #A3C293;
 }
-.ui.form > .field.success > .ui.left.action.input > .ui.button,
-.ui.form > .field.success > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
-.ui.left.action.input.success > .ui.button,
+.ui.form .field.success > .ui[class*="left action"].input > .ui.button,
+.ui.form .field.success > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
+.ui[class*="left action"].input.success > .ui.button,
 .ui.labeled.input.success:not(.right):not([class*="corner labeled"]) > .ui.label {
-  border-left: 1px solid #2C662D;
+  border-left: 1px solid #A3C293;
 }
-.ui.form > .field.success > .ui.action.input:not(.left) > input + .ui.button,
-.ui.form > .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
-.ui.action.input.success:not(.left) > input + .ui.button,
+.ui.form .field.success > .ui.action.input:not([class*="left action"]) > input + .ui.button,
+.ui.form .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
+.ui.action.input.success:not([class*="left action"]) > input + .ui.button,
 .ui.right.labeled.input.success:not([class*="corner labeled"]) > input + .ui.label {
-  border-right: 1px solid #2C662D;
+  border-right: 1px solid #A3C293;
 }
-.ui.form > .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
+.ui.form .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
 .ui.right.labeled.input.success:not([class*="corner labeled"]) > .ui.label:first-child {
-  border-left: 1px solid #2C662D;
+  border-left: 1px solid #A3C293;
 }
-.ui.form > .field.warning > .ui.action.input > .ui.button,
-.ui.form > .field.warning > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
+.ui.form .field.warning > .ui.action.input > .ui.button,
+.ui.form .field.warning > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label,
 .ui.action.input.warning > .ui.button,
 .ui.labeled.input.warning:not([class*="corner labeled"]) > .ui.label {
-  border-top: 1px solid #573A08;
-  border-bottom: 1px solid #573A08;
+  border-top: 1px solid #C9BA9B;
+  border-bottom: 1px solid #C9BA9B;
 }
-.ui.form > .field.warning > .ui.left.action.input > .ui.button,
-.ui.form > .field.warning > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
-.ui.left.action.input.warning > .ui.button,
+.ui.form .field.warning > .ui[class*="left action"].input > .ui.button,
+.ui.form .field.warning > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label,
+.ui[class*="left action"].input.warning > .ui.button,
 .ui.labeled.input.warning:not(.right):not([class*="corner labeled"]) > .ui.label {
-  border-left: 1px solid #573A08;
+  border-left: 1px solid #C9BA9B;
 }
-.ui.form > .field.warning > .ui.action.input:not(.left) > input + .ui.button,
-.ui.form > .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
-.ui.action.input.warning:not(.left) > input + .ui.button,
+.ui.form .field.warning > .ui.action.input:not([class*="left action"]) > input + .ui.button,
+.ui.form .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
+.ui.action.input.warning:not([class*="left action"]) > input + .ui.button,
 .ui.right.labeled.input.warning:not([class*="corner labeled"]) > input + .ui.label {
-  border-right: 1px solid #573A08;
+  border-right: 1px solid #C9BA9B;
 }
-.ui.form > .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
+.ui.form .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
 .ui.right.labeled.input.warning:not([class*="corner labeled"]) > .ui.label:first-child {
-  border-left: 1px solid #573A08;
+  border-left: 1px solid #C9BA9B;
 }
 /*--------------------

data/app/assets/stylesheets/semantic-ui/elements/_label.scss CHANGED Viewed

@@ -154,6 +154,21 @@ a.ui.label {
   margin-top: 0;
   margin-bottom: 2rem !important;
 }
+.ui.segment:not(.basic) > .ui.top.attached.label {
+  margin-top: -1px;
+}
+.ui.segment:not(.basic) > .ui.bottom.attached.label {
+  margin-bottom: -1px;
+}
+.ui.segment:not(.basic) > .ui.attached.label:not(.right) {
+  margin-left: -1px;
+}
+.ui.segment:not(.basic) > .ui.right.attached.label {
+  margin-right: -1px;
+}
+.ui.segment:not(.basic) > .ui.attached.label:not(.left):not(.right) {
+  width: calc(100% + 2px);
+}
 /*******************************
@@ -161,7 +176,7 @@ a.ui.label {
 *******************************/
 .ui.image.label {
-  width: auto !important;
+  width: auto;
   margin-top: 0;
   margin-bottom: 0;
   max-width: 9999px;
@@ -173,6 +188,9 @@ a.ui.label {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
+.ui.image.label.attached:not(.basic) {
+  padding: 0.5833em 0.833em 0.5833em 0.5em;
+}
 .ui.image.label img {
   display: inline-block;
   vertical-align: top;
@@ -186,6 +204,14 @@ a.ui.label {
   padding: 0.5833em 0.833em;
   border-radius: 0 0.28571429rem 0.28571429rem 0;
 }
+.ui.bottom.attached.image.label:not(.right) > img,
+.ui.top.right.attached.image.label > img {
+  border-top-left-radius: 0;
+}
+.ui.top.attached.image.label:not(.right) > img,
+.ui.bottom.right.attached.image.label > img {
+  border-bottom-left-radius: 0;
+}
 /*-------------------
          Tag
@@ -444,7 +470,7 @@ a.ui.label {
 }
 .ui[class*="top left attached"].label {
   width: auto;
-  margin-top: 0 !important;
+  margin-top: 0;
   border-radius: 0.21428571rem 0 0.28571429rem 0;
 }
 .ui[class*="top right attached"].label {
@@ -567,6 +593,16 @@ a.ui.active.label:hover:before {
   color: rgba(0, 0, 0, 0.87);
   -webkit-box-shadow: none;
           box-shadow: none;
+  padding-top: calc(0.5833em - 1px);
+  padding-bottom: calc(0.5833em - 1px);
+  padding-right: calc(0.833em - 1px);
+}
+.ui.basic.labels:not(.tag):not(.image):not(.ribbon) .label,
+.ui.basic.label:not(.tag):not(.image):not(.ribbon) {
+  padding-left: calc(0.833em - 1px);
+}
+.ui.basic.image.label {
+  padding-left: calc(0.5em - 1px);
 }
 /* Link */

data/app/assets/stylesheets/semantic-ui/elements/_list.scss CHANGED Viewed

@@ -143,16 +143,16 @@ ol.ui.list ol li,
   color: rgba(0, 0, 0, 0.87);
 }
 .ui.list .list > .item > .image + .content,
-.ui.list .list > .item > .icon + .content,
+.ui.list .list > .item > i.icon + .content,
 .ui.list > .item > .image + .content,
-.ui.list > .item > .icon + .content {
+.ui.list > .item > i.icon + .content {
   display: table-cell;
   width: 100%;
   padding: 0 0 0 0.5em;
   vertical-align: top;
 }
-.ui.list .list > .item > .loading.icon + .content,
-.ui.list > .item > .loading.icon + .content {
+.ui.list .list > .item > i.loading.icon + .content,
+.ui.list > .item > i.loading.icon + .content {
   padding-left: calc(0.2857142857142857em + 0.5em);
 }
 .ui.list .list > .item > img.image + .content,
@@ -295,8 +295,8 @@ ol.ui.list ol li,
 }
 .ui.horizontal.list > .item > .image,
 .ui.horizontal.list .list > .item > .image,
-.ui.horizontal.list > .item > .icon,
-.ui.horizontal.list .list > .item > .icon,
+.ui.horizontal.list > .item > i.icon,
+.ui.horizontal.list .list > .item > i.icon,
 .ui.horizontal.list > .item > .content,
 .ui.horizontal.list .list > .item > .content {
   vertical-align: middle;
@@ -316,8 +316,8 @@ ol.ui.list ol li,
   padding: 0 0.25em 0 0;
 }
 .ui.horizontal.list > .item > .image + .content,
-.ui.horizontal.list > .item > .icon,
-.ui.horizontal.list > .item > .icon + .content {
+.ui.horizontal.list > .item > i.icon,
+.ui.horizontal.list > .item > i.icon + .content {
   float: none;
   display: inline-block;
   width: auto;
@@ -352,8 +352,8 @@ ol.ui.list ol li,
 .ui.list .list > a.item:hover > .icons,
 .ui.list > a.item:hover > .icons,
-.ui.list .list > a.item:hover > .icon,
-.ui.list > a.item:hover > .icon {
+.ui.list .list > a.item:hover > i.icon,
+.ui.list > a.item:hover > i.icon {
   color: rgba(0, 0, 0, 0.87);
 }
@@ -367,8 +367,8 @@ ol.ui.list ol li,
          Inverted
   --------------------*/
-.ui.inverted.list .list > a.item > .icon,
-.ui.inverted.list > a.item > .icon {
+.ui.inverted.list .list > a.item > i.icon,
+.ui.inverted.list > a.item > i.icon {
   color: rgba(255, 255, 255, 0.7);
 }
 .ui.inverted.list .list > .item .header,