This repository has been archived on 2022-11-23. You can view files and clone it, but cannot push or open issues or pull requests.
quarante-douze-static/scss/_cards.scss

236 lines
5.6 KiB
SCSS
Raw Normal View History

/*
* 4 - Cards( _cards.scss )
*
* This part of the (s)css handle the style of cards-like elements,
* elements that are supposed to handle contents inside a box.
*
* Elements like alerts, breadcrumb are considered as "card-like".
*
*/
@mixin card-color($background-color, $text-color) {
& > .card-header { background-color: $background-color; color:$text-color; }
}
.card {
@include border-radius();
box-shadow: $large-shadow;
border: none;
margin-bottom:1.2em;
}
.card {
&-blue { @include card-color($color-blue, #FFF); }
&-violet { @include card-color($color-violet, #FFF); }
&-purple { @include card-color($color-purple, #FFF); }
&-red { @include card-color($color-red, #FFF); }
&-orange { @include card-color($color-orange, #FFF); }
&-green { @include card-color($color-green, #FFF); }
&-skyblue { @include card-color($color-skyblue, #FFF); }
&-dark { @include card-color($color-dark, #FFF); }
&-light { @include card-color($color-light, #111); }
&-turquoise { @include card-color($color-turquoise, #FFF); }
&-yellow { @include card-color($color-yellow, #FFF); }
&-brown { @include card-color($color-brown, #FFF); }
&-grey { @include card-color($color-grey, #FFF); }
&-primary { @include card-color($color-primary, #FFF); }
&-secondary { @include card-color($color-secondary, #FFF); }
&-warning { @include card-color($color-warning, #FFF); }
&-danger { @include card-color($color-danger, #FFF); }
&-info { @include card-color($color-info, #FFF); }
&-success { @include card-color($color-success, #FFF); }
}
.card-shadow {
box-shadow: $large-shadow, $inset-shadow;
}
/* 4.1 - Header and titles */
.card-header {
@include borders();
font-size:1.1em;
box-shadow: $inset-relief;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
font-weight:600;
border-radius: 0;
&:first-child {
@include border-radius();
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
@include border-radius();
border-top-left-radius: 0;
border-top-right-radius: 0;
}
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-family: 'OpenSans';
font-size:1em;
text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
padding:0px;
margin:0px;
color:#FFF;
font-weight:600;
line-height:1.5em;
}
}
/* 4.2 - Cards meta */
.card-meta {
@include border-radius();
padding:1em;
box-shadow: $large-shadow, $inset-shadow;
border: 0;
background-color:#eeeeec;
margin-bottom:1.2em;
@include li-no-margin();
&.media {
-ms-flex-align: center !important;
align-items: center !important;
}
.media-left .media-object {
height: 64px;
width: 64px;
border-radius: 100%;
margin-right:1em;
}
img.avatar {
border-radius: 100%;
margin-right:1em;
}
author {
display:block;
font-weight:600;
}
time {
display:block;
font-style:italic;
}
@include li-no-margin();
}
/* 4.3 - Cards list-groups */
section.widget {
ul {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
li {
list-style: none;
padding: 0;
margin: 0;
&.recentcomments {
position: relative;
display: block;
padding: .75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 0px solid rgba(0,0,0,.125);
list-style: none;
}
a {
position: relative;
display: block;
padding: .75rem 1.25rem;
margin-bottom: -1px;
background-color: #fff;
border: 0px solid rgba(0,0,0,.125);
list-style: none;
&:hover {
background-color: #eee;
text-decoration: none;
}
}
}
}
}
.list-group-item {
border: none;
background-color:transparent;
}
a.list-group-item:hover {
border-style:none;
border-width:0px;
border-radius:0px;
background-color:rgba(0,0,0,0.1);
}
/* 4.4 - Cards list-groups */
@mixin alert-color($background-color) {
background-color: lighten($background-color, 35%);
color: darken($background-color, 80%);
}
.alert {
@include borders();
@include border-radius();
color:rgba(0, 0, 0, 0.7);
box-shadow: $large-shadow;
&-flex {
display: flex;
flex-direction: row;
justify-content: space-between;
& > p {
padding-bottom: 0;
}
}
}
.alert {
&-blue { @include alert-color($color-blue); }
&-violet { @include alert-color($color-violet); }
&-purple { @include alert-color($color-purple); }
&-red { @include alert-color($color-red); }
&-orange { @include alert-color($color-orange); }
&-green { @include alert-color($color-green); }
&-skyblue { @include alert-color($color-skyblue); }
&-dark { @include alert-color($color-dark); }
&-light { @include alert-color($color-light); }
&-turquoise { @include alert-color($color-turquoise); }
&-yellow { @include alert-color($color-yellow); }
&-brown { @include alert-color($color-brown); }
&-grey { @include alert-color($color-grey); }
&-primary { @include alert-color($color-primary); }
&-secondary { @include alert-color($color-secondary); }
&-warning { @include alert-color($color-warning); }
&-danger { @include alert-color($color-danger); }
&-info { @include alert-color($color-info); }
&-success { @include alert-color($color-success); }
}
.alert a, .alert-link {
color:rgba(0, 0, 0, 0.7);
font-weight:bold;
}
/* 4.5 - Breadcrumbs */
.breadcrumb {
@include border-radius();
box-shadow: $large-shadow, $inset-shadow;
border: 0;
background-color:#eeeeec;
margin-bottom:1.2em;
@include li-no-margin();
}