@clayui/css 3.45.0 → 3.46.0

package/README.md

@@ -1,89 +1,43 @@
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-### Jump to Section
+## Jump to Section
 
 - [About](#about)
-- [Building](#building)
-    - [Clone the repo](#clone-the-repo)
-    - [Install Node.js and NPM](#install-nodejs-and-npm)
-    - [Install the NPM modules](#install-the-npm-modules)
-    - [Modify files in src/](#modify-files-in-src)
-    - [Build the static files](#build-the-static-files)
-    - [View the files](#view-the-files)
-    - [File Heading Options](#file-heading-options)
-    - [Available Build Tasks](#available-build-tasks)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+- [Adding New SVG Icons](#adding-new-svg-icons)
 
 ## About
+
 Clay is Liferay's web implementation of the Lexicon Design Language. It is built with HTML, CSS, and Javascript with [Bootstrap](https://getbootstrap.com/docs/4.1/getting-started/introduction/) as a foundation.
 
 You can view the various components on [the Clay site](http://clayui.com).
 
-<!-- TODO: provide link to Lexicon site for documentation on design patterns -->
-
-## Building
-If you would like to contribute, or make changes on your system you need to do the following:
-
-### Clone the repo
-Clone the repo to your computer
-
-### Install Node.js (v4.6.0 LTS) and NPM
-If you don't already have it installed. You can find more info here: http://nodejs.org/
-Node and NPM come bundled together, so you only need to install one package.
-
-### Install the NPM modules
-Run `npm install` inside of the `packages/clay-css` directory
-
-### Modify files in src/
-The files are generated from the `src/` directory, however, most of the files you'd be interested in changing are in `src/content/`. Files can be either HTML (`.html`) or Markdown (`.md`).
-Every file in `src/content/` has a heading at the top in YAML format that looks something like:
-
-
-    ---
-    title: Title of the Page
-    ---
-
-This section has a couple of options that can be leveraged for different purposes. Those will be covered below.
-
-### Build the static files
-Run `gulp build` to generate the static files.
-
-### View the files
-The generated files are placed into the `build/` directory.
-Sass files in the `.scss` format are generated to CSS, Markdown files with the extension of `.md` are generated to HTML, and HTML files have one bit of processing applied, which is that HTML inside of triple ticks is escaped, like so:
-
-    ```
-	<div>Foo</div>
-    ```
-
-### File Heading Options
-There are a couple of properties you can add to the headings of files, only one of which is required:
+## Adding New SVG Icons
 
-`title:`: **(Required)** This is used for the title of the page in the heading and in the navigation sidebar
+1) The copyright license should be added at the top of the new SVG icon file using the format:
 
-`navIndex:`:  The navigation is sorted alphabetically by default, but if you pass a `navIndex:` property, it will manually sort the item into that position.
-The property is any number, with `0` as the first position, but you can also pass in a keyword of `last` to force an item to the end.
+```
+<!--
+* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
+* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
+*
+* SPDX-License-Identifier: BSD-3-Clause
+-->
+```
 
-`section:`: If you want to group multiple files into sections, in each of those files, pass the same title to the `section:` property. That title will be used for the section heading, and the files will be sorted in there. The `navIndex:` property works inside of sections as well.
+See https://liferay.dev/blogs/-/blogs/how-and-why-to-properly-write-copyright-statements-in-your-code#tldr for more details.
 
-### Available Build Tasks
-You can pass these options when running `gulp`.
+2) The `<svg></svg>` element should only have the attributes `xmlns` and `viewBox`.
 
-`build`: This is the default task, so running just `gulp` will fire off the build task.
-This will generate all of the HTML/CSS/etc into the `build/` directory.
+3) Remove any `fill` and `id` attributes from the SVG elements.
 
-`watch`: Because running a script after every change can get tedious, run `gulp watch` to rebuild the files automatically as you change files.
+4) Remove any `<style></style>` tags and the classes / ids that are referenced by it.
 
-`serve`: Starts a local server on port 3000 and also runs the watch task.
+5) The class `lexicon-icon-body` is deprecated and is no longer being included in newer icons. This class allowed the background color of an icon to be modified using the property `fill`. We shouldn't use this class.
 
-### Updating Bootstrap Version and Dependencies
-Bootstrap can be updated or downgraded by using the command:
+6) The class `lexicon-icon-outline` is a marker on each SVG element (e.g., `path`, `circle`, `rect`). It provides another class to use as a selector to apply CSS changes to an icon. This class should be included on all SVG elements.
 
-`npm install --save-dev --save-exact bootstrap@the_version`
+7) Run `yarn compile` and include the auto generated file `src/scss/functions/_lx-icons-generated.scss` in your commit.
 
-Popper.js can be updated or downgraded by using:
+8) In the file, `clay/clayui.com/plugins/gatsby-plugin-clay-css-tasks/clay-icon-aliases.js`, find `iconsData` and add the icon aliases if needed.
 
-`npm install --save-dev --save-exact popper.js@the_version`
+9) In the `clayui.com` directory run `yarn develop` and check to see if the icon shows up in the icon section.
 
-Then run `gulp build` or `gulp-serve` to compile Clay CSS with the new version
+10) Include the files `static/images/icons/icons.svg`, `static/js/icons-autogenerated.json`, and `static/js/flags-autogenerated.json` to the commit. Some of these files might not show up in git's "Changes not staged for commit:" if aliases or flags have not been added.

package/lib/css/atlas.css

@@ -325,26 +325,32 @@ h1,
 .h1 {
   font-size: 1.625rem;
 }
+
 h2,
 .h2 {
   font-size: 1.375rem;
 }
+
 h3,
 .h3 {
   font-size: 1.1875rem;
 }
+
 h4,
 .h4 {
   font-size: 1rem;
 }
+
 h5,
 .h5 {
   font-size: 0.875rem;
 }
+
 h6,
 .h6 {
   font-size: 0.8125rem;
 }
+
 .lead {
   font-size: 1.25rem;
   font-weight: 300;
@@ -1140,6 +1146,10 @@ button.collapse-icon .c-inner {
   padding-bottom: calc(3 / 4 * 100%);
 }
 
+.aspect-ratio-8-to-3 {
+  padding-bottom: calc(3 / 8 * 100%);
+}
+
 .aspect-ratio-8-to-5 {
   padding-bottom: calc(5 / 8 * 100%);
 }
@@ -1235,6 +1245,9 @@ button.collapse-icon .c-inner {
 .btn .inline-item {
   font-size: 1rem;
 }
+.btn .inline-item .lexicon-icon {
+  margin-top: 0;
+}
 .btn .btn-section {
   display: block;
   font-size: 0.6875rem;
@@ -1294,6 +1307,10 @@ fieldset:disabled a.btn:active {
   margin-right: -0.75rem;
   margin-top: -0.4375rem;
 }
+.form-group-sm .btn .lexicon-icon, .btn-group-sm > .btn .lexicon-icon,
+.btn-group-sm .btn-group > .btn .lexicon-icon, .btn-sm .lexicon-icon {
+  font-size: 1rem;
+}
 .form-group-sm .btn .btn-section, .btn-group-sm > .btn .btn-section,
 .btn-group-sm .btn-group > .btn .btn-section, .btn-sm .btn-section {
   font-size: 0.5625rem;
@@ -1360,6 +1377,9 @@ input[type=button].btn-block {
   padding: 0;
   width: 100%;
 }
+.btn-monospaced .lexicon-icon {
+  margin-top: 0;
+}
 .btn-group-vertical > .btn-monospaced.btn-lg, .btn-group-lg .btn-monospaced, .btn-monospaced.btn-lg {
   height: 3rem;
   width: 3rem;
@@ -6677,6 +6697,9 @@ input[type=button].btn-block {
 .dropdown-action > .dropdown-toggle .lexicon-icon {
   margin-top: 0;
 }
+.dropdown-action > .dropdown-toggle .inline-item .lexicon-icon {
+  margin-top: 0;
+}
 .dropdown-menu-indicator-start .dropdown-item-indicator {
   height: 1rem;
   left: 1.25rem;
@@ -29418,10 +29441,6 @@ button.bg-dark:focus {
   z-index: 1;
 }
 
-.text-monospace {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
-}
-
 .text-justify {
   text-align: justify !important;
 }
@@ -29516,34 +29535,90 @@ button.bg-dark:focus {
   text-transform: capitalize !important;
 }
 
-.font-weight-light {
-  font-weight: 300 !important;
+.font-weight-lighter,
+.text-weight-lighter {
+  font-weight: lighter !important;
 }
 
-.font-weight-lighter {
-  font-weight: lighter !important;
+.font-weight-light,
+.text-weight-light {
+  font-weight: 300 !important;
 }
 
-.font-weight-normal {
+.font-weight-normal,
+.text-weight-normal {
   font-weight: 400 !important;
 }
 
-.font-weight-semi-bold {
+.font-weight-semi-bold,
+.text-weight-semi-bold {
   font-weight: 600 !important;
 }
 
-.font-weight-bold {
+.font-weight-bold,
+.text-weight-bold {
   font-weight: 700 !important;
 }
 
-.font-weight-bolder {
+.font-weight-bolder,
+.text-weight-bolder {
   font-weight: 900 !important;
 }
 
-.font-italic {
+.font-italic,
+.text-italic {
   font-style: italic !important;
 }
 
+.font-monospace,
+.text-monospace {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+}
+
+.text-1 {
+  font-size: 0.625rem;
+}
+
+.text-2 {
+  font-size: 0.75rem;
+}
+
+.text-3 {
+  font-size: 0.875rem;
+}
+
+.text-4 {
+  font-size: 1rem;
+}
+
+.text-5 {
+  font-size: 1.125rem;
+}
+
+.text-6 {
+  font-size: 1.25rem;
+}
+
+.text-7 {
+  font-size: 1.5rem;
+}
+
+.text-8 {
+  font-size: 1.75rem;
+}
+
+.text-9 {
+  font-size: 2rem;
+}
+
+.text-10 {
+  font-size: 2.25rem;
+}
+
+.text-11 {
+  font-size: 2.5rem;
+}
+
 .text-white {
   color: #fff !important;
 }