129 lines
2.7 KiB
SCSS
129 lines
2.7 KiB
SCSS
@import "../variables/colors";
|
|
@import "../variables/sizes";
|
|
|
|
// Represents a card where the content is illustrated with an icon at top and text center underneath:
|
|
// __________________
|
|
// | |
|
|
// | *** |
|
|
// | * X * |
|
|
// | *** |
|
|
// | |
|
|
// | Title |
|
|
// | Some text here |
|
|
// | with some more |
|
|
// |__________________|
|
|
//
|
|
|
|
.OptionCards {
|
|
display: flex;
|
|
align-content: space-between;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.OptionCard {
|
|
display: flex;
|
|
flex: 1; // Grow evenly inside container
|
|
flex-direction: column;
|
|
align-content: space-between;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding: $sMargin-element;
|
|
border: 1px solid $cStructure-mainLine;
|
|
border-radius: $sCard-borderRadius;
|
|
background-color: $cStructure-mainBkg;
|
|
text-align: center;
|
|
}
|
|
|
|
.OptionCard--blocky {
|
|
position: relative;
|
|
max-width: 230px; // set a max-width to appear nicer for dataset privacy dialog
|
|
padding: 32px 32px 27px;
|
|
}
|
|
|
|
.OptionCard--code {
|
|
position: relative;
|
|
align-items: flex-start;
|
|
max-height: 200px;
|
|
overflow: hidden;
|
|
background-color: $cStructure-grayBkg;
|
|
color: #2E3C43;
|
|
font-family: monospace;
|
|
text-align: left;
|
|
}
|
|
|
|
.OptionCard--codeRequest pre {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.OptionCard--codeResult {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.OptionCard--codeResult,
|
|
.OptionCard--codeResult pre {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.OptionCard--blocky .OptionCard-title {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.OptionCard--blocky .OptionCard-desc {
|
|
width: 100%;
|
|
margin-top: $sMargin-elementInline;
|
|
margin-bottom: -$sMargin-elementInline;
|
|
}
|
|
|
|
.OptionCard--onlyIcons {
|
|
justify-content: center;
|
|
// Arbitrary size really, but gives a "square" like look where used (only export modal for now).
|
|
// If need to use the same style but with other amount of items we need to rethink this…
|
|
min-height: 114px;
|
|
}
|
|
|
|
.OptionCard.is-disabled {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.OptionCard.is-selected {
|
|
border-color: $cCard-selectedBorder;
|
|
background-color: $cCard-selectedFill;
|
|
cursor: default;
|
|
}
|
|
|
|
.OptionCard--static {
|
|
cursor: default;
|
|
}
|
|
|
|
.OptionCard:not(.is-disabled):not(.is-selected):not(.OptionCard--static):hover {
|
|
border-color: $cCard-selectedBorder;
|
|
background-color: $cCard-hoverFill;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.OptionCard:not(:last-child) {
|
|
margin-right: $sMargin-element;
|
|
}
|
|
|
|
.OptionCard-icon {
|
|
margin-bottom: $sMargin-elementInline;
|
|
}
|
|
|
|
.OptionCard-title {
|
|
margin-bottom: $sMargin-min;
|
|
}
|
|
|
|
.OptionCard-desc {
|
|
width: 100%;
|
|
margin-bottom: $sMargin-elementInline;
|
|
}
|
|
|
|
.OptionCard-shadow {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 60px;
|
|
background-image: linear-gradient(to bottom, rgba($cStructure-grayBkg, 0.04) 0%, rgba($cStructure-grayBkg, 0.95) 100%);
|
|
}
|