neo.mjs 4.2.7 → 4.3.1

package/resources/scss/src/apps/website/examples/List.scss

@@ -1,4 +1,4 @@
-.website-examples-list.neo-list-container.neo-list {
+.website-examples-list.neo-list {
     transition: padding v(website-transition-duration) ease-out;
 
     .neo-list-item {
@@ -154,4 +154,4 @@
             margin-top: 20px;
         }
     }
-}
+}

package/resources/scss/src/button/Base.scss

@@ -27,7 +27,6 @@
     flex-direction     : row;
     justify-content    : center;
     margin             : v(button-margin);
-    overflow           : hidden;
     padding            : v(button-padding);
     position           : relative;
     text-decoration    : none; // for url buttons => links
@@ -59,22 +58,60 @@
         border-color: v(button-pressed-border-color);
     }
 
+    .neo-button-badge {
+        background-color: v(button-badge-background-color);
+        border-radius   : 5px;
+        color           : v(button-badge-color);
+        margin-left     : auto;
+        padding         : 3px;
+        position        : absolute;
+        z-index         : 2;
+
+        &.neo-bottom-left {
+            bottom: -10px;
+            left  : -10px;
+        }
+
+        &.neo-bottom-right {
+            bottom: -10px;
+            right : -10px;
+        }
+
+        &.neo-top-left {
+            left: -10px;
+            top : -10px;
+        }
+
+        &.neo-top-right {
+            right: -10px;
+            top  : -10px;
+        }
+    }
+
     .neo-button-glyph {
         color         : v(button-glyph-color);
         font-size     : 12px;
         margin        : 0 6px 0 0;
         pointer-events: none;
+        z-index       : 2;
     }
 
     .neo-button-ripple {
-        background-color: red;
+        background-color: v(button-ripple-background-color);
         border-radius   : 50%;
         opacity         : 0;
-        pointer-events  : none;
         position        : absolute;
         transform       : scale(4);
     }
 
+    .neo-button-ripple-wrapper {
+        height        : 100%;
+        overflow      : hidden;
+        pointer-events: none;
+        position      : absolute;
+        width         : 100%;
+    }
+
     .neo-button-text {
         color         : v(button-text-color);
         font-family   : v(button-text-font-family);
@@ -83,6 +120,7 @@
         line-height   : v(button-text-line-height);
         pointer-events: none;
         text-transform: v(button-text-transform);
+        z-index       : 2;
     }
 
     &:focus {

package/resources/scss/src/calendar/view/calendars/ColorsList.scss

@@ -1,4 +1,6 @@
 .neo-calendars-colors-list {
+    overflow: visible;
+
     &:focus {
         outline: none;
     }
@@ -7,11 +9,12 @@
         border-radius: 50%;
         display      : inline-block;
         height       : 1.5em;
-        margin-right : 0.3em;
+        margin       : 0.3em 0.3em 0.3em 0;
+        transition   : box-shadow .2s;
         width        : 1.5em;
 
         &.neo-selected {
-            box-shadow: 0 0 0 3px currentColor;
+            box-shadow: 0 0 0 0.25em currentColor;
         }
     }
 }

package/resources/scss/src/layout/Card.scss

@@ -1,16 +1,12 @@
 .neo-layout-card {
     display    : flex;
     align-items: stretch;
-}
-
-.neo-layout-card-item {
-    flex: 1 0 100%;
 
-    &.active-item {
+    > * {
+        flex: 1 0 100%;
 
+        &.neo-inactive-item {
+            display: none !important;
+        }
     }
-
-    &.inactive-item {
-        display: none !important;
-    }
-}
+}

package/resources/scss/src/list/Base.scss

@@ -1,7 +1,8 @@
-.neo-list-container {
+.neo-list-wrapper {
     background-color: v(list-container-background-color);
     border          : v(list-container-border);
-    overflow        : auto;
+    overflow        : hidden;
+    position        : relative;
 }
 
 .neo-list {
@@ -12,6 +13,7 @@
     margin-inline-start : 0;
     margin-inline-end   : 0;
     padding-inline-start: 0;
+    overflow            : auto;
 
     &.neo-use-checkicons {
         .neo-list-item:before {
@@ -28,6 +30,12 @@
         }
     }
 
+    &.neo-use-wrapper-node {
+        height  : 100%;
+        position: absolute;
+        width   : 100%;
+    }
+
     .neo-list-item {
         background-color: v(list-item-background-color);
         cursor          : pointer;
@@ -51,4 +59,4 @@
             color: v(list-item-highlight-search-color);
         }
     }
-}
+}

package/resources/scss/src/tab/Container.scss

@@ -1,6 +1,4 @@
 .neo-tab-container {
-    overflow: hidden;
-
     &.neo-bottom {
         > .neo-tab-content-container {
             border-bottom: 0;
@@ -31,10 +29,11 @@
 }
 
 .neo-tab-content-container {
-    border: v(tab-container-content-border);
+    border  : v(tab-container-content-border);
+    overflow: hidden;
 }
 
 .neo-tab-header-toolbar {
     background-color: transparent;
     padding         : 0;
-}
+}

package/resources/scss/src/tab/header/Button.scss

@@ -42,6 +42,11 @@
         }
     }
 
