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

package/lib/style/css/design/responsive/padding.less

@@ -0,0 +1,71 @@
+.padding-auto@{suffix} { padding: auto !important }
+.padding-0@{suffix} { padding: 0 !important }
+
+.padding-left-0@{suffix} { padding-left: 0 !important }
+.padding-right-0@{suffix} { padding-right: 0 !important }
+.padding-top-0@{suffix} { padding-top: 0 !important }
+.padding-bottom-0@{suffix} { padding-bottom: 0 !important }
+
+.padding-x-0@{suffix} { padding-left: 0 !important; padding-right: 0 !important }
+.padding-y-0@{suffix} { padding-top: 0 !important; padding-bottom: 0 !important }
+
+.padding-left-auto@{suffix} { padding-left: auto !important }
+.padding-right-auto@{suffix} { padding-right: auto !important }
+.padding-top-auto@{suffix} { padding-top: auto !important }
+.padding-bottom-auto@{suffix} { padding-bottom: auto !important }
+
+// padding px
+each(@spacings-px, {
+  // surrouding
+  .padding-@{key}@{suffix} {
+    padding: @value !important;
+  }
+  // left
+  .padding-x-@{key}@{suffix},
+  .padding-left-@{key}@{suffix} {
+    padding-left: @value !important;
+  }
+  // right
+  .padding-x-@{key}@{suffix},
+  .padding-right-@{key}@{suffix} {
+    padding-right: @value !important;
+  }
+  // top
+  .padding-y-@{key}@{suffix},
+  .padding-top-@{key}@{suffix} {
+    padding-top: @value !important;
+  }
+  // bottom
+  .padding-y-@{key}@{suffix},
+  .padding-bottom-@{key}@{suffix} {
+    padding-bottom: @value !important;
+  }
+})
+
+// padding pct
+each(@spacings-pct, {
+  // surrouding
+  .padding-@{key}@{suffix} {
+    padding: @value !important;
+  }
+  // left
+  .padding-x-@{key}@{suffix},
+  .padding-left-@{key}@{suffix} {
+    padding-left: @value !important;
+  }
+  // right
+  .padding-x-@{key}@{suffix},
+  .padding-right-@{key}@{suffix} {
+    padding-right: @value !important;
+  }
+  // top
+  .padding-y-@{key}@{suffix},
+  .padding-top-@{key}@{suffix} {
+    padding-top: @value !important;
+  }
+  // bottom
+  .padding-y-@{key}@{suffix},
+  .padding-bottom-@{key}@{suffix} {
+    padding-bottom: @value !important;
+  }
+})

package/lib/style/css/design/responsive/position.less

@@ -0,0 +1,102 @@
+/* Positions */
+.position-relative@{suffix} { position: relative !important }
+.position-absolute@{suffix} { position: absolute !important }
+.position-fixed@{suffix} { position: fixed !important }
+.position-static@{suffix} { position: static !important }
+.position-sticky@{suffix} {
+  position: sticky !important;
+
+  &.top-module-content {
+    @media (max-width: @screen-xs-max) {
+      top: -(@ApplicationLayoutBodyPadding*0.5);
+    }
+    @media (min-width: @screen-ls-min) {
+      top: -(@ApplicationLayoutBodyPadding);
+    }
+  }
+}
+
+.top-0@{suffix} { top: 0 !important }
+.right-0@{suffix} { right: 0 !important }
+.bottom-0@{suffix} { bottom: 0 !important }
+.left-0@{suffix} { left: 0 !important }
+
+// top-right-bottom-left px
+each(@positions-px, {
+  // top
+  .top-@{key}@{suffix} {
+    top: @value !important;
+  }
+  // right
+  .right-@{key}@{suffix} {
+    right: @value !important;
+  }
+  // bottom
+  .bottom-@{key}@{suffix} {
+    bottom: @value !important;
+  }
+  // left
+  .left-@{key}@{suffix} {
+    left: @value !important;
+  }
+})
+
+// negative top-right-bottom-left px
+each(@positions-px, {
+  // negative top
+  .top--@{key}@{suffix} {
+    top: -@value !important;
+  }
+  // negative right
+  .right--@{key}@{suffix} {
+    right: -@value !important;
+  }
+  // negative bottom
+  .bottom--@{key}@{suffix} {
+    bottom: -@value !important;
+  }
+  // negative left
+  .left--@{key}@{suffix} {
+    left: -@value !important;
+  }
+})
+
+// top-right-bottom-left pct
+each(@positions-pct, {
+  // top
+  .top-@{key}@{suffix} {
+    top: @value !important;
+  }
+  // right
+  .right-@{key}@{suffix} {
+    right: @value !important;
+  }
+  // bottom
+  .bottom-@{key}@{suffix} {
+    bottom: @value !important;
+  }
+  // left
+  .left-@{key}@{suffix} {
+    left: @value !important;
+  }
+})
+
+// negative top-right-bottom-left pct
+each(@positions-pct, {
+  // negative top
+  .top--@{key}@{suffix} {
+    top: -@value !important;
+  }
+  // negative right
+  .right--@{key}@{suffix} {
+    right: -@value !important;
+  }
+  // negative bottom
+  .bottom--@{key}@{suffix} {
+    bottom: -@value !important;
+  }
+  // negative left
+  .left--@{key}@{suffix} {
+    left: -@value !important;
+  }
+})

