@colijnit/corecomponents_v12 12.0.98 → 12.0.99

package/lib/components/button/style/_layout.scss

@@ -31,7 +31,7 @@
     }
 
     &:not(.circle).has-icon {
-      padding-left: 10px;
+      padding-left: 0;
     }
 
     &.circle {

package/lib/components/button/style/_theme.scss

@@ -76,5 +76,8 @@
         }
       }
     }
+    &:hover {
+      filter: brightness(75%);
+    }
   }
 }

package/lib/components/co-dialog/style/_material-definition.scss

@@ -1,6 +1,6 @@
 $cc-co-dialog-font-family: $cc-font-family !default;
 $cc-co-dialog-font-size: $cc-font-size-default !default;
-$cc-co-dialog-padding: 20px !default;
+$cc-co-dialog-padding: 30px !default;
 $cc-co-dialog-header-font-family: $cc-font-family !default;
 $cc-co-dialog-header-font-size: $cc-font-size-default !default;
 $cc-co-dialog-header-font-weight: normal !default;
@@ -23,7 +23,7 @@ $cc-co-dialog-content-font-family: $cc-font-family !default;
 $cc-co-dialog-content-font-size: $cc-font-size-default !default;
 $cc-co-dialog-content-text-color: $cc-color-dark !default;
 $cc-co-dialog-content-background-color: $cc-color-light !default;
-$cc-co-dialog-footer-padding: 10px 0 0 0 !default;
+$cc-co-dialog-footer-padding: 30px 0 0 0 !default;
 $cc-co-dialog-footer-margin: 10px 0 0 0 !default;
 $cc-co-dialog-footer-font-family: $cc-font-family !default;
 $cc-co-dialog-footer-font-size: $cc-font-size-default !default;

package/lib/components/filter-item/filter-item.component.d.ts

@@ -1,7 +1,7 @@
-import { EventEmitter, OnInit } from "@angular/core";
-import { CoreComponentsIcon } from "../../core/enum/core-components-icon.enum";
-import { FilterItemViewmodel } from "./filter-item-viewmodel";
-import { IconCacheService } from "../icon/icon-cache.service";
+import { EventEmitter, OnInit } from '@angular/core';
+import { CoreComponentsIcon } from '../../core/enum/core-components-icon.enum';
+import { FilterItemViewmodel } from './filter-item-viewmodel';
+import { IconCacheService } from '../icon/icon-cache.service';
 export declare class FilterItemComponent implements OnInit {
     iconService: IconCacheService;
     icons: typeof CoreComponentsIcon;

package/lib/components/input-text/style/_layout.scss

@@ -49,7 +49,7 @@
     input {
       border: none;
       outline: none;
-      padding: $cc-co-input-text-input-padding;
+      padding: $cc-input-input-padding;
       align-self: end;
       overflow: hidden;
       text-overflow: ellipsis;

package/lib/components/input-text/style/_material-definition.scss

@@ -9,7 +9,6 @@ $cc-co-input-text-small-height: 45px !default;
 $cc-co-input-text-icon-max-height: 80px !default;
 $cc-co-input-text-icon-margin-number: 0 !default;
 $cc-co-input-text-spacer-width: 5px !default;
-$cc-co-input-text-input-padding: 0 0 5px 5px !default;
 $cc-co-input-text-icon-padding: 3% !default;
 //$cc-co-input-label-color: $cc-color-border !default;
 //$cc-co-input-label-font-style: normal !default;

package/lib/components/simple-grid/style/_layout.scss

@@ -5,6 +5,9 @@
     font-size: $cc-simple-grid-font-size;
     co-input-checkbox {
       justify-content: center;
+      &.read-only {
+        opacity: 1;
+      }
       .checkbox {
         border-radius: $cc-simple-grid-input-checkbox-border-radius;
         border-color: $cc-simple-grid-input-checkbox-color;
@@ -99,6 +102,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    border-bottom: 2px solid $cc-color-grid-row-hover-background;
   }
   .simple-grid-column-sizer {
     cursor: col-resize;
@@ -114,9 +118,8 @@
     //flex-direction: row;
     border: $cc-simple-grid-row-border;
     border-width: $cc-simple-grid-row-border-width;
-    &:nth-child(even) {
-      background: $cc-simple-grid-row-even-background;
-    }
+    border-style: solid;
+    border-color: $cc-simple-grid-row-border-color;
   }
   .right-align {
     text-align: right;
@@ -154,10 +157,6 @@
     transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
   }
 
-  .simple-grid-row:last-child {
-    border: none;
-  }
-
   .pagination-bar {
     ul {
       margin: $cc-simple-grid-pagination-bar-margin;

package/lib/components/simple-grid/style/_material-definition.scss

@@ -22,11 +22,11 @@ $cc-simple-grid-row-edit-input-background-color: white !default;
 $cc-simple-grid-row-hover-background-color: $cc-color-grid-row-hover-background !default;
 $cc-simple-grid-row-hover-background-transparent: transparent !default;
 $cc-simple-grid-row-border: none !default;
-$cc-simple-grid-row-border-color: $cc-color-border !default;
-$cc-simple-grid-row-border-width: 1px 1px 1px 1px !default;
+$cc-simple-grid-row-border-color: #F5F5F5 !default;
+$cc-simple-grid-row-border-width: 10px 0 0 0 !default;
 $cc-simple-grid-cell-padding: 15px 5px !default;
 $cc-simple-grid-row-height: auto !default;
-$cc-simple-grid-row-even-background: #F5F5F5;
+$cc-simple-grid-row-even-background: #F5F5F5 !default;
 
 $cc-simple-grid-pagination-background-color: white !default;
 $cc-simple-grid-pagination-bar-margin: 10px 0 0 0 !default;

package/lib/directives/observe-visibility/observe-visibility.directive.d.ts

@@ -1,16 +1,14 @@
-import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit } from "@angular/core";
+import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
 export declare class ObserveVisibilityDirective implements OnDestroy, OnInit, AfterViewInit {
     private _element;
-    debounceTime: number;
     threshold: number;
-    visible: EventEmitter<HTMLElement>;
+    visibilityChange: EventEmitter<boolean>;
+    visible: boolean;
     private _observer;
-    private _subject;
     constructor(_element: ElementRef);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    private _isVisible;
     private _createObserver;
     private _startObservingElements;
 }

package/lib/style/_input.mixins.scss

@@ -68,7 +68,9 @@
         //&:after {
         //  transform: scaleX(1);
         //}
-        border-bottom-color: $cc-input-focused-border-bottom-color;
+        border-style: $cc-input-focused-border-style;
+        border-width: $cc-input-focused-border-width;
+        border-color: $cc-input-focused-border-color;
       }
     }
     &.cc-input-focused, &.hasvalue {
@@ -77,6 +79,9 @@
       }
     }
   }
