houdini/app/assets/stylesheets/components/decorative.css.scss
2020-06-15 10:26:57 -05:00

111 lines
1.7 KiB
SCSS

/* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later
Full license explanation at https://github.com/houdiniproject/houdini/blob/master/LICENSE */
@import 'mixins';
hr {
border: 0;
position: relative;
width: 100%;
padding: 3px 0;
display: inline-block;
}
hr:before {
height: 1px;
content: '';
position: absolute;
background: rgba($grey, 0.2);
width: 100%;
left: 0;
margin: 0 auto;
}
hr {
&.turquoise:before {
background: rgba($dark-turquoise, 0.3);
}
&.orange:before {
background: $oj;
}
}
hr.skinny {
left: 50%;
margin-left: -35%;
width: 70%;
}
hr:before {
height: 1px;
content: '';
position: absolute;
background: rgba($grey, 0.2);
width: 100%;
left: 0;
}
hr.doubleLines {
padding: 0;
border: 0;
position: relative;
width: 100%;
}
hr.doubleLines.white:before,
hr.doubleLines.white:after {
background: rgba(white, 0.8);
}
hr.doubleLines:before,
hr.doubleLines:after {
content: '';
position: absolute;
background: $shark;
width: 100%;
left: 0;
}
hr.doubleLines:before {
height: 2px;
}
hr.doubleLines:after {
height: 1px;
margin-top: 5px;
}
hr.flat {
display: block;
margin: 0;
padding: 6px 0;
}
@mixin hr-with-symbols($content){
margin: 0;
padding: 0;
&:before {
position: relative;
height: initial;
display: block;
content: $content;
background: none;
text-align: center;
font-size: 20px;
letter-spacing: 8px;
@include opacity(0.5);
}
}
hr.diamonds {
@include hr-with-symbols('\25C6 \25C6 \25C6');
}
hr.dots {
@include hr-with-symbols('\2022 \2022 \2022');
}
hr.diamonds,
hr.dots {
&.turquoise {
color: $dark-turquoise;
}
&.orange {
color: $oj;
}
&.grey {
color: grey;
}
&.green {
color: $grass;
}
}