spree_admin 5.2.6 → 5.3.0.rc1

data/app/assets/stylesheets/spree/admin/shared/_base.scss

@@ -1,737 +0,0 @@
-// https://twitter.com/NatalieMarleny/status/1662402066365526016
-html {
-  min-height: 100%;
-  letter-spacing: normal;
-  text-rendering: optimizeLegibility;
-  text-size-adjust: 100%;
-}
-body {
-  @extend .h-100;
-  overflow-y: scroll;
-}
-
-body * {
-  &:focus {
-    outline-color: theme-color('blue') !important;
-  }
-}
-
-html, body {
-  overscroll-behavior: none;
-}
-
-body.modal-open #multi-backdrop {
-  z-index: 1040;
-  width: 100vw;
-  height: 100vh;
-}
-
-strong {
-  @extend .font-weight-bold;
-}
-
-.font-weight-semibold {
-  font-weight: $font-weight-medium !important;
-}
-
-.text-size-lg, .font-size-lg {
-  font-size: $font-size-lg;
-}
-.text-size-sm, .font-size-sm {
-  font-size: $font-size-sm;
-}
-.text-size-base, .font-size-base {
-  font-size: $font-size-base;
-}
-.text-size-plus, .font-size-plus {
-  font-size: $font-size-plus;
-}
-
-.bg-gray-25 {
-  background-color: $gray-25;
-}
-.bg-gray-50 {
-  background-color: $gray-50;
-}
-.bg-gray, .bg-gray-100 {
-  background-color: $gray-100;
-}
-.bg-gray-200 {
-  background-color: $gray-200;
-}
-.bg-gray-300 {
-  background-color: $gray-300;
-}
-.bg-gray-400 {
-  background-color: $gray-400;
-}
-.border-gray {
-  border-color: $gray-400 !important;
-}
-
-.display-5 {
-  font-size: 1.75rem;
-  font-weight: 400;
-
-  @include media-breakpoint-up(lg) {
-    font-size: 2.5rem;
-  }
-}
-
-.fill-black {
-  & > * {
-    fill: #000;
-  }
-  fill: #000;
-}
-
-.w-5 {
-  width: 5%;
-}
-.w-10 {
-  width: 10%;
-}
-.w-15 {
-  width: 15%;
-}
-.w-20 {
-  width: 20%;
-}
-.w-25 {
-  width: 25%;
-}
-.w-30 {
-  width: 30%;
-}
-.w-35 {
-  width: 35%;
-}
-.w-40 {
-  width: 40%;
-}
-.w-60 {
-  width: 60%;
-}
-.w-70 {
-  width: 70%;
-}
-.w-80 {
-  width: 80%;
-}
-.w-90 {
-  width: 90%;
-}
-.w-auto {
-  width: auto;
-}
-.min-vh-40 {
-  min-height: 40vh;
-}
-.min-vh-60 {
-  min-height: 60vh;
-}
-.min-vh-70 {
-  min-height: 70vh;
-}
-.min-vh-80 {
-  min-height: 80vh;
-}
-.min-vh-90 {
-  min-height: 90vh;
-}
-
-.top-0 {
-  top: 0;
-}
-.bottom-0 {
-  bottom: 0;
-}
-.right-0 {
-  right: 0;
-}
-.left-0 {
-  left: 0;
-}
-
-/* for heroicons to work in admin */
-.h-6 {
-  height: 24px;
-}
-
-.shadow-xs {
-  box-shadow: $box-shadow-xs;
-}
-.focus-shadow {
-  &:focus, &:focus-within, &:active {
-    box-shadow: $input-focus-box-shadow;
-  }
-}
-.focus-border {
-  &:focus, &:focus-within {
-    border-color: theme-color('blue') !important;
-  }
-}
-
-.disabled {
-  cursor: not-allowed;
-}
-
-.cursor-not-allowed {
-  cursor: not-allowed !important;
-}
-.cursor-help {
-  cursor: help;
-}
-
-.active {
-  color: theme-color('primary');
-  background-color: theme-color('active');
-}
-.tab-pane.active {
-  color: inherit !important;
-  background-color: transparent !important;
-}
-.hover {
-  background-color: $gray-100 !important;
-}
-.hover-none {
-  text-decoration: none !important;
-
-  &:hover {
-    text-decoration: none !important;
-    background-color: transparent !important;
-  }
-}
-
-.rich-text-area-container {
-  min-height: 113px;
-  font-size: $font-size-plus;
-  border: 1px solid $input-border-color;
-  margin-bottom: 1rem;
-  @extend .overflow-hidden;
-  text-wrap: wrap;
-  border-radius: $input-border-radius;
-
-  &:focus, &:focus-within, &:active {
-    background-color: $input-focus-bg !important;
-    border-color: $input-focus-border-color !important;
-    outline: 0 !important;
-    box-shadow: $input-focus-box-shadow !important;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    font-weight: normal;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-  }
-}
-
-.is-hidden {
-  display: none;
-}
-
-.tooltip{
-  pointer-events: none;
-  z-index: 99999999;
-}
-
-.image-container {
-  .img-fluid {
-    transition: transform .5s ease;
-  }
-
-  &:hover {
-  text-decoration: none;
-    .img-fluid {
-      transform: scale(1.1);
-      opacity: 0.6;
-    }
-  }
-}
-
-.admin-product-image-container {
-  background-color: $white;
-  border: 1px solid $gray-200;
-  border-radius: $border-radius;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  a {
-    display: flex
-  }
-
-  img {
-    max-width: 100%;
-    align-self: center;
-    transition: transform .5s ease;
-  }
-
-  &:hover {
-    img {
-      transform: scale(1.2)
-    }
-  }
-}
-
-.img-thumbnail {
-  @extend .bg-transparent;
-  @extend .p-0;
-}
-
-.cursor-zoom {
-  cursor: -moz-zoom-in;
-  cursor: -webkit-zoom-in;
-  cursor: zoom-in;
-}
-
-.js-remove-promo-rule-option-value {
-  color: theme-color('black') !important;
-  &:hover {
-    color: darken(theme-color('primary'), 10) !important;
-  }
-}
-
-.button_to {
-  display: inline-block;
-}
-
-.move-handle {
-  cursor: grab;
-}
-
-.badge-light-muted-text {
-  color: rgba(0, 0, 0, 0.50);
-}
-
-.truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-[data-show-info] {
-  color:  theme-color('primary');
-  cursor: pointer;
-}
-
-small,
-.small {
-  font-size: $font-size-sm !important;
-}
-
-// tailwind matchers
-
-.gap-1 {
-  gap: calc($spacer / 4);
-}
-
-.gap-2 {
-  gap: calc($spacer / 2);
-}
-
-.gap-3 {
-  gap: $spacer;
-}
-
-.min-h-14 {
-  min-height: 3.5rem;
-}
-
-.hidden {
-  @extend .d-none;
-}
-
-.select-input {
-  @extend .custom-select;
-}
-
-.text-input {
-  @extend .form-control;
-}
-
-.flex {
-  @extend .d-flex;
-}
-.flex-col {
-  @extend .flex-column;
-}
-.w-full {
-  width: 100%;
-}
-
-.has-float-label label {
-  display: none;
-}
-
-#noscript-alert {
-  z-index: 2000;
-}
-
-.input-group-text {
-  @extend .text-muted;
-  background-color: $gray-50;
-}
-
-.sortable-chosen {
-  background-color: theme-color('action') !important;
-  border: 2px dashed $blue !important;
-}
-
-.sort-handle {
-  cursor: grab;
-}
-
-.handle {
-  cursor: grab !important;
-}
-
-.vr {
-  width: 1px;
-  background-color: $gray-200;
-}
-
-.verified-badge {
-  color: #0ce8b1;
-}
-
-.cursor-default {
-  cursor: default;
-}
-.cursor-pointer {
-  cursor: pointer;
-}
-.cursor-text {
-  cursor: text;
-}
-
-.list-group-item-action {
-  @extend .rounded;
-  @extend .border-0;
-}
-.list-group-item-action:hover, .list-group-item-action:focus {
-  a:not(.btn) {
-    color: theme-color('black');
-    text-decoration: none !important;
-  }
-}
-
-.progress {
-  background-color: $gray-50;
-  height: 0.5rem;
-
-  .progress-bar {
-    @extend .rounded;
-    @extend .border-0;
-  }
-}
-
-.reveal {
-  opacity: 0;
-  transform: translateY(20px);
-  transition: 1s cubic-bezier(0.5, 0, 0, 1);
-  transition-property: opacity, transform;
-}
-
-.reveal.in {
-  opacity: 1;
-  transform: none;
-}
-
-.easepick-wrapper .container.inline {
-  box-shadow: none !important;
-}
-
-.opacity-100 {
-  opacity: 1;
-}
-.opacity-50 {
-  opacity: 0.5;
-}
-.opacity-75 {
-  opacity: 0.75;
-}
-.opacity-0 {
-  opacity: 0;
-}
-
-.blurred {
-  filter: opacity(50%);
-
-  .form-actions {
-    display: none;
-  }
-
-  .cm-editor {
-    visibility: hidden;
-  }
-}
-
-#turbo-spinner {
-  display: none !important;
-}
-
-main turbo-frame[busy] {
-  opacity: 0.5;
-}
-turbo-frame[busy] #turbo-spinner {
-  position: absolute;
-  display: flex !important;
-  height: 300px;
-  z-index: 1020;
-
-  .spinner-border {
-    width: 2rem;
-    height: 2rem;
-  }
-}
-turbo-frame[loading] .spinner-border, turbo-frame[busy] .spinner-border {
-  display: block !important;
-}
-
-.fill-primary {
-  & > * {
-    fill: #000;
-
-    &:hover {
-      fill: darken(#000, 10);
-    }
-  }
-  fill: #000;
-
-  &:hover {
-    fill: darken(#000, 10);
-
-    & > * {
-      fill: darken(#000, 10);
-    }
-  }
-}
-
-// https://w3bits.com/css-image-hover-zoom/
-.img-hover-zoom {
-  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
-}
-
-/* [2] Transition property for smooth transformation of images */
-.img-hover-zoom img {
-  transition: transform .5s ease;
-}
-
-/* [3] Finally, transforming the image when container gets hovered */
-.img-hover-zoom:hover img {
-  transform: scale(1.5);
-}
-
-.tag {
-  display: inline-block;
-  @extend .rounded-pill;
-  @extend .text-uppercase;
-  font-size: 0.875rem;
-  font-weight: $font-weight-medium;
-  padding: 5px 16px ;
-  letter-spacing: 2.24px;
-  border: 1px solid $gray-200;
-  color: theme-color('black');
-  background-color: #fff;
-
-  &:hover {
-    color: theme-color('black');
-    text-decoration: none;
-  }
-
-  &:active {
-    color: #fff;
-    background-color: $gray-800;
-    border-color: $gray-800;
-  }
-
-  &.active {
-    @extend .bg-black;
-    color: #fff !important;
-    border-color: theme-color('black') !important;
-  }
-
-  &.small {
-    padding: 2px 8px !important;
-    font-size: $font-size-sm * 0.875 !important;
-    letter-spacing: 1.5px;
-  }
-}
-
-.thumb-preview {
-  background-size: cover;
-  background-position: center center;
-  background-repeat: no-repeat;
-}
-
-
-.border-lg {
-  @include media-breakpoint-up(xl) {
-    border: 1px solid $border-color;
-  }
-}
-
-.blurry {
-  color: transparent !important;
-  text-shadow: 0 0 8px #000 !important;
-}
-
-@media (min-width: 992px) {
-  .w-lg-50 {
-    width: 50% !important;
-  }
-}
-
-.text-decoration-underline {
-  text-decoration: underline;
-}
-
-.overflow-auto, .overflow-y-auto, .ts-dropdown-content {
-  &::-webkit-scrollbar {
-    width: 0.35rem !important;
-  }
-  &::-webkit-scrollbar-track {
-    border-radius: 0.25rem !important;
-    background-color: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    border-radius: 0.25rem !important;
-    background-color: rgba($gray-500, 0.25);
-  }
-}
-.overflow-visible {
-  overflow-y: visible !important;
-  overflow-x: visible !important;
-}
-
-.outline-none	{
-  outline: none !important;
-}
-
-.overflow-y-auto {
-  overflow-y: auto;
-}
-.overflow-x-hidden {
-  overflow-x: hidden;
-}
-
-.overlay-background {
-  background-color: rgba($white, 0.3);
-  transition: background-color 0.3s ease-in-out;
-}
-
-.border-dashed {
-  border-style: dashed !important;
-}
-.border-bottom-dashed {
-  border-bottom-style: dashed !important;
-}
-.border-top-dashed {
-  border-top-style: dashed !important;
-}
-
-body:has(.lg-container.lg-show) .modal {
-  z-index: 1040;
-}
-
-.z-10 {
-  z-index: 10;
-}
-.z-index-1000 {
-  z-index: 1000;
-}
-
-.turbo-frame-error {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  font-weight: normal;
-  padding: 2rem;
-  color: theme-color('danger');
-  font-weight: $font-weight-normal;
-}
-
-div.uppy-Root {
-  z-index: 1050;
-}
-
-.rounded-lg {
-  border-radius: $border-radius-lg;
-}
-
-.rounded-lg-top {
-  border-top-left-radius: $border-radius-lg;
-  border-top-right-radius: $border-radius-lg;
-}
-
-.rounded-lg-bottom {
-  border-bottom-left-radius: $border-radius-lg;
-  border-bottom-right-radius: $border-radius-lg;
-}
-
-.rounded-lg-left {
-  border-top-left-radius: $border-radius-lg;
-  border-bottom-left-radius: $border-radius-lg;
-}
-
-.rounded-lg-right {
-  border-top-right-radius: $border-radius-lg;
-  border-bottom-right-radius: $border-radius-lg;
-}
-
-.turbo-progress-bar {
-  background-color: theme-color('blue');
-}
-
-.tooltip-inner {
-  border: 1px solid $border-color;
-  box-shadow: $box-shadow-xs;
-}
-
-.avatar {
-  border-radius: 50%;
-  background-color: $gray-200;
-  color: $gray-500;
-  font-size: $font-size-base;
-  font-weight: $font-weight-medium;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.breadcrumb {
-  gap: 0.5rem;
-  align-items: center;
-  font-weight: $font-weight-medium;
-  height: 32px;
-  border-left: 1px solid $gray-50;
-  border-radius: 0;
-  
-  li {
-    a {
-      text-decoration: none;
-
-      &:hover {
-        color: $primary;
-        text-decoration: underline;
-      }
-    }
-  }
-}
-
-code {
-  background-color: $code-bg;
-  border-radius: $border-radius-sm;
-  padding: 0.25rem 0.5rem;
-}
-
-kbd {
-  @extend .badge;
-  @extend .badge-light;
-  text-transform: lowercase;
-  box-shadow: $box-shadow-xs;
-}