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

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

@@ -0,0 +1,55 @@
+.alert {
+  border-color: transparent;
+  border-radius: @border-radius-default;
+  border-style: solid;
+  border-width: 2px;
+  padding: 12px;
+  position: relative;
+
+  .alert-link {
+    font-weight: bold;
+  }
+
+  &.alert-dismissible {
+    padding-right: 30px;
+  }
+
+  > .close {
+    position: absolute;
+    right: 3px;
+    top: 6px;
+    transform: scale(0.75);
+  }
+
+  > p,
+  > ul {
+    margin-bottom: 0;
+  }
+
+  // primary
+  // secondary
+  // info
+  // success
+  // warning
+  // danger
+  each(@colors-brand-and-status-map, {
+    @background: @colors-brand-and-status-decent-map[$@key];
+
+    &.alert- {
+      &@{key} {
+
+        background-color: @background;
+        border-color: @value;
+        color: @value;
+
+        .alert-link {
+          color: @value;
+        }
+
+        > .close .rioglyph {
+          color: @value;
+        }
+      }
+    }
+  })
+}

package/lib/style/css/design/aspect-ratio.less

@@ -0,0 +1,23 @@
+.aspect-ratio-resizer {
+    display: grid;
+    position: relative;
+
+    > * {
+        grid-area: ~"1 / 1 / 2 / 2";
+    }
+
+    .aspect-ratio-placeholder {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+    }
+}
+
+// Aspect ratio related to elements width and height attributes
+.aspect-ratio-1 { aspect-ratio: 1 / 1 }
+.aspect-ratio-1-2 { aspect-ratio: 1 / 2 }
+.aspect-ratio-2-1 { aspect-ratio: 2 / 1 }
+.aspect-ratio-4-3 { aspect-ratio: 4 / 3 }
+.aspect-ratio-16-9 { aspect-ratio: 16 / 9 }
+.aspect-ratio-16-10 { aspect-ratio: 16 / 10 }

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

@@ -0,0 +1,120 @@
+.badge {
+  background-color: @brand-primary;
+  border-radius: @border-radius-round;
+  color: @color-white;
+  display: inline-block;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1;
+  min-height: 16px;
+  min-width: 16px;
+  position: relative;
+  vertical-align: baseline;
+
+  // Empty badges are just a dot
+  &:not(:empty) {
+    padding: 4px 7px;
+  }
+
+  &-lg {
+    font-size: 16px;
+    min-width: 24px;
+  }
+
+  &-xl {
+    font-size: 20px;
+    min-width: 30px;
+    padding: 4px 9px;
+  }
+
+  &-indicator {
+    display: grid;
+    place-items: center;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+    transform: translate(50%, -50%);
+
+    .ActionBarItemIcon & {
+      border: 2px solid @color-white;
+      left: 50%;
+      position: absolute;
+      right: auto;
+      top: 5px;
+      transform: none;
+    }
+
+    &-border {
+      border: 2px solid @color-white;
+    }
+
+    &-pinging {
+      &:before {
+        animation:pinging 1s cubic-bezier(0,0,.2,1) infinite;
+        border-radius: @border-radius-round;
+        bottom: 0;
+        content: "";
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: -1;
+      }
+    }
+  }
+
+  // muted
+  // default
+  // primary
+  // secondary
+  // info
+  // success
+  // warning
+  // danger
+  &-muted {
+    color: @gray-dark;
+    box-shadow: inset 0px 0px 0px 1px @gray-light;
+    background-color: @gray-lightest;
+
+    &.badge-indicator-pinging {
+      &:before {
+        background-color: @gray-light;
+      }
+    }
+  }
+
+  &-default {
+    background-color: @gray-dark;
+
+    &.badge-indicator-pinging {
+      &:before {
+        background-color: @gray-dark;
+      }
+    }
+  }
+
+  each(@colors-brand-and-status-map, {
+    &.badge-@{key} {
+      background-color: @value;
+
+      &.badge-indicator-pinging {
+        &:before {
+          background-color: @value;
+        }
+      }
+    }
+  })
+}
+
+.indicated-button,
+.indicated-icon {
+  position: relative;
+}
+
+.indicated-icon {
+  .rioglyph {
+    font-size: 26px;
+  }
+}

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

