Added buttons.
parent
75b48e1a47
commit
2eaa38c955
|
|
@ -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;
|
||||
$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);
|
||||
|
|
@ -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 "headings";
|
||||
@use "text";
|
||||
@use "buttons";
|
||||
|
||||
@use "layouts/publishing";
|
||||
|
|
@ -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 %}
|
||||
<h1>Welcome to Nebulosa CSS!</h1>
|
||||
{% block main %}
|
||||
<header>
|
||||
<h1>Welcome to Nebulosa CSS!</h1>
|
||||
</header>
|
||||
<a href="/headings">Headings</a>
|
||||
<a href="/buttons">Buttons</a>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue