added Alert Elements
This commit is contained in:
parent
c84b222a24
commit
fd8e8edc8f
43
dist/ef19487056b129c8f3eda17f9543ab70.css
vendored
43
dist/ef19487056b129c8f3eda17f9543ab70.css
vendored
@ -4,7 +4,7 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f1f1f1;
|
||||
background: #f8f8f8;
|
||||
font-family: sans-serif; }
|
||||
|
||||
main {
|
||||
@ -58,9 +58,37 @@ h12 {
|
||||
|
||||
.container {
|
||||
width: calc( 100% - 10em);
|
||||
max-width: 60em;
|
||||
max-width: 90em;
|
||||
margin: 0 auto; }
|
||||
|
||||
.alert-primary {
|
||||
border-radius: 2px;
|
||||
background-color: #3498db;
|
||||
border: 1px solid #2980b9;
|
||||
padding: 1rem;
|
||||
color: white; }
|
||||
|
||||
.alert-danger {
|
||||
border-radius: 2px;
|
||||
background-color: #e74c3c;
|
||||
border: 1px solid #c0392b;
|
||||
padding: 1rem;
|
||||
color: white; }
|
||||
|
||||
.alert-warning {
|
||||
border-radius: 2px;
|
||||
background-color: #f1c40f;
|
||||
border: 1px solid #f39c12;
|
||||
padding: 1rem;
|
||||
color: white; }
|
||||
|
||||
.alert-success {
|
||||
border-radius: 2px;
|
||||
background-color: #2ecc71;
|
||||
border: 1px solid #27ae60;
|
||||
padding: 1rem;
|
||||
color: white; }
|
||||
|
||||
div[class^="col-"] {
|
||||
padding: 1rem 0;
|
||||
text-align: center; }
|
||||
@ -142,7 +170,7 @@ div[class^="col-"] {
|
||||
margin-left: 100%; }
|
||||
|
||||
header {
|
||||
background: #dfdfdf;
|
||||
background: #f1f1f1;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
height: 30px;
|
||||
@ -190,7 +218,7 @@ nav {
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
background: #dfdfdf;
|
||||
background: #f1f1f1;
|
||||
display: none;
|
||||
transform: scale(1, 0);
|
||||
transform-origin: top;
|
||||
@ -209,11 +237,11 @@ nav a {
|
||||
text-decoration: none;
|
||||
font-size: 1.2rem;
|
||||
text-transform: uppercase;
|
||||
color: white;
|
||||
color: #2e2e2e;
|
||||
opacity: 0; }
|
||||
|
||||
nav a:hover {
|
||||
color: #000; }
|
||||
color: #a5a5a5; }
|
||||
|
||||
.nav-toggle:checked ~ nav {
|
||||
display: block;
|
||||
@ -229,11 +257,8 @@ nav a:hover {
|
||||
header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr; }
|
||||
.nav-logo {
|
||||
grid-column: 2 / span 1; }
|
||||
nav {
|
||||
all: unset;
|
||||
grid-column: 3 / 4;
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
nav a {
|
||||
|
||||
2
dist/ef19487056b129c8f3eda17f9543ab70.js
vendored
2
dist/ef19487056b129c8f3eda17f9543ab70.js
vendored
@ -149,7 +149,7 @@ function Module() {
|
||||
module.bundle.Module = Module;
|
||||
|
||||
if (!module.bundle.parent && typeof WebSocket !== 'undefined') {
|
||||
var ws = new WebSocket('ws://localhost:58854/');
|
||||
var ws = new WebSocket('ws://localhost:63342/');
|
||||
ws.onmessage = function(event) {
|
||||
var data = JSON.parse(event.data);
|
||||
|
||||
|
||||
14
dist/index.html
vendored
14
dist/index.html
vendored
@ -8,13 +8,13 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="nav-logo-left">Logo</h1>
|
||||
<h1 class="nav-logo">Logo</h1>
|
||||
<input id="nav-toggle" type="checkbox" class="nav-toggle">
|
||||
<label for="nav-toggle" class="nav-toggle-label">
|
||||
<span></span>
|
||||
</label>
|
||||
<nav class="nav-left">
|
||||
<ul class="nav-left">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
@ -24,7 +24,13 @@
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div class="container" style="border: 1px solid black;">
|
||||
<div class="container">
|
||||
<h1 style="text-align: center;">Alert Elements</h1>
|
||||
<div class="alert-primary"> test </div>
|
||||
<div class="alert-danger"> test </div>
|
||||
<div class="alert-warning"> test </div>
|
||||
<div class="alert-success"> test </div>
|
||||
<br>
|
||||
<h1 style="text-align: center;">CSS Grid</h1>
|
||||
<div class="row">
|
||||
<div class="col-12 display"><h1>12</h1></div>
|
||||
|
||||
@ -8,13 +8,13 @@
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="nav-logo-left">Logo</h1>
|
||||
<h1 class="nav-logo">Logo</h1>
|
||||
<input id="nav-toggle" type="checkbox" class="nav-toggle">
|
||||
<label for="nav-toggle" class="nav-toggle-label">
|
||||
<span></span>
|
||||
</label>
|
||||
<nav class="nav-left">
|
||||
<ul class="nav-left">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
<li><a href="#">Test</a></li>
|
||||
@ -24,7 +24,13 @@
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div class="container" style="border: 1px solid black;">
|
||||
<div class="container">
|
||||
<h1 style="text-align: center;">Alert Elements</h1>
|
||||
<div class="alert-primary"> test </div>
|
||||
<div class="alert-danger"> test </div>
|
||||
<div class="alert-warning"> test </div>
|
||||
<div class="alert-success"> test </div>
|
||||
<br>
|
||||
<h1 style="text-align: center;">CSS Grid</h1>
|
||||
<div class="row">
|
||||
<div class="col-12 display"><h1>12</h1></div>
|
||||
|
||||
@ -1,7 +1,17 @@
|
||||
$primBG: rgb(241, 241, 241)
|
||||
$primBG: rgb(248, 248, 248)
|
||||
$columns: 12
|
||||
$navBG: #dfdfdf
|
||||
$navBG: #f1f1f1
|
||||
$navgap: 1em
|
||||
$navdefcolor: #2e2e2e
|
||||
$navhovcolor: #a5a5a5
|
||||
$primary: #3498db
|
||||
$primary_dark: #2980b9
|
||||
$danger: #e74c3c
|
||||
$danger_dark: #c0392b
|
||||
$warning: #f1c40f
|
||||
$warning_dark: #f39c12
|
||||
$success: #2ecc71
|
||||
$success_dark: #27ae60
|
||||
*
|
||||
box-sizing: border-box
|
||||
body
|
||||
@ -28,8 +38,33 @@ main
|
||||
// Container
|
||||
.container
|
||||
width: calc( 100% - 10em )
|
||||
max-width: 60em
|
||||
max-width: 90em
|
||||
margin: 0 auto
|
||||
// Alert
|
||||
.alert-primary
|
||||
border-radius: 2px
|
||||
background-color: $primary
|
||||
border: 1px solid $primary_dark
|
||||
padding: 1rem
|
||||
color: white
|
||||
.alert-danger
|
||||
border-radius: 2px
|
||||
background-color: $danger
|
||||
border: 1px solid $danger_dark
|
||||
padding: 1rem
|
||||
color: white
|
||||
.alert-warning
|
||||
border-radius: 2px
|
||||
background-color: $warning
|
||||
border: 1px solid $warning_dark
|
||||
padding: 1rem
|
||||
color: white
|
||||
.alert-success
|
||||
border-radius: 2px
|
||||
background-color: $success
|
||||
border: 1px solid $success_dark
|
||||
padding: 1rem
|
||||
color: white
|
||||
// Grid
|
||||
div[class^="col-"]
|
||||
padding: 1rem 0
|
||||
@ -101,10 +136,10 @@ nav a
|
||||
text-decoration: none
|
||||
font-size: 1.2rem
|
||||
text-transform: uppercase
|
||||
color: white
|
||||
color: $navdefcolor
|
||||
opacity: 0
|
||||
nav a:hover
|
||||
color: #000
|
||||
color: $navhovcolor
|
||||
.nav-toggle:checked ~ nav
|
||||
display: block
|
||||
transform: scale(1,1)
|
||||
@ -117,11 +152,8 @@ nav a:hover
|
||||
header
|
||||
display: grid
|
||||
grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr
|
||||
.nav-logo
|
||||
grid-column: 2 / span 1
|
||||
nav
|
||||
all: unset
|
||||
grid-column: 3 / 4
|
||||
display: flex
|
||||
align-items: center
|
||||
nav a
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user