Permalink
Fetching contributors…
Cannot retrieve contributors at this time
144 lines (119 sloc) 3.84 KB
// scss-lint:disable NestingDepth
/// Global namespace for card component
/// @access public
/// @group button
/// @type string
$DBcard-namespace: "c-card" !default;
/// Global namespace for button component
/// @access public
/// @group card
/// @type color
$DBcard-background: color(white) !default;
// The opaque color for the card border/shadow. Transparency is handled by the class itself.
$DBcard-border: color(gray, x-dark) !default;
$DBcard-border-selected: color(blue) !default;
// Card component with optional arrow/tail
// Simple styling for a card-like component used in a variety of ways with optional arrows for tooltip-like cards
.#{$DBcard-namespace} {
display: inline-block;
vertical-align: top;
position: relative;
padding: 12px;
box-sizing: border-box;
border: 1px solid rgba($DBcard-border, 0.1);
border-radius: 3px;
box-shadow: 0 1px 2px rgba($DBcard-border, 0.1);
background-color: $DBcard-background;
background-clip: padding-box;
transition: 0.1s;
&#{&}--arrow {
&::before, &::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-bottom-color: color(white);
transition: 0.1s;
}
&::before {
margin-left: -9px;
border-width: 9px;
border-bottom-color: rgba($DBcard-border, 0.2);
}
// West/East directions are only affecting horizontal offsets, so we can
// style North and South at the same time
&-nw, &-sw {
&::after, &::before {
left: 0;
margin-left: 12px;
}
&::before {
margin-left: 11px;
}
}
&-ne, &-se {
&::after, &::before {
right: 0;
left: auto;
margin-right: 12px;
}
&::before {
margin-right: 11px;
}
}
// South direction changes a lot of styles, and it's probably safe to
// assume North is the desired default.
&-sw, &-se, &-s {
&::after, &::before {
top: 100%;
bottom: auto;
border-top-color: color(white);
border-bottom-color: transparent;
}
&::before {
border-top-color: rgba($DBcard-border, 0.2);
// Since we're spoofing a triangle with borders, we can't use
// box-shadow, but we can use the drop-shadow filter. Limited support,
// but it's just a nice-to-have.
filter: drop-shadow(0 1px 2px rgba($DBcard-border, 0.2));
}
}
}
}
// Floating cards have a hover state and selected states
.#{$DBcard-namespace}--floating {
&:hover {
border-color: rgba($DBcard-border, 0.2);
box-shadow: 0 1px 2px rgba($DBcard-border, 0.2);
}
&.#{$DBcard-namespace}--arrow {
&:hover::before {
border-bottom-color: rgba($DBcard-border, 0.3);
}
&-se, &-sw, &-s {
&:hover::before {
border-top-color: rgba($DBcard-border, 0.3);
border-bottom-color: transparent;
filter: drop-shadow(0 1px 2px rgba($DBcard-border, 0.3));
}
}
}
&.is-selected {
border-color: $DBcard-border-selected;
}
&--arrow.is-selected {
&::before, &:hover::before {
border-bottom-color: $DBcard-border-selected;
}
}
&--arrow-se, &--arrow-sw, &--arrow-s {
&.is-selected {
&::before, &:hover::before {
border-top-color: $DBcard-border-selected;
border-bottom-color: transparent;
}
}
}
}