wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

object-cover

Browse source
This commit is contained in:
Jon McClure 2023-07-30 10:35:58 +01:00
parent 1d08b2d460
commit f2fea5da9a
5 changed files with 109 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/PhotoPack/PhotoPack.svelte
View file

@ -106,7 +106,7 @@
aria-labelledby="{id}-figure-{ri}-{i}"
>
<img
class="m-0 w-full h-full"
class="m-0 w-full h-full object-cover"
src="{img.src}"
alt="{img.altText}"
style:max-height="{img.maxHeight ? img.maxHeight + 'px' : ''}"
@ -142,9 +142,6 @@
div.photopack-container {
div.photopack-row {
figure {
img {
object-fit: cover;
}
div.alt-warning {
background-color: red;
color: white;

22
src/docs/styles/tokens/layout/main.stories.mdx
View file

@ -12,6 +12,12 @@ import display from '$lib/scss/tokens/layout/\_display.scss?raw';
{/* @ts-ignore */}
import floats from '$lib/scss/tokens/layout/\_floats.scss?raw';
{/* @ts-ignore */}
import objectFit from '$lib/scss/tokens/layout/\_object-fit.scss?raw';
{/* @ts-ignore */}
import objectPosition from '$lib/scss/tokens/layout/\_object-position.scss?raw';
{/* @ts-ignore */}
import position from '$lib/scss/tokens/layout/\_position.scss?raw';
@ -52,3 +58,19 @@ import position from '$lib/scss/tokens/layout/\_position.scss?raw';
body={cssStringToTableArray(boxSizing)}
copyable={[true, false]}
/>
<CopyTable
title="Object fit"
mdnLink="object-fit"
header={['Class', 'Properties']}
body={cssStringToTableArray(objectFit)}
copyable={[true, false]}
/>
<CopyTable
title="Object position"
mdnLink="object-position"
header={['Class', 'Properties']}
body={cssStringToTableArray(objectPosition)}
copyable={[true, false]}
/>

2
src/scss/tokens/layout/_main.scss
View file

@ -2,4 +2,6 @@
@forward 'box-sizing';
@forward 'display';
@forward 'floats';
@forward 'object-fit';
@forward 'object-position';
@forward 'position';

30
src/scss/tokens/layout/_object-fit.scss Normal file
View file

@ -0,0 +1,30 @@
.object-contain {
object-fit: contain;
}
.object-cover {
object-fit: cover;
}
.object-fill {
object-fit: fill;
}
.object-none {
object-fit: none;
}
.object-scale-down {
object-fit: scale-down;
}
.\!object-contain {
object-fit: contain !important;
}
.\!object-cover {
object-fit: cover !important;
}
.\!object-fill {
object-fit: fill !important;
}
.\!object-none {
object-fit: none !important;
}
.\!object-scale-down {
object-fit: scale-down !important;
}

54
src/scss/tokens/layout/_object-position.scss Normal file
View file

@ -0,0 +1,54 @@
.object-bottom {
object-position: bottom;
}
.object-center {
object-position: center;
}
.object-left {
object-position: left;
}
.object-left-bottom {
object-position: left bottom;
}
.object-left-top {
object-position: left top;
}
.object-right {
object-position: right;
}
.object-right-bottom {
object-position: right bottom;
}
.object-right-top {
object-position: right top;
}
.object-top {
object-position: top;
}
.\!object-bottom {
object-position: bottom !important;
}
.\!object-center {
object-position: center !important;
}
.\!object-left {
object-position: left !important;
}
.\!object-left-bottom {
object-position: left bottom !important;
}
.\!object-left-top {
object-position: left top !important;
}
.\!object-right {
object-position: right !important;
}
.\!object-right-bottom {
object-position: right bottom !important;
}
.\!object-right-top {
object-position: right top !important;
}
.\!object-top {
object-position: top !important;
}