Added buttons.
This commit is contained in:
parent
75b48e1a47
commit
2eaa38c955
|
|
@ -158,9 +158,32 @@ $pink: $pink500;
|
||||||
|
|
||||||
$surface: $grey100;
|
$surface: $grey100;
|
||||||
$text: $grey800;
|
$text: $grey800;
|
||||||
|
|
||||||
|
$primary50: $sea50;
|
||||||
|
$primary100: $sea100;
|
||||||
|
$primary200: $sea200;
|
||||||
|
$primary300: $sea300;
|
||||||
|
$primary400: $sea400;
|
||||||
|
$primary500: $sea500;
|
||||||
|
$primary600: $sea600;
|
||||||
|
$primary700: $sea700;
|
||||||
|
$primary800: $sea800;
|
||||||
|
$primary900: $sea900;
|
||||||
$primary: $sea;
|
$primary: $sea;
|
||||||
|
|
||||||
|
|
||||||
$success: $sea;
|
$success: $sea;
|
||||||
$danger: $red;
|
$danger: $red;
|
||||||
$warning: $yellow;
|
$warning: $yellow;
|
||||||
$info: $blue;
|
$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
157
src/buttons.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -4,5 +4,6 @@
|
||||||
@use "fonts";
|
@use "fonts";
|
||||||
@use "headings";
|
@use "headings";
|
||||||
@use "text";
|
@use "text";
|
||||||
|
@use "buttons";
|
||||||
|
|
||||||
@use "layouts/publishing";
|
@use "layouts/publishing";
|
||||||
38
web/pages/buttons.njk
Normal file
38
web/pages/buttons.njk
Normal 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 %}
|
||||||
|
|
@ -1,6 +1,9 @@
|
||||||
{% extends "templates/base.njk" %}
|
{% extends "templates/publishing.njk" %}
|
||||||
|
|
||||||
{% block body %}
|
{% block main %}
|
||||||
<h1>Welcome to Nebulosa CSS!</h1>
|
<header>
|
||||||
|
<h1>Welcome to Nebulosa CSS!</h1>
|
||||||
|
</header>
|
||||||
<a href="/headings">Headings</a>
|
<a href="/headings">Headings</a>
|
||||||
|
<a href="/buttons">Buttons</a>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user