@dejwcake/craftable 0.0.1

package/scss/overrides/_layout.scss

@@ -0,0 +1,47 @@
+body {
+  background-color: #F5F8FF;
+}
+
+main.main {
+  margin-top: 1.5rem;
+}
+
+[v-cloak] {
+  display: none;
+}
+
+.app-footer {
+  background: none;
+  border: none;
+  color: #7e878c;
+  font-size: 13px;
+  margin-top: -1.5rem;
+  a {
+    color: $primary;
+  }
+}
+
+.hidden {
+  display: none;
+}
+
+.hidden-xs-up {
+  display: none;
+}
+
+.width-auto {
+  width: auto;
+}
+
+.breadcrumb {
+  display: none;
+}
+
+@media (min-width: 1200px) {
+  .container-xl {
+    margin-right: auto;
+    margin-left: auto;
+    width: 1140px;
+    max-width: 100%;
+  }
+}

package/scss/overrides/_media-wysiwyg.scss

@@ -0,0 +1,111 @@
+// Write (or import) your styles here
+.trumbowyg-editor table.table td {
+  min-width: unset;
+  display: table-cell;
+}
+
+div.trumbowyg-button-pane {
+  background: #ffffff;
+  border-bottom: 1px solid $mutedText;
+  .trumbowyg-button-group::after {
+    background: rgba(0, 0, 0, 0);
+  }
+}
+div.trumbowyg-box {
+  border: 1px solid $mutedText;
+  &:after {
+    content: '';
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    right: 10px;
+    top: 45px;
+    background-position: center;
+  }
+}
+
+div.trumbowyg-modal-box {
+  .trumbowyg-modal-button {
+    border-radius: 4px;
+    &.trumbowyg-modal-submit {
+      background: $success;
+      &:hover, &:focus {
+        background: darken($success, 10);
+      }
+      &:before {
+        content: '\f00c';
+        font-family: FontAwesome;
+        padding-right: 5px;
+        font-size: 14px;
+      }
+    }
+    &.trumbowyg-modal-reset {
+      background: #fbfbfb;
+      &:hover, &:focus {
+        background: #e6e6e6;
+      }
+      &:before {
+        content: '\f00d';
+        font-family: FontAwesome;
+        padding-right: 5px;
+        font-size: 14px;
+      }
+    }
+
+  }
+  label {
+    overflow: visible;
+    .trumbowyg-input-infos span {
+      color: #555;
+      background: white;
+      border: none;
+    }
+    input {
+      border: 1px solid $mutedText;
+      &:hover, &:focus {
+        border: 1px solid $mutedText;
+        background: white;
+      }
+      &[type="file"] {
+        height: 38px;
+        padding-top: 2px;
+        padding-left: 2px;
+      }
+    }
+  }
+  .trumbowyg-modal-title {
+    background: white;
+  }
+
+}
+
+div.trumbowyg-dropdown button:hover, .trumbowyg-dropdown button:focus {
+  background: rgba(185, 200, 222, 0.18);
+}
+
+div.trumbowyg-dropdown-table table td.active {
+  background-color: $success;
+}
+
+.has-danger {
+  div.trumbowyg-box {
+    border: 1px solid $danger;
+    &:after {
+      background-image: $icon-error;
+    }
+  }
+}
+
+.has-success {
+  div.trumbowyg-box {
+    &:after {
+      background-image: $icon-correct;
+    }
+  }
+}
+
+.wysiwyg-noembed iframe {
+  pointer-events: none;
+}

package/scss/overrides/_modal.scss

