convert admin template into go template

static/admin/scss/components/_badges.scss

@@ -0,0 +1,19 @@
+/* Badges */
+
+.badge {
+  border-radius: 0;
+  font-size: 12px;
+  line-height: 1;
+  padding: .375rem .5625rem;
+  font-weight: normal;
+  &.badge-pill {
+    border-radius: 10rem;
+  }
+}
+
+/*Badge outlined variations*/
+@each $color, $value in $theme-colors {
+  .badge-outline-#{$color} {
+    @include badge-outline-variations($value);
+  }
+}

static/admin/scss/components/_bootstrap-progress.scss

@@ -0,0 +1,22 @@
+/* Bootstrap Progress */
+
+.progress {
+  @include border-radius(0px);
+  height: 8px;
+  .progress-bar {
+    @include border-radius(0px);
+  }
+
+  &.progress-sm{
+    height: 0.375rem;
+  }
+  &.progress-md {
+    height: 11px;
+  }
+  &.progress-lg {
+    height: 15px;
+  }
+  &.progress-xl {
+    height: 18px;
+  }
+}

static/admin/scss/components/_buttons.scss

@@ -0,0 +1,81 @@
+/* Buttons */
+
+.btn {
+  font-size: $btn-font-size;
+  line-height: 1;
+  font-weight: 400;
+  i {
+    font-size: 1rem;
+  }
+  &.btn-rounded {
+    @include border-radius(50px);
+  }
+  &.btn-sm {
+    font-size: $btn-font-size-sm;
+    padding: 1.25rem 1rem;
+  }
+  &.btn-lg {
+    font-size: $btn-font-size-lg;
+    padding: 1.375rem 3.4rem;
+  }
+  &.btn-xs {
+    padding: $btn-padding-y-xs $btn-padding-x-xs;
+    font-size: $btn-font-size-xs;
+  }
+  /* Buttons with only icons */
+  &.btn-icon {
+    width: 42px;
+    height: 42px;
+    padding: 0;
+  }
+  /* Buttons with icon and text */
+  &.btn-icon-text {
+    .btn-icon-prepend {
+      margin-right: .5rem;
+    }
+    .btn-icon-append {
+      margin-left: .5rem;
+    }
+  }
+  &.btn-social-icon {
+    width: 50px;
+    height: 50px;
+    padding: 0;
+  }
+}
+
+.btn-group {
+  .btn {
+    + .btn {
+      border-left: 0;
+    }
+  }
+}
+
+.btn-toolbar {
+  .btn-group {
+    +.btn-group {
+      @extend .ms-2;
+    }
+  }
+}
+/*social buttons*/
+@each $color, $value in $social-colors {
+  .btn-#{$color} {
+    @include social-button(social-color($color));
+  }
+  .btn-outline-#{$color} {
+    @include social-outline-button(social-color($color));
+  }
+}
+/* inverse buttons */
+@each $color, $value in $theme-colors {
+  .btn-inverse-#{$color} {
+    @include button-inverse-variant($value);
+  }
+}
+
+.btn-outline-light {
+  color: #6c7383;
+  border-color: #e3e3e3;
+}

static/admin/scss/components/_cards.scss

@@ -0,0 +1,102 @@
+/* Cards */
+
+.card {
+  box-shadow: $card-box-shadow;
+  -webkit-box-shadow: $card-box-shadow;
+  -moz-box-shadow: $card-box-shadow;
+  -ms-box-shadow: $card-box-shadow;
+  .card-body {
+    padding: $card-padding-y $card-padding-x;
+    + .card-body {
+      padding-top: 1rem;
+    }
+  }
+  .card-title {
+    color: $card-title-color;
+    margin-bottom: 1.2rem;
+    text-transform: uppercase;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+  .card-subtitle {
+    @extend .text-gray;
+    font-weight: 400;
+    margin-top: 0.625rem;
+    margin-bottom: 0.625rem;
+  
+  }
+  .card-description {
+    margin-bottom: .875rem;
+    font-weight: 400;
+    color: $card-description-color;
+  }
+  &.card-outline-success {
+		border: 1px solid theme-color("success");
+	}
+	&.card-outline-primary {
+		border: 1px solid theme-color("primary");
+	}
+	&.card-outline-warning {
+		border: 1px solid theme-color("warning");
+	}
+	&.card-outline-danger {
+		border: 1px solid theme-color("danger");
+	}
+	&.card-rounded {
+		@include border-radius(5px);
+	}
+
+  &.card-faded {
+    background: #b5b0b2;
+    border-color: #b5b0b2;
+  }
+  &.card-circle-progress {
+    color: $white;
+    text-align: center;
+  }
+  &.card-img-holder {
+    position: relative;
+    .card-img-absolute {
+      position: absolute;
+      top:0;
+      right: 0;
+      height: 100%;
+    }
+  }
+  &.card-weather {
+    .weather-daily {
+      .weather-day {
+        opacity: .5;
+        font-weight: 900;
+      }
+      i {
+        font-size: 20px;
+      }
+      .weather-temp {
+        margin-top: .5rem;        
+        margin-bottom: 0;
+        opacity: .5;
+        font-size: .75rem;
+      }
+    }
+  }
+}
+
+@media (min-width: 576px) {
+  .card-columns {
+    column-count: 3;
+    column-gap: 1.25rem;
+    orphans: 1;
+    widows: 1;
+    .card {
+      display: inline-block;
+      width: 100%;
+      margin-bottom: 0.75rem;
+    }
+  }
+}
+@each $color, $value in $theme-colors {
+  .card-inverse-#{$color} {
+    @include card-inverse-variant(rgba($value, .2), theme-color-level($value, 1), theme-color-level($value, 3));
+  }
+}

