Skip to content

Some design changes regarding box mixin #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 16, 2023
+73 −104
Merged

Some design changes regarding box mixin #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5ed0a74
adjusting the box design for auto layering
nicosammito Dec 16, 2023
355e1d1
adding info variant
nicosammito Dec 16, 2023
faa2f56
new design implementation for input
nicosammito Dec 16, 2023
d39dd85
adding mixins for centralized adding over hover, focus and active sta…
nicosammito Dec 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/alert/Alert.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const WithBody: Story = {

return <>
{
["primary", "secondary", "success", "warning", "error"].map(value => {
["primary", "secondary", "info", "success", "warning", "error"].map(value => {
// @ts-ignore
return <Alert variant={value} onClose={event => window.alert("closed")} dismissible={dismissible} icon={icon} title={value}>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
Expand All @@ -51,7 +51,7 @@ export const WithoutBody: Story = {

return <>
{
["primary", "secondary", "success", "warning", "error"].map(value => {
["primary", "secondary", "info", "success", "warning", "error"].map(value => {
// @ts-ignore
return <Alert variant={value} onClose={event => window.alert("closed")} dismissible={dismissible} icon={icon} title={value}/>
})
Expand Down
16 changes: 8 additions & 8 deletions src/components/alert/Alert.style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import "../../styles/helpers";

.alert {
@include box(1);
@include box(false);

padding: .5rem;
margin-bottom: 1rem;
Expand Down Expand Up @@ -30,8 +30,7 @@
}

&__icon {
@include box(2);
pointer-events: none;
@include box(false);
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -46,7 +45,7 @@
}

&__dismissible {
@include box(2);
@include box();

display: flex;
width: 1rem;
Expand All @@ -65,18 +64,19 @@

@each $name, $color in $variants {
.alert--#{$name} {
@include box(1, $color);
@include box(false, $color);

.alert__icon {
@include box(2, $color);
@include box(false, $color);
}

.alert__content {
border-top: 1px solid rgba($color, .1);
border-top: 1px solid borderColor($color);
}

.alert__dismissible {
@include box(2, $color);
@include box(true, $color);
}

}
}
7 changes: 4 additions & 3 deletions src/components/alert/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ export interface AlertType {

children?: ReactNode | ReactNode[]
title: ReactNode
//defaults to info
variant?: "primary" | "secondary" | "success" | "warning" | "error"
//defaults to primary
variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error"
//defaults to true
icon?: boolean
//defaults to false
Expand All @@ -16,6 +16,7 @@ export interface AlertType {
}

const IconVariants = {
"info": <IconInfoCircle/>,
"primary": <IconInfoCircle/>,
"secondary": <IconInfoCircle/>,
"success": <IconCircleCheck/>,
Expand Down Expand Up @@ -49,7 +50,7 @@ export interface AlertHeadingType {
}

export interface AlertIconType {
variant: "primary" | "secondary" | "success" | "warning" | "error"
variant: "primary" | "secondary" | "info" | "success" | "warning" | "error"
}

const AlertIcon: React.FC<AlertIconType> = ({variant}) => {
Expand Down
85 changes: 32 additions & 53 deletions src/components/input/Input.style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,13 @@
&__control {
display: flex;
align-items: center;
margin-bottom: .5rem;

@include box(1);
@include box();
}

&__label {
color: rgba(white, .5);
color: rgba($white, .5);
font-size: .75rem;
font-family: Ubuntu, sans-serif;
margin-bottom: .5rem;
Expand All @@ -33,7 +34,7 @@
display: inline-block;
background: none;
width: 100%;
color: rgba(white, .5);
color: rgba($white, .5);
font-family: Ubuntu, sans-serif;
border: none;
outline: none;
Expand All @@ -42,11 +43,13 @@
font-size: 1rem;

&::placeholder {
color: rgba(white, .25);
color: rgba($white, .25);
}
}

&__icon {
@include box(false);

display: flex;
width: 1rem;
height: auto;
Expand All @@ -57,10 +60,6 @@
margin-left: .5rem;
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);

> * {
width: 1rem;
height: 1rem;
Expand All @@ -70,7 +69,7 @@

&__desc {
padding-left: 1rem;
color: rgba(white, .5);
color: rgba($white, .5);
font-size: .75rem;
font-family: Ubuntu, sans-serif;
margin: .5rem 0;
Expand All @@ -88,33 +87,11 @@
&__message {
display: none;
position: relative;
color: rgba(white, .5);
border-radius: 0 0 .5rem .5rem;
color: rgba($white, .5);
border-radius: $borderRadius;
font-size: .75rem;
z-index: -1;
font-family: Ubuntu, sans-serif;
width: 100%;
max-width: 100%;

&:before {
position: absolute;
content: "";
width: .5rem;
height: .5rem;
top: -.5rem;
left: 0;

}

&:after {
position: absolute;
content: "";
width: .5rem;
height: .5rem;
top: -.5rem;
right: 0;

}

> p {
margin: 0;
Expand All @@ -132,41 +109,43 @@
}

&--not-valid {
.input__message {

$color: mixinColor(#D90429, 1);

display: block;
background: $color;

&:before {
background: $color;
.input__control {
border-color: borderColor($error, false);

@include hoverAndActiveContent {
border-color: borderColor($error, true);
}

&:after {
background: $color;
@include activeContent {
outline-color: $error;
}

}
}

&--valid {
.input__message {
display: block;
background: rgba($error, .1);

$color: mixinColor(#29BF12, 1);
}
}

display: block;
background: $color;
&--valid {

&:before {
background: $color;
.input__control {
border-color: borderColor($success, false);

@include hoverAndActiveContent {
border-color: borderColor($success, true);
}

&:after {
background: $color;
@include activeContent {
outline-color: $success;
}
}

.input__message {
display: block;
background: rgba($success, .1);

}
}
Expand Down
56 changes: 21 additions & 35 deletions src/styles/_helpers.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,40 @@
@use "sass:math";
@import "variables";

@mixin box($level: 0, $color: $primary) {
@mixin box($active: true, $color: $secondary) {

@if ($level <= 0) {
background: mixinColor($primary, .5);
} @else {
background: linear-gradient(135deg, mixinColor($color, $level) 0%, mixinColor($color, math.div($level, 2)) 100%);
}
background: rgba($color, 10%);
border-radius: $borderRadius;
color: rgba($primary, .5);
color: rgba($white, .5);
font-family: Ubuntu, sans-serif;
font-size: $secondaryFontSize;
@if ($level >= 2) {
box-shadow: 0 .25rem .25rem rgba($black, .2), inset 0 0 0 1px rgba($color, .1);
} @else {
box-shadow: inset 0 0 0 1px rgba($color, .1);
}
border: 1px solid borderColor($color);
position: relative;

@if ($active == true) {
@include hoverAndActiveContent {
border: 1px solid borderColor($color, true);
}

&:hover, &:active, &--active {

@if ($level >= 2) {
box-shadow: 0 .25rem .25rem rgba($black, .2), inset 0 0 0 1px rgba($color, .2);
} @else {
box-shadow: inset 0 0 0 1px rgba($color, .2);
@include activeContent {
outline: 1px solid $info;
outline-offset: 2px;
}
}
}

@mixin boxSecondary($level: 1) {

background: mixinColor($secondary, $level);
border-radius: $borderRadius;
color: rgba($secondary, .5);
box-shadow: 0 .1rem .1rem rgba($black, .1);
border: 1px solid rgba($primary, .1);
position: relative;
}


@function mixinColor($color, $level) {
@return mix($color, $bodyBg, 15% * $level);
@mixin hoverAndActiveContent() {
&:hover, &:active, &--active {
@content
}
}

@function lighten($level) {
@return mixinColor(white, $level);
@mixin activeContent() {
&--active {
@content
}
}

@function darken($level) {
@return mixinColor(black, $level);
@function borderColor($color: $white, $hover: false) {
@return rgba($color, if($hover, 0.2, 0.1))
}
9 changes: 6 additions & 3 deletions src/styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
$bodyBg: #030014;
$primary: #ffffff;
$secondary: #70ffb2;
$primary: #030014;
$secondary: #ffffff;
$info: #70ffb2;
$success: #29BF12;
$warning: #FFBE0B;
$error: #D90429;
$black: #000000;
$white: #ffffff;

//component styling
$borderRadius: .5rem;
Expand All @@ -17,5 +19,6 @@ $variants: (
"secondary": $secondary,
"success": $success,
"warning": $warning,
"error": $error
"error": $error,
"info": $info
)