superdesk-ui-framework 4.0.52 → 4.0.53

package/examples/pages/components/utilities/ObjectPositionUtilities.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../../js/react';
-
-class ObjectPositionUtilitiesDoc extends React.Component {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Object Position</h2>
-                <p className="docs-page__paragraph">
-                    Utilities for managing how a replaced element's content should be positioned within its container.
-                </p>
-                <div className="docs-page__container-block--object-position">
-                    <div className="utilities-table__container utilities-table__container--no-height">
-                        <table className="table utilities-table">
-                            <thead>
-                                <tr>
-                                    <th>Class</th>
-                                    <th>Properties</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>object-bottom</td>
-                                    <td>{'object-position: bottom;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>object-center</td>
-                                    <td>{'object-position: center;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>object-left</td>
-                                    <td>{'object-position: left;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>object-left-bottom</td>
-                                    <td>{'object-position: left bottom;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>object-left-top</td>
-                                    <td>{'object-position: left top;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>object-right</td>
-                                    <td>{'object-position: right;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>object-right-bottom </td>
-                                    <td>{'object-position: right bottom;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>object-right-top</td>
-                                    <td>{'object-position: right top;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>object-top</td>
-                                    <td>{'object-position: top;'}</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </section>
-        );
-    }
-}
-
-export {ObjectPositionUtilitiesDoc};

package/examples/pages/components/utilities/OpacityUtilities.tsx

@@ -1,61 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../../js/react';
-
-class OpacityUtilitiesDoc extends React.Component {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Opacity</h2>
-                <p className="docs-page__paragraph">Utility classes for controlling the opacity of an element.</p>
-                <div className="docs-page__container-block--opacity">
-                    <div className="utilities-table__container">
-                        <table className="table utilities-table">
-                            <thead>
-                                <tr>
-                                    <th>Class</th>
-                                    <th>Properties</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>opacity-0</td>
-                                    <td>{'opacity: 0;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>opacity-20</td>
-                                    <td>{'opacity: 0.2;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>opacity-25</td>
-                                    <td>{'opacity: 0.25;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>opacity-30</td>
-                                    <td>{'opacity: 0.3;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>opacity-40</td>
-                                    <td>{'opacity: 0.4;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>opacity-50</td>
-                                    <td>{'opacity: 0.5;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>opacity-60</td>
-                                    <td>{'opacity: 0.6;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>opacity-75</td>
-                                    <td>{'opacity: 0.75;'}</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </section>
-        );
-    }
-}
-
-export {OpacityUtilitiesDoc};

package/examples/pages/components/utilities/OverflowUtilities.tsx

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../../js/react';
-
-class OverflowUtilitiesDoc extends React.Component {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Overflow</h2>
-                <p className="docs-page__paragraph">
-                    Utility classes for managing how an element deals with content that exceeds the container's size.
-                </p>
-                <div className="docs-page__container-block--position">
-                    <div className="utilities-table__container utilities-table__container--no-height">
-                        <table className="table utilities-table">
-                            <thead>
-                                <tr>
-                                    <th>Class</th>
-                                    <th>Properties</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>overflow-auto</td>
-                                    <td>{'overflow: auto !important;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>overflow-hidden</td>
-                                    <td>{'overflow: hidden !important;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>overflow-scroll</td>
-                                    <td>{'overflow: scroll !important;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>overflow-visible</td>
-                                    <td>{'overflow: visible !important;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>overflow-clip</td>
-                                    <td>{'overflow: clip !important;'}</td>
-                                </tr>
-
-                                <tr>
-                                    <td>overflow-x-auto</td>
-                                    <td>{'overflow-x: auto !important;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>overflow-y-auto</td>
-                                    <td>{'overflow-y: auto !important;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>overflow-x-hidden</td>
-                                    <td>{'overflow-x: hidden !important;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>overflow-y-hidden</td>
-                                    <td>{'overflow-y: hidden !important;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>overflow-x-scroll</td>
-                                    <td>{'overflow-x: scroll !important;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>overflow-y-scroll</td>
-                                    <td>{'overflow-y: scroll !important;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>overflow-x-visible</td>
-                                    <td>{'overflow-x: visible !important;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>overflow-y-visible</td>
-                                    <td>{'overflow-y: visible !important;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>overflow-x-clip</td>
-                                    <td>{'overflow-x: clip !important;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>overflow-y-clip</td>
-                                    <td>{'overflow-y: clip !important;'}</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </section>
-        );
-    }
-}
-
-export {OverflowUtilitiesDoc};

package/examples/pages/components/utilities/PositionUtilities.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../../js/react';
-
-class PositionUtilitiesDoc extends React.Component {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Position</h2>
-                <p className="docs-page__paragraph">
-                    Utility classes for managing the placement of an element within the DOM.
-                </p>
-                <div className="docs-page__container-block--position">
-                    <div className="utilities-table__container">
-                        <table className="table utilities-table">
-                            <thead>
-                                <tr>
-                                    <th>Class</th>
-                                    <th>Properties</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>p-static</td>
-                                    <td>{'position: static;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>p-fixed</td>
-                                    <td>{'position: fixed;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>p-absolute</td>
-                                    <td>{'position: absolute;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>p-relative</td>
-                                    <td>{'position: relative;'}</td>
-                                </tr>
-                                <tr>
-                                    <td>p-sticky</td>
-                                    <td>{'position: sticky;'}</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </section>
-        );
-    }
-}
-
-export {PositionUtilitiesDoc};

package/examples/pages/components/utilities/ShadowUtilities.tsx

@@ -1,122 +0,0 @@
-import * as React from 'react';
-import * as Markup from '../../../js/react';
-
-class ShadowUtilitiesDoc extends React.Component {
-    render() {
-        return (
-            <section className="docs-page__container">
-                <h2 className="docs-page__h2">Shadow</h2>
-                <p className="docs-page__paragraph">Utility classes for managing the shadow depth of an element.</p>
-
-                <div className="docs-page__container-block--box-shadow">
-                    <h3 className="docs-page__h3">box-shadow</h3>
-                    <div className="utilities-table__container">
-                        <table className="table utilities-table">
-                            <thead>
-                                <tr>
-                                    <th>Class</th>
-                                    <th>Properties</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>sd-shadow--z1</td>
-                                    <td>{'box-shadow: var(--sd-shadow--z1);'}</td>
-                                </tr>
-                                <tr>
-                                    <td>sd-shadow--z2</td>
-                                    <td>{'box-shadow: var(--sd-shadow--z2);'}</td>
-                                </tr>
-                                <tr>
-                                    <td>sd-shadow--z3</td>
-                                    <td>{'box-shadow: var(--sd-shadow--z3);'}</td>
-                                </tr>
-                                <tr>
-                                    <td>sd-shadow--z4</td>
-                                    <td>{'box-shadow: var(--sd-shadow--z4);'}</td>
-                                </tr>
-                                <tr>
-                                    <td>sd-shadow--none</td>
-                                    <td>{'box-shadow: none;'}</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                    <div className="docs-page__container-block">
-                        <h4 className="docs-page__h4">Usage</h4>
-                        <div className="docs-page__code-window">
-                            <div className="sd-grid-list">
-                                <div className="docs-page__example-box sd-shadow--z1">
-                                    <p>sd-shadow--z1</p>
-                                </div>
-                                <div className="docs-page__example-box sd-shadow--z2">
-                                    <p>sd-shadow--z2</p>
-                                </div>
-                                <div className="docs-page__example-box sd-shadow--z3">
-                                    <p>sd-shadow--z3</p>
-                                </div>
-                                <div className="docs-page__example-box sd-shadow--z4">
-                                    <p>sd-shadow--z4</p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="docs-page__container-block--drop-shadow">
-                    <h3 className="docs-page__h3">drop-shadow filter</h3>
-                    <p className="docs-page__paragraph">
-                        These helper classes utilize the <code>drop-shadow</code> filter. Use them exclusively to apply
-                        a shadow to an element that doesn't correspond to its bounding box, but instead uses the
-                        element's alpha mask, such as transparent PNG or SVG. For all other situations, it is
-                        recommended to use the above classes, based on the <code>box-shadow</code> property.
-                    </p>
-                    <div className="utilities-table__container">
-                        <table className="table utilities-table">
-                            <thead>
-                                <tr>
-                                    <th>Class</th>
-                                    <th>Properties</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr>
-                                    <td>sd-drop-shadow--z1</td>
-                                    <td>{'filter: var(--sd-drop-shadow--z1);'}</td>
-                                </tr>
-                                <tr>
-                                    <td>sd-drop-shadow--z2</td>
-                                    <td>{'filter: var(--sd-drop-shadow--z2);'}</td>
-                                </tr>
-                                <tr>
-                                    <td>sd-drop-shadow--z3</td>
-                                    <td>{'filter: var(--sd-drop-shadow--z3);'}</td>
-                                </tr>
-                                <tr>
-                                    <td>sd-drop-shadow--z4</td>
-                                    <td>{'filter: var(--sd-drop-shadow--z4);'}</td>
-                                </tr>
-                                <tr>
-                                    <td>sd-drop-shadow--none</td>
-                                    <td>{'filter: var(--sd-drop-shadow--none);'}</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-
-                <div className="docs-page__container-block--drop-shadow">
-                    <h4 className="docs-page__h4">Basic usage</h4>
-                    <div className="docs-page__code-window docs-page__example-box">
-                        <div className="p-4">
-                            <p className="text-md font-light text-color-subdued mb-2">sd-drop-shadow--z3</p>
-                            <img className="sd-drop-shadow--z3" width={300} src="./SD-logo.svg" />
-                        </div>
-                    </div>
-                </div>
-            </section>
-        );
-    }
-}
-
-export {ShadowUtilitiesDoc};