@cerema/cadriciel 0.5.0

package/_template/{{project}}-ihm/src/assets/layout/styles/layout/sidebar/_sidebar_slim.scss

@@ -0,0 +1,131 @@
+@media screen and (min-width: $breakpoint) {
+  .layout-container {
+    &.layout-slim {
+      .layout-topbar {
+        .app-logo {
+          span {
+            display: none;
+          }
+        }
+      }
+
+      .topbar-menubutton {
+        display: none;
+      }
+
+      .layout-sidebar {
+        width: 5rem;
+        overflow: visible;
+
+        .layout-menu-container {
+          overflow: visible;
+          display: flex;
+          justify-content: center;
+          padding: 0;
+        }
+      }
+
+      .layout-content-wrapper {
+        margin-left: 5rem;
+      }
+
+      .layout-menu {
+        .layout-root-menuitem {
+          position: relative;
+
+          > .layout-menuitem-root-text {
+            display: none;
+          }
+
+          > a {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            cursor: pointer;
+            outline: none;
+            transition: background-color var(--transition-duration);
+            width: 3.5rem;
+            height: 3.5rem;
+            margin: 0 auto 1rem auto;
+            color: var(--v-menuitem-text-color);
+
+            &:hover {
+              background: var(--v-menuitem-hover-bg);
+            }
+
+            .layout-submenu-toggler {
+              display: none;
+            }
+
+            .layout-menuitem-icon {
+              font-size: 1.75rem;
+            }
+
+            .layout-menuitem-text {
+              display: none;
+            }
+          }
+
+          > ul {
+            position: absolute;
+            left: 4rem;
+            top: 0;
+            min-width: 15rem;
+            background-color: var(--surface-overlay);
+            border-radius: var(--border-radius);
+            box-shadow: 0px 4px 10px rgb(0 0 0 / 3%), 0px 0px 2px rgb(0 0 0 / 6%), 0px 2px 6px rgb(0 0 0 / 12%);
+            padding: 1rem;
+            max-height: 20rem;
+            overflow: auto;
+            z-index: 999;
+
+            a {
+              color: var(--v-overlay-menuitem-text-color);
+
+              &:hover {
+                background: var(--v-overlay-menuitem-hover-bg);
+              }
+            }
+
+            li {
+              a {
+                padding-left: 0.5rem;
+              }
+
+              li {
+                a {
+                  padding-left: 1.5rem;
+                }
+
+                li {
+                  a {
+                    padding-left: 2.5rem;
+                  }
+
+                  li {
+                    a {
+                      padding-left: 3.5rem;
+                    }
+
+                    li {
+                      a {
+                        padding-left: 4.5rem;
+                      }
+
+                      li {
+                        a {
+                          padding-left: 5.5rem;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/layout/sidebar/_sidebar_vertical.scss

@@ -0,0 +1,133 @@
+.layout-sidebar {
+  position: fixed;
+  width: 14rem;
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 5rem);
+  left: 0;
+  top: 5rem;
+  user-select: none;
+  background-color: var(--v-body-bg);
+  z-index: 999;
+
+  .layout-menu-container {
+    overflow: auto;
+    flex: 1;
+    height: 100%;
+    padding: 1rem 1.5rem;
+  }
+
+  .layout-menu {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    .layout-root-menuitem {
+      > .layout-menuitem-root-text {
+        font-size: .857rem;
+        text-transform: uppercase;
+        font-weight: 700;
+        padding: 1rem 0 .5rem 0;
+        color: var(--v-menuitem-text-color-secondary);
+
+        .active-route {
+          font-weight: 700;
+        }
+      }
+
+      > a {
+        display: none;
+      }
+    }
+
+    li {
+      &.active-menuitem {
+        > a {
+          .layout-submenu-toggler {
+            transform: rotate(-180deg);
+          }
+        }
+      }
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+
+      a {
+        display: flex;
+        align-items: center;
+        outline: 0 none;
+        position: relative;
+        color: var(--v-menuitem-text-color);
+        padding: .5rem;
+        margin-bottom: .25rem;
+        border-radius: var(--border-radius);
+        line-height: 1;
+        transition: background-color var(--transition-duration), box-shadow var(--transition-duration);
+        cursor: pointer;
+
+        .layout-menuitem-icon {
+          margin-right: .5rem;
+        }
+
+        .layout-submenu-toggler {
+          font-size: 75%;
+          margin-left: auto;
+          transition: transform var(--transition-duration);
+        }
+
+        &.active-route {
+          font-weight: 700;
+        }
+
+        &:hover {
+          background: var(--v-menuitem-hover-bg);
+        }
+      }
+
+      ul {
+        overflow: hidden;
+        border-radius: var(--border-radius);
+
+        li {
+          a {
+            padding-left: 1.5rem;
+          }
+
+          li {
+            a {
+              padding-left: 2.5rem;
+            }
+
+            li {
+              a {
+                padding-left: 3.5rem;
+              }
+
+              li {
+                a {
+                  padding-left: 4.5rem;
+                }
+
+                li {
+                  a {
+                    padding-left: 5.5rem;
+                  }
+
+                  li {
+                    a {
+                      padding-left: 6.5rem;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+

package/_template/{{project}}-ihm/src/assets/layout/styles/layout/theme/_dark.scss

@@ -0,0 +1,10 @@
+.layout-dark {
+  --v-body-bg: #293B51;
+  --v-menuitem-text-color-secondary: var(--text-color-secondary);
+  --v-menuitem-text-color: var(--text-color);
+  --v-menuitem-hover-bg: var(--surface-hover);
+  --v-overlay-menuitem-text-color: var(--text-color);
+  --v-overlay-menuitem-hover-bg: var(--surface-hover);
+  --v-topbar-search-button-bg: var(--surface-ground);
+  --v-topbar-search-button-icon-color: var(--v-menuitem-text-color-secondary);
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/layout/theme/_light.scss

@@ -0,0 +1,10 @@
+.layout-light {
+  --v-body-bg: #ffffff;
+  --v-menuitem-text-color-secondary: var(--text-color-secondary);
+  --v-menuitem-text-color: var(--text-color);
+  --v-menuitem-hover-bg: var(--surface-hover);
+  --v-overlay-menuitem-text-color: var(--text-color);
+  --v-overlay-menuitem-hover-bg: var(--surface-hover);
+  --v-topbar-search-button-bg: var(--surface-ground);
+  --v-topbar-search-button-icon-color: var(--v-menuitem-text-color-secondary);
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/layout/theme/_primary.scss

@@ -0,0 +1,10 @@
+.layout-primary {
+  --v-body-bg: linear-gradient(147.38deg, var(--primary-500) 0%, var(--primary-800) 100%);
+  --v-menuitem-text-color-secondary: rgba(255, 255, 255, .7);
+  --v-menuitem-text-color: var(--primary-color-text);
+  --v-menuitem-hover-bg: rgba(255, 255, 255, .1);
+  --v-overlay-menuitem-text-color: var(--text-color);
+  --v-overlay-menuitem-hover-bg: var(--surface-hover);
+  --v-topbar-search-button-bg: var(--primary-color-text);
+  --v-topbar-search-button-icon-color: var(--primary-color);
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/layout/theme/_themes.scss

@@ -0,0 +1,3 @@
+@import './_light';
+@import './_dark';
+@import './_primary';

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/_colors.scss

@@ -0,0 +1,17 @@
+:root {
+  @if variable-exists(colors) {
+    @each $name, $color in $colors {
+      @for $i from 0 through 5 {
+        @if ($i == 0) {
+          --#{$name}-50: #{tint($color, (5 - $i) * 19%)};
+        } @else {
+          --#{$name}-#{$i * 100}: #{tint($color, (5 - $i) * 19%)};
+        }
+      }
+
+      @for $i from 1 through 4 {
+        --#{$name}-#{($i + 5) * 100}: #{shade($color, $i * 15%)};
+      }
+    }
+  }
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/_common.scss

@@ -0,0 +1,68 @@
+* {
+  box-sizing: border-box;
+}
+
+.p-component {
+  font-family: $fontFamily;
+  font-size: $fontSize;
+  font-weight: $fontWeight;
+}
+
+.p-component-overlay {
+  background-color: $maskBg;
+  transition-duration: $transitionDuration;
+}
+
+.p-disabled, .p-component:disabled {
+  opacity: $disabledOpacity;
+}
+
+.p-error {
+  color: $errorColor;
+}
+
+.p-text-secondary {
+  color: $textSecondaryColor;
+}
+
+.pi {
+  font-size: $primeIconFontSize;
+}
+
+.p-link {
+  font-size: $fontSize;
+  font-family: $fontFamily;
+  border-radius: $borderRadius;
+
+  &:focus {
+    @include focused();
+  }
+}
+
+.p-component-overlay-enter {
+  animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+  animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+.p-component-overlay {
+  @keyframes p-component-overlay-enter-animation {
+    from {
+      background-color: transparent;
+    }
+    to {
+      background-color: var(--maskbg);
+    }
+  }
+
+  @keyframes p-component-overlay-leave-animation {
+    from {
+      background-color: var(--maskbg);
+    }
+    to {
+      background-color: transparent;
+    }
+  }
+}

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/_components.scss

@@ -0,0 +1,102 @@
+@import '_mixins';
+@import '_common';
+@import '_colors';
+
+//Input
+@import './components/input/_autocomplete';
+@import './components/input/_calendar';
+@import './components/input/_cascadeselect';
+@import './components/input/_checkbox';
+@import './components/input/_chips';
+@import './components/input/_colorpicker';
+@import './components/input/_dropdown';
+@import './components/input/_editor';
+@import './components/input/_inputgroup';
+@import './components/input/_inputmask';
+@import './components/input/_inputnumber';
+@import './components/input/_inputswitch';
+@import './components/input/_inputtext';
+@import './components/input/_listbox';
+@import './components/input/_multiselect';
+@import './components/input/_password';
+@import './components/input/_radiobutton';
+@import './components/input/_rating';
+@import './components/input/_selectbutton';
+@import './components/input/_slider';
+@import './components/input/_togglebutton';
+@import './components/input/_treeselect';
+
+//Button
+@import './components/button/_button';
+@import './components/button/_speeddial';
+@import './components/button/_splitbutton';
+
+//Data
+@import './components/data/_carousel';
+@import './components/data/_datatable';
+@import './components/data/_dataview';
+@import './components/data/_filter';
+@import './components/data/_fullcalendar';
+@import './components/data/_orderlist';
+@import './components/data/_organizationchart';
+@import './components/data/_paginator';
+@import './components/data/_picklist';
+@import './components/data/_timeline';
+@import './components/data/_tree';
+@import './components/data/_treetable';
+@import './components/data/_virtualscroller';
+
+//Panel
+@import './components/panel/_accordion';
+@import './components/panel/_card';
+@import './components/panel/_divider';
+@import './components/panel/_fieldset';
+@import './components/panel/_panel';
+@import './components/panel/_scrollpanel';
+@import './components/panel/_splitter';
+@import './components/panel/_tabview';
+@import './components/panel/_toolbar';
+
+//Overlay
+@import './components/overlay/_confirmpopup';
+@import './components/overlay/_dialog';
+@import './components/overlay/_overlaypanel';
+@import './components/overlay/_sidebar';
+@import './components/overlay/_tooltip';
+
+//File
+@import './components/file/_fileupload';
+
+//Menu
+@import './components/menu/_breadcrumb';
+@import './components/menu/_contextmenu';
+@import './components/menu/_dock';
+@import './components/menu/_megamenu';
+@import './components/menu/_menu';
+@import './components/menu/_menubar';
+@import './components/menu/_panelmenu';
+@import './components/menu/_slidemenu';
+@import './components/menu/_steps';
+@import './components/menu/_tabmenu';
+@import './components/menu/_tieredmenu';
+
+//Messages
+@import './components/messages/_inlinemessage';
+@import './components/messages/_message';
+@import 'components/messages/toast';
+
+//MultiMedia
+@import './components/multimedia/_galleria';
+@import './components/multimedia/_image';
+
+//Misc
+@import './components/misc/_avatar';
+@import './components/misc/_badge';
+@import './components/misc/_blockui';
+@import './components/misc/_chip';
+@import './components/misc/_inplace';
+@import './components/misc/_progressbar';
+@import './components/misc/_scrolltop';
+@import './components/misc/_skeleton';
+@import './components/misc/_tag';
+@import './components/misc/_terminal';

package/_template/{{project}}-ihm/src/assets/layout/styles/theme/designer/_mixins.scss

@@ -0,0 +1,203 @@
+@mixin icon-override($icon) {
+  &:before {
+    content: $icon;
+  }
+}
+
+@mixin focused() {
+  outline: $focusOutline;
+  outline-offset: $focusOutlineOffset;
+  box-shadow: $focusShadow;
+}
+
+@mixin focused-inset() {
+  outline: $focusOutline;
+  outline-offset: $focusOutlineOffset;
+  box-shadow: inset $focusShadow;
+}
+
+@mixin focused-input() {
+  @include focused();
+  border-color: $inputFocusBorderColor;
+}
+
+@mixin focused-listitem() {
+  outline: $focusOutline;
+  outline-offset: $focusOutlineOffset;
+  box-shadow: $inputListItemFocusShadow;
+}
+
+@mixin invalid-input() {
+  border-color: $inputErrorBorderColor;
+}
+
+@mixin menuitem-link {
+  padding: $menuitemPadding;
+  color: $menuitemTextColor;
+  border-radius: $menuitemBorderRadius;
+  transition: $listItemTransition;
+  user-select: none;
+
+  .p-menuitem-text {
+    color: $menuitemTextColor;
+  }
+
+  .p-menuitem-icon {
+    color: $menuitemIconColor;
+    margin-right: $inlineSpacing;
+  }
+
+  .p-submenu-icon {
+    color: $menuitemIconColor;
+  }
+
+  &:not(.p-disabled):hover {
+    background: $menuitemHoverBg;
+
+    .p-menuitem-text {
+      color: $menuitemTextHoverColor;
+    }
+
+    .p-menuitem-icon {
+      color: $menuitemIconHoverColor;
+    }
+
+    .p-submenu-icon {
+      color: $menuitemIconHoverColor;
+    }
+  }
+
+  &:focus {
+    @include focused-listitem();
+  }
+}
+
+@mixin horizontal-rootmenuitem-link {
+  padding: $horizontalMenuRootMenuitemPadding;
+  color: $horizontalMenuRootMenuitemTextColor;
+  border-radius: $horizontalMenuRootMenuitemBorderRadius;
+  transition: $listItemTransition;
+  user-select: none;
+
+  .p-menuitem-text {
+    color: $horizontalMenuRootMenuitemTextColor;
+  }
+
+  .p-menuitem-icon {
+    color: $horizontalMenuRootMenuitemIconColor;
+    margin-right: $inlineSpacing;
+  }
+
+  .p-submenu-icon {
+    color: $horizontalMenuRootMenuitemIconColor;
+    margin-left: $inlineSpacing;
+  }
+
+  &:not(.p-disabled):hover {
+    background: $horizontalMenuRootMenuitemHoverBg;
+
+    .p-menuitem-text {
+      color: $horizontalMenuRootMenuitemTextHoverColor;
+    }
+
+    .p-menuitem-icon {
+      color: $horizontalMenuRootMenuitemIconHoverColor;
+    }
+
+    .p-submenu-icon {
+      color: $horizontalMenuRootMenuitemIconHoverColor;
+    }
+  }
+
+  &:focus {
+    @include focused-listitem();
+  }
+}
+
+@mixin placeholder {
+  ::-webkit-input-placeholder {
+    @content
+  }
+  :-moz-placeholder {
+    @content
+  }
+  ::-moz-placeholder {
+    @content
+  }
+  :-ms-input-placeholder {
+    @content
+  }
+}
+
+@mixin scaledPadding($val, $scale) {
+  padding: nth($val, 1) * $scale nth($val, 2) * $scale;
+}
+
+@mixin scaledFontSize($val, $scale) {
+  font-size: $val * $scale;
+}
+
+@mixin nested-submenu-indents($val, $index, $length) {
+  ul {
+    li {
+      a {
+        padding-left: $val * ($index + 1);
+      }
+
+      @if $index < $length {
+        @include nested-submenu-indents($val, $index + 2, $length);
+      }
+    }
+  }
+}
+
+@mixin action-icon($enabled: true) {
+  width: $actionIconWidth;
+  height: $actionIconHeight;
+  color: $actionIconColor;
+  border: $actionIconBorder;
+  background: $actionIconBg;
+  border-radius: $actionIconBorderRadius;
+  transition: $actionIconTransition;
+
+  &:enabled:hover {
+    color: $actionIconHoverColor;
+    border-color: $actionIconHoverBorderColor;
+    background: $actionIconHoverBg;
+  }
+
+  &:focus {
+    @include focused();
+  }
+}
+
+@function tint($color, $percentage) {
+  @return mix(#fff, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+  @return mix(#000, $color, $percentage);
+}
+
+@mixin button-states {
+  // <button> and <a> tags support :enabled selector.
+
+  &:enabled,
+  &:not(button):not(a):not(.p-disabled) {
+    @content;
+  }
+}
+
+@mixin menuitem-badge {
+  background: $badgeBg;
+  color: $badgeTextColor;
+  font-size: $badgeFontSize;
+  font-weight: $badgeFontWeight;
+  min-width: $badgeMinWidth;
+  height: $badgeHeight;
+  line-height: $badgeHeight;
+  border-radius: $borderRadius;
+  margin-left: $inlineSpacing;
+  padding-left: $inlineSpacing;
+  padding-right: $inlineSpacing;
+}