@betarena/ad-engine 0.0.23 → 0.0.25

package/src/style/scss/button.scss

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

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

@@ -0,0 +1,298 @@
+@use '_root';
+
+/*
+╭──────────────────────────────────────────────────────────────────────────────────╮
+│ 📌 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;
+}