@betarena/ad-engine 0.4.0 → 1.0.0

package/src/style/scss/layout.scss

@@ -1,175 +0,0 @@
-/* #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

@@ -1,46 +0,0 @@
-/* #region ➤ [MAIN] Website Layout */
-
-*
-{
-  box-sizing: border-box;
-}
-
-a
-{
-  text-decoration: none !important;
-  color: inherit;
-  display: flex;
-
-  &.disable-anchor
-  {
-    pointer-events: none;
-  }
-}
-
-p
-{
-  /* 🎨 style */
-  font-style: normal;
-  font-weight: 400;
-  font-family: Roboto;
-  line-height: 150%;
-  margin: 0;
-  color: var(--dark-theme);
-}
-
-/*
-### 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

@@ -1,189 +0,0 @@
-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

@@ -1,41 +0,0 @@
-/* #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 */