Historial de página

...

¡OJO! Los estilos están todavía en desarrollo, esto es una versión alpha. Por lo tanto, todavía faltan estilos, como los de Datatable, y puede haber estilos que no sean del todo correctos o que no se vean todo lo bien que deberían.

...

Disponemos de estilos css personalizados para que los componentes de Primevue tengan la apariencia del estilo corporativo de la UMU. Para utilizarlo, debemos el archivo con los estilos en el main.js:

Bloque de código

language	js

import "./assets/fdwjs.css";

Ahora debemos crear el propio archivo fdwjs.css en la carpeta assets/ del proyecto, y añadirle el siguiente contenido:

Bloque de código

language	css

@import url("https://fonts.googleapis.com/css?family=Inter");
:root {
  font-family: "Inter";
}

.p-invalid {
  color: #ff3f2d;
}

.p-success {
  color: #4bb543;
}
/* InputText */

.p-inputtext {
  border-radius: 4px;
  border: solid 1px #bec7cf;
}

.p-inputtext:enabled:hover {
  border-color: #007bff;
}

.p-inputtext:enabled:focus {
  border-color: #007bff;
}

.p-inputtext.p-invalid {
  border: solid 1px #ff3f2d;
}

.p-inputtext-lg {
  width: 200px;
  height: 48px;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  color: #757575;
}

.p-inputtext-sm {
  width: 200px;
  height: 40px;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  color: #767676;
}

/* InputText + Iconos */

.p-input-icon-left > i, .p-input-icon-right > i, .p-input-icon-left > svg, .p-input-icon-right > svg {
  color: #555555;
}

.p-input-icon-left > i.p-invalid, .p-input-icon-right > i.p-invalid, .p-input-icon-left > svg.p-invalid, .p-input-icon-right > svg.p-invalid {
  color: #ff3f2d;
}

.p-input-icon-left > i.p-success, .p-input-icon-right > i.p-success, .p-input-icon-left > svg.p-success, .p-input-icon-right > svg.p-success {
  color: #4bb543;
}

.p-input-icon-left > svg, .p-input-icon-right > svg {
  position: absolute;
  top: 50%;
  margin-top: -.5rem;
}

.p-input-icon-left > svg {
  left: 0.5rem;
}

.p-input-icon-right > svg {
  right: 0.5rem;
}

/* InputText + Button */

.p-button-inputtext > button, .p-button-inputtext > input {
  vertical-align: bottom;
}

.p-inputtext-button-izq {
  border-radius: 0px 4px 4px 0px;
}

.p-inputtext-button-der {
  border-radius: 4px 0px 0px 4px;
}
 
.p-button.p-button-izq-inputtext {
  height: 39px;
  width: 39px;
  border-radius: 4px 0px 0px 4px;
}

.p-button.p-button-izq-inputtext-lg {
  height: 48px;
  width: 48px;
  border-radius: 4px 0px 0px 4px;
}

.p-button.p-button-izq-inputtext-sm {
  height: 40px;
  width: 40px;
  border-radius: 4px 0px 0px 4px;
}
 
.p-button.p-button-der-inputtext {
  height: 39px;
  width: 39px;
  border-radius: 0px 4px 4px 0px;
}

.p-button.p-button-der-inputtext-lg {
  height: 48px;
  width: 48px;
  border-radius: 0px 4px 4px 0px;
}

.p-button.p-button-der-inputtext-sm {
  height: 40px;
  width: 40px;
  border-radius: 0px 4px 4px 0px;
}

/* Button */

.p-button {
  /* width: 115px;
    height: 49px; */
  padding: 14.5px 33.5px 14.5px 34.5px;
  border-radius: 6px;
  background-color: #bd2a33;
  border-color: #bd2a33;
}

.p-button:enabled:hover {
  background-color: #d77f85;
  border-color: #d77f85;
}

.p-button.p-button-secondary {
  background-color: white;
  border-color: #ca555c;
  color: #ca555c;
}

.p-button.p-button-secondary:enabled:hover {
  background-color: #ffe0e2;
  border-color: #ca555c;
  color: #ca555c;
}

.p-button.p-button-secondary:enabled:focus {
  background-color: #f3cbcd;
  color: #ca555c;
}

.p-button.p-button-terciary {
  background-color: #ebeff1;
  border-color: #ebeff1;
  color: #666666;
}

.p-button.p-button-terciary:enabled:hover {
  background-color: #dee3e6;
  border-color: #ebeff1;
  color: #666666;
}

.p-button-cancelar {
  background-color: #bd2a33;
  border-color: #bd2a33;
  color: #ffffff;
}

.p-button-aceptar {
  background-color: #31752f;
  border-color: #31752f;
  color: #ffffff;
}

.p-button-lg {
  width: 127px;
  height: 49px;
  padding: 14.5px 34px 14.5px 34.5px;
}

.p-button-md {
  width: 134px;
  height: 41px;
  padding: 11px 37px;
}

.p-button-sm {
  width: 115px;
  height: 33px;
  padding: 9px 32px 9px 31px;
}