package/lib/style/css/design/responsive/sizing.less

@@ -0,0 +1,115 @@
+.height-0@{suffix} { height: 0 !important }
+.height-auto@{suffix} { height: auto !important }
+
+.width-0@{suffix} { width: 0 !important }
+.width-auto@{suffix} { width: auto !important }
+
+.min-width-auto@{suffix} { min-width: auto !important }
+.min-height-auto@{suffix} { min-height: auto !important }
+
+.max-height-0@{suffix} { max-height: 0 !important }
+.max-width-0@{suffix} { max-width: 0 !important }
+
+// width/height px
+each(@sizes-px, {
+  // width
+  .width-@{key}@{suffix} {
+    width: @value !important;
+  }
+  // height
+  .height-@{key}@{suffix} {
+    height: @value !important;
+  }
+})
+
+// min/max width/height px
+each(@sizes-px-50-to-500, {
+  // min-height
+  .min-height-@{key}@{suffix} {
+    min-height: @value !important;
+  }
+  // max-height
+  .max-height-@{key}@{suffix} {
+    max-height: @value !important;
+  }
+  // min-width
+  .min-width-@{key}@{suffix} {
+    min-width: @value !important;
+  }
+})
+
+// max width px
+each(@sizes-px-50-to-1000, {
+  // max-width
+  .max-width-@{key}@{suffix} {
+    max-width: @value !important;
+  }
+})
+
+// all pct
+each(@sizes-pct, {
+  // height
+  .height-@{key}@{suffix} {
+    height: @value !important;
+  }
+  // min-height
+  .min-height-@{key}@{suffix} {
+    min-height: @value !important;
+  }
+  //max-height
+  .max-height-@{key}@{suffix} {
+    max-height: @value !important;
+  }
+  // width
+  .width-@{key}@{suffix} {
+    width: @value !important;
+  }
+  // min-width
+  .min-width-@{key}@{suffix} {
+    min-width: @value !important;
+  }
+  // max-width
+  .max-width-@{key}@{suffix} {
+    max-width: @value !important;
+  }
+})
+
+// viewport width
+each(@sizes-vw, {
+  // width
+  .width-@{key}@{suffix} {
+    width: @value !important;
+  }
+  // min-width
+  .min-width-@{key}@{suffix} {
+    min-width: @value !important;
+  }
+  // max-width
+  .max-width-@{key}@{suffix} {
+    max-width: @value !important;
+  }
+})
+
+// viewport height
+.sizing-vh(height; @suffix);
+.sizing-vh(min-height; @suffix);
+.sizing-vh(max-height; @suffix);
+
+// ApplicationLayout viewport height
+.ApplicationLayoutHeader@{suffix} {
+  ~ .ApplicationLayoutBody,
+  ~ .ApplicationLayoutSidebar {
+    .sizing-vh(height; @suffix; @navbar-height);
+    .sizing-vh(min-height; @suffix; @navbar-height);
+  }
+
+  ~ .ApplicationLayoutBody .module-content {
+    @media (max-width: @screen-ls) {
+      .sizing-vh(height; @suffix; @navbar-height + @ApplicationLayoutBodyPadding*0.5);
+    }
+
+    @media (min-width: @screen-ls) {
+      .sizing-vh(height; @suffix; @navbar-height + @ApplicationLayoutBodyPadding);
+    }
+  }
+}

