@asd20/ui 3.2.947 → 3.2.949

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.947",
+  "version": "3.2.949",
   "private": false,
   "license": "MIT",
   "repository": {

package/src/components/atoms/Asd20CalendarEventButton/index.vue

@@ -7,6 +7,7 @@
     :style="{ '--accent-color': event.calendarColor }"
   >
     <span class="title">
+      <span class="dot" :style="{ backgroundColor: event.calendarColor }"></span>
       <span>{{ sanitizedSummary }}</span>
     </span>
 

package/src/components/organisms/Asd20Calendar/index.vue

@@ -7,7 +7,7 @@
         :key="index"
         class="asd20-calendar__weekday"
       >
-        {{ shortWeekdays ? dayName.charAt(0) : dayName }}
+        <span>{{ shortWeekdays ? dayName.charAt(0) : dayName }}</span>
       </div>
     </div>
     <!-- Days -->
@@ -29,20 +29,20 @@
           <span class="day">{{ day.number }}</span>
           <span class="year">{{ day.year }}</span>
         </div>
-        <div>
-          <div
-            class="asd20-calendar__events"
-            v-if="!annualView || !day.outsideOfCurrentMonth"
-          >
-            <Asd20CalendarEventButton
-              v-for="(event, index) in day.events"
-              :key="index"
-              :event="event"
-              :class="day.events.length > 1 ? 'small-dot' : ''"
-              @click.native="onEventClick(event)"
-            />
-          </div>
+
+        <div
+          class="asd20-calendar__events"
+          v-if="!annualView || !day.outsideOfCurrentMonth"
+        >
+          <Asd20CalendarEventButton
+            v-for="(event, index) in day.events"
+            :key="index"
+            :event="event"
+            :class="day.events.length > 1 ? 'small-dot' : ''"
+            @click.native="onEventClick(event)"
+          />
         </div>
+
       </li>
     </ol>
     <asd20-viewport

package/src/components/organisms/Asd20VideoHeader/index.vue

@@ -209,6 +209,9 @@ export default {
         infinite alternate-reverse both;
     }
   }
+  .video-toggle-btn {
+    display: none;
+  }
 
   @keyframes slide-top {
     0% {
@@ -312,31 +315,32 @@ export default {
     .scroll-down-indicator {
       display: block;
     }
-  }
-  .video-toggle-btn {
-    position: absolute;
-    bottom: 2rem;
-    right: 0.5rem;
-    background-color: rgba(0, 0, 0, 0.5);
-    color: lightgray;
-    border: none;
-    width: 45px;
-    height: 45px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 18px;
-    cursor: pointer;
-    transition: background-color 0.3s ease-in-out;
-  }
+    .video-toggle-btn {
+      display: block;
+      position: absolute;
+      bottom: 2rem;
+      right: 0.5rem;
+      background-color: rgba(0, 0, 0, 0.5);
+      color: lightgray;
+      border: none;
+      width: 45px;
+      height: 45px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      cursor: pointer;
+      transition: background-color 0.3s ease-in-out;
+    }
 
-  .video-toggle-btn:hover {
-    background-color: rgba(0, 0, 0, 0.7);
-  }
+    .video-toggle-btn:hover {
+      background-color: rgba(0, 0, 0, 0.7);
+    }
 
-  .video-toggle-btn span {
-    line-height: 1;
+    .video-toggle-btn span {
+      line-height: 1;
+    }
   }
 }
 </style>