+  &:hover {
+    border-color: $cc-input-hover-color;
+  }
 }
 
 ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */

package/lib/style/_variables.scss

@@ -7,7 +7,7 @@ $grid-header-border-color: #a0b6c9 !default;
 $group-droparea-color: #175988 !default;
 $grid-header-font-weight: 700 !default;
 
-$cc-item-size: 50px !default;
+$cc-item-size: 40px !default;
 $cc-icon-size: 40px !default;
 $cc-icon-size-small: 30px !default;
 $cc-default-border-radius: 3px !default;
@@ -16,7 +16,7 @@ $cc-scrollbar-thumbColor: #484f60 !default;
 $cc-scrollbar-trackColor: #e8eceb !default;
 $cc-scrollbar-stopPoint: 10% !default;
 
-$cc-color-action: #2b60a7 !default;
+$cc-color-action: #3e7eff !default;
 $accent: $cc-color-action !default;
 $cc-color-input-background-color: white !default;
 $cc-color-input-placeholder-color: #8083A3 !default;
@@ -104,15 +104,21 @@ $cc-input-required-mark-width-height: 7px;
 $cc-input-font-size: 12px !default;
 $cc-input-placeholder-font-style: normal !default;
 $cc-input-width: 300px !default;
-$cc-input-margin-left: 5px !default;
+$cc-input-margin-left: 10px !default;
+$cc-input-input-padding: 0 0 5px 10px !default;
 $cc-input-margin-top: 16px !default;
 $cc-input-show-focus-line: true !default;
 $cc-input-focus-line-color: $cc-color-action !default;
+$cc-input-hover-darken: 75% !default;
+$cc-input-hover-color: #2d5fc4 !default;
 $cc-input-border-style: solid !default;
-$cc-input-border-width: 0 0 1px 0 !default;
+$cc-input-border-width: 2px !default;
 $cc-input-border-color: $cc-color-border !default;
 $cc-input-border-radius: 5px !default;
-$cc-input-focused-border-bottom-color: $cc-color-action !default;
+
+$cc-input-focused-border-style: solid !default;
+$cc-input-focused-border-width: 2px !default;
+$cc-input-focused-border-color: $cc-color-action;
 /**********/
 
 /* checkbox */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/corecomponents_v12",
-  "version": "12.0.98",
+  "version": "12.0.99",
   "description": "Colijn IT core components for Angular 12",
   "private": false,
   "peerDependencies": {