@festo-ui/web-essentials 11.0.1 → 11.1.0-dev.977

package/dist/css/light/festo-web-essentials-light.css

@@ -426,7 +426,7 @@ h6,
 }
 
 :root {
-  --fwe-black: #000000;
+  --fwe-black: #333333;
   --fwe-white: #ffffff;
   --fwe-white-hover: #ededed;
   --fwe-caerul: #0091dc;
@@ -438,7 +438,7 @@ h6,
   --fwe-gray-400: #b6bec6;
   --fwe-text: #333333;
   --fwe-text-light: #82868b;
-  --fwe-text-disabled: #b9babb;
+  --fwe-text-disabled: #a9b0b7;
   --fwe-hero: #0091dc;
   --fwe-hero-hover: #0588cb;
   --fwe-hero-active: #0a7eba;
@@ -456,12 +456,12 @@ h6,
   --fwe-red-active: #b50a0a;
   --fwe-orange-bg: #fbf0e1;
   --fwe-red-bg: #f7e1e1;
-  --fwe-control: #d3d8dd;
+  --fwe-control: #dbdfe3;
   --fwe-control-hover: #c5cbd1;
   --fwe-control-active: #a9b0b7;
   --fwe-control-disabled: #e2e5e8;
   --fwe-control-border: #b6bec6;
-  --fwe-control-border-hover: #a9b0b7;
+  --fwe-control-border-hover: #c5cbd1;
   --fwe-control-border-active: #9ca2a9;
   --fwe-control-scrollbar: #d2d5d9;
   --fwe-border: #d3d8dd;
@@ -2712,7 +2712,7 @@ ul.fwe-list-group {
   color: var(--fwe-text);
 }
 .fwe-list-group a.fwe-list-group-item:not(.fwe-disabled):hover {
-  background-color: var(--fwe-sucanul);
+  background-color: var(--fwe-background);
 }
 .fwe-list-group a.fwe-list-group-item:not(.fwe-disabled):hover .fwe-list-group-item-body,
 .fwe-list-group a.fwe-list-group-item:not(.fwe-disabled):hover .fwe-list-group-item-footer {
@@ -2728,7 +2728,7 @@ ul.fwe-list-group {
 }
 .fwe-list-group button.fwe-list-group-item:not(.fwe-disabled):hover {
   color: var(--fwe-hero);
-  background-color: var(--fwe-sucanul);
+  background-color: var(--fwe-background);
 }
 .fwe-list-group.fwe-list-group-border .fwe-list-group-item,
 .fwe-list-group.fwe-list-group-border button.fwe-list-group-item {
@@ -2788,9 +2788,12 @@ ul.fwe-list-group {
   width: auto;
 }
 .fwe-list-group.fwe-list-group-horizontal a.fwe-list-group-item:not(.fwe-disabled):hover,
+.fwe-list-group.fwe-list-group-horizontal button.fwe-list-group-item:not(.fwe-disabled):hover {
+  background-color: var(--fwe-background);
+}
 .fwe-list-group.fwe-list-group-horizontal button.fwe-list-group-item:not(.fwe-disabled):hover {
   color: var(--fwe-hero);
-  background-color: unset;
+  background-color: var(--fwe-background);
 }
 
 .fwe-list-group-header {
@@ -4227,23 +4230,28 @@ button.fwe-btn.fwe-disabled {
   background: var(--fwe-control-disabled);
   color: var(--fwe-text-disabled);
 }
-a.fwe-btn.fwe-btn-hero,
-button.fwe-btn.fwe-btn-hero {
+a.fwe-btn.fwe-btn-hero, a.fwe-btn.fwe-btn-primary,
+button.fwe-btn.fwe-btn-hero,
+button.fwe-btn.fwe-btn-primary {
   color: var(--fwe-white);
   background: var(--fwe-hero);
 }
-a.fwe-btn.fwe-btn-hero:hover,
-button.fwe-btn.fwe-btn-hero:hover {
+a.fwe-btn.fwe-btn-hero:hover, a.fwe-btn.fwe-btn-primary:hover,
+button.fwe-btn.fwe-btn-hero:hover,
+button.fwe-btn.fwe-btn-primary:hover {
   color: var(--fwe-white);
   background: var(--fwe-hero-hover);
 }
-a.fwe-btn.fwe-btn-hero:active,
-button.fwe-btn.fwe-btn-hero:active {
+a.fwe-btn.fwe-btn-hero:active, a.fwe-btn.fwe-btn-primary:active,
+button.fwe-btn.fwe-btn-hero:active,
+button.fwe-btn.fwe-btn-primary:active {
   background: var(--fwe-hero-active);
 }
-a.fwe-btn.fwe-btn-hero:disabled, a.fwe-btn.fwe-btn-hero.fwe-disabled,
+a.fwe-btn.fwe-btn-hero:disabled, a.fwe-btn.fwe-btn-hero.fwe-disabled, a.fwe-btn.fwe-btn-primary:disabled, a.fwe-btn.fwe-btn-primary.fwe-disabled,
 button.fwe-btn.fwe-btn-hero:disabled,
-button.fwe-btn.fwe-btn-hero.fwe-disabled {
+button.fwe-btn.fwe-btn-hero.fwe-disabled,
+button.fwe-btn.fwe-btn-primary:disabled,
+button.fwe-btn.fwe-btn-primary.fwe-disabled {
   background: var(--fwe-control-disabled);
   color: var(--fwe-text-disabled);
 }
@@ -4251,37 +4259,48 @@ a.fwe-btn.fwe-btn-block,
 button.fwe-btn.fwe-btn-block {
   width: 100%;
 }
-a.fwe-btn.fwe-btn-link,
-button.fwe-btn.fwe-btn-link {
+a.fwe-btn.fwe-btn-link, a.fwe-btn.fwe-btn-tertiary,
+button.fwe-btn.fwe-btn-link,
+button.fwe-btn.fwe-btn-tertiary {
   background: none;
   color: var(--fwe-hero);
   padding: 0;
 }
 a.fwe-btn.fwe-btn-link i[class^=fwe-icon-],
 a.fwe-btn.fwe-btn-link i[class*=" fwe-icon-"],
-a.fwe-btn.fwe-btn-link .fwe-svg-icon,
+a.fwe-btn.fwe-btn-link .fwe-svg-icon, a.fwe-btn.fwe-btn-tertiary i[class^=fwe-icon-],
+a.fwe-btn.fwe-btn-tertiary i[class*=" fwe-icon-"],
+a.fwe-btn.fwe-btn-tertiary .fwe-svg-icon,
 button.fwe-btn.fwe-btn-link i[class^=fwe-icon-],
 button.fwe-btn.fwe-btn-link i[class*=" fwe-icon-"],
-button.fwe-btn.fwe-btn-link .fwe-svg-icon {
+button.fwe-btn.fwe-btn-link .fwe-svg-icon,
+button.fwe-btn.fwe-btn-tertiary i[class^=fwe-icon-],
+button.fwe-btn.fwe-btn-tertiary i[class*=" fwe-icon-"],
+button.fwe-btn.fwe-btn-tertiary .fwe-svg-icon {
   margin-right: 4px;
 }
-a.fwe-btn.fwe-btn-link.fwe-dark,
-button.fwe-btn.fwe-btn-link.fwe-dark {
+a.fwe-btn.fwe-btn-link.fwe-dark, a.fwe-btn.fwe-btn-tertiary.fwe-dark,
+button.fwe-btn.fwe-btn-link.fwe-dark,
+button.fwe-btn.fwe-btn-tertiary.fwe-dark {
   color: var(--fwe-text);
 }
-a.fwe-btn.fwe-btn-link:hover,
-button.fwe-btn.fwe-btn-link:hover {
+a.fwe-btn.fwe-btn-link:hover, a.fwe-btn.fwe-btn-tertiary:hover,
+button.fwe-btn.fwe-btn-link:hover,
+button.fwe-btn.fwe-btn-tertiary:hover {
   background: none;
   color: var(--fwe-hero-hover);
 }
-a.fwe-btn.fwe-btn-link:active,
-button.fwe-btn.fwe-btn-link:active {
+a.fwe-btn.fwe-btn-link:active, a.fwe-btn.fwe-btn-tertiary:active,
+button.fwe-btn.fwe-btn-link:active,
+button.fwe-btn.fwe-btn-tertiary:active {
   background: none;
   color: var(--fwe-hero-hover);
 }
-a.fwe-btn.fwe-btn-link:disabled, a.fwe-btn.fwe-btn-link.fwe-disabled,
+a.fwe-btn.fwe-btn-link:disabled, a.fwe-btn.fwe-btn-link.fwe-disabled, a.fwe-btn.fwe-btn-tertiary:disabled, a.fwe-btn.fwe-btn-tertiary.fwe-disabled,
 button.fwe-btn.fwe-btn-link:disabled,
-button.fwe-btn.fwe-btn-link.fwe-disabled {
+button.fwe-btn.fwe-btn-link.fwe-disabled,
+button.fwe-btn.fwe-btn-tertiary:disabled,
+button.fwe-btn.fwe-btn-tertiary.fwe-disabled {
   color: var(--fwe-text-disabled);
 }
 a.fwe-btn.fwe-btn-lg,
@@ -4776,40 +4795,33 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
 
 .fwe-badge {
   display: inline-block;
-  border-radius: 2px;
-  font-size: var(--fwe-font-size-md);
-  padding-left: 6px;
-  padding-right: 6px;
   color: var(--fwe-white);
-  max-height: 19px;
-  height: 19px;
-  line-height: 17px;
   background-color: var(--fwe-hero);
+  border-radius: 2px;
+  max-height: 18px;
+  height: 18px;
+  line-height: 18px;
+  padding: 0 4px;
   font-weight: var(--fwe-font-weight-bold);
+  font-size: var(--fwe-font-size-md);
 }
 .fwe-badge.fwe-badge-sm {
   font-size: var(--fwe-font-size-small);
-  max-height: 17px;
-  height: 17px;
-  line-height: 16px;
+  max-height: 18px;
+  height: 18px;
+  line-height: 18px;
 }
-.fwe-badge.fwe-badge-md {
+.fwe-badge.fwe-badge-md, .fwe-badge.fwe-badge-lg {
   font-size: var(--fwe-font-size-base);
   max-height: 22px;
   height: 22px;
-  line-height: 20px;
-}
-.fwe-badge.fwe-badge-lg {
-  font-size: var(--fwe-font-size-xl);
-  max-height: 32px;
-  height: 32px;
-  line-height: 30px;
+  line-height: 22px;
 }
 .fwe-badge.fwe-badge-xl {
-  font-size: var(--fwe-font-size-xxl);
-  max-height: 44px;
-  height: 44px;
-  line-height: 42px;
+  font-size: var(--fwe-font-size-xl);
+  max-height: 34px;
+  height: 34px;
+  line-height: 34px;
 }
 
 .fwe-badge-caerul {
@@ -5157,7 +5169,7 @@ fieldset.fwe-progress-container label {
 }
 .fwe-snackbar.fwe-snackbar-warning {
   border-color: var(--fwe-orange);
-  background-color: var(--fwe-orange-bg);
+  background-color: #ffeacc;
 }
 .fwe-snackbar.fwe-snackbar-warning span::before {
   background-color: var(--fwe-orange);
@@ -5169,7 +5181,7 @@ fieldset.fwe-progress-container label {
 }
 .fwe-snackbar.fwe-snackbar-error {
   border-color: var(--fwe-red);
-  background-color: var(--fwe-red-bg);
+  background-color: #f6cccc;
 }
 .fwe-snackbar.fwe-snackbar-error span::before {
   background-color: var(--fwe-red);
@@ -5185,37 +5197,37 @@ fieldset.fwe-progress-container label {
   margin: 0px 12px;
   background: var(--fwe-hero);
 }
-.fwe-snackbar.fwe-snackbar-b {
+.fwe-snackbar.fwe-snackbar-b, .fwe-snackbar.fwe-snackbar-light {
   border: none;
   background-color: var(--fwe-white);
 }
-.fwe-snackbar.fwe-snackbar-b span::before {
+.fwe-snackbar.fwe-snackbar-b span::before, .fwe-snackbar.fwe-snackbar-light span::before {
   background-color: var(--fwe-text);
 }
-.fwe-snackbar.fwe-snackbar-b .fwe-snackbar-separator {
+.fwe-snackbar.fwe-snackbar-b .fwe-snackbar-separator, .fwe-snackbar.fwe-snackbar-light .fwe-snackbar-separator {
   background-color: var(--fwe-text-light);
 }
-.fwe-snackbar.fwe-snackbar-c {
+.fwe-snackbar.fwe-snackbar-c, .fwe-snackbar.fwe-snackbar-strong {
   border: none;
   color: var(--fwe-white);
   background-color: var(--fwe-hero);
 }
-.fwe-snackbar.fwe-snackbar-c.fwe-snackbar-warning {
+.fwe-snackbar.fwe-snackbar-c.fwe-snackbar-warning, .fwe-snackbar.fwe-snackbar-strong.fwe-snackbar-warning {
   background-color: var(--fwe-orange);
 }
-.fwe-snackbar.fwe-snackbar-c.fwe-snackbar-error {
+.fwe-snackbar.fwe-snackbar-c.fwe-snackbar-error, .fwe-snackbar.fwe-snackbar-strong.fwe-snackbar-error {
   background-color: var(--fwe-red);
 }
-.fwe-snackbar.fwe-snackbar-c span::before {
+.fwe-snackbar.fwe-snackbar-c span::before, .fwe-snackbar.fwe-snackbar-strong span::before {
   background-color: var(--fwe-white);
 }
-.fwe-snackbar.fwe-snackbar-c .fwe-snackbar-close-btn {
+.fwe-snackbar.fwe-snackbar-c .fwe-snackbar-close-btn, .fwe-snackbar.fwe-snackbar-strong .fwe-snackbar-close-btn {
   background-color: var(--fwe-white);
 }
-.fwe-snackbar.fwe-snackbar-c .fwe-snackbar-separator {
+.fwe-snackbar.fwe-snackbar-c .fwe-snackbar-separator, .fwe-snackbar.fwe-snackbar-strong .fwe-snackbar-separator {
   background-color: var(--fwe-white-hover);
 }
-.fwe-snackbar.fwe-snackbar-c .fwe-snackbar-link-btn {
+.fwe-snackbar.fwe-snackbar-c .fwe-snackbar-link-btn, .fwe-snackbar.fwe-snackbar-strong .fwe-snackbar-link-btn {
   color: var(--fwe-white);
 }
 
@@ -5345,7 +5357,9 @@ fieldset.fwe-progress-container label {
 .fwe-modal--with-indicator-bar {
   border-left: 8px solid var(--fwe-hero);
 }
-.fwe-modal--with-indicator-bar.fwe-modal--warning button.fwe-btn.fwe-btn-link, .fwe-modal--with-indicator-bar.fwe-modal--error button.fwe-btn.fwe-btn-link {
+.fwe-modal--with-indicator-bar.fwe-modal--warning button.fwe-btn.fwe-btn-link,
+.fwe-modal--with-indicator-bar.fwe-modal--warning button.fwe-btn.fwe-btn-tertiary, .fwe-modal--with-indicator-bar.fwe-modal--error button.fwe-btn.fwe-btn-link,
+.fwe-modal--with-indicator-bar.fwe-modal--error button.fwe-btn.fwe-btn-tertiary {
   color: var(--fwe-text);
 }
 .fwe-modal--info .fwe-modal-h2, .fwe-modal--warning .fwe-modal-h2, .fwe-modal--error .fwe-modal-h2 {
@@ -5673,7 +5687,7 @@ fieldset.fwe-progress-container label {
 .fwe-popover--menu {
   font-size: var(--fwe-font-size-base);
   line-height: 1.5rem;
-  padding: 16px;
+  padding: 18px 16px 10px 16px;
 }
 .fwe-popover--menu button {
   all: unset;
@@ -5708,11 +5722,21 @@ fieldset.fwe-progress-container label {
   margin-right: 8px;
 }
 .fwe-popover--menu button:hover {
-  background-color: rgba(51, 51, 51, 0.1019607843);
+  color: var(--fwe-hero);
 }
 .fwe-popover--menu button:active {
   background-color: rgba(51, 51, 51, 0.2);
 }
+.fwe-popover--menu button:disabled {
+  color: var(--fwe-text-disabled);
+  cursor: default;
+}
+.fwe-popover--menu button:disabled:hover {
+  color: var(--fwe-text-disabled);
+}
+.fwe-popover--menu button:disabled:active {
+  background-color: transparent;
+}
 .fwe-popover--content {
   width: auto;
   min-width: -moz-max-content;
@@ -6571,7 +6595,8 @@ input[type=search]::-webkit-search-cancel-button {
   border-color: transparent;
 }
 
-.fwe-bottom-navigation {
+.fwe-bottom-navigation,
+.fwe-mobile-tab-bar {
   width: 100%;
   display: flex;
   background: var(--fwe-white);
@@ -6581,7 +6606,10 @@ input[type=search]::-webkit-search-cancel-button {
   height: 84px;
   padding: 22px 16px;
 }
-.fwe-bottom-navigation .fwe-bottom-navigation-button {
+.fwe-bottom-navigation .fwe-bottom-navigation-button,
+.fwe-bottom-navigation .fwe-mobile-tab-bar-button,
+.fwe-mobile-tab-bar .fwe-bottom-navigation-button,
+.fwe-mobile-tab-bar .fwe-mobile-tab-bar-button {
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -6594,10 +6622,16 @@ input[type=search]::-webkit-search-cancel-button {
   color: var(--fwe-hero-gray);
   position: relative;
 }
-.fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-icon {
+.fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-icon,
+.fwe-bottom-navigation .fwe-mobile-tab-bar-button .fwe-icon,
+.fwe-mobile-tab-bar .fwe-bottom-navigation-button .fwe-icon,
+.fwe-mobile-tab-bar .fwe-mobile-tab-bar-button .fwe-icon {
   line-height: 0px;
 }
-.fwe-bottom-navigation .fwe-bottom-navigation-button :after {
+.fwe-bottom-navigation .fwe-bottom-navigation-button :after,
+.fwe-bottom-navigation .fwe-mobile-tab-bar-button :after,
+.fwe-mobile-tab-bar .fwe-bottom-navigation-button :after,
+.fwe-mobile-tab-bar .fwe-mobile-tab-bar-button :after {
   content: "";
   position: absolute;
   top: -23px;
@@ -6607,14 +6641,23 @@ input[type=search]::-webkit-search-cancel-button {
   background: var(--fwe-hero);
   transition: height 0.3s ease;
 }
-.fwe-bottom-navigation .fwe-bottom-navigation-button.fwe-selected {
+.fwe-bottom-navigation .fwe-bottom-navigation-button.fwe-selected,
+.fwe-bottom-navigation .fwe-mobile-tab-bar-button.fwe-selected,
+.fwe-mobile-tab-bar .fwe-bottom-navigation-button.fwe-selected,
+.fwe-mobile-tab-bar .fwe-mobile-tab-bar-button.fwe-selected {
   color: var(--fwe-hero);
   cursor: default;
 }
-.fwe-bottom-navigation .fwe-bottom-navigation-button.fwe-selected :after {
+.fwe-bottom-navigation .fwe-bottom-navigation-button.fwe-selected :after,
+.fwe-bottom-navigation .fwe-mobile-tab-bar-button.fwe-selected :after,
+.fwe-mobile-tab-bar .fwe-bottom-navigation-button.fwe-selected :after,
+.fwe-mobile-tab-bar .fwe-mobile-tab-bar-button.fwe-selected :after {
   height: 4px;
 }
-.fwe-bottom-navigation .fwe-bottom-navigation-button:active {
+.fwe-bottom-navigation .fwe-bottom-navigation-button:active,
+.fwe-bottom-navigation .fwe-mobile-tab-bar-button:active,
+.fwe-mobile-tab-bar .fwe-bottom-navigation-button:active,
+.fwe-mobile-tab-bar .fwe-mobile-tab-bar-button:active {
   color: var(--fwe-hero-active);
 }
 
@@ -6660,12 +6703,12 @@ input[type=search]::-webkit-search-cancel-button {
 }
 .fwe-accordion-item::after {
   position: absolute;
-  top: 21px;
+  top: 23px;
   right: 16px;
   pointer-events: none;
   content: "";
-  height: 32px;
-  width: 32px;
+  height: 24px;
+  width: 24px;
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Im0xNiAyMi04LjcwNy04LjcwNyAxLjQxNC0xLjQxNEwxNiAxOS4xNzJsNy4yOTMtNy4yOTMgMS40MTQgMS40MTRMMTYgMjJ6IiAvPjwvc3ZnPg==");
   transition: transform 0.2s ease;
 }
@@ -6920,12 +6963,14 @@ input[type=search]::-webkit-search-cancel-button {
   margin-left: 16px;
 }
 
-.fwe-btn.fwe-btn-link.fwe-btn--tree-node-toggle {
+.fwe-btn.fwe-btn-link.fwe-btn--tree-node-toggle,
+.fwe-btn.fwe-btn-tertiary.fwe-btn--tree-node-toggle {
   color: var(--fwe-text);
   padding: 0 8px 0 16px;
   justify-content: flex-start;
 }
-.fwe-btn.fwe-btn-link.fwe-btn--tree-node-select {
+.fwe-btn.fwe-btn-link.fwe-btn--tree-node-select,
+.fwe-btn.fwe-btn-tertiary.fwe-btn--tree-node-select {
   color: var(--fwe-text);
   justify-content: flex-start;
   min-width: 0;