@rio-cloud/rio-uikit 0.16.3-beta.8 → 0.16.3

package/styles/components/Checkbox.less

@@ -159,7 +159,7 @@
     }
 
     // Define style for 'diabled' state
-    &:disabled + .checkbox-text {
+    &[disabled] + .checkbox-text {
       //color: var(--gray-light);
       opacity: 0.5;
       cursor: not-allowed;
@@ -184,7 +184,7 @@
     &.error + .checkbox-text,
     &:required:focus:not(:checked) + .checkbox-text {
       &:before {
-        border-color: @brand-danger;
+        border-color: var(--brand-danger);
       }
     }
 

package/styles/components/ClearableInput.less

@@ -17,8 +17,7 @@
   }
 
   > .form-control {
-    &.disabled,
-    &[disabled] {
+    &:is(.disabled, [disabled]) {
       + .clearButton {
         display: none
       }

package/styles/components/DatePicker.less

@@ -69,7 +69,6 @@
         height: 50px;
         width: 25%;
 
-        &:hover,
         &:hover {
           background: var(--color-highlight-lightest);
         }

package/styles/components/Dialog.less

@@ -29,7 +29,7 @@ body {
 }
 
 .modal {
-  -webkit-overflow-scrolling: touch;
+  // -webkit-overflow-scrolling: touch; // TODO remove when cleanup
   bottom: 0;
   cursor: default;
   display: none;

package/styles/components/Dropdown.less

@@ -55,12 +55,11 @@
         position: relative;
         user-select: none;
 
-        &:active:focus {
+        &:is(:active:focus, .active:focus) {
           outline: 0;
         }
 
-        &:hover,
-        &:focus {
+        &:is(:hover, :focus) {
           background-color: var(--brand-primary);
           color: var(--color-white);
           text-decoration: none;
@@ -81,8 +80,7 @@
       background-color: inherit;
 
       &,
-      &:hover,
-      &:focus {
+      &:is(:hover, :focus) {
         background-color: var(--brand-primary);
         color: var(--color-white);
         outline: 0;
@@ -90,17 +88,15 @@
       }
     }
 
-    > .disabled > a {
+    > :is(.disabled, [disabled]) > a {
       &,
-      &:hover,
-      &:focus {
+      &:is(:hover, :focus) {
         color: var(--gray-light);
       }
 
       // OLD BS STUFF
       // Nuke hover/focus effects
-      &:hover,
-      &:focus {
+      &:is(:hover, :focus) {
         .reset-filter();
         background-color: transparent;
         background-image: none;

package/styles/components/ListMenu.less

@@ -25,8 +25,7 @@
         a {
           color: var(--color-black);
 
-          &:hover,
-          &.active {
+          &:is(:hover, :active, .active, :focus) {
             text-decoration: none;
             color: var(--brand-primary);
           }
@@ -49,7 +48,7 @@
           text-decoration: none;
         }
 
-        &.disabled {
+        &:is(.disabled, [disabled]) {
           > span,
           a {
             color: var(--gray-light);
@@ -63,8 +62,7 @@
             color: var(--gray-darker);
             cursor: pointer;
 
-            &:hover,
-            &.active {
+            &:is(:hover, :active, .active, :focus) {
               border-left-color: var(--brand-primary);
               border-width: 3px;
               color: var(--brand-primary);

package/styles/components/MapHere.less

@@ -42,7 +42,7 @@
         padding: 7px 10px;
         color: var(--gray-darkest);
 
-        &.disabled {
+        &:is(.disabled, [disabled]) {
           opacity: 0.5;
           cursor: not-allowed !important;
         }

package/styles/components/MapMarker.less

@@ -26,11 +26,11 @@
   text-align: center;
 
   &.exception {
-    background-color: @brand-danger;
+    background-color: var(--brand-danger);
   }
 
   &.warning {
-    background-color: @brand-warning;
+    background-color: var(--brand-warning);
   }
 
   .rio-map-single & {
@@ -256,8 +256,7 @@
     }
   }
 
-  &:hover,
-  &.hover {
+  &:is(:hover, .hover) {
     z-index: @zindex-map-marker-hover !important;
   }
 
@@ -265,9 +264,7 @@
     z-index: @zindex-map-marker-active !important;
   }
 
-  &:hover,
-  &.hover,
-  &.active {
+  &:is(:hover, :active, .active, :focus) {
     .rio-map-single:not(.fixed) {
       margin-bottom: @iconSize * 0.65;
 
@@ -533,8 +530,7 @@
       &.clickable {
         cursor: pointer;
 
-        &:hover,
-        &.hover {
+        &:is(.hover, :hover) {
           background-color: .hslb(@color-map-marker-asset-hsl, '-', '5%')[@result];
         }
       }

package/styles/components/MapSettings.less

@@ -1,3 +1,5 @@
+@nightMapTileBackground: #444a4c;
+
 .ZoomButtons {
   bottom: 15px;
   padding: 0;
@@ -7,12 +9,13 @@
 
   .MapSettingsTile {
     &:extend(.shadow-smooth);
+    border-radius: @border-radius-sm - 1;
     background: var(--color-white);
     cursor: pointer;
     padding: 3px;
 
     .map-type-night & {
-      background: #444a4c;
+      background: @nightMapTileBackground;
     }
   }
 
@@ -48,9 +51,9 @@
   display: flex;
   flex-flow: row-reverse;
   align-items: flex-end;
+  user-select: none;
 
   .MapSettingsTile {
-    &:extend(.shadow-smooth);
     display: flex;
     flex-flow: column-reverse;
     padding: 0;
@@ -61,17 +64,20 @@
     }
 
     .MapSettingsButton {
+      &:extend(.shadow-smooth);
+      border-radius: @border-radius-sm;
       background: var(--color-white);
       cursor: pointer;
       padding: 5px;
 
       .map-type-night & {
-        background: #444a4c;
+        background: @nightMapTileBackground;
       }
     }
 
     .MapSettingsPanel {
       &:extend(.shadow-smooth);
+      border-radius: @border-radius-sm;
       background: var(--color-white);
       display: flex;
       flex-direction: column;
@@ -79,7 +85,7 @@
       padding: 5px;
 
       .map-type-night & {
-        background: #444a4c;
+        background: @nightMapTileBackground;
       }
 
       .MapSettingsItem {
@@ -87,7 +93,7 @@
         cursor: pointer;
 
         .map-type-night & {
-          background: #444a4c;
+          background: @nightMapTileBackground;
         }
       }
     }
@@ -124,33 +130,4 @@
       }
     }
   }
-}
-
-// // OLD
-// .MapSettings {
-//   align-items: flex-end;
-//   bottom: 15px;
-//   display: flex;
-//   flex-flow: column-reverse;
-//   padding: 0;
-//   position: absolute;
-//   right: 47px;
-//   z-index: 1;
-
-//   @media (max-width: @screen-ls) {
-//     right: 15px;
-//   }
-
-//   .MapSettingsPanel {
-//     &:extend(.shadow-smooth);
-//     background: var(--color-white);
-//     display: flex;
-//     margin-bottom: 10px;
-
-//     .MapSettingsTile,
-//     .MapSettingsButton {
-//       cursor: pointer;
-//       padding: 5px;
-//     }
-//   }
-// }
+}

package/styles/components/RadioButton.less

@@ -146,7 +146,7 @@
     }
 
     // Define style for 'diabled' state
-    &:disabled + .radio-text {
+    &[disabled] + .radio-text {
       //color: var(--gray-light);
       opacity: 0.5;
       cursor: not-allowed;

package/styles/components/Select.less

@@ -16,7 +16,7 @@
     justify-content: space-between;
     width: 100%;
 
-    &.disabled {
+    &:is(.disabled, [disabled]) {
       pointer-events: none;
       background: @input-bg-disabled;
 
@@ -50,12 +50,18 @@
       }
     }
 
-    > span:first-child:not(.selected-option-list) {
+    .selected-option-text {
       display: block;
       margin-right: 5px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+      width: calc(~"100% - 24px");
+
+      .selected-option-text-label {
+        color: var(--gray-dark);
+        margin-right: 5px;
+      }
     }
 
     > .selected-option-list {
@@ -78,10 +84,10 @@
         }
 
         > .selected-label {
-          background-color: @brand-primary;
+          background-color: var(--brand-primary);
           border-bottom-left-radius: @border-radius-sm;
           border-top-left-radius: @border-radius-sm;
-          border: 1px solid @brand-primary;
+          border: 1px solid var(--brand-primary);
           padding: 0 4px;
         }
 
@@ -95,7 +101,7 @@
           transition: color 0.2ms ease-in-out;
 
           &:hover {
-            background-color: @brand-primary;
+            background-color: var(--brand-primary);
           }
 
           > .rioglyph {
@@ -117,7 +123,11 @@
       padding: 0 12px;
       position: absolute;
       top: 1px;
-      width: calc(~"100% - 30px");
+      width: calc(~"100% - 24px");
+
+      + .selected-option-text {
+        max-width: calc(~"100% - 24px");
+      }
 
       &-active {
         background-color: var(--color-white);
@@ -167,7 +177,7 @@
       > a.focus {
         text-decoration: none;
         color: var(--color-white);
-        background-color: @brand-primary;
+        background-color: var(--brand-primary);
       }
 
       &.active {
@@ -228,8 +238,6 @@ select {
 
     // disable default appearance
     outline: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
     appearance: none;
 
     &::-ms-expand { display: none };

package/styles/components/Sidebar.less

@@ -55,7 +55,7 @@
   }
 
   &Body {
-    -webkit-overflow-scrolling: touch;
+    // -webkit-overflow-scrolling: touch; // TODO remove when cleanup
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;

package/styles/components/Slider.less

@@ -195,7 +195,7 @@
     top: 7px;
   }
 
-  &.disabled {
+  &:is(.disabled, [disabled]) {
     cursor: not-allowed;
 
     input[type="range"] {

package/styles/components/SteppedProgressBar.less

@@ -36,7 +36,7 @@
     }
 
     &.active,
-    &.disabled {
+    &:is(.disabled, [disabled]) {
       pointer-events: none;
       pointer-events: none;
     }
@@ -134,7 +134,7 @@
         }
       }
 
-      &.disabled {
+      &:is(.disabled, [disabled]) {
         border-color: var(--gray);
         background-color: var(--color-white);
 
@@ -183,7 +183,7 @@
         border-color: var(--brand-primary);
       }
 
-      &.disabled {
+      &:is(.disabled, [disabled]) {
         background-color: var(--gray-lightest);
         color: var(--gray);
       }
@@ -231,7 +231,7 @@
         font-weight: @font-medium;
       }
 
-      &.disabled {
+      &:is(.disabled, [disabled]) {
         border-color: var(--gray);
         background-color: var(--color-white);
         color: var(--gray);

package/styles/components/SupportMarker.less

@@ -1,10 +1,10 @@
 .support-marker {
   html.show-support-marker & {
-    box-shadow: 0px 0px 0px 2px @brand-info;
+    box-shadow: 0px 0px 0px 2px var(--brand-info);
     position: relative;
 
     &:before {
-      background-color: @brand-info;
+      background-color: var(--brand-info);
       color: var(--color-white);
       content: attr(data-support);
       display: block;

package/styles/components/Switch.less

@@ -62,7 +62,7 @@
       }
     }
 
-    &:disabled {
+    &[disabled] {
       pointer-events: none;
 
       + .switch-content {

package/styles/components/TableSortArrows.less

@@ -12,6 +12,7 @@ table > thead > tr > th {
       white-space: nowrap;
     }
 
+    @sortArrowColor: escape('@{gray-dark}');
     .sort-arrows {
       display: inline-block;
       height: 14px;
@@ -22,7 +23,7 @@ table > thead > tr > th {
 
       &:before,
       &:after {
-        background-image: url(~"data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.362%22%20height%3D%22292.362%22%3E%3Cpath%20d%3D%22M286.935%2069.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952%200-9.233%201.807-12.85%205.424C1.807%2072.998%200%2077.279%200%2082.228c0%204.948%201.807%209.229%205.424%2012.847l127.907%20127.907c3.621%203.617%207.902%205.428%2012.85%205.428s9.233-1.811%2012.847-5.428L286.935%2095.074c3.613-3.617%205.427-7.898%205.427-12.847%200-4.948-1.814-9.229-5.427-12.85z%22%2F%3E%3C%2Fsvg%3E%0A%0A%0A%0A");
+        background-image: url(~"data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.362%22%20height%3D%22292.362%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A@{sortArrowColor}%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20d%3D%22M286.935%2069.377c-3.614-3.617-7.898-5.424-12.848-5.424H18.274c-4.952%200-9.233%201.807-12.85%205.424C1.807%2072.998%200%2077.279%200%2082.228c0%204.948%201.807%209.229%205.424%2012.847l127.907%20127.907c3.621%203.617%207.902%205.428%2012.85%205.428s9.233-1.811%2012.847-5.428L286.935%2095.074c3.613-3.617%205.427-7.898%205.427-12.847%200-4.948-1.814-9.229-5.427-12.85z%22%2F%3E%3C%2Fsvg%3E%0A%0A%0A%0A");
         background-size: 100%;
         content: "";
         display: block;

package/styles/components/Tag.less

@@ -50,7 +50,7 @@
     }
   }
 
-  &.disabled {
+  &:is(.disabled, [disabled]) {
     border-color: var(--gray);
     background-color: var(--gray-light);
     opacity: .5;
@@ -81,8 +81,8 @@
 
   &.active {
     background-color: .hsla(@brand-primary-hsl, 0.2)[@result];
-    border-color: @brand-primary;
-    color: @brand-primary;
+    border-color: var(--brand-primary);
+    color: var(--brand-primary);
 
     &:hover {
       background-color: .hsla(@brand-primary-hsl, 0.3)[@result];
@@ -101,7 +101,7 @@
     }
 
     &:hover:before {
-      color: @brand-danger;
+      color: var(--brand-danger);
     }
   }
 
@@ -113,7 +113,7 @@
 
   &.deletable {
     &:hover:before {
-      color: @brand-danger;
+      color: var(--brand-danger);
       content: @rioglyph-trash;
     }
   }

package/styles/components/Timeline.less

@@ -2,6 +2,14 @@
   .timeline-date {
     position: relative;
     color: var(--gray-dark);
+    isolation: isolate;
+
+    &:after {
+      background: var(--gray-light);
+      content: "";
+      position: absolute;
+      z-index: -1;
+    }
   }
 
   .timeline-content {
@@ -22,12 +30,9 @@
         margin-right: 15px;
         white-space: nowrap;
 
-        &:before {
-          background: var(--gray-light);
+        &:after {
           bottom: 5px;
-          content: "";
           left: 50%;
-          position: absolute;
           top: 25px;
           width: 2px;
         }
@@ -50,12 +55,9 @@
         .timeline-date {
           padding-top: 60px;
 
-          &:before {
-            background: var(--gray-light);
+          &:after {
             top: 20px;
-            content: "";
             left: 50%;
-            position: absolute;
             height: 30px;
             width: 2px;
           }

package/styles/design/button-groups.less

@@ -5,10 +5,7 @@
     position: relative;
 
     // Bring the "active" button to the front
-    &:hover,
-    &:focus,
-    &:active,
-    &.active {
+    &:is(:hover, :active, .active, :focus) {
       z-index: 2;
     }
   }