Merge pull request #91 from H2-invent/feature/selfsubscription

Feature/selfsubscription

assets/css/app.scss

@@ -0,0 +1,19 @@
+@import "~bootstrap/dist/css/bootstrap.min.css";
+@import "~bootstrap/dist/css/bootstrap.min.css";
+@import '~@fortawesome/fontawesome-free/css/all.css';
+@import '~mdbootstrap/css/bootstrap.css';
+@import '~mdbootstrap/css/mdb.css';
+@import "~flatpickr/dist/flatpickr.min.css";
+@import "~jquery-confirm/css/jquery-confirm.css";
+@import '~h2-invent-apps/css/h2-invent-apps.css';
+@import '~@fullcalendar/common/main.css';
+@import '~@fullcalendar/daygrid/main.css';
+
+
+@import "./helper/variables";
+@import "./layout/fonts";
+
+@import "./layout/main";
+@import "./layout/header";
+@import "./layout/navbar";
+

assets/css/helper/_variables.scss

@@ -0,0 +1,11 @@
+$main-color: rgb(0, 88, 176);
+$main-color-hover: rgb(0, 158, 251);
+$main-color-activ: rgb(179, 230, 255);
+$sec-color: rgb(245, 26, 32);
+$sec-color-hover: rgb(201, 2, 0);
+$sec-color-activ: rgb(244, 105, 104);
+$contrast-base: rgb(85, 83, 80);
+$contrast-dark: rgb(23, 21, 18);
+$contrast-light: rgb(144, 142, 140);
+$contrast-extra-light: rgb(255, 255, 255);
+$contrast-white: rgb(253, 253, 253);

assets/css/layout/_fonts.scss

