Proyectos de Subversion Moodle

/**

 * 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%;

    margin: 0;

  }

  .form-group {

    margin: 0.1rem 0.25rem 0.1rem 0;

    max-width: 100%;

  }

  br+label, br+div {

    justify-content: flex-start;

    width: 100%;

    margin-right: 0;

  }

}

.unresponsive.mform .form-inline,

.unresponsive.mform .form-inline label {

  display: inline-flex;

}

#jump-to-activity.custom-select {

  width: 100%;

  @include media-breakpoint-between(xs, sm) {

    min-width: 130px;

  }

}

.mform fieldset {

  margin-bottom: 0;

  font-size: $font-size-sm;

}

#adminsettings .form-control[size] {

  width: auto;

}

#adminsettings .error {

  color: $danger;

}

.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 {

  display: block;

  padding: $badge-padding-y $badge-padding-x;

  @include font-size($badge-font-size);

  font-weight: $badge-font-weight;

  border-radius: $btn-border-radius;

  @extend .badge-light;

}

.form-label .form-shortname {

  font-size: 11px;

  color: $gray-700;

  word-break: break-word;

  .theme-dark & {

    color: $dm-gray-700;

  }

}

.form-item .form-inline {

  display: inline;

}

.form-inline label:not(.sr-only):not(.accesshide)+select {

  margin-top: .25rem;

  margin-bottom: .25rem;

  margin-left: 0.5rem;

}

// 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 {

  color: $text-muted;

  padding-top: 5px;

}

.no-fitem .fstaticlabel {

  font-weight: $font-weight-bold;

}

.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.

  display: inline-block; // So above style sticks.

}

// 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;

  font-weight: $font-weight-medium;

  line-height: 1.2;

  align-items: center;

  p {

    margin-bottom: 0;

  }

}

.form-label {

  font-weight: $font-weight-medium;

  p {

    margin-bottom: 0;

  }

}

div#dateselector-calendar-panel {

  z-index: 99999;

  /* 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;

    align-items: center;

    margin-right: 0.5rem;

    font-size: $font-size-xs;

  }

  .availability-eye {

    .theme-dark & {

      filter: invert(1);

    }

  }

  .availability-group label {

    vertical-align: top;

    align-self: center;

  }

  .col-form-label {

    font-size: $font-size-xs;

    font-weight: $font-weight-medium;

  }

}

.availability-eye {

  clear: left;

  float: left;

}

.availability-header {

  width: 100%;

  display: inline-flex;

  align-items: center;

  font-weight: $font-weight-medium;

  background-color: $gray-100;

  border-radius: $btn-border-radius;

  padding: 5px 20px;

  .theme-dark & {

    background-color: $dm-gray-100;

  }

  .availability-eye {

    margin-right: 0.35rem;

  }

  input,

  select {

    padding-top: .375rem;

    padding-bottom: .375rem;

    padding-left: 0.65rem;

    margin: 0.25rem;

    font-size: $font-size-xs !important;

  }

  input {

    padding-right: 0.65rem;

  }

  select {

    padding-right: 30px;

  }

}

.availability-inner,

.availability-plugincontrols {

  float: left;

  border-radius: $btn-border-radius;

  border: 1px solid $border-color;

  padding: .35rem;

  margin-top: 0;

  margin-right: 0;

  .theme-dark & {

    border-color: $dm-border-color;

  }

  .availability-none {

    padding: 0.25rem;

    border-radius: $btn-border-radius;

    font-size: $font-size-xs;

    font-weight: $font-weight-medium;

    color: $body-color;

    .theme-dark & {

      color: $dm-body-color;

    }

    .badge {

      margin: 0 !important;

    }

  }

  .label {

    display: inline-block;

    margin: 10px;

    padding: 0.25rem 0.5rem;

    background-color: $gray-200;

    border-radius: $btn-border-radius;

    font-size: $font-size-xs;

    font-weight: $font-weight-medium;

    color: $body-color;

    .theme-dark & {

      background-color: $dm-gray-200;

      color: $dm-body-color;

    }

  }

  .availability-eye {

    padding: 3px;

    border-radius: 100%;

    background-color: $container-bg;

    box-shadow: rgba(60, 64, 67, 0.2) 0px 1px 0px 0px, rgba(60, 64, 67, 0.15) 0px 2px 4px 1px;

    .theme-dark & {

      background-color: #aeaeae;

      box-shadow: none;

    }

  }

}

.availability-plugincontrols {

  padding: 6px 14px;

}

.availability-plugincontrols,

.availability-childlist .availability-inner {

  margin-left: 0.625rem;

}

.availability-header,

.availability-field .availability-plugincontrols .availability-group {

  select {

    padding: 2px 30px 2px 8px;

    max-width: 12rem;

    height: 30px;

    font-size: 11px;

  }

}

.availability-item {

  background-color: $container-bg;

  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;

  border-radius: $btn-border-radius;

  padding: 10px;

  font-size: $font-size-sm;

  gap: 10px;

  flex-wrap: wrap;

  .theme-dark & {

    background-color: $dm-container-bg;

  }

  .availability-group {

    display: inline-flex;

    align-items: center;

    gap: 10px;

  }

  .availability-plugincontrols {

    display: inline-flex;

    align-items: center;

    flex-wrap: wrap;

    input,

    select {

      padding-top: .375rem;

      padding-bottom: .375rem;

      padding-left: 0.65rem;

      margin: 0.25rem;

      font-size: $font-size-xs !important;

    }

    input {

      padding-right: 0.65rem;

    }

    select {

      padding-right: 30px;

    }

  }

}

.availability-delete {

  margin-right: 10px;

  margin-left: 10px;

  padding: 6px !important;

  text-align: center;

  line-height: 1;

  background-color: $gray-100;

  min-width: 30px;

  width: 30px;

  height: 30px;

  border-radius: $btn-border-radius-lg;

  transition: $transition-base;

  &:hover {

    background-color: $gray-200;

  }

  img {

    width: 18px;

  }

}

.availability-list {

  .btn {

    width: 100%;

  }

}

//Footer button inside modal window

.availability-buttons {

  padding: 0 1rem;

  .btn {

    width: 100%;

  }

}

/* 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 [role="option"] {

  cursor: pointer;

  white-space: inherit;

  word-break: break-word;

  text-align: left;

  justify-content: flex-start;

  .badge-label {

    width: max-content;

    max-width: 100%;

    display: flex;

    flex-wrap: wrap;

  }

}

.form-autocomplete-suggestions {

  margin-left: 0;

  padding: $dropdown-padding-y $dropdown-padding-x;

  min-width: 206px;

  max-height: 20em;

  overflow: auto;

  position: absolute;

  z-index: $zindex-tooltip;

  background-color: $dropdown-bg;

  border: $border-width solid $dm-border-color;

  border-radius: $btn-border-radius;

  font-size: $font-size-sm;

  font-weight: $font-weight-medium;

  color: $gray-200;

  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;

  .theme-dark & {

    filter: invert(1);

    box-shadow: rgba(255, 255, 255, 0.07) 0px 1px 2px, rgba(255, 255, 255, 0.07) 0px 2px 4px, rgba(255, 255, 255, 0.07) 0px 4px 8px, rgba(255, 255, 255, 0.07) 0px 8px 16px, rgba(255, 255, 255, 0.07) 0px 16px 32px, rgba(255, 255, 255, 0.07) 0px 32px 64px;

  }

}

.form-autocomplete-suggestions li {

  list-style-type: none;

  padding: $dropdown-item-padding-y $dropdown-item-padding-x;

  border-radius: $btn-border-radius;

  margin: 0 0 0.25rem;

  cursor: pointer;

  font-size: $font-size-xs;

  font-weight: $font-weight-medium;

  color: $dropdown-color;

  &:empty {

    display: none!important;

  }

  // &:empty[aria-selected="true"]{

  //   display: block!important;

  // }

  &:last-child {

    margin-bottom: 0;

  }

  &:hover,

  &:focus {

    background-color: $dropdown-link-hover-bg;

    color: $dropdown-link-hover-color;

  }

  &::before {

    content: "\200B";

  }

  span {

    //next row for additional informations

    +span {

      margin-left: 0;

      display: block;

      small {

        color: $dropdown-color;

      }

    }

    img {

      margin-right: .35rem;

      width: 20px;

      height: 20px;

      border-radius: $btn-border-radius;

    }

  }

  small {

    display: block;

    width: 100%;

  }

}

.form-autocomplete-downarrow {

  position: absolute;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  border-radius: $btn-border-radius;

  background-color: $gray-200;

  color: $gray-800;

  transition: $transition-base;

  @include media-breakpoint-up(md) {

    top: calc(50% - 15px) !important;

    right: 8px;

    width: 30px;

    height: 30px;

  }

  @include media-breakpoint-between(xs, sm) {

    top: calc(50% - 12px) !important;

    right: 8px;

    width: 24px;

    height: 24px;

  }

  .icon {

    font-size: $font-size-xs;

    line-height: 16px;

  }

  cursor: pointer;

  &:hover {

    background-color: $gray-300;

  }

  .theme-dark & {

    filter: invert(1);

    mix-blend-mode: screen;

  }

}

/** Undo some bootstrap things */

