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

package/lib/style/css/design/button-groups.less

@@ -0,0 +1,194 @@
+.btn-group {
+  display: inline-flex;
+
+  > .btn {
+    position: relative;
+
+    // Bring the "active" button to the front
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 2;
+    }
+  }
+
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
+    margin-left: -1px;
+  }
+}
+
+.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+  border-radius: 0;
+}
+
+// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
+.btn-group > .btn:first-child {
+  margin-left: 0;
+
+  &:not(:last-child):not(.dropdown-toggle) {
+    .border-right-radius(0);
+  }
+}
+// Need .dropdown-toggle since :last-child doesn't apply, given that a .dropdown-menu is used immediately after it
+.btn-group > .btn:last-child:not(:first-child),
+.btn-group > .dropdown-toggle:not(:first-child) {
+  .border-left-radius(0);
+}
+
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+
+.btn-group > .btn-group:first-child:not(:last-child) {
+  > .btn:last-child,
+  > .dropdown-toggle {
+    .border-right-radius(0);
+  }
+}
+
+.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
+  .border-left-radius(0);
+}
+
+// On active and open, don't show outline
+.btn-group .dropdown-toggle:active,
+.btn-group.open .dropdown-toggle {
+  outline: 0;
+}
+
+
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-xs > .btn { &:extend(.btn-xs); }
+.btn-group-sm > .btn { &:extend(.btn-sm); }
+.btn-group-lg > .btn { &:extend(.btn-lg); }
+
+
+// Split button dropdowns
+// ----------------------
+
+// Give the line between buttons some depth
+.btn-group > .btn + .dropdown-toggle {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.btn-group > .btn-lg + .dropdown-toggle {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+// The clickable button for toggling the menu
+// Remove the gradient and set the same inset shadow as the :active state
+.btn-group.open .dropdown-toggle {
+  box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
+
+  // Show no shadow for `.btn-link` since it has no other button styles.
+  &.btn-link {
+    box-shadow:none;
+  }
+}
+
+
+// Reposition the caret
+.btn .caret {
+  margin-left: 0;
+}
+
+// Carets in other button sizes
+.btn-lg .caret {
+  border-width: 5px 5px 0;
+  border-bottom-width: 0;
+}
+
+// Upside down carets for .dropup
+.dropup .btn-lg .caret {
+  border-width: 0 5px 5px;
+}
+
+
+// Vertical button groups
+// ----------------------
+
+.btn-group-vertical {
+  > .btn,
+  > .btn-group,
+  > .btn-group > .btn {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  // Clear floats so dropdown menus can be properly placed
+  > .btn-group {
+    &:extend(.clearfix all);
+  }
+
+  > .btn + .btn,
+  > .btn + .btn-group,
+  > .btn-group + .btn,
+  > .btn-group + .btn-group {
+    margin-top: -1px;
+    margin-left: 0;
+  }
+}
+
+.btn-group-vertical > .btn {
+  &:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+
+  &:first-child:not(:last-child) {
+    .border-top-radius(@border-radius-default);
+    .border-bottom-radius(0);
+  }
+
+  &:last-child:not(:first-child) {
+    .border-top-radius(0);
+    .border-bottom-radius(@border-radius-default);
+  }
+}
+
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+
+.btn-group-vertical > .btn-group:first-child:not(:last-child) {
+  > .btn:last-child,
+  > .dropdown-toggle {
+    .border-bottom-radius(0);
+  }
+}
+
+.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
+  .border-top-radius(0);
+}
+
+.btn-group-justified {
+  border-collapse: inherit;
+  display: flex;
+  table-layout: inherit;
+  width: 100%;
+
+  > .btn,
+  > .btn-group {
+    display: flex;
+    flex: 1 1 auto;
+    float: none;
+    width: 0;
+  }
+
+  > .btn-group .btn {
+    width: 100%;
+  }
+
+  > .btn-group .dropdown-menu {
+    left: auto;
+  }
+}

package/lib/style/css/design/buttons.less

@@ -0,0 +1,540 @@
+@btn-primary-color: @color-white;
+@btn-primary-bg: @brand-primary;
+@btn-primary-border: darken(@btn-primary-bg, 5%);
+@btn-secondary-color: @color-white;
+@btn-secondary-bg: @brand-secondary;
+@btn-secondary-border: darken(@btn-secondary-bg, 5%);
+@btn-default-color: @btn-primary-bg;
+@btn-default-bg: @color-white;
+@btn-default-border: @btn-primary-border;
+@btn-success-color: @color-white;
+@btn-success-bg: @brand-success;
+@btn-success-border: darken(@btn-success-bg, 5%);
+@btn-warning-color: @color-white;
+@btn-warning-bg: @brand-warning;
+@btn-warning-border: darken(@btn-warning-bg, 5%);
+@btn-danger-color: @color-white;
+@btn-danger-bg: @brand-danger;
+@btn-danger-border: darken(@btn-danger-bg, 5%);
+@btn-info-color: @color-white;
+@btn-info-bg: @brand-info;
+@btn-info-border: darken(@btn-info-bg, 5%);
+@btn-link-disabled-color: @gray-light;
+@btn-muted-color: @gray;
+@btn-muted-active-color: @gray-dark;
+
+// right order is important
+.rio-btn(@btn-size-default; ~'');
+.rio-btn(@btn-size-xs; -xs);
+.rio-btn(@btn-size-sm; -sm);
+.rio-btn(@btn-size-lg; -lg);
+
+.btn {
+  align-items: center;
+  background-image: none;
+  border: 1px solid transparent;
+  cursor: pointer;
+  display: inline-flex;
+  font-weight: normal;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+  touch-action: manipulation;
+  user-select:none;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  // btn sizes
+  .button-size(@padding-default-vertical; @padding-default-horizontal; @font-size-default; @line-height-default; @border-radius-default);
+  &.btn-lg { .button-size(@padding-lg-vertical; @padding-lg-horizontal; @font-size-lg; @line-height-lg; @border-radius-lg); }
+  &.btn-sm { .button-size(@padding-sm-vertical; @padding-sm-horizontal; @font-size-sm; @line-height-sm; @border-radius-sm); }
+  &.btn-xs { .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-xs; @line-height-xs; @border-radius-xs); }
+
+  &.btn-block {
+    display: block;
+    width: 100%;
+  }
+
+  &.btn-icon-only {
+    padding: 0;
+  }
+
+  &.btn-toggle.active {
+    box-shadow: inset 0 1px 5px 1px rgb(90 101 102 / 50%);
+
+    &.btn-primary {
+      box-shadow: inset 0 1px 5px 1px rgb(90 101 102 / 70%);
+    }
+  }
+
+  &-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    // FALLBACK
+    .css-no-gap & {
+      > * {
+        margin: 5px;
+      }
+    }
+
+    .btn + .dropdown-toggle,
+    .btn-group > .btn:not(:first-child) {
+      margin-left: -1px !important;
+    }
+  }
+
+  &:active,
+  &.active,
+  &:focus,
+  &.focus {
+    outline: 0 !important;
+    outline-offset: 0 !important;
+    text-decoration: none;
+  }
+
+  &.disabled,
+  &[disabled] {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  .caret {
+    align-self: center;
+    position: relative;
+    border-color: @btn-primary-color;
+  }
+
+  &.btn-default {
+    .caret {
+      border-color: @brand-primary;
+
+      .open & {
+        border-color: @color-white;
+      }
+    }
+
+    &:hover,
+    &:active,
+    &.active,
+    &:focus,
+    &.focus,
+    &:active:focus,
+    &:active.focus,
+    &.active:focus,
+    &.active.focus {
+      .caret {
+        border-color: @color-white;
+      }
+    }
+  }
+
+  &.btn-muted,
+  &.btn-close {
+    background: none;
+
+    &:hover,
+    &:active,
+    &.active,
+    &:focus,
+    &.focus,
+    &:active:focus,
+    &:active.focus,
+    &.active:focus,
+    &.active.focus {
+      text-decoration: none;
+      box-shadow: none;
+    }
+  }
+
+  &.btn-muted {
+    background: none !important;
+    border-color: transparent !important;
+    color: @btn-muted-color !important;
+
+    > .rioglyph {
+      color: @btn-muted-color;
+    }
+
+    &:hover,
+    &:active,
+    &.active,
+    &:focus,
+    &.focus,
+    &:active:focus,
+    &:active.focus,
+    &.active:focus,
+    &.active.focus {
+      color: @btn-muted-active-color !important;
+
+      > .rioglyph {
+        color: @btn-muted-active-color;
+      }
+    }
+  }
+
+  &.btn-outline {
+    &:not(:hover):not(:active):not(.active):not(:focus):not(.focus) {
+      background: none;
+
+      // primary
+      // secondary
+      // info
+      // success
+      // warning
+      // danger
+      each(@colors-brand-and-status-map, {
+        &.btn-@{key} {
+          color: @value;
+
+          > .rioglyph {
+            color: @value;
+          }
+        }
+      })
+    }
+  }
+
+  &.btn-link,
+  &.btn-action {
+    background: none !important;
+    border: none !important;
+    color: @link-color;
+
+    &.btn-link-inline {
+      display: inline;
+      font-size: inherit;
+      line-height: inherit;
+      margin: 0;
+      padding: 0;
+      text-align: left;
+      vertical-align: baseline;
+      white-space: inherit;
+      height: inherit;
+    }
+
+    > .rioglyph {
+      color: @link-color;
+    }
+
+    &:active,
+    &.active,
+    &:focus,
+    &.focus {
+      background: none !important;
+      border-color: transparent !important;
+    }
+
+    // custom overwrite
+    &.btn-default:hover {
+      color: @brand-primary;
+
+      > .rioglyph {
+        color: @brand-primary;
+      }
+    }
+
+    // primary
+    // secondary
+    // info
+    // success
+    // warning
+    // danger
+    each(@colors-brand-and-status-map, {
+      &.btn-@{key} {
+        color: @value;
+
+        > .rioglyph {
+          color: @value;
+        }
+      }
+    })
+
+    &:hover,
+    &:active,
+    &.active,
+    &:focus,
+    &.focus,
+    &:active:focus,
+    &:active.focus,
+    &.active:focus,
+    &.active.focus {
+      background: none;
+      border-color: transparent;
+      text-decoration: none;
+      box-shadow: none;
+
+      > .rioglyph {
+        color: @color-highlight-dark;
+      }
+
+      // primary
+      // secondary
+      // info
+      // success
+      // warning
+      // danger
+      each(@colors-brand-and-status-map, {
+        &.btn-@{key} {
+          color: @value;
+
+          > .rioglyph {
+            color: @value;
+          }
+        }
+      })
+    }
+  }
+
+  &.btn-action {
+    height: auto;
+    flex-direction: column;
+
+    > .rioglyph {
+      font-size: 200% !important;
+      transform: scale(0.90);
+    }
+
+    &:hover {
+      > .rioglyph {
+        transform: scale(0.95);
+      }
+    }
+  }
+
+  &.btn-multiline {
+    white-space: pre-wrap;
+    height: auto !important;
+  }
+
+  &[class*='-loading'] {
+    pointer-events: none;
+
+    &:before {
+      .rioglyph;
+      content: "\e9c7";
+      color: @brand-primary;
+      animation: spinning 1s linear infinite;
+      font-size: 20px;
+    }
+
+    &.btn-xs:before {
+      font-size: 10px;
+    }
+
+    &:not(.btn-default),
+    &:focus,
+    &.focus {
+      &:before {
+        color: @color-white;
+      }
+    }
+
+    &.btn-muted {
+        &:before {
+          color: @btn-muted-color;
+        }
+
+        &:focus {
+          &:before {
+            color: @btn-muted-active-color;
+          }
+        }
+    }
+
+    &.btn-icon-only {
+      padding: 0 9px;
+
+      &.btn-xs {
+        padding: 0 4px;
+      }
+
+      &.btn-sm {
+        padding: 0 8px;
+      }
+
+      &.btn-lg {
+        padding: 0 14px;
+      }
+    }
+
+    &:not(.btn-icon-only) {
+      &:before {
+        margin-right: 5px;
+      }
+    }
+
+    &[class*='-overlay'] {
+      color: transparent;
+
+      &:before {
+        position: absolute;
+        top: calc(~'50% - 0.5em');
+        left: calc(~'50% - 0.5em');
+      }
+    }
+  }
+
+  &.btn-dynamic {
+    font-size: inherit !important;
+    line-height: inherit !important;
+    padding: 10px 20px !important;
+    height: auto !important;
+    text-transform: none !important;
+
+    &.btn-black {
+      .button-variant(
+        ~'!important';
+        @color-black;
+        lighten(@color-black, 5%);
+        @color-white;
+        lighten(@color-black, 10%)
+      );
+    }
+
+    &.btn-white {
+      .button-variant(
+        ~'!important';
+        @color-white;
+        darken(@color-white, 5%);
+        @color-black;
+        darken(@color-white, 3%)
+      );
+    }
+  }
+
+  // btn variants
+  &.btn-default {
+    .button-variant(
+      ~'';
+      @btn-default-bg;
+      @btn-default-border;
+      @btn-default-color;
+      @btn-default-color;
+      @btn-default-color;
+      @btn-default-color;
+      darken(@btn-default-color, 17%);
+      darken(@btn-default-border, 12%);
+      darken(@btn-default-border, 12%);
+      darken(@btn-default-border, 25%);
+      darken(@btn-default-border, 25%);
+      @btn-default-bg;
+      @btn-default-bg;
+      @btn-default-bg;
+      @btn-default-bg;
+    );
+  }
+
+  &.btn-primary {
+    .button-variant(
+      ~'';
+      @btn-primary-bg;
+      @btn-primary-border;
+      @btn-primary-color;
+    );
+  }
+
+  &.btn-secondary {
+    .button-variant(
+      ~'';
+      @btn-secondary-bg;
+      @btn-secondary-border;
+      @btn-secondary-color;
+    );
+  }
+
+  &.btn-success {
+    .button-variant(
+      ~'';
+      @btn-success-bg;
+      @btn-success-border;
+      @btn-success-color;
+    );
+  }
+
+  &.btn-info {
+    .button-variant(
+      ~'';
+      @btn-info-bg;
+      @btn-info-border;
+      @btn-info-color;
+    );
+  }
+
+  &.btn-warning {
+    .button-variant(
+      ~'';
+      @btn-warning-bg;
+      @btn-warning-border;
+      @btn-warning-color;
+    );
+  }
+
+  &.btn-danger {
+    .button-variant(
+      ~'';
+      @btn-danger-bg;
+      @btn-danger-border;
+      @btn-danger-color;
+    );
+  }
+}
+
+.btn-ripple {
+  animation: ripple 600ms linear;
+  background-color: fade(@color-white, 70%);
+  border-radius: 50%;
+  position: absolute;
+  transform: scale(0);
+  z-index: 1;
+  pointer-events: none;
+
+  // fix double ripple effect on mobile
+  &:not([style*="left"]):not([style*="top"]) {
+    display: none;
+  }
+}
+
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+// Currently deactivated, because some services are already using the beta and we should introduce it globally and inform about it before.
+// .btn-default,
+// .btn-primary,
+// .btn-secondary,
+// .btn-success,
+// .btn-info,
+// .btn-warning,
+// .btn-danger {
+//   &:not(.btn-link):not(.btn-action) {
+//     transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
+
+//     &:hover {
+//       transform: translateY(-2px);
+//       box-shadow: 0px 2px 4px 0px rgb(143 143 143 / 60%);
+//     }
+//   }
+// }
+
+// .btn-no-hover-effect:hover {
+//   transform: none !important;
+//   box-shadow: none !important;
+// }
+
+// .input-group-btn,
+// .btn-group-vertical {
+//   .btn:hover {
+//     transform: none !important;
+//     box-shadow: none !important;
+//   }
+// }