@c8y/style 1023.14.33 → 1023.14.37

package/styles/core/overlays/_dropdowns.scss

@@ -0,0 +1,815 @@
+@use "../../../variables/index" as *;
+
+@use "../../mixins/c8y-scrollbar";
+@use "../../mixins/reset-filter";
+
+/**
+ * Dropdowns - Dropdown menu component styles
+ *
+ * Note: Uses $size-* tokens for spacing, $form-control-* for dimensions, and CSS custom properties.
+ *
+ * Intentionally hardcoded values:
+ * - Component-specific dimensions (160px, 200px, 240px, 250px, 281px): Menu widths and heights
+ * - Off-token spacing (9px, 15px): Legacy padding not in token system (15px grid gutter, 9px vertical padding)
+ * - Transform values (-32px, scale values): Animation positioning
+ * - Border widths (1px, 2px): Standard borders
+ * - Negative offsets (-1px, -2px): Fine-tuning for overlays
+ * - Percentages (50%, 75%, 100%): Layout and animation keyframes
+ * - Animation durations (0.2s, 0.25s): Timing
+ * - Opacity values (0, 0.5, 0.7, 1): Visual effects
+ * - Z-index values: Stacking order
+ * - RGBA values: Transparency
+ * - Calc expressions: Complex computed values
+ */
+
+.dropup,
+.dropdown {
+  position: relative;
+  display: inline-block;
+  min-width: 0;
+}
+
+.dropdown-menu {
+  --c8y-root-component-border-color: var(--c8y-dropdown-border-color);
+  --c8y-root-component-background-default: var(--c8y-dropdown-background-default);
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: $zindex-dropdown;
+  float: left;
+  margin: 0;
+  padding: 0;
+  min-width: 160px;
+  border-color: transparent;
+  border-radius: var(--c8y-dropdown-border-radius, $component-border-radius-base);
+  overflow: auto;
+  background-color: var(--c8y-dropdown-background-default, $component-background-default);
+  background-clip: padding-box;
+  list-style: none;
+  text-align: left;
+  text-transform: none;
+  font-size: $font-size-base;
+  transition: none;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-32px) scale(0.6);
+  transform-origin: left top;
+  
+  .sticky-bottom{
+    background-color: var(--c8y-dropdown-background-default, $component-background-default);
+  }
+
+  .list-group-item, .c8y-list__item {
+    box-shadow: inset 0 -1px 0 var(--c8y-dropdown-border-color) !important;
+  }
+  &.dropdown-menu-right {
+    transform-origin: right top;
+  }
+  
+  &.show, &.open{
+    animation: showDropdown 0.2s ease-out forwards;
+    visibility: visible;
+  }
+
+  &--date-range {
+    min-width: 240px;
+    c8y-wrapper-form-field > .form-group {
+      margin-bottom: $size-8;
+    }
+  }
+
+  &--modal {
+    z-index: $zindex-modal + 1 !important;
+
+    .p-l-24 {
+      padding-left: $size-16 !important;
+    }
+
+    .p-r-24 {
+      padding-right: $size-16 !important;
+    }
+
+    .m-l-24 {
+      margin-left: $size-16 !important;
+    }
+
+    .m-r-24 {
+      margin-right: $size-16 !important;
+    }
+
+    .m-l-16 {
+      margin-left: 0 !important;
+    }
+
+    .m-r-16 {
+      margin-right: 0 !important;
+    }
+  }
+
+  &.pull-right {
+    right: 0;
+    left: auto;
+  }
+
+  .divider {
+    overflow: hidden;
+    margin: 0;
+    height: 2px;
+    background: var(--c8y-dropdown-border-color, $component-border-color);
+  }
+
+  // Links within the dropdown menu
+  > li,
+  > .d-contents > li {
+    a:not(.btn):not(.c8y-asset-selector__btn):not(.btn-help),
+    button:not(.btn):not(.c8y-asset-selector__btn):not(.btn-help) {
+      &:not(.btn-add-block):not(.btn-clean):not(.collapse-btn.btn-dot) {
+        display: flex;
+        align-items: center;
+        gap: $size-4;
+        padding: 9px 15px 10px;
+        width: 100%;
+        border: 0;
+        border-top: 1px solid var(--c8y-dropdown-border-color, $component-border-color);
+        border-radius: 0;
+        background-color: var(--c8y-dropdown-background-default, $component-background-default);
+        background-image: none;
+        color: var(--c8y-dropdown-color-default, $component-color-actions);
+        text-align: left;
+        white-space: nowrap;
+        .c8y-icon {
+         color: var(--c8y-dropdown-icon-color-default);
+        }
+        &:hover {
+          &:not([disabled]) {
+            color: var(--c8y-dropdown-color-hover, $component-color-actions-hover);
+            text-decoration: none;
+            .c8y-icon {
+              color: var(--c8y-dropdown-icon-color-hover);
+            }
+          }
+        }
+
+        &:focus {
+          outline: none;
+          border-radius: $component-border-radius-focus !important;
+          box-shadow: inset 0 0 0 2px $component-color-focus;
+        }
+      }
+
+      &[disabled],
+      &.disabled {
+        &,
+        &:hover,
+        &:focus {
+          cursor: $cursor-disabled !important;
+          opacity: var(--c8y-root-component-opacity-disabled);
+          &:not(.btn) {
+            color: $component-color-actions !important;
+          }
+        }
+      }
+    }
+  }
+
+  > li:first-child a,
+  > li:first-child > button,
+  .divider + li > a {
+    border-top-color: transparent;
+  }
+
+  // forms in dropdown-menu
+  > .dropdown-form {
+    padding: $size-16;
+    min-width: 250px;
+    background-color: $component-background-default;
+    overflow-y: auto;
+    @include c8y-scrollbar.c8y-scrollbar();
+    &:has(.dropdown-footer) {
+      padding-bottom: 0;
+    }
+    .dropdown-footer {
+      margin: 0 calc(-1 * $size-16);
+      padding: $size-16;
+      @extend .separator-top !optional;
+      background-color: $component-background-default;
+    }
+  }
+
+  .form-group.datepicker {
+    .uib-datepicker-popup {
+      min-width: 281px;
+    }
+  }
+}
+
+.dropdown.open .dropdown-menu-grid-4 {
+  display: grid !important;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+
+  li > a {
+    padding: 9px $size-8;
+    border-width: 0;
+    text-align: center;
+    transition: box-shadow 0.25s ease;
+
+    &:hover,
+    &.active {
+      box-shadow: inset 0 0 0 2px $component-color-actions-hover;
+      color: $component-color-actions-hover;
+    }
+  }
+}
+
+.dropdown.open,
+bs-dropdown-container,
+[uib-datepicker-popup-wrap],
+.uib-dropdown-open {
+  > .dropdown-menu {
+    display: block;
+    height: auto;
+    opacity: 1;
+    visibility: visible;
+
+    animation: showDropdown 0.2s ease-out forwards;
+    
+    &.dropdown-menu--select{
+      animation: showDropdownY 0.2s ease-out forwards;
+    }
+    &.dropdown-menu-right{
+       transform-origin: right top;
+    }
+    &.visible-overflow {
+      overflow: visible;
+    }
+
+    li {
+      top: 0 !important;
+    }
+  }
+
+  // Remove the outline when :focus is triggered
+  > a {
+    outline: 0;
+  }
+}
+
+
+//dropdown menu when added to body
+@keyframes showDropdown {
+  /* Starting state (0%) */
+  0% {
+    opacity: 0;
+    transform: translateY(calc(-1 * $size-16)) scale(0);
+    box-shadow: var(--c8y-dropdown-elevation-default);
+  }
+
+  75%{
+    opacity: 0.5;
+  }
+  /* Ending state (100%) */
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+    box-shadow: var(--c8y-dropdown-elevation-hover);
+  }
+}
+//dropdown menu when added to body
+@keyframes showDropdownY {
+  /* Starting state (0%) */
+  0% {
+    opacity: 0;
+    transform: translateY(calc(-1 * $size-16)) scale(1,0);
+    box-shadow: var(--c8y-dropdown-elevation-default);
+  }
+
+  75%{
+    opacity: 0.5;
+  }
+  /* Ending state (100%) */
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+    box-shadow: var(--c8y-dropdown-elevation-hover);
+  }
+}
+
+bs-dropdown-container >.dropdown >.dropdown-menu {
+  animation-name: showDropdown;
+  animation-duration: .2s;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+}
+
+// Hover/Focus state
+.dropdown-menu > li > a:not(.btn) {
+  &:hover,
+  &:focus {
+    color: $component-color-actions-hover;
+    text-decoration: none;
+  }
+}
+
+// Active state
+.dropdown-menu > .active > a:not(.btn),
+.dropdown-menu > .active > button:not(.btn) {
+  &,
+  &:hover,
+  &:focus {
+    outline: 0;
+    color: $component-color-active !important;
+    text-decoration: none;
+  }
+}
+
+// Disabled state
+
+.dropdown-menu > .disabled {
+  cursor: $cursor-disabled;
+  > a,
+  > button {
+    pointer-events: none;
+    opacity: $component-disabled-opacity;
+  }
+}
+.dropdown-menu > *:not(.disabled) button[disabled]:not(.btn) {
+  &,
+  &:hover,
+  &:focus {
+    color: $component-color-disabled !important;
+  }
+
+  // Nuke hover/focus effects
+  &:hover,
+  &:focus {
+    background-color: $component-background-default;
+    background-image: none;
+    color: $component-color-disabled !important;
+    text-decoration: none;
+    cursor: $cursor-disabled;
+    @include reset-filter.reset-filter();
+  }
+}
+
+// Menu positioning
+// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
+// menu with the parent.
+.dropdown-menu-right {
+  right: 0;
+  left: auto; // Reset the default from `.dropdown-menu`
+  &-grid {
+    right: 9px !important;
+    left: auto !important;
+    transform-origin: right top;
+  }
+}
+
+@media (max-width: $screen-xs-max) {
+  .dropdown-menu-right--xs {
+    right: 0;
+    left: auto; // Reset the default from `.dropdown-menu`
+    transform-origin: left top;
+    &-grid {
+      right: 9px !important;
+      left: auto !important;
+      transform-origin: right top;
+    }
+  }
+}
+
+@media (min-width: $screen-md-min) {
+  .dropdown-menu-right--md {
+    right: 0;
+    left: auto;
+    &-grid {
+      right: 9px !important;
+      left: auto !important;
+    }
+  }
+}
+@media (min-width: $screen-sm-min) {
+  .dropdown-menu-right--sm {
+    right: 0;
+    left: auto;
+    &-grid {
+      right: 9px !important;
+      left: auto !important;
+    }
+  }
+}
+
+// This is only for left-aligning a dropdown menu within a `.navbar-right` or
+// `.pull-right` nav component.
+.dropdown-menu-left {
+  right: auto !important;
+  left: 0 !important;
+}
+
+.uib-dropdown-open {
+  .dropdown-menu-action-bar {
+    position: fixed;
+    top: 112px !important;
+  }
+}
+.uib-dropdown-open,
+.open {
+  .dropdown-menu-action-bar {
+    max-height: calc(100vh - 200px);
+    overflow-y: auto !important;
+    height: auto;
+    .c8y-list__item{
+      padding-left: $component-padding;
+      padding-right: $component-padding;
+     .c8y-list__item__body{
+        padding-top: $size-4;
+        padding-bottom: $size-4;
+      }
+    }
+  }
+}
+
+// Dropdown section headers
+.dropdown-header {
+  @extend .text-label-small !optional;
+  font-weight: 500;
+  display: block;
+  padding: $size-base $component-padding;
+  border-top: 1px solid rgba($black, 0.05);
+  background-color: $component-background-default;
+  color: $component-color-default;
+  white-space: nowrap;
+  font-size: $font-size-small;
+  line-height: $line-height-base;
+
+  &:not(:first-child) {
+    border-top: 2px solid $component-border-color;
+  }
+  &.no-border-top {
+    border-top: 0;
+  }
+}
+
+// Backdrop to catch body clicks on mobile, etc.
+.dropdown-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: ($zindex-dropdown - 10);
+}
+
+// Right aligned dropdowns
+.pull-right > .dropdown-menu {
+  right: 0;
+  left: auto;
+}
+
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+// Just add .dropup after the standard .dropdown class and you're set.
+.dropup,
+.navbar-fixed-bottom .dropdown {
+  // Different positioning for bottom up menu
+  .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: 1px;
+  }
+}
+
+// Component alignment
+@media (min-width: $grid-float-breakpoint) {
+  .navbar-right {
+    .dropdown-menu {
+      right: 0;
+      left: auto;
+    }
+
+    .dropdown-menu-left {
+      right: auto !important;
+      left: 0 !important;
+    }
+  }
+}
+
+// wrapper for the toolbar
+.more-wrapper {
+  .dropdown-menu > li > .btn.btn-link {
+    display: block;
+    padding: 10px 15px 9px !important;
+    width: 100%;
+    border-top: 1px solid $component-border-color;
+    background-color: $component-background-default;
+    color: $component-color-actions;
+    text-align: left;
+    white-space: nowrap; // prevent links from randomly breaking onto new lines
+    font-weight: normal;
+    line-height: $line-height-base;
+  }
+}
+
+.dropup,
+.navbar-fixed-bottom .dropdown {
+  // Different positioning for bottom up menu
+  .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: 1px;
+  }
+}
+
+.c8y-dropdown {
+  position: relative;
+  display: inline-block;
+  margin: 0;
+
+  &:not(.btn) {
+    padding: $size-10;
+    border: 0;
+    border-radius: 0;
+    background-color: transparent;
+    background-image: none;
+    color: $component-color-actions;
+  }
+
+  &:hover,
+  .open & {
+    text-decoration: none;
+
+    > span {
+      position: relative;
+      z-index: 10;
+    }
+  }
+
+  [class^='dlt-c8y-icon-'],
+  [class*=' dlt-c8y-icon-'] {
+    position: relative;
+  }
+
+  + .dropdown-menu {
+    overflow: hidden;
+    margin: 0;
+    height: 0;
+    border: 0;
+
+    > li,
+    > .d-contents > li {
+      a:not(.btn):not(.btn-help):not(.btn-clean),
+      button:not(.btn):not(.btn-help):not(.btn-clean),
+      label:not(.c8y-checkbox):not(.c8y-radio) {
+        display: block;
+        padding: 9px $size-16 10px;
+        width: 100%;
+        border: 0;
+        border-top: 1px solid var(--c8y-dropdown-border-color, $component-border-color);
+        border-radius: 0;
+        background-color: $component-background-default;
+        background-image: none;
+        color: $component-color-actions;
+        text-align: left;
+        white-space: nowrap;
+        &.logViewer {
+          padding: $size-8 0 0;
+        }
+
+        &:hover {
+          color: $component-color-actions-hover;
+          text-decoration: none;
+        }
+      }
+      @media (min-width: $screen-md-min) {
+        label {
+          padding: 9px $size-16 10px;
+        }
+      }
+    }
+  }
+}
+
+.dropdown.open,
+[dropdown].open,
+.dropdown[dropdown-append-to-body='true'],
+.btn-group.open {
+  .c8y-dropdown:not([aria-expanded='false']),
+  .c8y-dropdown[aria-expanded='true'] {
+    &:not(.btn) {
+      background: $component-background-default;
+      // box-shadow: var(--c8y-elevation-md-bottom);
+      outline: 1px solid $component-color-focus;
+      color: $component-color-actions-hover;
+      opacity: 1;
+      border-radius: $component-border-radius-focus;
+      outline-offset: -1px;
+
+      &:focus {
+        outline: 2px solid $component-color-focus;
+        outline-offset: -2px;
+        border-radius: $component-border-radius-focus !important;
+      }
+    }
+
+    + .dropdown-menu {
+      height: auto;
+      border: 1px solid var(--c8y-dropdown-border-color, $component-border-color);
+    }
+  }
+
+  &.dropup {
+    .c8y-dropdown {
+      position: relative;
+      z-index: 1002;
+    }
+  }
+}
+
+.dropup.open,
+.dropup.show,
+[dropup].open {
+  .c8y-dropdown {
+    &:not(.btn) {
+      color: currentColor;
+      opacity: 1;
+    }
+
+    + .dropdown-menu {
+      z-index: $zindex-navbar-fixed + 1;
+      height: auto;
+      animation: showDropdown 0.2s ease-out forwards;
+    }
+  }
+}
+
+.dropdown[c8yDropdownDirection],
+.dropdown {
+  &.dropup {
+    .dropdown-menu:not([uib-dropdown-menu]) {
+      transform: translateY(calc(-100% - $size-32)) !important;
+    }
+  }
+}
+
+body {
+  > .dropdown-menu {
+    overflow: hidden;
+    margin: 0;
+    height: 0;
+    border: 0;
+    background-color: transparent;
+    > li {
+      position: relative;
+
+      a:not(.btn):not(.btn-help):not(.btn-clean),
+      button:not(.btn):not(.btn-help):not(.btn-clean) {
+        display: block;
+        padding: 10px 15px 9px;
+        width: 100%;
+        border: 0;
+        border-top: 1px solid var(--c8y-dropdown-border-color, $component-border-color);
+        border-radius: 0;
+        background-color: $component-background-default;
+        background-image: none;
+        text-align: left;
+        white-space: nowrap;
+
+        &:hover {
+          color: $component-color-actions-hover;
+          text-decoration: none;
+        }
+        &:focus {
+          outline: 2px solid $component-color-focus;
+          outline-offset: -2px;
+          border-radius: $component-border-radius-focus !important;
+        }
+      }
+    }
+  }
+  &.uib-dropdown-open {
+    > .dropdown-menu {
+      z-index: $zindex-modal + 1 !important;
+      height: auto;
+    }
+  }
+
+  // fix z-index for ngx-bootstrap dropdown attached to body
+  > bs-dropdown-container {
+    z-index: $zindex-modal + 1 !important;
+    height: 0;
+    .dropdown {
+      position: unset;
+    }
+  }
+ // fix z-index for ngx-bootstrap dropdown attached to body and the modal is open
+  &.modal-open{
+    > bs-dropdown-container {
+      z-index: $zindex-modal + 1 !important;
+    }
+  }
+}
+
+// fix for AngularJS typeahead dropdown
+[uib-typeahead-popup].dropdown-menu {
+  overflow: auto;
+  max-height: 200px;
+  width: 100%;
+
+  @include c8y-scrollbar.c8y-scrollbar();
+
+  &:not(.uib-datepicker-popup) li {
+    position: static;
+  }
+  &:not(.ng-hide) {
+    animation: showDropdown 0.2s ease-out forwards;
+    visibility: visible;
+  }
+}
+
+.c8y-search-dropdown {
+  .input-group-dropdown {
+    z-index: 1;
+  }
+  .dropdown-menu.show & {
+    .dropdown-menu {
+      animation: none !important;
+      opacity: 1 !important;
+      inset: 100% auto auto 0 !important;
+      transform: translateY(0) !important;
+      visibility: visible !important;
+    }
+  }
+}
+
+.c8y-select-v2 {
+  display: block;
+  height: $form-control-height-base;
+  .selected-items {
+    display: contents;
+  }
+  .input-group.input-group-dropdown {
+    border: solid $form-control-border-width $form-control-border-color-default;
+    outline-offset: -1px;
+    height: $form-control-height-base;
+    &:focus-within {
+      outline: solid 2px $form-control-border-color-focus;
+      outline-offset: -2px;
+    }
+    input.form-control {
+      background: transparent;
+      box-shadow: none;
+      width: 0 !important;
+      right: 0;
+      left: 0;
+      // top:-1px;
+      z-index: 1;
+      height: calc($form-control-height-base - 2px) !important;
+      &:focus {
+        width: auto !important;
+        background: rgba(255, 255, 255, 0.6);
+        background-clip: content-box;
+      }
+    }
+    .input-group-btn {
+      height: calc($form-control-height-base - 2px) !important;
+      > button {
+        height: calc($form-control-height-base - 2px) !important;
+        &:focus {
+          margin-left: 0;
+        }
+      }
+    }
+    div.form-control {
+      box-shadow: none;
+      background-color: transparent;
+      border: 0;
+      height: calc($form-control-height-base - 2px) !important;
+    }
+  }
+  .dropdown.open,
+  .dropdown.show {
+    input.form-control{
+      z-index: 3;
+    }
+  }
+
+  &--sm{
+    height: $form-control-height-sm;
+    .input-group.input-group-dropdown {
+        height: $form-control-height-sm;
+
+      input.form-control {
+        height: calc($form-control-height-sm - 2px)!important;
+      }
+      .input-group-btn{
+        height: calc($form-control-height-sm - 2px)!important;
+        > button {
+          height: calc($form-control-height-sm - 2px)!important;
+        }
+      }
+      div.form-control {
+        height: calc($form-control-height-sm - 2px)!important;
+      }
+    }
+  }
+}