Fluffy/SassStuff
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

First Commit

Browse source
This commit is contained in:
Michał Gdula 2022-10-01 15:25:51 +00:00
parent 47b3601a43
commit 045ee3ff9f
10 changed files with 727 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

77
3D Components/Sass/assets/_alert.scss Normal file
View file

@ -0,0 +1,77 @@
@mixin alert($color, $fg: $color) {
background: lighten($color, 10%);
border-color: $color;
color: darken($fg, 20%);
a {
color: darken($fg, 30%);
&:hover {
color: darken($fg, 40%);
}
}
.alert-close {
color: darken($fg, 20%);
}
}
.alert {
padding: 0.85em;
border: 1px solid $black;
@if $border-radius <= 0 {
border-radius: 3px;
} @else {
border-radius: $border-radius;
}
margin-bottom: 1em;
position: relative;
.alert-close {
position: absolute;
top: 50%;
right: 0.5em;
font-size: 1.5em;
font-weight: bold;
line-height: 1;
color: $black;
text-shadow: 0 1px 0 $black;
vertical-align: middle;
opacity: 0.2;
transition: all 0.2s ease-in-out;
transform: translateY(calc(-50% - 3px));
&:hover {
opacity: 0.5;
cursor: pointer;
}
&:active {
opacity: 0.8;
}
}
&.alert-primary {
@include alert($accent);
}
&.alert-secondary {
@include alert($accent-alt);
}
&.alert-success {
@include alert($green);
}
&.alert-danger {
@include alert($red);
}
&.alert-warning {
@include alert($orange);
}
&.alert-info {
@include alert($blue);
}
}

55
3D Components/Sass/assets/_badge.scss Normal file
View file

@ -0,0 +1,55 @@
@mixin badge($color, $fg: $color) {
background: $color;
background-image: linear-gradient(to top, darken($color, 5%), $color);
color: darken($fg, 30%);
}
.badge {
display: inline-block;
padding: 0.4em 0.6em;
background: $black;
@if $border-radius <= 0 {
border-radius: 3px;
} @else {
border-radius: $border-radius;
}
color: $white;
font-size: 0.8em;
font-weight: bold;
line-height: 1;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
&.badge-primary {
@include badge($accent);
}
&.badge-secondary {
@include badge($accent-alt);
}
&.badge-success {
@include badge($green);
}
&.badge-danger {
@include badge($red);
}
&.badge-warning {
@include badge($orange);
}
&.badge-info {
@include badge($blue);
}
&.badge-dark {
@include badge($black, $white);
}
&.badge-light {
@include badge($white, $black);
}
}

76
3D Components/Sass/assets/_banner.scss Normal file
View file

@ -0,0 +1,76 @@
@mixin page-banner($color, $fg: $color) {
background: $color;
color: darken($fg, 20%);
a {
color: darken($fg, 30%);
&:hover {
color: darken($fg, 40%);
}
}
.alert-close {
color: darken($fg, 20%);
}
}
.page-banner {
padding: 0.5rem;
background: $accent;
color: $white;
text-align: center;
position: relative;
> * {
margin: 0.2rem 0;
}
.page-banner-close {
margin: 0;
position: absolute;
top: 50%;
right: 0.5em;
font-size: 1.5em;
font-weight: bold;
line-height: 1;
color: $black;
text-shadow: 0 1px 0 $black;
vertical-align: middle;
opacity: 0.2;
transition: all 0.2s ease-in-out;
transform: translateY(calc(-50% - 3px));
&:hover {
opacity: 0.5;
cursor: pointer;
}
&:active {
opacity: 0.8;
}
}
&.page-banner-primary {
@include page-banner($accent);
}
&.page-banner-secondary {
@include page-banner($accent-alt);
}
&.page-banner-success {
@include page-banner($green);
}
&.page-banner-danger {
@include page-banner($red);
}
&.page-banner-warning {
@include page-banner($orange);
}
&.page-banner-info {
@include page-banner($blue);
}
}

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

