diff --git a/src/styles/_global.scss b/src/styles/_global.scss new file mode 100644 index 00000000..dd684fd7 --- /dev/null +++ b/src/styles/_global.scss @@ -0,0 +1,131 @@ +$include-column-box-sizing: true !default; +$rfs-breakpoint: 1460px !default; +$rfs-base-value: 1.6rem !default; +$rfs-rem-value: 10 !default; +$grid-columns: 24; +$grid-gutter-width: 4rem !default; +$grid-breakpoints: ( + xs: 0, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1400px, +) !default; +$container-padding-x: $grid-gutter-width * 0.5 !default; +$container-max-widths: $grid-breakpoints; +$gutters: ( + 0: 0, + 1: 0.25rem, + 2: 0.5rem, + 3: 1rem, + 4: 1.5rem, + 5: 3rem +) !default; +$grid-row-columns: 6 !default; +$prefix: '' !default; + +// Шрифты +$font-family: muller, arial, helvetica, sans-serif; +$font-size-base: 2rem; +$line-height-base: 1.6; + +// Базовые цвета (не зависящие от темы) +$color-primary: #2638d9; +$color-danger: #d00820; +$default-color: #141414; + +// Другие переменные +$border-radius: 2px; +$transition-base: all 0.2s ease-in-out; +$container-padding-x: $grid-gutter-width * 0.5; + +// Миксин для media-breakpoint-up +@mixin media-breakpoint-up($breakpoint, $breakpoints: $grid-breakpoints) { + $min-width: map-get($breakpoints, $breakpoint); + + @if $min-width { + @media (min-width: #{$min-width}) { + @content; + } + } @else { + @warn "Нет валидного брейкпоинта для '#{$breakpoint}'."; + } +} + +// Миксин для media-breakpoint-down +@mixin media-breakpoint-down($breakpoint, $breakpoints: $grid-breakpoints) { + $max-width: map-get($breakpoints, $breakpoint); + + @if $max-width { + @media (max-width: #{$max-width - 0.02}) { + @content; + } + } @else { + @warn "Нет валидного брейкпоинта для '#{$breakpoint}'."; + } +} + +// Миксин для media-breakpoint-between +@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { + $min-width: map-get($breakpoints, $lower); + $max-width: map-get($breakpoints, $upper); + + @if $min-width and $max-width { + @media (min-width: #{$min-width}) and (max-width: #{$max-width - 0.02}) { + @content; + } + } @else { + @warn "Нет валидных брейкпоинтов для '#{$lower}' или '#{$upper}'."; + } +} + +// Миксин make-container +@mixin make-container($max-widths: $container-max-widths, $gutter: $grid-gutter-width) { + width: 100%; + padding-right: $container-padding-x; + padding-left: $container-padding-x; + margin-right: auto; + margin-left: auto; + + @each $breakpoint, $max-width in $max-widths { + @include media-breakpoint-up($breakpoint, $grid-breakpoints) { + @if $max-width { + max-width: $max-width; + } + } + } +} + +// Миксин make-row +@mixin make-row($gutter: $grid-gutter-width) { + --gutter-x: #{$gutter}; + --gutter-y: 0; + + display: flex; + flex-wrap: wrap; + margin-top: calc(-1 * var(--gutter-y)); + margin-right: calc(-0.5 * var(--gutter-x)); + margin-left: calc(-0.5 * var(--gutter-x)); +} + +// Миксин make-col-ready +@mixin make-col-ready() { + flex-shrink: 0; + width: 100%; + max-width: 100%; + padding-right: calc(var(--gutter-x) * 0.5); + padding-left: calc(var(--gutter-x) * 0.5); + margin-top: var(--gutter-y); +} + +// Миксин make-col +@mixin make-col($size: false, $columns: $grid-columns) { + @if $size { + flex: 0 0 auto; + width: calc(100% * #{calc($size / $columns)}); + } @else { + flex: 1 1 0; + max-width: 100%; + } +} diff --git a/src/styles/_grid.scss b/src/styles/_grid.scss index bb75c575..a2032d26 100644 --- a/src/styles/_grid.scss +++ b/src/styles/_grid.scss @@ -1,182 +1,3 @@ -@import 'vars'; - -// Определяем $displays в начале файла -$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex; - -// Миксин для media-breakpoint-up -@mixin media-breakpoint-up($breakpoint, $breakpoints: $grid-breakpoints) { - $min-width: map-get($breakpoints, $breakpoint); - - @if $min-width { - @media (min-width: #{$min-width}) { - @content; - } - } @else { - @warn "Нет валидного брейкпоинта для '#{$breakpoint}'."; - } -} - -// Миксин для media-breakpoint-down -@mixin media-breakpoint-down($breakpoint, $breakpoints: $grid-breakpoints) { - $max-width: map-get($breakpoints, $breakpoint) - 0.02px; - - @if $max-width { - @media (max-width: #{$max-width}) { - @content; - } - } @else { - @warn "Нет валидного брейкпоинта для '#{$breakpoint}'."; - } -} - -// Миксин для media-breakpoint-between -@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { - $min-width: map-get($breakpoints, $lower); - $max-width: map-get($breakpoints, $upper) - 0.02px; - - @if $min-width and $max-width { - @media (min-width: #{$min-width}) and (max-width: #{$max-width}) { - @content; - } - } @else { - @warn "Нет валидных брейкпоинтов для '#{$lower}' или '#{$upper}'."; - } -} - -// Миксин make-container -@mixin make-container($max-widths: $container-max-widths, $gutter: $grid-gutter-width) { - width: 100%; - padding-right: $container-padding-x; - padding-left: $container-padding-x; - margin-right: auto; - margin-left: auto; - - @each $breakpoint, $max-width in $max-widths { - @include media-breakpoint-up($breakpoint, $grid-breakpoints) { - @if $max-width { - max-width: $max-width; - } - } - } -} - -// Миксин make-row -@mixin make-row($gutter: $grid-gutter-width) { - --gutter-x: #{$gutter}; - --gutter-y: 0; - - display: flex; - flex-wrap: wrap; - margin-top: calc(-1 * var(--gutter-y)); - margin-right: calc(-0.5 * var(--gutter-x)); - margin-left: calc(-0.5 * var(--gutter-x)); -} - -// Миксин make-col-ready -@mixin make-col-ready() { - box-sizing: border-box; - flex-shrink: 0; - width: 100%; - max-width: 100%; - padding-right: calc(var(--gutter-x) * 0.5); - padding-left: calc(var(--gutter-x) * 0.5); - margin-top: var(--gutter-y); -} - -// Миксин make-col -@mixin make-col($size: false, $columns: $grid-columns) { - @if $size { - flex: 0 0 auto; - width: calc(100% * #{calc($size / $columns)}); - } @else { - flex: 1 1 0; - max-width: 100%; - } -} - -// Миксин make-col-auto -@mixin make-col-auto() { - flex: 0 0 auto; - width: auto; -} - -// Миксин make-col-offset -@mixin make-col-offset($size, $columns: $grid-columns) { - $num: calc($size / $columns); - - margin-left: if($num == 0, 0, calc(100% * #{$num})); -} - -// Миксин row-cols -@mixin row-cols($count) { - > * { - flex: 0 0 auto; - width: 100% / $count; - } -} - -// Миксин make-grid-columns -@mixin make-grid-columns($columns: $grid-columns, $breakpoints: $grid-breakpoints) { - @each $breakpoint in map-keys($breakpoints) { - $infix: if($breakpoint == 'xs', '', "-#{$breakpoint}"); - - @include media-breakpoint-up($breakpoint, $breakpoints) { - // Добавляем класс col-auto - .#{$prefix}col#{$infix}-auto { - @include make-col-auto; - } - - @for $i from 1 through $columns { - .#{$prefix}col#{$infix}-#{$i} { - @include make-col($i, $columns); - } - - .#{$prefix}offset#{$infix}-#{$i} { - @include make-col-offset($i, $columns); - } - } - } - } -} - -// Обновляем миксин make-justify-content -@mixin make-justify-content($breakpoints: $grid-breakpoints) { - @each $breakpoint in map-keys($breakpoints) { - @include media-breakpoint-up($breakpoint, $breakpoints) { - $infix: if($breakpoint == 'xs', "", "-#{$breakpoint}"); - - .#{$prefix}justify-content#{$infix}-start { justify-content: flex-start !important; } - .#{$prefix}justify-content#{$infix}-end { justify-content: flex-end !important; } - .#{$prefix}justify-content#{$infix}-center { justify-content: center !important; } - .#{$prefix}justify-content#{$infix}-between { justify-content: space-between !important; } - .#{$prefix}justify-content#{$infix}-around { justify-content: space-around !important; } - .#{$prefix}justify-content#{$infix}-evenly { justify-content: space-evenly !important; } - } - } -} - -// Обновляем миксин make-display-classes -@mixin make-display-classes($breakpoints: $grid-breakpoints) { - @each $breakpoint in map-keys($breakpoints) { - @include media-breakpoint-up($breakpoint, $breakpoints) { - $infix: if($breakpoint == 'xs', "", "-#{$breakpoint}"); - - @each $value in $displays { - .#{$prefix}d#{$infix}-#{$value} { display: $value !important; } - } - } - } -} - -// Дополнительный миксин для классов d-print-* -@mixin make-print-display-classes() { - @media print { - @each $value in $displays { - .#{$prefix}d-print-#{$value} { display: $value !important; } - } - } -} - // Генерация классов контейнера и ряда .container, .container-fluid { @@ -191,7 +12,49 @@ $displays: none, inline, inline-block, block, table, table-row, table-cell, flex } } -@include make-grid-columns($grid-columns, $grid-breakpoints); -@include make-display-classes; -@include make-print-display-classes; -@include make-justify-content; \ No newline at end of file +// Генерация только используемых классов колонок +@each $breakpoint in map-keys($grid-breakpoints) { + $infix: if($breakpoint == 'xs', '', "-#{$breakpoint}"); + + @include media-breakpoint-up($breakpoint, $grid-breakpoints) { + .col#{$infix} { + flex: 1 0 0%; + } + + .col#{$infix}-auto { + flex: 0 0 auto; + width: auto; + } + + @for $i from 1 through $grid-columns { + .col#{$infix}-#{$i} { + @include make-col($i, $grid-columns); + } + } + } +} + +// Добавляем только используемые классы display +.d-flex { display: flex !important; } +.d-none { display: none !important; } + +// Добавляем только используемый класс justify-content +.justify-content-between { justify-content: space-between !important; } + +// Добавляем классы для отступов (gutters) +@each $breakpoint in map-keys($grid-breakpoints) { + $infix: if($breakpoint == 'xs', '', "-#{$breakpoint}"); + + @include media-breakpoint-up($breakpoint) { + @each $key, $gutter in $gutters { + .g#{$infix}-#{$key}, + .gx#{$infix}-#{$key} { + --gutter-x: #{$gutter}; + } + .g#{$infix}-#{$key}, + .gy#{$infix}-#{$key} { + --gutter-y: #{$gutter}; + } + } + } +} \ No newline at end of file diff --git a/src/styles/_inject.scss b/src/styles/_inject.scss deleted file mode 100644 index ef6592c0..00000000 --- a/src/styles/_inject.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import 'vars'; -@import 'theme'; -@import 'grid'; diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss deleted file mode 100644 index 1c68b267..00000000 --- a/src/styles/_vars.scss +++ /dev/null @@ -1,41 +0,0 @@ -$include-column-box-sizing: true !default; -$rfs-breakpoint: 1460px !default; -$rfs-base-value: 1.6rem !default; -$rfs-rem-value: 10 !default; -$grid-columns: 24; -$grid-gutter-width: 4rem !default; -$grid-breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px, - xxl: 1400px, -) !default; -$container-padding-x: $grid-gutter-width * 0.5 !default; -$container-max-widths: $grid-breakpoints; -$gutters: ( - 0: 0, - 1: 0.25rem, - 2: 0.5rem, - 3: 1rem, - 4: 1.5rem, - 5: 3rem -) !default; -$grid-row-columns: 6 !default; -$prefix: '' !default; - -// Шрифты -$font-family: muller, arial, helvetica, sans-serif; -$font-size-base: 2rem; -$line-height-base: 1.6; - -// Базовые цвета (не зависящие от темы) -$color-primary: #2638d9; -$color-danger: #d00820; -$default-color: #141414; - -// Другие переменные -$border-radius: 2px; -$transition-base: all 0.2s ease-in-out; -$container-padding-x: $grid-gutter-width * 0.5; \ No newline at end of file diff --git a/src/styles/app.scss b/src/styles/app.scss index 0f851dd2..6b8f7525 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -1,5 +1,4 @@ @import 'fonts'; -@import 'vars'; @import 'theme'; @import 'grid'; diff --git a/vite.config.ts b/vite.config.ts index d70b85ad..9345f2c0 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -35,7 +35,7 @@ export default defineConfig({ preprocessorOptions: { scss: { silenceDeprecations: ['mixed-decls', 'legacy-js-api'], - additionalData: '@import "~/styles/inject";\n', + additionalData: '@import "~/styles/global";\n', includePaths: ['./public', './src/styles', './node_modules'] } } as CSSOptions['preprocessorOptions']