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 {
padding: 0.85em;
padding: 0.85em 2.5em 0.85em 0.85em;
border: 1px solid $black;
@if $border-radius <= 0 {
border-radius: 3px;

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

@ -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 {

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

@ -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 {

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

@ -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';

2
3D Components/index.html
View file

@ -29,7 +29,7 @@
<body>
<main>
<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>
<div class="tabs">