neo.mjs 5.18.0 → 6.0.0

package/resources/scss/src/calendar/view/MainContainer.scss

@@ -1,6 +1,6 @@
 .neo-calendar-maincontainer {
     .neo-calendar-header-toolbar {
-        border-bottom: 1px solid v(calendar-border-color);
+        border-bottom: 1px solid var(--calendar-border-color);
 
         &.neo-left {
             padding-right: 0;
@@ -8,7 +8,7 @@
     }
 
     .neo-calendar-sidebar {
-        border-right: 1px solid v(calendar-border-color);
+        border-right: 1px solid var(--calendar-border-color);
         transition  : margin-left 350ms ease-out;
     }
 
@@ -47,91 +47,91 @@
         color            .15s ease-out;
 
     &.neo-blue {
-        background-color: v(event-blue-background-color);
-        border-left     : 2px solid v(event-blue-color);
-        color           : v(event-blue-color);
+        background-color: var(--event-blue-background-color);
+        border-left     : 2px solid var(--event-blue-color);
+        color           : var(--event-blue-color);
 
         &.neo-focus {
-            background-color: v(event-blue-background-color-focus);
+            background-color: var(--event-blue-background-color-focus);
         }
 
         .neo-resizable {
-            color: v(event-blue-color);
+            color: var(--event-blue-color);
         }
     }
 
     &.neo-green {
-        background-color: v(event-green-background-color);
-        border-left     : 2px solid v(event-green-color);
-        color           : v(event-green-color);
+        background-color: var(--event-green-background-color);
+        border-left     : 2px solid var(--event-green-color);
+        color           : var(--event-green-color);
 
         &.neo-focus {
-            background-color: v(event-green-background-color-focus);
+            background-color: var(--event-green-background-color-focus);
         }
 
         .neo-resizable {
-            color: v(event-green-color);
+            color: var(--event-green-color);
         }
     }
 
     &.neo-orange {
-        background-color: v(event-orange-background-color);
-        border-left     : 2px solid v(event-orange-color);
-        color           : v(event-orange-color);
+        background-color: var(--event-orange-background-color);
+        border-left     : 2px solid var(--event-orange-color);
+        color           : var(--event-orange-color);
 
         &.neo-focus {
-            background-color: v(event-orange-background-color-focus);
+            background-color: var(--event-orange-background-color-focus);
         }
 
         .neo-resizable {
-            color: v(event-orange-color);
+            color: var(--event-orange-color);
         }
     }
 
     &.neo-pink {
-        background-color: v(event-pink-background-color);
-        border-left     : 2px solid v(event-pink-color);
-        color           : v(event-pink-color);
+        background-color: var(--event-pink-background-color);
+        border-left     : 2px solid var(--event-pink-color);
+        color           : var(--event-pink-color);
 
         &.neo-focus {
-            background-color: v(event-pink-background-color-focus);
+            background-color: var(--event-pink-background-color-focus);
         }
 
         .neo-resizable {
-            color: v(event-pink-color);
+            color: var(--event-pink-color);
         }
     }
 
     &.neo-red {
-        background-color: v(event-red-background-color);
-        border-left     : 2px solid v(event-red-color);
-        color           : v(event-red-color);
+        background-color: var(--event-red-background-color);
+        border-left     : 2px solid var(--event-red-color);
+        color           : var(--event-red-color);
 
         &.neo-focus {
-            background-color: v(event-red-background-color-focus);
+            background-color: var(--event-red-background-color-focus);
         }
 
         .neo-resizable {
-            color: v(event-red-color);
+            color: var(--event-red-color);
         }
     }
 
     &.neo-yellow {
-        background-color: v(event-yellow-background-color);
-        border-left     : 2px solid v(event-yellow-border-color);
-        color           : v(event-yellow-color);
+        background-color: var(--event-yellow-background-color);
+        border-left     : 2px solid var(--event-yellow-border-color);
+        color           : var(--event-yellow-color);
 
         &.neo-focus {
-            background-color: v(event-yellow-background-color-focus);
-            color           : v(event-yellow-color-focus) !important;
+            background-color: var(--event-yellow-background-color-focus);
+            color           : var(--event-yellow-color-focus) !important;
 
             .neo-resizable {
-                color: v(event-yellow-color-focus) !important;
+                color: var(--event-yellow-color-focus) !important;
             }
         }
 
         .neo-resizable {
-            color: v(event-yellow-color);
+            color: var(--event-yellow-color);
         }
     }
 }
@@ -141,27 +141,27 @@
         border-radius: 3px;
 
         &.neo-blue {
-            border: 1px solid v(event-blue-color);
+            border: 1px solid var(--event-blue-color);
         }
 
         &.neo-green {
-            border: 1px solid v(event-green-color);
+            border: 1px solid var(--event-green-color);
         }
 
         &.neo-orange {
-            border: 1px solid v(event-orange-color);
+            border: 1px solid var(--event-orange-color);
         }
 
         &.neo-pink {
-            border: 1px solid v(event-pink-color);
+            border: 1px solid var(--event-pink-color);
         }
 
         &.neo-red {
-            border: 1px solid v(event-red-color);
+            border: 1px solid var(--event-red-color);
         }
 
         &.neo-yellow {
-            border: 1px solid v(event-yellow-border-color);
+            border: 1px solid var(--event-yellow-border-color);
         }
     }
 }