package/lib/style/css/design/responsive/text.less

@@ -0,0 +1,71 @@
+/* Text - Size */
+.text-size-10@{suffix} { font-size: @font-size-10 !important }
+.text-size-11@{suffix} { font-size: @font-size-11 !important }
+.text-size-12@{suffix} { font-size: @font-size-12 !important }
+.text-size-14@{suffix} { font-size: @font-size-14 !important }
+.text-size-16@{suffix} { font-size: @font-size-16 !important }
+.text-size-18@{suffix} { font-size: @font-size-18 !important }
+.text-size-20@{suffix} { font-size: @font-size-20 !important }
+
+.text-size-h1@{suffix} { font-size: @font-size-h1 !important }
+.text-size-h2@{suffix} { font-size: @font-size-h2 !important }
+.text-size-h3@{suffix} { font-size: @font-size-h3 !important }
+.text-size-h4@{suffix} { font-size: @font-size-h4 !important }
+.text-size-h5@{suffix} { font-size: @font-size-h5 !important }
+.text-size-h6@{suffix} { font-size: @font-size-h6 !important }
+
+[class*="text-size"] {
+    .text-size-100pct@{suffix} { font-size: 100% !important }
+    .text-size-200pct@{suffix} { font-size: 200% !important }
+    .text-size-300pct@{suffix} { font-size: 300% !important }
+    .text-size-400pct@{suffix} { font-size: 400% !important }
+    .text-size-500pct@{suffix} { font-size: 500% !important }
+}
+
+/* Text - Line Height */
+.line-height-10@{suffix} { line-height: @font-size-10 !important }
+.line-height-11@{suffix} { line-height: @font-size-11 !important }
+.line-height-12@{suffix} { line-height: @font-size-12 !important }
+.line-height-14@{suffix} { line-height: @font-size-14 !important }
+.line-height-16@{suffix} { line-height: @font-size-16 !important }
+.line-height-18@{suffix} { line-height: @font-size-18 !important }
+.line-height-20@{suffix} { line-height: @font-size-20 !important }
+
+.line-height-h1@{suffix} { line-height: @font-size-h1 !important }
+.line-height-h2@{suffix} { line-height: @font-size-h2 !important }
+.line-height-h3@{suffix} { line-height: @font-size-h3 !important }
+.line-height-h4@{suffix} { line-height: @font-size-h4 !important }
+.line-height-h5@{suffix} { line-height: @font-size-h5 !important }
+.line-height-h6@{suffix} { line-height: @font-size-h6 !important }
+
+.line-height-125rel@{suffix} { line-height: 1.25 !important }
+.line-height-130rel@{suffix} { line-height: 1.30 !important }
+.line-height-135rel@{suffix} { line-height: 1.35 !important }
+
+/* Text - alignment */
+.text-left@{suffix} { text-align: left !important }
+.text-center@{suffix} { text-align: center !important }
+.text-right@{suffix} { text-align: right !important }
+.text-justify@{suffix} { text-align: justify !important }
+.text-nowrap@{suffix} { white-space: nowrap !important }
+
+/* Hyphens */
+.hyphens-auto@{suffix} { hyphens: auto !important }
+.hyphens-none@{suffix} { hyphens: none !important }
+
+/* White Space */
+.white-space-nowrap@{suffix} { white-space: nowrap !important }
+.white-space-normal@{suffix} { white-space: normal !important }
+.white-space-pre-line@{suffix} { white-space: pre-line !important }
+
+/* Word Break */
+.word-break@{suffix}, // backward compatibility
+.word-break-all@{suffix} {
+  word-break: break-word !important;
+  word-wrap: break-word !important;
+}
+
+.word-break-none@{suffix} {
+  word-break: normal !important;
+  word-wrap: normal !important;
+}

package/lib/style/css/design/responsive/visibility.less

