@betarena/ad-engine 0.4.0 → 1.0.0

package/src/style/scss/button.scss

@@ -1,266 +0,0 @@
-/* #region ➤ [MAIN] [BUTTONS] Website Layout */
-
-/*
-╭──────────────────────────────────────────────────────────────────╮
-│ 📌 BUTTON STYLES                                                 │
-╰──────────────────────────────────────────────────────────────────╯
-*/
-
-button
-{
-  /* 🎨 style */
-  outline: none !important;
-  border: none !important;
-  opacity: 1;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  align-items: center;
-  white-space: nowrap;
-  display: flex;
-  justify-content: center;
-
-  &:disabled
-  {
-    cursor: default;
-  }
-
-  &.btn-primary
-  {
-    /* 🎨 style */
-    background: var(--primary);
-
-    p
-    {
-      /* 🎨 style */
-      color: var(--white);
-    }
-  }
-
-  &.btn-secondary
-  {
-    /* 🎨 style */
-    background: var(--secondary);
-
-    p
-    {
-      /* 🎨 style */
-      color: var(--white);
-    }
-  }
-
-  &.btn-blue
-  {
-    /* 🎨 style */
-    background-color: var(--blue);
-
-    p
-    {
-      /* 🎨 style */
-      color: var(--white);
-    }
-
-    &:hover
-    {
-      /* 🎨 style */
-      background-color: var(--white);
-
-      p
-      {
-        /* 🎨 style */
-        color: var(--secondary);
-      }
-    }
-  }
-
-  &.btn-white
-  {
-    /* 🎨 style */
-    background-color: var(--white);
-
-    p
-    {
-      /* 🎨 style */
-      color: var(--black);
-    }
-  }
-
-  &.btn-primary-v2
-  {
-    /* 🎨 style */
-    height: 44px;
-    padding: 11.5px 24px;
-    background: var(--primary);
-    border-radius: 8px;
-    color: var(--white);
-
-    &:hover
-    {
-      /* 🎨 style */
-      background-color: var(--primary-fade);
-    }
-  }
-
-  &.btn-hollow
-  {
-    /* 🎨 style */
-    height: 44px;
-    padding: 11.5px 20px;
-    background: transparent;
-    border: 1px solid var(--grey-color) !important;
-    border-radius: 8px;
-    color: var(--dark-theme);
-
-    &:hover
-    {
-      /* 🎨 style */
-      border: 1px solid var(--primary) !important;
-      color: var(--primary);
-    }
-
-    /*
-    Variant (2)
-    */
-    &.danger
-    {
-      /* 🎨 style */
-      border: 1px solid var(--red) !important;
-    }
-
-    /*
-    Variant (3)
-    */
-    &.cta
-    {
-      /* 🎨 style */
-      border: 1px solid var(--primary) !important;
-
-      &:hover
-      {
-        /* 🎨 style */
-        background-color: var(--primary);
-        color: var(--white) !important;
-      }
-    }
-
-    /*
-    Variant (4)
-    */
-    &.v4:hover
-    {
-      /* 🎨 style */
-      border: 1px solid var(--grey-shade) !important;
-      color: initial;
-    }
-
-    /*
-    Variant (6)
-    */
-    &.v6
-    {
-      /* 🎨 style */
-      background: #292929;
-      height: 44px;
-      padding: 12px 24px 11px 24px;
-      border-radius: 8px;
-      border: 1px;
-      gap: 10px;
-
-      .dark-background &
-      , .dark-background-1 &
-      , .dark-mode &
-      {
-        /* 🎨 style */
-        border: 1px solid #FFFFFF
-      }
-    }
-
-    .dark-background &
-    , .dark-background-1 &
-    , .dark-mode &
-    {
-      &.v2
-      {
-        /* 🎨 style */
-        border: 1px solid var(--dark-theme-1) !important;
-      }
-
-      &.v3d
-      {
-        /* 🎨 style */
-        border: 1px solid var(--grey) !important;
-
-        &:hover
-        {
-          /* 🎨 style */
-          border: 1px solid var(--grey-shade) !important;
-        }
-      }
-
-      &.v5d
-      {
-        /* 🎨 style */
-        border: 1px solid var(--dark-theme-1-shade) !important;
-      }
-    }
-  }
-
-  &.btn-dark
-  {
-    /* 🎨 style */
-    padding: 10px 17px;
-    border-radius: 12px;
-    background-color: var(--grey-color);
-
-    &:hover
-    {
-      /* 🎨 style */
-      background-color: var(--white-3);
-    }
-
-    .dark-background &
-    , .dark-background-1 &
-    , .dark-mode &
-    {
-      /* 🎨 style */
-      background-color: var(--dark-theme-1-4-shade);
-
-      &:hover
-      {
-        /* 🎨 style */
-        background-color: var(--dark-theme);
-      }
-    }
-  }
-
-  &.btn-right-icon
-  {
-    /* 🎨 style */
-    padding: 5px 45px 5px 6px !important;
-    background-position: right 11px top 50%;
-    background-size: 16.17px 16.17px;
-    background-repeat: no-repeat;
-  }
-
-  &.btn-left-icon
-  {
-    /* 🎨 style */
-    padding: 5px 6px 5px 37px !important;
-    background-position: left 11px top 50%;
-    background-size: 16.17px 16.17px;
-    background-repeat: no-repeat;
-  }
-
-  /*
-  ╭──────────────────────────────────────────────────────────────────╮
-  │ 📌 EXTRA BUTTON STYLES                                           │
-  ╰──────────────────────────────────────────────────────────────────╯
-  */
-
-  &.btn-shadow-1
-  {
-    /* 🎨 style */
-    box-shadow: 0px 3px 8px 0px rgba(212, 84, 12, 0.32);
-  }
-}
-
-/* #endregion ➤ [MAIN] [BUTTONS] Website Layout */

