@betarena/ad-engine 0.0.23 → 0.0.25

package/src/style/scss/layout.scss

@@ -0,0 +1,175 @@
+/* #region ➤ [MAIN] [CONTAINERS] Website Layout */
+
+.widget-component
+{
+  display: grid;
+  background: #ffffff;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  width: 100%;
+  padding: 20px 0;
+  overflow: hidden;
+
+  .dark-background &
+  , .dark-mode &
+  {
+    /* 🎨 style */
+    background-color: var(--dark-theme-1) !important;
+  }
+}
+
+.container
+{
+  display: block;
+  position: relative;
+  padding-left: 20px;
+  cursor: pointer;
+  font-size: 22px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  & input
+  {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 1px;
+    width: 1px;
+
+    &:checked ~ .checkmark
+    {
+      background-color: var(--primary);
+      border: 1.5px solid transparent;
+    }
+  }
+}
+
+section
+{
+  min-height: calc(100vh - 128px);
+  padding: 22px 16px;
+  padding-bottom: 100px !important;
+  margin: auto;
+
+  @media only screen and (min-width: 768px)
+  {
+    padding: 26px 34px;
+    margin: auto;
+  }
+
+  @media only screen and (min-width: 1025px)
+  {
+    padding: 26px 34px;
+    margin: auto;
+  }
+}
+
+.flex-start
+{
+  align-items: flex-start !important;
+}
+
+.row
+{
+  @mixin default
+  {
+    /* 🎨 style */
+    display: flex;
+    align-items: center;
+    align-content: center;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+  &-space-out
+  {
+    @include default;
+    justify-content: space-between;
+  }
+
+  &-space-even
+  {
+    @include default;
+    justify-content: space-evenly;
+  }
+
+  &-space-start
+  {
+    @include default;
+    justify-content: start;
+  }
+
+  &-space-out-top
+  {
+    @include default;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  &-space-center
+  {
+    @include default;
+    justify-content: center;
+  }
+
+  &-space-end
+  {
+    @include default;
+    justify-content: end;
+  }
+
+}
+
+.column
+{
+  &-space-center
+  {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    width: 100%;
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+
+  &-space-start
+  {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: flex-start;
+    width: 100%;
+    flex-direction: column;
+    flex-wrap: nowrap;
+  }
+
+  &-space-stretch
+  {
+    display: flex;
+    align-content: center;
+    width: 100%;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    justify-content: center;
+  }
+
+  &-start-grid
+  {
+    display: grid;
+    justify-content: center;
+  }
+
+  &-start-grid-start
+  {
+    display: grid;
+    width: 100%;
+    justify-items: start;
+  }
+}
+
+/* #endregion ➤ [MAIN] [CONTAINERS] Website Layout */

package/src/style/scss/main.scss

@@ -0,0 +1,91 @@
+/* #region ➤ [MAIN] Website Layout */
+
+*
+{
+  box-sizing: border-box;
+}
+
+body,
+html
+{
+  margin: 0 !important;
+  background-color: var(--white);
+  scroll-behavior: smooth !important;
+}
+
+body
+{
+  color: var(--black);
+  background-color: var(--whitev2);
+  margin: 0 !important;
+  font-family: Roboto;
+  font-size: 14px;
+  line-height: 1.5;
+  /*
+     MOBILE
+     disable pinchin & user zooming on */
+  /* touch-action: pan-x pan-y; */
+  /*
+  SAFARI */
+  -webkit-text-size-adjust: none;
+
+  &.disable-scroll
+  {
+    /* 🎨 style */
+    overflow: hidden;
+    height: 100%;
+  }
+}
+
+a
+{
+  text-decoration: none !important;
+  color: inherit;
+  display: flex;
+
+  &.disable-anchor
+  {
+    pointer-events: none;
+  }
+}
+
+.inter-font
+{
+  font-family: Inter;
+}
+
+p
+{
+  font-style: normal;
+  font-weight: 400; /* 400 / 500 */
+  line-height: 150%;
+  margin: 0;
+  color: var(--dark-theme);
+}
+
+/* MOBILE VIEW OVERFLOW HIDDEN */
+@media only screen and (max-width: 375px)
+{
+  html,
+  body
+  {
+    overflow-x: hidden;
+  }
+}
+
+/*
+### NOTE:
+### zoom-out-mobiles-input-form
+### SEE:
+### https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
+*/
+@supports (-webkit-overflow-scrolling: touch)
+{
+  form input:active,
+  input:active
+  {
+    font-size: 16px !important;
+  }
+}
+
+/* #endregion ➤ [MAIN] Website Layout */

package/src/style/scss/misc.scss

@@ -0,0 +1,189 @@
+hr
+{
+  /* 🎨 style */
+  width: 100%;
+  margin: 16.17px 0;
+  opacity: 0.25;
+  border: 1.46983px solid #ff5555;
+  background-color: #ff5555;
+}
+
+form
+{
+  fieldset
+  {
+    /* 🎨 style */
+    outline: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  input
+  , select
+  {
+    /* 🎨 style */
+    outline: none;
+    border: none;
+    opacity: 1;
+    cursor: text;
+    align-items: center;
+    text-align: start;
+    display: flex;
+    transition: all 0.15s ease;
+    /* background: #ffffff; */
+    /* border: 0.5px solid #37474f; */
+    box-sizing: border-box;
+    border-radius: 7.34914px;
+    padding: 7px;
+    background-color: transparent;
+    border: 1px solid var(--gray-day, #CCC);
+  }
+
+  input
+  {
+    /* 🎨 style */
+    height: 44px;
+    width: -webkit-fill-available;
+    width: -moz-available;
+    border: 1px solid var(--grey-shade);
+    box-sizing: border-box;
+    border-radius: 8px;
+    padding: 20px 12px;
+    outline: none;
+    font-size: 14px;
+    background-color: transparent;
+
+    &:hover
+    {
+      /* 🎨 style */
+      border: 1px solid var(--grey);
+    }
+
+    &:focus
+    {
+      /* 🎨 style */
+      border: 1px solid var(--dark-theme-1);
+    }
+
+    &[placeholder]
+    {
+      /* 🎨 style */
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &.v-1
+    {
+      /* 🎨 style */
+      width: 20px;
+      height: 20px;
+      border: 1px solid #CCCCCC;
+      accent-color: var(--primary);
+    }
+
+    .dark-background-1 &
+    , .dark-mode &
+    {
+      border: 1px solid var(--dark-theme-1-2-shade);
+
+      &:hover
+      {
+        /* 🎨 style */
+        border: 1px solid var(--dark-theme-1-3-shade);
+      }
+
+      &:focus
+      {
+        /* 🎨 style */
+        border: 1px solid var(--dark-theme-1-3-shade);
+      }
+    }
+  }
+}
+
+.width-auto
+{
+  width: auto;
+}
+
+.width-fit-content
+{
+  width: fit-content;
+}
+
+.width-100
+{
+  width: 100%;
+}
+
+// IMPORTANT
+img.google-aspect-ratio
+{
+  /* 🎨 style */
+  /* width: auto; */
+  /* max-height: 100%; */
+  object-fit: contain;
+}
+
+.checkmark
+{
+  position: absolute;
+  top: -10px;
+  left: 0;
+  height: 20px;
+  width: 20px;
+  background-color: transparent;
+  border: 1.5px solid #A9B8AE;
+  border-radius: 3.25px;
+}
+
+/*
+╭──────────────────────────────────────────────────────────────────╮
+│ 📌 POSITIONS                                                     │
+╰──────────────────────────────────────────────────────────────────╯
+*/
+
+.box-center {
+  /* 📌 position */
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  margin: auto;
+}
+
+.mutated
+{
+  /* 🎨 style */
+  border: 1px solid #F00;
+}
+
+/*
+◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+◼️ DARK-THEME :: GENERAL                                                                ◼️
+◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+*/
+.dark-background {
+  /* 🎨 style */
+  background-color: var(--dark-theme) !important;
+}
+
+.dark-background-1 {
+  /* 🎨 style */
+  background-color: var(--dark-theme-1) !important;
+}
+
+/*
+◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+◼️ DARK-THEME :: OTHER                                                                  ◼️
+◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️◼️
+*/
+.dark-background .hover-color-primary:hover,
+.dark-background-1 .hover-color-primary:hover,
+.dark-mode .hover-color-primary:hover {
+  /* 🎨 style */
+  color: var(--primary) !important;
+}

package/src/style/scss/spacing.scss

@@ -0,0 +1,41 @@
+/* #region ➤ [MAIN] [MARGINS] Website Layout */
+
+$marginDirection: ('r','l','t','b');
+$count: 100;
+
+//
+// Generate possible Margins
+//
+
+.m-0
+{
+  margin: 0;
+}
+
+@each $dir in $marginDirection
+{
+  .m-#{$dir}
+  {
+    @for $i from 1 through $count
+    {
+      @if $dir == r
+      {
+        &-#{$i} { margin-right: #{$i}px; }
+      }
+      @else if $dir == l
+      {
+        &-#{$i} { margin-left: #{$i}px; }
+      }
+      @else if $dir == t
+      {
+        &-#{$i} { margin-top: #{$i}px; }
+      }
+      @else if $dir == b
+      {
+        &-#{$i} { margin-bottom: #{$i}px; }
+      }
+    }
+  }
+}
+
+/* #endregion ➤ [MAIN] [MARGINS] Website Layout */