feat: build UI
This commit is contained in:
Viet An
@@ -1,11 +1,13 @@
|
||||
@use "sass:color";
|
||||
@use "bulma/sass/utilities/initial-variables.scss" as *;
|
||||
@use "bulma/sass/utilities/derived-variables.scss" as *;
|
||||
@use "bulma/sass/utilities/mixins.scss" as *;
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900');
|
||||
@use "bulma/sass/components/card.scss" as *;
|
||||
@use "utils.scss";
|
||||
@use "overrides-components.scss";
|
||||
|
||||
:root {
|
||||
--bulma-family-primary: 'Inter', 'SF Pro', 'Helvetica', 'Arial', sans-serif;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
@@ -124,81 +126,15 @@ $size: (
|
||||
// 4. CUSTOM CLASSES
|
||||
// ==========================================
|
||||
|
||||
.fullheight { height: 100vh; }
|
||||
|
||||
.textsize {
|
||||
@include mobile { font-size: 18px; }
|
||||
}
|
||||
|
||||
.header-logo {
|
||||
background: url('/logo_dev.png') no-repeat center center;
|
||||
background-size: 40px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.border-bottom { border-bottom: 1px solid color.change($black-pure, $alpha: 0.15) }
|
||||
|
||||
.carousel-height {
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
@include mobile { height: 110vh; }
|
||||
}
|
||||
|
||||
// Mobile Spacing Utilities
|
||||
.mobile-mt20 { @include mobile { margin-top: 20px; } }
|
||||
.mobile-px10 { @include mobile { padding-left: 10px; padding-right: 10px; } }
|
||||
.mobile-pt10 { @include mobile { padding-top: 10px; } }
|
||||
.mobile-pt80 { padding-top: 120px; @include mobile { padding-top: 80px; } }
|
||||
|
||||
.fullhd-pt30 {
|
||||
padding-top: 30px;
|
||||
@include until($fullhd) { padding-top: 0px; }
|
||||
}
|
||||
|
||||
.media-width {
|
||||
width: 120px !important;
|
||||
@include mobile { width: 112px !important; }
|
||||
}
|
||||
|
||||
.hideon-mobile { @include mobile { display: none; } }
|
||||
|
||||
// Typography Classes
|
||||
.maintext {
|
||||
margin-top: 20px;
|
||||
font-size: 40px;
|
||||
line-height: 3rem;
|
||||
font-weight: 600;
|
||||
color: $blue-dianne;
|
||||
@include mobile { font-size: 34px; }
|
||||
}
|
||||
|
||||
.subtext {
|
||||
margin-top: 30px;
|
||||
font-size: 1.2rem;
|
||||
line-height: 2rem;
|
||||
color: $cutty-sark;
|
||||
@include mobile { line-height: 1.8rem; }
|
||||
}
|
||||
|
||||
.dotslide {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.activetab {
|
||||
border-radius: 8px;
|
||||
color: $white-pure;
|
||||
background-color: $blue-dianne;
|
||||
}
|
||||
|
||||
// Block Layout
|
||||
.blockdiv {
|
||||
max-width: 1900px !important;
|
||||
background-color: $white-pure;
|
||||
padding: 60px 15px 40px 15px;
|
||||
|
||||
@include until($desktop) { padding: 65px 20px 30px 20px; }
|
||||
@@ -213,31 +149,6 @@ $size: (
|
||||
}
|
||||
}
|
||||
|
||||
.padding-text {
|
||||
padding-left: 15%; padding-right: 5%;
|
||||
@include until($desktop) { padding-left: 0; padding-right: 0; }
|
||||
@include until($fullhd) { padding-left: 0; padding-right: 0; }
|
||||
}
|
||||
|
||||
.padding-image {
|
||||
padding-left: 5%; padding-right: 15%;
|
||||
@include until($fullhd) { padding-left: 0; padding-right: 0; }
|
||||
@include until($desktop) { padding-left: 15%; padding-right: 15%; }
|
||||
@include mobile { padding-left: 0; padding-right: 0; }
|
||||
}
|
||||
|
||||
.imgcontainer {
|
||||
position: relative;
|
||||
width: 100% !important;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.centered {
|
||||
position: absolute;
|
||||
top: 80%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Tooltip Styles
|
||||
.tooltip {
|
||||
position: relative;
|
||||
@@ -262,8 +173,6 @@ $size: (
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.to-left { right: 30px; }
|
||||
|
||||
@mixin tooltipshow() {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
@@ -277,166 +186,3 @@ $size: (
|
||||
|
||||
.tooltip:hover .tooltiptext { @include tooltipshow() }
|
||||
.tooltip:hover .tooltiptext .to-left { @include tooltipshow() }
|
||||
|
||||
// Dot Indicators
|
||||
@mixin dot($background) {
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
text-align: center;
|
||||
color: $white-pure;
|
||||
font-weight: bold;
|
||||
background-color: $background;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@each $name, $hex in $color {
|
||||
.dot-#{$name} {
|
||||
@include dot($hex);
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// 5. HELPER CLASSES GENERATOR
|
||||
// ==========================================
|
||||
@each $name, $hex in $color {
|
||||
.bg-#{$name} { background-color: $hex !important; }
|
||||
.text-#{$name} { color: $hex !important; }
|
||||
.border-#{$name} { border-color: $hex !important; }
|
||||
.icon-#{$name} { color: $hex !important; }
|
||||
|
||||
.icon-bg-#{$name} {
|
||||
background-color: $hex !important;
|
||||
color: if(color.channel($hex, "lightness", $space: hsl) > 70, $blue-dianne, $white-pure) !important;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// 6. BULMA OVERRIDES
|
||||
// ==========================================
|
||||
|
||||
// Backgrounds
|
||||
.has-background-primary { background-color: $primary-color !important; }
|
||||
.has-background-secondary { background-color: $secondary-color !important; }
|
||||
.has-background-info { background-color: $info-color !important; }
|
||||
.has-background-success { background-color: $success-color !important; }
|
||||
.has-background-warning { background-color: $warning-color !important; }
|
||||
.has-background-danger { background-color: $danger-color !important; }
|
||||
.has-background-light { background-color: $light-color !important; }
|
||||
.has-background-dark { background-color: $dark-color !important; }
|
||||
.has-background-white { background-color: $white-pure !important; }
|
||||
|
||||
// Text Colors
|
||||
.has-text-primary { color: #086e71 !important; }
|
||||
.has-text-secondary { color: $secondary-color !important; }
|
||||
.has-text-info { color: $info-color !important; }
|
||||
.has-text-success { color: $success-color !important; }
|
||||
.has-text-warning { color: $warning-color !important; }
|
||||
.has-text-danger { color: $danger-color !important; }
|
||||
.has-text-light { color: $accent-color !important; }
|
||||
.has-text-dark { color: $dark-color !important; }
|
||||
|
||||
// Button/Element States (is-*)
|
||||
.is-primary {
|
||||
background-color: $primary-color !important;
|
||||
border-color: transparent !important;
|
||||
color: $white-pure !important;
|
||||
}
|
||||
|
||||
.is-secondary {
|
||||
background-color: $secondary-color !important;
|
||||
border-color: transparent !important;
|
||||
color: $white-pure !important;
|
||||
}
|
||||
|
||||
.is-link {
|
||||
background-color: $link-color !important;
|
||||
border-color: transparent !important;
|
||||
color: $white-pure !important;
|
||||
}
|
||||
|
||||
.is-info {
|
||||
background-color: $info-color !important;
|
||||
border-color: transparent !important;
|
||||
color: $white-pure !important;
|
||||
}
|
||||
|
||||
.is-success {
|
||||
background-color: $success-color !important;
|
||||
border-color: transparent !important;
|
||||
color: $white-pure !important;
|
||||
}
|
||||
|
||||
.is-warning {
|
||||
background-color: $warning-color !important;
|
||||
border-color: transparent !important;
|
||||
color: $white-pure !important;
|
||||
}
|
||||
|
||||
.is-danger {
|
||||
background-color: $danger-color !important;
|
||||
border-color: transparent !important;
|
||||
color: $white-pure !important;
|
||||
}
|
||||
|
||||
.is-light {
|
||||
background-color: $light-color !important;
|
||||
border-color: transparent !important;
|
||||
color: $blue-dianne !important;
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
background-color: $dark-color !important;
|
||||
border-color: transparent !important;
|
||||
color: $white-pure !important;
|
||||
}
|
||||
|
||||
// Outlined Variants
|
||||
.is-primary.is-outlined {
|
||||
background-color: transparent !important;
|
||||
border-color: $primary-color !important;
|
||||
color: $primary-color !important;
|
||||
}
|
||||
|
||||
.is-link.is-outlined {
|
||||
background-color: transparent !important;
|
||||
border-color: $link-color !important;
|
||||
color: $link-color !important;
|
||||
}
|
||||
|
||||
.is-info.is-outlined {
|
||||
background-color: transparent !important;
|
||||
border-color: $info-color !important;
|
||||
color: $info-color !important;
|
||||
}
|
||||
|
||||
.is-success.is-outlined {
|
||||
background-color: transparent !important;
|
||||
border-color: $success-color !important;
|
||||
color: $success-color !important;
|
||||
}
|
||||
|
||||
.is-warning.is-outlined {
|
||||
background-color: transparent !important;
|
||||
border-color: $warning-color !important;
|
||||
color: $warning-color !important;
|
||||
}
|
||||
|
||||
.is-primary.is-light {
|
||||
background-color: rgba($primary-color, 0.1) !important;
|
||||
color: $primary-color !important;
|
||||
}
|
||||
|
||||
.is-info.is-light {
|
||||
background-color: rgba($info-color, 0.2) !important;
|
||||
color: color.adjust($info-color, $lightness: -10%) !important;
|
||||
}
|
||||
|
||||
.is-success.is-light {
|
||||
background-color: rgba($success-color, 0.1) !important;
|
||||
color: $success-color !important;
|
||||
}
|
||||
6
app/assets/styles/overrides-components.scss
Normal file
6
app/assets/styles/overrides-components.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
@use "bulma/sass/utilities/initial-variables.scss" as *;
|
||||
|
||||
.card {
|
||||
--bulma-card-shadow: none;
|
||||
border: 1px solid $grey-lighter;
|
||||
}
|
||||
237
app/assets/styles/utils.scss
Normal file
237
app/assets/styles/utils.scss
Normal file
@@ -0,0 +1,237 @@
|
||||
@use "sass:list";
|
||||
|
||||
.font-thin {
|
||||
font-weight: 100;
|
||||
}
|
||||
.font-extralight {
|
||||
font-weight: 200;
|
||||
}
|
||||
.font-light {
|
||||
font-weight: 300;
|
||||
}
|
||||
.font-normal {
|
||||
font-weight: 400;
|
||||
}
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
.font-extrabold {
|
||||
font-weight: 800;
|
||||
}
|
||||
.font-black {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.rounded-xs {
|
||||
border-radius: 0.125rem;
|
||||
}
|
||||
.rounded-sm {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.rounded-md {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
.rounded-lg {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
.rounded-xl {
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
.rounded-2xl {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.rounded-3xl {
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
.rounded-4xl {
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.rounded-none {
|
||||
border-radius: 0;
|
||||
}
|
||||
.rounded-full {
|
||||
border-radius: calc(infinity * 1px);
|
||||
}
|
||||
|
||||
$base: 0.25rem;
|
||||
|
||||
@function spacing($step) {
|
||||
@return $step * $base;
|
||||
}
|
||||
|
||||
$spacing-types: (
|
||||
"p": "padding",
|
||||
"m": "margin",
|
||||
);
|
||||
|
||||
$spacing-variants: (
|
||||
"": (""),
|
||||
"x": ("-left", "-right"),
|
||||
"y": ("-top", "-bottom"),
|
||||
"t": ("-top"),
|
||||
"b": ("-bottom"),
|
||||
"l": ("-left"),
|
||||
"r": ("-right"),
|
||||
);
|
||||
|
||||
@each $type-prefix, $type in $spacing-types {
|
||||
@each $dir-suffix, $sides in $spacing-variants {
|
||||
@for $i from 0 through 48 {
|
||||
// Whole step: p-0, p-1, p-2 ...
|
||||
.#{$type-prefix}#{$dir-suffix}-#{$i} {
|
||||
@each $side in $sides {
|
||||
#{$type}#{$side}: spacing($i);
|
||||
}
|
||||
}
|
||||
|
||||
// Half step: p-0\.5, p-1\.5, p-2\.5 ...
|
||||
// Stop at 47.5 — 48.5 would exceed the scale
|
||||
@if $i < 48 {
|
||||
.#{$type-prefix}#{$dir-suffix}-#{$i}\.5 {
|
||||
@each $side in $sides {
|
||||
#{$type}#{$side}: spacing($i + 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── CSS custom properties ─────────────────────────────────────────────────
|
||||
:root {
|
||||
--spacing: 0.25rem;
|
||||
--container-3xs: 16rem;
|
||||
--container-2xs: 18rem;
|
||||
--container-xs: 20rem;
|
||||
--container-sm: 24rem;
|
||||
--container-md: 28rem;
|
||||
--container-lg: 32rem;
|
||||
--container-xl: 36rem;
|
||||
--container-2xl: 42rem;
|
||||
--container-3xl: 48rem;
|
||||
--container-4xl: 56rem;
|
||||
--container-5xl: 64rem;
|
||||
--container-6xl: 72rem;
|
||||
--container-7xl: 80rem;
|
||||
}
|
||||
|
||||
// ─── Shared mixin ──────────────────────────────────────────────────────────
|
||||
@mixin set-props($props, $value) {
|
||||
@each $prop in $props {
|
||||
#{$prop}: $value;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Class types ───────────────────────────────────────────────────────────
|
||||
$class-types: (
|
||||
"w": (width),
|
||||
"h": (height),
|
||||
"size": (width, height),
|
||||
);
|
||||
|
||||
// ─── Numeric: w-0 → w-48, h-0 → h-48, size-0 → size-48 ───────────────────
|
||||
@each $prefix, $props in $class-types {
|
||||
@for $i from 0 through 48 {
|
||||
.#{$prefix}-#{$i} {
|
||||
@include set-props($props, calc(var(--spacing) * #{$i}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Fractions ─────────────────────────────────────────────────────────────
|
||||
$fractions: (
|
||||
"1\\/2": (1, 2),
|
||||
"1\\/3": (1, 3),
|
||||
"2\\/3": (2, 3),
|
||||
"1\\/4": (1, 4),
|
||||
"2\\/4": (2, 4),
|
||||
"3\\/4": (3, 4),
|
||||
"1\\/5": (1, 5),
|
||||
"2\\/5": (2, 5),
|
||||
"3\\/5": (3, 5),
|
||||
"4\\/5": (4, 5),
|
||||
"1\\/6": (1, 6),
|
||||
"2\\/6": (2, 6),
|
||||
"3\\/6": (3, 6),
|
||||
"4\\/6": (4, 6),
|
||||
"5\\/6": (5, 6),
|
||||
"1\\/12": (1, 12),
|
||||
"2\\/12": (2, 12),
|
||||
"3\\/12": (3, 12),
|
||||
"4\\/12": (4, 12),
|
||||
"5\\/12": (5, 12),
|
||||
"6\\/12": (6, 12),
|
||||
"7\\/12": (7, 12),
|
||||
"8\\/12": (8, 12),
|
||||
"9\\/12": (9, 12),
|
||||
"10\\/12": (10, 12),
|
||||
"11\\/12": (11, 12),
|
||||
);
|
||||
|
||||
@each $prefix, $props in $class-types {
|
||||
@each $name, $pair in $fractions {
|
||||
$num: list.nth($pair, 1);
|
||||
$den: list.nth($pair, 2);
|
||||
.#{$prefix}-#{$name} {
|
||||
@include set-props($props, calc(#{$num} / #{$den} * 100%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Container sizes (w- only) ─────────────────────────────────────────────
|
||||
$containers: (
|
||||
"3xs", "2xs", "xs", "sm", "md", "lg", "xl",
|
||||
"2xl", "3xl", "4xl", "5xl", "6xl", "7xl"
|
||||
);
|
||||
|
||||
@each $name in $containers {
|
||||
.w-#{$name} { width: var(--container-#{$name}); }
|
||||
}
|
||||
|
||||
// ─── Shared keywords (auto, px, full, min, max, fit) ───────────────────────
|
||||
// These are identical in value across w-, h-, and size-
|
||||
$shared-keywords: (
|
||||
"auto": auto,
|
||||
"px": 1px,
|
||||
"full": 100%,
|
||||
"min": min-content,
|
||||
"max": max-content,
|
||||
"fit": fit-content,
|
||||
);
|
||||
|
||||
@each $prefix, $props in $class-types {
|
||||
@each $name, $value in $shared-keywords {
|
||||
.#{$prefix}-#{$name} {
|
||||
@include set-props($props, $value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Viewport keywords ─────────────────────────────────────────────────────
|
||||
// dvw/dvh/lvw/lvh/svw/svh apply equally to w-, h-, and size-
|
||||
$viewport-keywords: (
|
||||
"dvw": 100dvw,
|
||||
"dvh": 100dvh,
|
||||
"lvw": 100lvw,
|
||||
"lvh": 100lvh,
|
||||
"svw": 100svw,
|
||||
"svh": 100svh,
|
||||
);
|
||||
|
||||
@each $prefix, $props in $class-types {
|
||||
@each $name, $value in $viewport-keywords {
|
||||
.#{$prefix}-#{$name} {
|
||||
@include set-props($props, $value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.w-screen { width: 100vw; }
|
||||
.h-screen { height: 100vh; }
|
||||
Reference in New Issue
Block a user