@pacem/pacem-theme-less 1.0.0-amaldi

package/pacem/ui/dark/tabs.less

@@ -0,0 +1,423 @@
+@import "../shared";
+
+@_h_tab: @grid_spacing * 1.5;
+@_clr_tab: @color_tab_back;
+@_clr_brd_tab: @color_border;
+@_brd_tab: @border_tab;
+
+@{P}-tabs {
+    display: block;
+    //position: relative;
+
+    @{P}-tab {
+        display: none;
+        opacity: 0;
+        pointer-events: none;
+
+        &.tab-out,
+        &.tab-in,
+        &.tab-focus {
+            display: block;
+        }
+
+        &.tab-previous {
+            transform: translateX(-@grid_spacing);
+        }
+
+        &.tab-next {
+            transform: translateX(@grid_spacing);
+        }
+
+        &.tab-focus,
+        &.@{PCSS}-tab-focus {
+            pointer-events: auto;
+            opacity: 1;
+            transform: none; // translateX(0) translateY(0) translateZ(0);
+        }
+    }
+
+    .@{PCSS}-tabs-content {
+        background: @_clr_tab;
+        padding: @grid_spacing;
+        border-radius: @border_radius;
+        border: @_brd_tab solid @_clr_brd_tab;
+        z-index: 0;
+        overflow: hidden;
+        display: grid;
+
+        > @{P}-tab {
+            grid-column: 1;
+            grid-row: 1;
+            align-self: start;
+            overflow: auto;
+        }
+        /* #region unused */
+
+        .tab-heading {
+            padding: 0 0 @grid_spacing/2 0;
+            margin: 0;
+        }
+
+        .tab-body,
+        .tab-footer {
+            padding: @grid_spacing/2 0;
+            color: fade(@color_default, 80);
+            line-height: 1.3333;
+        }
+
+        .tab-heading, .tab-body, .tab-footer {
+            &:last-child {
+                padding-bottom: 0;
+            }
+        }
+
+        .tab-heading {
+            line-height: 1.1;
+            .FontMain(1.5);
+            min-height: @grid_spacing;
+
+            &.heading-bigger {
+                .FontMainSize(2);
+            }
+
+            h1, h2, h3, h4, h5, h6 {
+                font-size: 1em;
+                margin: 0;
+                padding: 0;
+                line-height: 1;
+            }
+        }
+
+        .tab-heading when (@shadows = true) {
+            text-shadow: 0 2px 5px rgba(0,0,0,0.5);
+        }
+
+        .tab-heading when (@uppercase_headings = true) {
+            text-transform: uppercase;
+
+            h1, h2, h3, h4, h5, h6 {
+                font-weight: normal;
+            }
+        }
+        /* #endregion */
+    }
+    /*.@{PCSS}-tabs-content {
+        z-index: 1;
+    }
+
+    .@{PCSS}-tabs-adapter {
+        z-index: 0;
+    }*/
+    &.rise,
+    &.tabs-rise {
+
+        &when(@dark_theme = true) {
+
+            .@{PCSS}-tabs-content {
+                box-shadow: 0 4px 16px rgba(0,0,0,0.125);
+            }
+
+            .@{PCSS}-tabs.tabs-vertical {
+
+                @{P}-button.@{PCSS}-adapter-page.@{PCSS}-adapter-active {
+                    box-shadow: -2px 2px 4px rgba(0,0,0,0.125);
+                }
+            }
+        }
+
+        &when(@dark_theme = false) {
+
+            .@{PCSS}-tabs-content {
+                box-shadow: 0 2px 24px rgba(0,0,0,0.075);
+            }
+
+            .@{PCSS}-tabs.tabs-vertical {
+
+                @{P}-button.@{PCSS}-adapter-page.@{PCSS}-adapter-active {
+                    box-shadow: -2px 2px 4px rgba(0,0,0,0.05);
+                }
+            }
+        }
+    }
+
+    &.tabs-flat {
+        .@{PCSS}-tabs-content {
+            box-shadow: none;
+            background: none;
+            border: none;
+            padding-left: ~"var(--@{PCSS}-size-1)";
+            padding-right: $padding-left;
+        }
+
+        .@{PCSS}-tabs.tabs-vertical {
+
+            @{P}-button.@{PCSS}-adapter-page.@{PCSS}-adapter-active {
+                box-shadow: none;
+            }
+        }
+    }
+
+    &.tabs-no-ypad {
+        .@{PCSS}-tabs-content {
+            padding-top: 0;
+            padding-bottom: 0;
+        }
+    }
+
+    &.tabs-no-xpad {
+        .@{PCSS}-tabs-content {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+
+    &.tabs-nopad {
+        .@{PCSS}-tabs-content {
+            padding: 0;
+        }
+    }
+}
+
+@_s_btn: @grid_spacing;
+
+// tabs (header)
+@{P}-tabs {
+
+    .@{PCSS}-tabs {
+
+        @{P}-adapter.@{PCSS}-tabs-adapter {
+
+            .@{PCSS}-adapter-dashboard {
+                list-style-type: none;
+                display: flex;
+                flex-direction: row;
+                align-items: flex-start;
+                margin: 0 0 0 round(2 * @_h_tab);
+                padding: 0;
+                clear: right;
+
+                > li {
+
+                    > @{P}-button.@{PCSS}-adapter-page {
+                        padding: @grid_spacing/6 @grid_spacing/2 0 @grid_spacing/2;
+                        margin: 0;
+                        background-color: transparent;
+                        height: @_h_tab;
+                        box-sizing: border-box;
+                        border-top-left-radius: @border_radius;
+                        border-top-right-radius: @border_radius;
+
+                        &.@{PCSS}-disabled {
+                            box-shadow: none;
+                        }
+
+                        > @{P}-span {
+                            display: block;
+                            box-sizing: border-box;
+                            height: @_h_tab - @grid_spacing/6;
+                            line-height: @_h_tab - @grid_spacing/6;
+                            margin: 0 @grid_spacing/2;
+                            border-bottom: 1px solid transparent;
+                            transition: border-color .3s linear;
+
+                            > span {
+                                display: block;
+                            }
+                        }
+
+                        &.@{PCSS}-adapter-active {
+                            background-color: @_clr_tab;
+                            border-top: @_brd_tab solid @_clr_brd_tab;
+                            border-right: @_brd_tab solid @_clr_brd_tab;
+                            border-left: @_brd_tab solid @_clr_brd_tab;
+                            border-bottom: 0;
+                            z-index: 1;
+                            transform: translateY(@_brd_tab);
+
+                            > @{P}-span {
+                                border-color: @color_tab_highlight;
+                                //background-color: @color_teal;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .@{PCSS}-adapter-next,
+            .@{PCSS}-adapter-previous {
+                font-size: 0;
+                float: left;
+                height: @_h_tab;
+                line-height: @_h_tab;
+                display: block;
+                width: @_h_tab;
+                background-color: transparent;
+                margin: 0;
+            }
+
+            .@{PCSS}-adapter-next::before {
+                .Icon('chevron_right', @_s_btn);
+            }
+
+            .@{PCSS}-adapter-previous::before {
+                .Icon('chevron_left', @_s_btn);
+            }
+
+            .@{PCSS}-adapter-next,
+            .@{PCSS}-adapter-previous {
+
+                &::before {
+                    left: 0;
+                    width: 100%;
+                    line-height: @_h_tab;
+                }
+            }
+        }
+
+        &.tabs-vertical {
+            display: flex;
+            flex-direction: row;
+
+            @{P}-adapter.@{PCSS}-tabs-adapter {
+                flex-basis: @grid_cell * 2;
+                flex-grow: 0;
+                flex-shrink: 0;
+                /*> @{P}-panel:last-child {
+                    // overlap border-size (1px) on content
+                    transform: translateX(1px);
+                }*/
+
+                .@{PCSS}-adapter-dashboard {
+                    display: block;
+                    margin: 2 * @_s_btn 0 0 0;
+
+                    > li {
+                        display: list-item;
+
+                        > @{P}-button.@{PCSS}-adapter-page {
+                            padding: @grid_spacing/4 0 @grid_spacing/4 @grid_spacing/2;
+                            display: block;
+                            border-bottom-left-radius: @border_radius;
+                            border-top-right-radius: 0;
+
+                            > @{P}-span {
+                                display: block;
+                                text-align: left;
+                                margin: 0;
+                                padding: 0 @grid_spacing/2 0 0;
+                                height: @_h_tab - 2 * @grid_spacing/4;
+                                line-height: @_h_tab - 2 * @grid_spacing/4;
+                                border-bottom: none;
+                                border-right: 1px solid transparent;
+                            }
+
+                            &.@{PCSS}-adapter-active {
+                                border-top: @_brd_tab solid @_clr_brd_tab;
+                                border-bottom: @_brd_tab solid @_clr_brd_tab;
+                                border-left: @_brd_tab solid @_clr_brd_tab;
+                                border-right: 0;
+                                z-index: 1;
+                                transform: translateX(@_brd_tab);
+
+                                > @{P}-span {
+                                    border-color: @color_tab_highlight;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .@{PCSS}-adapter-next,
+                .@{PCSS}-adapter-previous {
+                    margin-left: @grid_spacing/2;
+                    margin-bottom: 0;
+                    margin-right: 0;
+
+                    &::before {
+                        position: static;
+                    }
+                }
+
+                .@{PCSS}-adapter-next::before {
+                    content: 'keyboard_arrow_down';
+                }
+
+                .@{PCSS}-adapter-previous::before {
+                    content: 'keyboard_arrow_up';
+                }
+            }
+
+            .@{PCSS}-tabs-content {
+                flex-grow: 1;
+            }
+        }
+    }
+
+    &.tabs-flat {
+        > .@{PCSS}-tabs {
+
+            @{P}-adapter.@{PCSS}-tabs-adapter {
+
+                .@{PCSS}-adapter-dashboard {
+                    > li {
+
+                        > @{P}-button.@{PCSS}-adapter-page {
+                            &.@{PCSS}-adapter-active {
+                                background: none;
+                                border: none;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &.tabs-rise {
+
+        @_brd_rise: 1px;
+
+        .@{PCSS}-tabs-content,
+        .@{PCSS}-tabs @{P}-adapter.@{PCSS}-tabs-adapter .@{PCSS}-adapter-dashboard > li > @{P}-button.@{PCSS}-adapter-page.@{PCSS}-adapter-active {
+            border: @_brd_rise solid;
+            border-top-color: @color_border_light;
+            border-left-color: @color_border_dawn;
+            border-right-color: @color_border_dusk;
+        }
+
+        .@{PCSS}-tabs-content {
+            border-bottom-color: @color_border_dark;
+        }
+
+        .@{PCSS}-tabs @{P}-adapter.@{PCSS}-tabs-adapter .@{PCSS}-adapter-dashboard > li > @{P}-button.@{PCSS}-adapter-page.@{PCSS}-adapter-active {
+            border-bottom: 0;
+            transform: translateY(@_brd_rise);
+        }
+
+        > .@{PCSS}-tabs.tabs-vertical {
+            @{P}-adapter.@{PCSS}-tabs-adapter .@{PCSS}-adapter-dashboard > li > @{P}-button.@{PCSS}-adapter-page.@{PCSS}-adapter-active {
+                border: @_brd_rise solid;
+                border-top-color: @color_border_light;
+                border-bottom-color: @color_border_dark;
+                border-left-color: @color_border_dawn;
+                border-right: 0;
+            }
+
+            @{P}-adapter.@{PCSS}-tabs-adapter .@{PCSS}-adapter-dashboard > li > @{P}-button.@{PCSS}-adapter-page.@{PCSS}-adapter-active {
+                transform: translateX(@_brd_rise);
+            }
+        }
+    }
+}
+
+@{P}-tab::part(label) {
+    .Inert();
+}
+// animations
+.@{PCSS}-animations {
+    @{P}-tabs {
+        @{P}-tab {
+            transition: opacity .2s, transform .2s @easing_out_sine;
+        }
+    }
+}

package/pacem/ui/dark/ticker.less

@@ -0,0 +1,173 @@
+@import "../shared";
+
+@{P}-ticker {
+    display: inline-grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    overflow: hidden;
+
+    &::part(ticker-outgoing),
+    &::part(ticker-incoming) {
+        // display: block;
+        /*width: 100%;
+        height: 100%;*/
+        grid-area: ~"1/1";
+    }
+
+    &::part(ticker-outgoing) {
+        transform: none;
+        z-index: 1;
+    }
+
+    &::part(ticker-incoming) {
+        transform: translateX(100%);
+        opacity: 0;
+        z-index: 0;
+    }
+
+    &.ticking {
+
+        &::part(ticker-outgoing) {
+            transform: translateX(-100%);
+            opacity: 0;
+        }
+
+        &::part(ticker-incoming) {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+    // transitions IN
+    // 1. bottom -> top
+    &.ticker-bottom-in {
+
+        &::part(ticker-incoming) {
+            transform: translateY(100%);
+        }
+
+        &::part(ticker-outgoing) {
+            transform: translateY(0);
+        }
+
+        &.ticking {
+            &::part(ticker-incoming) {
+                transform: translateY(0);
+            }
+            // default combo with top-out
+            &::part(ticker-outgoing) {
+                transform: translateY(-100%);
+            }
+        }
+    }
+    // 2. top -> bottom
+    &.ticker-top-in {
+
+        &::part(ticker-incoming) {
+            transform: translateY(-100%);
+        }
+
+        &::part(ticker-outgoing) {
+            transform: translateY(0);
+        }
+
+        &.ticking {
+            &::part(ticker-incoming) {
+                transform: translateY(0);
+            }
+            // default combo with bottom-out
+            &::part(ticker-outgoing) {
+                transform: translateY(100%);
+            }
+        }
+    }
+    // 3. left -> right
+    &.ticker-left-in {
+
+        &::part(ticker-incoming) {
+            transform: translateX(-100%);
+        }
+
+        &::part(ticker-outgoing) {
+            transform: translateX(0);
+        }
+
+        &.ticking {
+            &::part(ticker-incoming) {
+                transform: translateX(0);
+            }
+            // default combo with right-out
+            &::part(ticker-outgoing) {
+                transform: translateX(100%);
+            }
+        }
+    }
+    // 4. right -> left (default)
+    &.ticker-right-in {
+    }
+
+    &.ticker-left-out {
+    }
+    // transitions out
+    // 1. -> top
+    &.ticker-top-out {
+
+        &::part(ticker-outgoing) {
+            transform: translateY(0);
+        }
+
+        &.ticking {
+            &::part(ticker-outgoing) {
+                transform: translateY(-100%);
+            }
+        }
+    }
+    // 2 -> bottom
+    &.ticker-bottom-out {
+
+        &::part(ticker-outgoing) {
+            transform: translateY(0);
+        }
+
+        &.ticking {
+            &::part(ticker-outgoing) {
+                transform: translateY(100%);
+            }
+        }
+    }
+    // 3 -> right
+    &.ticker-right-out {
+
+        &::part(ticker-outgoing) {
+            transform: translateX(0);
+        }
+
+        &.ticking {
+            &::part(ticker-outgoing) {
+                transform: translateX(100%);
+            }
+        }
+    }
+    // 4 -> left
+    &.ticker-left-out {
+
+        &::part(ticker-outgoing) {
+            transform: translateX(0);
+        }
+
+        &.ticking {
+            &::part(ticker-outgoing) {
+                transform: translateX(-100%);
+            }
+        }
+    }
+}
+
+// animations
+.@{PCSS}-animations {
+    @{P}-ticker.ticking {
+        &::part(ticker-outgoing),
+        &::part(ticker-incoming) {
+            transition: all @easing_in_out_sine .3s;
+        }
+    }
+}