ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-21 17:22:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

implement styler for infobutton (#14396)

Browse Source 
* implement styler for infobutton

* comments

* one more comment
This commit is contained in:
Alan Ren
2021-02-23 13:28:48 -08:00
committed by GitHub
parent 948bb5bc34
commit 561242a0d9
6 changed files with 76 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/sql/base/browser/ui/infoButton/infoButton.css
View File

@@ -37,37 +37,9 @@
}
.info-button {
background-color: #fff;
border-radius: 2px;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.13);
display: inline-block;
}
.info-button[tabindex="0"]:active {
background-color: #fff;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.13);
}
.vs-dark .info-button {
background-color: #1b1a19;
box-shadow: 0px 1px 4px rgba(255, 255, 255, 0.13);
}
.vs-dark .info-button[tabindex="0"]:active {
background-color: #1b1a19;
box-shadow: 0px 3px 8px rgba(255, 255, 255, 0.13);
}
.hc-black .info-button {
background-color: #000;
box-shadow: none;
}
.hc-black .info-button[tabindex="0"]:active {
background-color: #000;
}
.info-button:hover {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.13);
}
.vs-dark .info-button:hover {
box-shadow: 0px 3px 8px rgba(255, 255, 255, 0.13);
}
.hc-black .info-button[tabindex="0"]:hover {
border-style: dashed !important;
border-color: rgb(243, 133, 24) !important;
background-image: none;
border-width: 1px;
border-style: solid;
}

19
src/sql/base/browser/ui/infoButton/infoButton.ts
View File

@@ -5,7 +5,7 @@
import 'vs/css!./infoButton';
import { Button as sqlButton } from 'sql/base/browser/ui/button/button';
import { IButtonOptions } from 'vs/base/browser/ui/button/button';
import { IButtonOptions, IButtonStyles } from 'vs/base/browser/ui/button/button';
export interface IInfoButtonOptions extends IButtonOptions {
buttonMaxHeight: number,
@@ -34,6 +34,8 @@ export class InfoButton extends sqlButton {
private _iconWidth?: number;
private _title?: string;
private _styles: IButtonStyles;
constructor(container: HTMLElement, options?: IInfoButtonOptions) {
super(container, options);
this._container = container;
@@ -149,4 +151,19 @@ export class InfoButton extends sqlButton {
this.iconClass = options.iconClass;
this.title = options.title;
}
style(styles: IButtonStyles): void {
this._styles = styles;
this.applyStyles();
}
applyStyles(): void {
this.element.style.backgroundColor = this._styles?.buttonBackground?.toString();
this.element.style.color = this._styles?.buttonForeground?.toString();
this.element.style.borderColor = this._styles?.buttonBorder?.toString();
}
setHoverBackground(): void {
this.element.style.backgroundColor = this._styles?.buttonHoverBackground?.toString();
}
}