@hashtagcms/admin-ui-kit 1.0.6

package/packages/styles/src/_badges.scss

@@ -0,0 +1,34 @@
+// Custom Badge Colors (BS4 compatibility)
+.badge-primary {
+  background-color: $badge-primary;
+}
+
+.badge-secondary {
+  background-color: $badge-secondary;
+}
+
+.badge-success {
+  background-color: $badge-success;
+}
+
+.badge-danger {
+  background-color: $badge-danger;
+}
+
+.badge-warning {
+  background-color: $badge-warning;
+  color: #212529;
+}
+
+.badge-info {
+  background-color: $badge-info;
+}
+
+.badge-light {
+  background-color: $badge-light;
+  color: #212529;
+}
+
+.badge-dark {
+  background-color: $badge-dark;
+}

package/packages/styles/src/_category-list.scss

@@ -0,0 +1,14 @@
+.category-items li {
+  .icon-btn {
+    display: none;
+  }
+
+  &:hover {
+    background-color: #f2f2f2;
+    .icon-btn {
+      display: inline-block;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+}

package/packages/styles/src/_common.scss

@@ -0,0 +1,163 @@
+@use "sass:math";
+
+a:hover {
+  color: $highlight;
+}
+
+nav {
+  font-size: 0.8rem;
+  select {
+    font-size: 0.8rem;
+  }
+  a img.cms-logo {
+    margin-bottom: 3px;
+  }
+}
+.hide {
+  display: none;
+}
+.pos-absolute {
+  position: absolute;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.select-sm {
+  width: auto;
+}
+.btn-from-submit {
+  min-width: 100px;
+}
+legend {
+  float: none;
+  width: auto;
+  padding: 0 10px;
+}
+
+.new {
+  font-size: 8px;
+  background-color: deeppink;
+  color: #fff;
+  padding: 2px;
+  position: relative;
+  top: -2px;
+}
+
+.v-space {
+  margin: 20px 0 0 0;
+}
+
+.counters {
+  position: relative;
+  top: 12px;
+  padding-left: 20px;
+}
+
+.admin-form {
+  padding: 10px 30px;
+}
+
+.center-align {
+  float: none;
+  text-align: center;
+}
+
+.border-bottom {
+  border-bottom: 1px solid #c3c3c3;
+}
+
+.hand {
+  cursor: pointer;
+}
+
+/****** Module Creator *********/
+
+.select-big {
+  margin-bottom: 8px;
+}
+
+.pl20 {
+  padding-left: 20px;
+}
+
+.normal {
+  font-weight: normal !important;
+}
+
+.pb5 {
+  padding-bottom: 5px;
+}
+
+.ptb5 {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.p5 {
+  padding: 5px;
+}
+
+.plr5 {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.imgHeightFix img {
+  height: 100%;
+}
+
+.imgWidthFix img {
+  width: 100%;
+}
+
+.head_action {
+  padding-right: 20px !important;
+}
+
+.left-zero {
+  padding-left: 0 !important;
+}
+
+.is-invalid {
+  border-color: maroon;
+}
+
+.clearboth {
+  clear: both;
+}
+
+.panel .panel-footer {
+  min-height: 33px;
+}
+
+.strong {
+  font-weight: bold;
+}
+
+.form-control {
+  &.select {
+    width: inherit;
+    display: inline-block;
+  }
+}
+
+.fixed {
+  position: fixed;
+}
+
+.width-auto {
+  width: auto;
+}
+.inline {
+  display: inline;
+}
+
+.width30percent {
+  width: 30%;
+}
+
+.width40percent {
+  width: 40%;
+}

package/packages/styles/src/_info-box.scss

@@ -0,0 +1,96 @@
+.info-box {
+  min-width: 150px;
+
+  &:hover {
+    border: 1px solid #9d9d9d;
+  }
+
+  .info-box-icon {
+    display: block;
+    text-align: center;
+    font-size: 37px;
+    background: #fff;
+    padding: 20px;
+  }
+
+  .info-box-number {
+    display: block;
+    font-weight: bold;
+    font-size: 18px;
+  }
+
+  .info-box-text {
+    display: block;
+    text-align: center;
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+  }
+}
+
+.color-1 {
+  background: deeppink !important;
+  color: white !important;
+}
+
+.color-2 {
+  background: deepskyblue !important;
+  color: white !important;
+}
+
+.color-3 {
+  background: darkgreen !important;
+  color: white !important;
+}
+
+.color-4 {
+  background: coral !important;
+  color: white !important;
+}
+
+.color-5 {
+  background: darkmagenta !important;
+  color: white !important;
+}
+
+.color-6 {
+  background: darkblue !important;
+  color: white !important;
+}
+
+.color-7 {
+  background: darkcyan !important;
+  color: white !important;
+}
+
+.color-8 {
+  background: darkolivegreen !important;
+  color: white !important;
+}
+
+.color-9 {
+  background: darkgoldenrod !important;
+  color: white !important;
+}
+
+.color-10 {
+  background: darkslateblue !important;
+  color: white !important;
+}
+.color-1,
+.color-2,
+.color-3,
+.color-4,
+.color-5,
+.color-6,
+.color-7,
+.color-8,
+.color-9,
+.color-10 {
+  a,
+  a:visited {
+    color: white;
+  }
+}

package/packages/styles/src/_left-nav.scss

@@ -0,0 +1,59 @@
+/***** Menu *********/
+.t_left {
+  font-size: 0.8rem;
+  background: $left-background;
+  color: white;
+  padding: 0;
+  box-shadow:
+    0 5px 15px 1px rgba(0, 0, 0, 0.2),
+    0 0 200px 1px rgba(255, 255, 255, 0.2);
+
+  .fa-icons {
+    padding-right: 5px;
+  }
+  a {
+    color: white;
+    display: block;
+    text-decoration: none;
+    padding: 5px 10px;
+  }
+
+  a:hover {
+    background: $highlight;
+  }
+
+  .adjustMore {
+    font-size: 0.7rem;
+    padding: 8px 15px;
+    position: relative;
+    top: -5px;
+    right: -10px;
+  }
+
+  a.active {
+    background: $left-nav-a-active-bg;
+    color: $left-nav-a-active-color;
+    border-bottom: 0 solid #c3c3c3;
+  }
+
+  ul ul li a {
+    color: $left-nav-sub-a-active-color;
+    transition: all 0.15s;
+    padding-left: 25px;
+    &:hover {
+      background: $highlight;
+    }
+    &.active {
+      background: $left-nav-sub-a-active-bg;
+    }
+  }
+
+  ul ul {
+    display: none;
+
+    &.active {
+      display: block;
+      background: $left-background-sub;
+    }
+  }
+}

package/packages/styles/src/_loader.scss

@@ -0,0 +1,82 @@
+@use "sass:math";
+$spinnerColors: #84ebbd, #4977ec, #f6bb67, #333841;
+$spinnerDegree: 175.6449737548828;
+
+.loaderModal {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0.2;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1999;
+}
+
+.loaderPanel {
+  border: 1px solid #c3c3c3;
+  display: inline-block;
+  padding: 5px;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  background: #fff;
+  z-index: 2000;
+
+  .loaderText {
+    display: inline-block;
+    position: relative;
+    top: -10px;
+    padding-left: 10px;
+  }
+
+  .spinner {
+    width: 30px;
+    height: 30px;
+    display: inline-block;
+    animation: contanim 2s linear infinite;
+
+    svg {
+      width: 100%;
+      height: 100%;
+
+      left: 0;
+      top: 0;
+      position: absolute;
+
+      transform: rotate(-90deg);
+
+      @for $i from 1 through 4 {
+        &:nth-child(#{$i}) circle {
+          stroke: nth($spinnerColors, $i);
+          stroke-dasharray: 1, 300;
+          stroke-dashoffset: 0;
+
+          animation: strokeanim 3s calc(0.2s * (#{$i})) ease infinite;
+          transform-origin: center center;
+        }
+      }
+    }
+  }
+}
+
+@keyframes strokeanim {
+  0% {
+    stroke-dasharray: 1, 300;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 120, 300;
+    stroke-dashoffset: math.div(-$spinnerDegree, 3);
+  }
+  100% {
+    stroke-dasharray: 120, 300;
+    stroke-dashoffset: -$spinnerDegree;
+  }
+}
+
+@keyframes contanim {
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/packages/styles/src/_menu-sorter.scss

@@ -0,0 +1,39 @@
+.sortable-list {
+  padding: 0;
+  margin: 0;
+
+  li {
+    list-style: none none;
+    border: 1px solid #c3c3c3;
+    padding: 5px;
+    margin: 3px 0;
+    border-radius: 3px;
+
+    .ellipsis {
+      width: 12px;
+      text-align: center;
+      padding: 3px 0;
+    }
+
+    &:hover {
+      background-color: #f9f9f9;
+    }
+
+    .child {
+      display: none;
+      background: #f2f2f2;
+    }
+  }
+}
+.accordion-control,
+.accordion-body {
+  display: none;
+}
+
+.accordion-control {
+  &:checked {
+    ~ .accordion-body {
+      display: block !important;
+    }
+  }
+}

package/packages/styles/src/_model-creator.scss

@@ -0,0 +1,48 @@
+.fieldset {
+  margin-bottom: 20px;
+  border: 1px double #c3c3c3;
+  padding: 10px;
+}
+
+.legendTitle {
+  font-weight: bold;
+  border: none 0;
+  margin-bottom: 10px;
+}
+
+.fields,
+.models {
+  background: #f7ecb5;
+  padding: 5px;
+  margin-right: 15px;
+  border: 1px solid #c3c3c3;
+  position: relative;
+  display: inline-block;
+  margin-bottom: 10px;
+}
+
+.models:hover,
+.fields:hover {
+  color: #000;
+}
+
+.models .glyphicon,
+.fields .fa {
+  float: right;
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.models_row {
+  margin-bottom: 10px;
+}
+.tables_panel {
+  max-height: 300px;
+  overflow: auto;
+}
+.models-box {
+  width: 19rem;
+}

package/packages/styles/src/_module-permission.scss

@@ -0,0 +1,25 @@
+.list-permission {
+  li {
+    border-bottom: 1px solid #c3c3c3;
+
+    &:hover {
+      background-color: #f2f2f2;
+
+      .readonly {
+        display: block;
+      }
+    }
+
+    ul {
+      margin-bottom: 5px;
+
+      li {
+        border: 0px none;
+      }
+    }
+
+    .readonly {
+      display: none;
+    }
+  }
+}

package/packages/styles/src/_page-manager.scss

@@ -0,0 +1,63 @@
+.non-selectable {
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.js_right_panel {
+  font-size: 0.8rem;
+}
+.hook-header {
+  color: #3c763d;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+
+  a,
+  a:visited {
+    color: #3c763d;
+  }
+}
+
+.modules-list {
+  padding: 0;
+  margin: 0;
+  li {
+    list-style-type: none;
+    border: 1px dotted #c3c3c3;
+    padding: 5px;
+    margin: 3px 0;
+    border-radius: 3px;
+
+    .delete {
+      display: none;
+    }
+
+    a {
+      color: #666;
+    }
+
+    .fa {
+      margin-top: 3px;
+    }
+
+    &:hover {
+      background-color: #f2f2f2;
+
+      .delete {
+        display: inline-block;
+      }
+    }
+  }
+}
+
+.all-modules-right li {
+  &:hover {
+    .delete {
+      display: none;
+    }
+  }
+}
+
+.module-drop-eager {
+  background-color: lightyellow;
+  padding-bottom: 30px;
+}

package/packages/styles/src/_popover-modal.scss

@@ -0,0 +1,20 @@
+/** Popover **/
+.popover {
+  .close {
+    background: #666;
+    border-radius: 19%;
+    padding: 5px;
+    font-size: 10px;
+    color: #fff;
+    position: absolute;
+    top: -7px;
+  }
+}
+
+/** Homepage **/
+
+.modal {
+  .select-sm {
+    font-size: 0.8rem;
+  }
+}

package/packages/styles/src/_table-grid.scss

@@ -0,0 +1,39 @@
+.table-grid {
+  font-size: 0.8rem;
+  a,
+  a:visited {
+    border: none;
+    text-decoration: none;
+  }
+
+  td {
+    border: 1px solid #c3c3c3;
+    padding: 0.5rem;
+  }
+
+  .header {
+    font-weight: bold;
+  }
+
+  th {
+    background-color: #f2f2f2 !important;
+    text-transform: uppercase;
+    border: 1px solid #c3c3c3;
+  }
+  .table-links,
+  .table-links:visited {
+    color: inherit;
+  }
+}
+.actions a {
+  color: #636b6f;
+  padding: 10px 3px;
+
+  &:hover {
+    color: maroon;
+  }
+
+  &.approved {
+    color: coral;
+  }
+}

package/packages/styles/src/_toast.scss

@@ -0,0 +1,20 @@
+.toasterHolder {
+  width: auto;
+  min-width: 200px;
+  background: #333333;
+  padding: 10px;
+  text-align: center;
+  float: left;
+  color: #fff;
+  font-size: 11px;
+  letter-spacing: 1px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  z-index: 9999;
+  position: absolute;
+
+  .toasterContent {
+    text-align: center;
+    color: #fff;
+  }
+}