@festo-ui/web-essentials 3.0.0 → 3.1.0-pre-20220214.3

package/README.md

@@ -36,22 +36,23 @@ Installing the libraries is very easy. Just use this command to install the Web
 If you just need the static CSS resources then you can find them inside the `dist` directory.
 
 Import the css like this:
- ```css
- ...
- @import '~@festo-ui/web-essentials/dist/css/festo-web-essentials.min.css'
- ...
- ```
+
+```css
+... @import '~@festo-ui/web-essentials/dist/css/festo-web-essentials.min.css' ...;
+```
 
 ### Using the SCSS variables in your project
+
 If you want to use the variables (color or more) from the web essentials library, you can add the scss resources.
 
-You'll find them inside the directory ``node_modules/@festo-ui/web-essentials/scss``.
+You'll find them inside the directory `node_modules/@festo-ui/web-essentials/scss`.
+
+You can use the variables like this:
+`example.scss`
 
- You can use the variables like this:
- ``example.scss``
- ```scss
- @import '~@festo-ui/web-essentials/scss/variables';
+```scss
+@import '~@festo-ui/web-essentials/scss/variables';
 
- background: $hero; // background is carul now
- @extend .fwe-icon-menu-close // add the menu-close icon as ::before element
- ```
+background: $hero; // background is carul now
+@extend .fwe-icon-menu-close; // add the menu-close icon as ::before element
+```

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

@@ -13493,32 +13493,75 @@ template {
     justify-items: legacy center !important;
   }
 }
