scinote-web/app/assets/stylesheets/my_modules/protocols/index.scss

306 lines
5.1 KiB
SCSS
Raw Normal View History

2019-04-26 21:38:33 +08:00
// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
// scss-lint:disable SelectorFormat
// scss-lint:disable ImportantRule
2019-02-25 20:04:58 +08:00
@import "constants";
@import "mixins";
#manage-module-tags-modal {
.well {
border: 0;
box-shadow: none;
}
}
.module-header {
display: inline-block;
position: relative;
width: 100%;
+ .protocol-title {
font-size: 22px;
font-weight: bold;
margin: 10px 0 15px;
}
2019-11-21 19:14:43 +08:00
.fas.block-icon {
color: $color-silver;
font-size: 18px;
margin-right: 5px;
}
.header-container {
display: flex;
flex-wrap: wrap;
float: left;
2019-11-21 19:14:43 +08:00
margin-bottom: 10px;
2019-10-04 21:17:28 +08:00
width: calc(100% - 280px);
.flex-block {
2019-11-21 19:14:43 +08:00
align-items: center;
display: flex;
flex-grow: 1;
2019-11-21 19:14:43 +08:00
margin-right: 10px;
2019-07-09 20:00:53 +08:00
2019-11-21 19:14:43 +08:00
.flex-block-label {
align-items: center;
display: flex;
margin-right: 3px;
}
}
.due-date-container {
align-items: center;
display: inline-flex;
.date-text {
border: 1px solid transparent;
font-weight: bold;
line-height: 34px;
margin-right: 25px;
2019-11-21 19:14:43 +08:00
padding: 0 3px;
position: relative;
&.alert-green {
color: $brand-success;
}
&.alert-yellow {
color: $brand-warning;
}
&.alert-red {
color: $brand-danger;
}
.clear-date {
color: $color-silver;
cursor: pointer;
display: none;
font-size: 20px;
left: 100%;
2019-11-25 04:11:32 +08:00
line-height: 34px;
margin-left: 5px;
position: absolute;
top: 0;
}
2019-11-21 19:14:43 +08:00
}
.datetime-picker-container {
color: $color-emperor;
left: 0;
position: absolute;
top: 0;
width: 100%;
#calendar-due-date {
opacity: 0;
}
2019-11-27 19:34:54 +08:00
.fa-calendar-alt {
display: none;
}
2019-11-21 19:14:43 +08:00
}
&:hover {
.date-text[data-editable=true] {
border-color: $color-silver;
border-radius: 3px;
.clear-date {
display: inline;
}
}
2019-07-09 20:00:53 +08:00
}
2019-02-25 20:04:58 +08:00
}
}
2019-02-25 20:04:58 +08:00
.complete-button-container {
float: right;
width: 260px;
2019-02-25 20:04:58 +08:00
.my_module-state-buttons {
padding-top: 0;
2019-02-25 20:04:58 +08:00
}
}
.module-description {
float: left;
width: 100%;
.no-description {
font-size: 16px;
}
.title {
font-size: 22px;
font-weight: bold;
2019-05-14 15:43:02 +08:00
padding: 20px 0 5px;
}
.my-module-description-content {
margin-left: 10px;
}
}
.module-tags {
float: left;
width: 100%;
#module-tags {
2019-11-21 19:14:43 +08:00
align-items: center;
display: flex;
width: 100%;
}
2019-10-18 17:31:13 +08:00
.dropdown-selector-container {
.my-module-white-tags {
color: $color-white;
}
.my-module-tags-color {
border-radius: 8px;
display: inline-block;
height: 16px;
margin-right: 5px;
width: 16px;
}
.my-module-tags-create-new {
opacity: .6;
}
.input-field {
border: 1px solid transparent;
padding-right: 110px;
}
&.open {
2019-10-18 17:36:56 +08:00
.input-field {
border: 1px solid $color-alto;
2019-10-18 17:31:13 +08:00
}
}
2019-11-27 19:34:54 +08:00
&:not(.view-mode):hover {
2019-10-18 17:31:13 +08:00
.input-field {
border: 1px solid $color-gainsboro;
}
}
}
.badge-icon {
display: inline-block;
line-height: 32px;
padding: 0 5px 0 0;
2019-05-14 15:43:02 +08:00
width: 28px;
}
.tags-title {
display: inline-block;
2019-05-14 15:43:02 +08:00
font-size: 14px;
line-height: 32px;
2019-05-14 15:43:02 +08:00
width: 37px;
}
.select-container {
display: flex;
flex-basis: 100px;
flex-grow: 1;
flex-shrink: 1;
2019-05-14 15:43:02 +08:00
max-width: calc(100% - 65px);
position: relative;
2019-10-18 17:31:13 +08:00
z-index: 110;
select {
display: none;
}
.edit-button-container {
2019-10-18 17:31:13 +08:00
height: 36px;
padding-right: 10px;
position: absolute;
right: 0;
text-align: right;
top: 0;
width: 120px;
2019-10-18 17:31:13 +08:00
z-index: 20;
&.hidden {
display: none;
}
a {
color: inherit;
display: inline-block;
2019-10-18 17:31:13 +08:00
line-height: 36px;
opacity: .7;
text-decoration: none;
i {
float: left;
2019-04-26 21:38:33 +08:00
font-size: 16px;
2019-10-18 17:31:13 +08:00
line-height: 36px;
margin-right: 5px;
2019-04-26 21:38:33 +08:00
padding-top: 1px;
}
span {
float: left;
2019-10-18 17:31:13 +08:00
line-height: 36px;
}
}
}
}
}
2019-02-25 20:04:58 +08:00
}
2019-04-26 21:38:33 +08:00
.my-module-recent-protocols {
flex-grow: 1;
height: 36px;
margin-bottom: 5px;
position: relative;
.btn-group {
align-items: center;
display: flex;
float: right;
height: 33px;
}
.title {
font-size: 14px;
}
.dropdown-button {
cursor: pointer;
padding: 10px 5px;
}
.dropdown-menu {
left: auto;
padding: 0;
right: 0;
width: 402px;
.protocol {
cursor: pointer;
display: inline-block;
float: left;
padding: 5px 10px;
transition: $md-transaction;
width: 200px;
&:hover {
background: $color-gainsboro;
}
.fas {
margin-right: 5px;
}
}
}
}