@lemonadejs/calendar 5.0.0 → 5.2.1

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 {
@@ -123,6 +126,12 @@
     cursor: pointer;
     border-radius: 100px;
     background-origin: padding-box;
+    min-width: 38px;
+}
+
+.lm-calendar-content > div[data-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.3;
 }
 
 .lm-calendar-container[data-view="months"] .lm-calendar-content {
@@ -189,11 +198,16 @@
 }
 
 .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 {
@@ -212,7 +226,7 @@
     display: none;
 }
 
-.lm-calendar-footer select {
+.lm-calendar-footer .lm-calendar-control {
     border: 0;
     background-color: transparent;
     padding: 6px;
@@ -246,6 +260,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;
@@ -261,6 +334,8 @@
     transition: background 0s;
 }
 
+/** Dark mode */
+
 .lm-dark-mode .lm-calendar-weekdays {
     color: #aaa;
 }
@@ -280,25 +355,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

@@ -1,23 +1,23 @@
-{
-    "name": "@lemonadejs/calendar",
-    "title": "LemonadeJS calendar",
-    "description": "LemonadeJS reactive JavaScript calendar plugin",
-    "author": {
-        "name": "Contact <contact@lemonadejs.net>",
-        "url": "https://lemonadejs.net"
-    },
-    "keywords": [
-        "javascript calendar",
-        "lemonadejs plugins",
-        "js",
-        "library",
-        "javascript plugins"
-    ],
-    "dependencies": {
-        "lemonadejs": "^5.0.3",
-        "@lemonadejs/modal": "^5.0.0"
-    },
-    "main": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "version": "5.0.0"
-}
+{
+    "name": "@lemonadejs/calendar",
+    "title": "LemonadeJS calendar",
+    "description": "LemonadeJS reactive JavaScript calendar plugin",
+    "author": {
+        "name": "Contact <contact@lemonadejs.net>",
+        "url": "https://lemonadejs.net"
+    },
+    "keywords": [
+        "javascript calendar",
+        "lemonadejs plugins",
+        "js",
+        "library",
+        "javascript plugins"
+    ],
+    "dependencies": {
+        "lemonadejs": "^5.2.0",
+        "@lemonadejs/modal": "^5.2.0"
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "version": "5.2.1"
+}