scinote-web/app/assets/stylesheets/protocol_management.scss

426 lines
7.7 KiB
SCSS
Raw Normal View History

// scss-lint:disable SelectorDepth, NestingDepth, SelectorFormat, ImportantRule, QualifyingElement, IdSelector
@import "constants";
2018-05-12 00:02:17 +08:00
2018-03-29 19:58:14 +08:00
.btn-open-file {
overflow: hidden;
position: relative;
2018-03-29 19:58:14 +08:00
> input[type=file] {
background: $color-white;
cursor: inherit;
display: block;
filter: alpha(opacity = 0);
2018-03-29 19:58:14 +08:00
font-size: 100px;
min-height: 100%;
min-width: 100%;
2018-03-29 19:58:14 +08:00
opacity: 0;
outline: none;
position: absolute;
right: 0;
text-align: right;
top: 0;
2018-03-29 19:58:14 +08:00
}
}
2018-05-12 00:02:17 +08:00
2018-05-18 22:57:18 +08:00
#protocols-index,
#load-from-repository-modal {
2018-05-12 00:02:17 +08:00
padding: 0;
.nav-tabs > li {
text-transform: uppercase;
a {
color: $color-silver-chalice;
padding: 15px 20px;
}
2018-05-14 18:08:45 +08:00
a:hover {
border-color: $color-white;
}
2018-05-12 00:02:17 +08:00
}
2018-05-14 18:08:45 +08:00
.nav > li > a:hover,
.nav > li > a:focus {
2018-05-12 00:02:17 +08:00
background-color: $color-white;
color: $color-emperor;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
background-color: $color-white;
border: 0;
box-shadow: 0 4px 0 $brand-primary;
color: $color-emperor;
font-weight: bold;
margin-bottom: 4px;
}
.tab-pane-settings {
border: 0;
2019-07-09 20:35:40 +08:00
height: calc(100vh - 167px);
}
}
.tab-pane.external_protocols {
padding-bottom: 0;
}
.external-protocols-tab {
2019-07-09 20:35:40 +08:00
display: flex;
flex-direction: column;
height: 100%;
position: relative;
.ps__rail-y {
opacity: .6;
}
2019-07-09 20:35:40 +08:00
.header {
display: flex;
2019-07-09 20:35:40 +08:00
flex-wrap: wrap;
2019-07-09 20:35:40 +08:00
.protocols-search-bar-panel {
align-items: center;
2019-07-09 20:35:40 +08:00
display: flex;
flex-basis: 500px;
flex-direction: row;
justify-content: space-between;
margin-bottom: 15px;
padding-right: 0;
2019-07-09 20:35:40 +08:00
.service-provider {
align-items: center;
display: flex;
width: 120px;
}
2019-07-09 20:35:40 +08:00
.protocolsio-logo {
height: 30px;
width: 30px;
}
2019-07-09 20:35:40 +08:00
.protocolsio-title {
font-size: 14px;
margin-left: 3px;
vertical-align: middle;
}
2019-07-09 20:35:40 +08:00
.input-group {
margin-bottom: 0;
width: calc(100% - 130px);
.form-control {
border-radius: 4px;
padding-right: 34px;
}
.input-group-addon {
align-items: center;
background: transparent;
border: 0;
color: $color-silver-chalice;
display: flex;
height: 34px;
justify-content: center;
position: absolute;
right: 0;
top: 0;
width: 34px;
z-index: 5;
}
}
}
2019-07-09 20:35:40 +08:00
.protocol-sort {
padding-left: 7px;
2019-07-09 20:35:40 +08:00
span {
color: $color-silver-chalice;
font-size: 14px;
}
2019-07-09 20:35:40 +08:00
.btn-group {
margin-bottom: 10px;
margin-top: 6px;
padding-left: 3px;
2019-07-09 20:35:40 +08:00
label {
padding-bottom: 0;
padding-top: 0;
2019-07-09 20:35:40 +08:00
&.active {
background: $color-gainsboro;
border-radius: 5px !important;
color: $color-emperor;
outline: 0;
2019-07-09 20:35:40 +08:00
}
}
}
}
}
2019-07-09 20:35:40 +08:00
.main-protocol-panel {
display: flex;
flex-grow: 1;
left: -15px;
position: relative;
width: calc(100% + 30px);
2019-07-09 20:35:40 +08:00
}
.protocol-list-side-panel {
background-color: $color-white;
border-right: 1px solid $color-alto;
border-top: 1px solid $color-alto;
flex-grow: 1;
max-width: 600px;
min-width: 400px;
padding-left: 15px;
2019-06-13 05:44:31 +08:00
padding-right: 0;
position: relative;
width: calc(100% / 3);
.row {
margin-left: 0;
margin-right: 0;
}
// When no search result is present
.empty-text {
color: $color-silver-chalice;
font-size: 13px;
margin-top: 20px;
text-align: center;
width: calc(100% - 15px);
}
.list-wrapper {
height: 100%;
overflow: hidden;
position: absolute;
width: calc(100% - 15px);
}
.protocol-card {
border: 2px solid transparent;
box-shadow: 0 0 0 0 $color-alto;
cursor: pointer;
2019-07-09 20:35:40 +08:00
margin-right: 15px;
padding: 12px;
position: relative;
transition: .3s;
&::after {
background: $color-gainsboro;
bottom: -2px;
content: "";
height: 1px;
left: 0;
position: absolute;
width: 100%;
}
.card-footer {
align-items: center;
display: flex;
height: 30px;
.info-line.button {
flex-grow: 1;
}
}
&.active {
border: 2px solid $brand-primary;
border-radius: 2px;
box-shadow: 0 1px 4px 0 $color-alto;
&::after {
display: none;
}
}
2019-06-28 06:47:08 +08:00
&:hover {
background-color: $brand-primary-light;
2019-06-28 06:47:08 +08:00
}
.external-import-btn {
display: none;
}
&:hover .external-import-btn,
&.active .external-import-btn {
display: block;
float: right;
}
}
.protocol-title {
color: $brand-primary;
font-size: 16px;
}
.info-line {
color: $color-dove-gray;
font-size: 13px;
2019-06-28 16:41:20 +08:00
padding-left: 0;
padding-right: 0;
}
.show-more-protocols-btn {
margin: 15px 0;
width: calc(100% - 15px);
}
}
.protocol-preview-panel {
background-color: $color-concrete;
border-top: 1px solid $color-alto;
flex-grow: 2;
2019-06-13 05:44:31 +08:00
padding-left: 0;
padding-right: 0;
position: relative;
width: calc((100% / 3) * 2);
.row {
margin-left: 0;
margin-right: 0;
}
// Empty texts on the right
.empty-preview-panel {
padding-top: 79px;
user-select: none;
.protocol-preview-text {
color: $color-silver-chalice;
font-size: 24px;
}
.protocol-preview-subtext {
color: $color-silver-chalice;
font-size: 14px;
}
.text-rows {
text-align: center;
}
.text-separator hr {
border: 1px solid $color-alto;
width: 120px;
}
}
.full-preview-panel {
height: 100%;
}
.preview-banner {
align-items: center;
background-color: $color-white;
border-bottom: 1px solid $color-alto;
color: $color-dove-gray;
display: flex;
font-size: 16px;
height: 40px;
padding-left: 21px;
.txt-holder {
padding-left: 0;
}
.btn-holder {
padding-right: 21px;
}
}
.preview-holder {
height: calc(100% - 40px);
margin: 0 21px 40px;
max-width: 900px;
overflow: hidden;
position: absolute;
width: calc(100% - 42px);
.preview-iframe {
2019-06-20 05:37:04 +08:00
border: 0;
width: 100%;
}
}
2018-05-12 00:02:17 +08:00
}
.external-import-btn {
background-color: $brand-primary;
2019-07-09 20:35:40 +08:00
border: 0;
color: $color-white;
font-size: 12px;
padding-bottom: 3px;
padding-top: 3px;
}
2019-07-09 20:35:40 +08:00
.footer {
background: $color-white;
bottom: -30px;
box-shadow: 0 -1px 4px 0 $color-gainsboro;
height: 30px;
left: -15px;
position: absolute;
width: calc(100% + 30px);
}
}
@media (max-width: 900px) {
.external-protocols-tab {
.header {
.protocol-sort {
padding-left: 0;
}
.protocols-search-bar-panel {
flex-basis: 100%;
}
}
.main-protocol-panel {
display: block;
left: -15px;
position: relative;
width: calc(100% + 30px);
2019-07-09 20:35:40 +08:00
.protocol-list-side-panel {
border-right: 0;
height: 200px;
max-width: 100%;
2019-07-09 20:35:40 +08:00
width: 100%;
}
.protocol-preview-panel {
height: calc(100% - 200px);
position: relative;
width: 100%;
}
}
}
}
@media (min-width: 1520px) {
.external-protocols-tab {
.main-protocol-panel {
.protocol-preview-panel {
.preview-holder {
margin: 0 calc(50% - 450px) 40px;
}
2019-07-09 20:35:40 +08:00
}
}
}
2018-05-12 00:02:17 +08:00
}