@ -0,0 +1,111 @@
// Buttons
@mixin btn($color, $fg: $color) {
background: $color;
background-image: linear-gradient(to top, darken($color, 5%), $color);
border-color: $color;
text-shadow: 0 1px 0 $color;
color: darken($fg, 30%);
&:hover {
background: darken($color, 5%);
background-image: linear-gradient(to bottom, darken($color, 5%), $color);
border-color: darken($color, 5%);
}
&:active {
background: darken($color, 10%);
border-color: darken($color, 10%);
box-shadow: 0 1px 2px rgba($color, 0.6);
}
&:focus {
border-color: darken($color, 5%);
box-shadow: 0 0 0 1px rgba($color, 0.2), 0 1px 2px rgba($color, 0.2);
}
&:disabled {
background: darken($color, 20%);
border-color: darken($color, 25%);
text-shadow: none;
color: darken($fg, 30%);
}
}
.btn {
display: inline-block;
padding: 0.5em 1em;
background: $black;
border: 1px solid $black;
@if $border-radius <= 0 {
border-radius: 3px;
} @else {
border-radius: $border-radius;
}
color: $white;
text-decoration: none;
text-shadow: 0 1px 0 $black;
box-shadow: 0 1px 2px rgba($black, 0.2);
transition: all 0.2s ease-in-out;
&:hover {
background: $black;
border-color: $black;
box-shadow: 0 1px 2px rgba($black, 0.2);
cursor: pointer;
}
&:active {
background: #000;
border-color: $black;
box-shadow: inset 0 1px 2px rgba($black, 0.3);
}
&:focus {
outline: none;
border-color: $black;
box-shadow: 0 0 0 1px rgba($black, 0.2), 0 1px 2px rgba($black, 0.2);
}
&:disabled {
background: #151515;
border-color: $black;
color: #333;
cursor: default;
}
&.btn-wide {
width: 100%;
}
&.btn-primary {
@include btn($accent);
}
&.btn-secondary {
@include btn($accent-alt);
}
&.btn-success {
@include btn($green);
}
&.btn-danger {
@include btn($red);
}
&.btn-warning {
@include btn($orange);
}
&.btn-info {
@include btn($blue);
}
&.btn-dark {
@include btn($black, #fefefe);
}
&.btn-light {
@include btn($white, #121212);
}
}

58
3D Components/Sass/assets/_image-container.scss Normal file
View file

@ -0,0 +1,58 @@
.img-container {
position: relative;
overflow: hidden;
background: $bg-color;
border: 0.2rem solid $accent;
@if $border-radius <= 0 {
border-radius: 3px;
} @else {
border-radius: $border-radius;
}
color: $fg-color;
margin-bottom: 1em;
box-shadow: 0 1px 2px rgba($black, 0.2);
&.img-container-primary {
border-color: $accent;
}
&.img-container-secondary {
border-color: $accent-alt;
}
&.img-container-success {
border-color: $green;
}
&.img-container-danger {
border-color: $red;
}
&.img-container-warning {
border-color: $orange;
}
&.img-container-info {
border-color: $blue;
}
&.img-container-dark {
border-color: $black;
}
&.img-container-light {
border-color: $white;
}
&.img-container-transparent {
background: transparent;
border: none;
color: $fg-color;
}
img {
display: block;
width: 100%;
height: auto;
}
}

108
3D Components/Sass/assets/_tab.scss Normal file
View file

@ -0,0 +1,108 @@
@mixin tab($color, $fg: $color) {
background: $color;
background-image: linear-gradient(to top, darken($color, 5%), $color);
border-color: $color;
text-shadow: 0 1px 0 $color;
color: darken($fg, 30%);
&:hover {
background: darken($color, 5%);
background-image: linear-gradient(to bottom, darken($color, 5%), $color);
border-color: darken($color, 5%);
}
&:active {
background: darken($color, 10%);
border-color: darken($color, 10%);
box-shadow: 0 1px 2px rgba($color, 0.6);
}
&:focus {
border-color: darken($color, 5%);
box-shadow: 0 0 0 1px rgba($color, 0.2), 0 1px 2px rgba($color, 0.2);
}
&:disabled {
background: darken($color, 20%);
border-color: darken($color, 25%);
text-shadow: none;
color: darken($fg, 30%);
}
&.active {
background: darken($color, 15%);
background-image: linear-gradient(to top, darken($color, 10%), darken($color, 15%));
border-color: 1px darken($color, 20%) solid;
}
}
.tabs {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
.tab {
display: block;
margin: 0;
padding: 0.5em 1em;
background: $black;
border: 1px solid $black;
color: $white;
text-decoration: none;
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;
}
&:hover {
background: $black;
border-color: $black;
cursor: pointer;
}
&:focus {
outline: none;
border-color: $black;
}
}
.tab-primary {
@include tab($accent);
}
.tab-secondary {
@include tab($accent-alt);
}
.tab-success {
@include tab($green);
}
.tab-danger {
@include tab($red);
}
.tab-warning {
@include tab($orange);
}
.tab-info {
@include tab($blue);
}
.tab-light {
@include tab($white, #121212);
}
.tab-dark {
@include tab($black, #fefefe);
}
}