52 lines
881 B
SCSS
52 lines
881 B
SCSS
/*
|
|
* Floating Content Box
|
|
* Simple Floating Box, designed to sit content inside it.
|
|
*
|
|
* Dependencies:
|
|
* styles/settings/responsive.scss
|
|
* styles/tools/_absolute-centering.scss
|
|
* styles/tools/_responsive.scss
|
|
*
|
|
* Version:
|
|
* 1.0.0 - 2018/05/11
|
|
*/
|
|
@import '~@styles/global';
|
|
|
|
$o-floating--inset: 5%;
|
|
|
|
.o-floating-content-box {
|
|
@include t-absolute-position-options($o-floating--inset);
|
|
max-width: 100% - ($o-floating--inset * 2);
|
|
|
|
&.is-medium,&.is-large {
|
|
width: 100%;
|
|
}
|
|
|
|
&__inner {
|
|
position: relative;
|
|
}
|
|
|
|
//Media Queries
|
|
@include t-media-query($s-xsmall-up) {
|
|
&.is-medium {
|
|
width: 450px;
|
|
}
|
|
}
|
|
|
|
@include t-media-query($s-small-up) {
|
|
&.is-large {
|
|
width: 700px;
|
|
}
|
|
}
|
|
|
|
@include t-media-query($s-large-up) {
|
|
&.is-medium {
|
|
width: 550px;
|
|
}
|
|
|
|
&.is-large {
|
|
width: 750px;
|
|
}
|
|
}
|
|
}
|