Move Chronograf Users Admin styles to own sheet
Alex P
parent
d60abb4be6
commit
3c2c63f2d2
|
|
@ -62,6 +62,7 @@
|
|||
@import 'pages/kapacitor';
|
||||
@import 'pages/dashboards';
|
||||
@import 'pages/admin';
|
||||
@import 'pages/users';
|
||||
|
||||
// TODO
|
||||
@import 'unsorted';
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
Styles for Admin Pages
|
||||
Styles for InfluxDB Admin Page
|
||||
----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
|
|
@ -179,164 +179,3 @@ pre.admin-table--query {
|
|||
|
||||
.table-highlight > tbody > tr:hover {background-color: $g5-pepper;}
|
||||
}
|
||||
|
||||
/*
|
||||
Chronograf Admin
|
||||
----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
.chronograf-user--role,
|
||||
.chronograf-user--org {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.chronograf-user--role {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.chronograf-user--role,
|
||||
.chronograf-user--org,
|
||||
table.table.chronograf-admin-table .dropdown {
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.chronograf-user--org {
|
||||
padding-left: 7px;
|
||||
}
|
||||
table.table.chronograf-admin-table thead tr th.align-with-col-text {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.user-checkbox {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
background-color: $g2-kevlar;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(1, 1);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0;
|
||||
background-color: $c-pool;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.25s ease, opacity 0.25s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
tr.selected .user-checkbox:after,
|
||||
.user-checkbox.selected:after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(0.4, 0.4);
|
||||
}
|
||||
|
||||
table.table.chronograf-admin-table tbody tr.selected {
|
||||
background-color: $g5-pepper;
|
||||
}
|
||||
table.table.chronograf-admin-table tbody tr.selected td {
|
||||
color: $g18-cloud;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
table.table.chronograf-admin-table thead tr th.chronograf-admin-table--check-col,
|
||||
table.table.chronograf-admin-table tbody tr td.chronograf-admin-table--check-col {
|
||||
width: 28px;
|
||||
padding-right: 0;
|
||||
}
|
||||
table.table.chronograf-admin-table thead tr th.chronograf-admin-table--selectable,
|
||||
table.table.chronograf-admin-table tbody tr td.chronograf-admin-table--selectable {
|
||||
&:hover {cursor: pointer;}
|
||||
}
|
||||
|
||||
.dropdown-label {
|
||||
margin: 0 8px 0 0;
|
||||
font-weight: 700;
|
||||
color: $g13-mist;
|
||||
font-size: 14px;
|
||||
}
|
||||
.panel-body.chronograf-admin-table--panel {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
padding-top: 11px;
|
||||
}
|
||||
.chronograf-admin-table--batch {
|
||||
border-radius: 5px 5px 0 0;
|
||||
background-color: $g4-onyx;
|
||||
padding: 11px 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.chronograf-admin-table--batch-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .dropdown,
|
||||
> .btn {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
.chronograf-admin-table--num-selected {
|
||||
@include no-user-select();
|
||||
margin: 0px 11px 0 0;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: $g13-mist;
|
||||
}
|
||||
.super-admin-toggle .dropdown-toggle {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
/* Make dropdowns in admin table appear as plaintext until hover */
|
||||
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user td div.dropdown div.btn.dropdown-toggle {
|
||||
transition: none;
|
||||
background-color: $g3-castle;
|
||||
color: $g13-mist;
|
||||
|
||||
> .caret {opacity: 0;}
|
||||
}
|
||||
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user.selected td div.dropdown div.btn.dropdown-toggle {
|
||||
background-color: $g5-pepper;
|
||||
}
|
||||
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user:hover td div.dropdown div.btn.dropdown-toggle {
|
||||
background-color: $c-pool;
|
||||
color: $g20-white;
|
||||
|
||||
> .caret {opacity: 1;}
|
||||
|
||||
&:hover {
|
||||
background-color: $c-laser;
|
||||
}
|
||||
}
|
||||
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user td div.dropdown.open div.btn.dropdown-toggle,
|
||||
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user td div.dropdown.open div.btn.dropdown-toggle:hover {
|
||||
background-color: $c-hydrogen;
|
||||
color: $g20-white;
|
||||
|
||||
> .caret {opacity: 1;}
|
||||
}
|
||||
|
||||
/* Styles for new user row */
|
||||
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--new-user {
|
||||
background-color: $g4-onyx;
|
||||
|
||||
> td {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,160 @@
|
|||
/*
|
||||
Styles for Chronograf Users Admin Page
|
||||
----------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
.chronograf-user--role,
|
||||
.chronograf-user--org {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.chronograf-user--role {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.chronograf-user--role,
|
||||
.chronograf-user--org,
|
||||
table.table.chronograf-admin-table .dropdown {
|
||||
margin-bottom: 2px;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.chronograf-user--org {
|
||||
padding-left: 7px;
|
||||
}
|
||||
table.table.chronograf-admin-table thead tr th.align-with-col-text {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.user-checkbox {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
background-color: $g2-kevlar;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(1, 1);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0;
|
||||
background-color: $c-pool;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.25s ease, opacity 0.25s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
tr.selected .user-checkbox:after,
|
||||
.user-checkbox.selected:after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(0.4, 0.4);
|
||||
}
|
||||
|
||||
table.table.chronograf-admin-table tbody tr.selected {
|
||||
background-color: $g5-pepper;
|
||||
}
|
||||
table.table.chronograf-admin-table tbody tr.selected td {
|
||||
color: $g18-cloud;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
table.table.chronograf-admin-table thead tr th.chronograf-admin-table--check-col,
|
||||
table.table.chronograf-admin-table tbody tr td.chronograf-admin-table--check-col {
|
||||
width: 28px;
|
||||
padding-right: 0;
|
||||
}
|
||||
table.table.chronograf-admin-table thead tr th.chronograf-admin-table--selectable,
|
||||
table.table.chronograf-admin-table tbody tr td.chronograf-admin-table--selectable {
|
||||
&:hover {cursor: pointer;}
|
||||
}
|
||||
|
||||
.dropdown-label {
|
||||
margin: 0 8px 0 0;
|
||||
font-weight: 700;
|
||||
color: $g13-mist;
|
||||
font-size: 14px;
|
||||
}
|
||||
.panel-body.chronograf-admin-table--panel {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
padding-top: 11px;
|
||||
}
|
||||
.chronograf-admin-table--batch {
|
||||
border-radius: 5px 5px 0 0;
|
||||
background-color: $g4-onyx;
|
||||
padding: 11px 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.chronograf-admin-table--batch-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .dropdown,
|
||||
> .btn {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
.chronograf-admin-table--num-selected {
|
||||
@include no-user-select();
|
||||
margin: 0px 11px 0 0;
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: $g13-mist;
|
||||
}
|
||||
.super-admin-toggle .dropdown-toggle {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
/* Make dropdowns in admin table appear as plaintext until hover */
|
||||
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user td div.dropdown div.btn.dropdown-toggle {
|
||||
transition: none;
|
||||
background-color: $g3-castle;
|
||||
color: $g13-mist;
|
||||
|
||||
> .caret {opacity: 0;}
|
||||
}
|
||||
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user.selected td div.dropdown div.btn.dropdown-toggle {
|
||||
background-color: $g5-pepper;
|
||||
}
|
||||
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user:hover td div.dropdown div.btn.dropdown-toggle {
|
||||
background-color: $c-pool;
|
||||
color: $g20-white;
|
||||
|
||||
> .caret {opacity: 1;}
|
||||
|
||||
&:hover {
|
||||
background-color: $c-laser;
|
||||
}
|
||||
}
|
||||
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user td div.dropdown.open div.btn.dropdown-toggle,
|
||||
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--user td div.dropdown.open div.btn.dropdown-toggle:hover {
|
||||
background-color: $c-hydrogen;
|
||||
color: $g20-white;
|
||||
|
||||
> .caret {opacity: 1;}
|
||||
}
|
||||
|
||||
/* Styles for new user row */
|
||||
table.table.chronograf-admin-table tbody tr.chronograf-admin-table--new-user {
|
||||
background-color: $g4-onyx;
|
||||
|
||||
> td {
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue