70 lines
1.3 KiB
SCSS
70 lines
1.3 KiB
SCSS
@import "common/sass/variables";
|
|
@import "common/sass/mixins";
|
|
|
|
.BadBrowser {
|
|
@include cover-message;
|
|
|
|
&.is-open {
|
|
// Override inline display none
|
|
display: block !important;
|
|
}
|
|
|
|
&-content {
|
|
&-browsers {
|
|
text-align: center;
|
|
|
|
&-browser {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 20%;
|
|
margin: 5%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
|
|
&:after {
|
|
content: "";
|
|
display: block;
|
|
padding-bottom: 100%;
|
|
}
|
|
|
|
&-name {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding-top: 12px;
|
|
color: rgba(#fff, 0.8);
|
|
}
|
|
|
|
&.chrome {
|
|
background-image: url('~assets/images/browsers/chrome.svg');
|
|
}
|
|
|
|
&.firefox {
|
|
background-image: url('~assets/images/browsers/firefox.svg');
|
|
}
|
|
|
|
&.opera {
|
|
background-image: url('~assets/images/browsers/opera.svg');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hide mobile specific messaging by default
|
|
.is-mobile {
|
|
display: none;
|
|
}
|
|
|
|
&.is-mobile {
|
|
.is-mobile {
|
|
display: block;
|
|
}
|
|
|
|
.is-desktop {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|