/* ================================================ */ /* FORM Styling */ /* The top of this file is generic form styles and */ /* the bottom contains page specific changes to the generic */ /* ================================================ */ textarea, input[type="text"], input[type="email"], input[type="password"], input[type="search"], select { font-family: $font-family; font-size: 14px; border-radius: 3px; line-height: 30px; min-width: 150px; height: 30px; padding-left: 10px; margin: 5px 15px 15px 0; border: 1px solid $medium-grey; } input[type="checkbox"], input[type="radio"], select { border: 1px solid $medium-grey; } /* Tinymce control hover (e.g. bold, italic, etc.) */ .mce-btn button:hover { background-color: $white; } textarea:focus, select:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: 0 0 8px $light-grey; } select { margin-top: 10px; vertical-align: top; height: 25px; } select[multiple="true"], select[multiple="multiple"] { height: 65px; } .checkbox-label { display: inline-block; font-size: 1em; margin: 0; padding: 2px; } .checkbox-input { border: none; vertical-align: middle; height: 17px; margin: 0 4px 0 0; padding: 0; } form, fieldset { border: 0; } div.under-input { display: block; margin: -5px 0 10px; label { font-weight: normal; } } /* Roadmap Form Styling */ /* ------------------------------------------------ */ form.roadmap-form { text-align: top; div.form-separator { width: 75%; margin: 25px auto; border-bottom: 1px solid $dark-grey; } fieldset.padded { padding: 10px 10px 25px 10px; } /* Fieldset with labels over inputs */ /* -------------------------------- */ fieldset.standard { padding: 5px; background-color: $white; text-align: left; margin-bottom: 25px; div.form-separator { margin-left: 15px; } .mce-tinymce { display: inline-block; margin: 10px 5px 15px 15px; width: 70%; } label, input[type="checkbox"], .combobox-container, .left-indent { margin-left: 15px; } input[type="text"], select { margin-bottom: 15px; } input[type="checkbox"] { vertical-align: top; } label:not(.checkbox-label) { display: block; } input, select { margin-bottom: 15px; } .checkbox-label { font-weight: normal; display: inline-block; margin-left: 5px; } } /* Fieldset with labels to the left of inputs */ /* ------------------------------------------ */ fieldset.side-by-side { border: 0; .mce-tinymce { display: inline-block; margin-bottom: 15px; width: 51%; } div.under-input { margin-left: 25%; label { width: auto; } } div { label, .button-spacer, div.read-only, input[type="checkbox"], .combobox-container, .identifier-scheme { display: inline-block; } .identifier-scheme-indent { margin-left: -5px; } label, .button-spacer { width: 25%; text-align: right; margin-right: 10px; vertical-align: middle; } label.align-top { vertical-align: top; } input.form-submit, button.form-cancel { font-size: 10pt; text-decoration:none; } div.read-only{ margin-bottom: 15px; } } } /* Generic Fieldset Settings */ fieldset legend { font-family: $header-font; color: $primary-color; font-size: 26px; font-weight: normal; text-decoration: none; margin-top: 10px; margin-bottom: 20px; padding-left: 5px; float: left; /* positions the legend within the fieldset box */ border-bottom: none; } label:not(.regular-text) { font-weight: bold; } label:not(.no-colon):not(.checkbox-label):after { content: " :"; } label.required:before { content: "* "; } .form-input { clear: both; } .input-full-width { width: 95%; } .input-extra-large { width: 70%; } .input-large { width: 50%; } .input-medium { width: 30%; } select.input-medium { width: 32%; } .input-small { width: 10%; } /* Used for the jquery autocomplete combobox on side-by-side fieldsets */ .fixed-width-large { width: 550px; } input.form-submit[aria-disabled='true'] { background-color: $disabled-button-color; } input.form-submit:focus + [role="tooltip"] { display: inline-block; } button.form-cancel { background-color: $cancel-button-color; color: $white; } /* Tooltip */ .arrow-left { display: inline-block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid $dark-grey; } input.small-input-button { width: 150px; } div.form-input { position: relative; } /* Input validation errors */ .red-border { border: 1px solid $error-color; box-shadow: 0 0 6px $error-background; } .error-tooltip, .error-tooltip-right, .submit-tooltip { display: none; width: 45%; background: $error-background; border-radius: 3px; color: $error-color; padding: 4px 6px; } .error-tooltip[role='tooltip'], .submit-tooltip[role='tooltip'] { top: 55px; left: 0; display: inline; position: absolute; z-index: 9; } .error-tooltip[role='tooltip']:before, .submit-tooltip[role='tooltip']:before { display: inline; position: absolute; top: -5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid $error-background; } .error-tooltip-right[role="tooltip"] { top: 0; left: 500px; display: inline; } .error-tooltip-right[role='tooltip']:before { display: inline; position: absolute; left: -5px; width: 0; height: 0; border-top: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid $error-background; } } /* Accessible JQuery combobox */ /* ------------------------------------------------------ */ .invisible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .combobox-container { position: relative; width: 95%; min-width: 325px; font-family: $font-family; } .combobox-suggestions { position: absolute; left: 0; width: 98%; margin-top: -10px; background: #fff; z-index: 99; } .combobox-suggestion { color: #666; border-bottom: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000; padding: 5px 10px 5px 10px; cursor: pointer; text-align: left; } .combobox-suggestion:first-child { border-top: 1px solid #000; } .combobox-suggestion:hover, .combobox-suggestion:focus { color: $white; background-color: $primary-color; } .combobox-clear-button, .combobox-clear-button:hover, .combobox-clear-button:focus { @include icon(times-circle); cursor: pointer; display: inline; position: absolute; top: 0; right: 0; margin-top: 8px; margin-right: -25px; border: none; background: transparent; color: $black; padding-top: 3px; font-size: 16pt; } /* http://geektnt.com/how-to-remove-x-from-search-input-field-on-chrome-and-ie.html */ .js-combobox[type=text]::-ms-clear { display: none; width: 0; height: 0; } .js-combobox[type=text]::-ms-reveal { display: none; width: 0; height: 0; } /* Allows for an auto-complete box in a side-by-side form */ div.accessible-combobox-smaller { position: relative; .combobox-container { width: 65%; } .js-combobox { width: 95%; } .combobox-suggestions { margin-left: 15px; width: 98% } } /* ------------------------------------------------ */ /* ------------------------------------------------ */ /* Page specific form styling */ /* ------------------------------------------------ */ /* ------------------------------------------------ */ /* Sign in/Create account and edit profile forms */ /* ------------------------------------------------ */ .omniauth-options { display: block; width: 100%; margin-bottom: 10px; .omniauth-login { display: inline-block; width: 90%; padding: 4px 12px; background-color: $primary-color; color: $white; border-radius: 5px; } } #new_user fieldset { width: 90%; padding-bottom: 15px; margin-bottom: 5px; input[type="password"], #user_password, input[type="email"] { width: 90%; } .small-header { margin-top: 0; } .checkbox-right { width: 97%; position: relative; #user_remember_me, input[type='checkbox'], .checkbox-label { float: right; } } } #edit_user fieldset { div.identifier-scheme { margin-bottom: 15px; } .checkbox-right, .checkbox-right-side-by-side { position: relative; #user_remember_me, input[type='checkbox'], .checkbox-label { float: right; } } .checkbox-right-side-by-side { width: 65%; } .checkbox-right { width: 55%; } } #new_user.register-form { .inline { width: 46%; #user_firstname, #user_surname { width: 92%; } } } div#forgot-password-link { vertical-align: bottom; margin-bottom: 5px; a:hover { color: $primary-color !important; /* Remove the important once the bootstrap_and_overrides css is gone */ } } #new_user #password-reset-form { width: 50%; } /* Shibboleth Custom Discovery Service form */ /* ------------------------------------------------ */ #shibboleth-ds { width: 50%; } form.shibboleth-ds-form { width: 55%; select { width: 85%; } input.form-submit { margin-top: 0; margin-bottom: 15px; } } div.three-column, div.two-column, div.one-column { display: inline-block; vertical-align: top; ul li { margin-top: 5px; margin-bottom: 5px; padding: 4px 12px; } ul li.separator { background-color: $medium-grey; color: $white; font-weight: bold; } } div.three-column { width: 31%; } div.two-column { width: 47%; } div.one-column { width: 95%; } /* ------------------------------------------------ */ /* Orcid Component */ /* ------------------------------------------------ */ #connect-orcid-button{ border: 1px solid #D3D3D3; padding: 5px 5px 5px 20px; background-color: #fff; border-radius: 8px; box-shadow: 1px 1px 3px #999; cursor: pointer; color: #999; font-weight: bold; font-size: .8em; line-height: 24px; text-decoration: none; vertical-align: right; background-image: url('http://orcid.org/sites/default/files/images/orcid_16x16.png'); background-repeat: no-repeat; background-position: left 5px; } #connect-orcid-button:hover{ border: 1px solid #338caf; color: #338caf; } #orcid-id-logo{ display: inline-block; vertical-align: middle; margin: 0; padding: 3px; float: left; } #orcid-id { color: #338caf; text-decoration: none; } /* View plans */ /* ------------------------------------------------ */ div.main_page_content p #create-test { vertical-align: middle; } td.plan-edit-actions { position: absolute; overflow: visible; ul { top: 8px; left: 0; li a { text-decoration: none; } } } /* Create plan */ /* ------------------------------------------------ */ #create_plan { position: relative; fieldset { margin-bottom: 10px; } #plan_title { display: block; margin-bottom: 5px; width: 90%; } div.form-left-side { position: relative; clear: both; float: left; width: 40%; } div.form-right-side { position: relative; float: left; margin-left: 20px; padding-top: 20px; width: 45%; min-width: 400px; label, input { display: inline-block; } label { width: 75%; } p { vertical-align: top; margin-top: -2px; margin: -2px -5px 0 5px; } } } /* Show/Edit plan details */ /* ------------------------------------------------ */ .project-title-container { width: 60%; } div.show-plan { width: 60%; div.side-by-side { margin: 10px auto 0 auto; } label { margin-bottom: 15px; } } .edit-plan-left { display: inline-block; width: 60%; } .edit-plan-right { vertical-align: top; display: inline-block; width: 35%; .fa { vertical-align: top; font-size: 18px; margin-left: 5px; } fieldset.standard { label { margin-left: 0; } } } /* Org edit */ /* ------------------------------------------------ */ #edit_org_details { .org-logo { margin-bottom: 10px; label, div { vertical-align: top; } img { border: 1px dashed $medium-grey; } #logo-controls { width: 50%; label { text-align: left; } label { width: auto; } #logo-controls-separator { margin-left: 50px; padding: 10px 0 15px 0; text-align: center; } } } #banner-text div.inline { width: 70%; } }