Fluffy/sass-stuff
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Clearer tab select

Browse source 
correct padding in Alerts
Pressed button has inset shaddow
This commit is contained in:
Michał 2022-10-01 18:49:17 +00:00
parent 045ee3ff9f
commit 52da7d7899
5 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
3D Components/Sass/assets/_alert.scss
View file

@ -17,7 +17,7 @@
} }
.alert { .alert {
padding: 0.85em; padding: 0.85em 2.5em 0.85em 0.85em;
border: 1px solid $black; border: 1px solid $black;
@if $border-radius <= 0 { @if $border-radius <= 0 {
border-radius: 3px; border-radius: 3px;

3
3D Components/Sass/assets/_button.scss
View file

@ -16,6 +16,7 @@
background: darken($color, 10%); background: darken($color, 10%);
border-color: darken($color, 10%); border-color: darken($color, 10%);
box-shadow: 0 1px 2px rgba($color, 0.6); box-shadow: 0 1px 2px rgba($color, 0.6);
box-shadow: inset 0 0 10px rgba(darken($color, 30%), 0.2);
} }
&:focus { &:focus {
@ -28,6 +29,7 @@
border-color: darken($color, 25%); border-color: darken($color, 25%);
text-shadow: none; text-shadow: none;
color: darken($fg, 30%); color: darken($fg, 30%);
box-shadow: inset 0 0 5px rgba(darken($color, 60%), 0.2);
} }
} }
@ -71,6 +73,7 @@
border-color: $black; border-color: $black;
color: #333; color: #333;
cursor: default; cursor: default;
box-shadow: inset 0 0 10px rgba($black, 0.1);
} }
&.btn-wide { &.btn-wide {

26
3D Components/Sass/assets/_tab.scss
View file

@ -33,6 +33,7 @@
background: darken($color, 15%); background: darken($color, 15%);
background-image: linear-gradient(to top, darken($color, 10%), darken($color, 15%)); background-image: linear-gradient(to top, darken($color, 10%), darken($color, 15%));
border-color: 1px darken($color, 20%) solid; 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; text-shadow: 0 1px 0 $black;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
&:first-child { @if $border-radius <= 0 {
border-top-left-radius: $border-radius; &:first-child {
border-bottom-left-radius: $border-radius; border-top-left-radius: 3px;
} border-bottom-left-radius: 3px;
&:last-child { }
border-top-right-radius: $border-radius; &:last-child {
border-bottom-right-radius: $border-radius; 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 { &:hover {

2
3D Components/Sass/style.scss
View file

@ -19,7 +19,7 @@ $fg-color: #E8E3E3;
$accent: $green; $accent: $green;
$accent-alt: $purple; $accent-alt: $purple;
$border-radius: 0.2rem; $border-radius: 0;
@import 'assets/button'; @import 'assets/button';
@import 'assets/badge'; @import 'assets/badge';

2
3D Components/index.html
View file

@ -29,7 +29,7 @@
<body> <body>
<main> <main>
<h1>Sass Templates</h1> <h1>Sass Templates</h1>
<p>Planning to use this in some projects, feel free to steal some code from here</p> <p>gwa gwa</p>
<hr> <hr>
<div class="tabs"> <div class="tabs">