static/admin/scss/components/_checkbox-radio.scss

@@ -0,0 +1,235 @@
+/* Checkboxes and Radios */
+
+.form-check {
+  position: relative;
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding-left: 0;
+
+  .form-check-label {
+    min-height: 18px;
+    display: block;
+    margin-left: 1.75rem;
+    font-size: $default-font-size;
+    line-height: 1.5;
+    .rtl & {
+      margin-left: 0;
+      margin-right: 1.75rem;
+    }
+
+    input {
+      position: absolute;
+      top: 0;
+      left: 0;
+      .rtl & {
+        left: auto;
+        right: 0;
+      }
+      margin-left: 0;
+      margin-top: 0;
+      z-index: 1;
+      cursor: pointer;
+      opacity: 0;
+      filter: alpha(opacity=0);
+    }
+    input[type="checkbox"] {
+      + .input-helper {
+        &:before,
+        &:after {
+          position: absolute;
+          top: 0;
+          left: 0;
+          .rtl & {
+            left: auto;
+            right: 0;
+          }
+        }
+        &:before {
+          content: "";
+          width: 18px;
+          height: 18px;
+          border-radius: 2px;
+          border: solid $primary;
+          border-width: 2px;
+          @include transition(all);
+          transition-duration: 0s;
+          -webkit-transition-duration: 250ms;
+          transition-duration: 250ms;
+        }
+  
+        &:after {
+          @include transition(all);
+          transition-duration: 0s;
+          -webkit-transition-duration: 250ms;
+          transition-duration: 250ms;
+          font-family: themify;
+          opacity: 0;
+          filter: alpha(opacity=0);
+          -webkit-transform: scale(0);
+          -ms-transform: scale(0);
+          -o-transform: scale(0);
+          transform: scale(0);
+          content: '\e64c';
+          font-size: .9375rem;
+          font-weight: bold;
+          color: $white;
+        }
+      }
+      &:checked {
+        +.input-helper {
+          &:before {
+            background: $primary;
+            border-width: 0;
+          }
+          &:after {
+            width: 18px;
+            opacity: 1;
+            line-height: 18px;
+            filter: alpha(opacity=100);
+            -webkit-transform: scale(1);
+            -ms-transform: scale(1);
+            -o-transform: scale(1);
+            transform: scale(1);
+          }
+        }
+      }
+
+      &:disabled {
+        + .input-helper {
+          &:before {
+            border-color: $border-color;
+          }
+        }
+
+        &:checked {
+          + .input-helper {
+            &:after {
+              background: $border-color;
+              color: $white;
+            }
+          }
+        }
+      }
+    }
+    input[type="radio"] {
+      +.input-helper {
+        &:before {
+          position: absolute;
+          content: "";
+          top: 0;
+          left: 0;
+          .rtl & {
+            left: auto;
+            right: 0;
+          }
+          border: solid $primary;
+          border-width: 2px;
+          width: 20px;
+          height: 20px;
+          border-radius: 50%;
+          @include transition(all);
+          transition-duration: 0s;
+          -webkit-transition-duration: 250ms;
+          transition-duration: 250ms;
+        }
+
+        &:after {
+          content: "";
+          width: 8px;
+          height: 8px;
+          background: $white;
+          border-radius: 50%;
+          top: 6px;
+          left: 6px;
+          .rtl & {
+            left: auto;
+            right: 6px;
+          }
+          -webkit-transition: all;
+          -o-transition: all;
+          transition: all;
+          transition-duration: 0s;
+          -webkit-transition-duration: 250ms;
+          transition-duration: 250ms;
+          opacity: 0;
+          filter: alpha(opacity=0);
+          -webkit-transform: scale(0);
+          -ms-transform: scale(0);
+          -o-transform: scale(0);
+          transform: scale(0);
+          position: absolute;
+        }
+      }
+
+      &:checked {
+        +.input-helper {
+          &:before {
+            background: $primary;
+            border-width: 0;
+          }
+
+          &:after {
+            opacity: 1;
+            line-height: 1.5;
+            filter: alpha(opacity=100);
+            -webkit-transform: scale(1);
+            -ms-transform: scale(1);
+            -o-transform: scale(1);
+            transform: scale(1);
+          }
+        }
+      }
+
+      &:disabled {
+        + .input-helper {
+          &:before {
+            border-color: $border-color;
+          }
+        }
+
+        &:checked {
+          + .input-helper {
+            &:before {
+              background: $border-color;
+            }
+
+            &:after {
+              background: $white;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .form-check-#{$color} {
+    &.form-check {
+      label {
+        input[type="checkbox"],
+        input[type="radio"] {
+          +.input-helper {
+            &:before {
+              border-color: theme-color($color);
+            }
+          }
+          &:checked {
+            +.input-helper {
+              &:before {
+                background: $value;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 576px) {
+  .form-inline .form-check {
+
+  }
+}

static/admin/scss/components/_dropdown.scss

@@ -0,0 +1,33 @@
+/* Dropdowns */
+
+.dropdown {
+  .dropdown-toggle {
+    &:after {
+      border-top: 0;
+      border-right: 0;
+      border-left: 0;
+      border-bottom: 0;
+      font: normal normal normal 24px/1 "themify";
+      content: "\e64b";  
+      width: auto;
+      height: auto;
+      vertical-align: middle;
+      line-height: .625rem;
+      font-size: .875rem;
+      margin-left: .3rem;
+    }
+  }
+  .dropdown-menu {
+    margin-top: 0;
+    font-size: $default-font-size;
+    box-shadow: 0px 1px 15px 1px rgba(230, 234, 236, 0.35); 
+    border-radius: 0;   
+    .dropdown-item {
+      font-size: .875rem;
+      padding: .25rem 1.5rem;
+      &:active {
+        background: initial;
+      }
+    }
+  }
+}

static/admin/scss/components/_forms.scss

@@ -0,0 +1,62 @@
+/* Forms */
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+.input-group-append,
+.input-group-prepend {
+  color: $input-placeholder-color;
+  width: auto;
+  border: none;
+
+  .input-group-text {
+    border-color: $border-color;
+    padding: 1.25rem .75rem;
+    color: $input-placeholder-color;
+  }
+}
+.form-control {
+  border: 1px solid $border-color;
+  font-weight: 400;
+  font-size: $input-font-size;
+}
+
+select {
+  &.form-control {
+    padding: .4375rem .75rem;
+    border: 0;
+    outline: 1px solid $border-color;
+    color: $input-placeholder-color;
+    &:focus {
+      outline: 1px solid $border-color;
+    }
+    @each $color, $value in $theme-colors {
+      &.border-#{$color} {
+        outline: 1px solid $value;
+        &:focus {
+          outline: 1px solid $value;
+        }
+      }
+    }
+  }
+}
+.form-group {
+  label {
+    font-size: $default-font-size;
+    line-height: 1.4rem;
+    vertical-align: top;
+    margin-bottom: .5rem;
+  }
+  &.has-danger {
+    .form-control {
+      border-color: $danger;
+    }
+  }
+  .file-upload-default {
+    visibility: hidden;
+    position: absolute;
+  }
+  .file-upload-info {
+    background: transparent;
+  }
+}

static/admin/scss/components/_icons.scss

@@ -0,0 +1,46 @@
+/* Icons */
+
+.icons-list {
+  border-left: 1px solid $border-color;
+  border-top: 1px solid $border-color;
+  >div {
+    background: $white;
+    border-bottom: 1px solid $border-color;
+    border-right: 1px solid $border-color;
+    @include display-flex;
+    @include align-items(center);
+    padding:15px 15px;
+    font-weight: 400;
+    font-size: $default-font-size;
+
+    i {
+      display: inline-block;
+      font-size: 20px;
+      width: 40px;
+      text-align: left;
+      color: $primary;
+    }
+  }
+}
+
+.icon-in-bg {
+  width: 55px;
+  height: 55px;
+  text-align: center;
+  @include display-flex();
+  @include align-items(center);
+  @include justify-content(center);
+}
+
+.icon-lg {
+  font-size: 2.875rem;
+}
+
+
+.icon-md {
+  font-size: 2rem;
+}
+
+.icon-sm {
+  font-size: 1rem;
+}

static/admin/scss/components/_lists.scss

@@ -0,0 +1,55 @@
+/* Lists */
+
+ul,
+ol,
+dl {
+  padding-left: 1rem;
+  font-size: $default-font-size;
+  li {
+    line-height: 1.8;
+  }
+}
+
+.list-ticked,
+.list-arrow,
+.list-star {
+  list-style: none;
+  padding: 0;
+  li {
+    padding-left: 1.5rem;
+    &:before {
+      font-family: "themify";
+      margin-left: -1.5rem;
+      width: 1.5rem;
+      margin-right: .5rem;
+      font-size: .6rem;
+    }
+  }
+}
+
+.list-ticked {
+  li {
+    &:before {
+      content: '\e64c';
+      color: $danger;
+    }
+  }
+}
+
+.list-arrow {
+  li {
+    &:before {
+      content: '\e649';
+      color: $success;
+    }
+  }
+}
+
+.list-star {
+  li {
+    &:before {
+      content: '\e60a';
+      color: $warning;
+    }
+  }
+}

static/admin/scss/components/_tables.scss

@@ -0,0 +1,59 @@
+/* Tables */
+
+.table {
+  margin-bottom: 0;
+  thead {
+    th {
+      border-top: 0;
+      border-bottom-width: 1px;
+      font-weight: bold;
+      font-size: .875rem;
+      i {
+        margin-left: 0.325rem;
+      }
+    }
+  }
+  th,
+  td {
+    vertical-align: middle;
+    line-height: 1;
+    white-space: nowrap;
+    padding: $table-cell-padding;
+  }
+  td {
+    font-size: $default-font-size;
+    img {
+      width: 36px;
+      height: 36px;
+      border-radius: 100%;
+    }
+    .badge {
+      margin-bottom: 0;
+    }
+  }
+  &.table-borderless {
+    border: none;
+    tr,
+    td,
+    th {
+      border: none;
+    }
+  }
+  &.table-bordered {
+    border-top: 1px solid $border-color;
+  }
+  &.table-hover {
+    thead,
+      tbody {
+        tr {
+          cursor: pointer;
+        }
+      }
+  }
+}
+.table > :not(:last-child) > :last-child > *, .jsgrid .jsgrid-table > :not(:last-child) > :last-child > * {
+  border-bottom-color: $border-color;
+}
+.table > :not(:first-child), .jsgrid .jsgrid-table > :not(:first-child) {
+  border-top: none;
+}

static/admin/scss/components/_todo-list.scss

@@ -0,0 +1,86 @@
+/* Tabs */
+
+.add-items {
+  margin-bottom: 1.5rem;
+  overflow: hidden;
+  input[type="text"] {
+    width: 100%;
+    background: transparent;
+    @include placeholder {
+      font-size: 1rem;
+      color: #9b9b9b;
+    }
+  }
+  .btn {
+    margin-left: .5rem;
+    i {
+      font-size: 2.25rem;
+    }
+    .rtl & {
+      margin-left: auto;
+      margin-right: .5rem;
+    }
+  }
+}
+
+.list-wrapper {
+  height: 100%;
+  max-height: 361px;
+  overflow: scroll;
+  ul {
+    padding: 0;
+    text-align: left;
+    list-style: none;
+    margin-bottom: 0;
+    li {
+      @extend .d-flex;
+      @extend .align-items-center;
+      @extend .justify-content-start;
+      font-size: .9375rem;
+      padding: 1.063rem 0rem;
+      border-bottom: 1px solid $border-color;
+      .form-check{
+        @extend %ellipsor;
+        max-width: 90%;
+        margin-top: .25rem;
+        margin-bottom: .25rem;
+        .form-check-label{
+          @extend%ellipsor;
+        }
+      }
+    }
+  }
+
+  input[type="checkbox"] {
+    margin-right: 15px;
+  }
+
+  .remove {
+    @extend .ms-auto;
+    @extend .text-secondary;
+    .rtl & {
+      @extend .ms-0;
+      @extend .me-auto;
+    }
+    cursor: pointer;
+    font-size: 1.1rem;
+    font-weight: 600;
+    width: 1.25rem;
+    height: 1.25rem;
+    line-height: 1.25rem;
+    text-align: center;
+    &:hover {
+      @extend .text-danger;
+    }
+  }
+
+  .completed {
+    .form-check {
+      text-decoration: line-through;
+      text-decoration-color: $black;
+    }
+    .remove {
+      @extend .text-primary;
+    }
+  }
+}