/* ================================================ */ /* FORM Styling */ /* The top of this file is generic form styles and */ /* the bottom contains page specific changes to the generic */ /* ================================================ */ /* Roadmap Form Styling */ /* ------------------------------------------------ */ form.roadmap-form { text-align: left; fieldset.padded { padding: 10px 10px 25px 10px; } /* Fieldset with labels over inputs */ /* -------------------------------- */ fieldset.standard { padding: 5px; background-color: $white; margin-bottom: 25px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; label, input[type="checkbox"], .combobox-container, .left-indent { margin-left: 15px; } input[type="text"], select { margin-bottom: 15px; } input[type="checkbox"] { vertical-align: top; } .checkbox-label { display: inline-block; margin-left: 5px; } } /* Fieldset with labels to the left of inputs */ /* ------------------------------------------ */ fieldset.side-by-side { .mce-tinymce { display: inline-block; } div { label, input[type="checkbox"], .combobox-container, .identifier-scheme { display: inline-block; } .identifier-scheme-indent { margin-left: -5px; } label { 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; } } .button-spacer { display: inline-block; width: 21%; } } /* Generic Fieldset Settings */ fieldset legend { font-family: $header-font; color: $primary-color; font-size: 26px; font-weight: normal; text-decoration: none; margin-bottom: 10px; padding-left: 5px; float: left; /* positions the legend within the fieldset box */ border-bottom: none; } .form-input { clear: both; } div.inline { display: inline-block; } .left-indent { margin-left: 15px; } .right-indent { margin-right: 5px; } .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; } /* Accessible Form Buttons */ input.form-submit { background-color: $primary-color; color: $reverse-text; padding: 4px 12px; font-size: 14px; margin: 5px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /* Override the button color for the Org Admin sections */ input[type="submit"].admin{ background-color: $primary-admin-color; } 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: $reverse-text; padding: 4px 12px; margin-top: 15px; font-size: 14px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /* 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; } /* .submit-tooltip { display: none; margin-left: 5px; .arrow-left { vertical-align: middle; margin-right: -5px; } .submit-tooltip-msg { color: $white; background-color: $dark-grey; padding: 5px 5px 8px 5px; border-radius: 2px; } }*/ 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 { @include icon(times-circle); display: inline; position: absolute; border: none; background: transparent; 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; } /* ------------------------------------------------ */ /* ------------------------------------------------ */ /* Page specific form styling */ /* ------------------------------------------------ */ /* ------------------------------------------------ */ /* Home Page */ /* ------------------------------------------------ */ .main_page_content .content-two-column { min-height: 400px; } /* Sign in/Create account forms */ /* ------------------------------------------------ */ #sign-in-panel, #create-account-panel { width: 375px; } .omniauth-options { display: block; width: 100%; .omniauth-login { width: 93%; padding: 4px 12px; background-color: $primary-color; color: $white; margin: 0 auto 10px auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } } #new_user { margin-bottom: 10px; } #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 { .checkbox-right { width: 55%; position: relative; #user_remember_me, input[type='checkbox'], .checkbox-label { float: right; } } } #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-ds { width: 50%; } /* Shibboleth Custom Discovery Service form */ /* ------------------------------------------------ */ 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; } ul li.separator { background-color: $medium-grey; color: $white; font-weight: bold; padding: 4px 12px; } } div.three-column { width: 31%; } div.two-column { width: 47%; } div.one-column { width: 95%; } /* View plans */ /* ------------------------------------------------ */ div.main_page_content p #create-test { vertical-align: middle; } /* Create plan */ /* ------------------------------------------------ */ #create_plan { fieldset { padding-bottom: 15px; } #plan_title { margin-bottom: 5px; width: 90%; } .form-left-side { position: relative; float: left; width: 40%; } .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; } } } /* Edit plan details */ /* ------------------------------------------------ */ .edit-plan-details form.roadmap-form fieldset.side-by-side div { label.radio-label { vertical-align: top; } .inline-radios { margin-left: -5px; } input[type='radio'] { margin: 0 10px 5px -5px; } button.form-cancel { margin-top: 0; } }