npm - superdesk-ui-framework - Versions diffs - 4.0.52 → 4.0.53 - Mend

superdesk-ui-framework 4.0.52 → 4.0.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (369) hide show

package/dist/playgrounds/form-layout.html DELETED Viewed

@@ -1,285 +0,0 @@
-<header class="sd-top-menu">
-    <a class="sd-top-menu__collapse-nav"><i class="icon-collapse icon--white"></i></a>
-    <p class="sd-top-menu__header">Forms</p>
-</header>
-<main class="sd-page" ng-init="darkTheme = false" data-theme="{{darkTheme ? 'dark-ui' : 'light-ui'}}">
-    <section class="sd-page__main-content" ng-class="{'dark-ui': darkTheme == true}">
-        <div class="subnav" ng-class="{'subnav--dark-ui': darkTheme == true}">
-            <h3 class="subnav__page-title">Form layout</h3>
-            <span class="label label--large label--warning label--no-transform sd-margin-r--2">Work in progress!</span>
-            <span sd-tooltip="Dark mode" flow="left">
-                <span sd-switch ng-model="darkTheme" class="sd-margin-r--2"></span>
-            </span>
-        </div>
-        <div class="sd-page__content">
-            <div style="width: 70%; margin: 100px auto; max-width: 900px;" class="docs-page__code-window">
-                <div class="sd-form-element" style="padding: 30px;" data-theme="{{darkTheme ? 'dark-ui' : 'ligh-ui'}}">
-                    <div class="form__group">
-                        <div class="form__item">
-                            <div class="sd-input">
-                                <label class="sd-input__label">input field label 1</label>
-                                <input class="sd-input__input" type="text">
-                                <div class="sd-input__char-count">00/90</div>
-                                <div class="sd-input__message-box">
-                                    <div class="sd-input__hint">Hendrerit in vulputate.</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form__group">
-                        <div class="form__item">
-                            <div class="sd-input">
-                                <label class="sd-input__label">input field label 1</label>
-                                <input class="sd-input__input" type="text">
-                                <div class="sd-input__char-count">00/90</div>
-                                <div class="sd-input__message-box">
-                                    <div class="sd-input__hint">Hendrerit in vulputate.</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="form__item">
-                            <div class="sd-input sd-input--invalid">
-                                <label class="sd-input__label">label 2</label>
-                                <input class="sd-input__input" type="text">
-                                <div class="sd-input__message-box">
-                                    <div class="sd-input__message">Error hendrerit in vulputate.</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="form__item">
-                            <div class="sd-input sd-input--disabled">
-                                <label class="sd-input__label">input label 3</label>
-                                <input class="sd-input__input" type="text" disabled>
-                                <div class="sd-input__char-count">00/90</div>
-                                <div class="sd-input__message-box">
-                                    <div class="sd-input__hint">Hendrerit in vulputate.</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form__group">
-                        <div class="form__item">
-                            <div class="sd-input">
-                                <label class="sd-input__label">input field label 1</label>
-                                <input class="sd-input__input" type="text">
-                                <div class="sd-input__char-count">00/90</div>
-                                <div class="sd-input__message-box">
-                                    <div class="sd-input__hint">Hendrerit in vulputate.</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="form__item">
-                            <div class="sd-input sd-input--required ">
-                                <label class="sd-input__label">input label 3</label>
-                                <input class="sd-input__input" type="text">
-                                <div class="sd-input__char-count">00/90</div>
-                                <div class="sd-input__message-box">
-                                    <div class="sd-input__hint">Integer posuere erat a ante venenatis.</div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form__group">
-                        <div class="form__item form__item--auto-width">
-                            <div class="form__text-block">
-                                Morbi:
-                            </div>
-                        </div>
-                        <div class="form__item">
-                            <div class="sd-input">
-                                <label class="sd-input__label">Label</label>
-                                <input class="sd-input__input" type="text">
-                                <div class="sd-input__char-count">00/90</div>
-                                <div class="sd-input__message-box">
-                                    <div class="sd-input__hint">Nulla vitae elit libero, a pharetra augue.</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="form__item form__item--auto-width">
-                            <div class="form__text-block">
-                                Risus:
-                            </div>
-                        </div>
-                        <div class="form__item">
-                            <div class="sd-input">
-                                <label class="sd-input__label">Label</label>
-                                <input class="sd-input__input" type="text">
-                                <div class="sd-input__message-box">
-                                    <div class="sd-input__hint">Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="form__item form__item--auto-width">
-                            <a class="btn btn--primary">Primary</a>
-                        </div>
-                    </div>
-                    <div class="form__group">
-                        <div class="form__item">
-                            <div class="sd-input sd-input--is-select ">
-                                <label class="sd-input__label">City</label>
-                                <select class="sd-input__select" type="text">
-                                    <option value="">Select your city</option>
-                                    <option value="prague">Prague</option>
-                                    <option value="belgrade">Belgrade</option>
-                                    <option value="berlin">Berlin</option>
-                                </select>
-                                <div class="sd-input__message-box">
-                                    <div class="sd-input__hint">Nulla vitae elit libero, a pharetra augue.</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="form__item">
-                            <div class="sd-input">
-                                <label class="sd-input__label">Label</label>
-                                <input class="sd-input__input" type="text">
-                                <div class="sd-input__message-box">
-                                    <div class="sd-input__hint">Pellentesque ornare sem lacinia quam venenatis vestibulum.</div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="form__item form__item--auto-width">
-                            <a class="btn btn--primary">Primary</a>
-                        </div>
-                    </div>
-                    <div class="form__group form__group--inline-label">
-                        <div class="form__item">
-                            <div class="sd-input">
-                                <label class="sd-input__label">Label</label>
-                                <input class="sd-input__input" type="text">
-                                <div class="sd-input__char-count">00/90</div>
-                                <div class="sd-input__message-box"></div>
-                            </div>
-                        </div>
-                        <div class="form__item">
-                            <div class="sd-input">
-                                <label class="sd-input__label">Label</label>
-                                <input class="sd-input__input" type="text">
-                                <div class="sd-input__message-box"></div>
-                            </div>
-                        </div>
-                        <div class="form__item form__item--auto-width">
-                            <a class="btn btn--primary">Primary</a>
-                        </div>
-                    </div>
-                    <div class="form__group form__group--inline-label">
-                        <div class="form__item">
-                            <div class="sd-check__group-new ">
-                                <span class="sd-check-new__wrapper">
-                                    <span class="sd-check-new"></span>
-                                    <label>Checkbox label right</label>
-                                </span>
-                                <span class="sd-check-new__wrapper">
-                                    <span class="sd-check-new checked" checked="checked"></span>
-                                    <label class="label--active">Checkbox label right</label>
-                                </span>
-                                <span class="sd-check-new__wrapper">
-                                    <span class="sd-check-new"></span>
-                                    <label>Checkbox label right</label>
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form__group form__group--inline-label">
-                        <div class="form__item">
-                            <div class="sd-check__group-new sd-check__group-new--vertical">
-                                <span class="sd-check-new__wrapper">
-                                    <span class="sd-radio-new"></span>
-                                    <label>Radio label</label>
-                                </span>
-                                <span class="sd-check-new__wrapper">
-                                    <span class="sd-radio-new checked" checked="checked"></span>
-                                    <label class="label--active">Radio label</label>
-                                </span>
-                                <span class="sd-check-new__wrapper">
-                                    <span class="sd-radio-new"></span>
-                                    <label>Radio label</label>
-                                </span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="form__group form__group--inline-label">
-                        <div class="form__item">
-                            <span class="sd-check-new__wrapper" label-position="left">
-                                <label for="">Checkbox label right</label>
-                                <span class="sd-check-new"></span>
-                            </span>
-                        </div>
-                    </div>
-                    <div class="form__group form__group--inline-label">
-                        <div class="sd-check-button__group sd-check-button__group--left docs-page__test-helper">
-                            <span class="sd-check-button">
-                                <label class="sd-check-button__text-label">Check Button</label>
-                            </span>
-                            <span class="sd-check-button">
-                                <label class="sd-check-button__text-label">Check Button</label>
-                            </span>
-                        </div>
-                        <div class="sd-check-button__group sd-check-button__group--center docs-page__test-helper">
-                            <span class="sd-check-button">
-                                <label class="sd-check-button__text-label">Check</label>
-                            </span>
-                            <span class="sd-check-button">
-                                <label class="sd-check-button__text-label">Button</label>
-                            </span>
-                        </div>
-                        <div class="sd-check-button__group sd-check-button__group--right docs-page__test-helper">
-                            <span class="sd-check-button">
-                                <label class="sd-check-button__text-label">Check Button</label>
-                            </span>
-                            <span class="sd-check-button">
-                                <label class="sd-check-button__text-label">Check Button</label>
-                            </span>
-                        </div>
-                    </div>
-                    <div class="form__group form__group--inline-label sd-margin-y--3" >
-                        <div class="sd-check-button__group sd-check-button__group--grid docs-page__test-helper" style="max-width:400px">
-                            <span class="sd-check-button checked">
-                                <i class="icon-th-list"></i>
-                                <label class="sd-check-button__text-label">Button one</label>
-                            </span>
-                            <span class="sd-check-button">
-                                <i class="icon-th"></i>
-                                <label class="sd-check-button__text-label">Button two</label>
-                            </span>
-                            <span class="sd-check-button checked">
-                                <i class="icon-th-large"></i>
-                                <label class="sd-check-button__text-label">SD Check Button</label>
-                            </span>
-                            <span class="sd-check-button">
-                                <i class="icon-kanban-view"></i>
-                                <label class="sd-check-button__text-label">Button three</label>
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-</main>

