archive/bramw_baserow
1
0
Fork 0
mirror of https://gitlab.com/bramw/baserow.git synced 2025-04-04 13:15:24 +00:00
Code Issues Projects Releases Wiki Activity

added alert component

Browse source
This commit is contained in:
Bram Wiepjes 2019-02-16 18:43:52 +01:00
parent c4a0a8952b
commit fa4a9ce1d4
4 changed files with 110 additions and 0 deletions
web-frontend
public
index.html
src/scss
abstracts
_mixins.scss
components
_alert.scss
default.scss

44
web-frontend/public/index.html
View file

@ -18,6 +18,50 @@
<p>
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent lobortis feugiat erat, nec volutpat nulla tincidunt vel. In hac habitasse platea dictumst. Aenean fringilla lacus nunc, non pharetra mauris pulvinar lacinia. Aenean ut sem lacinia, sagittis quam sed, pellentesque orci. Aenean non consequat mi. Nunc laoreet ligula a nunc eleifend, nec accumsan felis euismod.
</p>
<div style="margin-bottom: 20px;">
<div class="alert alert-has-icon">
<div class="alert-icon">
<i class="fas fa-exclamation"></i>
</div>
<div class="alert-title">Notification message</div>
<p class="alert-content">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent.
</p>
</div>
<div class="alert">
<div class="alert-title">Notification message</div>
<p class="alert-content">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent lobortis feugiat erat, nec volutpat nulla tincidunt vel. In hac habitasse platea dictumst. Aenean fringilla lacus nunc, non pharetra mauris pulvinar lacinia. Aenean ut sem lacinia, sagittis quam sed, pellentesque orci. Aenean non consequat mi. Nunc laoreet ligula a nunc eleifend, nec accumsan felis euismod.
</p>
</div>
<div class="alert alert-success alert-has-icon">
<div class="alert-icon">
<i class="fas fa-exclamation"></i>
</div>
<div class="alert-title">Notification message</div>
<p class="alert-content">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent.
</p>
</div>
<div class="alert alert-warning alert-has-icon">
<div class="alert-icon">
<i class="fas fa-exclamation"></i>
</div>
<div class="alert-title">Notification message</div>
<p class="alert-content">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent.
</p>
</div>
<div class="alert alert-error alert-has-icon">
<div class="alert-icon">
<i class="fas fa-exclamation"></i>
</div>
<div class="alert-title">Notification message</div>
<p class="alert-content">
Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Sed quis gravida ante. Nulla nec elit dui. Nam nec dui ligula. Pellentesque feugiat erat vel porttitor euismod. Duis nec viverra urna. Praesent.
</p>
</div>
</div>
<div style="margin-bottom: 20px;">
<a href="#" class="button">Sign in</a>
<a href="#" class="button disabled">Sign in</a>

17
web-frontend/src/scss/abstracts/_mixins.scss
View file

@ -18,3 +18,20 @@
line-height: $height;
padding: 0 $left-right-space;
}
@mixin alert-style($background, $border, $title, $text, $icon-border) {
background-color: $background;
border-color: $border;
.alert-icon {
border-color: $icon-border;
}
.alert-title {
color: $title;
}
.alert-content {
color: $text;
}
}

48
web-frontend/src/scss/components/_alert.scss Normal file
View file

@ -0,0 +1,48 @@
.alert {
border: 1px solid;
border-radius: 3px;
margin: 30px 0;
padding: 16px;
@include alert-style($color-primary-100, $color-primary-300, $color-primary-900, $color-primary-700, $color-primary-400);
&.alert-has-icon {
position: relative;
padding-left: 72px;
}
}
.alert-icon {
position: absolute;
left: 16px;
top: 16px;
background-color: #ffffff;
border: 4px solid;
width: 40px;
height: 40px;
line-height: 32px;
text-align: center;
border-radius: 100%;
}
.alert-title {
font-size: 14px;
font-weight: 700;
margin-bottom: 8px;
}
.alert-content {
margin: 0;
}
.alert-success {
@include alert-style($color-success-100, $color-success-300, $color-success-900, $color-success-700, $color-success-400);
}
.alert-warning {
@include alert-style($color-warning-100, $color-warning-300, $color-warning-900, $color-warning-700, $color-warning-400);
}
.alert-error {
@include alert-style($color-error-100, $color-error-300, $color-error-900, $color-error-700, $color-error-400);
}

1
web-frontend/src/scss/default.scss
View file

@ -7,3 +7,4 @@
@import "base/typography";
@import "components/button";
@import "components/alert";