first commit

admin086k8e6t9/themes/new-theme/scss/pages/partials/_theme_logo_configuration.scss

@@ -0,0 +1,89 @@
+.logo-configuration-card-body {
+  padding: inherit;
+
+  .logo-card {
+    border-radius: 0;
+    border: 0;
+
+    .logo-card-title {
+      font-size: 1rem;
+      font-weight: 600;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: normal;
+      letter-spacing: -0.01875rem;
+      text-align: center;
+      color: #4a4a4a;
+    }
+
+    .nav-pills {
+      .nav-item {
+        padding-right: 1.25rem;
+      }
+
+      border-top: 0;
+      border-bottom: 0;
+
+      .nav-link {
+        &.active {
+          color: #363a41;
+          background-color: inherit;
+        }
+
+        color: #afbbbe;
+        height: 1.65rem;
+        padding-top: 0;
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
+
+    .tab-content {
+      padding: 0;
+
+      .input-in-tab {
+        margin-top: -2px;
+      }
+    }
+
+    .logo-card-description {
+      font-size: 0.75rem;
+      font-weight: normal;
+      font-style: normal;
+      font-stretch: normal;
+      line-height: normal;
+      letter-spacing: -0.0125rem;
+      color: #6c868e;
+      margin-top: 20px;
+      height: 34px;
+    }
+
+    .logo-image-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 6.625rem;
+      margin-top: 2rem;
+      margin-bottom: 1.6875rem;
+
+      .header-logo,
+      .email-logo,
+      .invoice-logo {
+        max-width: 6.25rem;
+        max-height: 6.625rem;
+      }
+
+      .favicon-logo {
+        width: 2.41875rem;
+        height: 2.41875rem;;
+        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
+        border: 1px solid transparent;
+      }
+    }
+  }
+
+  .logo-card:not(:last-child) {
+    border-right: 0.0625rem solid #dedede;
+  }
+
+}

admin086k8e6t9/themes/new-theme/scss/pages/partials/_theme_logo_theme_card.scss

@@ -0,0 +1,160 @@
+//local mixins
+@mixin theme-card-overlay() {
+  width:100%;
+  height:100%;
+  position:absolute;
+  background-color:#000000;
+  opacity:0.25;
+}
+
+@mixin card-width() {
+  max-width: 24.1875rem;
+
+  @include media-breakpoint-down(sm) {
+    max-width: 100%;
+  }
+}
+
+@mixin card-width-and-height() {
+  height: 15.125rem;
+  @include card-width;
+}
+
+@mixin action-button {
+  height: 2.5rem;
+  border-radius: 1.65rem;
+  background-color: #ffffff;
+}
+
+@mixin theme-name-and-version() {
+  font-size: 1rem;
+  font-style: normal;
+  font-stretch: normal;
+  line-height: normal;
+  letter-spacing: -0.01875rem;
+  text-align: center;
+  color: #363a41;
+}
+
+.theme-card-container {
+  .theme-card {
+    position: relative;
+
+    .active-card-overlay {
+      &.active {
+        display: block;
+      }
+      display: none;
+      @include theme-card-overlay;
+    }
+
+    .actions-container {
+      &.active {
+        display: block;
+      }
+      display: none;
+    }
+
+    @include card-width-and-height;
+
+    overflow-y: hidden;
+    border-radius: 0.25rem;
+
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+
+    .actions-container {
+      width: 100%;
+      text-align: center;
+      position: absolute;
+      top: 80%;
+      left: 50%;
+      transform: translate(-50%, -80%);
+
+      .action-button {
+        @include action-button;
+        font-weight: normal;
+        font-style: normal;
+        font-stretch: normal;
+        line-height: normal;
+        letter-spacing: -0.0125rem;
+        text-align: center;
+        color: #363a41;
+
+        .icon-current-theme {
+          color: #25b9d7;
+        }
+      }
+
+      .action-button:disabled {
+        i,
+        span {
+          opacity: 0.5;
+        }
+
+      }
+
+      .delete-button {
+        @include action-button;
+        position: relative;
+        width: 2.5rem;
+        i {
+          position: absolute;
+          bottom: 25%;
+          right: 25%;
+        }
+      }
+
+      .action-button:not(:first-child):not(:disabled):hover,
+      .delete-button:hover {
+        box-shadow: 0 0 0.9375rem 0 rgba(0, 0, 0, 0.2);
+        background-color: #3ed1f0;
+        color: #ffffff;
+      }
+    }
+  }
+
+  .theme-card-description {
+    @include card-width;
+  }
+
+  .theme-name {
+    font-weight: bold;
+    @include theme-name-and-version;
+  }
+
+  .theme-version {
+    @include theme-name-and-version;
+  }
+
+  .theme-author {
+    font-size: 0.8125rem;
+    font-weight: normal;
+    font-style: normal;
+    font-stretch: normal;
+    line-height: normal;
+    letter-spacing: -0.01875rem;
+    text-align: center;
+    color: #618596;
+    padding-bottom: 1.6875rem;
+  }
+
+  .theme-catalog-card {
+    background-color: #f8f8f8;
+    .catalog-image {
+      padding-top: 3.7rem;
+    }
+    .catalog-description {
+      padding-top: 0.975rem;
+    }
+  }
+}
+
+// actions
+.theme-card:hover .active-card-overlay,
+.theme-card:hover .actions-container
+{
+  display: block;
+}