diff --git a/app/assets/stylesheets/my_modules.scss b/app/assets/stylesheets/my_modules.scss index 79b2d7112..67df09ade 100644 --- a/app/assets/stylesheets/my_modules.scss +++ b/app/assets/stylesheets/my_modules.scss @@ -138,6 +138,12 @@ width: 100%; } } + + form:not([novalidate]):invalid { + .control-label { + color: $brand-danger; + } + } } // Mobile view diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss index 36433fdda..c32b724da 100644 --- a/app/assets/stylesheets/my_modules/protocols/index.scss +++ b/app/assets/stylesheets/my_modules/protocols/index.scss @@ -486,6 +486,11 @@ .dropdown-footer { display: flex; padding: 16px; + + .button-container { + margin-left: auto; + margin-right: auto; + } } } } @@ -588,36 +593,6 @@ } } -.task-information .expanded { - align-items: flex-start; - height: 50px; - - .task-flows, - .status-label, - .status-buttons { - display: block; - max-width: 230px; - } - - .status-label { - margin: 0; - text-align: left; - } - - .status-flow-dropdown { - margin: 0; - } - - .status-buttons > :not(:first-child):not(.dropdown-menu) { - margin-left: 0; - margin-top: .5em; - } - - .modal .modal-footer .btn { - margin-top: 0; - } -} - @media (max-width: 810px) { .task-information .task-section-header { display: block; @@ -656,10 +631,13 @@ .dropdown-footer { display: block; - .btn { - float: left !important; - margin: 5px 0; - width: auto; + .button-container { + display: flex; + + .btn { + margin: 5px auto; + width: 230px; + } } } } diff --git a/app/assets/stylesheets/protocols/protocol.scss b/app/assets/stylesheets/protocols/protocol.scss index 657616687..a05703c9c 100644 --- a/app/assets/stylesheets/protocols/protocol.scss +++ b/app/assets/stylesheets/protocols/protocol.scss @@ -37,6 +37,10 @@ border: $border-focus; } } + + .sci-inline-edit__content { + padding-top: .35em; + } } * { diff --git a/app/assets/stylesheets/steps/components/checklist.scss b/app/assets/stylesheets/steps/components/checklist.scss index 90411c0cc..70e9a5dd3 100644 --- a/app/assets/stylesheets/steps/components/checklist.scss +++ b/app/assets/stylesheets/steps/components/checklist.scss @@ -7,6 +7,7 @@ .sci-inline-edit__content { margin-bottom: 7px; + margin-left: 0; } } @@ -17,7 +18,7 @@ .step-element-header { .step-element-name { align-items: flex-start; - column-gap: .5em; + column-gap: .25em; display: grid; font-weight: normal; grid-template-columns: max-content auto; diff --git a/app/assets/stylesheets/steps/step.scss b/app/assets/stylesheets/steps/step.scss index f35f6abd6..bfafc9cad 100644 --- a/app/assets/stylesheets/steps/step.scss +++ b/app/assets/stylesheets/steps/step.scss @@ -20,17 +20,23 @@ position: relative; .step-name-edit-icon { - display: none; + background: linear-gradient(90deg, + transparent, + $color-concrete 15%, + $color-concrete 100%); + cursor: pointer; + opacity: 0; position: absolute; - right: -8px; - top: -6px; + right: 0; + top: 0; + + &:hover { + background: $color-concrete; + } } &:hover .step-name-edit-icon { - cursor: pointer; - display: inline-block; - margin-right: 16px; - margin-top: 16px; + opacity: 1; } .step-collapse-link { diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue index 6479a4f0d..3e8786b2b 100644 --- a/app/javascript/vue/protocol/step.vue +++ b/app/javascript/vue/protocol/step.vue @@ -52,7 +52,9 @@ @update="updateName" /> - +