@lemonadejs/calendar 3.6.0 → 5.2.0

package/dist/style.css

@@ -8,6 +8,12 @@
     position: relative;
 }
 
+.lm-calendar[data-disabled] .lm-calendar-container[data-view="days"] .lm-calendar-content,
+.lm-calendar[data-disabled] .lm-calendar-footer {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
 .lm-calendar button {
     cursor: pointer;
 }
@@ -53,7 +59,8 @@
     display: flex;
     flex: 1;
     cursor: pointer;
-    padding-left: 5px;
+    padding: 5px;
+    margin: 10px 0;
 }
 
 .lm-calendar-header .lm-calendar-labels > button {
@@ -67,13 +74,7 @@
 .lm-calendar-navigation {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
-    gap: 6px;
-}
-
-.lm-calendar-navigation button {
-    padding: 8px;
-    border: 0;
-    border-radius: 24px;
+    gap: 1px;
 }
 
 .lm-calendar-navigation i:hover {
@@ -86,11 +87,12 @@
     grid-template-columns: repeat(7, 1fr);
     padding: 0 8px 0 8px;
     font-size: 0.8em;
+    align-items: center;
+    justify-content: center;
 }
 
 .lm-calendar-container[data-view="days"] .lm-calendar-weekdays {
     display: grid;
-    align-items: center;
     flex: 1;
 }
 
@@ -101,6 +103,7 @@
     text-align: center;
     font-weight: bold;
     line-height: 2em;
+    justify-content: center;
 }
 
 .lm-calendar-content {
@@ -125,6 +128,11 @@
     background-origin: padding-box;
 }
 
+.lm-calendar-content > div[data-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.3;
+}
+
 .lm-calendar-container[data-view="months"] .lm-calendar-content {
     grid-template-columns: repeat(4, 1fr);
 }
@@ -185,14 +193,20 @@
     top: calc(25%);
     height: 50%;
     background-color: var(--lm-main-color-alpha, #2196f388);
+    z-index: -1;
 }
 
 .lm-calendar-content > div[data-start="true"]::before {
-    left: 32px;
+    left: 5px;
+    border-top-left-radius: 20%;
+    border-bottom-left-radius: 20%;
 }
 
-.lm-calendar-content > div[data-end="true"]::before {
-    right: 32px;
+.lm-calendar-content > div[data-end="true"]::before,
+.lm-calendar-content > div[data-last="true"]::before {
+    right: 5px;
+    border-top-right-radius: 20%;
+    border-bottom-right-radius: 20%;
 }
 
 .lm-calendar-footer > div {
@@ -211,7 +225,7 @@
     display: none;
 }
 
-.lm-calendar-footer select {
+.lm-calendar-footer .lm-calendar-control {
     border: 0;
     background-color: transparent;
     padding: 6px;
@@ -245,6 +259,65 @@
     display: none;
 }
 
+.lm-calendar .lm-calendar-icon {
+    font-family: "Material Symbols Outlined", "Material Icons", "FontAwesome";
+    font-size: 24px;
+    width: 40px;
+    height: 40px;
+    line-height: 24px;
+    box-sizing: border-box;
+    border-radius: 20px;
+    border: 0;
+    padding: 0;
+    margin: 0;
+}
+
+.lm-calendar[data-type="picker"] .lm-modal {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    min-width: 100%;
+    min-height: 40px;
+}
+
+.lm-calendar[data-type="picker"] .lm-calendar-content > div {
+    aspect-ratio: initial;
+    min-height: 60px;
+    border-radius: 4px;
+}
+
+.lm-calendar[data-type="picker"]  .lm-calendar-weekdays > div {
+    min-height: 60px;
+    line-height: 60px;
+}
+
+
+/** Calendar with grid lines */
+
+.lm-calendar[data-grid="true"] .lm-calendar-weekdays {
+    padding: 0;
+}
+
+.lm-calendar[data-grid="true"] .lm-calendar-content {
+    border-top: 1px solid transparent;
+    border-left: 1px solid transparent;
+    border-right: 1px solid #ccc;
+    border-bottom: 1px solid #ccc;
+    padding: 0;
+}
+
+.lm-calendar[data-grid="true"] .lm-calendar-content > div {
+    border-top: 1px solid #ccc;
+    border-left: 1px solid #ccc;
+    border-right: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+    border-radius: 0;
+    justify-content: start;
+    align-items: end;
+}
+
+/** Other */
+
 .lm-ripple {
     background-position: center;
     transition: background 0.8s;
@@ -260,6 +333,8 @@
     transition: background 0s;
 }
 
+/** Dark mode */
+
 .lm-dark-mode .lm-calendar-weekdays {
     color: #aaa;
 }
@@ -279,25 +354,3 @@
 .lm-dark-mode .lm-calendar-footer select:focus {
     background-color: #3a3a45;
 }
-
-.lm-calendar[data-grid="true"] .lm-calendar-weekdays {
-    padding: 0;
-}
-
-.lm-calendar[data-grid="true"] .lm-calendar-content {
-    border-top: 1px solid transparent;
-    border-left: 1px solid transparent;
-    border-right: 1px solid #ccc;
-    border-bottom: 1px solid #ccc;
-    padding: 0;
-}
-
-.lm-calendar[data-grid="true"] .lm-calendar-content > div {
-    border-top: 1px solid #ccc;
-    border-left: 1px solid #ccc;
-    border-right: 1px solid transparent;
-    border-bottom: 1px solid transparent;
-    border-radius: 0;
-    justify-content: start;
-    align-items: end;
-}

package/package.json

@@ -14,10 +14,10 @@
         "javascript plugins"
     ],
     "dependencies": {
-        "lemonadejs": "^4.3.3",
-        "@lemonadejs/modal": "^3.3.0"
+        "lemonadejs": "^5.2.0",
+        "@lemonadejs/modal": "^5.2.0"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
-    "version": "3.6.0"
+    "version": "5.2.0"
 }