@@ -0,0 +1,115 @@
+& when (@suffix = -xs) {
+  .visible@{suffix} {
+    @media (min-width: @screen-ls-min) {
+      // "-ls" because UIKIT xs and UIKIT ls are the same
+      // but the website.css uses -ls as the mobile breakpoint
+      display: none !important;
+    }
+  }
+}
+
+& when (@suffix = -ls) {
+  .visible@{suffix} {
+    @media (max-width: @screen-xs-max) {
+      display: none !important;
+    }
+
+    @media (min-width: @screen-sm-min) {
+      display: none !important;
+    }
+  }
+}
+
+& when (@suffix = -sm) {
+  .visible@{suffix} {
+    @media (max-width: @screen-ls-max) {
+      display: none !important;
+    }
+
+    @media (min-width: @screen-md-min) {
+      display: none !important;
+    }
+  }
+}
+
+& when (@suffix = -md) {
+  .visible@{suffix} {
+    @media (max-width: @screen-sm-max) {
+      display: none !important;
+    }
+
+    @media (min-width: @screen-lg-min) {
+      display: none !important;
+    }
+  }
+}
+
+& when (@suffix = -lg) {
+  .visible@{suffix} {
+    @media (max-width: @screen-md-max) {
+      display: none !important;
+    }
+
+    @media (min-width: @screen-xl-min) {
+      display: none !important;
+    }
+  }
+}
+
+& when (@suffix = -xl) {
+  .visible@{suffix} {
+    @media (max-width: @screen-xl-min) {
+      display: none !important;
+    }
+  }
+}
+
+& when (@suffix = -xs) {
+  .hidden@{suffix} {
+    // "-ls" because UIKIT xs and UIKIT ls are the same
+    // but the website.css uses -ls as the mobile breakpoint
+    @media (max-width: @screen-ls) {
+      display: none !important;
+    }
+  }
+}
+
+& when (@suffix = -ls) {
+  .hidden@{suffix} {
+    @media (min-width: @screen-ls-min) and (max-width: @screen-ls-max) {
+      display: none !important;
+    }
+  }
+}
+
+& when (@suffix = -sm) {
+  .hidden@{suffix} {
+    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+      display: none !important;
+    }
+  }
+}
+
+& when (@suffix = -md) {
+  .hidden@{suffix} {
+    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+      display: none !important;
+    }
+  }
+}
+
+& when (@suffix = -lg) {
+  .hidden@{suffix} {
+    @media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
+      display: none !important;
+    }
+  }
+}
+
+& when (@suffix = -xl) {
+  .hidden@{suffix} {
+    @media (min-width: @screen-xl) {
+      display: none !important;
+    }
+  }
+}

package/lib/style/css/design/responsive-embed.less

@@ -0,0 +1,31 @@
+.embed-responsive {
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+
+  .embed-responsive-item,
+  iframe,
+  embed,
+  object,
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+    border: 0;
+  }
+}
+
+// Modifier class for 16:9 aspect ratio
+.embed-responsive-16by9 {
+  padding-bottom: 56.25%;
+}
+
+// Modifier class for 4:3 aspect ratio
+.embed-responsive-4by3 {
+  padding-bottom: 75%;
+}

package/lib/style/css/design/responsive-video.less

