taiga-front/app/styles/modules/colors-table.scss

94 lines
2.1 KiB
SCSS

.colors-table {
.row {
&:hover {
background: lighten($green-taiga, 60%);
@include transition (background .2s ease-in);
}
}
.row-selected {
background: lighten($green-taiga, 60%);
@include transition (background .2s ease-in);
}
.title {
@extend %medium;
@extend %bold;
border-bottom: 1px solid $gray-light;
&:hover {
background: transparent;
}
}
.table-main {
@extend %small;
border-bottom: 1px solid $gray-light;
}
.color {
background-color: $gray-light;
border-radius: 2px;
cursor: pointer;
height: 35px;
width: 35px;
}
.icon-floppy,
.icon-delete,
.icon-edit {
@extend %large;
float: right;
margin-right: .5rem;
}
.icon-floppy {
margin-right: 1rem;
}
.icon-delete {
margin-right: 1rem;
&:hover {
color: $red;
}
}
.icon-notification-success {
@extend %large;
color: $fresh-taiga;
}
.select-color {
@include popover(323px, 10px, 70px, '', '', 15px, 13px, -7px);
border-radius: 0 10px 10px 0;
padding: 15px;
li {
float: left;
margin: 0 .5rem .5rem 0;
&:nth-child(7n) {
margin-right: 0;
}
&:nth-last-child(-n+7) {
margin-bottom: 0;
}
}
ul {
float: left;
margin-bottom: 1rem;
}
input {
@extend %text;
background-color: $very-light-gray;
width: 243px;
@include placeholder {
color: $gray;
}
}
.selected-color {
float: right;
height: 40px;
width: 40px;
}
}
.color-column {
max-width: 100px;
}
.is-closed-column {
max-width: 130px;
text-align: center;
}
.options-column {
max-width: 100px;
}
}