@rio-cloud/rio-uikit 0.15.1 → 0.16.0-beta-3

package/lib/style/css/components/Dialog.less

@@ -0,0 +1,482 @@
+@modal-outer-margin: 30px;
+@modal-inner-padding: 20px;
+@modal-title-padding: 15px;
+@modal-content-bg: @color-white;
+@modal-content-border-color: @gray-light;
+@modal-backdrop-bg: @color-black;
+@modal-header-border-color: @gray-lighter;
+@modal-footer-border-color: @modal-header-border-color;
+
+// Custom variables
+@modal-sm: @screen-xs;
+@modal-md: @screen-sm;
+@modal-lg: @container-fluid-md;
+@modal-xl: @container-fluid-lg;
+
+body {
+  &.modal-open {
+    overflow: hidden;
+
+    // kills the body scrolling
+    .modal {
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+}
+
+.modal {
+  -webkit-overflow-scrolling: touch;
+  bottom: 0;
+  cursor: default;
+  display: none;
+  left: 0;
+  outline: 0;
+  overflow: auto;
+  padding-left: 0 !important;
+  position: fixed;
+  right: 0;
+  text-align: left;
+  top: 0;
+  width: 100% !important;
+  z-index: @zindex-modal;
+
+  // When fading in the modal, animate it to slide down
+  &.fade .modal-dialog {
+    transform: translate(0, -25%);
+    transition: transform 0.3s ease-out;
+  }
+  &.in .modal-dialog {
+    transform: translate(0, 0)
+  }
+
+  &.show {
+    &.media-dialog {
+      display: flex !important;
+      align-items: center;
+
+      .modal-dialog {
+        max-height: calc(~'100vh - (@{modal-outer-margin} * 2)'); // --vh fallback
+        max-height: calc(~'var(--vh, 1vh) * 100 - (@{modal-outer-margin} * 2)');
+      }
+
+      .modal-body {
+        .media-content {
+          overflow: hidden;
+
+          img {
+            display: block;
+            max-height: calc(~'100vh - (@{modal-outer-margin} * 7)'); // --vh fallback
+            max-height: calc(~'var(--vh, 1vh) * 100 - (@{modal-outer-margin} * 7)');
+            width: auto;
+          }
+
+          @media (max-width: @screen-md) {
+            min-height: 100px;
+          }
+
+          @media (min-width: @screen-md) {
+            min-height: 200px;
+          }
+
+          .video-responsive {
+            &.video-responsive-16by9 {
+              padding-bottom: calc(~'100vh * 0.56'); // --vh fallback
+              padding-bottom: calc(~'var(--vh, 1vh) * 100 * 0.56');
+            }
+
+            &.video-responsive-4by3 {
+              padding-bottom: calc(~'100vh * 0.75'); // --vh fallback
+              padding-bottom: calc(~'var(--vh, 1vh) * 100 * 0.75');
+            }
+          }
+        }
+
+        // because of overflow :after styling
+        &:after {
+          display: none !important;
+        }
+      }
+
+      .modal-footer:before {
+        display: none;
+      }
+
+      @media (max-width: @screen-sm) {
+        .modal-dialog {
+          width: calc(~'100% - @{modal-inner-padding}');
+        }
+      }
+    }
+  }
+
+  .modal-dialog {
+    margin: @modal-outer-margin auto;
+    max-width: calc(~'100vw - @{modal-outer-margin} * 2');
+    position: relative;
+    width: @screen-sm;
+    z-index: @zindex-modal;
+
+    &:focus {
+      outline: none;
+    }
+
+    .modal-content {
+      &:extend(.shadow-hard);
+      background-clip: padding-box;
+      background-color: @modal-content-bg;
+      border-radius: @border-radius-lg;
+      border: 1px solid @modal-content-border-color;
+      border: none;
+      display: flex;
+      flex-direction: column;
+      outline: 0;
+      position: relative;
+
+      .modal-header {
+        &:extend(.clearfix all);
+        border-bottom: 1px solid @modal-header-border-color;
+        display: flex;
+        justify-content: space-between;
+        padding: @modal-title-padding;
+        padding: 0;
+        position: relative;
+        z-index: 1;
+
+        &-text {
+          color: @gray-darkest;
+          display: flex;
+          flex-direction: column;
+          float: left;
+          font-weight: @font-light;
+          justify-content: center;
+          padding: 15px;
+          width: calc(~'100% - 60px');
+          word-break: break-word;
+
+          .modal-header-title {
+            display: flex;
+            order: 1;
+            font-size: @font-size-xl - 2;
+            line-height: @font-size-xl - 2;
+          }
+
+          .modal-header-subtitle {
+            display: flex;
+            font-size: @font-size-default;
+            line-height: @font-size-default;
+            margin-top: 3px;
+            order: 2;
+
+            +.modal-header-title {
+              font-size: @font-size-xl - 5;
+              line-height: @font-size-xl - 5;
+            }
+          }
+        }
+
+        &-buttons {
+          display: flex;
+          align-items: center;
+
+          &-spacer {
+            &:last-child {
+              display: none;
+            }
+
+            background-color: @gray-lighter;
+            height: 20px;
+            margin-right: 10px;
+            width: 2px;
+          }
+
+          .btn {
+            &:not(:only-child) {
+              margin-right: 10px;
+            }
+
+            &:focus,
+            span:focus {
+              outline: 0;
+            }
+          }
+
+          // START TODO remove with v1.0 (downward compatibility) - remove when cleanup
+          .sr-only {
+            display: none !important;
+          }
+          // END TODO remove with v1.0 (downward compatibility) - remove when cleanup
+        }
+      }
+
+      .modal-body {
+        position: relative;
+        padding: @modal-inner-padding;
+      }
+
+      .modal-footer {
+        &:extend(.clearfix all);
+        border-top: 1px solid @modal-footer-border-color;
+        display: block;
+        padding: @modal-inner-padding;
+        position: relative;
+        text-align: right;
+        z-index: 1;
+      }
+    }
+
+    @media (max-width: @modal-sm) {
+      width: @modal-sm;
+      margin: @modal-outer-margin * 0.5 auto;
+      max-width: calc(~'100vw - @{modal-outer-margin}');
+    }
+
+    @media (min-width: @modal-sm) {
+      &.modal-sm {
+        width: @modal-sm;
+      }
+
+      &.modal-lg {
+        width: @modal-lg;
+      }
+
+      &.modal-xl {
+        width: @modal-xl;
+      }
+
+      &.modal-full {
+        width: calc(~'100vw - @{modal-outer-margin} * 2');
+      }
+
+      &.modal-fullscreen {
+        width: calc(~'100vw - @{modal-outer-margin} * 2');
+      }
+    }
+
+    &.modal-fullscreen {
+      .modal-content {
+        height: calc(~'100vh - (@{modal-outer-margin} * 2)'); // --vh fallback
+        height: calc(~'var(--vh, 1vh) * 100 - (@{modal-outer-margin} * 2)');
+        display: flex;
+        flex-direction: column;
+
+        @media (max-width: @modal-sm) {
+          height: calc(~'100vh - (@{modal-outer-margin})'); // --vh fallback
+          height: calc(~'var(--vh, 1vh) * 100 - (@{modal-outer-margin})');
+        }
+
+        .modal-body {
+          flex: 1 1 0; // instead "auto" we 0 for safari
+          position: relative;
+
+          .iframe-wrapper {
+            overflow: hidden;
+            height: 100%;
+          }
+
+          &.display-flex {
+            > .iframe-wrapper {
+              flex: 1 1 0; // instead "auto" we 0 for safari
+            }
+          }
+        }
+      }
+    }
+
+    &.modal-overflow {
+      .modal-content {
+        max-height: calc(~'100vh - (@{modal-outer-margin} * 2)'); // --vh fallback
+        max-height: calc(~'var(--vh, 1vh) * 100 - (@{modal-outer-margin} * 2)');
+
+        @media (max-width: @modal-sm) {
+          max-height: calc(~'100vh - (@{modal-outer-margin})'); // --vh fallback
+          max-height: calc(~'var(--vh, 1vh) * 100 - (@{modal-outer-margin})');
+        }
+
+        .modal-body {
+          overflow-y: auto;
+
+          &:after {
+            content: '';
+            display: block;
+            height: 30px;
+          }
+        }
+
+        .modal-footer {
+          &:before {
+            background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+            content: '';
+            height: 20px;
+            left: 0;
+            pointer-events: none;
+            position: absolute;
+            top: -21px;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .modal-backdrop {
+    background-color: @modal-backdrop-bg;
+    bottom: 0;
+    display: block;
+    left: 0;
+    opacity: 0.5;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: @zindex-modal-background;
+
+    // Fade for backdrop
+    &.fade { opacity: 0 }
+    &.in { opacity: 0.5 }
+  }
+
+  &.backdrop-blured .modal-backdrop {
+    @supports ((-webkit-backdrop-filter: blur()) or (backdrop-filter: blur())) {
+      opacity: 0.99;
+      background-color: rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(5px);
+    }
+  }
+
+  &.TableSettingsDialog {
+    .modal-body {
+      background: @gray-lightest;
+      padding-left: 0;
+      padding-right: 0;
+
+      @media (max-height: 450px) and (min-width: @screen-sm - 0.1) {
+        max-height: calc(~'100vh - 200px'); // --vh fallback
+        max-height: calc(~'var(--vh, 1vh) * 100 - 200px');
+        overflow-y: auto;
+      }
+
+      // TableSettings item styles are colocated with the components
+    }
+  }
+}
+
+@splitWrapperBreakpoint: 580px;
+
+.split-wrapper {
+  display: flex;
+
+  @media (max-width: @splitWrapperBreakpoint) {
+    flex-direction: column;
+    margin-top: -(@modal-inner-padding);
+  }
+
+  .split-left {
+    position: relative;
+    width: auto;
+
+    @media (min-width: @splitWrapperBreakpoint) {
+      width: 200px;
+
+      > .ListMenu  {
+        position: sticky;
+        top: 0;
+      }
+    }
+
+    @media (max-width: @splitWrapperBreakpoint) {
+      background-color: @color-white;
+      height: 60px;
+      left: -(@modal-inner-padding);
+      padding-top: @modal-inner-padding;
+      position: sticky;
+      right: -(@modal-inner-padding);
+      top: -(@modal-inner-padding);
+
+      .expander-panel {
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+      }
+    }
+
+    .modal-lg &,
+    .modal-xl &,
+    .modal-full & {
+      @media (min-width: @splitWrapperBreakpoint) {
+        width: 20%;
+      }
+    }
+
+    .split-divider {
+      bottom: 0;
+      padding-left: 1px;
+      position: absolute;
+      right: 0;
+      top: 0;
+
+      @media (max-width: @splitWrapperBreakpoint) {
+        display: none;
+      }
+    }
+  }
+
+  .split-right {
+    width: 100%;
+    flex: 1 1;
+
+    @media (min-width: @splitWrapperBreakpoint) {
+      padding-left: 20px;
+    }
+
+    @media (max-width: @splitWrapperBreakpoint) {
+      padding-top: 20px;
+    }
+
+    .modal-lg &,
+    .modal-xl &,
+    .modal-full & {
+      @media (min-width: @splitWrapperBreakpoint) {
+        max-width: 80%;
+      }
+    }
+  }
+}
+
+/* Animation classes for dialogs triggered by "react-transition-group" component */
+.modal-enter {
+  .modal-content {
+    display: block;
+    opacity: 0;
+    transform: translate(0, -25%);
+  }
+
+  .modal-backdrop {
+    opacity: 0;
+  }
+}
+
+.modal-enter-active {
+  .modal-content {
+    display: block;
+    opacity: 1;
+    transform: translate(0, 0);
+    transition: all 200ms ease-out;
+  }
+
+  .modal-backdrop {
+    opacity: 0.5;
+    transition: all 200ms ease-out;
+  }
+}
+
+.modal-exit-active {
+  .modal-content {
+    opacity: 0;
+    transform: translateY(-50%);
+    transition: all 200ms ease-out;
+  }
+
+  .modal-backdrop {
+    opacity: 0;
+  }
+}

package/lib/style/css/components/Dropdown.less

@@ -0,0 +1,186 @@
+@dropdown-max-height: 211px; // Used for Select and AutoSuggest components
+
+.btn-group.open .dropdown-toggle {
+  box-shadow: none !important;
+}
+
+.dropdown {
+  position: relative;
+
+  &-menu {
+    &:extend(.shadow-hard-to-bottom);
+    .reset-list();
+    background-color: @color-white;
+    border-radius: @border-radius-default;
+    border: 1px solid @gray-light;
+    font-size: @font-size-default;
+    min-width: 160px;
+    padding: 0;
+    position: absolute;
+    text-align: left;
+    width: 100%;
+    z-index: @zindex-dropdown;
+
+    // closed by default
+    display: none;
+
+    // open when needed
+    .dropdown.open > & {
+      display: block;
+    }
+
+    // portal style
+    #uikit-root > & {
+      display: block;
+      width: auto;
+    }
+
+    > li {
+      > a {
+        border-radius: 4px;
+        color: @gray-darkest;
+        cursor: pointer;
+        display: block;
+        line-height: 1.25;
+        margin: 2px 6px;
+        padding: 7px 13px;
+        position: relative;
+        user-select: none;
+
+        &:active:focus {
+          outline: 0;
+        }
+
+        &:hover,
+        &:focus {
+          background-color: @brand-primary;
+          color: @color-white;
+          text-decoration: none;
+        }
+      }
+
+      &:first-child:not(:last-child) {
+        margin-top: 5px;
+      }
+
+      &:last-child:not(:first-child) {
+        margin-bottom: 5px;
+      }
+    }
+
+    > .active > a {
+      color: inherit;
+      background-color: inherit;
+
+      &,
+      &:hover,
+      &:focus {
+        background-color: @brand-primary;
+        color: @color-white;
+        outline: 0;
+        text-decoration: none;
+      }
+    }
+
+    > .disabled > a {
+      &,
+      &:hover,
+      &:focus {
+        color: @gray-light;
+      }
+
+      // OLD BS STUFF
+      // Nuke hover/focus effects
+      &:hover,
+      &:focus {
+        .reset-filter();
+        background-color: transparent;
+        background-image: none;
+        cursor: not-allowed;
+        text-decoration: none;
+      }
+    }
+
+    // OLD BS STUFF
+    // .menuitem:focus {
+    //   outline: 0;
+    // }
+
+    > .dropdown-header {
+      display: flex;
+      padding: 5px 10px;
+      pointer-events: none;
+      align-items: center;
+
+      &:not(.center) {
+        margin-top: 15px;
+
+        ~ li:not(.dropdown-header) a {
+          padding-left: 20px;
+        }
+      }
+
+      .dropdown-header-text {
+        background: @color-white;
+        color: lighten(@gray, 5%);
+        font-size: 12px;
+        font-weight: @font-medium;
+        line-height: 1.25;
+        max-width: calc(~"100% - 30px");
+        text-align: center;
+        text-transform: uppercase;
+      }
+    }
+
+    > .divider {
+      background-color: @gray-light;
+      height: 1px;
+      margin: 3px 6px;
+    }
+  }
+
+  &:not(.open) {
+    > .dropdown-menu {
+      display: block;
+      position: fixed;
+      top: -10000px;
+      left: -10000px;
+    }
+  }
+
+  &-submenu {
+    position: relative;
+
+    > .dropdown-menu {
+      bottom: auto;
+      display: none;
+      left: 100%;
+      top: 0;
+    }
+
+    &:hover > .dropdown-menu {
+      display: block;
+    }
+
+    &.disabled:hover > .dropdown-menu {
+      display: none;
+    }
+
+    > .submenu-title {
+      cursor: pointer;
+
+      > .submenu-title-text {
+        padding-right: 5px;
+      }
+
+      > .rioglyph {
+        align-items: center;
+        display: flex;
+        font-size: 0.8em;
+        height: 100%;
+        position: absolute;
+        right: 8px;
+      }
+    }
+  }
+}