jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

fix(style): Namespace CSS variables to avoid clash with foreign CSS variables

Browse Source
This commit is contained in:
Faris Ansari 2018-07-19 14:42:30 +05:30
parent 1f387c9079
commit 7417b0fdcd
2 changed files with 58 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/dark.css
View File

@ -1,11 +1,11 @@
.datatable { .datatable {
--border-color: #424242; --dt-border-color: #424242;
--light-bg: #2e3538; --dt-light-bg: #2e3538;
--text-color: #dfe2e5; --dt-text-color: #dfe2e5;
--text-light: #dfe2e5; --dt-text-light: #dfe2e5;
--cell-bg: #1c1f20; --dt-cell-bg: #1c1f20;
--focus-border-width: 1px; --dt-focus-border-width: 1px;
--selection-highlight-color: var(--light-bg); --dt-selection-highlight-color: var(--dt-light-bg);
--toast-message-border: 1px solid var(--border-color); --dt-toast-message-border: 1px solid var(--dt-border-color);
--header-cell-bg: #262c2e; --dt-header-cell-bg: #262c2e;
} }

101
src/style.css
View File

@ -1,24 +1,21 @@
:root { :root {
--border-color: #d1d8dd; --dt-border-color: #d1d8dd;
--primary-color: rgb(82, 146, 247); --dt-primary-color: rgb(82, 146, 247);
--light-bg: #f5f7fa; --dt-light-bg: #f5f7fa;
--light-red: #FD8B8B; --dt-light-red: #FD8B8B;
--light-yellow: #fffce7; --dt-light-yellow: #fffce7;
--orange: rgb(255, 160, 10); --dt-orange: rgb(255, 160, 10);
--text-color: #000000; --dt-text-color: #000000;
--text-light: #dfe2e5; --dt-text-light: #dfe2e5;
--dt-spacer-1: 0.25rem;
--spacer-1: 0.25rem; --dt-spacer-2: 0.5rem;
--spacer-2: 0.5rem; --dt-spacer-3: 1rem;
--spacer-3: 1rem; --dt-border-radius: 3px;
--dt-cell-bg: #fff;
--border-radius: 3px; --dt-focus-border-width: 2px;
--dt-selection-highlight-color: var(--dt-light-yellow);
--cell-bg: #fff; --dt-toast-message-border: none;
--focus-border-width: 2px; --dt-header-cell-bg: var(--dt-cell-bg);
--selection-highlight-color: var(--light-yellow);
--toast-message-border: none;
--header-cell-bg: var(--cell-bg);
} }
.datatable { .datatable {
@ -34,7 +31,7 @@
.dt-header { .dt-header {
border-collapse: collapse; border-collapse: collapse;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--dt-border-color);
position: absolute; position: absolute;
top: 0; top: 0;
@ -48,27 +45,27 @@
.dt-scrollable { .dt-scrollable {
max-height: 40vw; max-height: 40vw;
overflow: auto; overflow: auto;
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--dt-border-color);
&--highlight-all { &--highlight-all {
background-color: var(--selection-highlight-color); background-color: var(--dt-selection-highlight-color);
} }
&__no-data { &__no-data {
text-align: center; text-align: center;
padding: var(--spacer-3); padding: var(--dt-spacer-3);
border-left: 1px solid var(--border-color); border-left: 1px solid var(--dt-border-color);
border-right: 1px solid var(--border-color); border-right: 1px solid var(--dt-border-color);
} }
} }
.dt-row { .dt-row {
&--highlight .dt-cell { &--highlight .dt-cell {
background-color: var(--selection-highlight-color); background-color: var(--dt-selection-highlight-color);
} }
&--unhighlight .dt-cell { &--unhighlight .dt-cell {
background-color: var(--cell-bg); background-color: var(--dt-cell-bg);
} }
&--hide { &--hide {
@ -77,12 +74,12 @@
} }
.dt-cell { .dt-cell {
border: 1px solid var(--border-color); border: 1px solid var(--dt-border-color);
position: relative; position: relative;
outline: none; outline: none;
padding: 0; padding: 0;
background-color: var(--cell-bg); background-color: var(--dt-cell-bg);
color: var(--text-color); color: var(--dt-text-color);
/* /*
Fix for firefox and Edge Fix for firefox and Edge
https://stackoverflow.com/a/16337203 https://stackoverflow.com/a/16337203
@ -91,8 +88,8 @@
background-clip: padding-box; background-clip: padding-box;
&__content { &__content {
padding: var(--spacer-2); padding: var(--dt-spacer-2);
border: var(--focus-border-width) solid transparent; border: var(--dt-focus-border-width) solid transparent;
height: 100%; height: 100%;
user-select: none; user-select: none;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -102,9 +99,9 @@
&__edit { &__edit {
display: none; display: none;
padding: var(--spacer-2); padding: var(--dt-spacer-2);
background-color: var(--cell-bg); background-color: var(--dt-cell-bg);
border: var(--focus-border-width) solid var(--orange); border: var(--dt-focus-border-width) solid var(--dt-orange);
z-index: 1; z-index: 1;
height: 100%; height: 100%;
} }
@ -129,23 +126,23 @@
} }
&--focus &__content { &--focus &__content {
border-color: var(--primary-color); border-color: var(--dt-primary-color);
} }
&--highlight { &--highlight {
background-color: var(--light-bg); background-color: var(--dt-light-bg);
} }
&--dragging { &--dragging {
background-color: var(--light-bg); background-color: var(--dt-light-bg);
} }
&--header { &--header {
background-color: var(--header-cell-bg); background-color: var(--dt-header-cell-bg);
} }
&--header &__content { &--header &__content {
padding-right: var(--spacer-3); padding-right: var(--dt-spacer-3);
font-weight: bold; font-weight: bold;
} }
@ -181,17 +178,17 @@
top: 100%; top: 100%;
right: 0; right: 0;
z-index: 1; z-index: 1;
background-color: var(--cell-bg); background-color: var(--dt-cell-bg);
border-radius: var(--border-radius); border-radius: var(--dt-border-radius);
padding: var(--spacer-2) 0; padding: var(--dt-spacer-2) 0;
box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
} }
&__list-item { &__list-item {
padding: var(--spacer-2) var(--spacer-3); padding: var(--dt-spacer-2) var(--dt-spacer-3);
&:hover { &:hover {
background-color: var(--light-bg); background-color: var(--dt-light-bg);
} }
} }
@ -219,17 +216,17 @@
.dt-toast { .dt-toast {
position: absolute; position: absolute;
bottom: var(--spacer-3); bottom: var(--dt-spacer-3);
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
&__message { &__message {
display: inline-block; display: inline-block;
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
color: var(--text-light); color: var(--dt-text-light);
border-radius: var(--border-radius); border-radius: var(--dt-border-radius);
padding: var(--spacer-2) var(--spacer-3); padding: var(--dt-spacer-2) var(--dt-spacer-3);
border: var(--toast-message-border); border: var(--dt-toast-message-border);
} }
} }
@ -256,7 +253,7 @@
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background-color: var(--light-bg); background-color: var(--dt-light-bg);
opacity: 0.5; opacity: 0.5;
font-size: 2em; font-size: 2em;