diff --git a/package.json b/package.json index 0605c95646..c710880715 100644 --- a/package.json +++ b/package.json @@ -4,13 +4,13 @@ "private": true, "scripts": { "build:icons:web": "webpack --config webpack.icons.config.js", - "build:icons:css": "node-sass --source-map=true --precision=6 ./src/clr-icons/clr-icons.scss ./dist/clr-icons/clr-icons.css", + "build:icons:css": "node-sass --source-map=true --precision=8 ./src/clr-icons/clr-icons.scss ./dist/clr-icons/clr-icons.css", "build:icons:optimize": "csso ./dist/clr-icons/clr-icons.css ./dist/clr-icons/clr-icons.min.css --map file;", "build:icons:package": "cpy ./npm/clr-icons/package.json ./npm/clr-icons/README.md ./dist/clr-icons/; replace '@VERSION' $npm_package_version ./dist/clr-icons/package.json", "build:icons:svg": "node ./scripts/clr-icons-svg.js", "build:icons": "npm-run-all build:icons:css build:icons:optimize build:icons:web build:icons:package build:icons:svg", - "build:ui:css": "node-sass --include-path=node_modules --source-map=true --precision=6 --indentedSyntax=true ./src/clr-angular/main.scss ./dist/clr-ui/clr-ui.css; node-sass --include-path=node_modules --source-map=true --precision=6 --indentedSyntax=true ./src/clr-angular/dark-theme.scss ./dist/clr-ui/clr-ui-dark.css", - "build:ui:deprecated": "node-sass --include-path=node_modules --source-map=true --precision=6 --indentedSyntax=true ./src/clr-angular/layout/grid-deprecated.clarity.scss ./dist/clr-ui/clr-grid-deprecated.css", + "build:ui:css": "node-sass --include-path=node_modules --source-map=true --precision=8 --indentedSyntax=true ./src/clr-angular/main.scss ./dist/clr-ui/clr-ui.css; node-sass --include-path=node_modules --source-map=true --precision=8 --indentedSyntax=true ./src/clr-angular/dark-theme.scss ./dist/clr-ui/clr-ui-dark.css", + "build:ui:deprecated": "node-sass --include-path=node_modules --source-map=true --precision=8 --indentedSyntax=true ./src/clr-angular/layout/grid-deprecated.clarity.scss ./dist/clr-ui/clr-grid-deprecated.css", "build:ui:prefix": "postcss ./dist/clr-ui/clr-ui.css -o ./dist/clr-ui/clr-ui.css; postcss ./dist/clr-ui/clr-ui-dark.css -o ./dist/clr-ui/clr-ui-dark.css; postcss --use autoprefixer -o ./dist/clr-ui/clr-grid-deprecated.css ./dist/clr-ui/clr-grid-deprecated.css", "build:ui:src": "cpy --parents --cwd='src/clr-angular/' '**/*.scss' ../../dist/clr-ui/src/", "build:ui:optimize": "csso ./dist/clr-ui/clr-ui.css ./dist/clr-ui/clr-ui.min.css --map file; csso ./dist/clr-ui/clr-ui-dark.css ./dist/clr-ui/clr-ui-dark.min.css --map file; csso ./dist/clr-ui/clr-grid-deprecated.css ./dist/clr-ui/clr-grid-deprecated.css --map file", diff --git a/src/website/src/app/documentation/demos/alert/alerts.demo.html b/src/website/src/app/documentation/demos/alert/alerts.demo.html index f8fcfe5d1a..ece8225a5e 100644 --- a/src/website/src/app/documentation/demos/alert/alerts.demo.html +++ b/src/website/src/app/documentation/demos/alert/alerts.demo.html @@ -62,15 +62,6 @@
Standard Alerts
- - - - Your container has been created. - - - - @@ -97,6 +88,17 @@
Standard Alerts
 + + + + + + Your container has been created. + + +
@@ -413,16 +415,6 @@

Code & Examples

Several classes and elements are required to implement the Clarity alert layout. A table of these classes and elements with a brief description of each follows:

- - -
-
The use of .alert-item in the clr-alert Angular component is deprecated. Try to use clr-alert-item instead.
-
If your application uses a combination of clr-alert Angular components and hand-coded DOM alerts, you should put the .static class on your non-Angular .alert-item elements.
-
Once clr-alert no longer recognizes .alert-item classnames as a subcomponent, it will no longer be an issue.
-
- - - diff --git a/src/website/src/app/documentation/demos/grid/grid.demo.html b/src/website/src/app/documentation/demos/grid/grid.demo.html index 44ec3fffa1..d9ed496211 100644 --- a/src/website/src/app/documentation/demos/grid/grid.demo.html +++ b/src/website/src/app/documentation/demos/grid/grid.demo.html @@ -5,26 +5,13 @@ A grid provides a structure of rows and columns for aligning content. Grids are useful because they help create a familiar and easily navigable structure for content. -
-
-
-
- -
- - The grid documentation here describes the new grid introduced in version 0.12. The old grid is still available, but deprecated for removal in version 2.0. To see the old grid documentation, go to 0.11 grid documentation. - -
-
-
-

- Clarity imports the 12-column + Clarity extends the 12-column Bootstrap 4 Flex Grid - and prefixes the grid classes. + and prefixes the grid classes with clr-. Prefixing allows us to avoid conflicting with other grid systems. However, it also means if you are familiar with the grid classes in Bootstrap 4, the Clarity grid will be familiar. @@ -34,8 +21,8 @@ Important features about the grid are listed below:

-
-
+
+
diff --git a/src/website/src/app/documentation/demos/select/select.demo.html b/src/website/src/app/documentation/demos/select/select.demo.html index f3cb8af36f..837c42b57a 100644 --- a/src/website/src/app/documentation/demos/select/select.demo.html +++ b/src/website/src/app/documentation/demos/select/select.demo.html @@ -13,11 +13,9 @@

Angular Select Component

Basic select

-

This is the most basic way to create an input inside of a form. This is only if you don't have a need for a - label or validation. You need to add clrInput to your input to wire up the - directive. Notice, it is not necessary to add type="text" as it is handled - automatically. It will only work if you have the control wired up with either a template driven form or - reactive form.

+

This is the standard way to define a select box inside of a form, without the use of a + label or validation. You need to add clrSelect to your select to wire up the + directive.