.p-button-set {
  height: 48px;
}

/* Todos los p-button dentro de p-buttonset excepto el primero */
.p-buttonset .p-button:not(:first-child) {
  margin-left: 2px;
}

/* Dialog */

.p-dialog {
  width: 348px;
  /* height: 138px; */
  padding: 0 0 22px;
  border-radius: 6px;
  background-color: #ffffff;
}

.p-dialog-content {
  padding-bottom: 20px !important;
}

.p-dialog-footer {
  padding: 22px 0px 0px 0px !important;
  text-align: center !important;
  border-top: 1px solid #c8cacc !important;
}

/* Accordion */

.p-accordion-tab {
  margin-bottom: 8px !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
  /* border-top-left-radius: 6px;
  border-top-right-radius: 6px; */
  border-radius: 6px !important;
}

.p-accordion-tab-active {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.p-accordion-header {
  height: 70px;
}

.p-accordion-header > a {
  height: 100%;
  background-color: #f2f5f7 !important;
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
  border: none;
}

.p-accordion-header-text {
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: normal;
  font-size: 24px;
  height: 36px;
  line-height: 1.5;
  color: #212121;
}

.p-accordion-content {
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  border: none;
}

/* Autocomplete */

.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
  background-color: #f2f5f7;
}

.p-autocomplete.p-autocomplete-multiple
  .p-autocomplete-multiple-container
  .p-autocomplete-token {
  background: #4d4f52;
}

/* Message */

.p-message.p-message-success {
  border-width: 0px;
  background: rgba(219, 240, 217, 0.9);
}

.p-message.p-message-success .p-message-close-icon {
  color: #78c872;
}

.p-message.p-message-success .p-message-text {
  color: #107c10;
}

.p-message.p-message-success .p-message-icon {
  color: #107c10;
}

.p-message.p-message-info {
  border-width: 0px;
  background: #e6efff;
}

.p-message.p-message-info .p-message-close-icon {
  color: #7fb6ff;
}

.p-message.p-message-info .p-message-text {
  color: #006fe6;
}

.p-message.p-message-info .p-message-icon {
  color: #006fe6;
}

.p-message.p-message-warn {
  border-width: 0px;
  background: rgba(255, 150, 45, 0.1);
}

.p-message.p-message-warn .p-message-close-icon {
  color: #ff962d;
}

.p-message.p-message-warn .p-message-text {
  color: #a85b0e;
}

.p-message.p-message-warn .p-message-icon {
  color: #a85b0e;
}

.p-message.p-message-error {
  border-width: 0px;
  background: rgba(255, 63, 45, 0.1);
}

.p-message.p-message-error .p-message-close-icon {
  color: #ff9e96;
}

.p-message.p-message-error .p-message-text {
  color: #dd3636;
}

.p-message.p-message-error .p-message-icon {
  color: #dd3636;
}

/* Tooltip */

.p-tooltip .p-tooltip-text {
  background-color: #555555;
}

.p-tooltip .p-tooltip-right .p-tooltip-arrow {
  border-right-color: #555555;
}

.p-tooltip .p-tooltip-left .p-tooltip-arrow {
  border-left-color: #555555;
}

.p-tooltip .p-tooltip-bottom .p-tooltip-arrow {
  border-bottom-color: #555555;
}

.p-tooltip .p-tooltip-top .p-tooltip-arrow {
  border-top-color: #555555;
}

/* Panel */

.p-panel {
  padding: 0;
  border-radius: 6px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

.p-panel .p-panel-header {
  background-color: #f2f5f7;
  border-color: #f2f5f7;
  border-radius: 6px 6px 0 0;
  /* box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); */
}

.p-panel .p-panel-content {
  border-color: white;
  /* border-top-color: #f2f5f7; */
  border-radius: 0 0 6px 6px;
  /* box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19); */
}

/* ProgressBar */

.p-progressbar {
  height: 6px;;
}

.p-progressbar .p-progressbar-value {
  background: #bd2a33;
}

.p-progressbar.p-progressbar-info .p-progressbar-value {
  background: #0063f3;
}

.p-checkbox-checked .p-checkbox-box.p-highlight {
  border-color: #0063f3;
  background: #0063f3;
}

/* Fieldset */

.p-fieldset {
  border: 0px;
}

.p-fieldset .p-fieldset-legend {
  border: 0px;
  background-color: transparent;
  width: 100%;
  border-bottom: 2px solid #c8cacc;
  border-radius: 0px;
  padding: 6px;
}

.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a {
  padding: 6px;
}

.p-fieldset-legend > a, .p-fieldset-legend > span {
  justify-content: left;
  color: #777777;
}

.p-fieldset-legend-text {
  font-size: 20px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: normal;
  line-height: 1.3;
  color: #777777;
}

.p-fieldset-toggler {
  font-size: 12px;
  vertical-align: bottom;
}

.p-fieldset-content {
  margin-top: 17px;
  margin-left: 26px;
}

...

Accesos directos de espacio

Árbol de páginas

Versiones comparadas

Versión anterior 1

Nueva versión 2

Clave