Applied default box sizing to all cards

refs. https://github.com/TryGhost/Ghost/issues/13874

- Improved stability of cards by adding 'box-sizing: border-box;' CSS property to all of them so that it's not required by themes anymore
This commit is contained in:
Peter Zimon 2021-12-17 15:28:35 +01:00
parent 684a0bcd1b
commit 25748f420c
11 changed files with 55 additions and 1 deletions

View File

@ -1,3 +1,8 @@
.kg-audio-card,
.kg-audio-card * {
box-sizing: border-box;
}
.kg-audio-card {
display: flex;
width: 100%;

View File

@ -1,3 +1,8 @@
.kg-bookmark-card,
.kg-bookmark-card * {
box-sizing: border-box;
}
.kg-bookmark-card,
.kg-bookmark-publisher {
position: relative;

View File

@ -1,3 +1,8 @@
.kg-button-card,
.kg-button-card * {
box-sizing: border-box;
}
.kg-button-card {
display: flex;
position: static;

View File

@ -1,3 +1,8 @@
.kg-callout-card,
.kg-callout-card * {
box-sizing: border-box;
}
.kg-callout-card {
display: flex;
padding: 1.2em 1.6em;

View File

@ -1,3 +1,8 @@
.kg-file-card,
.kg-file-card * {
box-sizing: border-box;
}
.kg-file-card {
display: flex;
}
@ -41,7 +46,7 @@
}
.kg-file-card-title + .kg-file-card-caption {
margin-top: -6px;
margin-top: -3px;
}
.kg-file-card-metadata {

View File

@ -1,3 +1,8 @@
.kg-gallery-card,
.kg-gallery-card * {
box-sizing: border-box;
}
.kg-gallery-card,
.kg-image-card {
--gap: 1.2rem;

View File

@ -1,3 +1,8 @@
.kg-header-card,
.kg-header-card * {
box-sizing: border-box;
}
.kg-header-card {
padding: 12vmin 4em;
min-height: 60vh;

View File

@ -1,3 +1,8 @@
.kg-nft-card,
.kg-nft-card * {
box-sizing: border-box;
}
.kg-nft-card {
display: flex;
flex-direction: column;

View File

@ -1,3 +1,8 @@
.kg-product-card,
.kg-product-card * {
box-sizing: border-box;
}
.kg-product-card {
display: flex;
align-items: center;

View File

@ -1,3 +1,8 @@
.kg-toggle-card,
.kg-toggle-card * {
box-sizing: border-box;
}
.kg-toggle-card {
background: transparent;
box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);

View File

@ -1,3 +1,7 @@
.kg-video-card,
.kg-video-card * {
box-sizing: border-box;
}
.kg-video-card {
position: relative;