From 38f3cb4faf9f25d45c105ecd5382ec95c0e58755 Mon Sep 17 00:00:00 2001 From: nicosammito Date: Mon, 11 Dec 2023 16:30:59 +0100 Subject: [PATCH 1/2] added ubuntu font --- .storybook/preview-head.html | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 .storybook/preview-head.html diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 00000000..10502064 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,3 @@ + \ No newline at end of file From decd631b541cae4b1f7daeb2b53a1518f764b65d Mon Sep 17 00:00:00 2001 From: nicosammito Date: Mon, 11 Dec 2023 16:31:15 +0100 Subject: [PATCH 2/2] helpers and variables --- src/components/input/Input.stories.tsx | 4 +- src/components/input/Input.style.scss | 75 +++++++++----------------- src/components/input/Input.tsx | 4 +- src/styles/_helpers.scss | 65 ++++++++++++++++++++++ src/styles/_variables.scss | 10 ++++ 5 files changed, 105 insertions(+), 53 deletions(-) create mode 100644 src/styles/_helpers.scss create mode 100644 src/styles/_variables.scss diff --git a/src/components/input/Input.stories.tsx b/src/components/input/Input.stories.tsx index 24d4df7c..7b9d893b 100644 --- a/src/components/input/Input.stories.tsx +++ b/src/components/input/Input.stories.tsx @@ -9,7 +9,9 @@ export default { export const Mail = () => e-mail - + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam diff --git a/src/components/input/Input.style.scss b/src/components/input/Input.style.scss index 212e331a..5bb5222f 100644 --- a/src/components/input/Input.style.scss +++ b/src/components/input/Input.style.scss @@ -1,3 +1,5 @@ +@import "../../styles/helpers"; + .input { margin-bottom: 1rem; max-width: 300px; @@ -12,33 +14,10 @@ } &__control { - background: rgba(white, .1); - border: none; - border-radius: .5rem; display: flex; - position: relative; align-items: center; - box-shadow: 0 .1rem .1rem rgba(black, .1); - overflow: hidden; - - &:before { - content: ""; - position: absolute; - inset: 0; - border-radius: inherit; - padding: 1px; /* control the border thickness */ - background: linear-gradient(0deg, rgba(white, 0), rgba(white, .1)); - -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); - -webkit-mask-composite: xor; - mask-composite: exclude; - pointer-events: none; - } - &:hover, &:active, &--focus { - &:before { - background: linear-gradient(0deg, rgba(white, 0), rgba(white, .25)); - } - } + @include box(); } &__label { @@ -69,22 +48,19 @@ } &__icon { - color: rgba(white, .5); - background: rgba(white, .1); - border: 1px solid rgba(white, .25); - overflow: hidden; - display: flex; width: 1rem; height: auto; - position: relative; justify-content: center; align-items: center; aspect-ratio: 50/50; padding: .25rem; margin-left: .5rem; - border-radius: 100rem; - box-shadow: 0 0 1rem rgba(white, .1); + pointer-events: none; + + //first parameter describes weither the box is in primary or secondary style + //second parameter describes weither the this box is inside another box + @include box(2); > svg { width: 1rem; @@ -125,11 +101,9 @@ position: absolute; content: ""; width: .5rem; - height: 1rem; - top: -1rem; - border-bottom-left-radius: 50rem; + height: .5rem; + top: -.5rem; left: 0; - z-index: -1; } @@ -137,11 +111,9 @@ position: absolute; content: ""; width: .5rem; - height: 1rem; - top: -1rem; - border-bottom-right-radius: 50rem; + height: .5rem; + top: -.5rem; right: 0; - z-index: -1; } @@ -162,18 +134,19 @@ &--not-valid { .input__message { + + $color: mixinColor(#D90429, 2.5); + display: block; - background: #3e0019; + background: $color; &:before { - background: rgba(#3e0019, 0); - box-shadow: 0 .5rem 0 0 #3e0019; + background: $color; } &:after { - background: rgba(#3e0019, 0); - box-shadow: 0 .5rem 0 0 #3e0019; + background: $color; } } @@ -181,19 +154,21 @@ &--valid { .input__message { + + $color: mixinColor(#29BF12, 2.5); + display: block; - background: #003110; + background: $color; &:before { - background: rgba(#003110, 0); - box-shadow: 0 .5rem 0 0 #003110; + background: $color; } &:after { - background: rgba(#003110, 0); - box-shadow: 0 .5rem 0 0 #003110; + background: $color; } + } } } \ No newline at end of file diff --git a/src/components/input/Input.tsx b/src/components/input/Input.tsx index d4fd86c0..506e4d07 100644 --- a/src/components/input/Input.tsx +++ b/src/components/input/Input.tsx @@ -66,12 +66,12 @@ const InputControl: React.ForwardRefExoticComponent) => { if (event.target.parentElement) - event.target.parentElement.classList.add("input__control--focus") + event.target.parentElement.classList.add("input__control--active") if (onFocusParam) onFocusParam(event) }) const onBlur = ((event: React.FocusEvent) => { if (event.target.parentElement) - event.target.parentElement.classList.remove("input__control--focus") + event.target.parentElement.classList.remove("input__control--active") if (onBlurParam) onBlurParam(event) }) diff --git a/src/styles/_helpers.scss b/src/styles/_helpers.scss new file mode 100644 index 00000000..ddd46b7b --- /dev/null +++ b/src/styles/_helpers.scss @@ -0,0 +1,65 @@ +@import "variables"; + + +@mixin gradientBorder($isPrimary: true) { + + $color: if($isPrimary, $primary, $secondary); + + &:after { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + padding: 1px; /* control the border thickness */ + background: linear-gradient(0deg, rgba($color, 0), rgba($color, .1)); + -webkit-mask: linear-gradient($color 0 0) content-box, linear-gradient($color 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + pointer-events: none; + } + + &:hover, &:active, &--active { + &:after { + background: linear-gradient(0deg, rgba($color, 0), rgba($color, .25)); + } + } +} + +@mixin box($level: 1) { + + background: mixinColor($primary, $level); + border-radius: $borderRadius; + color: rgba($primary, .5); + font-family: Ubuntu, sans-serif; + font-size: 1rem; + box-shadow: 0 .1rem .1rem rgba($black, .1); + border: none; + position: relative; + + @include gradientBorder(true) +} + +@mixin boxSecondary($level: 1) { + + background: mixinColor($secondary, $level); + border-radius: $borderRadius; + color: rgba($secondary, .5); + box-shadow: 0 .1rem .1rem rgba($black, .1); + border: none; + position: relative; + + @include gradientBorder(false) +} + + +@function mixinColor($color, $level) { + @return mix($color, $bodyBg, 10% * $level); +} + +@function lighten($level) { + @return mixinColor(white, $level); +} + +@function darken($level) { + @return mixinColor(black, $level); +} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 00000000..39cd842f --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,10 @@ +$bodyBg: #030014; +$primary: #ffffff; +$secondary: #70ffb2; +$black: #000000; + +//component styling +$borderRadius: .5rem; +$primaryFontSize: 1.25rem; +$secondaryFontSize: 1rem; +$tertiaryFontSize: .75rem;