BurnyLlama/nebulosa-css
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added buttons.

Browse Source
This commit is contained in:
BurnyLlama 2023-03-06 10:10:42 +01:00
parent 75b48e1a47
commit 2eaa38c955
5 changed files with 226 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/_palette.scss
View File

@ -158,9 +158,32 @@ $pink: $pink500;
$surface: $grey100;
$text: $grey800;
$primary50: $sea50;
$primary100: $sea100;
$primary200: $sea200;
$primary300: $sea300;
$primary400: $sea400;
$primary500: $sea500;
$primary600: $sea600;
$primary700: $sea700;
$primary800: $sea800;
$primary900: $sea900;
$primary: $sea;
$success: $sea;
$danger: $red;
$warning: $yellow;
$info: $blue;
$shadow50: rgba($grey50, 0.5);
$shadow100: rgba($grey100, 0.5);
$shadow200: rgba($grey200, 0.5);
$shadow300: rgba($grey300, 0.5);
$shadow400: rgba($grey400, 0.5);
$shadow500: rgba($grey500, 0.5);
$shadow600: rgba($grey600, 0.5);
$shadow700: rgba($grey700, 0.5);
$shadow800: rgba($grey800, 0.5);
$shadow900: rgba($grey900, 0.5);

157
src/buttons.scss Normal file
View File

@ -0,0 +1,157 @@
// FIXME: All secondary buttons should maybe use a secondary colour!
@use "palette";
.btn {
cursor: pointer;
display: block;
text-decoration: none;
text-align: center;
margin: .5rem 1rem .5rem 0;
padding: .5rem 1rem;
border: 2px solid palette.$primary;
&.raised {
transform: translateY(-.3rem);
box-shadow: 0 .3rem 0 0 palette.$primary600;
transition: .3s transform, .3s box-shadow;
&:hover {
transform: translateY(0);
box-shadow: 0 0 0 0 palette.$primary600;
}
&.primary {
@if lightness(palette.$primary) < 50 {
color: palette.$grey50
} @else {
color: palette.$grey900
}
background-color: palette.$primary;
}
// TODO: This looks really bad. :)
&.secondary {
@if lightness(palette.$primary50) < 50 {
color: palette.$grey50
} @else {
color: palette.$grey900
}
background-color: palette.$primary200;
border-color: palette.$primary200;
box-shadow: 0 .3rem 0 0 palette.$primary400;
&:hover {
box-shadow: 0 0 0 0 palette.$primary;
}
}
&[disabled] {
color: palette.$grey500;
background-color: palette.$grey200;
border-color: palette.$grey200;
box-shadow: 0 .3rem 0 0 palette.$grey300;
&:hover {
transform: translateY(-.3rem);
}
}
}
&.filled {
transition: .3s color, .3s background-color;
&.primary {
@if lightness(palette.$primary) < 50 {
color: palette.$grey50
} @else {
color: palette.$grey900
}
background-color: palette.$primary;
}
// TODO: This looks really bad. :)
&.secondary {
@if lightness(palette.$primary200) < 50 {
color: palette.$grey50
} @else {
color: palette.$grey900
}
background-color: palette.$primary200;
border-color: palette.$primary200;
}
&:hover {
background-color: transparent;
}
&[disabled] {
color: palette.$grey500;
background-color: palette.$grey200;
border-color: palette.$grey200;
}
}
&.outline {
transition: .3s color, .3s background-color;
&.primary {
@if lightness(palette.$primary) < 50 {
color: palette.$grey50
} @else {
color: palette.$grey900
}
background-color: transparent;
&:hover {
background-color: palette.$primary;
}
}
// TODO: This looks really bad. :)
&.secondary {
@if lightness(palette.$primary200) < 50 {
color: palette.$grey50
} @else {
color: palette.$grey900
}
background-color: transparent;
border-color: palette.$primary200;
&:hover {
background-color: palette.$primary200;
}
}
&[disabled] {
color: palette.$grey500;
border-color: palette.$grey200;
}
}
&.textonly {
font-weight: bold;
font-family: 'Manrope';
padding: .5rem .3rem;
background-color: transparent;
border-color: transparent;
text-transform: uppercase;
&.primary {
color: palette.$primary;
}
&.secondary {
color: palette.$text;
}
&[disabled] {
color: palette.$grey300;
}
}
&[disabled] {
cursor: not-allowed;
}
}

1
src/main.scss
View File

@ -4,5 +4,6 @@
@use "fonts";
@use "headings";
@use "text";
@use "buttons";
@use "layouts/publishing";

38
web/pages/buttons.njk Normal file
View File

@ -0,0 +1,38 @@
{% extends "templates/publishing.njk" %}
{% block main %}
<header>
<h1>Nebulosa CSS</h1>
<h2>A showcase of buttons</h2>
</header>
<h1>Buttons</h1>
<h2>Raised</h2>
<div>
<button class="btn raised primary">Primary</button>
<button class="btn raised secondary">Secondary</button>
<button class="btn raised" disabled>Disabled</button>
</div>
<h2>Filled</h2>
<div>
<button class="btn filled primary">Primary</button>
<button class="btn filled secondary">Secondary</button>
<button class="btn filled" disabled>Disabled</button>
</div>
<h2>Outline</h2>
<div>
<button class="btn outline primary">Primary</button>
<button class="btn outline secondary">Secondary</button>
<button class="btn outline" disabled>Disabled</button>
</div>
<h2>Text only</h2>
<div>
<button class="btn textonly primary">Primary</button>
<button class="btn textonly secondary">Secondary</button>
<button class="btn textonly" disabled>Disabled</button>
</div>
{% endblock %}

7
web/pages/index.njk
View File

@ -1,6 +1,9 @@
{% extends "templates/base.njk" %}
{% extends "templates/publishing.njk" %}
{% block body %}
{% block main %}
<header>
<h1>Welcome to Nebulosa CSS!</h1>
</header>
<a href="/headings">Headings</a>
<a href="/buttons">Buttons</a>
{% endblock %}