Created
October 16, 2019 12:56
-
-
Save Confirm4Crit/fac474a1c0145bad70be4e771d7e6651 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="[https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2/assets/styles/salesforce-lightning-design-system.min.css"/](https://cdn.jsdelivr.net/npm/@salesforce-ux/design-system@2/assets/styles/salesforce-lightning-design-system.min.css)> | |
| </head> | |
| <body> | |
| <table class="slds-table slds-table_bordered custom-max-large-table_stacked-horizontal slds-table_striped"> | |
| <thead> | |
| <tr class="slds-line-height_reset"> | |
| <th class="slds-text-title_caps" scope="col"> | |
| <span class="slds-assistive-text" id="check-group-header">Choose a row to select</span> | |
| <div class="slds-checkbox"> | |
| <input type="checkbox" name="options" id="checkbox-all" aria-labelledby="check-button-label-all check-group-header" value="checkbox-all" /> | |
| <label class="slds-checkbox__label" for="checkbox-all" id="check-button-label-all"> | |
| <span class="slds-checkbox_faux"></span> | |
| <span class="slds-form-element__label slds-assistive-text">Select all</span> | |
| </label> | |
| </div> | |
| </th> | |
| <th class="slds-text-title_caps" scope="col"> | |
| <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div> | |
| </th> | |
| <th class="slds-text-title_caps" scope="col"> | |
| <div class="slds-truncate" title="Account Name">Account Name</div> | |
| </th> | |
| <th class="slds-text-title_caps" scope="col"> | |
| <div class="slds-truncate" title="Close Date">Close Date</div> | |
| </th> | |
| <th class="slds-text-title_caps" scope="col"> | |
| <div class="slds-truncate" title="Stage">Stage</div> | |
| </th> | |
| <th class="slds-text-title_caps" scope="col"> | |
| <div class="slds-truncate" title="Confidence">Confidence</div> | |
| </th> | |
| <th class="slds-text-title_caps" scope="col"> | |
| <div class="slds-truncate" title="Amount">Amount</div> | |
| </th> | |
| <th class="slds-text-title_caps" scope="col"> | |
| <div class="slds-truncate" title="Contact">Contact</div> | |
| </th> | |
| <th class="slds-text-title_caps" scope="col"></th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="slds-hint-parent"> | |
| <td data-label="Select Row"> | |
| <div class="slds-checkbox"> | |
| <input type="checkbox" name="options" id="checkbox-01" aria-labelledby="check-button-label-01 check-group-header" value="checkbox-01" /> | |
| <label class="slds-checkbox__label" for="checkbox-01" id="check-button-label-01"> | |
| <span class="slds-checkbox_faux"></span> | |
| <span class="slds-form-element__label slds-assistive-text">Select item 1</span> | |
| </label> | |
| </div> | |
| </td> | |
| <th data-label="Opportunity Name" scope="row"> | |
| <div class="slds-truncate" title="Cloudhub">Cloudhub</div> | |
| </th> | |
| <td data-label="Account Name"> | |
| <div class="slds-truncate" title="Cloudhub">Cloudhub</div> | |
| </td> | |
| <td data-label="Close Date"> | |
| <div class="slds-truncate" title="4/14/2015">4/14/2015</div> | |
| </td> | |
| <td data-label="Prospecting"> | |
| <div class="slds-truncate" title="Prospecting">Prospecting</div> | |
| </td> | |
| <td data-label="Confidence"> | |
| <div class="slds-truncate" title="20%">20%</div> | |
| </td> | |
| <td data-label="Amount"> | |
| <div class="slds-truncate" title="$25k">$25k</div> | |
| </td> | |
| <td data-label="Contact"> | |
| <div class="slds-truncate" title="[jrogers@cloudhub.com](mailto:jrogers@cloudhub.com)"><a href="javascript:void(0);" tabindex="0">[jrogers@cloudhub.com](mailto:jrogers@cloudhub.com)</a></div> | |
| </td> | |
| <td class="slds-cell-shrink" data-label="Actions"> | |
| <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" title="Show More"> | |
| <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true"> | |
| <use xmlns:xlink="[http://www.w3.org/1999/xlink](http://www.w3.org/1999/xlink)" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down" /> | |
| </svg> | |
| <span class="slds-assistive-text">Show More</span> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="slds-hint-parent"> | |
| <td data-label="Select Row"> | |
| <div class="slds-checkbox"> | |
| <input type="checkbox" name="options" id="checkbox-02" aria-labelledby="check-button-label-02 check-group-header" value="checkbox-02" /> | |
| <label class="slds-checkbox__label" for="checkbox-02" id="check-button-label-02"> | |
| <span class="slds-checkbox_faux"></span> | |
| <span class="slds-form-element__label slds-assistive-text">Select item 2</span> | |
| </label> | |
| </div> | |
| </td> | |
| <th data-label="Opportunity Name" scope="row"> | |
| <div class="slds-truncate" title="Cloudhub + Anypoint Connectors">Cloudhub + Anypoint Connectors</div> | |
| </th> | |
| <td data-label="Account Name"> | |
| <div class="slds-truncate" title="Cloudhub">Cloudhub</div> | |
| </td> | |
| <td data-label="Close Date"> | |
| <div class="slds-truncate" title="4/14/2015">4/14/2015</div> | |
| </td> | |
| <td data-label="Prospecting"> | |
| <div class="slds-truncate" title="Prospecting">Prospecting</div> | |
| </td> | |
| <td data-label="Confidence"> | |
| <div class="slds-truncate" title="20%">20%</div> | |
| </td> | |
| <td data-label="Amount"> | |
| <div class="slds-truncate" title="$25k">$25k</div> | |
| </td> | |
| <td data-label="Contact"> | |
| <div class="slds-truncate" title="[jrogers@cloudhub.com](mailto:jrogers@cloudhub.com)"><a href="javascript:void(0);" tabindex="0">[jrogers@cloudhub.com](mailto:jrogers@cloudhub.com)</a></div> | |
| </td> | |
| <td class="slds-cell-shrink" data-label="Actions"> | |
| <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" title="Show More"> | |
| <svg class="slds-button__icon slds-button__icon_hint slds-button__icon_small" aria-hidden="true"> | |
| <use xmlns:xlink="[http://www.w3.org/1999/xlink](http://www.w3.org/1999/xlink)" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down" /> | |
| </svg> | |
| <span class="slds-assistive-text">Show More</span> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </body> | |
| </html> | |
| /** | |
| * Responsive tables | |
| * | |
| * When a table exceeds the width of its container, one responsive option is to wrap the table in a `.slds-scrollable_x` class so that the user can scroll horizontally. View the example small and large form factor tabs to see the effect. | |
| * | |
| * When `.custom-max-large-table_stacked` is applied to the “Grid” table, we generate faux `<th>` labels using the `data-label` applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the **large form factor** breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal. | |
| * | |
| * When `.custom-max-large-table_stacked` is applied to the “Grid” table, we generate faux `<th>` labels using the `data-label` applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the **large form factor** breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal. | |
| * | |
| * @summary Creates stacked row with stacked cells | |
| * | |
| * @name responsive | |
| * @selector .custom-max-large-table_stacked | |
| * @restrict .slds-table | |
| * @variant | |
| * @layout responsive | |
| * @prototype | |
| */ | |
| @media (max-width: 64em) { | |
| .custom-max-large-table_stacked, | |
| .custom-max-large-table--stacked { | |
| border: 0; } | |
| .custom-max-large-table_stacked thead, | |
| .custom-max-large-table--stacked thead { | |
| /* stylelint-disable declaration-no-important */ | |
| position: absolute !important; | |
| margin: -1px !important; | |
| border: 0 !important; | |
| padding: 0 !important; | |
| width: 1px !important; | |
| height: 1px !important; | |
| overflow: hidden !important; | |
| clip: rect(0 0 0 0) !important; | |
| /* stylelint-enable declaration-no-important */ } | |
| .custom-max-large-table_stacked th, | |
| .custom-max-large-table--stacked th { | |
| border-top: 0; } | |
| .custom-max-large-table_stacked tr, | |
| .custom-max-large-table--stacked tr { | |
| display: block; | |
| border-top: 2px solid #dddbda; } | |
| .custom-max-large-table_stacked th, | |
| .custom-max-large-table_stacked td, | |
| .custom-max-large-table--stacked th, | |
| .custom-max-large-table--stacked td { | |
| display: block; | |
| padding: 0.75rem; | |
| max-width: 100%; | |
| width: 100%; | |
| clear: both; | |
| white-space: normal; | |
| overflow: hidden; | |
| text-align: left; } | |
| .custom-max-large-table_stacked th.slds-truncate, | |
| .custom-max-large-table_stacked td.slds-truncate, | |
| .custom-max-large-table--stacked th.slds-truncate, | |
| .custom-max-large-table--stacked td.slds-truncate { | |
| max-width: 100%; } | |
| .custom-max-large-table_stacked th:before, | |
| .custom-max-large-table_stacked td:before, | |
| .custom-max-large-table--stacked th:before, | |
| .custom-max-large-table--stacked td:before { | |
| font-size: 0.75rem; | |
| line-height: 1.25; | |
| color: #3e3e3c; | |
| text-transform: uppercase; | |
| letter-spacing: 0.0625rem; | |
| display: block; | |
| padding-bottom: 0.25rem; | |
| content: attr(data-label); } | |
| .custom-max-large-table_stacked tr > td:first-child, | |
| .custom-max-large-table_stacked tr > td:last-child, | |
| .custom-max-large-table--stacked tr > td:first-child, | |
| .custom-max-large-table--stacked tr > td:last-child { | |
| padding: 0.75rem; } | |
| .custom-max-large-table_stacked:not(.slds-no-row-hover) tbody tr:hover, | |
| .custom-max-large-table--stacked:not(.slds-no-row-hover) tbody tr:hover { | |
| /* stylelint-disable declaration-no-important */ | |
| /* stylelint-enable declaration-no-important */ } | |
| .custom-max-large-table_stacked:not(.slds-no-row-hover) tbody tr:hover td, | |
| .custom-max-large-table_stacked:not(.slds-no-row-hover) tbody tr:hover th, | |
| .custom-max-large-table--stacked:not(.slds-no-row-hover) tbody tr:hover td, | |
| .custom-max-large-table--stacked:not(.slds-no-row-hover) tbody tr:hover th { | |
| background-color: inherit !important; | |
| box-shadow: none !important; } | |
| .custom-max-large-table_stacked .slds-is-interactive .slds-button, | |
| .custom-max-large-table--stacked .slds-is-interactive .slds-button { | |
| visibility: visible; } | |
| .custom-max-large-table_stacked .slds-cell-shrink, | |
| .custom-max-large-table--stacked .slds-cell-shrink { | |
| width: auto; } } | |
| @media (max-width: 64em) { | |
| .custom-max-large-table_stacked td:before, | |
| .custom-max-large-table_stacked th:before, | |
| .custom-max-large-table--stacked td:before, | |
| .custom-max-large-table--stacked th:before { | |
| padding-bottom: 0.25rem; } } | |
| /** | |
| * @summary Creates stacked rows with horizontal cells | |
| * | |
| * @selector .custom-max-large-table_stacked-horizontal | |
| * @restrict .slds-table | |
| * @modifier | |
| * @layout responsive | |
| * @prototype | |
| */ | |
| @media (max-width: 64em) { | |
| .custom-max-large-table_stacked-horizontal, | |
| .custom-max-large-table--stacked-horizontal { | |
| border: 0; } | |
| .custom-max-large-table_stacked-horizontal thead, | |
| .custom-max-large-table--stacked-horizontal thead { | |
| /* stylelint-disable declaration-no-important */ | |
| position: absolute !important; | |
| margin: -1px !important; | |
| border: 0 !important; | |
| padding: 0 !important; | |
| width: 1px !important; | |
| height: 1px !important; | |
| overflow: hidden !important; | |
| clip: rect(0 0 0 0) !important; | |
| /* stylelint-enable declaration-no-important */ } | |
| .custom-max-large-table_stacked-horizontal th, | |
| .custom-max-large-table--stacked-horizontal th { | |
| border-top: 0; } | |
| .custom-max-large-table_stacked-horizontal tr, | |
| .custom-max-large-table--stacked-horizontal tr { | |
| display: block; | |
| border-top: 2px solid #dddbda; } | |
| .custom-max-large-table_stacked-horizontal th, | |
| .custom-max-large-table_stacked-horizontal td, | |
| .custom-max-large-table--stacked-horizontal th, | |
| .custom-max-large-table--stacked-horizontal td { | |
| display: block; | |
| padding: 0.75rem; | |
| max-width: 100%; | |
| width: 100%; | |
| clear: both; | |
| white-space: normal; | |
| overflow: hidden; | |
| text-align: left; } | |
| .custom-max-large-table_stacked-horizontal th.slds-truncate, | |
| .custom-max-large-table_stacked-horizontal td.slds-truncate, | |
| .custom-max-large-table--stacked-horizontal th.slds-truncate, | |
| .custom-max-large-table--stacked-horizontal td.slds-truncate { | |
| max-width: 100%; } | |
| .custom-max-large-table_stacked-horizontal th:before, | |
| .custom-max-large-table_stacked-horizontal td:before, | |
| .custom-max-large-table--stacked-horizontal th:before, | |
| .custom-max-large-table--stacked-horizontal td:before { | |
| font-size: 0.75rem; | |
| line-height: 1.25; | |
| color: #3e3e3c; | |
| text-transform: uppercase; | |
| letter-spacing: 0.0625rem; | |
| display: block; | |
| padding-bottom: 0.25rem; | |
| content: attr(data-label); } | |
| .custom-max-large-table_stacked-horizontal tr > td:first-child, | |
| .custom-max-large-table_stacked-horizontal tr > td:last-child, | |
| .custom-max-large-table--stacked-horizontal tr > td:first-child, | |
| .custom-max-large-table--stacked-horizontal tr > td:last-child { | |
| padding: 0.75rem; } | |
| .custom-max-large-table_stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover, | |
| .custom-max-large-table--stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover { | |
| /* stylelint-disable declaration-no-important */ | |
| /* stylelint-enable declaration-no-important */ } | |
| .custom-max-large-table_stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover td, | |
| .custom-max-large-table_stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover th, | |
| .custom-max-large-table--stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover td, | |
| .custom-max-large-table--stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover th { | |
| background-color: inherit !important; | |
| box-shadow: none !important; } | |
| .custom-max-large-table_stacked-horizontal .slds-is-interactive .slds-button, | |
| .custom-max-large-table--stacked-horizontal .slds-is-interactive .slds-button { | |
| visibility: visible; } | |
| .custom-max-large-table_stacked-horizontal .slds-cell-shrink, | |
| .custom-max-large-table--stacked-horizontal .slds-cell-shrink { | |
| width: auto; } } | |
| @media (max-width: 64em) { | |
| .custom-max-large-table_stacked-horizontal td, | |
| .custom-max-large-table--stacked-horizontal td { | |
| text-align: right; } | |
| .custom-max-large-table_stacked-horizontal td:before, | |
| .custom-max-large-table--stacked-horizontal td:before { | |
| float: left; | |
| margin-top: 0.125rem; } | |
| .custom-max-large-table_stacked-horizontal .slds-truncate, | |
| .custom-max-large-table--stacked-horizontal .slds-truncate { | |
| max-width: 100%; } } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment