Skip to content

Commit

Permalink
FFE-31 Preserve info and tip message
Browse files Browse the repository at this point in the history
  • Loading branch information
Torgeir Pedersen Cook committed Nov 7, 2016
1 parent 2dce795 commit 58e249b
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 78 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# CHANGELOG

## Version 0.0.1
First version. Ffe-system-message used as baseline.
First version. ffe-system-message used as baseline.
73 changes: 12 additions & 61 deletions examples/ffe-context-message.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,47 +10,22 @@
<body class="ffe-body-text">
<h3 class="ffe-h4">Eksempler</h3>

<div class="example-container">
<h4 class="example-container__header">error</h4>
<div class="ffe-system-message-wrapper ffe-system-message-wrapper--error">
<div class="ffe-system-message ffe-content-container ffe-content-container--lg">
<div class="ffe-system-message__icon">
<svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="1050"
y="900" style="transform: rotateX(180deg);">
<path d="M101.8 89.83h-3.575c-3.799 0-6.257 2.346-6.257 6.257v46.26c0 3.799 2.346 6.257 6.257 6.257h3.575c3.799 0 6.034-2.346 6.034-6.257v-46.26c0-3.911-2.235-6.257-6.034-6.257zM102.3 56.87h-4.693c-3.799 0-6.034 2.346-6.034 6.257v6.704c0 3.799 2.235 6.034 6.034 6.034h4.693c3.799 0 6.034-2.235 6.034-6.034v-6.704c0-3.911-2.235-6.257-6.034-6.257z"></path>
<path d="M100 200C44.92 200 0 155.1 0 100 0 44.92 44.92 0 100 0c55.1 0 100 44.92 100 100s-44.92 100-100 100zm0-186.3c-47.6 0-86.26 38.66-86.26 86.26S52.4 186.22 100 186.22s86.26-38.66 86.26-86.26S147.6 13.7 100 13.7z"></path>
</svg>
</div>
<p class="ffe-system-message__content">
Vi opplever for tiden problemer med nettbank og kortbetaling. Vi gir en lyd så snart dette er løst. Lom sociis natoque penatibus et magnis dis parturient monte.
</p>
<div class="ffe-system-message__close" role="button" aria-label="Lukk" tabindex="0">
<svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="1200"
y="600">
<path d="M18.77 0c-3.562 0-7.125 1.347-9.834 4.044L4.507 8.483c-5.381 5.394-5.381 14.25 0 19.68l71.19 71.83-71.66 71.83c-5.381 5.394-5.381 14.25 0 19.68l4.429 4.439c5.381 5.394 14.22 5.394 19.64 0l71.66-71.83 71.65 71.83c5.381 5.394 14.23 5.394 19.65 0l4.429-4.439c5.381-5.394 5.381-14.25 0-19.68l-71.19-71.83 71.66-71.83c5.381-4.914 5.381-13.78 0-19.21l-4.429-4.423c-5.381-5.394-14.22-5.394-19.64 0l-72.13 71.34-71.17-71.83c-2.691-2.697-6.257-4.044-9.819-4.044z"></path>
</svg>
</div>
</div>
</div>
</div>


<div class="example-container">
<h4 class="example-container__header">info</h4>
<div class="ffe-system-message-wrapper ffe-system-message-wrapper--info">
<div class="ffe-system-message ffe-content-container ffe-content-container--lg">
<div class="ffe-system-message__icon">
<div class="ffe-context-message-wrapper ffe-context-message-wrapper--info">
<div class="ffe-context-message ffe-content-container ffe-content-container--lg">
<div class="ffe-context-message__icon">
<svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="1050"
y="900">
<path d="M101.8 89.83h-3.575c-3.799 0-6.257 2.346-6.257 6.257v46.26c0 3.799 2.346 6.257 6.257 6.257h3.575c3.799 0 6.034-2.346 6.034-6.257v-46.26c0-3.911-2.235-6.257-6.034-6.257zM102.3 56.87h-4.693c-3.799 0-6.034 2.346-6.034 6.257v6.704c0 3.799 2.235 6.034 6.034 6.034h4.693c3.799 0 6.034-2.235 6.034-6.034v-6.704c0-3.911-2.235-6.257-6.034-6.257z"></path>
<path d="M100 200C44.92 200 0 155.1 0 100 0 44.92 44.92 0 100 0c55.1 0 100 44.92 100 100s-44.92 100-100 100zm0-186.3c-47.6 0-86.26 38.66-86.26 86.26S52.4 186.22 100 186.22s86.26-38.66 86.26-86.26S147.6 13.7 100 13.7z"></path>
</svg>
</div>
<p class="ffe-system-message__content">
<p class="ffe-context-message__content">
Her kan det stå en nyhet eller informasjon som ikke er kritisk. Maecenas sed diam eget risus varius blandit sit ame.

