- CEventsCalendar component added

src/components/CEventsCalendar/CEventsCalendar.scss

@@ -0,0 +1,209 @@
+$graytext: #555;
+
+.calendar {
+  position: relative;
+}
+
+.my-event {
+  width: 100%;
+  position: absolute;
+  font-size: 12px;
+}
+
+.flex-container {
+  background-color: #ccc;
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.flex-item {
+  background-color: #9f9f9f;
+  padding: 10px;
+  margin: 10px;
+  color: #fff;
+  font-size: 1rem;
+}
+
+.cal {
+  color: black;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0.03333em;
+
+  &__title {
+    color: red;
+    font-weight: 700;
+    font-size: 1rem;
+    padding-bottom: 10px;
+  }
+
+  &__details {
+    color: black;
+  }
+
+  &__hours {
+    color: blue;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      font-weight: 400;
+    }
+  }
+
+  &__where {
+    margin-top: 10px;
+    color: blue;
+
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue;
+    }
+  }
+
+  &__when {
+    margin-top: 10px;
+    color: blue;
+
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue;
+    }
+  }
+
+  &__teacher {
+    margin-top: 10px;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue;
+    }
+  }
+
+  &__img {
+    width: 100px;
+    height: 100px;
+    padding: 10px;
+  }
+
+}
+
+.listaev {
+  color: black;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0.03333em;
+
+  &__date {
+    font-weight: bold;
+    color: #2ba0fd;
+    font-size: 1rem;
+  }
+
+  &__title {
+    color: red;
+    font-weight: 700;
+    letter-spacing: 0.066em;
+  }
+
+  &__details {
+    color: black;
+  }
+
+  &__tdimg {
+    width: 150px;
+    height: 150px;
+  }
+
+  &__table {
+    margin: 10px;
+    border: solid 1px #4198ef;
+    border-radius: 1rem;
+  }
+
+  &__align_center_mobile {
+    text-align: left;
+    @media (max-width: 718px) {
+      text-align: center;
+      display: flex;
+    }
+  }
+
+  &__img {
+    padding: 0.5rem !important;
+    float: left;
+    width: 150px;
+    height: 150px;
+    border-radius: 1rem;
+
+    @media (max-width: 718px) {
+      // PER VERSIONE MOBILE
+      float: none;
+      text-align: center;
+      margin: 0 auto;
+    }
+  }
+
+}
+
+@media (max-width: 718px) {
+  .q-chip__content {
+    white-space: normal !important;
+  }
+
+  .q-chip > div {
+    white-space: normal !important;
+  }
+  .inline > div {
+    white-space: normal !important;
+  }
+}
+
+.mytoolbar {
+  padding: 0 2px !important;
+}
+
+.margin_avatar, .margin_avatar2, .margin_with {
+  margin-left: 0;
+}
+
+@media (max-width: 400px) {
+  .margin_avatar {
+    margin-left: 28px;
+  }
+
+  .margin_avatar2 {
+    margin-left: 38px;
+  }
+
+  .margin_with {
+    margin-left: 7px;
+  }
+}
+
+.chipbooked {
+
+  position: absolute;
+  left: 40px;
+  @media (max-width: 400px) {
+    position: initial;
+  }
+}
+
+.windowcol {
+  background-color: #ffffff;
+          // background: radial-gradient(circle, #ffffff 0%, #94dbfb 100%)
+}
+
+.mysel{
+  color: white;
+}