@linzjs/lui 15.1.14 → 16.1.0

package/dist/lui.css

@@ -173,11 +173,11 @@ textarea {
   --error-focus: #5a0000;
   --error-bg: #f5cccc;
   --visited: #00425d;
-  --green-hover: #08814d;
-  --color-green-active: #004e32;
+  --green-hover: #107c3a;
+  --color-green-active: #094A22;
   --green-btn: #0aa245;
   --txt-link: #0096cc;
-  --color-primary-hover-btn: #007198;
+  --color-primary-hover-btn: #005678;
   --color-selection: #c7e9f3;
   --heading-color: #017a76;
   --heading-color--secondary: #2a292c;
@@ -231,11 +231,11 @@ textarea {
   info: #3a7cdf;
   info-bg: #d8e5f9;
   visited: #00425d;
-  green-hover: #08814d;
-  green-active: #004e32;
+  green-hover: #107c3a;
+  green-active: #094A22;
   green-btn: #0aa245;
   txt-link: #0096cc;
-  primary-hover-btn: #007198;
+  primary-hover-btn: #005678;
   selection: #c7e9f3;
   heading-color: #017a76;
   heading-color--secondary: #2a292c;
@@ -1639,9 +1639,9 @@ button {
   font-style: normal;
   font-weight: 700;
   font-size: 1rem;
-  line-height: 40px;
+  line-height: 24px;
   margin: 0;
-  padding: 0 2rem;
+  padding: 0.4375rem 1rem;
   border: none;
   border-radius: 3px;
   transition: background-color 0.3s, color 0.3s, height 0.3s, border 0.3s, fill 0.3s;
@@ -1659,9 +1659,9 @@ a.lui-button {
   font-style: normal;
   font-weight: 700;
   font-size: 1rem;
-  line-height: 40px;
+  line-height: 24px;
   margin: 0;
-  padding: 0 2rem;
+  padding: 0.4375rem 1rem;
   border: none;
   border-radius: 3px;
   transition: background-color 0.3s, color 0.3s, height 0.3s, border 0.3s, fill 0.3s;
@@ -1682,24 +1682,28 @@ a.lui-button {
 }
 .lui-button.lui-button-icon-right,
 a.lui-button.lui-button-icon-right {
-  padding: 0 14px 0 0.75rem;
+  padding: 0.25rem 0.5rem 0.5rem 0.75rem;
 }
-.lui-button.lui-button-icon-right i,
 .lui-button.lui-button-icon-right .LuiIcon,
-a.lui-button.lui-button-icon-right i,
 a.lui-button.lui-button-icon-right .LuiIcon {
+  margin: 3px 0 -7px 12px;
+}
+.lui-button.lui-button-icon-right i,
+a.lui-button.lui-button-icon-right i {
   position: relative;
   top: 6px;
   margin: 0 0 0 12px;
 }
 .lui-button.lui-button-icon,
 a.lui-button.lui-button-icon {
-  padding: 0 0.75rem 0 14px;
+  padding: 0.25rem 1rem 0.5rem 0.5rem;
 }
-.lui-button.lui-button-icon i,
 .lui-button.lui-button-icon .LuiIcon,
-a.lui-button.lui-button-icon i,
 a.lui-button.lui-button-icon .LuiIcon {
+  margin: 3px 12px -7px 0;
+}
+.lui-button.lui-button-icon i,
+a.lui-button.lui-button-icon i {
   position: relative;
   top: 6px;
   margin: 0 12px 0 0;
@@ -1707,9 +1711,9 @@ a.lui-button.lui-button-icon .LuiIcon {
 .lui-button-primary,
 a.lui-button-primary {
   background-color: #007198;
-  border: 2px solid #007198;
+  border: 1px solid #007198;
   color: #fff;
-  line-height: 40px;
+  line-height: 24px;
 }
 .lui-button-primary i,
 .lui-button-primary svg *,
@@ -1724,10 +1728,10 @@ a.lui-button-primary:visited {
 }
 .lui-button-primary:hover,
 a.lui-button-primary:hover {
-  background-color: #004b50;
+  background-color: #005678;
   cursor: pointer;
   color: #fff;
-  border: 2px solid #004b50;
+  border: 1px solid #005678;
 }
 .lui-button-primary:hover i,
 .lui-button-primary:hover svg *,
@@ -1757,8 +1761,8 @@ a.lui-button-primary:disabled:hover {
 a.lui-button-primary:active:enabled {
   background-color: #00425d;
   cursor: pointer;
-  color: rgba(255, 255, 255, 0.6);
-  border: 2px solid #00425d;
+  color: rgba(255, 255, 255, 0.9);
+  border: 1px solid #00425d;
   -moz-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
   box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
@@ -1773,9 +1777,9 @@ a.lui-button-primary:active:enabled svg * {
 .lui-button-secondary,
 a.lui-button-secondary {
   background-color: #fff;
-  border: 2px solid #007198;
+  border: 1px solid #007198;
   color: #007198;
-  line-height: 40px;
+  line-height: 24px;
 }
 .lui-button-secondary i,
 .lui-button-secondary svg *,
@@ -1790,17 +1794,17 @@ a.lui-button-secondary:visited {
 }
 .lui-button-secondary:hover,
 a.lui-button-secondary:hover {
-  background-color: #004b50;
+  background-color: #e2f3f7;
   cursor: pointer;
-  color: #fff;
-  border: 2px solid #004b50;
+  color: #007198;
+  border: 1px solid #007198;
 }
 .lui-button-secondary:hover i,
 .lui-button-secondary:hover svg *,
 a.lui-button-secondary:hover i,
 a.lui-button-secondary:hover svg * {
-  color: #fff;
-  fill: #fff;
+  color: #007198;
+  fill: #007198;
 }
 .lui-button-secondary:disabled,
 a.lui-button-secondary:disabled {
@@ -1821,10 +1825,10 @@ a.lui-button-secondary:disabled:hover {
 }
 .lui-button-secondary:active:enabled,
 a.lui-button-secondary:active:enabled {
-  background-color: #00425d;
+  background-color: #007198;
   cursor: pointer;
-  color: rgba(255, 255, 255, 0.6);
-  border: 2px solid #00425d;
+  color: rgba(255, 255, 255, 0.9);
+  border: 1px solid #007198;
   -moz-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
   box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
@@ -1849,9 +1853,9 @@ a.lui-button-secondary:hover i {
 .lui-button-tertiary,
 a.lui-button-tertiary {
   background-color: #0aa245;
-  border: 2px solid #0aa245;
+  border: 1px solid #0aa245;
   color: #fff;
-  line-height: 40px;
+  line-height: 24px;
 }
 .lui-button-tertiary i,
 .lui-button-tertiary svg *,
@@ -1866,10 +1870,10 @@ a.lui-button-tertiary:visited {
 }
 .lui-button-tertiary:hover,
 a.lui-button-tertiary:hover {
-  background-color: #08814d;
+  background-color: #107c3a;
   cursor: pointer;
   color: #fff;
-  border: 2px solid #08814d;
+  border: 1px solid #107c3a;
 }
 .lui-button-tertiary:hover i,
 .lui-button-tertiary:hover svg *,
@@ -1897,10 +1901,10 @@ a.lui-button-tertiary:disabled:hover {
 }
 .lui-button-tertiary:active:enabled,
 a.lui-button-tertiary:active:enabled {
-  background-color: #004e32;
+  background-color: #094A22;
   cursor: pointer;
-  color: rgba(255, 255, 255, 0.6);
-  border: 2px solid #004e32;
+  color: rgba(255, 255, 255, 0.9);
+  border: 1px solid #094A22;
   -moz-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
   box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
@@ -1915,9 +1919,9 @@ a.lui-button-tertiary:active:enabled svg * {
 .lui-button-error,
 a.lui-button-error {
   background-color: #cc0000;
-  border: 2px solid #cc0000;
+  border: 1px solid #cc0000;
   color: #fff;
-  line-height: 40px;
+  line-height: 24px;
 }
 .lui-button-error i,
 .lui-button-error svg *,
@@ -1932,10 +1936,10 @@ a.lui-button-error:visited {
 }
 .lui-button-error:hover,
 a.lui-button-error:hover {
-  background-color: #5a0000;
+  background-color: #8f0000;
   cursor: pointer;
   color: #fff;
-  border: 2px solid #5a0000;
+  border: 1px solid #8f0000;
 }
 .lui-button-error:hover i,
 .lui-button-error:hover svg *,
@@ -1965,8 +1969,8 @@ a.lui-button-error:disabled:hover {
 a.lui-button-error:active:enabled {
   background-color: #5a0000;
   cursor: pointer;
-  color: rgba(255, 255, 255, 0.6);
-  border: 2px solid #5a0000;
+  color: rgba(255, 255, 255, 0.9);
+  border: 1px solid #5a0000;
   -moz-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
   box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
@@ -1981,9 +1985,9 @@ a.lui-button-error:active:enabled svg * {
 .lui-button-reversed-no-bg,
 a.lui-button-reversed-no-bg {
   background-color: transparent;
-  border: 2px solid transparent;
+  border: 1px solid transparent;
   color: #fff;
-  line-height: 40px;
+  line-height: 24px;
 }
 .lui-button-reversed-no-bg i,
 .lui-button-reversed-no-bg svg *,
@@ -2001,7 +2005,7 @@ a.lui-button-reversed-no-bg:hover {
   background-color: transparent;
   cursor: pointer;
   color: rgba(255, 255, 255, 0.8);
-  border: 2px solid transparent;
+  border: 1px solid transparent;
 }
 .lui-button-reversed-no-bg:hover i,
 .lui-button-reversed-no-bg:hover svg *,
@@ -2031,8 +2035,8 @@ a.lui-button-reversed-no-bg:disabled:hover {
 a.lui-button-reversed-no-bg:active:enabled {
   background-color: transparent;
   cursor: pointer;
-  color: rgba(255, 255, 255, 0.6);
-  border: 2px solid transparent;
+  color: rgba(255, 255, 255, 0.9);
+  border: 1px solid transparent;
   -moz-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
   box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
@@ -2096,7 +2100,7 @@ a.lui-button-text:hover {
   background-color: transparent;
   cursor: pointer;
   color: #00425d;
-  border: 2px solid none;
+  border: 1px solid none;
 }
 .lui-button-text:hover i,
 .lui-button-text:hover svg *,
@@ -2126,8 +2130,8 @@ a.lui-button-text:disabled:hover {
 a.lui-button-text:active:enabled {
   background-color: none;
   cursor: pointer;
-  color: rgba(0, 66, 93, 0.6);
-  border: 2px solid none;
+  color: rgba(0, 66, 93, 0.9);
+  border: 1px solid none;
   -moz-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
   box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
@@ -2141,7 +2145,7 @@ a.lui-button-text:active:enabled svg * {
 }
 .lui-button-text:hover,
 a.lui-button-text:hover {
-  border-bottom: 2px solid;
+  border-bottom: 1px solid;
 }
 .lui-button-text:disabled,
 a.lui-button-text:disabled {
@@ -2164,9 +2168,9 @@ a.lui-button-text:disabled svg * {
 .lui-button-plain-text,
 a.lui-button-plain-text {
   background-color: transparent;
-  border: 2px solid #fff;
+  border: 1px solid #fff;
   color: inherit;
-  line-height: 40px;
+  line-height: 24px;
   padding: 0;
   margin: 0;
   font-family: inherit;
@@ -2205,9 +2209,9 @@ a.lui-button-icon-only,
 a.lui-button-icon-only-rev,
 a.lui-button-icon-only-link {
   background-color: transparent;
-  border: 2px solid transparent;
+  border: 1px solid transparent;
   color: #007198;
-  line-height: 40px;
+  line-height: 24px;
   line-height: 44px;
   padding: 0;
   width: 36px;
@@ -2238,8 +2242,8 @@ a.lui-button-icon-only-rev:hover,
 a.lui-button-icon-only-link:hover {
   background-color: transparent;
   cursor: pointer;
-  color: #007198;
-  border: 2px solid transparent;
+  color: #005678;
+  border: 1px solid transparent;
 }
 .lui-button-icon-only:hover i,
 .lui-button-icon-only:hover svg *, .lui-button-icon-only-rev:hover i,
@@ -2251,8 +2255,8 @@ a.lui-button-icon-only-rev:hover i,
 a.lui-button-icon-only-rev:hover svg *,
 a.lui-button-icon-only-link:hover i,
 a.lui-button-icon-only-link:hover svg * {
-  color: #007198;
-  fill: #007198;
+  color: #005678;
+  fill: #005678;
 }
 .lui-button-icon-only:disabled, .lui-button-icon-only-rev:disabled, .lui-button-icon-only-link:disabled,
 a.lui-button-icon-only:disabled,
@@ -2287,8 +2291,8 @@ a.lui-button-icon-only-rev:active:enabled,
 a.lui-button-icon-only-link:active:enabled {
   background-color: transparent;
   cursor: pointer;
-  color: rgba(0, 150, 204, 0.6);
-  border: 2px solid transparent;
+  color: rgba(0, 150, 204, 0.9);
+  border: 1px solid transparent;
   -moz-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
   box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
@@ -2323,77 +2327,94 @@ a.lui-button-icon-only-rev i,
 a.lui-button-icon-only-rev svg * {
   color: #fff;
 }
-.lui-button-icon-only-rev:disabled,
-a.lui-button-icon-only-rev:disabled {
+.lui-button-icon-only-rev:disabled, .lui-button-icon-only-rev:disabled:hover,
+a.lui-button-icon-only-rev:disabled,
+a.lui-button-icon-only-rev:disabled:hover {
   color: rgba(255, 255, 255, 0.4);
 }
 .lui-button-icon-only-rev:disabled i,
-.lui-button-icon-only-rev:disabled svg *,
+.lui-button-icon-only-rev:disabled svg *, .lui-button-icon-only-rev:disabled:hover i,
+.lui-button-icon-only-rev:disabled:hover svg *,
 a.lui-button-icon-only-rev:disabled i,
-a.lui-button-icon-only-rev:disabled svg * {
+a.lui-button-icon-only-rev:disabled svg *,
+a.lui-button-icon-only-rev:disabled:hover i,
+a.lui-button-icon-only-rev:disabled:hover svg * {
   color: rgba(255, 255, 255, 0.4);
   fill: rgba(255, 255, 255, 0.4);
 }
+.lui-button-icon-only-rev:hover i,
+.lui-button-icon-only-rev:hover svg *,
+a.lui-button-icon-only-rev:hover i,
+a.lui-button-icon-only-rev:hover svg * {
+  color: #73c8e1;
+  fill: #73c8e1;
+}
 .lui-button-icon-only-link,
 a.lui-button-icon-only-link {
   color: #0096cc;
 }
 .lui-button.lui-button-sm,
 a.lui-button.lui-button-sm {
-  line-height: 30px;
-  padding: 0 0.75rem;
-  font-size: 0.875rem;
+  line-height: 24px;
+  padding: 0.1875rem 0.5rem;
 }
 .lui-button.lui-button-sm.lui-button-icon,
 a.lui-button.lui-button-sm.lui-button-icon {
-  padding: 0 0.75rem 0 12px;
+  padding: 0.125rem 0.5rem 0.125rem 0.25rem;
 }
-.lui-button.lui-button-sm.lui-button-icon i,
 .lui-button.lui-button-sm.lui-button-icon .LuiIcon,
-a.lui-button.lui-button-sm.lui-button-icon i,
 a.lui-button.lui-button-sm.lui-button-icon .LuiIcon {
-  margin: 0 0.5rem 0 0;
-  font-size: 1.3rem;
+  margin: 1px 0.25rem -5px 0;
+}
+.lui-button.lui-button-sm.lui-button-icon i,
+a.lui-button.lui-button-sm.lui-button-icon i {
+  position: relative;
+  top: 6px;
+  margin: 0 12px 0 0;
 }
 .lui-button.lui-button-sm.lui-button-icon-right,
 a.lui-button.lui-button-sm.lui-button-icon-right {
-  padding: 0 12px 0 0.75rem;
+  padding: 0.125rem 0.25rem 0.125rem 0.5rem;
 }
-.lui-button.lui-button-sm.lui-button-icon-right i,
 .lui-button.lui-button-sm.lui-button-icon-right .LuiIcon,
-a.lui-button.lui-button-sm.lui-button-icon-right i,
 a.lui-button.lui-button-sm.lui-button-icon-right .LuiIcon {
-  margin: 0 0 0 0.5rem;
-  font-size: 1.3rem;
+  margin: 1px 0 -5px 0.25rem;
+}
+.lui-button.lui-button-sm.lui-button-icon-right i,
+a.lui-button.lui-button-sm.lui-button-icon-right i {
+  position: relative;
+  top: 6px;
+  margin: 0 0 0 12px;
 }
 .lui-button.lui-button-sm.lui-button-reversed-no-bg i,
 .lui-button.lui-button-sm.lui-button-reversed-no-bg .LuiIcon,
 a.lui-button.lui-button-sm.lui-button-reversed-no-bg i,
 a.lui-button.lui-button-sm.lui-button-reversed-no-bg .LuiIcon {
-  font-size: 1.8rem;
   top: 9px !important;
 }
 .lui-button.lui-button-lg,
 a.lui-button.lui-button-lg {
-  line-height: 50px;
-  padding: 0 2rem;
-  font-size: 1.125rem;
+  padding: 0.6875rem 1.125rem;
 }
 .lui-button.lui-button-lg.lui-button-icon,
 a.lui-button.lui-button-lg.lui-button-icon {
-  padding: 0 2rem 0 28px;
+  padding: 0.6875rem 24px 0.6875rem 0.75rem;
 }
 .lui-button.lui-button-lg.lui-button-icon i,
 a.lui-button.lui-button-lg.lui-button-icon i {
-  margin: 0 0.75rem 0 0;
+  position: relative;
+  top: 6px;
+  margin: 0 0.5rem 0 0;
 }
 .lui-button.lui-button-lg.lui-button-icon-right,
 a.lui-button.lui-button-lg.lui-button-icon-right {
-  padding: 0 28px 0 2rem;
+  padding: 0.6875rem 0.75rem 0.6875rem 24px;
 }
 .lui-button.lui-button-lg.lui-button-icon-right i,
 a.lui-button.lui-button-lg.lui-button-icon-right i {
-  margin: 0 0 0 0.75rem;
+  position: relative;
+  top: 6px;
+  margin: 0 0 0 0.5rem;
 }
 .lui-button + .lui-button,
 a.lui-button + .lui-button {
@@ -2443,7 +2464,6 @@ a.lui-button + a.lui-button {
   }
 }
 .lui-button-group .lui-button {
-  padding: 0 0.5rem;
   background-color: #fff;
   border-radius: 0;
   border: 1px solid #004b50;
@@ -2698,7 +2718,7 @@ a.lui-button + a.lui-button {
 }
 
 .linz-button-primary {
-  border: 2px solid #023d48;
+  border: 1px solid #023d48;
   background-color: #023d48;
   border-color: #023d48;
   color: #fff;
@@ -2710,7 +2730,7 @@ a.lui-button + a.lui-button {
 }
 
 .linz-button-secondary {
-  border: 2px solid #023d48;
+  border: 1px solid #023d48;
   color: #023d48;
 }
 .linz-button-secondary:hover {
@@ -2721,7 +2741,7 @@ a.lui-button + a.lui-button {
 }
 
 .linz-button-tertiary {
-  border: 2px solid #e1e44a;
+  border: 1px solid #e1e44a;
   background-color: #e1e44a;
   color: #023d48;
 }
@@ -4913,6 +4933,15 @@ body.lui-menu-drawer-open {
   cursor: not-allowed;
 }
 
+.LuiTextInput-iconPosition {
+  position: absolute;
+  right: 7px;
+  top: 17%;
+}
+.LuiTextInput-iconPosition svg {
+  fill: #6b6966;
+}
+
 .LuiTextInput-padlock-icon {
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyMiI+PHBhdGggZD0iTTE0IDcuNUgxM1Y1LjVDMTMgMi43NCAxMC43NiAwLjUgOCAwLjVDNS4yNCAwLjUgMyAyLjc0IDMgNS41VjcuNUgyQzAuOSA3LjUgMCA4LjQgMCA5LjVWMTkuNUMwIDIwLjYgMC45IDIxLjUgMiAyMS41SDE0QzE1LjEgMjEuNSAxNiAyMC42IDE2IDE5LjVWOS41QzE2IDguNCAxNS4xIDcuNSAxNCA3LjVaTTggMTYuNUM2LjkgMTYuNSA2IDE1LjYgNiAxNC41QzYgMTMuNCA2LjkgMTIuNSA4IDEyLjVDOS4xIDEyLjUgMTAgMTMuNCAxMCAxNC41QzEwIDE1LjYgOS4xIDE2LjUgOCAxNi41Wk0xMS4xIDcuNUg0LjlWNS41QzQuOSAzLjc5IDYuMjkgMi40IDggMi40QzkuNzEgMi40IDExLjEgMy43OSAxMS4xIDUuNVY3LjVaIiBmaWxsPSIjNkI2OTY2IiAvPjwvc3ZnPg==");
   background-repeat: no-repeat;