Modern CSS Demos

Loading ...

:root {
    --btn-color: #ffffff;
    --btn-bg: #9c27b0;
    --btn-border-color: hsl(from var(--btn-bg) h s calc(l * 1.2));
    --btn-hover-color: var(--btn-color);
    --btn-hover-bg: hsl(from var(--btn-bg) h s calc(l * 1.1));
    --btn-hover-border-color: hsl(from var(--btn-bg) h s calc(l * 1.3));
    --btn-focus-color: var(--btn-color);
    --btn-focus-bg: hsl(from var(--btn-bg) h s calc(l * 1.2));
    --btn-focus-border-color: hsl(from var(--btn-bg) h s calc(l * 1.4));

--popover-color: #313131;
    --popover-bg: #fafafa;
    --popover-border-color: #cacaca;
    --popover-border-radius: .5rem;
    --popover-padding-y: 1.5rem;
    --popover-padding-x: 1.5rem;
    --popover-shadow: 0 0 5px 5px rgba(0, 0, 0, .25);
}

.container {
    text-align: center;
}

.btn {
    border: 2px solid transparent;
    border-radius: .25rem;
    padding: .5rem 1rem;
    font-size: 1.2rem;
    color: var(--btn-color);
    background: var(--btn-bg);
    border-color: var(--btn-border-color);
    cursor: pointer;

&:hover {
        color: var(--btn-hover-color);
        background: var(--btn-hover-bg);
        border-color: var(--btn-hover-border-color);
    }

&:focus {
        color: var(--btn-focus-color);
        background: var(--btn-focus-bg);
        border-color: var(--btn-focus-border-color);
    }
}

.popover {
    color: var(--popover-color);
    background: var(--popover-bg);
    border-radius: var(--popover-border-radius);
    padding: var(--popover-padding-y) var(--popover-padding-x);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, .15);
    border: 1px solid var(--popover-border-color);
    padding-inline-end: calc(var(--popover-padding-x) * 3);
    width: clamp(150px, 80vw, 600px);
}

.popover-close {
    position: absolute;
    top: calc(var(--popover-padding-y) / 2);
    inset-inline-end: calc(var(--popover-padding-x) / 2);
    height: calc(var(--popover-padding-x) * 1.5);
    width: calc(var(--popover-padding-y) * 1.5);
    background: transparent;
    margin: 0;
    padding: 0;
    border-radius: calc(var(--popover-border-radius) / 2);
    border: 1px solid transparent;
    cursor: pointer;
    filter: grayscale();

&:hover {
        border-color: var(--popover-border-color);
    }
}

.popover-content {
    *:first-child {
        margin-top: 0;
    }

*:last-child {
        margin-bottom: 0;
    }
}

.sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

<div class="popover" id="popover" popover>
    <button type="button" class="popover-close" popovertarget="popover" popovertargetaction="hide">
        <span aria-hidden="true">❌</span>
        <span class="sr-only">Close</span>
    </button>
    <div class="popover-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque tempus pulvinar. Vivamus tellus lacus, posuere quis justo eget, suscipit ultrices neque. Suspendisse potenti. Vestibulum ut sem non mauris semper lobortis. Donec quis quam lorem. Donec mattis consequat massa sed rhoncus. Duis vel tempor odio. Mauris sit amet est at felis viverra laoreet vitae ac enim. Donec accumsan purus nec tortor cursus congue.</p>
    </div>
</div>

<div class="form">
    <div class="form-section">
        <label for="popoverMode">popover:</label>
        <select
            id="popoverMode"
            data-trigger="change"
            data-target="#popover"
            data-attribute="popover"
        >
                <option value="auto">auto</option>
                <option value="manual">manual</option>
        </select>
    </div>
</div>

Zoom

Document

Container