Added minimal functionality for Robot teaching
- Added minimal HMI - Added possibility to open and close all chamber doors
This commit is contained in:
@@ -0,0 +1,51 @@
|
||||
declare abstract class CallbackCollectionBase<C extends (...args: any[]) => any> {
|
||||
protected __callbacks: Set<C>;
|
||||
/**
|
||||
* Adds a callback.
|
||||
* @param callback The callback to add.
|
||||
*/
|
||||
add(callback: C): DestroyFunction;
|
||||
/**
|
||||
* Removes the callback.
|
||||
* @param callback The callback to remove.
|
||||
*/
|
||||
remove(callback: C): void;
|
||||
/**
|
||||
* Removes all callbacks.
|
||||
*/
|
||||
clear(): void;
|
||||
/**
|
||||
* Returns a frozen object containig the add and remove methods. Useful for exposing these methods to the public
|
||||
* without also exposing the trigger method.
|
||||
*/
|
||||
getManipulators(): Readonly<{
|
||||
add: (callback: C) => DestroyFunction;
|
||||
remove: (callback: C) => void;
|
||||
}>;
|
||||
}
|
||||
/**
|
||||
* A collection of callbacks.
|
||||
*/
|
||||
export declare class CallbackCollection<C extends (...args: any[]) => any> extends CallbackCollectionBase<C> {
|
||||
/**
|
||||
* Calls all registered callbacks with the provided arguments.
|
||||
* @param args The parametes for the callback invocations.
|
||||
*/
|
||||
trigger(...args: Parameters<C>): PromiseSettledResult<ReturnType<C>>[];
|
||||
}
|
||||
/**
|
||||
* A collection of asynchronous callbacks.
|
||||
*/
|
||||
export declare class AsyncCallbackCollection<C extends (...args: any[]) => Promise<any>> extends CallbackCollectionBase<C> {
|
||||
/**
|
||||
* Calls all registered callbacks with the provided arguments.
|
||||
* @param args The parametes for the callback invocations.
|
||||
*/
|
||||
trigger(...args: Parameters<C>): Promise<PromiseSettledResult<Awaited<ReturnType<C>>>[]>;
|
||||
}
|
||||
/**
|
||||
* A function that removes the callback from the collection when called.
|
||||
*/
|
||||
type DestroyFunction = () => void;
|
||||
export {};
|
||||
//# sourceMappingURL=CallbackCollection.d.ts.map
|
||||
@@ -0,0 +1 @@
|
||||
class CallbackCollectionBase{__callbacks=new Set;add(callback){return this.__callbacks.add(callback),()=>this.remove(callback)}remove(callback){this.__callbacks.delete(callback)}clear(){this.__callbacks.clear()}getManipulators(){return Object.freeze({add:this.add.bind(this),remove:this.remove.bind(this)})}}export class CallbackCollection extends CallbackCollectionBase{trigger(...args){const result=[];for(const callback of this.__callbacks)try{result.push({status:"fulfilled",value:callback(...args)})}catch(error){result.push({status:"rejected",reason:error})}return result}}export class AsyncCallbackCollection extends CallbackCollectionBase{trigger(...args){let promises=[];for(const callback of this.__callbacks)try{promises.push(callback(...args))}catch(error){promises.push(Promise.reject(error instanceof Error?error:new Error("string"==typeof error?error:void 0)))}return Promise.allSettled(promises)}}
|
||||
@@ -0,0 +1,215 @@
|
||||
tchmi-content-tabs {
|
||||
display: block;
|
||||
border-radius: inherit;
|
||||
}
|
||||
/* tab links*/
|
||||
tchmi-content-tabs tchmi-tab-links {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
height: 50px;
|
||||
border-radius: inherit;
|
||||
overflow: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
@supports not (scrollbar-width: none) {
|
||||
tchmi-content-tabs tchmi-tab-links::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links tchmi-tab-link,
|
||||
tchmi-content-tabs tchmi-tab-links tchmi-tab-links-overflow,
|
||||
tchmi-content-tabs-dropdown tchmi-tab-link {
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links tchmi-tab-links-overflow {
|
||||
padding: 0 32px 0 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Left'] > tchmi-tab-links > tchmi-tab-link,
|
||||
tchmi-content-tabs[tab-alignment='Right'] > tchmi-tab-links > tchmi-tab-link,
|
||||
tchmi-content-tabs[tab-alignment='Left'] > tchmi-tab-links > tchmi-tab-links-overflow,
|
||||
tchmi-content-tabs[tab-alignment='Right'] > tchmi-tab-links > tchmi-tab-links-overflow {
|
||||
overflow: hidden;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links tchmi-tab-links-overflow.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links > tchmi-tab-link[active] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links > tchmi-tab-link[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
/* tab contents */
|
||||
tchmi-content-tabs > tchmi-tab-contents {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
padding: 12px 20px 20px 20px;
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-contents[use-max-content] {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-contents tchmi-tab-content {
|
||||
box-sizing: border-box;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-contents[use-max-content] > tchmi-tab-content {
|
||||
grid-row-start: 1;
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-contents:not([use-max-content]) > tchmi-tab-content:not([active]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-contents[use-max-content] > tchmi-tab-content:not([active]) {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
/* tab alignment */
|
||||
tchmi-content-tabs[tab-alignment='Left'] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Left'] > tchmi-tab-links,
|
||||
tchmi-content-tabs[tab-alignment='Right'] > tchmi-tab-links {
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Right'] {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Bottom'] {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
tchmi-content-tabs-dropdown {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
tchmi-content-tabs-dropdown tchmi-tab-link {
|
||||
height: 50px;
|
||||
min-height: 50px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Top'] > tchmi-tab-links > tchmi-tab-link:first-child {
|
||||
border-top-left-radius: inherit;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Top'] > tchmi-tab-links > tchmi-tab-link:last-child,
|
||||
tchmi-content-tabs[tab-alignment='Top'] > tchmi-tab-links > tchmi-tab-links-overflow:last-child {
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Left'] > tchmi-tab-links > tchmi-tab-link:first-child {
|
||||
border-top-left-radius: inherit;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Left'] > tchmi-tab-links > tchmi-tab-link:last-child,
|
||||
tchmi-content-tabs[tab-alignment='Left'] > tchmi-tab-links > tchmi-tab-links-overflow:last-child {
|
||||
border-bottom-left-radius: inherit;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Right'] > tchmi-tab-links > tchmi-tab-link:first-child {
|
||||
border-top-right-radius: inherit;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Right'] > tchmi-tab-links > tchmi-tab-link:last-child,
|
||||
tchmi-content-tabs[tab-alignment='Right'] > tchmi-tab-links > tchmi-tab-links-overflow:last-child {
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Bottom'] > tchmi-tab-links > tchmi-tab-link:first-child {
|
||||
border-bottom-left-radius: inherit;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Bottom'] > tchmi-tab-links > tchmi-tab-link:last-child,
|
||||
tchmi-content-tabs[tab-alignment='Bottom'] > tchmi-tab-links > tchmi-tab-links-overflow:last-child {
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Top'] > tchmi-tab-contents {
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Left'] > tchmi-tab-contents {
|
||||
border-top-right-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Right'] > tchmi-tab-contents {
|
||||
border-top-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[tab-alignment='Bottom'] > tchmi-tab-contents {
|
||||
border-top-right-radius: inherit;
|
||||
border-top-left-radius: inherit;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[disabled]::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*background-color: rgba(255, 255, 255, 0.5); color is defined in theme css*/
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links.scroll {
|
||||
width: calc(100% - 60px);
|
||||
position: relative;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
tchmi-content-tabs .tchmi-scroll-shadow-host {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
// Compatibility file for non-module typescript compiles without adjustments.
|
||||
// Use the following line for modern code (needs adjustments to tsconfig.json#configOptions/paths)
|
||||
// import { TcHmiControl } from "Beckhoff.TwinCAT.HMI.Framework/index.esm.js";
|
||||
// ***************************************************************************
|
||||
/**
|
||||
* How to use
|
||||
* HTML example
|
||||
<tchmi-content-tabs>
|
||||
<tchmi-tab-links>
|
||||
<tchmi-tab-link active ref="Tab2">Header 2</tchmi-tab-link>
|
||||
<tchmi-tab-link ref="Tab1">Header 1</tchmi-tab-link>
|
||||
</tchmi-tab-links>
|
||||
<tchmi-tab-contents>
|
||||
<tchmi-tab-content name="Tab1">Content 1</tchmi-tab-content>
|
||||
<tchmi-tab-content active name="Tab2">Content 2</tchmi-tab-content>
|
||||
<tchmi-tab-content name="Unused"></tchmi-tab-content>
|
||||
</tchmi-tab-contents>
|
||||
</tchmi-content-tabs>
|
||||
**/
|
||||
export declare class ContentTabs extends HTMLElement {
|
||||
#private;
|
||||
constructor();
|
||||
connectedCallback(): void;
|
||||
disconnectedCallback(): void;
|
||||
/**
|
||||
* Add ContentTab.
|
||||
* @param name Name of ContentTab to add.
|
||||
* @param link HTMLElement to click on to open the content of the tab.
|
||||
* @param content HTMLElement which is shown when tab is active.
|
||||
*/
|
||||
addContentTab(name: string, link: HTMLElement, content: HTMLElement): void;
|
||||
/**
|
||||
* Arrange displayed tabs and the tab link overflow element.
|
||||
*/
|
||||
arrangeTabLinks(): void;
|
||||
/**
|
||||
* Remove ContentTab.
|
||||
* @param name Name of ContentTab to remove.
|
||||
*/
|
||||
removeContentTab(name: string): void;
|
||||
/**
|
||||
* Opens a tab by its name.
|
||||
* @param nameOfTabToOpen Name of tab which should be opened. If no tab name is specified, the active tab is selected. If this is also not known, the first tab is opened.
|
||||
*/
|
||||
openTab(nameOfTabToOpen?: string): void;
|
||||
/**
|
||||
* Show dropdown element in top most layer
|
||||
*/
|
||||
private __openDropdown;
|
||||
/**
|
||||
* Resize the dropdown element
|
||||
*/
|
||||
private __resizeDropdown;
|
||||
/**
|
||||
* Get tab by name.
|
||||
* @param tabName name of tab which should be returned.
|
||||
**/
|
||||
getTab(tabName: string): _ContentTabs.Tab | undefined;
|
||||
/**
|
||||
* Returns name of active tab.
|
||||
*/
|
||||
get activeTab(): string | undefined;
|
||||
/**
|
||||
* Enable a tab. Tab is enabled by default.
|
||||
* @param tabName name of tab which should be enabled.
|
||||
**/
|
||||
enableTab(tabName: string): void;
|
||||
/**
|
||||
* Disable a tab. Tab is enabled by default.
|
||||
* @param tabName name of tab which should be disabled.
|
||||
**/
|
||||
disableTab(tabName: string): void;
|
||||
/**
|
||||
* Disables the content tabs element.
|
||||
*/
|
||||
disableContentTabs(): void;
|
||||
/**
|
||||
* Enables the content tabs element.
|
||||
*/
|
||||
enableContentTabs(): void;
|
||||
/**
|
||||
* Add the attribute 'use-max-content' to the TabContentsWrapper
|
||||
* to prevent the size of the container from jumping back and forth
|
||||
* => content container always assumes the size of the largest content
|
||||
*/
|
||||
useMaxContent(): void;
|
||||
/**
|
||||
* Remove the attribute 'use-max-content' from the TabContentsWrapper
|
||||
* that prevent the size of the container from jumping back and forth
|
||||
* => this means that the content container only ever has the size of the visible content
|
||||
**/
|
||||
doNotUseMaxContent(): void;
|
||||
/**
|
||||
* Add callback, which is fired on tab change.
|
||||
* @param cb Function which is fired on tab change. Parameter contains the name of the new tab.
|
||||
*/
|
||||
addTabChangeCallback(cb: (newTabName: string) => void): void;
|
||||
/**
|
||||
* Remove callback, which is fired on tab change.
|
||||
* @param cb Function which is fired on tab change. Parameter contains the name of the new tab.
|
||||
*/
|
||||
removeTabChangeCallback(cb: (newTabName: string) => void): void;
|
||||
/**
|
||||
* Set the alignment of the tabs.
|
||||
* @param tabAlignment the new alignment of the tabs.
|
||||
*/
|
||||
setTabAlignment(tabAlignment: ContentTabs.TabAlignment): void;
|
||||
private __getTabLinksWrapper;
|
||||
private __getTabContentsWrapper;
|
||||
private __appendTabLinksOverflowElement;
|
||||
private __removeTabLinksOverflowElement;
|
||||
private __updateLinksAndContents;
|
||||
/**
|
||||
* Add openTab event on all tchmi-tab-link.
|
||||
*/
|
||||
private __addEvents;
|
||||
/**
|
||||
* Remove openTab event on all tchmi-tab-link.
|
||||
*/
|
||||
private __removeEvents;
|
||||
/**
|
||||
* Finds the first active tab, marks all other tabs as inactive and
|
||||
* synchronizes the active attribute between link and content.
|
||||
*/
|
||||
private __findActiveTab;
|
||||
/**
|
||||
* Sets the tabOverflowMode value.
|
||||
* @param valueNew The new value for tabOverflowMode.
|
||||
*/
|
||||
setTabOverflowMode(valueNew: ContentTabs.TabOverflowMode): void;
|
||||
/**
|
||||
* Processes the tab overflow mode.
|
||||
*/
|
||||
private __processTabOverflowMode;
|
||||
/**
|
||||
* Event handler for scroll events on the tab links wrapper.
|
||||
*/
|
||||
private __onScroll;
|
||||
/**
|
||||
* Enables or disables the scroll elements based on the current scroll position.
|
||||
* @returns {void}
|
||||
*/
|
||||
private __enableOrDisableScrollElements;
|
||||
/**
|
||||
* Event handler for scrolling the tab links wrapper to the right.
|
||||
*/
|
||||
private __onScrollElementRight;
|
||||
/**
|
||||
* Event handler for scrolling the tab links wrapper to the left.
|
||||
*/
|
||||
private __onScrollElementLeft;
|
||||
/**
|
||||
* Event handler for the wheel event on the tab links wrapper.
|
||||
* This allows horizontal scrolling using vertical wheel movements.
|
||||
* @param e The WheelEvent object.
|
||||
*/
|
||||
private __onWheel;
|
||||
/**
|
||||
* Creates a scroll element for the tab links.
|
||||
* @param direction The direction of the scroll element, either 'left' or 'right'.
|
||||
* @returns The SVG element representing the scroll arrow.
|
||||
*/
|
||||
private __createTabLinkScrollElement;
|
||||
/** Returns true if container is scrolled all the way left (or empty)
|
||||
* @param tolerance Optional tolerance in pixels to consider the left edge as "scrolled to left"
|
||||
* @returns {boolean} True if the container is scrolled to the left edge, false otherwise.
|
||||
*/
|
||||
private __isScrolledToLeftByRects;
|
||||
/** Returns true if container is scrolled all the way right (or empty)
|
||||
* @param tolerance Optional tolerance in pixels to consider the right edge as "scrolled to right"
|
||||
* @returns {boolean} True if the container is scrolled to the right edge, false otherwise.
|
||||
*/
|
||||
private __isScrolledToRightByRects;
|
||||
/**
|
||||
* Map of all valid Tabs including content and link
|
||||
* Key is the name of the tab
|
||||
*/
|
||||
private __tabs;
|
||||
private __activeTab?;
|
||||
/**
|
||||
* The elements that are used to scroll the tab links left or right.
|
||||
*/
|
||||
private __scrollElementLeft;
|
||||
private __scrollElementRight;
|
||||
private __resizeObserver;
|
||||
/**
|
||||
* The element that contains the tab links that are hidden due to less space.
|
||||
*/
|
||||
private __tabLinksOverflowElement;
|
||||
/**
|
||||
* The element that contains the tab links that are hidden due to less space.
|
||||
*/
|
||||
private __tabLinkDropdown;
|
||||
private __tabAlignment;
|
||||
/** The overflow mode of the tabs */
|
||||
protected __tabOverflowMode: ContentTabs.TabOverflowMode;
|
||||
/**
|
||||
* Contains all functions which are fired on tab change.
|
||||
*/
|
||||
private __tabChangeCallbacks;
|
||||
}
|
||||
export declare namespace ContentTabs {
|
||||
interface Tab {
|
||||
link: HTMLElement;
|
||||
content: HTMLElement;
|
||||
openTabHandler: () => void;
|
||||
disabled: boolean;
|
||||
dropdown: boolean;
|
||||
}
|
||||
type TabAlignment = 'Top' | 'Right' | 'Bottom' | 'Left';
|
||||
type TabOverflowMode = 'Popup' | 'Scroll';
|
||||
}
|
||||
import _ContentTabs = ContentTabs;
|
||||
declare global {
|
||||
namespace TcHmi.Controls.Helpers {
|
||||
let ContentTabs: typeof _ContentTabs;
|
||||
type ContentTabs = _ContentTabs;
|
||||
namespace ContentTabs {
|
||||
type Tab = _ContentTabs.Tab;
|
||||
type TabAlignment = _ContentTabs.TabAlignment;
|
||||
type TabOverflowMode = _ContentTabs.TabOverflowMode;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<svg version="1.1"
|
||||
baseProfile="full"
|
||||
width="30" height="30"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<path d="M 7 12 L 15 20 L 23 12" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" />
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 225 B |
@@ -0,0 +1,133 @@
|
||||
/* ContentTab style for Theme: Base-Dark */
|
||||
tchmi-content-tabs,
|
||||
tchmi-content-tabs-dropdown {
|
||||
--tchmi-background: var(--tchmi-background-color-1);
|
||||
--tchmi-link-background: var(--tchmi-background-color-3);
|
||||
--tchmi-link-background-hover: var(--tchmi-background-color-2);
|
||||
--tchmi-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-link-color-active: var(--tchmi-foreground-color-1);
|
||||
--tchmi-link-color-disabled: var(--tchmi-foreground-color-3);
|
||||
--tchmi-separator-color: var(--tchmi-foreground-color-4);
|
||||
--tchmi-disabled-text-color: var(--tchmi-foreground-color-3);
|
||||
}
|
||||
|
||||
tchmi-content-tabs-dropdown {
|
||||
background: var(--tchmi-background);
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-contents {
|
||||
background: var(--tchmi-background);
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links tchmi-tab-link,
|
||||
tchmi-content-tabs-dropdown tchmi-tab-link,
|
||||
tchmi-content-tabs tchmi-tab-links tchmi-tab-links-overflow {
|
||||
color: var(--tchmi-color);
|
||||
background: var(--tchmi-link-background);
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links > tchmi-tab-link:not([disabled])[active],
|
||||
tchmi-content-tabs-dropdown > tchmi-tab-link:not([disabled])[active] {
|
||||
background: var(--tchmi-background);
|
||||
color: var(--tchmi-link-color-active);
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links > tchmi-tab-link:not([disabled]):hover:not([active]),
|
||||
tchmi-content-tabs-dropdown > tchmi-tab-link:not([disabled]):hover:not([active]) {
|
||||
background: var(--tchmi-link-background-hover);
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links > tchmi-tab-link[disabled],
|
||||
tchmi-content-tabs-dropdown > tchmi-tab-link[disabled] {
|
||||
color: var(--tchmi-link-color-disabled);
|
||||
}
|
||||
|
||||
/* tab alignment - left */
|
||||
tchmi-content-tabs[tab-alignment='Left'] > tchmi-tab-links > tchmi-tab-link,
|
||||
tchmi-content-tabs[tab-alignment='Left'] > tchmi-tab-links > tchmi-tab-links-overflow {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
/* tab alignment - right */
|
||||
tchmi-content-tabs[tab-alignment='Right'] > tchmi-tab-links > tchmi-tab-link,
|
||||
tchmi-content-tabs[tab-alignment='Right'] > tchmi-tab-links > tchmi-tab-links-overflow {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links tchmi-tab-links-overflow {
|
||||
background:
|
||||
url('Images/dropdown.svg') 100% 50% no-repeat,
|
||||
var(--tchmi-link-background);
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links > tchmi-tab-links-overflow:not([disabled]):hover {
|
||||
background:
|
||||
url('Images/dropdown.svg') 100% 50% no-repeat,
|
||||
var(--tchmi-link-background-hover);
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links > tchmi-tab-links-overflow:not([disabled])[active] {
|
||||
background:
|
||||
url('Images/dropdown.svg') 100% 50% no-repeat,
|
||||
var(--tchmi-background);
|
||||
color: var(--tchmi-link-color-active);
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links tchmi-tab-links-overflow tchmi-tab-link {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
tchmi-content-tabs:not([tab-alignment='Left']):not([tab-alignment='Right'])
|
||||
tchmi-tab-links
|
||||
tchmi-tab-link:not([active]):not(:last-child)::after,
|
||||
tchmi-content-tabs:not([tab-alignment='Left']):not([tab-alignment='Right'])
|
||||
tchmi-tab-links
|
||||
tchmi-tab-links-overflow:not([active]):not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
width: 1px;
|
||||
border-right: 1px solid var(--tchmi-separator-color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
tchmi-content-tabs:not([tab-alignment='Left']):not([tab-alignment='Right'])
|
||||
tchmi-tab-links
|
||||
tchmi-tab-link[active]::after,
|
||||
tchmi-content-tabs:not([tab-alignment='Left']):not([tab-alignment='Right'])
|
||||
tchmi-tab-links
|
||||
tchmi-tab-links-overflow[active]::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: -1px;
|
||||
height: 50%;
|
||||
width: 1px;
|
||||
border-right: 1px solid var(--tchmi-link-background);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
tchmi-content-tabs:not([tab-alignment='Left']):not([tab-alignment='Right'])
|
||||
tchmi-tab-links
|
||||
tchmi-tab-link:hover
|
||||
+ tchmi-tab-link[active]::after,
|
||||
tchmi-content-tabs:not([tab-alignment='Left']):not([tab-alignment='Right'])
|
||||
tchmi-tab-links
|
||||
tchmi-tab-link:hover
|
||||
+ tchmi-tab-links-overflow[active]::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: -1px;
|
||||
height: 50%;
|
||||
width: 1px;
|
||||
border-right: 1px solid var(--tchmi-link-background-hover);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[disabled]::after {
|
||||
background-color: var(--tchmi-disabled-color);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
<svg version="1.1"
|
||||
baseProfile="full"
|
||||
width="30" height="30"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
|
||||
<path d="M 7 12 L 15 20 L 23 12" fill="none" stroke="#4c6374" stroke-width="2" stroke-linecap="round" />
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 227 B |
@@ -0,0 +1,130 @@
|
||||
/* ContentTab style for Theme: Base*/
|
||||
tchmi-content-tabs,
|
||||
tchmi-content-tabs-dropdown {
|
||||
--tchmi-background: var(--tchmi-background-color-1);
|
||||
--tchmi-link-background: var(--tchmi-background-color-3);
|
||||
--tchmi-link-background-hover: var(--tchmi-background-color-2);
|
||||
--tchmi-color: var(--tchmi-foreground-color-1);
|
||||
--tchmi-link-color-active: var(--tchmi-highlight-color-1);
|
||||
--tchmi-link-color-disabled: var(--tchmi-foreground-color-3);
|
||||
--tchmi-separator-color: var(--tchmi-foreground-color-3);
|
||||
--tchmi-disabled-text-color: var(--tchmi-foreground-color-3);
|
||||
}
|
||||
|
||||
tchmi-content-tabs-dropdown {
|
||||
background: var(--tchmi-background);
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-contents {
|
||||
background: var(--tchmi-background);
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links tchmi-tab-link,
|
||||
tchmi-content-tabs-dropdown tchmi-tab-link,
|
||||
tchmi-content-tabs tchmi-tab-links tchmi-tab-links-overflow {
|
||||
color: var(--tchmi-color);
|
||||
background: var(--tchmi-link-background);
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links > tchmi-tab-link:not([disabled])[active],
|
||||
tchmi-content-tabs-dropdown > tchmi-tab-link:not([disabled])[active] {
|
||||
background: var(--tchmi-background);
|
||||
color: var(--tchmi-link-color-active);
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links > tchmi-tab-link:not([disabled]):hover:not([active]),
|
||||
tchmi-content-tabs-dropdown > tchmi-tab-link:not([disabled]):hover:not([active]) {
|
||||
background: var(--tchmi-link-background-hover);
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links > tchmi-tab-link[disabled],
|
||||
tchmi-content-tabs-dropdown > tchmi-tab-link[disabled] {
|
||||
color: var(--tchmi-link-color-disabled);
|
||||
}
|
||||
|
||||
/* tab alignment - left */
|
||||
tchmi-content-tabs[tab-alignment='Left'] > tchmi-tab-links > tchmi-tab-link,
|
||||
tchmi-content-tabs[tab-alignment='Left'] > tchmi-tab-links > tchmi-tab-links-overflow {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
/* tab alignment - right */
|
||||
tchmi-content-tabs[tab-alignment='Right'] > tchmi-tab-links > tchmi-tab-link,
|
||||
tchmi-content-tabs[tab-alignment='Right'] > tchmi-tab-links > tchmi-tab-links-overflow {
|
||||
min-height: 50px;
|
||||
}
|
||||
|
||||
tchmi-content-tabs tchmi-tab-links tchmi-tab-links-overflow {
|
||||
background:
|
||||
url('Images/dropdown.svg') 100% 50% no-repeat,
|
||||
var(--tchmi-link-background);
|
||||
}
|
||||
tchmi-content-tabs tchmi-tab-links > tchmi-tab-links-overflow:not([disabled]):hover {
|
||||
background:
|
||||
url('Images/dropdown.svg') 100% 50% no-repeat,
|
||||
var(--tchmi-link-background-hover);
|
||||
}
|
||||
tchmi-content-tabs tchmi-tab-links > tchmi-tab-links-overflow:not([disabled])[active] {
|
||||
background:
|
||||
url('Images/dropdown.svg') 100% 50% no-repeat,
|
||||
var(--tchmi-background);
|
||||
color: var(--tchmi-link-color-active);
|
||||
}
|
||||
tchmi-content-tabs tchmi-tab-links tchmi-tab-links-overflow tchmi-tab-link {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
tchmi-content-tabs:not([tab-alignment='Left']):not([tab-alignment='Right'])
|
||||
tchmi-tab-links
|
||||
tchmi-tab-link:not([active]):not(:last-child)::after,
|
||||
tchmi-content-tabs:not([tab-alignment='Left']):not([tab-alignment='Right'])
|
||||
tchmi-tab-links
|
||||
tchmi-tab-links-overflow:not([active]):not(:last-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
right: 0;
|
||||
height: 50%;
|
||||
width: 1px;
|
||||
border-right: 1px solid var(--tchmi-separator-color);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
tchmi-content-tabs:not([tab-alignment='Left']):not([tab-alignment='Right'])
|
||||
tchmi-tab-links
|
||||
tchmi-tab-link[active]:not(:first-child)::after,
|
||||
tchmi-content-tabs:not([tab-alignment='Left']):not([tab-alignment='Right'])
|
||||
tchmi-tab-links
|
||||
tchmi-tab-links-overflow[active]:not(:first-child)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: -1px;
|
||||
height: 50%;
|
||||
width: 1px;
|
||||
border-right: 1px solid var(--tchmi-link-background);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
tchmi-content-tabs:not([tab-alignment='Left']):not([tab-alignment='Right'])
|
||||
tchmi-tab-links
|
||||
tchmi-tab-link:hover
|
||||
+ tchmi-tab-link[active]::after,
|
||||
tchmi-content-tabs:not([tab-alignment='Left']):not([tab-alignment='Right'])
|
||||
tchmi-tab-links
|
||||
tchmi-tab-link:hover
|
||||
+ tchmi-tab-links-overflow[active]::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: -1px;
|
||||
height: 50%;
|
||||
width: 1px;
|
||||
border-right: 1px solid var(--tchmi-link-background-hover);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
tchmi-content-tabs[disabled]::after {
|
||||
background-color: var(--tchmi-disabled-color);
|
||||
}
|
||||
Reference in New Issue
Block a user