@@ -0,0 +1,22 @@
+.video-responsive {
+  height: 0;
+  position: relative;
+
+  &.video-responsive-16by9 {
+    padding-bottom: 56.25%;
+  }
+  
+  &.video-responsive-4by3 {
+    padding-bottom: 75%;
+  }
+  
+  iframe,
+  video {
+    border: none; // really? should be default
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,24 @@
+@import (less) '../../fonts/rioglyph/rioglyph.less';
+
+@keyframes spinning {
+  from { transform: rotate(0deg) }
+  to   { transform: rotate(359deg) }
+}
+
+@keyframes pulse {
+  50% {
+   opacity:.5
+  }
+ }
+
+.rioglyph {
+  &.spinning:before {
+    display: inline-block;
+    animation: spinning 1s linear infinite;
+  }
+
+  &.pulsing:before {
+    display: inline-block;
+    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
+  }
+}

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

@@ -0,0 +1,44 @@
+// circle
+.rounded-circle {
+    border-radius: @border-radius-round !important;
+}
+
+// top left
+.rounded, .rounded-top, .rounded-left, .rounded-top-left {
+    border-top-left-radius: @border-radius-default !important;
+
+    &-small { border-top-left-radius: @border-radius-sm !important }
+    &-large { border-top-left-radius: @border-radius-lg !important }
+    &-extra-large { border-top-left-radius: @border-radius-xl !important }
+    &-none { border-top-left-radius: 0 !important }
+}
+
+// top right
+.rounded, .rounded-top, .rounded-right, .rounded-top-right {
+    border-top-right-radius: @border-radius-default !important;
+
+    &-small { border-top-right-radius: @border-radius-sm !important }
+    &-large { border-top-right-radius: @border-radius-lg !important }
+    &-extra-large { border-top-right-radius: @border-radius-xl !important }
+    &-none { border-top-right-radius: 0 !important }
+}
+
+// bottom left
+.rounded, .rounded-bottom, .rounded-left, .rounded-bottom-left  {
+    border-bottom-left-radius: @border-radius-default !important;
+
+    &-small { border-bottom-left-radius: @border-radius-sm !important }
+    &-large { border-bottom-left-radius: @border-radius-lg !important }
+    &-extra-large { border-bottom-left-radius: @border-radius-xl !important }
+    &-none { border-bottom-left-radius: 0 !important }
+}
+
+// bottom right
+.rounded, .rounded-bottom, .rounded-right, .rounded-bottom-right {
+    border-bottom-right-radius: @border-radius-default !important;
+
+    &-small { border-bottom-right-radius: @border-radius-sm !important }
+    &-large { border-bottom-right-radius: @border-radius-lg !important }
+    &-extra-large { border-bottom-right-radius: @border-radius-xl !important }
+    &-none { border-bottom-right-radius: 0 !important }
+}

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

@@ -0,0 +1,65 @@
+@smooth-shadow: rgba(0,0,0,.01);
+@hard-shadow: rgba(0,0,0,.03);
+
+.shadow-none { box-shadow: none !important }
+
+.shadow-default {
+  box-shadow:
+    0 2px 1px -1px rgba(196, 206, 214, 0.33),
+    0 1px 1px 0 rgba(181, 191, 199, 0.1),
+    0 1px 4px 0 rgba(119, 142, 160, 0.25) !important;
+}
+
+.shadow-smooth {
+  box-shadow:
+    0 0 2px 2px @smooth-shadow,
+    0 0 4px 4px @smooth-shadow,
+    0 0 6px 6px @smooth-shadow,
+    0 0 8px 8px @smooth-shadow,
+    0 0 10px 10px @smooth-shadow !important
+}
+
+.shadow-hard {
+  box-shadow:
+    0 0 2px 2px @hard-shadow,
+    0 0 4px 4px @hard-shadow,
+    0 0 6px 6px @hard-shadow,
+    0 0 8px 8px @hard-shadow,
+    0 0 10px 10px @hard-shadow !important
+}
+
+.shadow-smooth-to-bottom {
+  box-shadow:
+    0 5px 1px 1px @smooth-shadow,
+    0 5px 2px 2px @smooth-shadow,
+    0 5px 3px 3px @smooth-shadow,
+    0 5px 4px 4px @smooth-shadow,
+    0 10px 5px 5px @smooth-shadow !important
+}
+
+.shadow-hard-to-bottom {
+  box-shadow:
+    0 5px 1px 1px @hard-shadow,
+    0 5px 2px 2px @hard-shadow,
+    0 5px 3px 3px @hard-shadow,
+    0 5px 4px 4px @hard-shadow,
+    0 10px 5px 5px @hard-shadow !important
+}
+
+.shadow-smooth-to-top {
+  box-shadow:
+    0 -5px 1px 1px @smooth-shadow,
+    0 -5px 2px 2px @smooth-shadow,
+    0 -5px 3px 3px @smooth-shadow,
+    0 -5px 4px 4px @smooth-shadow,
+    0 -10px 5px 5px @smooth-shadow !important
+}
+
+.shadow-hard-to-top {
+  box-shadow:
+    0 -5px 1px 1px @hard-shadow,
+    0 -5px 2px 2px @hard-shadow,
+    0 -5px 3px 3px @hard-shadow,
+    0 -5px 4px 4px @hard-shadow,
+    0 -10px 5px 5px @hard-shadow !important
+}