Content added Content deleted
mNo edit summary |
(force no bottom margin) |
||
(18 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
.container { |
.container { |
||
margin-bottom: |
margin-bottom: 1.5em; |
||
} |
} |
||
.container-header { |
.container-header { |
||
position: relative; |
|||
⚫ | |||
overflow: visible; |
|||
border: none; |
border: none; |
||
padding-left: 25px; |
padding-left: 25px; |
||
padding-right: 25px; |
padding-right: 25px; |
||
display: block; |
display: block; |
||
⚫ | |||
⚫ | |||
content: ""; |
|||
display: block; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
top: 0; |
|||
⚫ | |||
width: 100%; |
|||
height: 100%; |
|||
background: #0fd; |
|||
/*background: #2FD9E3; alt color */ |
|||
transform: skew(-20deg); |
|||
⚫ | |||
⚫ | |||
position: relative; |
|||
z-index: 1; |
|||
line-height: 45px; |
line-height: 45px; |
||
text-align: center; |
text-align: center; |
||
font-family: sans-serif; |
font-family: sans-serif; |
||
⚫ | |||
⚫ | |||
background-color: var(--theme-primary-0); |
|||
} |
} |
||
.container-body { |
.container-body { |
||
padding: 20px 30px; |
|||
⚫ | |||
/* |
|||
* Vector skin |
|||
*/ |
|||
/* |
|||
* Citizen skin |
|||
*/ |
|||
⚫ | |||
border-radius: var(--border-radius--medium) var(--border-radius--medium) 0 0; |
|||
color: hsl(210, 3%, 12.9%); |
|||
⚫ | |||
body.skin-citizen .container-body { |
|||
border: 1px solid var(--color-surface-3); |
|||
border-top: none; |
|||
border-radius: 0 0 var(--border-radius--medium) var(--border-radius--medium); |
|||
background-color: var(--color-surface-2); |
|||
} |
|||
/* |
|||
* Cosmos |
|||
*/ |
|||
⚫ | |||
margin-bottom: 0; |
|||
padding-top: 4px; |
|||
border-bottom: none !important; |
|||
border-radius: 4px 4px 0 0; |
|||
} |
|||
body.skin-cosmos .container-body { |
|||
border: 1px solid var(--theme-primary-0); |
|||
border-top: none; |
|||
border-radius: 0 0 4px 4px; |
|||
} |
} |
Latest revision as of 14:41, 23 January 2023
.container {
margin-bottom: 1.5em;
}
.container-header {
border: none;
padding-left: 25px;
padding-right: 25px;
display: block;
line-height: 45px;
text-align: center;
font-family: sans-serif;
margin-top: 0;
margin-bottom: 0;
background-color: var(--theme-primary-0);
}
.container-body {
padding: 20px 30px;
}
/*
* Vector skin
*/
/*
* Citizen skin
*/
body.skin-citizen .container-header {
border-radius: var(--border-radius--medium) var(--border-radius--medium) 0 0;
color: hsl(210, 3%, 12.9%);
}
body.skin-citizen .container-body {
border: 1px solid var(--color-surface-3);
border-top: none;
border-radius: 0 0 var(--border-radius--medium) var(--border-radius--medium);
background-color: var(--color-surface-2);
}
/*
* Cosmos
*/
body.skin-cosmos .container-header {
margin-bottom: 0;
padding-top: 4px;
border-bottom: none !important;
border-radius: 4px 4px 0 0;
}
body.skin-cosmos .container-body {
border: 1px solid var(--theme-primary-0);
border-top: none;
border-radius: 0 0 4px 4px;
}