</p>
<div class="ffe-system-message__close" role="button" aria-label="Lukk" tabindex="0">
<div class="ffe-context-message__close" role="button" aria-label="Lukk" tabindex="0">
<svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="1200"
y="600">
<path d="M18.77 0c-3.562 0-7.125 1.347-9.834 4.044L4.507 8.483c-5.381 5.394-5.381 14.25 0 19.68l71.19 71.83-71.66 71.83c-5.381 5.394-5.381 14.25 0 19.68l4.429 4.439c5.381 5.394 14.22 5.394 19.64 0l71.66-71.83 71.65 71.83c5.381 5.394 14.23 5.394 19.65 0l4.429-4.439c5.381-5.394 5.381-14.25 0-19.68l-71.19-71.83 71.66-71.83c5.381-4.914 5.381-13.78 0-19.21l-4.429-4.423c-5.381-5.394-14.22-5.394-19.64 0l-72.13 71.34-71.17-71.83c-2.691-2.697-6.257-4.044-9.819-4.044z"></path>
Expand All @@ -62,43 +37,19 @@ <h4 class="example-container__header">info</h4>

<div class="example-container">
<h4 class="example-container__header">news</h4>
<div class="ffe-system-message-wrapper ffe-system-message-wrapper--news">
<div class="ffe-system-message ffe-content-container ffe-content-container--lg">
<div class="ffe-system-message__icon">
<div class="ffe-context-message-wrapper ffe-context-message-wrapper--tip">
<div class="ffe-context-message ffe-content-container ffe-content-container--lg">
<div class="ffe-context-message__icon">
<svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="1050"
y="900">
<path d="M101.8 89.83h-3.575c-3.799 0-6.257 2.346-6.257 6.257v46.26c0 3.799 2.346 6.257 6.257 6.257h3.575c3.799 0 6.034-2.346 6.034-6.257v-46.26c0-3.911-2.235-6.257-6.034-6.257zM102.3 56.87h-4.693c-3.799 0-6.034 2.346-6.034 6.257v6.704c0 3.799 2.235 6.034 6.034 6.034h4.693c3.799 0 6.034-2.235 6.034-6.034v-6.704c0-3.911-2.235-6.257-6.034-6.257z"></path>
<path d="M100 200C44.92 200 0 155.1 0 100 0 44.92 44.92 0 100 0c55.1 0 100 44.92 100 100s-44.92 100-100 100zm0-186.3c-47.6 0-86.26 38.66-86.26 86.26S52.4 186.22 100 186.22s86.26-38.66 86.26-86.26S147.6 13.7 100 13.7z"></path>
</svg>
</div>
<p class="ffe-system-message__content">
<p class="ffe-context-message__content">
Velkommen til betaversjonen av nye Sparebank1.no. En egen farge for nyheter som dette.
</p>
<div class="ffe-system-message__close" role="button" aria-label="Lukk" tabindex="0">
<svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="1200"
y="600">
<path d="M18.77 0c-3.562 0-7.125 1.347-9.834 4.044L4.507 8.483c-5.381 5.394-5.381 14.25 0 19.68l71.19 71.83-71.66 71.83c-5.381 5.394-5.381 14.25 0 19.68l4.429 4.439c5.381 5.394 14.22 5.394 19.64 0l71.66-71.83 71.65 71.83c5.381 5.394 14.23 5.394 19.65 0l4.429-4.439c5.381-5.394 5.381-14.25 0-19.68l-71.19-71.83 71.66-71.83c5.381-4.914 5.381-13.78 0-19.21l-4.429-4.423c-5.381-5.394-14.22-5.394-19.64 0l-72.13 71.34-71.17-71.83c-2.691-2.697-6.257-4.044-9.819-4.044z"></path>
</svg>
</div>
</div>
</div>
</div>

