scinote-web/app/assets/stylesheets/my_modules/repositories.scss

552 lines
10 KiB
SCSS
Raw Normal View History

2020-01-15 23:46:01 +08:00
// scss-lint:disable SelectorDepth SelectorFormat QualifyingElement
// scss-lint:disable NestingDepth ImportantRule
2020-04-08 21:13:21 +08:00
@mixin my-module-repository-title {
@include font-h3;
line-height: 22px;
overflow: hidden;
padding-right: 55px;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
&::after {
color: $color-alto;
2020-05-11 20:53:28 +08:00
content: '[' attr(data-rows-count) ']';
2020-04-08 21:13:21 +08:00
display: inline-block;
line-height: 22px;
padding-left: 5px;
position: absolute;
right: 0;
width: 55px;
}
}
2020-01-15 23:46:01 +08:00
.my-module-inventories {
.main-actions {
align-items: center;
display: flex;
.filter-container {
flex-grow: 1;
}
}
.dataTables_scroll {
.dataTables_scrollBody {
thead {
opacity: 0;
}
}
}
tbody {
2020-01-24 23:33:44 +08:00
tr {
.assigned-column {
.repository-row-lock-icon {
display: none !important;
}
}
}
2020-01-15 23:46:01 +08:00
2020-01-24 23:33:44 +08:00
tr:hover {
2020-01-15 23:46:01 +08:00
.assigned-column {
.repository-row-edit-icon {
display: none !important;
}
.circle-icon {
margin-left: 30px !important;
}
}
}
}
.pagination-row {
align-items: center;
display: flex;
.pagination-info,
.pagination-actions {
flex-grow: 1;
}
.pagination-info {
align-items: center;
display: flex;
.dataTables_info {
padding-top: 0;
}
.dataTables_length {
margin-right: 24px;
width: 170px;
.dropdown-selector-container {
width: inherit;
}
label {
margin-bottom: 0;
}
}
}
}
}
2020-04-02 18:05:07 +08:00
2020-04-03 19:15:56 +08:00
#assigned-items-container {
2020-04-09 21:14:55 +08:00
padding-top: 10px;
2020-04-02 18:05:07 +08:00
.assigned-repository {
border: $border-default;
border-radius: $border-radius-modal;
margin-bottom: 10px;
2020-05-14 18:18:45 +08:00
overflow: hidden;
2020-04-02 18:05:07 +08:00
.assigned-repository-caret {
align-items: center;
color: inherit;
display: flex;
height: 52px;
padding: 0 18px;
text-decoration: none;
2020-04-08 21:13:21 +08:00
&.collapsed:hover,
&.collapsed:active {
2020-04-07 01:52:41 +08:00
background: $color-concrete;
border-radius: 6px;
2020-04-08 21:13:21 +08:00
text-decoration: none;
2020-04-02 18:05:07 +08:00
}
&:not(.collapsed) .fa-caret-right {
@include rotate(90deg);
}
.fa-caret-right {
flex-shrink: 0;
margin-right: 10px;
}
.assigned-repository-title {
2020-04-08 21:13:21 +08:00
@include my-module-repository-title;
2020-04-02 18:05:07 +08:00
}
.action-buttons {
flex-grow: 1;
flex-shrink: 0;
text-align: right;
2020-05-08 23:01:55 +08:00
.full-screen:hover {
background: $color-alto;
2020-04-02 18:05:07 +08:00
}
}
.snapshot-tag {
background-color: $color-concrete;
color: $color-silver-chalice;
flex-shrink: 0;
padding: .3em;
}
2020-04-02 18:05:07 +08:00
}
2020-04-03 19:15:56 +08:00
2020-04-07 01:52:41 +08:00
.assigned-repository-container {
.table.dataTable {
margin-top: 0 !important;
.row-name {
border-left: 0;
}
}
.pagination-row {
border-top: $border-default;
padding: 5px 10px;
.pagination {
display: inline-flex;
}
.dataTables_paginate {
height: 38px;
}
}
2020-04-03 19:15:56 +08:00
}
2020-04-02 18:05:07 +08:00
}
}
2020-04-08 03:02:16 +08:00
#myModuleRepositoryFullViewModal {
padding-left: 0 !important;
2020-05-26 18:41:07 +08:00
z-index: 1045;
2020-04-08 03:02:16 +08:00
.modal-dialog {
height: 100vh;
margin: 0;
width: 100vw;
.modal-content {
border: 0;
border-radius: 0;
box-shadow: none;
display: grid;
grid-template-areas: 'header sidebar'
'table sidebar';
grid-template-columns: minmax(50%, 100%) 0;
grid-template-rows: 55px calc(100% - 55px);
2020-04-08 03:02:16 +08:00
height: inherit;
transition: all $timing-function-sharp;
&.show-sidebar {
grid-template-columns: minmax(50%, 100%) minmax(250px, 400px);
}
2020-04-08 03:02:16 +08:00
2020-04-08 21:13:21 +08:00
.modal-header {
align-items: center;
display: flex;
grid-area: header;
2020-04-08 21:13:21 +08:00
height: 55px;
padding: 10px 24px;
.close {
flex-shrink: 0;
text-align: center;
width: 20px;
2020-04-08 21:13:21 +08:00
}
.header-container {
flex-grow: 1;
max-width: calc(100% - 20px);
2020-04-08 21:13:21 +08:00
2020-05-11 20:53:28 +08:00
.repository-name {
2020-04-08 21:13:21 +08:00
@include my-module-repository-title;
@include font-h2;
display: inline-block;
width: 100%;
2020-04-08 21:13:21 +08:00
}
.breadcrumbs {
align-items: center;
color: $color-silver-chalice;
display: flex;
2020-05-11 20:53:28 +08:00
font-size: 10px;
2020-04-08 21:13:21 +08:00
height: 20px;
width: 90%;
2020-04-08 21:13:21 +08:00
.my-module,
.project,
.experiment {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.slash {
flex-basis: 20px;
text-align: center;
}
}
}
}
2020-04-08 03:02:16 +08:00
.modal-body {
grid-area: table;
2020-04-08 21:13:21 +08:00
padding: 0;
2020-04-08 03:02:16 +08:00
}
}
}
.dataTables_scrollBody {
flex-grow: 1;
tbody tr.selected {
background: $brand-warning-light;
}
2020-04-08 03:02:16 +08:00
.assigned-column {
position: relative;
.assign-counter-container {
border-radius: $border-radius-tag;
cursor: pointer;
line-height: 35px;
position: absolute;
text-align: center;
top: 1px;
width: calc(100% - 16px);
.assign-counter {
2020-04-28 18:41:59 +08:00
display: inline-block;
height: 100%;
width: 100%;
2020-04-08 03:02:16 +08:00
&.has-assigned {
color: $brand-primary;
}
}
&:hover {
background-color: $color-alto;
}
2020-04-28 18:41:59 +08:00
.dropdown-menu {
min-width: 320px;
padding: 8px;
}
2020-04-08 03:02:16 +08:00
}
}
}
.dataTables_scrollHead {
flex-shrink: 0;
}
.table-container {
height: 100%;
padding: 1em 1.5em 0;
width: 100%;
.dataTables_wrapper {
display: flex;
flex-direction: column;
height: inherit;
.dataTables_scroll {
display: flex;
flex-direction: column;
flex-grow: 1;
max-height: 100%;
overflow: auto;
}
2020-05-18 22:32:27 +08:00
// Checklists
.checklist-dropdown {
.dropdown-menu {
min-width: 220px;
.checklist-item {
line-height: 18px;
padding: 5px 15px;
}
}
span {
color: $brand-primary;
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
}
}
.main-actions {
flex-shrink: 0;
margin-bottom: 10px;
}
.pagination-row {
border-top: $border-default;
flex-shrink: 0;
margin-left: -1.5em;
padding: 1em 1.5em;
width: calc(100% + 3em);
}
}
.repository-versions-sidebar {
background-color: $color-concrete;
grid-area: sidebar;
overflow: hidden;
.sidebar-collapse-button {
color: $color-volcano;
text-decoration: none;
}
.repository-versions-header {
border-bottom: 1px solid $color-alto;
height: 55px;
padding: 0 1em;
h4 {
line-height: 55px;
margin: 0;
}
}
.repository-versions-list {
display: grid;
grid-template-rows: min-content min-content minmax(0, 100%);
grid-auto-rows: min-content;
height: calc(100% - 55px);
margin-bottom: 0;
.repository-snapshots-container {
overflow: auto;
position: relative;
}
}
.list-group-item {
align-items: center;
background-color: $color-concrete;
border: 0;
border-radius: 0;
2020-05-28 21:18:26 +08:00
margin: .5em 0;
position: relative;
&[data-selected="true"] {
&::after {
background-color: $brand-primary;
content: '';
height: 100%;
position: absolute;
right: 0;
top: 0;
2020-06-01 16:30:06 +08:00
width: .5em;
2020-05-28 21:18:26 +08:00
}
&.active {
&::after {
background-color: $color-black;
}
}
}
.list-group-item-text {
2020-05-11 20:53:28 +08:00
@include font-small;
color: $color-silver-chalice;
}
.version-button {
color: $color-volcano;
text-decoration: none;
}
.delete-snapshot-button {
display: none;
}
&.disabled {
color: $color-alto;
&:hover {
background-color: $color-concrete;
}
}
&.repository-snapshot-item:hover,
&.live-version-item:hover {
background-color: $color-alto;
.delete-snapshot-button {
display: block;
}
}
&.active {
background-color: $brand-primary;
&:hover {
background-color: $brand-primary;
}
.list-group-item-heading,
.list-group-item-text,
.delete-snapshot-button {
background: transparent;
color: $color-white;
&:hover {
border-color: $color-white;
}
}
}
}
.repository-snapshot-item:not(.provisioning){
cursor: pointer;
}
.create-snapshot-item {
border-bottom: 1px solid $color-alto;
padding: 12px 10px;
}
}
2020-04-08 03:02:16 +08:00
}
.update-repository-record-modal {
.rows-list-container {
display: flex;
margin: 0 -10px;
.header {
font-weight: bold;
.fas {
margin-right: 3px;
}
}
.rows-list {
background: $color-concrete;
height: 170px;
list-style: none;
overflow: hidden;
padding-left: 16px;
position: relative;
li {
margin: 6px 0;
}
}
.rows-to-assign,
.rows-to-unassign {
flex-grow: 1;
margin: 0 10px;
}
.rows-to-assign .header .fas {
color: $brand-success;
}
.rows-to-unassign .header .fas {
color: $brand-danger;
}
}
}
@media (max-width: 700px) {
#myModuleRepositoryFullViewModal {
.modal-dialog {
.modal-content {
grid-template-areas: 'header'
'table'
'sidebar';
grid-template-columns: 100%;
grid-template-rows: 55px calc(100% - 55px) 0;
&.show-sidebar {
grid-template-columns: 100%;
grid-template-rows: 55px 0 calc(100% - 55px);
.modal-body {
overflow: hidden;
}
}
}
}
.sidebar-collapse-button {
transform: rotateZ(90deg);
}
}
}