-.fwe-container, .fwe-navbar-bottom-box {
+.fwe-container {
   padding: 0 8px 0 8px;
   box-sizing: border-box;
   width: 100%;
 }
 
 @media (min-width: 600px) {
-  .fwe-container, .fwe-navbar-bottom-box {
+  .fwe-container {
     padding: 0 16px 0 16px;
   }
 }
 @media (min-width: 1025px) {
-  .fwe-container, .fwe-navbar-bottom-box {
+  .fwe-container {
     padding: 0 24px 0 24px;
   }
 }
 @media (min-width: 1281px) {
-  .fwe-container, .fwe-navbar-bottom-box {
+  .fwe-container {
     padding: 0 60px 0 60px;
   }
 }
 @media (min-width: 1921px) {
-  .fwe-container, .fwe-navbar-bottom-box {
+  .fwe-container {
     padding: 0 86px 0 86px;
   }
 }
+.fwe-layout-1920, .fwe-layout-1024, .fwe-layout-1440 {
+  display: flex;
+  justify-content: center;
+  padding: 0px !important;
+}
+.fwe-layout-1920 .fwe-container, .fwe-layout-1024 .fwe-container, .fwe-layout-1440 .fwe-container {
+  padding: 0px !important;
+  max-width: 1792px;
+  margin-right: 64px;
+  margin-left: 64px;
+}
+@media (max-width: 1281px) {
+  .fwe-layout-1920 .fwe-container, .fwe-layout-1024 .fwe-container, .fwe-layout-1440 .fwe-container {
+    margin-right: 32px;
+    margin-left: 32px;
+  }
+}
+@media (max-width: 769px) {
+  .fwe-layout-1920 .fwe-container, .fwe-layout-1024 .fwe-container, .fwe-layout-1440 .fwe-container {
+    margin-right: 16px;
+    margin-left: 16px;
+  }
+}
+@media (max-width: 600px) {
+  .fwe-layout-1920 .fwe-container, .fwe-layout-1024 .fwe-container, .fwe-layout-1440 .fwe-container {
+    margin-right: 8px;
+    margin-left: 8px;
+  }
+}
+.fwe-layout-1920 .fwe-container .fwe-app-logo-container, .fwe-layout-1024 .fwe-container .fwe-app-logo-container, .fwe-layout-1440 .fwe-container .fwe-app-logo-container {
+  position: unset;
+  margin-bottom: 17px;
+  margin-right: 24px;
+}
+
+.fwe-layout-1440 .fwe-container {
+  max-width: 1312px;
+}
+
+.fwe-layout-1024 .fwe-container {
+  max-width: 960px;
+}
+
 .fwe-toolbar {
   width: 60px;
   padding: 0;
@@ -14299,13 +14342,13 @@ header.fwe-fixed-header {
     display: block;
   }
 }
-.fwe-navbar .fwe-container, .fwe-navbar .fwe-navbar-bottom-box {
+.fwe-navbar .fwe-container {
   display: flex;
   align-items: flex-end;
   height: 64px;
   max-height: 64px;
 }
-.fwe-navbar .fwe-container img.fwe-logo, .fwe-navbar .fwe-navbar-bottom-box img.fwe-logo {
+.fwe-navbar .fwe-container img.fwe-logo {
   position: relative;
   top: 4px;
   left: 0px;
@@ -14515,13 +14558,17 @@ header.fwe-fixed-header {
 }
 
 .fwe-navbar-bottom-box {
+  background-color: var(--fwe-control);
+}
+.fwe-navbar-bottom-box .fwe-container {
+  overflow: hidden;
+  height: 48px;
   display: flex;
   align-items: center;
-  height: 48px;
-  background-color: var(--fwe-control);
 }
 
 .fwe-breadcrumb {
+  white-space: nowrap;
   display: flex;
   justify-items: center;
   align-items: center;
@@ -17284,4 +17331,36 @@ input[type=search]::-webkit-search-cancel-button {
   background: var(--fwe-background);
 }
 
+.fwe-bottom-navigation {
+  width: 100%;
+  display: flex;
+  background: var(--fwe-white);
+  align-items: flex-start;
+  justify-content: space-between;
+  border-top: 1px solid var(--fwe-border);
+  height: 84px;
+  padding: 22px 16px;
+}
+.fwe-bottom-navigation .fwe-bottom-navigation-button {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--fwe-icon-gray);
+}
+.fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-icon, .fwe-bottom-navigation .fwe-bottom-navigation-button table.fwe-table tr th.fwe-table-order, table.fwe-table tr .fwe-bottom-navigation .fwe-bottom-navigation-button th.fwe-table-order, .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-navbar .fwe-navbar-burger-menu, .fwe-navbar .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-navbar-burger-menu, .fwe-bottom-navigation .fwe-bottom-navigation-button label.fwe-checkbox .fwe-checkbox-checkmark, label.fwe-checkbox .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-checkbox-checkmark, .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-select-wrapper, .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-pagination .fwe-navigate-btn, .fwe-pagination .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-navigate-btn, .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-pagination .fwe-navigate-btn-up, .fwe-pagination .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-navigate-btn-up, .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-pagination .fwe-navigate-btn-down, .fwe-pagination .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-navigate-btn-down, .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-notification-menu .fwe-notification-list .fwe-notification-item-content, .fwe-notification-menu .fwe-notification-list .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-notification-item-content, .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-notification-menu .fwe-notification-list .fwe-notification-info, .fwe-notification-menu .fwe-notification-list .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-notification-info, .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-notification-menu .fwe-notification-list .fwe-notification-warning, .fwe-notification-menu .fwe-notification-list .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-notification-warning, .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-notification-menu .fwe-notification-list .fwe-notification-error, .fwe-notification-menu .fwe-notification-list .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-notification-error, .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-search-input .fwe-search-icon, .fwe-search-input .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-search-icon, .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-search-input .fwe-clear-icon, .fwe-search-input .fwe-bottom-navigation .fwe-bottom-navigation-button .fwe-clear-icon {
+  line-height: 0px;
+}
+.fwe-bottom-navigation .fwe-bottom-navigation-button.fwe-selected {
+  color: var(--fwe-hero);
+}
+.fwe-bottom-navigation .fwe-bottom-navigation-button:active {
+  color: var(--fwe-hero-darker);
+}
+
 /*# sourceMappingURL=festo-web-essentials.css.map */