<div class="example-container">
<h4 class="example-container__header">success</h4>
<div class="ffe-system-message-wrapper ffe-system-message-wrapper--success">
<div class="ffe-system-message ffe-content-container ffe-content-container--lg">
<div class="ffe-system-message__icon">
<svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="900"
y="300">
<path d="M136.2 53.5c2.9-.1 6.1 1.5 5.2 4.6-15 26.4-30.5 52.6-45.8 78.9-2.4 5.3-7.4 12.6-13.9 7.6-9-11.5-17-23.8-25.6-35.6-5.5-4.7.6-10.4 6.2-7.8 8.4 10.6 16 21.9 24 32.8l45.8-78.5c.7-1.2 2.3-1.9 4.1-2z"></path>
<path d="M100 12c48.5 0 88 39.5 88 88s-39.5 88-88 88-88-39.5-88-88 39.5-88 88-88m0-12C44.8 0 0 44.8 0 100s44.8 100 100 100 100-44.8 100-100S155.2 0 100 0z"></path>
</svg>
</div>
<p class="ffe-system-message__content">
En gladnyhet. Nå er nettbanken oppe og går igjen!
</p>
<div class="ffe-system-message__close" role="button" aria-label="Lukk" tabindex="0">
<div class="ffe-context-message__close" role="button" aria-label="Lukk" tabindex="0">
<svg class="" focusable="false" viewBox="0 0 200 200" width="150" height="150" x="1200"
y="600">
<path d="M18.77 0c-3.562 0-7.125 1.347-9.834 4.044L4.507 8.483c-5.381 5.394-5.381 14.25 0 19.68l71.19 71.83-71.66 71.83c-5.381 5.394-5.381 14.25 0 19.68l4.429 4.439c5.381 5.394 14.22 5.394 19.64 0l71.66-71.83 71.65 71.83c5.381 5.394 14.23 5.394 19.65 0l4.429-4.439c5.381-5.394 5.381-14.25 0-19.68l-71.19-71.83 71.66-71.83c5.381-4.914 5.381-13.78 0-19.21l-4.429-4.423c-5.381-5.394-14.22-5.394-19.64 0l-72.13 71.34-71.17-71.83c-2.691-2.697-6.257-4.044-9.819-4.044z"></path>
Expand All @@ -109,8 +60,8 @@ <h4 class="example-container__header">success</h4>
</div>

<script>
document.querySelector('.ffe-system-message__close').addEventListener('click', function () {
var element = document.querySelector('.ffe-system-message-wrapper');
document.querySelector('.ffe-context-message__close').addEventListener('click', function () {
var element = document.querySelector('.ffe-context-message-wrapper');
element.style.height = element.offsetHeight + 'px';
setTimeout(function () {
element.style.height = 0;
Expand Down
22 changes: 6 additions & 16 deletions less/ffe-context-message.less
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,21 @@
.ffe-system-message-wrapper {
.ffe-context-message-wrapper {

transition: height 0.3s;
overflow: hidden;

&--error {
background-color: @ffe-orange-wcag-20;
fill: @ffe-black;
}

&--info {
background-color: @ffe-blue-royal-light-20;
fill: @ffe-black;
}

&--news {
&--tip {
color: @ffe-white;
background-color: @ffe-black;
fill: @ffe-white;
}

&--success {
background-color: @ffe-green-wcag-20;
fill: @ffe-black;
}
}

.ffe-system-message {
.ffe-context-message {

position: relative;
margin: 0 auto;
Expand Down Expand Up @@ -72,19 +62,19 @@
}

@media screen and (min-width: 460px) {
.ffe-system-message__content {
.ffe-context-message__content {
width: 84%;
}
}

@media screen and (min-width: 600px) {
.ffe-system-message__content {
.ffe-context-message__content {
font-size: 16px;
}
}

@media screen and (min-width: 720px) {
.ffe-system-message__content {
.ffe-context-message__content {
width: 90%;
}
}

0 comments on commit 58e249b

Please sign in to comment.