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

fix wordwrapping bug and added notification elements

Browse Source
This commit is contained in:
steevLP
2021-01-27 02:32:43 +01:00
parent f5615b66e5
commit 093b6c8e8c
6 changed files with 177 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/index.html
View File

@ -31,6 +31,26 @@
<div class="alert-warning"> test </div>
<div class="alert-success"> test </div>
<br>
<h1 style="text-align: center;">Alert Elements</h1>
<div class="notification-primary">
<h2 class="notification-primary-head">ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span>
</div>
<br>
<div class="notification-danger">
<h2 class="notification-danger-head">ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span>
</div>
<br>
<div class="notification-warning">
<h2 class="notification-warning-head">ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span>
</div>
<br>
<div class="notification-success">
<h2 class="notification-success-head">ein kleiner test satz</h2>
<span class="notification-body">Funktion test des objektes</span>
</div>
<h1 style="text-align: center;">CSS Grid</h1>
<div class="row">
<div class="col-12 display"><h1>12</h1></div>

54
src/scss/main.sass
View File

@ -24,10 +24,13 @@ main
z-index: 980
position: relative
top: 5.5em
width: 100%
word-break: break-all
// header classes margin fix
@for $i from 1 through 12
h#{$i}
margin: 10px
margin: 0
// Dev Classes
.dev
border: 1px solid black
@ -65,10 +68,57 @@ main
border: 1px solid $success_dark
padding: 1rem
color: white
.notification-primary
width: 100%;
display: flex
.notification-primary h2
border-right: 0.3rem solid $primary
border-radius: 2px
padding: 5px
margin-right: 5px;
min-width: 70px
height: auto
display: flex
.notification-danger
width: 100%;
display: flex
.notification-danger h2
border-right: 0.3rem solid $danger
border-radius: 2px
padding: 5px
margin-right: 5px;
min-width: 70px
height: auto
display: flex
.notification-warning
width: 100%;
display: flex
.notification-warning h2
border-right: 0.3rem solid $warning
border-radius: 2px
padding: 5px
margin-right: 5px;
min-width: 70px
height: auto
display: flex
.notification-success
width: 100%;
display: flex
.notification-success h2
border-right: 0.3rem solid $success
border-radius: 2px
padding: 5px
margin-right: 5px;
min-width: 70px
height: auto
display: flex
.notification-body
line-height: 30pt
font-size: 15pt
word-wrap: break-word
// Grid
div[class^="col-"]
padding: 1rem 0
text-align: center
.row
display: flex
flex-wrap: wrap