@@ -170,32 +170,32 @@
     .neo-event {
         &.neo-blue {
             border-left : 0;
-            border-right: 2px solid v(event-blue-color);
+            border-right: 2px solid var(--event-blue-color);
         }
 
         &.neo-green {
             border-left : 0;
-            border-right: 2px solid v(event-green-color);
+            border-right: 2px solid var(--event-green-color);
         }
 
         &.neo-orange {
             border-left : 0;
-            border-right: 2px solid v(event-orange-color);
+            border-right: 2px solid var(--event-orange-color);
         }
 
         &.neo-pink {
             border-left : 0;
-            border-right: 2px solid v(event-pink-color);
+            border-right: 2px solid var(--event-pink-color);
         }
 
         &.neo-red {
             border-left : 0;
-            border-right: 2px solid v(event-red-color);
+            border-right: 2px solid var(--event-red-color);
         }
 
         &.neo-yellow {
             border-left : 0;
-            border-right: 2px solid v(event-yellow-border-color);
+            border-right: 2px solid var(--event-yellow-border-color);
         }
     }
 }

package/resources/scss/src/calendar/view/SettingsContainer.scss

@@ -1,5 +1,5 @@
 .neo-calendar-settingscontainer {
-    border-left: 1px solid v(calendar-border-color);
+    border-left: 1px solid var(--calendar-border-color);
     transition : margin-right 350ms ease-out;
 
     .neo-layout-card-item {
@@ -14,8 +14,8 @@
 // todo: move into a better spot
 .neo-header {
     align-items     : center;
-    background-color: v(calendar-settings-header-background-color);
-    color           : v(calendar-settings-header-color);
+    background-color: var(--calendar-settings-header-background-color);
+    color           : var(--calendar-settings-header-color);
     display         : flex;
     padding         : 0 10px;
 

package/resources/scss/src/calendar/view/YearComponent.scss

@@ -4,11 +4,11 @@
 
     &.neo-show-cell-borders {
         .neo-calendar-week {
-            border-bottom: 1px solid v(c-y-cell-border-color);
+            border-bottom: 1px solid var(--c-y-cell-border-color);
         }
 
         .neo-cell {
-            border-right: 1px solid v(c-y-cell-border-color);
+            border-right: 1px solid var(--c-y-cell-border-color);
         }
 
         .neo-top-left-spacer {
@@ -21,7 +21,7 @@
         }
 
         .neo-weeknumber-cell {
-            border-left: 1px solid v(c-y-cell-border-color);
+            border-left: 1px solid var(--c-y-cell-border-color);
         }
     }
 
@@ -39,7 +39,7 @@
     }
 
     .neo-year-header {
-        color        : v(c-y-year-color);
+        color        : var(--c-y-year-color);
         display      : flex;
         font-size    : 1.3em;
         font-weight  : 600;
@@ -48,14 +48,14 @@
 
         .neo-nav-button {
             align-items     : center;
-            background-color: v(dateselector-nav-button-background-color);
+            background-color: var(--dateselector-nav-button-background-color);
             cursor          : pointer;
             display         : flex;
             justify-content : center;
             width           : 1.4em;
 
             &:before {
-                color      : v(dateselector-nav-button-color);
+                color      : var(--dateselector-nav-button-color);
                 font-family: var(--fa-style-family-classic);
                 font-weight: 900;
                 transition : color 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -63,7 +63,7 @@
 
             &:hover {
                 &:before {
-                    color: v(dateselector-nav-button-color-hover);
+                    color: var(--dateselector-nav-button-color-hover);
                 }
             }
         }
@@ -84,7 +84,7 @@
     }
 
     .neo-month-name {
-        color        : v(c-y-month-color);
+        color        : var(--c-y-month-color);
         font-size    : 1.3em;
         margin-bottom: .5em;
     }
@@ -109,7 +109,7 @@
 
         .neo-cell {
             align-items    : center;
-            color          : v(c-y-cell-color);
+            color          : var(--c-y-cell-color);
             display        : flex;
             flex           : 1;
             font-weight    : 400;
@@ -148,8 +148,8 @@
             justify-content: center;
 
             &.neo-today {
-                background-color: v(c-y-today-background-color);
-                color           : v(c-y-today-color);
+                background-color: var(--c-y-today-background-color);
+                color           : var(--c-y-today-color);
                 font-weight     : 900;
             }
         }
@@ -163,8 +163,8 @@
         }
 
         .neo-weeknumber-cell {
-            background-color: v(c-y-week-background-color);
-            color           : v(c-y-week-color);
+            background-color: var(--c-y-week-background-color);
+            color           : var(--c-y-week-color);
         }
     }
 }

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

