From 52da7d7899ba579fb298697aef303bd4cf0ad7a9 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Sat, 1 Oct 2022 18:49:17 +0000 Subject: [PATCH] Clearer tab select correct padding in Alerts Pressed button has inset shaddow --- 3D Components/Sass/assets/_alert.scss | 2 +- 3D Components/Sass/assets/_button.scss | 3 +++ 3D Components/Sass/assets/_tab.scss | 26 +++++++++++++++++++------- 3D Components/Sass/style.scss | 2 +- 3D Components/index.html | 2 +- 5 files changed, 25 insertions(+), 10 deletions(-) diff --git a/3D Components/Sass/assets/_alert.scss b/3D Components/Sass/assets/_alert.scss index b3a5575..db7b618 100644 --- a/3D Components/Sass/assets/_alert.scss +++ b/3D Components/Sass/assets/_alert.scss @@ -17,7 +17,7 @@ } .alert { - padding: 0.85em; + padding: 0.85em 2.5em 0.85em 0.85em; border: 1px solid $black; @if $border-radius <= 0 { border-radius: 3px; diff --git a/3D Components/Sass/assets/_button.scss b/3D Components/Sass/assets/_button.scss index c949ccc..c0c642c 100644 --- a/3D Components/Sass/assets/_button.scss +++ b/3D Components/Sass/assets/_button.scss @@ -16,6 +16,7 @@ background: darken($color, 10%); border-color: darken($color, 10%); box-shadow: 0 1px 2px rgba($color, 0.6); + box-shadow: inset 0 0 10px rgba(darken($color, 30%), 0.2); } &:focus { @@ -28,6 +29,7 @@ border-color: darken($color, 25%); text-shadow: none; color: darken($fg, 30%); + box-shadow: inset 0 0 5px rgba(darken($color, 60%), 0.2); } } @@ -71,6 +73,7 @@ border-color: $black; color: #333; cursor: default; + box-shadow: inset 0 0 10px rgba($black, 0.1); } &.btn-wide { diff --git a/3D Components/Sass/assets/_tab.scss b/3D Components/Sass/assets/_tab.scss index 4569b8f..6e3b651 100644 --- a/3D Components/Sass/assets/_tab.scss +++ b/3D Components/Sass/assets/_tab.scss @@ -33,6 +33,7 @@ background: darken($color, 15%); background-image: linear-gradient(to top, darken($color, 10%), darken($color, 15%)); border-color: 1px darken($color, 20%) solid; + box-shadow: inset 0 0 5px rgba(darken($color, 20%), 0.4); } } @@ -53,13 +54,24 @@ text-shadow: 0 1px 0 $black; transition: all 0.2s ease-in-out; - &:first-child { - border-top-left-radius: $border-radius; - border-bottom-left-radius: $border-radius; - } - &:last-child { - border-top-right-radius: $border-radius; - border-bottom-right-radius: $border-radius; + @if $border-radius <= 0 { + &:first-child { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; + } + &:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + } + } @else { + &:first-child { + border-top-left-radius: $border-radius; + border-bottom-left-radius: $border-radius; + } + &:last-child { + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; + } } &:hover { diff --git a/3D Components/Sass/style.scss b/3D Components/Sass/style.scss index be6fe7a..2e6e154 100644 --- a/3D Components/Sass/style.scss +++ b/3D Components/Sass/style.scss @@ -19,7 +19,7 @@ $fg-color: #E8E3E3; $accent: $green; $accent-alt: $purple; -$border-radius: 0.2rem; +$border-radius: 0; @import 'assets/button'; @import 'assets/badge'; diff --git a/3D Components/index.html b/3D Components/index.html index 5cd1f12..f328a9a 100644 --- a/3D Components/index.html +++ b/3D Components/index.html @@ -29,7 +29,7 @@

Sass Templates

-

Planning to use this in some projects, feel free to steal some code from here

+

gwa gwa