.form-autocomplete-selection+input.form-control {

  width: auto;

  display: inline-block;

  vertical-align: middle;

}

.form-autocomplete-selection {

  max-width: 300px;

}

.form-autocomplete-selection [data-active-selection="true"] {

  span {

    //next row for additional informations

    +span {

      margin-left: 33px;

      display: block;

    }

    img {

      margin-right: .35rem;

      width: 20px;

      height: 20px;

      border-radius: $btn-border-radius;

    }

  }

}

/* 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;

  min-height: 200px;

}

select[size="1"] {

  overflow: visible;

}

textarea[data-auto-rows] {

  overflow-x: hidden;

  resize: none;

}

/** 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 {

      flex: 0 0 100%;

      max-width: 100%;

      width: inherit;

      padding-right: 0;

      padding-left: 0;

    }

    &.femptylabel>.col-md-3 {

      display: none;

    }

    .form-control {

      width: 100%;

    }

  }

}

/** 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;

    }

  }

}

// We dont' use the mixin because it's expensive.

[data-fieldtype="modgrade"] fieldset {

  br+label {

    width: auto !important;

  }

  br {

    display: none;

  }

  input,

  select {

    padding-top: .375rem;

    padding-bottom: .375rem;

    padding-left: 0.65rem;

    padding-right: 30px;

    margin: 0.25rem;

    height: auto;

    font-size: $font-size-xs;

  }

  .form-group {

    margin: 0 !important;

    padding: 0 !important;

  }

}

// 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;

}

//TODO: this UI part needs to be improved

@include media-breakpoint-up(sm) {

  .modal .mform fieldset.collapsible legend a.fheader,

  .mform fieldset.collapsible legend a.fheader {

    width: 100%;

    display: block;

    padding: .85rem 1.1rem;

    margin: 0;

    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.75L16.25 15.25H7.75L12 9.75Z' stroke='#{url-friendly-colour($body-color)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E ");

    background-size: 16px;

    background-repeat: no-repeat;

    background-position: center right 12px;

    border-radius: $btn-border-radius;

    h3 {

      font-size: $font-size-sm;

      font-weight: $font-weight-medium;

      color: $headings-color;

      .theme-dark & {

        color: $dm-headings-color;

      }

    }

    .theme-dark & {

      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 9.75L16.25 15.25H7.75L12 9.75Z' stroke='#{url-friendly-colour($dm-body-color)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E ");

      color: $dm-headings-color;

    }

    &[aria-expanded="true"],

    &:hover {

      text-decoration: none;

      background-color: $gray-100;

      color: $body-color-light;

      h3 {

        .theme-dark & {

          color: $dm-body-color-light;

        }

      }

      .theme-dark & {

        background-color: $dm-gray-100;

        border-color: $dm-border-color;

        color: $dm-body-color-light;

      }

    }

  }

  .mform fieldset.collapsible:last-of-type legend a.fheader {

    margin-bottom: 0;

  }

  .fheader.collapsed,

  .fheader.icons-collapse-expand,

  .mform fieldset.collapsed legend a.fheader {

    /*rtl:raw:

        background-image: url([[pix:t/collapsed_rtl]]);

        */

    /*rtl:remove*/

    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.25 12L8.75 7.75V16.25L14.25 12Z' stroke='#{url-friendly-colour($body-color)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");

    background-size: 16px;

    background-repeat: no-repeat;

    background-color: transparent;

    border: 1px solid $border-color;

    .modal & {

      margin-right: 20px!important;

    }

    .theme-dark & {

      border-color: $dm-border-color;

    }

    .fa {

      display: none;

    }

  }

  .mform {

    .form-inline {

      .fdefaultcustom {

        label {

          justify-content: initial;

        }

      }

    }

  }

}