@@ -1,7 +1,7 @@
 .neo-calendar-edit-container {
-    background-color: v(calendar-edit-calendar-background-color);
-    border          : 1px solid v(calendar-edit-calendar-border-color);
-    box-shadow      : v(calendar-edit-calendar-box-shadow);
+    background-color: var(--calendar-edit-calendar-background-color);
+    border          : 1px solid var(--calendar-edit-calendar-border-color);
+    box-shadow      : var(--calendar-edit-calendar-box-shadow);
     padding         : .7em;
     position        : absolute;
     top             : 0;
@@ -9,7 +9,7 @@
 
     &:before {
         border-bottom: 12px solid transparent;
-        border-right : 12px solid v(calendar-edit-calendar-border-color);
+        border-right : 12px solid var(--calendar-edit-calendar-border-color);
         border-top   : 12px solid transparent;
         content      : '';
         display      : block;

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

@@ -16,37 +16,37 @@
 
     .neo-color-blue {
         .neo-checkbox-icon {
-            color: v(event-blue-color) !important;
+            color: var(--event-blue-color) !important;
         }
     }
 
     .neo-color-green {
         .neo-checkbox-icon {
-            color: v(event-green-color) !important;
+            color: var(--event-green-color) !important;
         }
     }
 
     .neo-color-orange {
         .neo-checkbox-icon {
-            color: v(event-orange-color) !important;
+            color: var(--event-orange-color) !important;
         }
     }
 
     .neo-color-pink {
         .neo-checkbox-icon {
-            color: v(event-pink-color) !important;
+            color: var(--event-pink-color) !important;
         }
     }
 
     .neo-color-red {
         .neo-checkbox-icon {
-            color: v(event-red-color) !important;
+            color: var(--event-red-color) !important;
         }
     }
 
     .neo-color-yellow {
         .neo-checkbox-icon {
-            color: v(event-yellow-border-color) !important;
+            color: var(--event-yellow-border-color) !important;
         }
     }
 
@@ -63,7 +63,7 @@
         }
 
         .neo-edit-icon {
-            color       : v(calendars-list-edit-icon-color);
+            color       : var(--calendars-list-edit-icon-color);
             font-size   : 16px;
             font-weight : 600;
             height      : 1em;

package/resources/scss/src/calendar/view/month/Component.scss

@@ -1,5 +1,7 @@
+@use "sass:math";
+
 .neo-calendar-monthcomponent {
-    background-color: v(c-m-background-color);
+    background-color: var(--c-m-background-color);
     display         : flex;
     flex-direction  : column;
     position        : relative;
@@ -20,13 +22,13 @@
 
         &.neo-scroll-shadows {
             .neo-month-header-content {
-                box-shadow: v(c-m-scroll-box-shadow);
+                box-shadow: var(--c-m-scroll-box-shadow);
             }
         }
 
         .neo-day {
-            border-right   : 1px solid v(c-m-border-color);
-            color          : v(c-m-day-number-color);
+            border-right   : 1px solid var(--c-m-border-color);
+            color          : var(--c-m-day-number-color);
             display        : flex;
             flex           : 1 1 100%;
             flex-direction : column;
@@ -91,8 +93,8 @@
         }
 
         .neo-month-header-content {
-            background-color: v(c-m-background-color);
-            color           : v(c-m-year-color);
+            background-color: var(--c-m-background-color);
+            color           : var(--c-m-year-color);
             min-width       : fit-content;
             opacity         : 0;
             padding         : 0 calc(.3em / 1.6);
@@ -102,20 +104,20 @@
 
         .neo-week {
             align-content: flex-start;
-            border-bottom: 1px solid v(c-m-border-color);
+            border-bottom: 1px solid var(--c-m-border-color);
             display      : flex;
             flex         : 1 0 math.div(100%, 6);
         }
 
         .neo-weekend {
-            background-color: v(c-m-weekend-background-color);
+            background-color: var(--c-m-weekend-background-color);
         }
     }
 
     .neo-days-header {
         align-items     : stretch;
-        background-color: v(c-m-background-color);
-        border-bottom   : 1px solid v(c-m-border-color);
+        background-color: var(--c-m-background-color);
+        border-bottom   : 1px solid var(--c-m-border-color);
         display         : flex;
         height          : 3.75em;
         position        : absolute;
@@ -125,7 +127,7 @@
         .neo-day-name {
             align-items    : flex-end;
             border-right   : 1px solid transparent;
-            color          : v(c-m-day-name-color);
+            color          : var(--c-m-day-name-color);
             display        : flex;
             flex           : 1 1 100%;
             justify-content: flex-end;
@@ -138,12 +140,12 @@
     }
 
     .neo-month-name {
-        color      : v(c-m-month-name-color);
+        color      : var(--c-m-month-name-color);
         font-weight: bold;
     }
 
     .neo-static-header {
-        color       : v(c-m-year-color);
+        color       : var(--c-m-year-color);
         font-size   : 1.6em;
         padding-left: calc(.3em / 1.6);
     }

package/resources/scss/src/calendar/view/week/Component.scss

@@ -7,7 +7,7 @@
 
     &.neo-timeaxis-end {
         .neo-c-w-column{
-            border-left : 1px solid v(c-w-border-color);
+            border-left : 1px solid var(--c-w-border-color);
             border-right: none;
 
             &:first-child {
@@ -38,7 +38,7 @@
     }
 
     .neo-c-w-column{
-        border-right  : 1px solid v(c-w-border-color);
+        border-right  : 1px solid var(--c-w-border-color);
         display       : flex;
         flex          : 1 0 calc(100% / 21);
         flex-direction: column;
@@ -49,7 +49,7 @@
         }
 
         &.neo-weekend {
-            background-color: v(c-w-weekend-background-color);
+            background-color: var(--c-w-weekend-background-color);
         }
     }
 
@@ -142,8 +142,8 @@
 
     .neo-header-row-item {
         align-items     : center;
-        background-color: v(c-w-header-background-color);
-        border-bottom   : 1px solid v(c-w-border-color);
+        background-color: var(--c-w-header-background-color);
+        border-bottom   : 1px solid var(--c-w-border-color);
         cursor          : pointer;
         display         : flex;
         flex            : 1 0 calc(100% / 5);
@@ -155,15 +155,15 @@
 
         &:hover {
             .neo-date {
-                background-color: v(c-w-header-date-background-color-hover);
-                color           : v(c-w-header-date-color-hover);
+                background-color: var(--c-w-header-date-background-color-hover);
+                color           : var(--c-w-header-date-color-hover);
             }
         }
 
         .neo-date {
             align-items    : center;
             border-radius  : 50%;
-            color          : v(c-w-header-date-color);
+            color          : var(--c-w-header-date-color);
             display        : flex;
             font-size      : 1.6em;
             height         : 1.62em;
@@ -172,13 +172,13 @@
             width          : 1.62em;
 
             &.neo-today {
-                background-color: v(c-w-header-today-background-color);
-                color           : v(c-w-header-today-color);
+                background-color: var(--c-w-header-today-background-color);
+                color           : var(--c-w-header-today-color);
             }
         }
 
         .neo-day {
-            color        : v(c-w-header-day-color);
+            color        : var(--c-w-header-day-color);
             font-size    : .7em;
             margin-bottom: .3em;
         }
@@ -194,7 +194,7 @@
     }
 
     .neo-scroll-overlay {
-        background-color: v(c-w-header-background-color);
+        background-color: var(--c-w-header-background-color);
         height          : 4.4em;
         left            : 0;
         position        : absolute;

package/resources/scss/src/calendar/view/week/TimeAxisComponent.scss

@@ -1,10 +1,10 @@
 .neo-calendar-timeaxis {
-    background-color     : v(c-w-header-background-color);
+    background-color     : var(--c-w-header-background-color);
     background-position-x: 100%;
     background-position-y: 0;
     background-repeat    : repeat-y;
-    border-right         : 1px solid v(c-w-border-color);
-    box-shadow           : -1px 0 0 v(c-w-header-background-color); // hack for the annoying 1px gap
+    border-right         : 1px solid var(--c-w-border-color);
+    box-shadow           : -1px 0 0 var(--c-w-header-background-color); // hack for the annoying 1px gap
     flex                 : none;
     left                 : 0;
     margin-top           : -1px;
@@ -28,7 +28,7 @@
 .neo-timeaxis-end {
     .neo-calendar-timeaxis {
         background-position-x: 0;
-        border-left          : 1px solid v(c-w-border-color);
+        border-left          : 1px solid var(--c-w-border-color);
         border-right         : none;
         left                 : unset;
         right                : 0;

package/resources/scss/src/component/BoxLabel.scss

@@ -1,13 +1,13 @@
 .neo-label.neo-box-label {
-    background-color: v(boxlabel-background-color);
-    border          : v(boxlabel-border);
-    color           : v(boxlabel-color);
+    background-color: var(--boxlabel-background-color);
+    border          : var(--boxlabel-border);
+    color           : var(--boxlabel-color);
     font-size       : 13px;
     margin          : 10px;
     padding         : 10px;
     white-space     : normal;
 
     a {
-        color: v(boxlabel-color);
+        color: var(--boxlabel-color);
     }
-}
+}

package/resources/scss/src/component/Chip.scss

@@ -1,40 +1,40 @@
 .neo-chip {
-    align-items    : v(chip-align-items);
-    border         : v(chip-border);
-    border-radius  : v(chip-border-radius);
+    align-items    : var(--chip-align-items);
+    border         : var(--chip-border);
+    border-radius  : var(--chip-border-radius);
     // display will get handled on component level => either flex or inline-flex
     flex-direction : row;
-    height         : v(chip-height);
-    justify-content: v(chip-justify-content);
+    height         : var(--chip-height);
+    justify-content: var(--chip-justify-content);
     transition     : border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
 
     &:focus {
-        border-color: v(chip-border-color-focus);
+        border-color: var(--chip-border-color-focus);
         outline     : 0;
     }
 
     .neo-chip-close-button {
-        color     : v(chip-close-button-color);
+        color     : var(--chip-close-button-color);
         cursor    : pointer;
         margin    : 0 calc(15px / 2);
         transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
 
         &:hover {
-            color: v(chip-close-button-color-hover);
+            color: var(--chip-close-button-color-hover);
         }
     }
 
     .neo-chip-glyph {
-        color         : v(chip-glyph-color);
+        color         : var(--chip-glyph-color);
         margin        : 0 calc(15px / 2);
         pointer-events: none;
     }
 
     .neo-chip-text {
-        color         : v(chip-text-color);
+        color         : var(--chip-text-color);
         flex          : 1;
-        font-size     : v(chip-text-font-size);
+        font-size     : var(--chip-text-font-size);
         pointer-events: none;
-        text-align    : v(chip-text-align);
+        text-align    : var(--chip-text-align);
     }
-}
+}