@festo-ui/web-essentials 9.0.1-dev.767 → 9.0.1-dev.775

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

@@ -3201,54 +3201,80 @@ header.fwe-fixed-header {
 }
 
 .fwe-breadcrumb {
+  overflow: hidden;
+}
+.fwe-breadcrumb ol {
+  overflow: hidden;
   display: flex;
-  flex-wrap: wrap;
-  justify-items: center;
+  flex-wrap: nowrap;
+  white-space: nowrap;
   align-items: center;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
-.fwe-breadcrumb .fwe-breadcrumb-item,
-.fwe-breadcrumb a {
+.fwe-breadcrumb li {
   display: flex;
+  overflow: hidden;
+  flex-shrink: 0;
   align-items: center;
   min-height: 24px;
   color: var(--fwe-text);
+  font-size: var(--fwe-font-size-md);
+  line-height: calc(var(--fwe-font-size-md) + 2px);
+}
+.fwe-breadcrumb li:last-child {
+  flex-shrink: 1;
+  min-width: 36px;
+}
+.fwe-breadcrumb li:last-child a {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fwe-breadcrumb a {
+  display: block;
+  align-items: center;
+  color: var(--fwe-text);
   text-decoration: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
-  font-size: var(--fwe-font-size-md);
-  line-height: calc(var(--fwe-font-size-md) + 2px);
 }
-.fwe-breadcrumb .fwe-breadcrumb-item:focus,
 .fwe-breadcrumb a:focus {
   outline: none;
 }
-.fwe-breadcrumb .fwe-breadcrumb-item:not(:last-child),
-.fwe-breadcrumb a:not(:last-child) {
-  cursor: pointer;
-}
-.fwe-breadcrumb .fwe-breadcrumb-item:not(:last-child):hover,
-.fwe-breadcrumb a:not(:last-child):hover {
+.fwe-breadcrumb a:hover {
   color: var(--fwe-hero);
 }
-.fwe-breadcrumb .fwe-breadcrumb-item:not(:last-child):active,
-.fwe-breadcrumb a:not(:last-child):active {
+.fwe-breadcrumb a:active {
   color: var(--fwe-hero-active);
 }
-.fwe-breadcrumb .fwe-breadcrumb-item:not(:last-child)::after,
-.fwe-breadcrumb a:not(:last-child)::after {
+.fwe-breadcrumb a[aria-current=page] {
+  font-weight: bold;
+  cursor: default;
+  pointer-events: none;
+}
+.fwe-breadcrumb li:not(:last-child)::after {
   content: "";
-  margin-left: 0px;
+  margin-left: 4px;
   margin-right: 4px;
   height: 16px;
   width: 16px;
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAxNlYwaDE2djE2eiIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Im0xMC43MDcgOC00LjM1MyA0LjM1NC0uNzA4LS43MDhMOS4yOTMgOCA1LjY0NiA0LjM1NGwuNzA4LS43MDhMMTAuNzA3IDh6Ii8+PC9zdmc+");
 }
-.fwe-breadcrumb .fwe-breadcrumb-item:last-child,
-.fwe-breadcrumb a:last-child {
-  font-weight: bold;
-  cursor: default;
-  pointer-events: none;
+.fwe-breadcrumb--mobile li {
+  display: none;
+}
+.fwe-breadcrumb--mobile li:nth-last-child(-n+2) {
+  display: flex;
+}
+.fwe-breadcrumb--mobile li:nth-last-child(2)::before {
+  content: "";
+  margin-left: 0px;
+  margin-right: 4px;
+  height: 16px;
+  width: 16px;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAxNlYwaDE2djE2eiIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Im0xMC43MDcgOC00LjM1MyA0LjM1NC0uNzA4LS43MDhMOS4yOTMgOCA1LjY0NiA0LjM1NGwuNzA4LS43MDhMMTAuNzA3IDh6Ii8+PC9zdmc+");
 }
 
 a {
@@ -4582,11 +4608,15 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
   font-weight: var(--fwe-font-weight-bold);
 }
 .fwe-select-wrapper .fwe-select {
+  text-align: left;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
   cursor: pointer;
   order: 2;
   height: 33px;
-  padding-bottom: 4px;
-  padding-top: 4px;
+  padding-inline: unset;
+  padding: 4px 24px 4px 0px;
   width: 100%;
   font-size: var(--fwe-font-size-base);
   -webkit-appearance: none;
@@ -4598,14 +4628,14 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
   border: none;
   border-bottom: 1px solid var(--fwe-control-border);
 }
-.fwe-select-wrapper .fwe-select:hover:not(:disabled) {
+.fwe-select-wrapper .fwe-select:hover:not(:disabled), .fwe-select-wrapper .fwe-select:focus:not(:disabled) {
   color: var(--fwe-hero);
   border-color: var(--fwe-hero);
 }
-.fwe-select-wrapper .fwe-select:hover:not(:disabled) option {
+.fwe-select-wrapper .fwe-select:hover:not(:disabled) option, .fwe-select-wrapper .fwe-select:focus:not(:disabled) option {
   color: var(--fwe-text);
 }
-.fwe-select-wrapper .fwe-select:hover:user-invalid {
+.fwe-select-wrapper .fwe-select:hover.fwe-invalid, .fwe-select-wrapper .fwe-select:hover:user-invalid, .fwe-select-wrapper .fwe-select:focus.fwe-invalid, .fwe-select-wrapper .fwe-select:focus:user-invalid {
   border-color: var(--fwe-red);
 }
 .fwe-select-wrapper .fwe-select:disabled {
@@ -4618,14 +4648,14 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
 .fwe-select-wrapper .fwe-select::-ms-expand {
   display: none;
 }
-.fwe-select-wrapper .fwe-select:user-invalid {
+.fwe-select-wrapper .fwe-select.fwe-invalid, .fwe-select-wrapper .fwe-select:user-invalid {
   box-shadow: none;
   border-color: var(--fwe-red);
 }
-.fwe-select-wrapper .fwe-select:user-invalid ~ .fwe-select-invalid {
+.fwe-select-wrapper .fwe-select.fwe-invalid ~ .fwe-select-invalid, .fwe-select-wrapper .fwe-select:user-invalid ~ .fwe-select-invalid {
   display: block;
 }
-.fwe-select-wrapper .fwe-select:user-invalid ~ .fwe-select-description {
+.fwe-select-wrapper .fwe-select.fwe-invalid ~ .fwe-select-description, .fwe-select-wrapper .fwe-select:user-invalid ~ .fwe-select-description {
   display: none;
 }
 .fwe-select-wrapper .fwe-select-invalid {
@@ -4633,6 +4663,54 @@ input[type=range].fwe-slider-input:disabled::-ms-thumb {
   color: var(--fwe-red);
 }
 
+.fwe-options-container {
+  max-width: 100%;
+  background-color: var(--fwe-white);
+  padding: 16px 0px;
+  margin: 0;
+  box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.2);
+  list-style: none;
+}
+.fwe-options-container:focus {
+  outline: none;
+}
+.fwe-options-container--multi-select {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 24px 12px;
+}
+
+.fwe-combobox-option {
+  padding: 8px 16px;
+  cursor: pointer;
+  position: relative;
+}
+.fwe-combobox-option:hover, .fwe-combobox-option:focus, .fwe-combobox-option.fwe-focus {
+  background-color: var(--fwe-background);
+  color: var(--fwe-hero);
+}
+.fwe-combobox-option:active, .fwe-combobox-option.fwe-selected {
+  color: var(--fwe-hero);
+}
+.fwe-combobox-option:active::before, .fwe-combobox-option.fwe-selected::before {
+  content: "";
+  width: 4px;
+  height: 100%;
+  background-color: var(--fwe-hero);
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.fwe-combobox-option.fwe-disabled {
+  color: var(--fwe-text-disabled);
+  cursor: default;
+}
+.fwe-combobox-option.fwe-disabled:hover {
+  background-color: transparent;
+  color: var(--fwe-text-disabled);
+}
+
 .fwe-badge {
   display: inline-block;
   border-radius: 2px;