package/dist/playgrounds/layout-grid.html DELETED Viewed

@@ -1,79 +0,0 @@
-<div style="height:100vh; background: #f8f8f8;">
-    <div class="docs-page__code-example">
-        <h3 class="docs-page__h3">Default Layout grid (not responsive)</h3>
-        <div class="grid">
-            <div class="grid__item grid__item--col-6">col-6</div>
-            <div class="grid__item grid__item--col-6">col-6</div>
-        </div>
-        <div class="grid">
-            <div class="grid__item grid__item--col-4">col-4</div>
-            <div class="grid__item grid__item--col-4">col-4</div>
-            <div class="grid__item grid__item--col-4">col-4</div>
-        </div>
-        <div class="grid">
-            <div class="grid__item grid__item--col-2">col-2</div>
-            <div class="grid__item grid__item--col-8">col-8</div>
-            <div class="grid__item grid__item--col-2">col-2</div>
-        </div>
-        <div class="grid">
-            <div class="grid__item grid__item--col-3">col-3</div>
-            <div class="grid__item grid__item--col-6">col-6</div>
-            <div class="grid__item grid__item--col-3">col-3</div>
-        </div>
-        <div class="grid">
-            <div class="grid__item grid__item--col-3">col-3</div>
-            <div class="grid__item grid__item--col-3">col-3</div>
-            <div class="grid__item grid__item--col-3">col-3</div>
-            <div class="grid__item grid__item--col-3">col-3</div>
-        </div>
-        <div class="grid">
-            <div class="grid__item grid__item--col-2">col-2</div>
-            <div class="grid__item grid__item--col-4">col-4</div>
-            <div class="grid__item grid__item--col-4">col-4</div>
-            <div class="grid__item grid__item--col-2">col-2</div>
-        </div>
-    </div>
-    <div class="docs-page__code-example">
-        <h3 class="docs-page__h3">Responsive Layout grid</h3>
-        <div class="grid">
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-        </div>
-    </div>
-    <div style="padding: 20px;">
-        <h3 class="docs-page__h3">Responsive Layout grid boxed</h3>
-        <div class="grid grid--boxed">
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-4 gi-large-3 gi-xlarge-2 gi-xxlarge-1">xsmall-12 small-6 medium-4 large-3 xlarge-2 xxlarge-1</div>
-        </div>
-    </div>
-    <div style="padding: 20px;">
-        <h3 class="docs-page__h3">Responsive Layout grid boxed styled</h3>
-        <div class="grid grid--boxed grid--boxed-styled">
-            <div class="grid__item gi-xsmall-12 gi-small-3 gi-medium-4 gi-large-1 gi-xlarge-3 gi-xxlarge-4">xsmall-12 small-3 medium-4 large-1 xlarge-3 xxlarge-4</div>
-            <div class="grid__item gi-xsmall-12 gi-small-6 gi-medium-8 gi-large-10 gi-xlarge-3 gi-xxlarge-4">xsmall-12 small-6 medium-8 large-10 xlarge-3 xxlarge-4</div>
-            <div class="grid__item gi-xsmall-12 gi-small-3 gi-medium-4 gi-large-1 gi-xlarge-6 gi-xxlarge-4">xsmall-12 small-3 medium-4 large-1 xlarge-6 xxlarge-4</div>
-        </div>
-    </div>
-</div>