@c8y/style 1022.10.1 → 1022.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c8y/style",
-  "version": "1022.10.1",
+  "version": "1022.13.0",
   "license": "Apache-2.0",
   "author": "Cumulocity GmbH",
   "description": "Styles for Cumulocity IoT applications",

package/styles/_buttons.less

@@ -162,6 +162,12 @@
   margin-left: @margin-base;
 }
 
+.d-flex, .d-col{
+  > .btn + .btn:not(.btn-block) {
+    margin:0;
+  }
+}
+
 // Alternate buttons
 .btn-default {
   .button-variant(c8y-btn-default);
@@ -256,6 +262,9 @@ label > .btn-clean {
   .box-shadow(none) !important;
   transition: @btn-transition;
 
+  &.c8y-realtime{
+    color: inherit;
+  }
   &:not(.btn-xs):not(.btn-sm) {
     padding: @btn-padding-vertical @btn-padding-horizontal;
     min-height: @form-control-height-base;
@@ -482,7 +491,14 @@ input[type='button'] {
     &,
     &:hover,
     &:focus {
-      #gradient > .striped(var(--c8y-brand-70));;
+      #gradient > .striped(var(--c8y-brand-70));
+    }
+  }
+  &.btn-danger {
+    &,
+    &:hover,
+    &:focus {
+      #gradient > .striped(var(--c8y-palette-status-danger-light));
     }
   }
 }

package/styles/_c8y-empty-state.less

@@ -22,7 +22,7 @@
     .btn-primary();
   }
 
-  p{
+  p, .btn{
     margin-bottom: @margin-base;
   }
 

package/styles/_c8y-switch.less

@@ -105,6 +105,7 @@
     min-height: @switch-sm;
     height: @switch-sm;
     line-height: @line-height-base;
+    display: inline-flex;
 
     & input[type='checkbox'] + span {
       position: absolute;

package/styles/_dropdowns.less

@@ -209,6 +209,9 @@ bs-dropdown-container,
 
     animation: showDropdown 0.2s ease-out forwards;
     
+    &.dropdown-menu--select{
+      animation: showDropdownY 0.2s ease-out forwards;
+    }
     &.dropdown-menu-right{
        transform-origin: right top;
     }
@@ -247,6 +250,25 @@ bs-dropdown-container,
     box-shadow: var(--c8y-dropdown-elevation-hover);
   }
 }
+//dropdown menu when added to body
+@keyframes showDropdownY {
+  /* Starting state (0%) */
+  0% {
+    opacity: 0;
+    transform: translateY(-16px) scale(1,0);
+    box-shadow: var(--c8y-dropdown-elevation-default);
+  }
+
+  75%{
+    opacity: 0.5;
+  }
+  /* Ending state (100%) */
+  100% {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+    box-shadow: var(--c8y-dropdown-elevation-hover);
+  }
+}
 
 bs-dropdown-container >.dropdown >.dropdown-menu {
   animation-name: showDropdown;

package/styles/_forms.less

@@ -994,9 +994,10 @@ label.editable {
       > label {
         margin-right: @margin-8;
       }
-      + .form-group {
+      + .form-group, + .btn {
         margin-left: @margin-8;
       }
+      
     }
 
     label {

package/styles/_input-groups.less

@@ -144,6 +144,16 @@
       border-radius: calc(@form-control-height-base * 0.5);
     }
   }
+  .form-control.input-lg {
+    &,
+    &:first-child,
+    &:last-child {
+      padding: @form-control-padding-large-vertical calc(@form-control-padding-large-horizontal * 2);
+      border-radius: @form-control-height-base;
+      font-size: @font-size-large;
+
+    }
+  }
 
   .input-group-btn,
   .input-group-addon {
@@ -161,7 +171,7 @@
       width: 100%;
       height: 100%;
       line-height: 1;
-      border-radius: calc(@form-control-height-base * 0.5) !important;
+      border-radius: calc(@form-control-height-base * 0.5);
       &:hover {
         box-shadow: inset 0 0 0 2px @component-brand-primary;
       }
@@ -179,6 +189,22 @@
       height: @form-control-height-sm;
     }
   }
+
+  &.input-group-lg {
+    // .form-control:not(.c8y-radio):not(.c8y-checkbox) {
+    //   padding-left: 16px;
+    // }
+
+    .input-group-btn,
+    .input-group-addon {
+      height: @form-control-height-lg;
+      max-height: unset;
+      .btn{
+        border-radius:  @form-control-height-base!important;
+        min-width: @form-control-height-lg;
+      }
+    }
+  }
 }
 
 .input-group.input-group-password {

package/styles/_spinner-snake.less

@@ -3,6 +3,8 @@
   margin: 16px auto;
   width: 4em;
   height: 4em;
+  min-width: 4em;
+  min-height: 4em;
   border-radius: 50%;
   box-shadow: inset 0 0 0 0.6em;
   color: @component-brand-primary;

package/styles/utilities/_contextual-colors.less

@@ -20,8 +20,8 @@
 .text-primary-light {
   .text-emphasis-variant(@brand-primary-light);
 }
-.text-complementary {
-  .text-emphasis-variant(@brand-complementary);
+.text-primary-dark {
+  .text-emphasis-variant(@brand-primary-dark);
 }
 
 // Accent text colors

package/styles/utilities/_icon-utils.less

@@ -28,6 +28,7 @@
   > [class*=' dlt-c8y-icon-'],
   > .c8y-icon {
     margin-right: 4px;
+    transform: translateY(3px);
   }
 }