diff --git a/scss/_utilities.scss b/scss/_utilities.scss index a021250efa..e22ca3f108 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -134,12 +134,11 @@ $utilities: map-merge( ), "translate-middle": ( property: transform, - class: translate, + class: translate-middle, values: ( - middle: translate(-50%, -50%), // OUDS mod: instead of `null` - middle-x: translateX(-50%), // OUDS mod: instead of `x` - middle-y: translateY(-50%), // OUDS mod: instead of `y` - none: none // OUDS mod + null: translate(-50%, -50%), + x: translateX(-50%), + y: translateY(-50%), ) ), // scss-docs-end utils-position diff --git a/scss/helpers/_icon.scss b/scss/helpers/_icon.scss index 9a4503af7f..73730e8229 100644 --- a/scss/helpers/_icon.scss +++ b/scss/helpers/_icon.scss @@ -5,14 +5,7 @@ width: 1em; height: 1em; line-height: 1; - vertical-align: middle; fill: currentcolor; - transform: translateY(-7%); - - // Overrides Solaris icons default - &::before { - vertical-align: baseline !important; // stylelint-disable-line declaration-no-important - } } // scss-docs-end ouds-font-icon-common diff --git a/site/content/404.md b/site/content/404.md index b63ed73794..b3ede345f7 100644 --- a/site/content/404.md +++ b/site/content/404.md @@ -9,6 +9,6 @@ sitemap: ---
-

404

-

File not found

+

404

+

File not found

diff --git a/site/content/docs/0.0/content/typography.md b/site/content/docs/0.0/content/typography.md index 3c518ec68f..eb1e842dfa 100644 --- a/site/content/docs/0.0/content/typography.md +++ b/site/content/docs/0.0/content/typography.md @@ -108,8 +108,8 @@ We provide `.display-*` from `1` through `3`. Each class sets `font-size` but al
-
Display large
-
Display medium
+
Display large
+
Display medium
Display small
diff --git a/site/content/docs/0.0/helpers/icon.md b/site/content/docs/0.0/helpers/icon.md index 10928a7baf..1b7d521621 100644 --- a/site/content/docs/0.0/helpers/icon.md +++ b/site/content/docs/0.0/helpers/icon.md @@ -49,129 +49,135 @@ Here are the rules to follow for headings. These icons' sizes are responsive. {{< example >}} -

-
+ - H1 with tall icon -

-

-

H1 with tall icon

+ +
+ - H1 with medium icon - -

-

H1 with medium icon

+
+
+ - H1 with short icon - +

H1 with short icon

+
-

-
+ - H2 with tall icon -

-

-

H2 with tall icon

+ +
+ - H2 with medium icon - -

-

H2 with medium icon

+
+
+ - H2 with short icon - +

H2 with short icon

+
-

-
+ - H3 with tall icon -

-

-

H3 with tall icon

+ +
+ - H3 with medium icon - -

-

H3 with medium icon

+
+
+ - H3 with short icon - +

H3 with short icon

+
-

-
+ - H4 with tall icon -

-

-

H4 with tall icon

+ +
+ - H4 with medium icon - -

-

H4 with medium icon

+
+
+ - H4 with short icon - +

H4 with short icon

+
-
-
+ - H5 with tall icon -
-
-
H5 with tall icon
+ +
+ - H5 with medium icon - -
-
H5 with medium icon
+
+
+ - H5 with short icon - +
H5 with short icon
+
-
-
+ - H6 with tall icon -
-
-
H6 with tall icon
+ +
+ - H6 with medium icon - -
-
H6 with medium icon
+
+
+ - H6 with short icon - +
H6 with short icon
+
{{< /example >}} ## Display headings @@ -202,71 +208,92 @@ Here are the rules to follow for regular texts. These icons' sizes are responsiv {{< example >}} -

-

+ - Lead paragraph with tall icon -

-

-

+ Lead paragraph with tall icon +

+
+
+ - Lead paragraph with medium icon -

-

-

+ Lead paragraph with medium icon +

+
+
+ - Lead paragraph with short icon -

+

+ Lead paragraph with short icon +

+
-

-

+ - Default paragraph with tall icon -

-

-

+ Default paragraph with tall icon +

+
+
+ - Default paragraph with medium icon -

-

-

+ Default paragraph with medium icon +

+
+
+ - Default paragraph with short icon -

+

+ Default paragraph with short icon +

+
-

-

+ - Small paragraph with tall icon -

-

-

+ Small paragraph with tall icon +

+
+
+ - Small paragraph with medium icon -

-

-

+ Small paragraph with medium icon +

+
+
+ - Small paragraph with short icon -

+

+ Small paragraph with short icon +

+
{{< /example >}} ## Decorative -Here are the rules to follow for decorative icons. Be careful using these icons' sizes because they are not responsive. +Here are the rules to follow for decorative icons. Be careful using these icons' sizes because they are not responsive.
See the sizes associated to classes @@ -288,7 +315,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
-
@@ -299,7 +326,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
-
@@ -310,7 +337,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
-
@@ -321,7 +348,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
-
@@ -332,7 +359,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
-
@@ -343,7 +370,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
-
@@ -354,7 +381,7 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
-
@@ -366,70 +393,26 @@ Here are the rules to follow for decorative icons. Be careful using these icons'
```html - - - - - - - + + + + + + + ``` ## Multiple lines -Sometimes you need a different structure to handle larger titles, or paragraphs that wrap over several lines. Here are some examples to handle these use cases. We've set arbitrary spacings, but align them your design. - -### Centered on the first line - -{{< example >}} -

- - H1 with tall icon and a very long title to see how it behaves while being wrapped -

- - -
- -

H1 with tall icon and a very long title to see how it behaves while being wrapped

-
-{{< /example >}} - -{{< example >}} -

- - Default long paragraph with tall icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors. -

- - -
- -

- Default long paragraph with tall icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors. -

-
-{{< /example >}} +Sometimes you need a different structure to handle larger titles, or paragraphs that wrap over several lines. Here are some examples to handle these use cases. We've set arbitrary spacings, but align them with your design. ### Centered on text block -{{< example >}} -

- - H1 with tall icon and a very long title to see how it behaves while being wrapped -

+This is the default behavior of our DOM. - +{{< example >}}
-

H1 with tall icon and a very long title to see how it behaves while being wrapped

@@ -437,16 +420,8 @@ Sometimes you need a different structure to handle larger titles, or paragraphs {{< /example >}} {{< example >}} -

- - Default long paragraph with tall icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors. -

- -
-

@@ -457,17 +432,11 @@ Sometimes you need a different structure to handle larger titles, or paragraphs ### Above text block -{{< example >}} -

- - H1 with tall icon and a very long title to see how it behaves while being wrapped -

+You can also have the icon above the text block. - +{{< example >}}
-

H1 with tall icon and a very long title to see how it behaves while being wrapped

@@ -475,16 +444,8 @@ Sometimes you need a different structure to handle larger titles, or paragraphs {{< /example >}} {{< example >}} -

- - Default long paragraph with tall icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors. -

- -
-

@@ -495,17 +456,17 @@ Sometimes you need a different structure to handle larger titles, or paragraphs ## `` and font icon -SVG Sprite is the preferred choice for flexibility, performance and accessibility, and this is why all our examples use this method but there are other ways to display icons. It should all behave the same due to our CSS. If you are experiencing any trouble, feel free to search or fill in a new [Github discussion](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/discussions) or contact [our team]({{< docsref "/about/team" >}}). +SVG Sprite is the preferred choice for flexibility, performance and accessibility, and this is why all our examples use this method but there are other ways to display icons. They should all behave the same due to our CSS. If you are experimenting any trouble, feel free to search or fill in a new [Github discussion](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/discussions) or contact [our team]({{< docsref "/about/team" >}}). {{< example >}} -

+
- H1 with tall icon -

-

+

H1 with tall icon

+
+
- H1 with tall icon - +

H1 with tall icon

+
{{< /example >}} ## CSS diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index f8a0df069c..2ff0395a60 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -155,10 +155,6 @@ All responsive classes, helpers, and utilities have been updated accordingly to - Breaking `.opacity-0`, `.opacity-25`, `.opacity-50`, `.opacity-75` and `.opacity-100` have been removed from the default build. Please check the new [opacity values]({{< docsref "/utilities/opacity" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. - New Opacity utilities: `.opacity-transparent`, `.opacity-weaker`, `.opacity-weak`, `.opacity-medium`, `.opacity-strong` and `.opacity-opaque`. -### Position - -- New Transform utility: `.transform-none`. - ### Shadow - Breaking `.shadow`, `.shadow-sm` and `.shadow-lg` have been removed from the default build. Please check the new [shadows values]({{< docsref "/utilities/shadows" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`. diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md index 7e3311a7a4..2810b5b866 100644 --- a/site/content/docs/0.0/migration.md +++ b/site/content/docs/0.0/migration.md @@ -104,10 +104,6 @@ toc: true - Breaking Opacity utilities: `.opacity-emphasis` has been renamed to `.opacity-strong`. -#### Position - -- New Transform utility: `.transform-none`. - #### Shadow - New Shadows utilities: diff --git a/site/content/docs/0.0/utilities/position.md b/site/content/docs/0.0/utilities/position.md index d15501d7e5..f552f0cd7e 100644 --- a/site/content/docs/0.0/utilities/position.md +++ b/site/content/docs/0.0/utilities/position.md @@ -117,17 +117,6 @@ You can use these classes with existing components to create new ones. Remember
{{< /example >}}--> -## Reset - -Reset the `transform` by adding the `.translate-none`. - -{{< example >}} - - - Icon link - -{{< /example >}} - ## CSS ### Sass maps diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html index 61837ace7f..8b37b6d2e5 100644 --- a/site/layouts/partials/home/masthead.html +++ b/site/layouts/partials/home/masthead.html @@ -23,7 +23,7 @@

Build fast, responsive sites with OUDS Web

-

+

Currently v{{ .Site.Params.current_version }} · Download diff --git a/site/layouts/shortcodes/svg-docs.html b/site/layouts/shortcodes/svg-docs.html index 4d7501c1d4..a7b9fc1bcb 100644 --- a/site/layouts/shortcodes/svg-docs.html +++ b/site/layouts/shortcodes/svg-docs.html @@ -33,7 +33,7 @@ {{ $target = replace $target "(" "%28" }} {{ $target = replace $target ")" "%29" }} -

+

Download(SVG, {{div $size 1000}}ko)