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

648 lines
10 KiB
SCSS
Raw Normal View History

// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
@import 'constants';
2016-02-12 23:52:43 +08:00
@import "mixins";
// Some color definitions
2018-05-12 00:02:17 +08:00
$color-group-hover: $color-alabaster;
$color-module-hover: $brand-primary;
2016-02-12 23:52:43 +08:00
#new-project-modal,
#edit-project-modal,
#copy-to-repository-modal {
2018-05-18 22:24:24 +08:00
.btn-group label.btn-toggle:not(.active) {
background-color: $color-white;
border-color: $color-silver;
color: $color-emperor;
}
}
/* Secondary navigation */
.navbar-nav {
.btn-group .btn-toggle:not(.active) {
background-color: $color-white;
border-color: $color-silver;
color: $color-emperor;
}
.projects-view-mode-switch {
margin: 10px;
}
}
2016-02-12 23:52:43 +08:00
/* Canvas index page */
#canvas-container:not(.canvas-container-edit-mode) {
margin-top: 20px;
}
/**********************************
* jsPlumb CANVAS RELATED STYLING *
*********************************/
#diagram-buttons {
margin-bottom: 10px;
}
#update-canvas {
#canvas-new-module {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn:first-child {
border-bottom-left-radius: 0;
}
.btn-group > .btn:last-child {
border-bottom-right-radius: 0;
}
}
#canvas-new-module {
.hbtn-default {
opacity: 1;
width: 0;
float: none;
}
.hbtn-hover {
opacity: 0;
width: 0;
height: 0;
float: left;
}
&:hover {
.hbtn-default {
opacity: 0;
height: 0;
float: left;
}
.hbtn-hover {
opacity: 1;
float: none;
}
}
}
#diagram-container {
2018-05-14 18:08:45 +08:00
@include box-shadow(0 0 2px 1px $color-silver);
2018-05-12 00:02:17 +08:00
background: $color-silver;
2016-02-12 23:52:43 +08:00
cursor: move;
2018-05-14 18:08:45 +08:00
height: 650px;
overflow: hidden;
// for IE10+ touch devices
touch-action: none;
2016-02-12 23:52:43 +08:00
}
.diagram {
position: relative;
display: block;
.window:hover {
@include box-shadow(2px 2px 19px $color-emperor);
}
.hover {
border: 1px dotted red;
}
._jsPlumb_connector {
z-index: 4;
}
._jsPlumb_endpoint_anchor {
}
._jsPlumb_endpoint, ._jsPlumb_endpoint_full {
z-index: 21;
cursor: pointer;
}
._jsPlumb_overlay, .endpointTargetLabel, .endpointSourceLabel {
z-index: 21;
background-color: $color-white;
cursor: pointer;
}
.connLabel {
background-color: $color-white;
color: $color-dove-gray;
padding: 0px 7px 2px 7px;
font: 20px arial;
font-weight: bold;
border-radius: 50%;
z-index: 5;
cursor: pointer;
&:hover {
2018-03-28 19:54:01 +08:00
color: $brand-primary;
2016-02-12 23:52:43 +08:00
padding: 2px 9px 4px 9px;
}
}
}
.window._jsPlumb_connected {
border: 2px solid green;
}
.jsplumb-drag .title {
2018-03-28 19:54:01 +08:00
background-color: $brand-primary !important;
2016-02-12 23:52:43 +08:00
color: $color-white !important;
}
path, ._jsPlumb_endpoint {
cursor: pointer;
}
.ep-normal svg * {
fill: $color-white;
}
.ep-hover svg * {
2018-03-28 19:54:01 +08:00
fill: $brand-primary;
2016-02-12 23:52:43 +08:00
}
/* EDIT MODE MODULE */
.module.new {
opacity: 0.7;
}
.module.dragged > .panel-heading {
2018-03-28 19:54:01 +08:00
background-color: $brand-primary;
2016-02-12 23:52:43 +08:00
color: $color-white;
}
.module.collided {
.overlay {
display: block;
z-index: 21;
2018-03-28 19:54:01 +08:00
background-color: $brand-danger;
border: 1px solid $brand-danger;
@include box-shadow(0 0 0 1pt $brand-danger);
2016-02-12 23:52:43 +08:00
border-radius: 4px;
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0.7;
}
}
.module {
cursor: pointer;
display: block;
2016-08-23 19:51:20 +08:00
position: absolute;
width: 290px;
2016-02-12 23:52:43 +08:00
.panel-heading {
height: 40px;
.dropdown {
bottom: 18px;
left: 0;
}
}
.panel-body {
2016-08-23 22:08:05 +08:00
height: 90px;
2016-02-12 23:52:43 +08:00
}
.ep {
font-style: italic;
}
.dropdown {
.dropdown-toggle {
color: $color-silver-chalice;
}
.dropdown-menu {
z-index: 30;
}
}
.overlay {
display: none;
}
}
/* FULL-ZOOM MODULE */
.module-large {
cursor: pointer;
display: block;
position: absolute;
width: 300px;
2016-02-12 23:52:43 +08:00
z-index: 5;
.panel-body .due-date-link {
color: $color-emperor;
}
.panel-body .due-date-label {
margin-left: 30px;
}
2016-02-12 23:52:43 +08:00
&.expanded {
z-index: 30;
}
&.group-hover {
2016-10-13 16:11:32 +08:00
@include box-shadow(0 0 0 5px $color-group-hover);
2016-02-12 23:52:43 +08:00
}
&.module-hover {
2016-10-13 16:11:32 +08:00
@include box-shadow(0 0 0 5px $color-module-hover);
2016-02-12 23:52:43 +08:00
}
&.alert-green .panel-body {
2018-03-28 19:54:01 +08:00
color: $brand-success;
font-weight: bold;
.due-date-link {
2018-03-28 19:54:01 +08:00
color: $brand-success;
}
}
2016-02-12 23:52:43 +08:00
&.alert-yellow .panel-body {
2018-03-28 19:54:01 +08:00
color: $brand-warning;
2016-02-12 23:52:43 +08:00
font-weight: bold;
.due-date-link {
2018-03-28 19:54:01 +08:00
color: $brand-warning;
2016-02-12 23:52:43 +08:00
}
}
&.alert-red .panel-body {
2018-03-28 19:54:01 +08:00
color: $brand-danger;
2016-02-12 23:52:43 +08:00
font-weight: bold;
.due-date-link {
2018-03-28 19:54:01 +08:00
color: $brand-danger;
2016-02-12 23:52:43 +08:00
}
}
}
/* MEDIUM-ZOOM MODULE */
.module-medium {
width: 200px;
cursor: pointer;
position: absolute;
display: block;
z-index: 5;
&.group-hover {
2016-10-13 16:11:32 +08:00
@include box-shadow(0 0 0 5px $color-group-hover);
2016-02-12 23:52:43 +08:00
}
&.module-hover {
2016-10-13 16:11:32 +08:00
@include box-shadow(0 0 0 5px $color-module-hover);
2016-02-12 23:52:43 +08:00
}
&.alert-green {
2018-03-28 19:54:01 +08:00
border-color: $brand-success;
border-radius: 8px;
border-width: 4px;
}
2016-02-12 23:52:43 +08:00
&.alert-yellow {
2018-03-28 19:54:01 +08:00
border-color: $brand-warning;
2016-02-12 23:52:43 +08:00
border-width: 4px;
border-radius: 8px;
}
&.alert-red {
2018-03-28 19:54:01 +08:00
border-color: $brand-danger;
2016-02-12 23:52:43 +08:00
border-width: 4px;
border-radius: 8px;
}
}
.module-large .tags-container,
.module-medium .tags-container {
padding-top: 2px;
div {
font-size: 22pt;
width: 4px;
height: 0px;
display: inline-block;
& .fas {
2016-02-12 23:52:43 +08:00
position: inherit;
}
&.last {
margin-right: 15px;
color: $color-silver-chalice;
}
}
& span.badge {
margin-left: -8px;
margin-top: -10px;
margin-right: 4px;
}
}
/* SMALL-ZOOM MODULE */
.module-small {
width: 50px;
height: 50px;
border-radius: 50%;
border: 6px solid $color-white;
@include box-shadow(inset 5px 5px 45px -6px $color-dove-gray);
background-color: $color-alto;
cursor: pointer;
position: absolute;
display: block;
text-align: center;
z-index: 5;
color: black;
span {
font-weight: bold;
2018-03-30 15:54:57 +08:00
font-size: $font-size-large;
2016-02-12 23:52:43 +08:00
text-transform: uppercase;
display: block;
margin-top: 20%;
a {
2018-03-28 19:54:01 +08:00
color: $color-emperor;
2016-02-12 23:52:43 +08:00
}
}
&.group-hover {
2016-10-13 16:11:32 +08:00
@include box-shadow(0 0 0 5px $color-group-hover);
2016-02-12 23:52:43 +08:00
}
&.module-hover {
2016-10-13 16:11:32 +08:00
@include box-shadow(0 0 0 5px $color-module-hover);
2016-02-12 23:52:43 +08:00
}
&.alert-green {
2018-03-28 19:54:01 +08:00
border-color: $brand-success;
}
2016-02-12 23:52:43 +08:00
&.alert-yellow {
2018-03-28 19:54:01 +08:00
border-color: $brand-warning;
2016-02-12 23:52:43 +08:00
}
&.alert-red {
2018-03-28 19:54:01 +08:00
border-color: $brand-danger;
2016-02-12 23:52:43 +08:00
}
}
/* Sidebar hovered style */
li.group-hover {
background-color: $color-silver;
border-radius: 4px;
}
li.module-hover {
a {
2018-03-28 19:54:01 +08:00
color: $brand-primary;
2016-02-12 23:52:43 +08:00
text-decoration: underline;
}
}
/* Edit module tags modal window */
#manage-module-tags-modal {
.add-tag-form {
display: inline-block;
margin-left: 15px;
}
2016-02-12 23:52:43 +08:00
.modal-body ul.list-group > li {
padding-top: 2px;
padding-bottom: 2px;
& > div.tag-show {
color: $color-white;
form {
display: inline-block;
.btn-link {
margin-top: 4px;
}
}
}
& > div.tag-edit {
.form-group {
margin-bottom: 2px;
margin-top: 3px;
}
.dropdown-colorselector {
display: inline-block;
.btn-colorselector {
height: 30px;
width: 30px;
margin-top: 5px;
font-family: 'Glyphicons Halflings';
color: $color-white;
2018-03-30 15:54:57 +08:00
font-size: $font-size-large;
2016-02-12 23:52:43 +08:00
&:before {
content: "\e221";
margin-left: 6px;
}
}
}
}
.fas {
2016-02-12 23:52:43 +08:00
color: $color-white;
2018-03-30 15:54:57 +08:00
font-size: $font-size-h6;
2016-02-12 23:52:43 +08:00
}
a.btn-link {
padding-top: 10px;
}
}
.well {
margin-bottom: 0;
& .bootstrap-select {
width: 150px !important;
}
}
.create-new-tag-btn {
margin-right: 15px;
margin-top: 10px;
2016-02-12 23:52:43 +08:00
}
}
2019-01-18 22:57:44 +08:00
#project-show {
@media (min-width: 1400px) {
.col-md-6 {
width: 33.33%; // fallback if needed
width: calc(100% / 3);
2019-01-18 22:57:44 +08:00
}
}
}
// EXPERIMENT PANEL
2016-08-09 20:26:08 +08:00
.experiment-panel {
@include box-shadow(0 4px 8px 0 $color-dove-gray);
2019-01-18 23:16:00 +08:00
display: flex;
flex-direction: column;
2019-01-18 22:57:44 +08:00
height: 400px;
margin: 0 auto;
margin-bottom: 35px;
margin-top: 45px;
max-width: 700px;
2019-01-18 22:57:44 +08:00
.panel-title {
margin-bottom: 14px;
}
.panel-heading .clone-experiment,
.panel-heading .dropdown {
display: none;
}
&:hover .clone-experiment,
&:hover .dropdown {
display: block;
}
.panel-date {
color: $color-silver-chalice;
}
.panel-heading > .clone-experiment {
2019-01-18 22:57:44 +08:00
color: $color-silver-chalice;
padding-left: 4px;
2019-01-18 23:16:00 +08:00
padding-top: 2px;
2019-01-18 22:57:44 +08:00
}
.dropdown {
color: $color-silver-chalice;
2019-01-18 23:16:00 +08:00
2019-01-18 22:57:44 +08:00
button {
padding-left: 6px;
}
}
.panel-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
height: 100%;
a {
height: 100%;
}
}
.experiment-description {
margin-top: 10px;
2019-01-18 23:16:00 +08:00
max-height: 86px;
overflow-x: hidden;
2019-01-18 22:57:44 +08:00
p {
margin: 0;
}
}
.experiment-no-description {
color: $color-alto;
display: block;
2019-01-18 22:57:44 +08:00
font-size: $font-size-large;
font-weight: bold;
2019-01-18 22:57:44 +08:00
margin-top: 10px;
text-align: center;
}
.no-workflowimg {
color: $color-alto;
display: block;
font-size: 22px;
font-weight: bold;
margin: 15px 0;
2019-01-18 23:16:00 +08:00
max-height: 200px;
padding-bottom: 70px;
2019-01-18 22:57:44 +08:00
padding-top: 50px;
text-align: center;
}
}
2016-08-17 15:44:23 +08:00
2016-08-09 20:26:08 +08:00
.workflowimg-container {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
img {
2019-01-18 22:57:44 +08:00
max-height: 190px;
max-width: 100%;
}
2016-08-09 20:26:08 +08:00
}
2016-08-17 15:44:23 +08:00
// SHOW
2016-08-17 15:44:23 +08:00
.center-btn {
display: block;
margin: 0 auto;
max-width: 200px;
}
2016-08-22 21:27:11 +08:00
.big-plus {
color: $color-gainsboro;
display: block;
2019-01-18 22:57:44 +08:00
font-size: 180px;
margin: 20px 0;
2016-08-22 21:27:11 +08:00
text-align: center;
&:hover {
color: $color-alto;
}
2016-08-22 21:27:11 +08:00
&:focus {
color: $color-alto;
}
}
/// icon override
.panel-project {
.nav-tabs[data-hook="project-footer-icons"] {
.btn-link {
display: inline-block;
min-width: 30px;
}
.badge-indicator {
background: transparent;
color: $color-silver-chalice;
font-size: 12px;
margin-left: 0;
padding: 0;
top: 0;
}
}
.tab-content[data-hook="project-dropdown-panel"] {
.over-due {
.title {
border-top: 1px solid $color-concrete;
font-size: 14px;
line-height: 15px;
padding: 10px 15px 0;
}
.notification {
padding-left: 35px;
.date-time {
position: relative;
.fas {
font-size: 14px;
left: -20px;
position: absolute;
top: 2px;
}
}
}
}
}
}