From 39efbe1c328330e0a3a478ddd5d3b5e6418353dd Mon Sep 17 00:00:00 2001 From: Walidoux Date: Sat, 13 Aug 2022 14:19:27 +0100 Subject: [PATCH] fix(styles): remove scss files --- styles/abstracts/_colors.scss | 14 ----- styles/abstracts/_mixins.scss | 98 -------------------------------- styles/abstracts/_variables.scss | 6 -- styles/base/_functions.scss | 19 ------- styles/base/_helpers.scss | 20 ------- styles/base/_root.scss | 22 ------- styles/base/_typographies.scss | 32 ----------- styles/pages/home.scss | 42 -------------- 8 files changed, 253 deletions(-) delete mode 100644 styles/abstracts/_colors.scss delete mode 100644 styles/abstracts/_mixins.scss delete mode 100644 styles/abstracts/_variables.scss delete mode 100644 styles/base/_functions.scss delete mode 100644 styles/base/_helpers.scss delete mode 100644 styles/base/_root.scss delete mode 100644 styles/base/_typographies.scss delete mode 100644 styles/pages/home.scss diff --git a/styles/abstracts/_colors.scss b/styles/abstracts/_colors.scss deleted file mode 100644 index 948f806..0000000 --- a/styles/abstracts/_colors.scss +++ /dev/null @@ -1,14 +0,0 @@ -$colors: ( - primary: ( - 400: hsla(0deg 0% 100% / 100%), - 600: hsla(0deg 0% 85% / 100%) - ), - secondary: ( - 400: hsla(0deg 0% 0% / 100%), - 600: hsla(0deg 0% 15% / 100%) - ), - output: ( - error: hsla(0deg 75% 55% / 100%), - success: hsla(126deg 49% 42% / 100%) - ) -); diff --git a/styles/abstracts/_mixins.scss b/styles/abstracts/_mixins.scss deleted file mode 100644 index 7b51636..0000000 --- a/styles/abstracts/_mixins.scss +++ /dev/null @@ -1,98 +0,0 @@ -@import 'variables'; -@import 'helpers'; - -@mixin display-flex($content: center, $items: center, $direction: row) { - display: flex; - justify-content: #{$content}; - align-items: #{$items}; - flex-direction: #{$direction}; -} - -@mixin element-invisible($enforce: true) { - $important: if($enforce, '!important', null); - - max-height: 0 #{$important}; - opacity: 0 #{$important}; - visibility: hidden #{$important}; - transition: $default-transition; -} - -@mixin element-invisible-off($value-visibility: 100px, $enforce: true) { - $important: if($enforce, '!important', null); - - max-height: #{$value-visibility} #{$important}; - opacity: 1 #{$important}; - visibility: visible #{$important}; -} - -@mixin pseudo-element( - $element, - $el-height: 0, - $el-width: 0, - $isCentered: false, - $el-background: transparent, - $el-rotation: 0deg, - $el-transition: none, - $isVisible: true -) { - @if $element == 'before' or $element == 'after' { - position: relative; - - &:#{$element} { - @extend %no-content; - - width: #{$el-width}; - height: #{$el-height}; - background: #{$el-background}; - transition: #{$el-transition}; - @content; - - @if $isVisible { - @include element-invisible-off; - } @else { - @include element-invisible; - } - - @if $isCentered { - top: 50%; - left: 50%; - transform: translate(-50%, -50%) rotate(#{$el-rotation}); - } @else { - transform: rotate(#{$el-rotation}); - @content; - } - } - } @else { - @warn "`#{$el}` isn't a valid pseudo element"; - } -} - -@mixin css-triangle( - $pseudo, - $triangle-size, - $triangle-color, - $triangle-direction -) { - @include pseudo-element(#{$pseudo}) { - border-style: solid; - border-width: $triangle-size; - @content; - - border-#{$triangle-direction}-width: 0; - border-color: if($triangle-direction == down, $triangle-color, transparent) - if($triangle-direction == left, $triangle-color, transparent) - if($triangle-direction == up, $triangle-color, transparent) - if($triangle-direction == right, $triangle-color, transparent); - } -} - -@mixin respond-to($breakpoint) { - @if map-has-key($breakpoints, $breakpoint) { - @media (min-width: map-get($breakpoints, $breakpoint)) { - @content; - } - } @else { - @error "Unfortunately, no value could be retrieved from `#{$breakpoint}`. " - + "Available breakpoints are: #{map-keys($breakpoints)}."; - } -} diff --git a/styles/abstracts/_variables.scss b/styles/abstracts/_variables.scss deleted file mode 100644 index 7c4aa80..0000000 --- a/styles/abstracts/_variables.scss +++ /dev/null @@ -1,6 +0,0 @@ -$default-transition: 0.3s ease; -$breakpoints: ( - small: 320px, - medium: 768px, - large: 1024px -) !default; diff --git a/styles/base/_functions.scss b/styles/base/_functions.scss deleted file mode 100644 index 31998ad..0000000 --- a/styles/base/_functions.scss +++ /dev/null @@ -1,19 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use 'sass:list'; - -@function custom-map-get($map, $keys...) { - $current-map: $map; - $i: 1; - - @if meta.type-of($map) == map { - @while $i <= length($keys) { - $current-map: map.get($current-map, list.nth($keys, $i)); - $i: $i + 1; - } - } @else { - @error "The #{$current-map} provided is not an actual map."; - } - - @return $current-map; -} diff --git a/styles/base/_helpers.scss b/styles/base/_helpers.scss deleted file mode 100644 index c738861..0000000 --- a/styles/base/_helpers.scss +++ /dev/null @@ -1,20 +0,0 @@ -@import 'variables'; - -%no-content { - position: absolute; - content: ''; -} - -%container { - max-width: 1280px; - margin-inline: auto; - padding: 20px; -} - -%input { - outline: none; - border: none; - background: none; - cursor: pointer; - transition: $default-transition; -} diff --git a/styles/base/_root.scss b/styles/base/_root.scss deleted file mode 100644 index 52c88af..0000000 --- a/styles/base/_root.scss +++ /dev/null @@ -1,22 +0,0 @@ -@use '../abstracts/colors' as *; - -:root { - @each $color, $shades in $colors { - @each $prop, $value in $shades { - --#{$color}-#{$prop}: #{$value}; - } - } -} - -*, -*::after, -*::before { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - min-height: 100vh; - max-width: 100vw; -} diff --git a/styles/base/_typographies.scss b/styles/base/_typographies.scss deleted file mode 100644 index bb5e7e5..0000000 --- a/styles/base/_typographies.scss +++ /dev/null @@ -1,32 +0,0 @@ -@use '@fontsource/open-sans/scss/mixins' as OpenSans; - -@import 'helpers'; - -@include OpenSans.fontFace($fontName: 'OpenSans-Regular', $weight: 400); -@include OpenSans.fontFace($fontName: 'OpenSans-Bold', $weight: 600); -@include OpenSans.fontFace($fontName: 'OpenSans-ExtraBold', $weight: 700); - -%typo-title { - padding: 0 10px; - text-align: center; - font-size: 2.325rem; - line-height: 2.5rem; - color: hsla(0deg 100% 100% / 100%); - font-family: OpenSans-Regular, sans-serif; -} - -%typo-subtitle { - padding: 0 10px; - text-align: center; - font-size: 1.325rem; - line-height: 2rem; - color: hsla(0deg 100% 100% / 90%); - font-family: OpenSans-Regular, sans-serif; -} - -%typo-button { - @extend %input; - - padding: 10px 20px; - font-family: OpenSans-ExtraBold, sans-serif; -} diff --git a/styles/pages/home.scss b/styles/pages/home.scss deleted file mode 100644 index 03eb111..0000000 --- a/styles/pages/home.scss +++ /dev/null @@ -1,42 +0,0 @@ -@import 'mixins'; -@import 'typographies'; - -.application { - @include display-flex(center, center, column); - - min-height: 100vh; - max-width: 100vw; - background: linear-gradient(180deg, #775aaa, #393ecc); - - .title { - @extend %typo-title; - } - - .subtitle { - @extend %typo-subtitle; - } - - :where(.title, .subtitle) { - font-style: italic; - } - - .redirect-link { - @include display-flex(center, center, row); - @extend %typo-button; - - text-decoration: none; - color: hsla(0deg 0% 0% / 100%); - background: hsla(0deg 100% 100% / 100%); - border-radius: 8px; - margin-top: 30px; - - &:hover { - color: hsla(0deg 100% 100% / 100%); - background: hsla(0deg 0% 0% / 100%); - } - - .text { - margin-left: 10px; - } - } -}