Yidhra/TuiCss
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added orange 255 color; Created different hover and striped types for table; Added sidenav for turbo vision example;

Browse Source
This commit is contained in:
vinicius.reif
2019-09-13 13:46:50 -03:00
parent a478627e01
commit e175f648a1
7 changed files with 322 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/table.scss
View File

@@ -2,10 +2,84 @@
border: 2px solid rgb(168, 168, 168);
padding: 5px;
border-collapse: collapse;
}
.tui-table-hover tbody tr:hover {
background-color: rgb(0, 255, 255);
color: black;
&.hovered-blue tbody tr:hover {
background-color: rgb(0, 0, 255) !important;
color: black;
}
&.hovered-green tbody tr:hover {
background-color: rgb(0, 255, 0) !important;
color: black;
}
&.hovered-cyan tbody tr:hover {
background-color: rgb(0, 255, 255) !important;
color: black;
}
&.hovered-red tbody tr:hover {
background-color: rgb(255, 0, 0) !important;
color: white;
}
&.hovered-purple tbody tr:hover {
background-color: rgb(255, 0, 255) !important;
color: white;
}
&.hovered-yellow tbody tr:hover {
background-color: rgb(255, 255, 0) !important;
color: black;
}
&.hovered-white tbody tr:hover {
background-color: rgb(255, 255, 255) !important;
color: black;
}
&.hovered-orange tbody tr:hover {
background-color: rgb(255, 168, 0) !important;
color: black;
}
&.hovered tbody tr:hover {
background-color: rgb(0, 255, 255) !important;
color: black;
}
&.striped-blue tbody tr:nth-child(even) {
background-color: rgb(0, 0, 168);
}
&.striped-green tbody tr:nth-child(even) {
background-color: rgb(0, 168, 0);
}
&.striped-cyan tbody tr:nth-child(even) {
background-color: rgb(0, 168, 168);
}
&.striped-red tbody tr:nth-child(even) {
background-color: rgb(168, 0, 0);
}
&.striped-purple tbody tr:nth-child(even) {
background-color: rgb(168, 0, 168);
}
&.striped-yellow tbody tr:nth-child(even) {
background-color: rgb(168, 168, 0);
}
&.striped-white tbody tr:nth-child(even) {
background-color: rgb(168, 168, 168);
color: black;
}
&.striped-orange tbody tr:nth-child(even) {
background-color: rgb(168, 86, 0);
}
}
.tui-table tbody {
background-color: inherit;
@@ -19,4 +93,9 @@
background-color: inherit;
color: rgb(255, 255, 0);
text-align: center;
}
.tui-table tfoot {
background-color: inherit;
color: rgb(255, 255, 0);
text-align: center;
}

21
src/styles/color.scss
View File

@@ -113,6 +113,7 @@
.purple-255 {background-color: rgb(255, 0, 255)!important}
.yellow-255 {background-color: rgb(255, 255, 0)!important}
.white-255 {background-color: rgb(255, 255, 255)!important}
.orange-255 {background-color: rgb(255, 168, 0)!important}
.black-255-text {color: rgb(0, 0, 0)!important}
.blue-255-text {color: rgb(0, 0, 255)!important}
@@ -122,6 +123,7 @@
.purple-255-text {color: rgb(255, 0, 255)!important}
.yellow-255-text {color: rgb(255, 255, 0)!important}
.white-255-text {color: rgb(255, 255, 255)!important}
.orange-255-text {color: rgb(255, 168, 0)!important}
.black-255-border {border-color: rgb(0, 0, 0)!important}
.blue-255-border {border-color: rgb(0, 0, 255)!important}
@@ -131,6 +133,7 @@
.purple-255-border {border-color: rgb(255, 0, 255)!important}
.yellow-255-border {border-color: rgb(255, 255, 0)!important}
.white-255-border {border-color: rgb(255, 255, 255)!important}
.orange-255-border {border-color: rgb(255, 168, 0)!important}
.black-255-hover:hover {background-color: rgb(0, 0, 0)!important}
.blue-255-hover:hover {background-color: rgb(0, 0, 255)!important}
@@ -140,15 +143,17 @@
.purple-255-hover:hover {background-color: rgb(255, 0, 255)!important}
.yellow-255-hover:hover {background-color: rgb(255, 255, 0)!important}
.white-255-hover:hover {background-color: rgb(255, 255, 255)!important}
.orange-255-hover:hover {background-color: rgb(255, 168, 0)!important}
.black-255-text-hover:hover {color: rgb(0, 0, 0)!important}
.blue-255-text-hover:hover {color: rgb(0, 0, 255)!important}
.green-255-text-hover:hover {color: rgb(0, 255, 0)!important}
.cyan-255-text-hover:hover {color: rgb(0, 255, 255)!important}
.red-255-text-hover:hover {color: rgb(255, 0, 0)!important}
.purple-text-255-hover:hover {color: rgb(255, 0, 255)!important}
.yellow-text-255-hover:hover {color: rgb(255, 255, 0)!important}
.white-text-255-hover:hover {color: rgb(255, 255, 255)!important}
.purple-255-text-hover:hover {color: rgb(255, 0, 255)!important}
.yellow-255-text-hover:hover {color: rgb(255, 255, 0)!important}
.white-255-text-hover:hover {color: rgb(255, 255, 255)!important}
.orange-255-text-hover:hover {color: rgb(255, 168, 0)!important}
.black-255-border-hover:hover {border-color: rgb(0, 0, 0)!important}
.blue-255-border-hover:hover {border-color: rgb(0, 0, 255)!important}
@@ -158,6 +163,7 @@
.purple-255-border-hover:hover {border-color: rgb(255, 0, 255)!important}
.yellow-255-border-hover:hover {border-color: rgb(255, 255, 0)!important}
.white-255-border-hover:hover {border-color: rgb(255, 255, 255)!important}
.orange-255-border-hover:hover {border-color: rgb(255, 168, 0)!important}
/* Misc */
.black { background-color: black!important }
@@ -172,11 +178,4 @@
.white-border { border-color: white!important }
.white-hover:hover { background-color: white!important }
.white-text-hover:hover { color: white!important }
.white-border-hover:hover { border-color: white!important }
.orange { background-color: rgb(168, 86, 0)!important }
.orange-text { color: rgb(168, 86, 0)!important }
.orange-border { border-color: rgb(168, 86, 0)!important }
.orange-hover:hover { background-color: rgb(168, 86, 0)!important }
.orange-text-hover:hover { color: rgb(168, 86, 0)!important }
.orange-border-hover:hover { border-color: rgb(168, 86, 0)!important }
.white-border-hover:hover { border-color: white!important }