holygrail2 1.0.0

package/scss/elements/_links.scss

@@ -0,0 +1,268 @@
+@import '../abstract/_all';
+
+$opacity-links: 0.6;
+
+a {
+  &:hover {
+    opacity: $opacity-links;
+  }
+}
+
+.link4 {
+  position: relative;
+  display: inline-block;
+  border: 0;
+  transform: none;
+  transition: background-color 0.3s ease-in-out;
+  margin: 0;
+  padding: 2px 0;
+  cursor: pointer;
+
+  &:hover {
+    opacity: $opacity-links;
+  }
+
+  &::after {
+    content: '';
+    background-color: $c-primary;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+  }
+}
+
+.link-button-prev {
+  background: transparent !important;
+  position: relative;
+  width: 40px;
+  height: 40px;
+  z-index: 1;
+  cursor: pointer;
+  border-radius: 50%;
+  border: 1px solid $c-middle-grey;
+}
+
+.inner-button {
+  margin-top: -1px;
+  display: block;
+  width: 40px;
+  height: 40px;
+  color: $c-white;
+
+  &::after {
+    border: 1px solid $c-primary;
+    border-radius: $form-radius;
+    border-right: 0;
+    border-top: 0;
+    content: ' ';
+    display: block;
+    height: 10px;
+    margin-top: -8px;
+    pointer-events: none;
+    position: absolute;
+    top: 53%;
+    right: 16px;
+    transform: rotate(-135deg);
+    transform-origin: center;
+    width: 10px;
+  }
+}
+
+.link-line {
+  display: inline;
+  position: relative;
+  border: 0;
+  padding: 0;
+  transform: none;
+  cursor: pointer;
+  background-color: transparent;
+  background-image: linear-gradient(transparent calc(100% - 1px), $primary 10px);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  transition: background-size 0.4s;
+
+  &:hover {
+    opacity: $opacity-links;
+  }
+
+  &.c-feel-dark {
+    background-image: linear-gradient(transparent calc(100% - 1px), $c-feel-dark 10px);
+  }
+
+  &.c-feel {
+    background-image: linear-gradient(transparent calc(100% - 1px), $c-feel 10px);
+  }
+  &.is-error,
+  &.c-error {
+    background-image: linear-gradient(transparent calc(100% - 1px), $c-error 10px);
+  }
+
+  .is-error & {
+    background-image: linear-gradient(transparent calc(100% - 1px), $c-error 10px);
+  }
+  &button {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &button.link-svg-pre {
+    padding-left: 20px;
+    padding-right: 0;
+  }
+
+  &button.link-svg-post {
+    padding-right: 20px;
+    padding-left: 0;
+  }
+}
+
+.link-raw {
+  display: inline-block;
+  position: relative;
+  border: 0;
+  transform: none;
+  cursor: pointer;
+  background: initial;
+  &:hover {
+    opacity: $opacity-links;
+  }
+}
+
+.link-svg-pre {
+  padding-left: 20px;
+
+  @include font-regular;
+
+  position: relative;
+  border: 0;
+  transform: none;
+  cursor: pointer;
+  background-position-x: 20px;
+
+  svg-icon {
+    position: absolute;
+    left: 0;
+    top: 2px;
+    width: 16px;
+    height: 16px;
+  }
+
+  &:hover {
+    opacity: $opacity-links;
+  }
+}
+
+.link-svg-post {
+  padding-right: 20px;
+
+  @include font-regular;
+
+  display: initial;
+  position: relative;
+  border: 0;
+  transform: none;
+  cursor: pointer;
+  background-position: calc(100% - 20px);
+
+  svg-icon {
+    position: absolute;
+    right: 0;
+    top: 2px;
+    width: 16px;
+    height: 16px;
+  }
+
+  &:hover {
+    opacity: $opacity-links;
+  }
+}
+
+.has-light {
+  a {
+    color: $c-white;
+  }
+  .link1 {
+    color: $c-white;
+
+    &::after {
+      background-color: $c-white;
+    }
+  }
+
+  .link4 {
+    color: $c-white;
+
+    &::after {
+      background-color: $c-white;
+    }
+
+    .link4-underline {
+      background: $c-white;
+    }
+  }
+
+  .link5 {
+    color: $c-white;
+
+    &::after {
+      background: $c-white;
+    }
+  }
+
+  .link6 {
+    color: $c-white;
+    border-bottom: 2px solid $c-white;
+  }
+
+  .link7 {
+    color: $c-white;
+
+    &::after {
+      background: $c-white;
+    }
+  }
+
+  .link8 {
+    color: $c-white;
+  }
+
+  .link9 {
+    color: $c-white;
+
+    &::after {
+      background: $c-white;
+    }
+  }
+
+  .link-raw {
+    color: white;
+  }
+
+  .link-line {
+    color: white;
+    background-image: linear-gradient(transparent calc(100% - 1px), white 10px);
+
+    &::after {
+      background-color: $c-white;
+    }
+  }
+
+  .link-multiline {
+    color: white;
+    background-image: linear-gradient(transparent calc(100% - 1px), white 10px);
+
+    &::after {
+      background-color: $c-white;
+    }
+  }
+
+  .link-svg-post {
+    color: white;
+  }
+
+  .link-svg-pre {
+    color: white;
+  }
+}

package/scss/elements/_list.scss

@@ -0,0 +1,271 @@
+@use 'sass:math';
+@import '../abstract/_all';
+
+$list-disc: 4px;
+
+ul.list-disc {
+  list-style: none;
+  margin: $padding-global * 2 0;
+  padding: 0;
+
+  li {
+    position: relative;
+    padding: $padding-global $padding-global * 2;
+
+    &::after {
+      background-color: $list-disc-color;
+      content: '';
+      border-radius: 50%;
+      width: $list-disc;
+      height: $list-disc;
+      position: absolute;
+      left: 0;
+      margin-top: -#{math.div($list-disc, 4)};
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    a {
+      text-decoration: none;
+      padding: 14px 0;
+    }
+
+    a::after {
+      bottom: 7px;
+    }
+  }
+}
+
+ul.list-inline {
+  li {
+    display: inline-flex;
+    padding: 0 math.div($padding-global, 2);
+
+    &::after {
+      display: none;
+    }
+  }
+}
+
+ul.list-inline-flex {
+  margin: 0;
+  padding: 0;
+
+  li {
+    display: inline-flex;
+    padding: 0 math.div($padding-global, 2);
+    margin: 0;
+
+    &::after {
+      display: none;
+    }
+  }
+}
+
+ul.list-inline-clear {
+  margin: 0;
+  padding: 0;
+
+  li {
+    display: inline-block;
+    margin: 0;
+
+    &::after {
+      display: none;
+    }
+  }
+}
+
+ul.list-clear {
+  li {
+    list-style: none;
+    margin: $padding-global 0;
+
+    &::after {
+      display: none;
+    }
+  }
+}
+
+ul.h-size-selector {
+  a {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+
+    &:hover {
+      cursor: pointer;
+
+      &::after {
+        border: 1px solid rgb(51 48 48);
+      }
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      border: 1px solid transparent;
+      width: 10px;
+      height: 10px;
+      left: 3px;
+      top: 3px;
+      padding: 8px;
+      border-radius: 50%;
+      transition: 0.5s ease all;
+    }
+  }
+}
+
+ul.list-mini {
+  margin: 8px 0;
+
+  > li {
+    position: relative;
+    padding: 4px 8px;
+    line-height: 1;
+    float: left;
+    clear: both;
+    list-style: none;
+
+    &.is-missing {
+      &::after {
+        content: '';
+        width: 100%;
+        height: 1px;
+        background-color: $c-primary;
+        border-radius: $form-radius;
+        margin-top: -1px;
+        transform: none;
+      }
+    }
+
+    &::after {
+      content: '';
+      width: 2px;
+      height: 2px;
+      background-color: $c-primary;
+      position: absolute;
+      left: 0;
+      bottom: 10px;
+    }
+  }
+}
+
+.list-table {
+  display: table;
+  width: 100%;
+}
+
+.list-box {
+  display: table-cell;
+  box-sizing: border-box;
+  border: 1px solid $c-dark-grey;
+  transition: all 0.2s ease;
+  opacity: 0.5;
+  left: -1px;
+
+  &:first-child {
+    left: 0;
+  }
+
+  &.is-active,
+  &:hover {
+    border: 1px solid $c-primary;
+    opacity: 1;
+    cursor: pointer;
+  }
+}
+
+.multiple-table {
+  display: table;
+  width: calc(100% + 2px);
+
+  .list-box:last-child {
+    left: -2px;
+  }
+}
+
+.list-button {
+  position: relative;
+  padding: 16px;
+  background: $c-white;
+  border-bottom: 1px solid $c-middle-grey;
+  cursor: pointer;
+  opacity: 1;
+
+  span {
+    font-size: $text-sm;
+  }
+
+  &:hover {
+    opacity: 0.6;
+  }
+
+  &.list-secondary,
+  &.list-secundary {
+    background-color: $c-middle-grey;
+    padding-left: 42px;
+  }
+  &.list-tertiary {
+    background-color: $c-light-grey;
+    padding-left: 64px;
+
+    svg-icon {
+      left: 20px;
+      opacity: 1;
+    }
+  }
+
+  &.list-icons {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    span {
+      flex-grow: 1;
+    }
+  }
+}
+
+.list-selection {
+  a {
+    padding: 8px;
+    background: $c-white;
+  }
+
+  a:hover,
+  .is-active {
+    padding: 8px;
+    background: $c-light-grey;
+  }
+}
+
+ul.list-disc,
+ul.list-mini {
+  &.has-light {
+    > li {
+      &.is-missing {
+        &::after {
+          background-color: $c-white;
+        }
+      }
+
+      &::after {
+        background-color: $c-white;
+      }
+    }
+  }
+}
+
+ul.list-breadcrumb li {
+  display: inline-flex;
+  margin: 0;
+  padding: 0;
+  &.list-breadcrumb-divider {
+    color: #949494;
+    position: relative;
+    top: 4px;
+    padding: 0;
+  }
+}

package/scss/elements/_modal.scss

@@ -0,0 +1,141 @@
+@import '../abstract/_all';
+
+.modalx-transparent.modalx-backdrop {
+  pointer-events: none;
+  background: transparent;
+
+  .modalx {
+    pointer-events: none;
+  }
+
+  .modalx-content {
+    border: 1px solid $c-middle-grey;
+  }
+}
+
+.modalx-xxs {
+  max-width: 320px;
+
+  @media (min-width: $break-sm) {
+    max-width: 445px;
+  }
+}
+
+.modalx-xs {
+  max-width: 295px;
+}
+
+.modalx-sm {
+  max-width: 445px;
+}
+
+.modalx-md {
+  max-width: 595px;
+}
+
+.modalx-lg {
+  max-width: 899px;
+}
+
+.modalx-xl {
+  max-width: 950px;
+}
+
+.modalx-0 {
+  padding: 0;
+  .modalx-body {
+    overflow: hidden;
+  }
+}
+
+.modalx-16 {
+  .modalx-body {
+    padding: 48px 16px 16px;
+
+    @media (min-width: $break-sm) {
+      padding-top: 64px;
+    }
+  }
+}
+
+.modalx-16-16 {
+  .modalx-body {
+    padding: 16px;
+  }
+}
+
+.modalx-24 {
+  .modalx-body {
+    padding: 48px 16px 16px;
+
+    @media (min-width: $break-sm) {
+      padding: 64px 24px 24px;
+    }
+  }
+}
+
+.modalx-32 {
+  .modalx-body {
+    padding: 48px 16px 16px;
+
+    @media (min-width: $break-sm) {
+      padding: 64px 32px 32px;
+    }
+  }
+}
+
+.modalx-40 {
+  .modalx-body {
+    padding: 40px 16px 16px;
+
+    @media (min-width: $break-sm) {
+      padding: 40px;
+    }
+  }
+}
+
+.modalx-0-24 {
+  .modalx-body {
+    padding: 0;
+
+    @media (min-width: $break-sm) {
+      padding: 64px 24px 24px;
+    }
+  }
+}
+
+.modalx-fullmobile {
+  @media (max-width: #{$break-sm - 1}) {
+    margin: 0 !important;
+    max-width: initial;
+    width: 100%;
+    app-shared-ui-modal {
+      min-height: auto;
+      margin: 0;
+    }
+    .modalx-body {
+      margin: 0;
+      max-width: 100vw;
+      min-height: 100vh;
+    }
+  }
+}
+
+.modalx-fullviewport {
+  @media (max-width: #{$break-sm - 1}) {
+    margin: 0;
+    max-width: initial;
+  }
+}
+
+.modalx-centered {
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  min-height: calc(100% - (0.5rem * 2));
+
+  @media (min-width: $break-sm) {
+    min-height: calc(100% - (1.75rem * 2));
+  }
+}

package/scss/elements/_progressbar.scss

@@ -0,0 +1,20 @@
+@import '../abstract/_all';
+
+.progressbar {
+  width: 100%;
+  height: 8px;
+  border-radius: $obj-radius;
+  background-color: $c-middle-grey;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  overflow: hidden;
+
+  .progressbar-status {
+    min-width: 8px;
+    height: 8px;
+    border-radius: $obj-radius;
+    background-color: $c-primary;
+    transition: all 0.2s ease;
+  }
+}