@@ -0,0 +1,49 @@
+blockquote {
+  font-size: (@font-size-default * 1.25);
+  margin: 0;
+  padding: 2% 0 2% 10%;
+  position: relative;
+
+  &:before {
+    content: "“";
+    display: flex;
+    font-size: 50px;
+    height: 50px;
+    left: 0;
+    line-height: 50px;
+    pointer-events: none;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    user-select: none;
+    width: 6%;
+  }
+
+  each(@colors-text-map, {
+    &.quote-color- {
+      &@{key}:before {
+        color: @value !important
+      }
+    }
+  })
+
+  each(@colors-gray-map, {
+    &.quote-color- {
+      &@{key}:before {
+        color: @value !important
+      }
+    }
+  })
+
+  p,
+  ul,
+  ol {
+    &:first-child {
+      margin-top: 0 !important;
+    }
+
+    &:last-child {
+      margin-bottom: 0 !important;
+    }
+  }
+}

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

@@ -0,0 +1,192 @@
+// default values used as shorthand ".border" class
+// no !important here, because other classes will not work then
+.border {
+  border-color: @gray-light;
+  border-style: solid;
+  border-width: 1px;
+}
+
+// border
+.border {
+  &-style-solid { border-style: solid !important}
+  &-style-dotted { border-style: dotted !important}
+  &-style-dashed { border-style: dashed !important}
+
+  &-width,
+  &-size { // backward compatibility
+    &-1 { border-width: 1px !important}
+    &-2 { border-width: 2px !important}
+    &-3 { border-width: 3px !important}
+  }
+
+  &-none { border: none !important }
+
+  &-top-none,
+  &-top-0 {  // backward compatibility
+    border-top-style: none !important
+  }
+
+  &-top-only {
+    border-right-style: none !important;
+    border-bottom-style: none !important;
+    border-left-style: none !important;
+  }
+
+  &-right-none,
+  &-right-0 {  // backward compatibility
+    border-right-style: none !important
+  }
+
+  &-right-only {
+    border-top-style: none !important;
+    border-bottom-style: none !important;
+    border-left-style: none !important;
+  }
+
+  &-bottom-none,
+  &-bottom-0 { // backward compatibility
+    border-bottom-style: none !important
+  }
+
+  &-bottom-only {
+    border-top-style: none !important;
+    border-right-style: none !important;
+    border-left-style: none !important;
+  }
+
+  &-left-none,
+  &-left-0 { // backward compatibility
+    border-left-style: none !important
+  }
+
+  &-left-only {
+    border-top-style: none !important;
+    border-right-style: none !important;
+    border-bottom-style: none !important;
+  }
+}
+
+// border coloring
+
+// transparent
+.border-color-transparent {
+  border-color: transparent !important
+}
+
+// white
+// black
+each(@colors-text-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
+// primary
+// secondary
+each(@colors-brand-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
+// info
+// success
+// warning
+// danger
+each(@colors-status-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
+// darkest
+// darker
+// dark
+// gray
+// light
+// lighter
+// lightest
+each(@colors-gray-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
+// map-marker-asset
+// map-marker-poi
+// map-marker-geofence
+// map-marker-route
+each(@colors-map-marker-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
+// rating-1
+// rating-2
+// rating-3
+// rating-4
+// rating-5
+each(@colors-rating-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
+// status-available
+// status-driving
+// status-resting
+// status-working
+each(@colors-driving-status-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
+// highlight-darkest
+// highlight-darker
+// highlight-dark
+// highlight
+// highlight-light
+// highlight-lighter
+// highlight-lightest
+// highlight-decent
+each(@colors-highlight-map, {
+  .border-color-@{key} {
+    border-color: @value !important;
+  }
+})
+
+// coldplay-wine
+// coldplay-aubergine
+// coldplay-kashmir
+// coldplay-fountain
+// coldplay-turquoise
+// coldplay-bermuda
+// coldplay-moos
+// coldplay-primrose
+// coldplay-khaki
+& when (@buildColdplayColors = true) {
+  each(@colors-coldplay-map, {
+    .border-color-@{key} {
+      border-color: @value !important;
+    }
+  })
+}
+
+// warmup-crimson
+// warmup-victoria
+// warmup-cadillac
+// warmup-raspberry
+// warmup-cerise
+// warmup-charm
+// warmup-salmon
+// warmup-cherokee
+// warmup-corn
+& when (@buildWarmupColors = true) {
+  each(@colors-warmup-map, {
+    .border-color-@{key} {
+      border-color: @value !important;
+    }
+  })
+}

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

@@ -0,0 +1,20 @@
+.breadcrumb {
+  .list-unstyled();
+  margin-bottom: 0;
+  padding: 8px 15px;
+
+  > li {
+    display: inline-block;
+
+    + li:before {
+      color: @gray-light;
+      content: "/";
+      padding: 0 5px;
+    }
+  }
+
+  > .active {
+    color: @gray-dark;
+    cursor: default;
+  }
+}

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;
+  }
+}