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

minor update

Browse Source
This commit is contained in:
steevLP 2021-01-28 02:19:03 +01:00
parent 093b6c8e8c
commit e0ec96562d
5 changed files with 56 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
dist/ef19487056b129c8f3eda17f9543ab70.css vendored
View File

@ -5,7 +5,7 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #f8f8f8; background: #f8f8f8;
font-family: sans-serif; } font-family: sans-serifs; }
main { main {
z-index: 980; z-index: 980;
@ -93,11 +93,13 @@ h12 {
.notification-primary { .notification-primary {
width: 100%; width: 100%;
display: flex; } display: flex;
padding: 5px;
border: 2px solid #3498db;
border-radius: 2px; }
.notification-primary h2 { .notification-primary h2 {
border-right: 0.3rem solid #3498db; border-right: 0.3rem solid #3498db;
border-radius: 2px;
padding: 5px; padding: 5px;
margin-right: 5px; margin-right: 5px;
min-width: 70px; min-width: 70px;
@ -106,11 +108,13 @@ h12 {
.notification-danger { .notification-danger {
width: 100%; width: 100%;
display: flex; } display: flex;
padding: 5px;
border: 2px solid #e74c3c;
border-radius: 2px; }
.notification-danger h2 { .notification-danger h2 {
border-right: 0.3rem solid #e74c3c; border-right: 0.3rem solid #e74c3c;
border-radius: 2px;
padding: 5px; padding: 5px;
margin-right: 5px; margin-right: 5px;
min-width: 70px; min-width: 70px;
@ -119,11 +123,13 @@ h12 {
.notification-warning { .notification-warning {
width: 100%; width: 100%;
display: flex; } display: flex;
padding: 5px;
border: 2px solid #f1c40f;
border-radius: 2px; }
.notification-warning h2 { .notification-warning h2 {
border-right: 0.3rem solid #f1c40f; border-right: 0.3rem solid #f1c40f;
border-radius: 2px;
padding: 5px; padding: 5px;
margin-right: 5px; margin-right: 5px;
min-width: 70px; min-width: 70px;
@ -132,11 +138,13 @@ h12 {
.notification-success { .notification-success {
width: 100%; width: 100%;
display: flex; } display: flex;
padding: 5px;
border: 2px solid #2ecc71;
border-radius: 2px; }
.notification-success h2 { .notification-success h2 {
border-right: 0.3rem solid #2ecc71; border-right: 0.3rem solid #2ecc71;
border-radius: 2px;
padding: 5px; padding: 5px;
margin-right: 5px; margin-right: 5px;
min-width: 70px; min-width: 70px;

8
dist/ef19487056b129c8f3eda17f9543ab70.js vendored
View File

@ -68,7 +68,7 @@ require = (function (modules, cache, entry) {
// Override the current require with this new one // Override the current require with this new one
return newRequire; return newRequire;
})({6:[function(require,module,exports) { })({4:[function(require,module,exports) {
var bundleURL = null; var bundleURL = null;
function getBundleURLCached() { function getBundleURLCached() {
if (!bundleURL) { if (!bundleURL) {
@ -99,7 +99,7 @@ function getBaseURL(url) {
exports.getBundleURL = getBundleURLCached; exports.getBundleURL = getBundleURLCached;
exports.getBaseURL = getBaseURL; exports.getBaseURL = getBaseURL;
},{}],5:[function(require,module,exports) { },{}],3:[function(require,module,exports) {
var bundle = require('./bundle-url'); var bundle = require('./bundle-url');
function updateLink(link) { function updateLink(link) {
@ -131,7 +131,7 @@ function reloadCSS() {
module.exports = reloadCSS; module.exports = reloadCSS;
},{"./bundle-url":6}],0:[function(require,module,exports) { },{"./bundle-url":4}],0:[function(require,module,exports) {
var global = (1, eval)('this'); var global = (1, eval)('this');
var OldModule = module.bundle.Module; var OldModule = module.bundle.Module;
function Module() { function Module() {
@ -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:50893/'); var ws = new WebSocket('ws://localhost:55832/');
ws.onmessage = function(event) { ws.onmessage = function(event) {
var data = JSON.parse(event.data); var data = JSON.parse(event.data);

19
dist/index.html vendored
View File

@ -26,31 +26,32 @@
<main> <main>
<div class="container"> <div class="container">
<h1 style="text-align: center;">Alert Elements</h1> <h1 style="text-align: center;">Alert Elements</h1>
<div class="alert-primary"> test </div> <div class="alert-primary"> test </div><br>
<div class="alert-danger"> test </div> <div class="alert-danger"> test </div><br>
<div class="alert-warning"> test </div> <div class="alert-warning"> test </div><br>
<div class="alert-success"> test </div> <div class="alert-success"> test </div>
<br> <br>
<h1 style="text-align: center;">Alert Elements</h1> <h1 style="text-align: center;">Notification Elements</h1>
<div class="notification-primary"> <div class="notification-primary">
<h2 class="notification-primary-head">ein kleiner test satz</h2> <h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span> <span class="notification-body">Funktion test des objektes</span>
</div> </div>
<br> <br>
<div class="notification-danger"> <div class="notification-danger">
<h2 class="notification-danger-head">ein kleiner test satz</h2> <h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span> <span class="notification-body">Funktion test des objektes</span>
</div> </div>
<br> <br>
<div class="notification-warning"> <div class="notification-warning">
<h2 class="notification-warning-head">ein kleiner test satz</h2> <h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span> <span class="notification-body">Funktion test des objektes</span>
</div> </div>
<br> <br>
<div class="notification-success"> <div class="notification-success">
<h2 class="notification-success-head">ein kleiner test satz</h2> <h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span> <span class="notification-body">Funktion test des objektes</span>
</div> </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>
@ -69,5 +70,7 @@
</div> </div>
</div> </div>
</main> </main>
<br><br><br>
<br><br><br>
</body> </body>
</html> </html>

19
src/index.html
View File

@ -26,31 +26,32 @@
<main> <main>
<div class="container"> <div class="container">
<h1 style="text-align: center;">Alert Elements</h1> <h1 style="text-align: center;">Alert Elements</h1>
<div class="alert-primary"> test </div> <div class="alert-primary"> test </div><br>
<div class="alert-danger"> test </div> <div class="alert-danger"> test </div><br>
<div class="alert-warning"> test </div> <div class="alert-warning"> test </div><br>
<div class="alert-success"> test </div> <div class="alert-success"> test </div>
<br> <br>
<h1 style="text-align: center;">Alert Elements</h1> <h1 style="text-align: center;">Notification Elements</h1>
<div class="notification-primary"> <div class="notification-primary">
<h2 class="notification-primary-head">ein kleiner test satz</h2> <h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span> <span class="notification-body">Funktion test des objektes</span>
</div> </div>
<br> <br>
<div class="notification-danger"> <div class="notification-danger">
<h2 class="notification-danger-head">ein kleiner test satz</h2> <h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span> <span class="notification-body">Funktion test des objektes</span>
</div> </div>
<br> <br>
<div class="notification-warning"> <div class="notification-warning">
<h2 class="notification-warning-head">ein kleiner test satz</h2> <h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span> <span class="notification-body">Funktion test des objektes</span>
</div> </div>
<br> <br>
<div class="notification-success"> <div class="notification-success">
<h2 class="notification-success-head">ein kleiner test satz</h2> <h2>ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span> <span class="notification-body">Funktion test des objektes</span>
</div> </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>
@ -69,5 +70,7 @@
</div> </div>
</div> </div>
</main> </main>
<br><br><br>
<br><br><br>
</body> </body>
</html> </html>

27
src/scss/main.sass
View File

@ -18,32 +18,26 @@ body
margin: 0 margin: 0
padding: 0 padding: 0
background: $primBG background: $primBG
font-family: sans-serif font-family: sans-serifs
// Nav Overlapping fix
main main
z-index: 980 z-index: 980
position: relative position: relative
top: 5.5em top: 5.5em
width: 100% width: 100%
word-break: break-all word-break: break-all
// header classes margin fix
@for $i from 1 through 12 @for $i from 1 through 12
h#{$i} h#{$i}
margin: 0 margin: 0
// Dev Classes
.dev .dev
border: 1px solid black border: 1px solid black
.display .display
background-color: lightcoral background-color: lightcoral
border: 1px solid red border: 1px solid red
text-align: center text-align: center
// Container
.container .container
width: calc( 100% - 10em ) width: calc( 100% - 10em )
max-width: 90em max-width: 90em
margin: 0 auto margin: 0 auto
// Alert
.alert-primary .alert-primary
border-radius: 2px border-radius: 2px
background-color: $primary background-color: $primary
@ -71,9 +65,11 @@ main
.notification-primary .notification-primary
width: 100%; width: 100%;
display: flex display: flex
padding: 5px
border: 2px solid $primary
border-radius: 2px
.notification-primary h2 .notification-primary h2
border-right: 0.3rem solid $primary border-right: 0.3rem solid $primary
border-radius: 2px
padding: 5px padding: 5px
margin-right: 5px; margin-right: 5px;
min-width: 70px min-width: 70px
@ -82,9 +78,11 @@ main
.notification-danger .notification-danger
width: 100%; width: 100%;
display: flex display: flex
padding: 5px
border: 2px solid $danger
border-radius: 2px
.notification-danger h2 .notification-danger h2
border-right: 0.3rem solid $danger border-right: 0.3rem solid $danger
border-radius: 2px
padding: 5px padding: 5px
margin-right: 5px; margin-right: 5px;
min-width: 70px min-width: 70px
@ -93,9 +91,11 @@ main
.notification-warning .notification-warning
width: 100%; width: 100%;
display: flex display: flex
padding: 5px
border: 2px solid $warning
border-radius: 2px
.notification-warning h2 .notification-warning h2
border-right: 0.3rem solid $warning border-right: 0.3rem solid $warning
border-radius: 2px
padding: 5px padding: 5px
margin-right: 5px; margin-right: 5px;
min-width: 70px min-width: 70px
@ -104,9 +104,11 @@ main
.notification-success .notification-success
width: 100%; width: 100%;
display: flex display: flex
padding: 5px
border: 2px solid $success
border-radius: 2px
.notification-success h2 .notification-success h2
border-right: 0.3rem solid $success border-right: 0.3rem solid $success
border-radius: 2px
padding: 5px padding: 5px
margin-right: 5px; margin-right: 5px;
min-width: 70px min-width: 70px
@ -116,7 +118,6 @@ main
line-height: 30pt line-height: 30pt
font-size: 15pt font-size: 15pt
word-wrap: break-word word-wrap: break-word
// Grid
div[class^="col-"] div[class^="col-"]
padding: 1rem 0 padding: 1rem 0
.row .row
@ -127,7 +128,6 @@ div[class^="col-"]
flex: 0 0 100% / $columns * $i flex: 0 0 100% / $columns * $i
.col-offset-#{$i} .col-offset-#{$i}
margin-left: 100% / $columns * $i margin-left: 100% / $columns * $i
// Navigation
header header
background: $navBG background: $navBG
text-align: center text-align: center
@ -214,7 +214,6 @@ nav a:hover
margin-left: $navgap margin-left: $navgap
margin-bottom: 0 margin-bottom: 0
list-style: none list-style: none
// Left sided Navbar for more custumisation
.nav-logo-left .nav-logo-left
grid-column: 2 / span 1 grid-column: 2 / span 1
.nav-left .nav-left