@arsedizioni/ars-utils 22.5.3 → 22.5.5

package/clipper.ui/ui/clipper.scss

@@ -1,564 +0,0 @@
-@use '../../styles/ui.scss';
-
-// ---------------------------------------------------------------------------
-// Shared helpers
-// ---------------------------------------------------------------------------
-// Clamp text to 3 lines (used by item / tile / stripe titles)
-@mixin line-clamp-3 {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: initial;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-}
-
-// Shared text styling for the .item-content info labels
-@mixin item-info-label {
-  font-size: x-small !important;
-  font-weight: 700 !important;
-  line-height: 18px;
-  text-transform: uppercase !important;
-}
-
-.clipper-logo {
-  background-size: 110px 48px;
-  width: 110px;
-  height: 48px;
-
-}
-
-.clipper-selection-button {
-  width: 150px;
-  font-size: small;
-  font-weight: 600;
-}
-
-.clipper-selection-icon-button {
-  background-color: var(--ars-color-primary, #00a293);
-  color: var(--ars-color-text-low, #e0e2e5);
-}
-
-.clipper-selection-icon-button:hover {
-  background-color: var(--ars-color-primary-hi, #12c0ae);
-}
-
-
-
-// State color + background utilities (app-color tokens). name -> fallback
-$state-colors: (
-  unread:   #f7931c,
-  expired:  #ff5449,
-  expiring: #FFC107,
-  closed:   #388E3C,
-);
-
-@each $state, $fallback in $state-colors {
-  .#{$state} {
-    color: var(--app-color-#{$state}, $fallback) !important;
-  }
-
-  .#{$state}-bg {
-    background-color: var(--app-color-#{$state}, $fallback) !important;
-  }
-}
-
-// Background-only variant (uses the ars-color design token)
-.error-bg {
-  background-color: var(--ars-color-error, #ff5449) !important;
-}
-
-// .popular-bg is an alias of .closed-bg
-.popular-bg {
-  background-color: var(--app-color-closed, #388E3C) !important;
-}
-
-.very-popular-bg {
-  background-color: #4CAF50;
-}
-
-.item-selected {
-  background-color: var(--ars-item-selected-background-color, #ced1d2);
-  border-radius: 0 !important;
-}
-
-.item-unread {
-  font-weight: bolder;
-}
-
-
-.items-group-title {
-  color: var(--ars-color-secondary, #4a635f);
-  font-size: large;
-  font-weight: 700;
-  padding-left: 25px;
-  padding-bottom: 10px;
-  padding-top: 10px;
-
-  .group-spaced {
-    padding: 10px 0 0 0 !important;
-  }
-}
-
-
-.items-footer {
-  padding: 10px;
-
-}
-
-
-.item {
-  border-radius: 12px;
-  padding: 10px 10px 10px 0px;
-  min-height: 68px !important;
-  margin-bottom: 2px;
-}
-
-.item:hover {
-  background-color: var(--ars-item-hover-background-color, #eaecef);
-
-  .item-content {
-    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
-    mask-image: linear-gradient(to right, black 85%, transparent 100%);
-  }
-
-}
-
-@media screen and (min-width: 0px) and (max-width: 430px) {
-  .item:hover {
-    background-color: var(--ars-item-hover-background-color);
-
-    .item-content {
-      -webkit-mask-image: linear-gradient(to right, black 55%, transparent 100%);
-      mask-image: linear-gradient(to right, black 55%, transparent 100%);
-    }
-
-  }
-}
-
-.item-content {
-
-  .item-info-1,
-  .info-1 {
-    @include item-info-label;
-    color: var(--ars-color-accent, #7894ae);
-  }
-
-  .item-info-2,
-  .info-2 {
-    @include item-info-label;
-    color: var(--ars-color-accent-low, #456179);
-  }
-
-  .item-info-3,
-  .info-3 {
-    @include item-info-label;
-    color: var(--ars-color-error, #ff5449);
-  }
-
-  .item-title,
-  .title {
-    font-size: small !important;
-    line-height: 18px;
-    text-decoration: none !important;
-    font-weight: normal;
-    min-height: unset;
-    min-width: unset;
-    white-space: initial !important;
-
-    @supports (-webkit-line-clamp: 3) {
-      @include line-clamp-3;
-    }
-  }
-
-
-  .details {
-    margin-top: 4px;
-    font-size: x-small !important;
-    font-weight: 700;
-    line-height: 15px;
-    color: var(--ars-color-accent-low, #456179);
-    text-transform: uppercase !important;
-    border-left: 4px solid var(--ars-color-accent-low, #456179);
-    padding-left: 10px;
-
-    .links {
-      text-transform: none;
-      text-decoration: none;
-
-      a,
-      span,
-      div {
-        margin-right: 8px;
-        font-weight: 500 !important;
-        font-size: 11px !important;
-        color: var(--ars-color-text, #191c1b);
-      }
-
-      a {
-        cursor: pointer !important;
-        color: var(--ars-color-link, #03A9F4);
-        font-size: 11px !important;
-        font-weight: 500 !important;
-      }
-    }
-  }
-
-  a.link {
-    color: var(--ars-color-link, #03A9F4);
-    cursor: pointer !important;
-    text-decoration: none !important;
-  }
-}
-
-
-.tile:hover {
-  background-color: var(--ars-item-hover-background-color, #eaecef);
-  border-radius: 12px;
-}
-
-.tile {
-  cursor: pointer !important;
-  padding: 10px 13px 10px 13px !important;
-  margin-bottom: 20px !important;
-
-  .body {
-    padding: 4px 6px;
-  }
-
-  .image-mark {
-    border-top: 6px solid transparent;
-    margin: 0 8px;
-
-  }
-
-  .image-mark-unread {
-    border-top-color: var(--app-color-unread, #f7931c);
-    margin: 0 8px;
-  }
-
-  .tile-image,
-  .image {
-    height: 125px;
-    position: relative;
-    background-color: transparent;
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 8px;
-
-
-    img {
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
-
-
-    .tile-info-1,
-    .info-1 {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      padding: 4px 8px;
-      background-color: var(--ars-color-overlay, rgba(255, 255, 255, 0.75));
-      color: var(--ars-color-text, #191c1b);
-      font-size: small !important;
-      font-weight: 700 !important;
-      text-transform: uppercase !important;
-    }
-
-    .tile-info-2,
-    .info-2 {
-      position: absolute;
-      right: 0;
-      top: 0;
-      padding: 4px 8px;
-      background-color: var(--ars-color-overlay, rgba(255, 255, 255, 0.75));
-      color: var(--ars-color-accent, #7894ae);
-      font-size: small !important;
-      font-weight: 700 !important;
-      text-transform: uppercase !important;
-    }
-
-    .buttons {
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 42px;
-
-      .check,
-      .read-button {
-        background-color: var(--ars-color-primary, #00a293) !important;
-        color: var(--ars-color-text-low, #e0e2e5) !important;
-      }
-
-      .unread-button {
-        background-color: var(--app-color-unread, #f7931c) !important;
-        color: var(--ars-color-text-low, #e0e2e5) !important;
-      }
-
-      .check-selected {
-        background-color: var(--ars-color-primary-hi, #12c0ae) !important;
-      }
-    }
-  }
-
-  .tile-date,
-  .date {
-    padding: 8px 0 6px 0 !important;
-    font-weight: 700 !important;
-    text-transform: uppercase !important;
-
-    .date-day {
-      color: var(--ars-color-accent, #7894ae);
-    }
-
-    .date-divider {
-      width: 1px;
-      margin: 0 8px;
-      border-left: 1px solid var(--ars-color-divider, #757d87);
-    }
-  }
-
-  .tile-time,
-  .time {
-    font-size: small !important;
-    font-weight: 700 !important;
-  }
-
-  .tile-title,
-  .title {
-    text-decoration: none !important;
-    font-size: 16px !important;
-    font-weight: 600;
-    min-height: 50px !important; // 2 lines;
-    max-height: 70px !important; // 3 lines;
-    min-width: 100%;
-    white-space: initial !important;
-    overflow: hidden !important;
-
-    @supports (-webkit-line-clamp: 3) {
-      @include line-clamp-3;
-    }
-  }
-
-
-}
-
-
-.stripe:hover {
-  background-color: var(--ars-item-hover-background-color, #eaecef);
-  border-radius: 12px;
-}
-
-.stripe {
-  cursor: pointer !important;
-  padding: 5px 10px 5px 10px !important;
-  margin-bottom: 10px !important;
-
-  .body {
-    padding: 5px 15px !important;
-  }
-
-  .image-mark {
-    min-height: 100% !important;
-    border-left: 6px solid transparent;
-    margin: 8px 0;
-
-  }
-
-  .image-mark-unread {
-    min-height: 100% !important;
-    border-left-color: var(--ars-color-error, #ff5449) !important;
-    margin: 8px 0;
-  }
-
-  .stripe-image,
-  .image {
-    width: 150px !important;
-    height: 70px !important;
-    position: relative;
-    background-color: transparent;
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 8px;
-
-
-    img {
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .stripe-info-1,
-  .info-1 {
-    margin-top: 8px;
-    padding: 4px 8px !important;
-    background-color: var(--ars-color-overlay, rgba(255, 255, 255, 0.75)) !important;
-    color: var(--ars-color-text, #191c1b) !important;
-    font-size: small !important;
-    font-weight: 700 !important;
-    text-transform: uppercase !important;
-  }
-
-  .stripe-info-2,
-  .info-2 {
-    margin-top: 8px;
-    padding: 4px 8px !important;
-    background-color: var(--ars-color-overlay, rgba(255, 255, 255, 0.75)) !important;
-    color: var(--ars-color-accent, #7894ae) !important;
-    font-size: small !important;
-    font-weight: 700 !important;
-    text-transform: uppercase !important;
-  }
-
-  .buttons {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 42px;
-
-    .check,
-    .read {
-      background-color: var(--ars-color-primary, #00a293);
-      color: var(--ars-color-text-low, #e0e2e5);
-    }
-
-    .check-selected {
-      background-color: var(--ars-color-primary-hi, #12c0ae);
-    }
-  }
-
-
-  .stripe-date,
-  .date {
-    padding: 0 !important;
-    font-weight: 700 !important;
-    text-transform: uppercase !important;
-
-    .date-day {
-      color: var(--ars-color-accent, #7894ae);
-    }
-
-    .date-divider {
-      width: 1px;
-      margin: 0 8px;
-      border-left: 1px solid var(--ars-color-divider, #757d87);
-    }
-  }
-
-  .stripe-time,
-  .time {
-    font-size: small !important;
-    font-weight: 700 !important;
-  }
-
-  .stripe-title,
-  .title {
-    text-decoration: none !important;
-    font-size: 16px !important;
-    font-weight: 600;
-    min-width: 100%;
-    white-space: initial !important;
-    overflow: hidden !important;
-
-    @supports (-webkit-line-clamp: 3) {
-      @include line-clamp-3;
-    }
-  }
-
-
-}
-
-.badge,
-.badge-red {
-  margin-left: 10px;
-  padding: 1px 4px;
-  border-radius: 3px;
-  font-size: x-small;
-  font-weight: 600;
-  text-align: center;
-  background-color: #427505;
-  text-transform: uppercase;
-  white-space: nowrap;
-  color: #e0e2e5;
-}
-
-.badge-red {
-  background-color: #a80710;
-}
-
-.busy-backdrop {
-  background-color: rgba(0, 0, 0, 0.42) !important;
-}
-
-
-.legend-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-size: x-small;
-  text-transform: uppercase;
-  font-weight: 500;
-  margin-left: 10px;
-
-
-  .legend {
-    display: inline-block;
-    height: 8px;
-    width: 8px;
-    margin-right: 4px;
-  }
-
-  .legend:not(:first-of-type) {
-    margin-left: 10px;
-  }
-
-}
-
-@media screen and (max-width: 431px) {
-  .legend-container {
-    font-size: 9px !important;
-  }
-}
-
-.special-date,
-.special-date-expired,
-.special-date-expiring {
-  border: 2px var(--ars-color-accent, #7894ae) solid !important;
-  border-radius: 100% !important;
-}
-
-
-.special-date-expired {
-  border: 2px var(--ars-color-error, #ff5449) solid !important;
-}
-
-.special-date-expiring {
-  border: 2px var(--ars-color-warning, #FFC107) solid !important;
-}
-
-/*
- * Free text search highlighted item
- */
-.word-hit-chunk,
-.word-hit {
-  display: inline-block;
-  font-size: inherit;
-  background-color: var(--ars-word-hit-background-color, #FFEB3B);
-  color: var(--ars-word-hit-color, #191c1b);
-  padding: 0 4px;
-  margin: 0 4px;
-  border-radius: 4px;
-}
-
-.word-hit-chunk {
-  background-color: var(--ars-word-chunk-hit-background-color, #8AFF59);
-  color: var(--ars-word-hit-chunk-color, #191c1b);
-
-}