148 lines
4.3 KiB
Text
148 lines
4.3 KiB
Text
|
|
||
|
|
<!doctype html>
|
||
|
|
<html lang="da">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<title>Event Farvesystem Demo</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
/* Palette */
|
||
|
|
--b-color-red: #e53935;
|
||
|
|
--b-color-pink: #d81b60;
|
||
|
|
--b-color-magenta: #c200c2;
|
||
|
|
--b-color-purple: #8e24aa;
|
||
|
|
--b-color-violet: #5e35b1;
|
||
|
|
--b-color-deep-purple: #4527a0;
|
||
|
|
--b-color-indigo: #3949ab;
|
||
|
|
--b-color-blue: #1e88e5;
|
||
|
|
--b-color-light-blue: #03a9f4;
|
||
|
|
--b-color-cyan: #3bc9db;
|
||
|
|
--b-color-teal: #00897b;
|
||
|
|
--b-color-green: #43a047;
|
||
|
|
--b-color-light-green: #8bc34a;
|
||
|
|
--b-color-lime: #c0ca33;
|
||
|
|
--b-color-yellow: #fdd835;
|
||
|
|
--b-color-amber: #ffb300;
|
||
|
|
--b-color-orange: #fb8c00;
|
||
|
|
--b-color-deep-orange: #f4511e;
|
||
|
|
|
||
|
|
/* Basismix (lysning). Kan skiftes til #000 for mørkning */
|
||
|
|
--b-mix: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: system-ui, sans-serif;
|
||
|
|
background: #f3f3f3;
|
||
|
|
margin: 0;
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 { margin-top: 0; }
|
||
|
|
|
||
|
|
.grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* -----------------------------------------------------------
|
||
|
|
EVENT KOMPONENT
|
||
|
|
----------------------------------------------------------- */
|
||
|
|
.event {
|
||
|
|
--b-text: var(--b-primary);
|
||
|
|
|
||
|
|
display: flex;
|
||
|
|
border-radius: .5rem;
|
||
|
|
overflow: hidden;
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 1rem 1rem 1rem .75rem;
|
||
|
|
background-color: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
|
||
|
|
color: var(--b-text);
|
||
|
|
border-left: 6px solid var(--b-primary);
|
||
|
|
|
||
|
|
transition:
|
||
|
|
background-color .2s ease,
|
||
|
|
border-color .2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.event:hover {
|
||
|
|
background-color: color-mix(in srgb, var(--b-primary) 25%, var(--b-mix));
|
||
|
|
}
|
||
|
|
|
||
|
|
.event-title {
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: .25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.event-meta {
|
||
|
|
font-size: .85rem;
|
||
|
|
opacity: .8;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* -----------------------------------------------------------
|
||
|
|
eksempel på UTILITY-KLASSER
|
||
|
|
----------------------------------------------------------- */
|
||
|
|
.is-red { --b-primary: var(--b-color-red); }
|
||
|
|
.is-blue { --b-primary: var(--b-color-blue); }
|
||
|
|
.is-green { --b-primary: var(--b-color-green); }
|
||
|
|
.is-magenta { --b-primary: var(--b-color-magenta); }
|
||
|
|
.is-amber { --b-primary: var(--b-color-amber); }
|
||
|
|
.is-orange { --b-primary: var(--b-color-orange); }
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<h1>Event Farvesystem Demo</h1>
|
||
|
|
<p>Baggrunden er dæmpet primærfarve, hover gør den mørkere, venstre kant og tekst bruger den rene farve.</p>
|
||
|
|
|
||
|
|
<div class="grid">
|
||
|
|
|
||
|
|
<div class="event is-blue">
|
||
|
|
<div>
|
||
|
|
<div class="event-title">Blå event</div>
|
||
|
|
<div class="event-meta">.is-blue</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="event is-red">
|
||
|
|
<div>
|
||
|
|
<div class="event-title">Rød event</div>
|
||
|
|
<div class="event-meta">.is-red</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="event is-green">
|
||
|
|
<div>
|
||
|
|
<div class="event-title">Grøn event</div>
|
||
|
|
<div class="event-meta">.is-green</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="event is-magenta">
|
||
|
|
<div>
|
||
|
|
<div class="event-title">Magenta event</div>
|
||
|
|
<div class="event-meta">.is-magenta</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="event is-amber">
|
||
|
|
<div>
|
||
|
|
<div class="event-title">Amber event</div>
|
||
|
|
<div class="event-meta">.is-amber</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="event is-orange">
|
||
|
|
<div>
|
||
|
|
<div class="event-title">Orange event</div>
|
||
|
|
<div class="event-meta">.is-orange</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|