芝麻web文件管理V1.00
编辑当前文件:/home2/sdektunc/.trash/cepali/theme/boost/scss/moodle/forms.scss
/** * Moodle forms HTML isn't changeable via renderers (yet?) so this * .less file imports styles from the bootstrap $variables file and * adds them to the existing Moodle form CSS ids and classes. * */ .jsenabled .mform .containsadvancedelements .advanced { display: none; } .mform .containsadvancedelements .advanced.show { display: flex; } #adminsettings span.error { display: inline-block; border: 1px solid $state-danger-border; border-radius: 4px; background-color: $state-danger-bg; padding: 4px; margin-bottom: 4px; } .mform .form-inline { .form-control, .custom-select { max-width: 100%; } .form-group { margin: 0.1rem 0.25rem 0.1rem 0; } br + label { justify-content: flex-start; width: 100%; } } .unresponsive.mform .form-inline, .unresponsive.mform .form-inline label { display: inline-flex; } #jump-to-activity.custom-select { width: 100%; } .mform fieldset { margin-bottom: $spacer / 2; border-bottom: $border-width solid $table-border-color; } .mform > .form-group { margin-left: $spacer * 1.5; } .editor_atto_content.form-control { width: 100%; } #adminsettings .form-control[size] { width: auto; } .jsenabled .mform .collapsed .fcontainer { display: none; } #adminsettings .error { color: $state-danger-text; } .mform ul.file-list { padding: 0; margin: 0; list-style: none; } .mform label .req, .mform label .adv { cursor: help; } /*rtl:ignore*/ input#id_externalurl { direction: ltr; } #portfolio-add-button { display: inline; } .form-defaultinfo, .form-label .form-shortname { @extend .text-muted; } .form-label .form-shortname { font-size: $font-size-xs; display: block; } .form-item .form-inline { display: inline; } .form-inline label:not(.sr-only):not(.accesshide) + select { margin-left: 0.5rem; } .formsettingheading .form-horizontal { @extend .text-muted; } // Moodle doesn't differentiate between what Bootstrap calls // .uneditable-inputs and form help text. Styling them both as // uneditable looks ugly, styling both as form help is fairly // subtle in it's impact. Going for the latter as the best option. .no-felement.fstatic { @extend .text-muted; padding-top: 5px; } .no-fitem .fstaticlabel { font-weight: bold; } // Pale grey container for submit buttons. .form-buttons, .path-admin .buttons, .fp-content-center form + div, div.backup-section + form { @extend .form-group; padding-left: 0; } .form-item .form-setting .defaultsnext > input { display: inline-block; } .form-item .form-setting .form-checkbox.defaultsnext { // Need to specify .defaultsnext and the .form-checkbox class // is somewhat randomly re-used on various actual checkboxes // throughout the admin forms, instead of on the wrapper div. margin-top: 5px; // Push down checkboxes to align. display: inline-block; // So above style sticks. } #adminsettings h3 { // Copied from bootstrap/forms.less tag legend. display: block; width: 100%; padding: 0; margin-bottom: $line-height-base; font-size: $font-size-lg; line-height: $line-height-base * 2; border: 0; border-bottom: 1px solid #e5e5e5; } // I think this could be avoided (or at least tidied up) ifr // we used HTML5 input types like url, phone, email, number etc. /* rtl:ignore */ .mform .fitem .felement input[name="email"], .mform .fitem .felement input[name="email2"], .mform .fitem .felement input[name="url"], .mform .fitem .felement input[name="idnumber"], .mform .fitem .felement input[name="phone1"], .mform .fitem .felement input[name="phone2"] { text-align: left; direction: ltr; } // Reduce the mediaplugin width when using inside forms. .que.match .mediaplugin { width: 50vw; } /* rtl:ignore */ #page-admin-grade-edit-scale-edit .error input#id_name { margin-right: 170px; } #page-grade-edit-outcome-course .courseoutcomes { margin-left: auto; margin-right: auto; width: 100%; } #page-grade-edit-outcome-course .courseoutcomes td { text-align: center; } /* Install Process' text fields Forms, should always be justified to the left */ /* rtl:ignore */ #installform #id_wwwroot, #installform #id_dirroot, #installform #id_dataroot, #installform #id_dbhost, #installform #id_dbname, #installform #id_dbuser, #installform #id_dbpass, #installform #id_prefix { direction: ltr; } .mdl-right > label { // Workaround for repository pop-up because the : are outside the label, // can/should be fixed in filemanager renderers. display: inline-block; } .singleselect { max-width: 100%; } .form-item .form-label label { margin-bottom: 0; } div#dateselector-calendar-panel { z-index: 3100; /* Set higher than the z-index of the filemanager - see MDL-39047. */ } fieldset.coursesearchbox label { display: inline; } /** * Show the labels above text editors and file managers except on wide screens. */ /* Section and module editing forms contain special JS components for the availability system (if enabled). */ #id_availabilityconditionsjson[aria-hidden=true], .availability-field [aria-hidden=true] { display: none; } .availability-field { label { display: inline-flex; } .availability-group label { vertical-align: top; } } .availability-eye { clear: left; float: left; } .availability-inner, .availability-plugincontrols { float: left; @include border-radius($card-border-radius); border: $card-border-width solid $card-border-color; padding: 1rem; margin-top: 0.5rem; } .availability-plugincontrols, .availability-childlist .availability-inner { margin-left: .625rem; } .availability-field .availability-plugincontrols .availability-group select { max-width: 12rem; } /* Custom styles for autocomplete form element */ /* These styles reserve a standard amount of space in the DOM to avoid flicker when the original select element is replaced */ [data-fieldtype=autocomplete] select, [data-fieldtype=tags] select, .form-autocomplete-original-select { visibility: hidden; overflow: hidden; width: 15rem; height: 44px; margin: 0; padding: 0; border: 0; margin-top: $font-size-base * $line-height-base + $input-padding-y-sm; vertical-align: bottom; } .form-autocomplete-selection { margin: $input-padding-y-sm; // Padding top and bottom, plus mb-1 and the 100% lineheight. min-height: 2 * $input-padding-y-sm + 2 * $font-size-base; } .form-autocomplete-selection [role=listitem] { cursor: pointer; white-space: inherit; word-break: break-word; line-height: 1.4; text-align: left; } .form-autocomplete-suggestions { position: absolute; background-color: white; border: 2px solid $gray-lighter; border-radius: 3px; min-width: 206px; max-height: 20em; overflow: auto; margin: 0; padding: 0; margin-top: 0.4em; z-index: 1; } .form-autocomplete-suggestions li { list-style-type: none; padding: 0.2em; margin: 0; cursor: pointer; color: $body-color; } .form-autocomplete-suggestions li:hover { background-color: lighten($dropdown-link-active-bg, 15%); color: $dropdown-link-active-color; } .form-autocomplete-suggestions li[aria-selected=true] { background-color: darken($dropdown-bg, 5%); color: $gray; } .form-autocomplete-downarrow { color: $body-color; top: 0.2rem; right: 0.5rem; cursor: pointer; .loading-icon { position: absolute; top: 0; left: 0; background-color: $white; } } .form-autocomplete-selection:focus { outline: none; } /** Undo some bootstrap things */ .form-autocomplete-selection + input.form-control { width: auto; display: inline-block; vertical-align: middle; } .form-autocomplete-selection [data-active-selection=true] { padding: 0.5em; font-size: large; } /* Non-bootstrap selects with a size show their contents outside of the element. * Remove when we update to stable bootstrap 4. (MDL-56511) */ select[size], select[multiple] { overflow: auto; } select[size="1"] { overflow: visible; } textarea[data-auto-rows] { overflow-x: hidden; } /** Display elements under labels in vertical forms regardless of the screen size. */ .mform.full-width-labels { .fitem.row { margin-left: 0; margin-right: 0; & > .col-md-3, & > .col-md-9 { float: none; width: inherit; padding-right: 0; padding-left: 0; } &.femptylabel > .col-md-3 { display: none; } } } /** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */ .form-inline { @include media-breakpoint-up(md) { .col-md-9, .col-md-3 { label { margin-left: 1rem; } margin-bottom: 1rem; width: auto; } } } [data-fieldtype="modgrade"] .form-group { padding-bottom: $input-padding-y; } // We dont' use the mixin because it's expensive. [data-fieldtype="modgrade"] { background-color: $card-bg; @include border-radius($card-border-radius); border: $card-border-width solid $card-border-color; padding: $card-spacer-x; margin-left: $grid-gutter-width / 2; max-width: 30rem; } /** Atto fields do not have form-control because that would break the layout of the editor. So they need these extra styles to highlight the editor when there is a validation error. */ .has-danger .editor_atto_content.form-control, .has-danger .editor_atto_content.form-control-danger { @include form-control-validation($brand-danger); background-image: $form-icon-danger; padding-right: ($input-padding-x * 3); background-repeat: no-repeat; background-position: center right 1rem; background-size: 1.5rem; } // Styles for the JS file types browser provided by the "filetypes" element. [data-filetypesbrowserbody] { [aria-expanded="false"] > [role="group"], [aria-expanded="false"] [data-filetypesbrowserfeature="hideifcollapsed"], [aria-expanded="true"] [data-filetypesbrowserfeature="hideifexpanded"] { display: none; } } // The autocomplete popup needs a display:block container to correctly position to popup. .form-inline[data-fieldtype="autocomplete"], .form-inline[data-fieldtype="tags"] { display: block; } // Show editor at 100% width by default. [data-fieldtype="editor"] > div { flex-grow: 1; } @include media-breakpoint-up(sm) { .mform fieldset { margin-left: $spacer * 1.5; } .mform fieldset.collapsible legend a.fheader { padding: 0 5px 0 ($spacer * 1.5); margin-left: -($spacer * 1.5); background: url([[pix:t/expanded]]) 0 center no-repeat; } .mform fieldset.collapsed legend a.fheader { /*rtl:raw: background-image: url([[pix:t/collapsed_rtl]]); */ /*rtl:remove*/ background-image: url([[pix:t/collapsed]]); } .mform { .form-inline { .fdefaultcustom { label { justify-content: initial; } } } } }