xinyouhe/orzar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
chenlan
2025-06-05 14:46:21 +08:00
commit 89e6faffb8
325 changed files with 57267 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/sass/helpers/_classes.scss
Executable
+222
View File
@@ -0,0 +1,222 @@
// Text Colors
.color-primary {
color: $accent-1 !important;
}
.color-sec {
color: $accent-2 !important;
}
.color-ter {
color: $accent-3 !important;
}
.color-quant {
color: $accent-4 !important;
}
.black {
color: $black;
}
.black-2 {
color: $black-2;
}
.medium-black {
color: $medium-black !important;
}
.light-black {
color: $light-black !important;
}
.dark-gray {
color: $dark-gray !important;
}
.light-gray {
color: $light-gray !important;
}
.lightest-gray {
color: $lightest-gray !important;
}
.light-white {
color: $light-white !important;
}
.white {
color: $white ;
}
// Background Colors
.bg-primary {
background: $accent-1 !important;
}
.bg-sec {
background: $accent-2 !important;
}
.bg-ter {
background: $accent-3 !important;
}
.bg-quant {
background: $accent-4 !important;
}
.bg-black {
background: $black !important;
}
.bg-medium-black {
background: $medium-black !important;
}
.bg-light-black {
background: $light-black !important;
}
.bg-dark-gray {
background: $dark-gray !important;
}
.bg-light-gray {
background: $light-gray !important;
}
.bg-lightest-gray {
background: $lightest-gray !important;
}
.bg-light-white {
background: $light-white !important;
}
.bg-white {
background: $white !important;
}
.bg-white-bordered {
background: $white;
border: 1px solid $lightest-gray;
border-radius: $br-12;
}
// ------------- Font Weight -------------- //
.fw-200 {
font-weight: 200;
}
.fw-300 {
font-weight: 300;
}
.fw-400 {
font-weight: 400;
}
.fw-500 {
font-weight: 500;
}
.fw-600 {
font-weight: 600;
}
.fw-700 {
font-weight: 700;
}
.fw-800 {
font-weight: 800;
}
.font-primary{
font-family: $font-primary;
}
.font-sec{
font-family: $font-sec;
}
// ------------- Border Radius -------------- //
.br-4{
border-radius: $br-4;
}
.br-8{
border-radius: $br-8;
}
.br-10{
border-radius: $br-10;
}
.br-12{
border-radius: $br-12;
}
.br-14{
border-radius: $br-14;
}
.br-16{
border-radius: $br-16;
}
.br-18{
border-radius: $br-18;
}
.br-20{
border-radius: $br-20;
}
.br-24{
border-radius: $br-24;
}
.br-32{
border-radius: $br-32;
}
// ------------- Gap -------------- //
.gap-4{
$gap-4: clamp(2px, 0.208vw, 8px);
}
.gap-8{
$gap-8: clamp(4px, 0.417vw, 16px);
}
.gap-10{
$gap-10: clamp(5px, 0.521vw, 20px);
}
.gap-12{
$gap-12: clamp(8px, 0.625vw, 24px);
}
.gap-14{
$gap-14: clamp(10px, 0.729vw, 28px);
}
.gap-16{
$gap-16: clamp(12px, 0.833vw, 32px);
}
.gap-18{
$gap-18: clamp(14px, 0.938vw, 36px);
}
.gap-20{
$gap-20: clamp(16px, 1.042vw, 40px);
}
.gap-24{
$gap-24: clamp(18px, 1.25vw, 48px);
}
.gap-32{
$gap-32: clamp(24px, 1.667vw, 64px);
}
.gap-38{
$gap-38: clamp(28px, 1.979vw, 76px);
}
.gap-48{
$gap-48: clamp(10px, 2.5vw, 28px);
}
.gap-64{
$gap-64: clamp(48px, 3.333vw, 128px);
}
assets/sass/helpers/_mixin.scss
Executable
+17
View File
@@ -0,0 +1,17 @@
@mixin widther( $length ) {
@media screen and (min-width: $length) {
@content;
}
}
@mixin media-query( $length ) {
@media (max-width: $length) {
@content;
}
}
@mixin short-query( $min , $max ) {
@media only screen and (min-width: $min) and (max-width: $max) {
@content;
}
}
assets/sass/helpers/_spacing.scss
Executable
+430
View File
@@ -0,0 +1,430 @@
/*----------------------------------------*/
/* SPACE CSS START
/*----------------------------------------*/
.my-80 {
margin: clamp(48px, 4.167vw, 160px) 0;
@include media-query(575px) {
margin: 40px 0;
}
}
.mt-80 {
margin-top: clamp(48px, 4.167vw, 160px);
@include media-query(575px) {
margin-top: 40px;
}
}
.mb-80 {
margin-bottom: clamp(48px, 4.167vw, 160px);
@include media-query(575px) {
margin-bottom: 40px;
}
}
.mb-64 {
margin-bottom: clamp(32px, 3.33vw, 128px);
@include media-query(767px) {
margin-bottom: 26px;
}
}
.mt-64 {
margin-top: clamp(32px, 3.33vw, 128px);
@include media-query(767px) {
margin-top: 26px;
}
}
.mt-48 {
margin-top: clamp(24px, 2.5vw, 96px);
@include media-query(767px) {
margin-top: 20px;
}
}
.mb-48 {
margin-bottom: clamp(24px, 2.5vw, 96px);
@include media-query(767px) {
margin-bottom: 20px;
}
}
.mt-32 {
margin-top: 32px;
@include media-query(1599px) {
margin-top: 29px;
}
@include media-query(1399px) {
margin-top: 27px;
}
@include media-query(1199px) {
margin-top: 25px;
}
@include media-query(991px) {
margin-top: 22px;
}
@include media-query(767px) {
margin-top: 20px;
}
}
.mb-32 {
margin-bottom: 32px;
@include media-query(1599px) {
margin-bottom: 29px;
}
@include media-query(1399px) {
margin-bottom: 27px;
}
@include media-query(1199px) {
margin-bottom: 25px;
}
@include media-query(991px) {
margin-bottom: 22px;
}
@include media-query(767px) {
margin-bottom: 20px;
}
}
.mt-24 {
margin-top: 24px;
@include media-query(1199px) {
margin-top: 22px;
}
@include media-query(991px) {
margin-top: 22px;
}
@include media-query(767px) {
margin-top: 20px;
}
}
.my-24 {
margin-top: 24px;
margin-bottom: 24px;
@include media-query(1199px) {
margin-top: 22px;
margin-bottom: 24px;
}
@include media-query(991px) {
margin-top: 22px;
margin-bottom: 24px;
}
@include media-query(767px) {
margin-top: 20px;
margin-bottom: 22px;
}
}
.mb-24 {
margin-bottom: 24px;
@include media-query(1199px) {
margin-bottom: 22px;
}
@include media-query(991px) {
margin-bottom: 22px;
}
@include media-query(767px) {
margin-bottom: 20px;
}
}
.mt-16 {
margin-top: 16px;
@include media-query(1199px) {
margin-top: 15px;
}
@include media-query(991px) {
margin-top: 14px;
}
@include media-query(767px) {
margin-top: 10px;
}
}
.mb-16 {
margin-bottom: 16px;
@include media-query(1199px) {
margin-bottom: 15px;
}
@include media-query(991px) {
margin-bottom: 14px;
}
@include media-query(767px) {
margin-bottom: 10px;
}
}
.mb-12 {
margin-bottom: 12px;
@include media-query(1199px) {
margin-bottom: 11px;
}
@include media-query(991px) {
margin-bottom: 10px;
}
@include media-query(767px) {
margin-bottom: 8px;
}
}
.mb-8 {
margin-bottom: 8px;
@include media-query(767px) {
margin-bottom: 4px;
}
}
.mb-4p {
margin-bottom: 4px;
}
// ----Padding ----
.py-160 {
padding: clamp(96px, 8.32vw, 320px) 0;
@include media-query(575px) {
padding: 80px 0;
}
}
.pt-160 {
padding-top: clamp(96px, 8.32vw, 320px);
@include media-query(575px) {
padding-top: 80px;
}
}
.pb-160 {
padding-bottom: clamp(96px, 8.32vw, 320px);
@include media-query(575px) {
padding-bottom: 80px;
}
}
.py-80 {
padding: clamp(48px, 4.167vw, 160px) 0;
@include media-query(575px) {
padding: 40px 0;
}
}
.pt-80 {
padding-top: clamp(48px, 4.167vw, 160px);
@include media-query(575px) {
padding-top: 40px;
}
}
.pb-80 {
padding-bottom: clamp(48px, 4.167vw, 160px);
@include media-query(575px) {
padding-bottom: 40px;
}
}
.py-64 {
padding: clamp(32px, 3.33vw, 128px) 0;
@include media-query(767px) {
padding: 26px 0;
}
}
.pt-64 {
padding-top: clamp(32px, 3.33vw, 128px);
@include media-query(767px) {
padding-top: 26px;
}
}
.pb-64 {
padding-bottom: clamp(32px, 3.33vw, 128px);
@include media-query(767px) {
padding-bottom: 26px;
}
}
.py-48 {
padding: clamp(24px, 2.5vw, 96px) 0;
@include media-query(767px) {
padding: 20px 0;
}
}
.pb-48 {
padding-bottom: clamp(24px, 2.5vw, 96px);
@include media-query(767px) {
padding-bottom: 20px;
}
}
.pt-48 {
padding-top: clamp(24px, 2.5vw, 96px);
@include media-query(767px) {
padding-top: 20px;
}
}
.py-40 {
padding: clamp(24px, 2.083vw, 80px) 0;
@include media-query(575px) {
padding: 20px 0;
}
}
.pt-40 {
padding-top: clamp(24px, 2.083vw, 80px);
@include media-query(575px) {
padding-top: 20px;
}
}
.pb-40 {
padding-bottom: clamp(24px, 2.083vw, 80px);
@include media-query(575px) {
padding-bottom: 20px;
}
}
.py-32 {
padding: 32px 0;
@include media-query(1599px) {
padding: 29px 0;
}
@include media-query(1399px) {
padding: 27px 0;
}
@include media-query(1199px) {
padding: 25px 0;
}
@include media-query(991px) {
padding: 22px 0;
}
@include media-query(767px) {
padding: 20px 0;
}
}
.p-32 {
padding: 32px;
@include media-query(1599px) {
padding: 29px;
}
@include media-query(1399px) {
padding: 27px;
}
@include media-query(1199px) {
padding: 25px;
}
@include media-query(991px) {
padding: 22px;
}
@include media-query(767px) {
padding: 20px;
}
}
.py-24 {
padding: 24px 0;
@include media-query(1199px) {
padding: 22px 0;
}
@include media-query(991px) {
padding: 22px 0;
}
@include media-query(767px) {
padding: 20px 0;
}
}
.pl-24 {
padding-left: 24px;
@include media-query(1199px) {
padding-left: 22px;
}
@include media-query(991px) {
padding-left: 22px;
}
@include media-query(767px) {
padding-left: 20px;
}
}
.pb-24 {
padding-bottom: 24px;
@include media-query(1199px) {
padding-bottom: 22px;
}
@include media-query(991px) {
padding-bottom: 22px;
}
@include media-query(767px) {
padding-bottom: 20px;
}
}
.pb-32 {
padding-bottom: 32px;
@include media-query(1199px) {
padding-bottom: 22px;
}
@include media-query(991px) {
padding-bottom: 22px;
}
@include media-query(767px) {
padding-bottom: 20px;
}
}
.p-24 {
padding: 24px;
@include media-query(1199px) {
padding: 22px;
}
@include media-query(991px) {
padding: 22px;
}
@include media-query(767px) {
padding: 20px;
}
}
.p-16 {
padding: 16px;
@include media-query(1199px) {
padding: 15px;
}
@include media-query(991px) {
padding: 14px;
}
@include media-query(767px) {
padding: 10px;
}
}
.p-12 {
padding: 12px;
@include media-query(1199px) {
padding: 11px;
}
@include media-query(991px) {
padding: 10px;
}
@include media-query(767px) {
padding: 8px;
}
}
// ---- Gap ----
.gap-4{
gap: clamp(2px, 0.208vw, 8px);
}
.gap-8{
gap: clamp(4px, 0.417vw, 16px);
}
.gap-10{
gap: clamp(5px, 0.521vw, 20px);
}
.gap-12{
gap: clamp(12px, 0.625vw, 24px);
}
.gap-14{
gap: clamp(10px, 0.729vw, 28px);
}
.gap-16{
gap: clamp(12px, 0.833vw, 32px);
}
.gap-18{
gap: clamp(14px, 0.938vw, 36px);
}
.gap-20{
gap: clamp(16px, 1.042vw, 40px);
}
.gap-24{
gap: clamp(18px, 1.25vw, 48px);
}
.gap-32{
gap: clamp(24px, 1.667vw, 64px);
}
.gap-38{
gap: clamp(28px, 1.979vw, 76px);
}
.gap-48{
gap: clamp(10px, 2.5vw, 28px);
}
.gap-64{
gap: clamp(48px, 3.333vw, 128px);
}