landingpage/themes/app-landingpage/assets/scss/_list.scss
Dorian Zedler 1b923de71a
Some checks failed
continuous-integration/drone Build is failing
Chore: initial commit
2022-08-06 20:25:26 +02:00

129 lines
No EOL
3.1 KiB
SCSS

.list {
padding-left: 0;
&,
&-item {
list-style: none;
.list-icon {
display: inline-block;
margin-bottom: $spacer * 0.6;
}
}
&_plain &-item:not(.col) {
padding-left: 0;
}
&_bullets &-item {
padding-left: 1rem;
position: relative;
&:before {
color: $primary-light;
content: '\2022';
left: 0;
position: absolute;
font-size: 1.75rem;
line-height: $line-height-base * 1rem;
}
}
}
.icon-list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
&-item {
padding: ($spacer * 1) ($spacer * 1.5);
@media (min-width: $screen-lg){
padding: ($spacer * 1.4) ($spacer * 2.2);
}
}
&_inline &-item {
padding: ($spacer * 1) ($spacer * 0.5);
@media (min-width: $screen-lg){
padding: ($spacer * 1) ($spacer * 0.75);
}
}
}
.card-list {
@extend .row;
margin-top: $spacer * 3;
overflow: hidden;
&-item {
@extend .col;
display: flex;
flex-direction: column;
margin-bottom: $spacer * 3;
margin-top: $spacer * 2;
width: 100%;
flex: 0 0 auto;
flex-wrap: wrap;
.container {
padding-bottom: 0;
padding-top: $spacer;
padding-left: 0;
flex: 1 0 auto;
display: flex;
flex-direction: column;
&:first-child {
padding-bottom: 60px;
padding-top: 60px;
padding-left: $spacer * 2;
padding-right: $spacer * 2;
background-color: $secondary;
display: flex;
flex-direction: column;
justify-content: center;
}
.btn-link:last-child{
padding-bottom: 0;
position: relative;
top: 6px;
}
}
.image-block {
height: 240px;
display: block;
position: relative;
text-align: center;
overflow: hidden;
padding: 0;
img {
width: auto;
object-fit: cover;
min-height: 240px;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
}
.headline-caption {
font-size: $font-size-base;
margin-bottom: $spacer * 0.75;
}
&:nth-child(odd) .container:first-child{
background-color: $pink;
}
@media (min-width: $screen-sm) {
width: 50%;
.container:first-child {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media (min-width: $screen-lg){
width: 33.33%;
}
@media (min-width: $screen-xl){
.container:first-child {
padding-top: 100px;
padding-bottom: 100px;
}
}
}
}