Discource-C
/
discourse-table-builder
mirror of https://github.com/discourse/discourse-table-builder.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Update cell styles

This commit is contained in:
Keegan George 2022-07-14 10:04:50 -07:00
parent 9b241aaead
commit bf454250fe
1 changed files with 54 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
scss/vendor/jspreadsheet-theme.scss vendored
View File

@ -1,19 +1,23 @@
:root { :root {
--jexcel_header_color: var(--primary); --jexcel_header_color: var(--primary-high);
--jexcel_header_color_highlighted: var(--tertiary); --jexcel_header_color_highlighted: var(--primary-high);
--jexcel_header_background: var(--primary-low); --jexcel_header_background: var(--primary-very-low);
--jexcel_header_background_highlighted: var(--tertiary); --jexcel_header_background_highlighted: var(--primary-low);
--jexcel_content_color: var(--primary); --jexcel_content_color: var(--primary);
--jexcel_content_color_highlighted: #333; --jexcel_content_color_highlighted: var(--primary-high);
--jexcel_content_background: var(--secondary); --jexcel_content_background: var(--secondary);
--jexcel_content_background_highlighted: var(--highlight-low); --jexcel_content_background_highlighted: var(--tertiary-very-low);
--jexcel_menu_background: #7e7e7e;
--jexcel_menu_background_highlighted: #ebebeb; --jexcel_menu_background: var(--secondary);
--jexcel_menu_color: #ddd; --jexcel_menu_background_highlighted: var(--secondary-very-high);
--jexcel_menu_color_highlighted: #222; --jexcel_menu_color: var(--primary-medium);
--jexcel_border_color: var(--primary-medium); --jexcel_menu_color_highlighted: var(--primary);
--jexcel_border_color_highlighted: var(--highlight-high);
--active_color: #eee; --jexcel_border_color: var(--primary-low-mid);
--jexcel_border_color_highlighted: var(--tertiary-high);
--active_color: var(--primary-very-low);
--active-color: var(--active_color); --active-color: var(--active_color);
} }
@ -22,6 +26,10 @@
border-right: 1px solid var(--jexcel_border_color); border-right: 1px solid var(--jexcel_border_color);
} }
.jexcel_corner {
background-color: var(--tertiary);
}
.jexcel > tbody > tr > td, .jexcel > tbody > tr > td,
.jexcel > thead > tr > td { .jexcel > thead > tr > td {
border-top: 1px solid var(--jexcel_border_color); border-top: 1px solid var(--jexcel_border_color);
@ -60,24 +68,22 @@
border: 1px solid var(--jexcel_border_color); border: 1px solid var(--jexcel_border_color);
} }
.jexcel_contextmenu { .jexcel_contextmenu.jcontextmenu {
border: 1px solid var(--jexcel_border_color); border: 1px solid var(--jexcel_border_color);
background: var(--jexcel_menu_background); background: var(--jexcel_menu_background);
color: var(--jexcel_menu_color); color: var(--jexcel_menu_color);
box-shadow: var(--jexcel_menu_box_shadow); box-shadow: 0 12px 12px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: var(--jexcel_menu_box_shadow);
-moz-box-shadow: var(--jexcel_menu_box_shadow);
} }
.jexcel_contextmenu > div a { .jcontextmenu > div a {
color: var(--jexcel_menu_color); color: var(--jexcel_menu_color);
} }
.jexcel_contextmenu > div:not(.contextmenu-line):hover a { .jcontextmenu > div:not(.contextmenu-line):hover a {
color: var(--jexcel_menu_color_highlighted); color: var(--jexcel_menu_color_highlighted);
} }
.jexcel_contextmenu > div:not(.contextmenu-line):hover { .jcontextmenu > div:not(.contextmenu-line):hover {
background: var(--jexcel_menu_background_highlighted); background: var(--jexcel_menu_background_highlighted);
} }
@ -153,16 +159,16 @@
} }
.jexcel .highlight-bottom { .jexcel .highlight-bottom {
border-bottom: 1px solid var(--jexcel_border_color_highlighted); border-bottom: 1.5px solid var(--jexcel_border_color_highlighted);
} }
.jexcel .highlight-right { .jexcel .highlight-right {
border-right: 1px solid var(--jexcel_border_color_highlighted); border-right: 1.5px solid var(--jexcel_border_color_highlighted);
} }
.jexcel .highlight-left { .jexcel .highlight-left {
border-left: 1px solid var(--jexcel_border_color_highlighted); border-left: 1.5px solid var(--jexcel_border_color_highlighted);
} }
.jexcel .highlight-top { .jexcel .highlight-top {
border-top: 1px solid var(--jexcel_border_color_highlighted); border-top: 1.5px solid var(--jexcel_border_color_highlighted);
} }
.jexcel .copying-top { .jexcel .copying-top {
border-top-color: var(--jexcel_border_color_highlighted); border-top-color: var(--jexcel_border_color_highlighted);
@ -183,3 +189,27 @@
-webkit-box-shadow: unset; -webkit-box-shadow: unset;
box-shadow: unset; box-shadow: unset;
} }
table.jexcel > thead > tr > td {
border-top: 1px solid var(--jexcel_border_color);
border-right: 1px solid var(--jexcel_border_color);
border-bottom: none;
background-color: var(--jexcel_header_background);
&:first-child {
border-left: 1px solid var(--jexcel_border_color);
}
}
table.jexcel > thead > tr > td.selected {
background-color: var(--jexcel_header_background_highlighted);
color: var(--jexcel_header_color_highlighted);
}
table.jexcel > tbody > tr > td {
border-right: 1px solid var(--jexcel_border_color);
&:first-child {
border-left: 1px solid var(--jexcel_border_color);
}
}