package/src/style/scss/common.scss

@@ -1,40 +0,0 @@
-$prefixes: ('moz', 'webkit', 'ms', 'o');
-
-@mixin prefix
-(
-  $property
-  , $value
-)
-{
-  @each $prefix in $prefixes
-  {
-    -#{$prefix}-#{$property}: $value;
-  }
-  #{$property}: $value;
-}
-
-@mixin keyframes
-(
-  $name
-)
-{
-  @keyframes #{$name}
-  {
-    @content;
-  }
-
-  @-webkit-keyframes #{$name}
-  {
-    @content;
-  }
-
-  @-moz-keyframes #{$name}
-  {
-    @content;
-  }
-
-  @-o-keyframes #{$name}
-  {
-    @content;
-  }
-}

package/src/style/scss/font.scss

@@ -1,296 +0,0 @@
-/*
-╭──────────────────────────────────────────────────────────────────────────────────╮
-│ 📌 FONT WEIGHT                                                                   │
-╰──────────────────────────────────────────────────────────────────────────────────╯
-*/
-
-$fontWeight: (400, 500, 600, 700, 'normal');
-
-//
-// Generate possible Font Weights
-//
-
-@each $w in $fontWeight
-{
-  .w-#{$w}
-  {
-    font-weight: $w;
-  }
-}
-
-/*
-╭──────────────────────────────────────────────────────────────────────────────────╮
-│ 📌 FONT SIZE                                                                     │
-╰──────────────────────────────────────────────────────────────────────────────────╯
-*/
-
-$fontSize: 50;
-
-//
-// Generate possible Font Sizes
-//
-
-@for $i from 1 through $count
-{
-  .s-#{$i},
-  .global.s-#{$i},
-  .global.s-#{$i} > *
-  {
-    font-size: #{$i}px;
-  }
-}
-
-/*
-╭──────────────────────────────────────────────────────────────────────────────────╮
-│ 📌 LEGACY                                                                        │
-╰──────────────────────────────────────────────────────────────────────────────────╯
-*/
-
-.global.color-grey > *
-{
-  color: var(--grey) !important;
-}
-
-.x-large,
-p.x-large,
-span.x-large
-{
-  font-size: 18px;
-}
-
-.large,
-p.large,
-span.large
-{
-  font-size: 16px;
-}
-
-.medium,
-p.medium,
-span.medium
-{
-  font-size: 14px;
-}
-
-.small,
-p.small
-{
-  font-size: 12px;
-}
-
-.s_small,
-p.s_small
-{
-  font-size: 12px;
-}
-
-@media only screen and (min-width: 768px)
-{
-  .s-t-16
-  {
-    font-size: 16px;
-  }
-  .large,
-  p.large,
-  span.large
-  {
-    font-size: 18px;
-  }
-}
-
-/*
-╭──────────────────────────────────────────────────────────────────────────────────╮
-│ 📌 HEADINGS                                                                      │
-╰──────────────────────────────────────────────────────────────────────────────────╯
-*/
-
-@mixin defaultHeader
-{
-  /* 🎨 style */
-  font-family: "Roboto";
-  font-style: normal;
-  font-weight: 400;
-  line-height: 1.2;
-}
-
-@for $i from 1 through 6
-{
-  h#{$i}
-  {
-    @include defaultHeader;
-    font-weight: 700;
-    line-height: 140%;
-
-    @if $i == 1
-    {
-      font-size: 32px;
-    }
-    @else if $i == 2
-    {
-      font-size: 20px;
-    }
-    @else if $i == 3
-    {
-      font-size: 18px;
-    }
-    @else if $i == 4
-    {
-      font-size: 14px;
-    }
-  }
-}
-
-.global.lh-125 > *
-{
-  /* 🎨 style */
-  line-height: 125%;
-}
-
-.global.lh-128 > *
-{
-  /* 🎨 style */
-  line-height: 128.571%;
-}
-
-/*
-╭──────────────────────────────────────────────────────────────────────────────────╮
-│ 📌 FONT COLORS                                                                   │
-╰──────────────────────────────────────────────────────────────────────────────────╯
-*/
-
-@each $key, $data in $root-color-map
-{
-  .#{map-get($data, "class-name")}
-  {
-    /* 🎨 style */
-    color: var(#{map-get($data, "root-name")}) !important;
-
-    @each $key-dark, $data-dark in map-get($data, "dark-mirror")
-    {
-      .dark-background &
-      , .dark-background-1 &
-      , .dark-mode &
-      {
-        &#{map-get($data-dark, "class-name")}
-        {
-          /* 🔥 override */
-          /* 🎨 style */
-          color: var(#{map-get($data-dark, "root-name")}) !important;
-        }
-      }
-    }
-  }
-}
-
-.color-blue-green-gradient
-{
-  /* 🎨 style */
-  background: -webkit-linear-gradient rgb(0, 255, 117), rgb(0, 163, 255);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.hover-color-primary:hover
-{
-  /* 🎨 style */
-  color: var(--primary) !important;
-}
-
-/*
-╭──────────────────────────────────────────────────────────────────────────────────╮
-│ 📌 FONT EXTRA STYLES                                                             │
-╰──────────────────────────────────────────────────────────────────────────────────╯
-*/
-
-.no-wrap
-{
-  white-space: nowrap;
-}
-
-.underline
-{
-  text-decoration: underline !important;
-}
-
-.bold
-{
-  font-style: normal;
-  font-weight: bold;
-}
-
-.not-bold
-{
-  font-weight: normal;
-}
-
-.lowercase
-{
-  text-transform: lowercase;
-}
-
-.uppercase
-{
-  text-transform: uppercase;
-}
-
-.capitalize
-{
-  text-transform: capitalize;
-}
-
-.text-center
-{
-  text-align: center;
-  text-align: -webkit-center;
-  text-align: -moz-center;
-}
-
-.text-left
-{
-  text-align: left;
-  text-align: -webkit-left;
-  text-align: -moz-left;
-}
-
-.text-right
-{
-  text-align: right;
-  text-align: -webkit-right;
-  text-align: -moz-right;
-}
-
-.place-center
-{
-  place-self: center;
-}
-
-.cursor-pointer
-{
-  cursor: pointer;
-}
-
-.cursor-not-allowed
-{
-  cursor: not-allowed !important;
-}
-
-.display-none
-{
-  display: none !important;
-}
-
-.display-unset
-{
-  display: unset !important;
-}
-
-.visibility-none
-{
-  visibility: hidden;
-}
-
-.opacity-0-4
-{
-  opacity: 0.4;
-}