.collapsible + .collapsible {

  margin-top: 5px;

}

.btn.btn-icon {

  background-position: center;

}

.fcontainer {

  @include media-breakpoint-up(md) {

    padding: $btn-padding-y 0;

    .modal .collapsible & {

      padding: 0 65px!important;

    }

  }

  @include media-breakpoint-between(xs, sm) {

    padding: 10px;

  }

}

.collapsemenu {

  .collapseall {

    display: block;

  }

  .expandall {

    display: none;

  }

  &.collapsed {

    .collapseall {

      display: none;

    }

    .expandall {

      display: block;

    }

  }

}

// Form inset on the left/right.

// Used to display an icon/button within the form control.

.input-group {

  &.form-inset {

    .form-inset-item {

      position: absolute;

      padding-top: calc(#{$input-padding-y} + #{$input-border-width});

      z-index: 3;

    }

    &.form-inset-left {

      .form-control {

        padding-left: $spacer * 1.5;

      }

    }

    &.form-inset-right {

      .form-control {

        padding-right: $spacer * 1.5;

      }

      .form-inset-item {

        right: 0;

      }

    }

  }

}

// Theme

.form-description,

.form-control-static {

  font-size: $font-size-xs;

  line-height: 1.4;

  color: $body-color-light;

  word-break: break-word;

  .theme-dark & {

    color: $dm-body-color-light;

  }

  ul {

    margin-left: 1rem;

  }

  p {

    &:last-of-type {

      margin-bottom: 0;

    }

  }

}

:disabled+span,

:disabled+span,

:disabled+span+span {

  opacity: 0.2;

  cursor: not-allowed !important;

}

/* Theme */

.fdescription {

  position: relative;

  padding: 5px 10px;

  margin: 0.25rem 0;

  display: inline-flex;

  align-items: center;

  max-width: 100%;

  border: $alert-border-width solid transparent;

  @include border-radius($alert-border-radius);

  font-size: $font-size-xs;

  font-weight: $font-weight-medium;

  ul {

    margin: 0;

  }

  img {

    width: 12px;

    height: auto;

  }

  &.required {

    background-color: $yellow-100;

    .theme-dark & {

      background-color: $dm-gray-100;

    }

    .icon {

      display: inline-flex;

    }

  }

  &.form-filetypes-descriptions {

    background-color: $gray-100;

    .theme-dark & {