UNPKG

7.68 kBJavaScriptView Raw
1import { r as registerInstance, h, e as Host } from './index-d4feb066.js';
2
3const dividerCss = ".is-divider,.is-divider-vertical{display:block;position:relative;border-top:0.1rem solid #dbdbdb;height:0.1rem;margin:2rem 0;text-align:center}.is-divider[data-content]::after,.is-divider-vertical[data-content]::after{background:white;color:#b5b5b5;content:attr(data-content);display:inline-block;font-size:0.75rem;padding:0.4rem 0.8rem;-webkit-transform:translateY(-1.1rem);-ms-transform:translateY(-1.1rem);transform:translateY(-1.1rem);text-align:center}@media screen and (min-width: 769px), print{.is-divider-vertical{display:block;-ms-flex:none;flex:none;width:auto;height:auto;padding:2rem;margin:0;position:relative;border-top:none;min-height:2rem}.is-divider-vertical::before{border-left:0.1rem solid #dbdbdb;bottom:1rem;content:\"\";display:block;left:50%;position:absolute;top:1rem;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.is-divider-vertical[data-content]::after{position:absolute;left:50%;top:50%;padding:0.1rem;-webkit-transform:translateY(-50%) translateX(-50%);-ms-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%)}}.is-divider.is-white,.is-divider-vertical.is-white{border-top-color:white}.is-divider.is-white[data-content]::after,.is-divider-vertical.is-white[data-content]::after{background:#0a0a0a;color:white}.is-divider.is-white::before,.is-divider-vertical.is-white::before{border-left-color:white}.is-divider.is-black,.is-divider-vertical.is-black{border-top-color:#0a0a0a}.is-divider.is-black[data-content]::after,.is-divider-vertical.is-black[data-content]::after{background:white;color:#0a0a0a}.is-divider.is-black::before,.is-divider-vertical.is-black::before{border-left-color:#0a0a0a}.is-divider.is-light,.is-divider-vertical.is-light{border-top-color:whitesmoke}.is-divider.is-light[data-content]::after,.is-divider-vertical.is-light[data-content]::after{background:rgba(0, 0, 0, 0.7);color:whitesmoke}.is-divider.is-light::before,.is-divider-vertical.is-light::before{border-left-color:whitesmoke}.is-divider.is-dark,.is-divider-vertical.is-dark{border-top-color:#363636}.is-divider.is-dark[data-content]::after,.is-divider-vertical.is-dark[data-content]::after{background:#fff;color:#363636}.is-divider.is-dark::before,.is-divider-vertical.is-dark::before{border-left-color:#363636}.is-divider.is-primary,.is-divider-vertical.is-primary{border-top-color:#5851ff}.is-divider.is-primary[data-content]::after,.is-divider-vertical.is-primary[data-content]::after{background:#fff;color:#5851ff}.is-divider.is-primary::before,.is-divider-vertical.is-primary::before{border-left-color:#5851ff}.is-divider.is-link,.is-divider-vertical.is-link{border-top-color:#5851ff}.is-divider.is-link[data-content]::after,.is-divider-vertical.is-link[data-content]::after{background:#fff;color:#5851ff}.is-divider.is-link::before,.is-divider-vertical.is-link::before{border-left-color:#5851ff}.is-divider.is-info,.is-divider-vertical.is-info{border-top-color:#3298dc}.is-divider.is-info[data-content]::after,.is-divider-vertical.is-info[data-content]::after{background:#fff;color:#3298dc}.is-divider.is-info::before,.is-divider-vertical.is-info::before{border-left-color:#3298dc}.is-divider.is-success,.is-divider-vertical.is-success{border-top-color:#48c774}.is-divider.is-success[data-content]::after,.is-divider-vertical.is-success[data-content]::after{background:#fff;color:#48c774}.is-divider.is-success::before,.is-divider-vertical.is-success::before{border-left-color:#48c774}.is-divider.is-warning,.is-divider-vertical.is-warning{border-top-color:#ffdd57}.is-divider.is-warning[data-content]::after,.is-divider-vertical.is-warning[data-content]::after{background:rgba(0, 0, 0, 0.7);color:#ffdd57}.is-divider.is-warning::before,.is-divider-vertical.is-warning::before{border-left-color:#ffdd57}.is-divider.is-danger,.is-divider-vertical.is-danger{border-top-color:#f14668}.is-divider.is-danger[data-content]::after,.is-divider-vertical.is-danger[data-content]::after{background:#fff;color:#f14668}.is-divider.is-danger::before,.is-divider-vertical.is-danger::before{border-left-color:#f14668}.is-divider.is-black-bis,.is-divider-vertical.is-black-bis{border-top-color:#121212}.is-divider.is-black-bis[data-content]::after,.is-divider-vertical.is-black-bis[data-content]::after{background:#fff;color:#121212}.is-divider.is-black-bis::before,.is-divider-vertical.is-black-bis::before{border-left-color:#121212}.is-divider.is-black-ter,.is-divider-vertical.is-black-ter{border-top-color:#242424}.is-divider.is-black-ter[data-content]::after,.is-divider-vertical.is-black-ter[data-content]::after{background:#fff;color:#242424}.is-divider.is-black-ter::before,.is-divider-vertical.is-black-ter::before{border-left-color:#242424}.is-divider.is-grey-darker,.is-divider-vertical.is-grey-darker{border-top-color:#363636}.is-divider.is-grey-darker[data-content]::after,.is-divider-vertical.is-grey-darker[data-content]::after{background:#fff;color:#363636}.is-divider.is-grey-darker::before,.is-divider-vertical.is-grey-darker::before{border-left-color:#363636}.is-divider.is-grey-dark,.is-divider-vertical.is-grey-dark{border-top-color:#4a4a4a}.is-divider.is-grey-dark[data-content]::after,.is-divider-vertical.is-grey-dark[data-content]::after{background:#fff;color:#4a4a4a}.is-divider.is-grey-dark::before,.is-divider-vertical.is-grey-dark::before{border-left-color:#4a4a4a}.is-divider.is-grey,.is-divider-vertical.is-grey{border-top-color:#7a7a7a}.is-divider.is-grey[data-content]::after,.is-divider-vertical.is-grey[data-content]::after{background:#fff;color:#7a7a7a}.is-divider.is-grey::before,.is-divider-vertical.is-grey::before{border-left-color:#7a7a7a}.is-divider.is-grey-light,.is-divider-vertical.is-grey-light{border-top-color:#b5b5b5}.is-divider.is-grey-light[data-content]::after,.is-divider-vertical.is-grey-light[data-content]::after{background:#fff;color:#b5b5b5}.is-divider.is-grey-light::before,.is-divider-vertical.is-grey-light::before{border-left-color:#b5b5b5}.is-divider.is-grey-lighter,.is-divider-vertical.is-grey-lighter{border-top-color:#dbdbdb}.is-divider.is-grey-lighter[data-content]::after,.is-divider-vertical.is-grey-lighter[data-content]::after{background:rgba(0, 0, 0, 0.7);color:#dbdbdb}.is-divider.is-grey-lighter::before,.is-divider-vertical.is-grey-lighter::before{border-left-color:#dbdbdb}.is-divider.is-white-ter,.is-divider-vertical.is-white-ter{border-top-color:whitesmoke}.is-divider.is-white-ter[data-content]::after,.is-divider-vertical.is-white-ter[data-content]::after{background:rgba(0, 0, 0, 0.7);color:whitesmoke}.is-divider.is-white-ter::before,.is-divider-vertical.is-white-ter::before{border-left-color:whitesmoke}.is-divider.is-white-bis,.is-divider-vertical.is-white-bis{border-top-color:#fafafa}.is-divider.is-white-bis[data-content]::after,.is-divider-vertical.is-white-bis[data-content]::after{background:rgba(0, 0, 0, 0.7);color:#fafafa}.is-divider.is-white-bis::before,.is-divider-vertical.is-white-bis::before{border-left-color:#fafafa}";
4
5const Divider = class {
6 constructor(hostRef) {
7 registerInstance(this, hostRef);
8 /**
9 * CSS Classes
10 */
11 this.content = '';
12 /**
13 * Orientation
14 */
15 this.orientation = 'is-horizontal';
16 }
17 render() {
18 return (h(Host, { class: {
19 'is-divider': this.orientation === 'is-horizontal',
20 'is-divider-vertical': this.orientation === 'is-vertical',
21 }, "data-content": this.content }));
22 }
23};
24Divider.style = dividerCss;
25
26export { Divider as bm_divider };