@clayui/css 3.44.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;
@@ -7275,10 +7298,11 @@ fieldset[disabled] label .form-control {
 }
 .form-control .label {
   border-width: 0.0625rem;
-  height: 1.5rem;
+  height: auto;
   margin-bottom: 0.3125rem;
   margin-right: 0.625rem;
   margin-top: 0.3125rem;
+  min-height: 1.5rem;
   font-size: 0.75rem;
   text-transform: none;
 }
@@ -8239,6 +8263,17 @@ button.link-outline {
   margin-top: 0;
 }
 
+.component-icon {
+  align-items: center;
+  display: inline-flex;
+  height: 32px;
+  justify-content: center;
+  width: 32px;
+}
+.component-icon .lexicon-icon {
+  margin-top: 0;
+}
+
 .clay-range {
   padding-bottom: 0.1px;
 }
@@ -20662,6 +20697,221 @@ caption {
   margin-left: 0;
   right: 0.5rem;
 }
+.treeview {
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  list-style: none;
+  margin-bottom: 0;
+  padding: 2px 0;
+}
+.treeview .btn-monospaced {
+  font-size: 14px;
+  height: 24px;
+  width: 24px;
+}
+.treeview .btn-monospaced:focus, .treeview .btn-monospaced.focus {
+  box-shadow: inset 0 0 0 0.125rem #80acff , inset 0 0 0 0.25rem #fff;
+}
+.treeview .btn-monospaced:active:focus {
+  box-shadow: inset 0 0 0 0.125rem #80acff , inset 0 0 0 0.25rem #fff;
+}
+.treeview .custom-control {
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-top: 1.5px;
+}
+.treeview .component-expander .lexicon-icon:not(.component-expanded-d-none) {
+  display: none;
+}
+.treeview .component-action {
+  display: none;
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.treeview .component-action:hover {
+  background-color: transparent;
+  color: #6b6c7e;
+}
+.treeview .component-action:focus, .treeview .component-action.focus {
+  color: #6b6c7e;
+}
+.treeview .component-action:active {
+  background-color: transparent;
+}
+.treeview .component-action.active {
+  background-color: transparent;
+}
+.treeview .component-action[aria-expanded=true], .treeview .component-action.show {
+  background-color: transparent;
+}
+.treeview .component-icon {
+  display: inline;
+  height: auto;
+  margin-left: 4px;
+  margin-right: 4px;
+  width: auto;
+}
+.treeview .component-text {
+  padding-bottom: 1.5px;
+  padding-left: 4px;
+  padding-top: 1.5px;
+  -ms-user-select: auto;
+  -moz-user-select: auto;
+  -webkit-user-select: auto;
+  user-select: auto;
+}
+.treeview.show-component-expander-on-hover:hover .component-expander, .treeview.show-component-expander-on-hover.hover .component-expander {
+  opacity: 1;
+  transition: opacity ease-in-out 600ms;
+}
+@media (prefers-reduced-motion: reduce) {
+  .treeview.show-component-expander-on-hover:hover .component-expander, .treeview.show-component-expander-on-hover.hover .component-expander {
+    transition: none;
+  }
+}
+.treeview.show-component-expander-on-hover .treeview-link:focus .component-expander, .treeview.show-component-expander-on-hover .treeview-link.focus .component-expander {
+  opacity: 1;
+  transition: none;
+}
+.treeview.show-component-expander-on-hover .component-expander {
+  opacity: 0;
+  transition: opacity ease-in-out 450ms;
+}
+@media (prefers-reduced-motion: reduce) {
+  .treeview.show-component-expander-on-hover .component-expander {
+    transition: none;
+  }
+}
+
+.treeview-group {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin-bottom: 0;
+  padding-left: 0;
+}
+
+.treeview-item {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
+.treeview-link {
+  cursor: pointer;
+  display: block;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 1px;
+  margin-bottom: 2px;
+  margin-top: 2px;
+  min-width: 100%;
+  padding: 0;
+  position: relative;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.treeview-link:hover {
+  text-decoration: none;
+}
+.treeview-link:focus {
+  box-shadow: inset 0 0 0 0.125rem #80acff , inset 0 0 0 0.25rem #fff;
+  outline: 0;
+}
+.treeview-link.treeview-dropping-bottom {
+  box-shadow: 0 2px 0 0 #80acff;
+}
+.treeview-link.treeview-dropping-middle {
+  background-color: #f0f5ff;
+  border-color: #80acff;
+}
+.treeview-link.treeview-dropping-top {
+  box-shadow: 0 -2px 0 0 #80acff;
+}
+.treeview-link.hover .component-action, .treeview-link:hover .component-action, .treeview-link.focus .component-action, .treeview-link:focus .component-action {
+  display: block;
+}
+.treeview-link.show .component-expander .component-expanded-d-none, .treeview-link[aria-expanded=true] .component-expander .component-expanded-d-none {
+  display: none;
+}
+.treeview-link.show .component-expander .lexicon-icon:not(.component-expanded-d-none), .treeview-link[aria-expanded=true] .component-expander .lexicon-icon:not(.component-expanded-d-none) {
+  display: inline-block;
+}
+
+.treeview-nested-margins .treeview-group .treeview-item {
+  margin-left: 24px;
+}
+
+.treeview-item-dragging {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+.treeview-item-dragging .treeview-link {
+  background-color: transparent;
+  border-color: transparent;
+  box-shadow: none;
+}
+.treeview-dragging {
+  background-color: #fff;
+  border-color: #80acff;
+  border-radius: 0.1875rem;
+  border-style: solid;
+  border-width: 1px;
+  display: inline-block;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 4px 12px;
+  text-transform: uppercase;
+}
+
+.treeview-light .component-expander {
+  color: #6b6c7e;
+}
+.treeview-light .component-expander:hover {
+  color: #0b5fff;
+}
+.treeview-light .component-expander.btn-secondary {
+  background-color: #fff;
+}
+.treeview-light .treeview-link {
+  color: #6b6c7e;
+}
+.treeview-light .treeview-link:hover {
+  background-color: #f7f8f9;
+  color: #272833;
+}
+.treeview-light .treeview-link:active {
+  background-color: #f1f2f5;
+  color: #272833;
+}
+.treeview-light .treeview-link.active {
+  background-color: #f1f2f5;
+  color: #272833;
+}
+.treeview-dark .component-expander {
+  color: #a7a9bc;
+}
+.treeview-dark .component-expander:hover {
+  color: #80acff;
+}
+.treeview-dark .treeview-link {
+  color: #a7a9bc;
+}
+.treeview-dark .treeview-link:hover {
+  background-color: rgba(255, 255, 255, 0.04);
+}
+.treeview-dark .treeview-link.active {
+  background-color: rgba(255, 255, 255, 0.06);
+  color: #fff;
+}
+.treeview-dark .treeview-link:disabled, .treeview-dark .treeview-link.disabled {
+  background-color: transparent;
+  color: rgba(167, 169, 188, 0.04);
+}
+.treeview-dark .component-action {
+  color: #a7a9bc;
+}
 .bg-checkered {
   background-image: linear-gradient(45deg, #e7e7ed 25%, transparent 25%), linear-gradient(-45deg, #e7e7ed 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e7e7ed 75%), linear-gradient(-45deg, transparent 75%, #e7e7ed 75%);
   background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
@@ -29191,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;
 }
@@ -29289,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;
 }