@@ -0,0 +1,26 @@
+.v--modal-overlay {
+    z-index: 9999 !important;
+    background-color: rgba(0, 0, 0, .4) !important;
+}
+
+.v--modal-overlay .v--modal-box {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
+}
+
+.modal--translation .v--modal-box {
+    padding: 20px 30px 30px 30px;
+}
+
+.modal-title {
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+.modal-submit {
+    margin-top: 30px;
+    padding: 10px 0;
+}
+
+.loading .v--modal-overlay {
+    display: none;
+}

package/scss/overrides/_multiselect.scss

@@ -0,0 +1,39 @@
+.multiselect__tag-icon:after {
+    color: white !important;
+}
+
+.multiselect__tag-icon:focus,
+.multiselect__tag-icon:hover {
+    background: darken($success, 10) !important;
+}
+
+.multiselect__tag {
+    background: $success !important;
+}
+
+.multiselect__tag-icon {
+    background: $success;
+}
+
+.multiselect__tags {
+    border-radius: 0 !important;
+    border-color: $mutedText !important;
+}
+
+.multiselect__option--highlight {
+    background: $success !important;
+    &:after {
+        background: $success !important;
+    }
+}
+
+.multiselect__input::placeholder {
+    color: $mutedText;
+}
+
+.multiselect__option--selected.multiselect__option--highlight {
+    background: $danger !important;
+    &:after {
+        background: $danger !important;
+    }
+}

package/scss/overrides/_nav.scss

@@ -0,0 +1,87 @@
+.header-fixed .app-header {
+    padding-right: 20px;
+}
+
+.nav .dropdown-menu {
+    border-radius: 0;
+    margin-top: 13px;
+}
+
+.dropdown-menu {
+    border: none;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, .23);
+}
+
+.dropdown-header {
+    background: $primary;
+    color: white;
+    border-bottom: none;
+}
+
+.dropdown-item {
+    border-bottom: 1px solid #F0F2F4;
+}
+
+.dropdown-item.active,
+.dropdown-item:active {
+    color: #263238;
+    text-decoration: none;
+    background-color: white;
+}
+
+.app-header.navbar .navbar-brand {
+    padding: 0.5rem 1rem;
+    color: #4273fa;
+    font-weight: 600;
+    display: inline;
+    width: auto;
+    height: auto;
+    margin-right: 1rem;
+    background: none !important;
+    border: none;
+    img {
+        max-width: 200px;
+        max-height: 20px;
+    }
+}
+
+.dropdown-toggle {
+    box-shadow: none !important;
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+.dropdown .dropdown-menu {
+    display: block;
+    transition: all 300ms ease-in-out;
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(5px);
+}
+
+.open .dropdown-menu {
+    display: block;
+    opacity: 1;
+    pointer-events: all;
+    transform: translateY(-5px);
+}
+
+.app-header.navbar {
+    border-bottom: 1px solid #D6DEE3;
+}
+
+@media (max-width: 991px) {
+    .app-header .navbar-brand {
+        text-align: center;
+    }
+    .avatar-initials {
+        display: none;
+    }
+}
+
+@media (max-width: 600px) {
+    .app-header.navbar .navbar-brand {
+        display: none;
+    }
+}

package/scss/overrides/_notifications.scss

@@ -0,0 +1,7 @@
+.notifications {
+    margin: 10px;
+}
+
+.vue-notification {
+    box-shadow: 0 0 12px #999;
+}

package/scss/overrides/_pagination.scss

@@ -0,0 +1,38 @@
+.pagination {
+    margin-bottom: 28px;
+}
+
+.pagination-caption {
+    position: relative;
+    top: 6px;
+    display: inline-block;
+    margin-bottom: 30px;
+}
+
+.page-item.active .page-link,
+.pagination-datatables li.active .page-link,
+.pagination li.active .page-link,
+.page-item.active .pagination-datatables li a,
+.pagination-datatables li .page-item.active a,
+.pagination-datatables li.active a,
+.page-item.active .pagination li a,
+.pagination li .page-item.active a,
+.pagination li.active a {
+    background-color: $primary;
+    border-color: $primary;
+    &:hover {
+        color: white;
+    }
+}
+
+@media (max-width: 575px) {
+    .pagination-caption {
+        display: block;
+        text-align: center;
+        margin-bottom: 20px;
+        top: 0;
+    }
+    .pagination {
+        justify-content: center;
+    }
+}

package/scss/overrides/_switches.scss

@@ -0,0 +1,23 @@
+.switch-success .switch-input:checked + .switch-slider,
+.switch-success > .switch-input:checked ~ .switch-label {
+  background: $success !important;
+  border-color: $success;
+}
+
+.switch-danger .switch-input:checked + .switch-slider,
+.switch-danger > .switch-input:checked ~ .switch-label {
+  background: $danger !important;
+  border-color: $danger;
+}
+
+.switch-info .switch-input:checked + .switch-slider,
+.switch-info > .switch-input:checked ~ .switch-label {
+  background: $primary !important;
+  border-color: $primary;
+}
+
+.switch-warning .switch-input:checked + .switch-slider,
+.switch-warning > .switch-input:checked ~ .switch-label {
+  background: $warning !important;
+  border-color: $warning;
+}

package/scss/overrides/_tables.scss

@@ -0,0 +1,64 @@
+table th a:not([href]) {
+  cursor: pointer;
+}
+
+.table-hover tbody tr:hover {
+  background-color: #edf3fe;
+}
+
+.table-listing thead th {
+  border: none;
+}
+
+.table-listing thead tr {
+  border-bottom: 1px solid #f0f2f5;
+  border-top: 1px solid #dee3e7;
+}
+
+.table-listing td {
+  border-top: 1px solid #f0f2f5;
+  vertical-align: middle;
+}
+
+.table-listing .row.no-gutters .btn {
+  margin-right: 10px;
+  @media (max-width: 1319px) {
+    margin-bottom: 10px;
+  }
+}
+
+.table-listing td:last-of-type {
+  min-width: 95px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+td > .switch {
+  top: 4px;
+}
+
+@media (max-width: 991px) {
+  .table-listing {
+    th,
+    td {
+      display: none;
+    }
+    tr {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+    th:last-of-type,
+    td:last-of-type,
+    th:nth-of-type(2),
+    td:nth-of-type(2) {
+      display: flex;
+    }
+    td:last-of-type {
+      padding-right: 0;
+    }
+  }
+  td:nth-of-type(2) {
+    overflow: hidden;
+  }
+}

package/scss/overrides/_text.scss

@@ -0,0 +1,15 @@
+.text-success {
+    color: $success !important;
+}
+
+.text-danger {
+    color: $danger !important;
+}
+
+.text-warning {
+    color: $warning !important;
+}
+
+.text-info {
+    color: $primary !important;
+}

package/scss/overrides/_wysiwyg.scss

@@ -0,0 +1,62 @@
+.ql-editor {
+  min-height: 200px;
+  padding-right: 2.2rem !important;
+  color: #3e515b;
+  &:after {
+    content: '';
+    background-size: contain;
+    background-repeat: no-repeat;
+    width: 18px;
+    height: 18px;
+    position: absolute;
+    right: 8px;
+    top: 10px;
+    background-position: center;
+  }
+}
+
+.ql-container .ql-editor.ql-blank::before {
+  font-style: normal;
+  font-size: 0.875rem;
+  line-height: 1.25;
+  color: #B2BDC5;
+}
+
+.quill-editor .ql-container.ql-snow {
+  border: 1px solid $mutedText;
+}
+
+.has-danger .quill-editor .ql-container.ql-snow {
+  border: 1px solid $danger;
+}
+
+.quill-editor .ql-toolbar.ql-snow {
+  border: 1px solid $mutedText;
+  border-bottom: 1px solid #E9EDF2;
+}
+
+.has-danger .quill-editor .ql-toolbar.ql-snow {
+  border: 1px solid $danger;
+  border-bottom: 1px solid #E9EDF2;
+}
+
+.ql-snow .ql-picker-label {
+  color: #C7C7C7;
+}
+
+.quill-editor .ql-snow .ql-stroke {
+  stroke: #C7C7C7;
+}
+
+.quill-editor .ql-snow .ql-fill,
+.ql-snow .ql-stroke.ql-fill {
+  fill: #C7C7C7;
+}
+
+.has-success .ql-editor:after {
+  background-image: $icon-correct;
+}
+
+.has-danger .ql-editor:after {
+  background-image: $icon-error;
+}

package/scss/styles/_auth.scss

@@ -0,0 +1,92 @@
+// Auth specific styles
+.auth {
+    min-height: 100vh;
+    .auth-header {
+        border-bottom: 1px solid #F2F5F9;
+        padding: 30px;
+    }
+    .auth-body {
+        padding: 30px;
+    }
+    .auth-title {
+        text-transform: uppercase;
+        color: #333D5D;
+        font-size: 25px;
+        font-weight: bold;
+        margin-bottom: 15px;
+    }
+    .auth-subtitle {
+        text-transform: uppercase;
+        font-weight: bold;
+        color: #B9BBC6;
+        font-size: 12px;
+        letter-spacing: 0;
+        margin-bottom: 0;
+    }
+    .card-body,
+    .card-block {
+        padding: 0;
+    }
+    .form-group {
+        margin-bottom: 1.7rem;
+        &:last-of-type {
+            margin-bottom: 0;
+        }
+    }
+    label {
+        color: #9FA6B9;
+        text-transform: uppercase;
+        font-weight: bold;
+    }
+    .form-control {
+        border-radius: 4px;
+        padding: 1.3rem 0.75rem;
+        border-color: $mutedText;
+        height: 46px;
+    }
+    .input-group .form-control {
+        border: 1px solid $mutedText;
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        border-left: none;
+    }
+    .has-danger .input-group .form-control {
+        border-color: $danger;
+    }
+    .input-group-addon {
+        border-bottom-left-radius: 4px;
+        border-top-left-radius: 4px;
+        padding: 0.5rem 0.75rem;
+        margin-bottom: 0;
+        font-size: 0.875rem;
+        font-weight: normal;
+        line-height: 1.25;
+        color: #3e515b;
+        text-align: center;
+        border: 1px solid $mutedText;
+        border-radius: 0.25rem;
+        min-width: 40px;
+        white-space: nowrap;
+        vertical-align: middle;
+        border-right: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    .form-control-danger {
+        border: 1px solid $danger;
+    }
+    .form-control-feedback {
+        color: $danger;
+        font-weight: 500;
+    }
+    .btn-block {
+        padding: 1rem;
+        font-size: 16px;
+    }
+    .auth-ghost-link {
+        color: #9FA6B9;
+    }
+    .alert {
+        margin-bottom: 1.4rem;
+    }
+}

package/scss/styles/_custom.scss

@@ -0,0 +1 @@
+// Write your project specific styles here

package/scss/styles/_index.scss

@@ -0,0 +1,5 @@
+// Our own styles
+@import "auth";
+@import "others";
+@import "custom";
+@import "legacy";

package/scss/styles/_legacy.scss

@@ -0,0 +1,87 @@
+.input-group-addon {
+  display: flex;
+  box-align: center;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.25;
+  color: #3e515b;
+  text-align: center;
+  border: 1px solid #c2cfd6;
+  min-width: 40px;
+  white-space: nowrap;
+  vertical-align: middle;
+  background-color: #fff;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  &:last-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  &:not(:last-child) {
+    border-right: 0;
+  }
+}
+
+.translation-listing .table td:last-of-type {
+  min-width: 0;
+}
+
+.card-block {
+  flex: 1 1 auto;
+  padding: 1.25rem;
+}
+
+.input-group .btn-group.input-group-btn {
+  display: flex;
+  margin-left: -1px;
+  white-space: nowrap;
+  vertical-align: middle;
+  & > .btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    position: relative;
+    z-index: 2;
+  }
+}
+
+.switch {
+  .switch-label {
+    position: relative;
+    display: block;
+    height: inherit;
+    cursor: pointer;
+    border: 1px solid #c8ced3;
+    transition: 0.15s ease-out;
+    background-color: #f0f3f5;
+    border-radius: 50em;
+    width: 40px;
+    &:before {
+      position: absolute;
+      box-sizing: border-box;
+      content: '';
+      background-color: #fff;
+      transition: 0.15s ease-out;
+      top: -1px;
+      left: -1px;
+      width: 26px;
+      height: 26px;
+      border: 0;
+      border-radius: 50em;
+      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+      transform: translateX(14px);
+      border-color: transparent;
+    }
+  }
+  .switch-handle {
+    display: none;
+  }
+}
+
+@media (max-width: 700px) {
+  .input-group button {
+    font-size: 0.875rem !important;
+  }
+}