what2watch/scss/plugins/card/_class.scss

133 lines
1.9 KiB
SCSS
Raw Normal View History

2023-09-22 00:43:18 +00:00
// Card
// This represents a self-contained, replicable entity
// Variables
$picnic-card-shadow: none !default;
$picnic-card-border: $picnic-border !default;
$picnic-card-radius: $picnic-radius !default;
// Styles
// http://8gramgorilla.com/mastering-sass-extends-and-placeholders/
%card {
position: relative;
box-shadow: $picnic-card-shadow;
border-radius: $picnic-card-radius;
border: $picnic-card-border;
overflow: hidden;
text-align: left;
background: $picnic-white;
margin-bottom: $picnic-separation;
padding: 0;
transition: all .3s ease;
&.hidden,
:checked + & {
font-size: 0;
padding: 0;
margin: 0;
border: 0;
}
// Make sure that nothing overflows
> * {
max-width: 100%;
display: block;
&:last-child {
margin-bottom: 0;
}
}
// The first part from the card
header,
section,
> p {
padding: .6em .8em;
}
section {
padding: .6em .8em 0;
}
hr {
border: none;
height: 1px;
background-color: $picnic-dull;
}
header {
font-weight: bold;
position: relative;
border-bottom: 1px solid $picnic-dull;
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
margin: 0 2em 0 0;
line-height: 1;
display: inline-block;
vertical-align: text-bottom;
}
&:last-child {
border-bottom: 0;
}
}
footer {
padding: .8em;
}
p {
margin: math.div($picnic-separation, 2) 0;
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
> p {
margin: 0;
padding-right: 2.5em;
}
.close {
position: absolute;
top: .4em;
right: .3em;
font-size: 1.2em;
padding: 0 .5em;
cursor: pointer;
width: auto;
&:hover {
color: $picnic-error;
}
}
h1 + .close {
margin: .2em;
}
h2 + .close {
margin: .1em;
}
.dangerous {
background: $picnic-error;
float: right;
}
}