Page MenuHomePhabricator

D511.id.diff
No OneTemporary

D511.id.diff

diff --git a/scaffolding/_scaffolding.scss b/scaffolding/_scaffolding.scss
--- a/scaffolding/_scaffolding.scss
+++ b/scaffolding/_scaffolding.scss
@@ -63,6 +63,16 @@
}
}
+/**
+ * Sometimes applications need components that are 100% width to make them
+ * fit properly (as opposed to having their natural width).
+ *
+ * This class allows you to stretch a component to the full width.
+**/
+.full-width {
+ width: 100%;
+}
+
@import '_scaffolding_mobile';
diff --git a/ui/_ui.scss b/ui/_ui.scss
--- a/ui/_ui.scss
+++ b/ui/_ui.scss
@@ -22,4 +22,5 @@
@import 'badges/_badges.scss';
@import 'burger/_burger.scss';
@import 'box/_box.scss';
-@import 'caret/_caret.scss';
\ No newline at end of file
+@import 'caret/_caret.scss';
+@import 'images/_images.scss';
\ No newline at end of file
diff --git a/ui/images/_images.scss b/ui/images/_images.scss
new file mode 100644
--- /dev/null
+++ b/ui/images/_images.scss
@@ -0,0 +1,50 @@
+
+/*
+ * Determine the fit of an image in your document. Modifying the fit allows
+ * an application to determine how an image is placed inside an img tag.
+ *
+ * For example, the cover object will scale the image to fill the <img> tag
+ * but won't be stretching the image at all.
+**/
+img.fit-contain {
+ object-fit: contain;
+}
+
+img.fit-cover {
+ object-fit: cover;
+}
+
+img.fit-scale {
+ object-fit: scale-down;
+}
+
+img.fit-fill {
+ object-fit: fill;
+}
+
+img.fit-no-scale,
+img.fit-none {
+ object-fit: none;
+}
+
+/**
+ * The internal alignment of an image allows a developer to manipulate an
+ * image so the replaced image is shifted.
+ *
+ * This will only work properly with fits that are not contain or scale, since these
+ * attempt to place the entire image in the content box.
+**/
+img.align-inside-top {
+ object-position: top center;
+}
+
+img.align-inside-bottom {
+ object-position: bottom center;
+}
+
+/*
+ * Default to making images not bigger than the parent.
+**/
+.span img {
+ max-width: 100%;
+}
\ No newline at end of file

File Metadata

Mime Type
text/plain
Expires
Apr 11 2021, 4:20 AM (9 w, 2 d ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
6872
Default Alt Text
D511.id.diff (1 KB)

Event Timeline