# tableberg/1.1.5/src/preview/cell/ribbon.scss

Tableberg – Simple Gutenberg Table Block, version 1.1.5. 147 lines.

- Page: https://pluginprobe.com/plugins/tableberg/1.1.5/code/src/preview/cell/ribbon.scss
- Raw: https://pluginprobe.com/plugins/tableberg/1.1.5/raw/src/preview/cell/ribbon.scss
- Modified: 2026-09-16T03:30:32+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/tableberg/1.1.5/code/src/preview/cell/ribbon.scss#L10-L20`.

```scss
.tableberg-ribbon {
    position: absolute !important;
    text-align: center;
    pointer-events: auto;
    cursor: pointer;
    z-index: 10;

    &.is-selected {
        outline: 2px solid var(--wp-admin-theme-color, #007cba);
        outline-offset: 2px;
    }

    &-corner {
        overflow: hidden;
        top: -3px;
        font-weight: bold;

        &-left,
        &-right {
            position: relative;
            height: 100%;
            width: 100%;
        }
        &-left {
            transform: rotate(-45deg);
        }
        &-right {
            transform: rotate(45deg);
        }

        &-text {
            position: absolute;
            bottom: 50%;
            width: 150%;
            left: -25%;
            padding: 2px calc(25% + 2px);
            box-sizing: border-box;
            overflow: hidden;
            box-shadow: 0 0 5px gray;
        }
    }

    &-bookmark {
        position: absolute;
        z-index: 9999;
        border-radius: 5px;
        filter: drop-shadow(4px 3px 11px rgba(0, 0, 0, 0.2));

        &-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 150%;
            border-top-left-radius: inherit;
            border-top-right-radius: inherit;
            clip-path: polygon(100% 0, 100% 100%, 50% 67%, 0 100%, 0 0);
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 8px;
            box-sizing: border-box;
        }
    }

    &-icon {
        filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));

        .tableberg-shape {
            &-up {
                clip-path: polygon(
                    0 0,
                    100% 0,
                    100% 100%,
                    50% calc(100% - 8px),
                    0 100%
                );
            }
            &-down {
                clip-path: polygon(
                    0 0,
                    100% 0,
                    100% calc(100% - 8px),
                    50% 100%,
                    0 calc(100% - 8px)
                );
            }

            &-slant-up {
                clip-path: polygon(
                    0 0,
                    100% 0,
                    100% calc(100% - 12px),
                    50% calc(100% - 6px),
                    0 100%
                );
            }

            &-slant-down {
                clip-path: polygon(
                    0 0,
                    100% 0,
                    100% 100%,
                    50% calc(100% - 6px),
                    0 calc(100% - 12px)
                );
            }
        }
    }

    &-side {
        &-left &-content {
            border-radius: 10px 0 10px 0;
        }
        &-right &-content {
            border-radius: 0 10px 0 10px;
        }

        &-shadow {
            height: 0;
            width: 0;
            border: 10px solid transparent;
            border-top-color: gray;
        }

        &-right {
            text-align: right;
        }

        &-left &-shadow {
            border-right-color: gray;
        }
        &-right &-shadow {
            border-left-color: gray;
            margin-left: auto;
        }
    }

    &-badge {
        position: absolute;
        z-index: 9999;
        &-content {
            width: max-content;
        }
    }
}

```