@@ -0,0 +1,13 @@
+/* poppins-regular - latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../../../public/fonts/poppins-v9-latin-regular.eot'); /* IE9 Compat Modes */
+  src: local('Poppins Regular'), local('Poppins-Regular'),
+  url('../../../public/fonts/poppins-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('../../../public/fonts/poppins-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+  url('../../../public/fonts/poppins-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
+  url('../../../public/fonts/poppins-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+  url('../../../public/fonts/poppins-v9-latin-regular.svg#Poppins') format('svg'); /* Legacy iOS */
+}

assets/css/layout/_header.scss

@@ -0,0 +1,233 @@
+
+/* ---------------------------------------------------
+    CONTENT STYLE
+----------------------------------------------------- */
+
+
+
+/* ---------------------------------------------------
+    MEDIAQUERIES
+----------------------------------------------------- */
+
+@media (max-width: 1500px) {
+  #sidebar {
+    margin-left: -250px;
+  }
+
+  #sidebar.active {
+    margin-left: 0;
+  }
+
+  #sidebarCollapse span {
+    display: none;
+  }
+}
+
+
+/* ---------------------------------------------------
+    Add Reuqired Symbole to Forms
+----------------------------------------------------- */
+
+label.required:after {
+  content: " *";
+}
+
+
+/* ---------------------------------------------------
+    Add Sticky Footer
+    id="content" need padding-bottom and the size of the footer
+----------------------------------------------------- */
+
+#mainContent {
+  position: relative;
+  min-height: 100%;
+  height: auto !important;
+  height: 100%;
+  background-color: whitesmoke
+}
+
+#footer {
+  position: absolute;
+  bottom: 0px;
+}
+
+
+
+
+
+#snackbar {
+  visibility: hidden;
+  width: 100%;
+
+  background-color: #4b515d;
+  color: #fff;
+  text-align: center;
+  border-radius: 2px;
+  padding: 16px;
+  position: fixed;
+  z-index: 1;
+  right: 0;
+  bottom: 0;
+  font-size: 17px;
+}
+
+#snackbar.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+@-webkit-keyframes fadein {
+  from {
+    bottom: 0;
+    opacity: 0;
+  }
+  to {
+    bottom: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes fadein {
+  from {
+    bottom: 0;
+    opacity: 0;
+  }
+  to {
+    bottom: 0;
+    opacity: 1;
+  }
+}
+
+@-webkit-keyframes fadeout {
+  from {
+    bottom: 0;
+    opacity: 1;
+  }
+  to {
+    bottom: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes fadeout {
+  from {
+    bottom: 0;
+    opacity: 1;
+  }
+  to {
+    bottom: 0;
+    opacity: 0;
+  }
+}
+
+.dropdown-toggle::after {
+  content: none !important;
+}
+
+
+.headerBorder:hover {
+  animation-play-state: paused;
+}
+
+
+/* MDB Scrollbar */
+.scrollbar-deep-purple::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: transparent;
+  border-radius: 10px;
+}
+
+.scrollbar-deep-purple::-webkit-scrollbar {
+  width: 12px;
+  background-color: transparent;
+}
+
+.scrollbar-deep-purple::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+  background-color: $main-color;
+}
+
+.scrollbar-deep-purple {
+  scrollbar-color: $main-color;
+}
+
+
+.bordered-deep-purple::-webkit-scrollbar-track {
+  -webkit-box-shadow: none;
+  border: 1px solid $main-color;
+}
+
+.bordered-deep-purple::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: none;
+}
+
+
+.thin::-webkit-scrollbar {
+  width: 10px;
+}
+
+@media only screen and (min-width: 992px){
+  .hide {
+    display: flex;
+    flex-direction: row!important;
+    justify-content: flex-end!important;
+    align-items: center;
+  }
+
+  .triggerHide:hover .element {
+    visibility: visible;
+    opacity: 1;
+    transition: visibility 0s linear 0s, opacity 500ms;
+  }
+  .triggerHide .element {
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0s linear 0s, opacity 500ms;
+  }
+
+}
+.hide{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+}
+.caretdown[aria-expanded="false"]:before{
+  margin-right: 4px;
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content: "\f0d7";;
+}
+.caretdown[aria-expanded="true"]:before{
+  margin-right: 4px;
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  content: "\f0d8";;
+}
+.iconSytle{
+  max-height: 25px;
+}
+
+.iconSytle:Hover {
+  webkit-filter: drop-shadow(2px 2px 3px #9C9C9C);
+  filter: drop-shadow(2px 2px 3px #9c9c9c);
+}
+
+@media only screen and (min-width: 768px) {
+  .iconSytle {
+    max-height: 30px;
+  }
+}
+.breakWord{
+  word-break: break-all;
+  padding-right: 5px;
+}
+.noBreak{
+  white-space: nowrap;
+}
+#modalAdressbook a[aria-expanded="true"] {
+  background: white;
+}

assets/css/layout/_main.scss

@@ -0,0 +1,74 @@
+/* ---------------------------------------------------
+    Body Config
+----------------------------------------------------- */
+body {
+  font-family: 'Poppins';
+}
+
+/* ---------------------------------------------------
+    Paragraph Setting
+----------------------------------------------------- */
+p {
+  font-family: 'Poppins';
+  font-size: 1.1em;
+  font-weight: 300;
+  line-height: 1.7em;
+  color: #000;
+}
+
+/* ---------------------------------------------------
+    Define Links
+----------------------------------------------------- */
+a {
+  color: $contrast-dark;
+
+  &:hover {
+    color: $main-color;
+  }
+
+  &:focus {
+    color: $main-color-hover;
+    text-decoration: none;
+    transition: all 0.3s;
+  }
+
+}
+
+/* ---------------------------------------------------
+    Base Line
+----------------------------------------------------- */
+.line {
+  width: 100%;
+  height: 1px;
+  border-bottom: 1px dashed #ddd;
+  margin: 40px 0;
+}
+
+/* ---------------------------------------------------
+    Content
+----------------------------------------------------- */
+#content {
+  width: 100%;
+  padding: 20px;
+  min-height: 100vh;
+  transition: all 0.3s;
+  position: absolute;
+  padding-bottom: 80px;
+  top: 0;
+  right: 0;
+}
+
+/* ---------------------------------------------------
+    Custom Buttons
+----------------------------------------------------- */
+.btn-primary {
+  background-color: $main-color !important;
+}
+
+.btn-secondary {
+  background-color: $sec-color !important;
+}
+
+.btn-info {
+  background-color: $contrast-dark !important;
+}

assets/css/layout/_navbar.scss

@@ -0,0 +1,22 @@
+.navbar {
+  padding: 15px 10px;
+  background: #fff;
+  border: none;
+  border-radius: 0;
+  margin-bottom: 40px;
+}
+
+.navbar-btn {
+  box-shadow: none;
+  outline: none !important;
+  border: none;
+}
+
+.navbar-btn-navigation {
+  background: linear-gradient(90deg, #1CB5E0 0%, #000880 100%);
+  color: #fff;
+
+  &:hover {
+    color: #efefef !important;
+  }
+}

assets/css/static.css

@@ -0,0 +1,9 @@
+@import "~bootstrap/dist/css/bootstrap.min.css";
+@import '~@fortawesome/fontawesome-free/css/all.css';
+@import '~mdbootstrap/css/bootstrap.css';
+@import '~mdbootstrap/css/mdb.css';
+@import "~flatpickr/dist/flatpickr.min.css";
+@import "~jquery-confirm/css/jquery-confirm.css";
+@import '~h2-invent-apps/css/h2-invent-apps.css';
+@import '~@fullcalendar/common/main.css';
+@import '~@fullcalendar/daygrid/main.css';