+    .neo-button-badge {
+        font-size     : 10px;
+        text-transform: none;
+    }
+
     .neo-button-glyph {
         color: v(tab-button-glyph-color);
     }
@@ -59,4 +64,4 @@
         width           : 100%;
         z-index         : 2;
     }
-}
+}

package/resources/scss/src/table/Container.scss

@@ -1,5 +1,6 @@
 .neo-table-wrapper {
     overflow: auto;
+    position: relative;
     height  : 100%;
 }
 
@@ -12,6 +13,7 @@
     font-weight     : 400;
     line-height     : 19px;
     overflow        : auto;
+    position        : absolute;
 
     tr {
         height    : 32px !important;
@@ -118,4 +120,4 @@
     }
 }
 
-#myTableContainer ::-webkit-scrollbar-track:horizontal {margin-left: 400px;}
+#myTableContainer ::-webkit-scrollbar-track:horizontal {margin-left: 400px;}

package/resources/scss/src/table/header/Button.scss

@@ -59,9 +59,29 @@
         pointer-events: none;
         transition    : opacity 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
         will-change   : opacity, transform;
+        z-index       : 2;
+    }
+
+    .neo-button-ripple {
+        background-color: v(table-header-button-ripple-background-color);
+        border-radius   : 50%;
+        opacity         : 0;
+        position        : absolute;
+        transform       : scale(4);
+    }
+
+    .neo-button-ripple-wrapper {
+        height        : 100%;
+        left          : 0;
+        overflow      : hidden;
+        pointer-events: none;
+        position      : absolute;
+        top           : 0;
+        width         : 100%;
     }
 
     .neo-button-text {
         pointer-events: none;
+        z-index       : 2;
     }
-}
+}

package/resources/scss/src/tree/List.scss

@@ -4,6 +4,16 @@
     display : flex;
     position: relative;
 
+    .neo-list {
+        overflow: visible;
+    }
+
+    .neo-list-container {
+        background-color: v(list-container-background-color);
+        border          : v(list-container-border);
+        overflow        : auto;
+    }
+
     .neo-list-folder {
         + .neo-list {
             display: none;
@@ -85,4 +95,4 @@
             content: "\f07c";
         }
     }
-}
+}

package/resources/scss/theme-dark/button/Base.scss

