diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 89cfd58..fa28c36 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -1,29 +1,3 @@ -@use 'typography' as *; -@use 'utils' as *; - -// Typography -h1, -h2, -h3, -h4, -h5, -h6 { - line-height: 100%; - color: #ffffff; -} - -h1 { - @include h1('h1'); -} - -h2 { - @include h2('h2'); -} - -h3 { - @include h3('h3'); -} - //скроллбар ::-webkit-scrollbar { width: 8px; diff --git a/assets/scss/mixins.scss b/assets/scss/mixins.scss new file mode 100644 index 0000000..1826c4b --- /dev/null +++ b/assets/scss/mixins.scss @@ -0,0 +1,5 @@ +@mixin mobile { + @media (max-width: 768px) { + @content; + } +} \ No newline at end of file diff --git a/assets/scss/typography.scss b/assets/scss/typography.scss deleted file mode 100644 index 32bd58e..0000000 --- a/assets/scss/typography.scss +++ /dev/null @@ -1,121 +0,0 @@ -@use 'utils' as *; - -// Font Face Declarations -@font-face { - font-family: 'Inter'; - src: - url('/fonts/Inter-Regular.woff2') format('woff2'), - url('/fonts/Inter-Regular.woff') format('woff'); - font-weight: 400; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Inter'; - src: - url('/fonts/Inter-Medium.woff2') format('woff2'), - url('/fonts/Inter-Medium.woff') format('woff'); - font-weight: 500; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Inter'; - src: - url('/fonts/Inter-SemiBold.woff2') format('woff2'), - url('/fonts/Inter-SemiBold.woff') format('woff'); - font-weight: 600; - font-style: normal; - font-display: swap; -} - -// Font Variables -$font-family-base: - 'Inter', - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - sans-serif; - -// Font Weights -$font-weight-regular: 400; -$font-weight-medium: 500; -$font-weight-semibold: 600; - -// Custom type -@mixin font($size, $weight, $lineHeight, $namespace: null, $onlyVars: false) { - @if ($namespace) { - @if ($onlyVars) { - --#{$namespace}-font-size: #{$size}; - --#{$namespace}-font-weight: #{$weight}; - --#{$namespace}-line-height: #{$lineHeight}; - } @else { - font-size: var(--#{$namespace}-font-size, $size); - font-weight: var(--#{$namespace}-font-weight, $weight); - line-height: var(--#{$namespace}-line-height, $lineHeight); - } - } @else { - font-size: $size; - font-weight: $weight; - line-height: $lineHeight; - } -} - -/* Headline */ -@mixin h1($namespace: null, $onlyVars: false) { - @include font(32px, $font-weight-semibold, 100%, $namespace, $onlyVars); - @include mobile { - font-size: 24px; - } -} -@mixin h2($namespace: null, $onlyVars: false) { - @include font(24px, $font-weight-semibold, 100%, $namespace, $onlyVars); - @include mobile { - font-size: 20px; - } -} -@mixin h3($namespace: null, $onlyVars: false) { - @include font(16px, $font-weight-semibold, 140%, $namespace, $onlyVars); -} - -/* Text */ -// 16 medium-(medium/bold) -@mixin txt-m($namespace: null, $onlyVars: false) { - @include font(16px, $font-weight-regular, 100%, $namespace, $onlyVars); -} -@mixin txt-m-m($namespace: null, $onlyVars: false) { - @include font(16px, $font-weight-medium, 100%, $namespace, $onlyVars); -} -@mixin txt-m-b($namespace: null, $onlyVars: false) { - @include font(16px, $font-weight-semibold, 100%, $namespace, $onlyVars); -} - -// 14 regular-(medium/bold) -@mixin txt-r($namespace: null, $onlyVars: false) { - @include font(14px, $font-weight-regular, 20px, $namespace, $onlyVars); -} -@mixin txt-r-m($namespace: null, $onlyVars: false) { - @include font(14px, $font-weight-medium, 20px, $namespace, $onlyVars); -} -@mixin txt-r-b($namespace: null, $onlyVars: false) { - @include font(14px, $font-weight-semibold, 20px, $namespace, $onlyVars); -} - -// 12 text small-(medium/bold) -@mixin txt-s($namespace: null, $onlyVars: false) { - @include font(12px, $font-weight-regular, 18px, $namespace, $onlyVars); -} -@mixin txt-s-m($namespace: null, $onlyVars: false) { - @include font(12px, $font-weight-medium, 18px, $namespace, $onlyVars); -} -@mixin txt-s-b($namespace: null, $onlyVars: false) { - @include font(12px, $font-weight-semibold, 18px, $namespace, $onlyVars); -} - -// 10 text-tiny -@mixin txt-t($namespace: null, $onlyVars: false) { - @include font(10px, $font-weight-medium, 15px, $namespace, $onlyVars); -} diff --git a/assets/scss/utils.scss b/assets/scss/utils.scss deleted file mode 100644 index aec3f45..0000000 --- a/assets/scss/utils.scss +++ /dev/null @@ -1,148 +0,0 @@ -@use 'sass:color'; - -@mixin mobile { - @media (max-width: 768px) { - @content; - } -} - -$indents: 0 2 4 5 6 8 10 12 15 16 18 20 24 25 28 30 32 36 40 48 50 52 60 64; - -@each $i in $indents { - .m#{$i} { - margin: #{$i}px; - } - - .mx#{$i} { - margin-left: #{$i}px; - margin-right: #{$i}px; - } - - .my#{$i} { - margin-top: #{$i}px; - margin-bottom: #{$i}px; - } - - .mt#{$i} { - margin-top: #{$i}px; - } - - .mb#{$i} { - margin-bottom: #{$i}px; - } - - .ml#{$i} { - margin-left: #{$i}px; - } - - .mr#{$i} { - margin-right: #{$i}px; - } - - .p#{$i} { - padding: #{$i}px; - } - - .px#{$i} { - padding-left: #{$i}px; - padding-right: #{$i}px; - } - - .py#{$i} { - padding-top: #{$i}px; - padding-bottom: #{$i}px; - } - - .pt#{$i} { - padding-top: #{$i}px; - } - - .pb#{$i} { - padding-bottom: #{$i}px; - } - - .pl#{$i} { - padding-left: #{$i}px; - } - - .pr#{$i} { - padding-right: #{$i}px; - } -} - -.mla { - margin-left: auto; -} - -.mra { - margin-left: auto; -} - -.mx-auto { - margin-left: auto; - margin-right: auto; -} - -@each $align in ('left', 'right', 'center') { - .text-align-#{$align} { - text-align: #{$align}; - } -} - -.w-25 { width: 25% !important; } -.w-50 { width: 50% !important; } -.w-75 { width: 75% !important; } -.w-100 { width: 100% !important; } - -.d-none { display: none !important; } -.d-inline { display: inline !important; } -.d-inline-block { display: inline-block !important; } -.d-block { display: block !important; } -.d-table { display: table !important; } -.d-table-row { display: table-row !important; } -.d-table-cell { display: table-cell !important; } -.d-flex { display: flex !important; } -.d-inline-flex { display: inline-flex !important; } - -.flex-row { flex-direction: row !important; } -.flex-column { flex-direction: column !important; } -.flex-row-reverse { flex-direction: row-reverse !important; } -.flex-column-reverse { flex-direction: column-reverse !important; } - -.flex-wrap { flex-wrap: wrap !important; } -.flex-nowrap { flex-wrap: nowrap !important; } -.flex-wrap-reverse { flex-wrap: wrap-reverse !important; } - -.justify-content-start { justify-content: flex-start !important; } -.justify-content-end { justify-content: flex-end !important; } -.justify-content-center { justify-content: center !important; } -.justify-content-between { justify-content: space-between !important; } -.justify-content-around { justify-content: space-around !important; } - -.align-items-start { align-items: flex-start !important; } -.align-items-end { align-items: flex-end !important; } -.align-items-center { align-items: center !important; } -.align-items-baseline { align-items: baseline !important; } -.align-items-stretch { align-items: stretch !important; } - -.align-content-start { align-content: flex-start !important; } -.align-content-end { align-content: flex-end !important; } -.align-content-center { align-content: center !important; } -.align-content-between { align-content: space-between !important; } -.align-content-around { align-content: space-around !important; } -.align-content-stretch { align-content: stretch !important; } - -.align-self-auto { align-self: auto !important; } -.align-self-start { align-self: flex-start !important; } -.align-self-end { align-self: flex-end !important; } -.align-self-center { align-self: center !important; } -.align-self-baseline { align-self: baseline !important; } -.align-self-stretch { align-self: stretch !important; } - -.text-align-center { text-align: center !important; } -.text-align-left { text-align: left !important; } -.text-align-right { text-align: right !important; } - -.cursor-pointer { cursor: pointer !important; } -.cursor-not-allowed { cursor: not-allowed !important; } -.cursor-progress { cursor: progress !important; } \ No newline at end of file diff --git a/components/DeliverySearch.vue b/components/DeliverySearch.vue index 899e16d..372dfc6 100644 --- a/components/DeliverySearch.vue +++ b/components/DeliverySearch.vue @@ -38,8 +38,8 @@