Steev/steevcss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added Alert Elements

Browse Source
This commit is contained in:
steevLP 2021-01-24 02:17:37 +01:00
parent c84b222a24
commit fd8e8edc8f
5 changed files with 95 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
dist/ef19487056b129c8f3eda17f9543ab70.css vendored
View File

@ -4,7 +4,7 @@
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #f1f1f1; background: #f8f8f8;
font-family: sans-serif; } font-family: sans-serif; }
main { main {
@ -58,9 +58,37 @@ h12 {
.container { .container {
width: calc( 100% - 10em); width: calc( 100% - 10em);
max-width: 60em; max-width: 90em;
margin: 0 auto; } 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-"] { div[class^="col-"] {
padding: 1rem 0; padding: 1rem 0;
text-align: center; } text-align: center; }
@ -142,7 +170,7 @@ div[class^="col-"] {
margin-left: 100%; } margin-left: 100%; }
header { header {
background: #dfdfdf; background: #f1f1f1;
text-align: center; text-align: center;
position: fixed; position: fixed;
height: 30px; height: 30px;
@ -190,7 +218,7 @@ nav {
top: 100%; top: 100%;
width: 100%; width: 100%;
left: 0; left: 0;
background: #dfdfdf; background: #f1f1f1;
display: none; display: none;
transform: scale(1, 0); transform: scale(1, 0);
transform-origin: top; transform-origin: top;
@ -209,11 +237,11 @@ nav a {
text-decoration: none; text-decoration: none;
font-size: 1.2rem; font-size: 1.2rem;
text-transform: uppercase; text-transform: uppercase;
color: white; color: #2e2e2e;
opacity: 0; } opacity: 0; }
nav a:hover { nav a:hover {
color: #000; } color: #a5a5a5; }
.nav-toggle:checked ~ nav { .nav-toggle:checked ~ nav {
display: block; display: block;
@ -229,11 +257,8 @@ nav a:hover {
header { header {
display: grid; display: grid;
grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr; } grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr; }
.nav-logo {
grid-column: 2 / span 1; }
nav { nav {
all: unset; all: unset;
grid-column: 3 / 4;
display: flex; display: flex;
align-items: center; } align-items: center; }
nav a { nav a {

2
dist/ef19487056b129c8f3eda17f9543ab70.js vendored
View File

@ -149,7 +149,7 @@ function Module() {
module.bundle.Module = Module; module.bundle.Module = Module;
if (!module.bundle.parent && typeof WebSocket !== 'undefined') { 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) { ws.onmessage = function(event) {
var data = JSON.parse(event.data); var data = JSON.parse(event.data);

14
dist/index.html vendored
View File

@ -8,13 +8,13 @@
</head> </head>
<body> <body>
<header> <header>
<h1 class="nav-logo-left">Logo</h1> <h1 class="nav-logo">Logo</h1>
<input id="nav-toggle" type="checkbox" class="nav-toggle"> <input id="nav-toggle" type="checkbox" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label"> <label for="nav-toggle" class="nav-toggle-label">
<span></span> <span></span>
</label> </label>
<nav class="nav-left"> <nav>
<ul class="nav-left"> <ul>
<li><a href="#">Test</a></li> <li><a href="#">Test</a></li>
<li><a href="#">Test</a></li> <li><a href="#">Test</a></li>
<li><a href="#">Test</a></li> <li><a href="#">Test</a></li>
@ -24,7 +24,13 @@
</nav> </nav>
</header> </header>
<main> <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> <h1 style="text-align: center;">CSS Grid</h1>
<div class="row"> <div class="row">
<div class="col-12 display"><h1>12</h1></div> <div class="col-12 display"><h1>12</h1></div>

14
src/index.html
View File

@ -8,13 +8,13 @@
</head> </head>
<body> <body>
<header> <header>
<h1 class="nav-logo-left">Logo</h1> <h1 class="nav-logo">Logo</h1>
<input id="nav-toggle" type="checkbox" class="nav-toggle"> <input id="nav-toggle" type="checkbox" class="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label"> <label for="nav-toggle" class="nav-toggle-label">
<span></span> <span></span>
</label> </label>
<nav class="nav-left"> <nav>
<ul class="nav-left"> <ul>
<li><a href="#">Test</a></li> <li><a href="#">Test</a></li>
<li><a href="#">Test</a></li> <li><a href="#">Test</a></li>
<li><a href="#">Test</a></li> <li><a href="#">Test</a></li>
@ -24,7 +24,13 @@
</nav> </nav>
</header> </header>
<main> <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> <h1 style="text-align: center;">CSS Grid</h1>
<div class="row"> <div class="row">
<div class="col-12 display"><h1>12</h1></div> <div class="col-12 display"><h1>12</h1></div>

48
src/scss/main.sass
View File

@ -1,7 +1,17 @@
$primBG: rgb(241, 241, 241) $primBG: rgb(248, 248, 248)
$columns: 12 $columns: 12
$navBG: #dfdfdf $navBG: #f1f1f1
$navgap: 1em $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 box-sizing: border-box
body body
@ -28,8 +38,33 @@ main
// Container // Container
.container .container
width: calc( 100% - 10em ) width: calc( 100% - 10em )
max-width: 60em max-width: 90em
margin: 0 auto 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 // Grid
div[class^="col-"] div[class^="col-"]
padding: 1rem 0 padding: 1rem 0
@ -101,10 +136,10 @@ nav a
text-decoration: none text-decoration: none
font-size: 1.2rem font-size: 1.2rem
text-transform: uppercase text-transform: uppercase
color: white color: $navdefcolor
opacity: 0 opacity: 0
nav a:hover nav a:hover
color: #000 color: $navhovcolor
.nav-toggle:checked ~ nav .nav-toggle:checked ~ nav
display: block display: block
transform: scale(1,1) transform: scale(1,1)
@ -117,11 +152,8 @@ nav a:hover
header header
display: grid display: grid
grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr grid-template-columns: 1fr auto minmax(600px, 1fr) 1fr
.nav-logo
grid-column: 2 / span 1
nav nav
all: unset all: unset
grid-column: 3 / 4
display: flex display: flex
align-items: center align-items: center
nav a nav a