@@ -6,6 +6,8 @@ $neoMap: map-merge($neoMap, (
     'button-background-image'         : linear-gradient(#434749, #323536),
     'button-background-gradient-end'  : #323536,
     'button-background-gradient-start': #434749,
+    'button-badge-background-color'   : #64b5f6,
+    'button-badge-color'              : #282828,
     'button-border'                   : 1px solid #2b2b2b,
     'button-border-radius'            : 0,
     'button-glyph-color'              : #bbb,
@@ -15,6 +17,7 @@ $neoMap: map-merge($neoMap, (
     'button-margin'                   : 2px,
     'button-padding'                  : 5px 12px 5px 12px,
     'button-pressed-border-color'     : #5d83a7,
+    'button-ripple-background-color'  : darken(#5d83a7, 10%),
     'button-text-color'               : #bbb,
     'button-text-font-family'         : #{neo(neo-font-family)},
     'button-text-font-size'           : 11px,
@@ -33,6 +36,8 @@ $neoMap: map-merge($neoMap, (
         --button-background-image         : #{neo(button-background-image)};
         --button-background-gradient-end  : #{neo(button-background-gradient-end)};
         --button-background-gradient-start: #{neo(button-background-gradient-start)};
+        --button-badge-background-color   : #{neo(button-badge-background-color)};
+        --button-badge-color              : #{neo(button-badge-color)};
         --button-border                   : #{neo(button-border)};
         --button-border-radius            : #{neo(button-border-radius)};
         --button-glyph-color              : #{neo(button-glyph-color)};
@@ -42,6 +47,7 @@ $neoMap: map-merge($neoMap, (
         --button-margin                   : #{neo(button-margin)};
         --button-padding                  : #{neo(button-padding)};
         --button-pressed-border-color     : #{neo(button-pressed-border-color)};
+        --button-ripple-background-color  : #{neo(button-ripple-background-color)};
         --button-text-color               : #{neo(button-text-color)};
         --button-text-font-family         : #{neo(button-text-font-family)};
         --button-text-font-size           : #{neo(button-text-font-size)};
@@ -50,4 +56,4 @@ $neoMap: map-merge($neoMap, (
         --button-text-transform           : #{neo(button-text-transform)};
         --button-use-gradients            : #{neo(button-use-gradients)};
     }
-}
+}

package/resources/scss/theme-dark/table/header/Button.scss

@@ -1,15 +1,17 @@
 $neoMap: map-merge($neoMap, (
-    'table-header-button-background-color': #323232,
-    'table-header-button-background-image': linear-gradient(#3c3f41, #323232),
-    'table-header-button-color'           : #bbb,
-    'table-header-button-glyph-color'     : #bbb
+    'table-header-button-background-color'       : #323232,
+    'table-header-button-background-image'       : linear-gradient(#3c3f41, #323232),
+    'table-header-button-color'                  : #bbb,
+    'table-header-button-glyph-color'            : #bbb,
+    'table-header-button-ripple-background-color': darken(#5d83a7, 10%),
 ));
 
 @if $useCssVars == true {
     :root .neo-theme-dark { // .neo-table-header
-        --table-header-button-background-color: #{neo(table-header-button-background-color)};
-        --table-header-button-background-image: #{neo(table-header-button-background-image)};
-        --table-header-button-color           : #{neo(table-header-button-color)};
-        --table-header-button-glyph-color     : #{neo(table-header-button-glyph-color)};
+        --table-header-button-background-color       : #{neo(table-header-button-background-color)};
+        --table-header-button-background-image       : #{neo(table-header-button-background-image)};
+        --table-header-button-color                  : #{neo(table-header-button-color)};
+        --table-header-button-glyph-color            : #{neo(table-header-button-glyph-color)};
+        --table-header-button-ripple-background-color: #{neo(table-header-button-ripple-background-color)};
     }
-}
+}

package/resources/scss/theme-light/button/Base.scss

@@ -6,6 +6,8 @@ $neoMap: map-merge($neoMap, (
     'button-background-image'         : none,
     'button-background-gradient-end'  : #323536,
     'button-background-gradient-start': #434749,
+    'button-badge-background-color'   : #1c60a0,
+    'button-badge-color'              : #fff,
     'button-border'                   : 1px solid #ddd,
     'button-border-radius'            : 3px,
     'button-glyph-color'              : #1c60a0,
@@ -15,6 +17,7 @@ $neoMap: map-merge($neoMap, (
     'button-margin'                   : 2px,
     'button-padding'                  : 5px 12px 5px 12px,
     'button-pressed-border-color'     : #1c60a0,
+    'button-ripple-background-color'  : lighten(#1c60a0, 50%),
     'button-text-color'               : #1c60a0,
     'button-text-font-family'         : #{neo(neo-font-family)},
     'button-text-font-size'           : 11px,
@@ -33,6 +36,8 @@ $neoMap: map-merge($neoMap, (
         --button-background-image         : #{neo(button-background-image)};
         --button-background-gradient-end  : #{neo(button-background-gradient-end)};
         --button-background-gradient-start: #{neo(button-background-gradient-start)};
+        --button-badge-background-color   : #{neo(button-badge-background-color)};
+        --button-badge-color              : #{neo(button-badge-color)};
         --button-border                   : #{neo(button-border)};
         --button-border-radius            : #{neo(button-border-radius)};
         --button-glyph-color              : #{neo(button-glyph-color)};
@@ -42,6 +47,7 @@ $neoMap: map-merge($neoMap, (
         --button-margin                   : #{neo(button-margin)};
         --button-padding                  : #{neo(button-padding)};
         --button-pressed-border-color     : #{neo(button-pressed-border-color)};
+        --button-ripple-background-color  : #{neo(button-ripple-background-color)};
         --button-text-color               : #{neo(button-text-color)};
         --button-text-font-family         : #{neo(button-text-font-family)};
         --button-text-font-size           : #{neo(button-text-font-size)};
@@ -50,4 +56,4 @@ $neoMap: map-merge($neoMap, (
         --button-text-transform           : #{neo(button-text-transform)};
         --button-use-gradients            : #{neo(button-use-gradients)};
     }
-}
+}

package/resources/scss/theme-light/table/header/Button.scss

@@ -1,15 +1,17 @@
 $neoMap: map-merge($neoMap, (
-    'table-header-button-background-color': #5d83a7,
-    'table-header-button-background-image': none,
-    'table-header-button-color'           : #fff,
-    'table-header-button-glyph-color'     : #fff
+    'table-header-button-background-color'       : #5d83a7,
+    'table-header-button-background-image'       : none,
+    'table-header-button-color'                  : #fff,
+    'table-header-button-glyph-color'            : #fff,
+    'table-header-button-ripple-background-color': darken(#5d83a7, 10%),
 ));
 
 @if $useCssVars == true {
     :root .neo-theme-light { // .neo-table-header-button
-        --table-header-button-background-color: #{neo(table-header-button-background-color)};
-        --table-header-button-background-image: #{neo(table-header-button-background-image)};
-        --table-header-button-color           : #{neo(table-header-button-color)};
-        --table-header-button-glyph-color     : #{neo(table-header-button-glyph-color)};
+        --table-header-button-background-color       : #{neo(table-header-button-background-color)};
+        --table-header-button-background-image       : #{neo(table-header-button-background-image)};
+        --table-header-button-color                  : #{neo(table-header-button-color)};
+        --table-header-button-glyph-color            : #{neo(table-header-button-glyph-color)};
+        --table-header-button-ripple-background-color: #{neo(table-header-button-ripple-background-color)};
     }
-}
+}