View all @lrnwebcomponents/responsive-utility analysis

How to use @lrnwebcomponents/responsive-utility - 3 common examples

To help you get started, we’ve selected a few @lrnwebcomponents/responsive-utility examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

elmsln / lrnwebcomponents / elements / editable-table / lib / editable-table-editor-settings.js View on Github

row-header                //Does the table use the first column as a row header? Default is false.
  scroll                    //Does the table use scrolling to fit when it is too wide?  Default is false: a responsive layout where only two columns are shown and a dropdown menu controls which column to display.
  sort                      //Does the table allow sorting by column where column headers become sort buttons? Default is false.
  striped&gt;                  //Does the table have alternating stipes of shading for its body rows? Default is false.

@demo demo/editor.html
@polymer
@customElement
@appliesMixin editBehaviors
@appliesMixin displayBehaviors
@appliesMixin ResponsiveUtilityBehaviors */ class EditableTableEditor extends editBehaviors( displayBehaviors(ResponsiveUtilityBehaviors(PolymerElement)) ) { static get template() { return html` <style> :host { --a11y-collapse-border: 1px solid #ddd; --a11y-collapse-horizontal-padding: 0; --a11y-collapse: { margin: 0; } --a11y-collapse-heading-focus: { background-color: #f0f0f0; } } :host, :host paper-item {</style>

elmsln / lrnwebcomponents / elements / editable-table / lib / editable-table-display.js View on Github

import { displayBehaviors } from "./editable-table-behaviors.js";
import "./editable-table-styles.js";

/**
 * `editable-table-display`
 * @customElement editable-table-display
 * ` An editor interface for editable-table`
 * @demo ./demo/editor.html
 *
 * @polymer

 * @appliesMixin displayBehaviors
 * @appliesMixin ResponsiveUtilityBehaviors
 */
class EditableTableDisplay extends displayBehaviors(
  ResponsiveUtilityBehaviors(PolymerElement)
) {
  static get template() {
    return html`
      <style>
        :host .th-or-td {
          padding: var(--editable-table-cell-padding);
        }
        :host([bordered]) .th {
          border: 1px solid var(--editable-table-border-color);
        }
        :host([striped]) .tbody-tr:nth-child(2n) .th,
        :host([striped]) .tbody-tr:nth-child(2n) .td {
          @apply --editable-table-style-stripe;
        }
        :host([sort]) thead th,
        :host([filter]) tbody td {</style>

elmsln / lrnwebcomponents / elements / editable-table / lib / editable-table-editor.js View on Github

row-header                //Does the table use the first column as a row header? Default is false.
  responsive                //Does the table use only two columns are shown and a dropdown menu controls which column to display?  Default is false: a responsive layout with scrolling to fit when it is too wide.
  sort                      //Does the table allow sorting by column where column headers become sort buttons? Default is false.
  striped&gt;                  //Does the table have alternating stipes of shading for its body rows? Default is false.

@demo demo/editor.html
@polymer
@customElement
@appliesMixin editBehaviors
@appliesMixin displayBehaviors
@appliesMixin ResponsiveUtilityBehaviors */ class EditableTableEditor extends editBehaviors( displayBehaviors(ResponsiveUtilityBehaviors(PolymerElement)) ) { static get template() { return html` <style> :host .filter-icon, :host .sortable-icon { display: none; opacity: 0.4; width: 24px; height: 24px; } :host([sort]) .tbody .tr:first-child .sortable-icon { display: inline-block; opacity: 0.25; } :host([filter]:not([sort])) .filter-icon,</style>