alumnos/css/elementos.css

/***** IS-INVALID *****/
.is-invalid, .dropdownlist.is-invalid > button, .datalist.is-invalid > input { border-color: var(--danger) !important; }
.dropdownlist.is-invalid > button > span { background: var(--danger) !important; }
.star-rating.is-invalid > div > label { border-bottom: 1px solid var(--danger); border-top: 1px solid var(--danger); border-right: 0; border-left: 0; }
.star-rating.is-invalid > div > label:first-of-type { border-right: 1px solid var(--danger); border-radius: 0 10px 10px 0;  }
.star-rating.is-invalid > div > label:last-of-type { border-left: 1px solid var(--danger); border-radius: 10px 0 0 10px; }

/***** INPUTS *****/
input { outline: none; }
input[type=text], input[type=password], input[type=email], input[type=number],
textarea { color: var(--mainColor); background: transparent; border: 1px solid var(--mainColor); border-radius: 5px; font-weight: 300; vertical-align: middle; padding: 0.5rem; width: 100%;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, textarea:focus { color: var(--primary); border-color: var(--primary); }
textarea{ resize: none; overflow-x: hidden; overflow-wrap: break-word; overflow-y: auto; }

/***** DROPDOWNLIST *****/
.dropdownlist { width: 100%; position: relative }
.dropdownlist > button { background: transparent; border: 1px solid var(--mainColor); font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; padding: 0; width: 100%; 
    display: flex; justify-content: space-between; align-items: stretch; }
.dropdownlist > button > *, .dropdownlist > ul > li { padding: 0.4rem; cursor: pointer; }
.dropdownlist > button > label { text-align: left; color: var(--mainColor); flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9em; }
.dropdownlist > button > span { display: flex; justify-content: center; align-items: center; padding-left: 1rem; background: var(--mainColor); color: var(--white) !important; clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%); }
.dropdownlist > button:active, .dropdownlist > button:focus  { outline: 0; }
.dropdownlist > ul { border: 1px solid var(--primary); display: none; border-radius: 0 0 0.25rem 0.25rem; background: var(--white); position: absolute; margin: 0; padding: 0; width: 100%; max-height: 200px; top: 100%; left: 0; 
    list-style: none; overflow: hidden; overflow-y: auto; z-index: 100; }
.dropdownlist > ul > li{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdownlist > ul > li.active { color: var(--white) !important; background: var(--danger); }
.dropdownlist > ul > li:hover{ color: var(--white) !important; background: var(--danger-75); }
.dropdownlist.show > ul { display: block; }
.dropdownlist.show > button { border-color: var(--gray); border-radius: 0.25rem 0.25rem 0 0; }
.dropdownlist.show > button > label { color: var(--gray); }
.dropdownlist.show > button > span { background: var(--gray); }
.dropdownlist.show > button > span:before { -webkit-transform: rotate(-180deg); -moz-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform: rotate(-180deg); }
/* Colores */
.dropdownlist-azul1 > button { border-color: var(--azul1); }
.dropdownlist-azul1 > button > label { color: var(--azul1); }
.dropdownlist-azul1 > button > span { background: var(--azul1); }
.dropdownlist-azul1 > ul { border: 1px solid var(--azul1); }
.dropdownlist-azul1 > ul > li.active { background: var(--azul1); }
.dropdownlist-azul1 > ul > li:hover{ background: var(--azul1-75); }
.dropdownlist-azul2 > button { border-color: var(--azul2); }
.dropdownlist-azul2 > button > label { color: var(--azul2); }
.dropdownlist-azul2 > button > span { background: var(--azul2); }
.dropdownlist-azul2 > ul { border: 1px solid var(--azul2); }
.dropdownlist-azul2 > ul > li.active { background: var(--azul2); }
.dropdownlist-azul2 > ul > li:hover { background: var(--azul2-75); }

/***** DATALIST *****/
.datalist { width: 100%; }
datalist > .datalist-input { padding-right: 2rem; }
.datalist > .input-buscar { font-size: 1.5em; position: absolute; top: 0.5rem; right: 0.5rem; }
.datalist ul { position: absolute; margin: 0; padding: 0; width: 100%; max-height: 200px; top: 100%; left: 0; list-style: none;
    border-radius: 2px; background: var(--white); border: 1px solid var(--mainColor); overflow: hidden; overflow-y: auto; z-index: 100; }
.datalist ul li { display: flex; align-items: center; justify-content: start; padding: 0.8em 1em 0.8em 1em; cursor: pointer; }
.datalist ul li:hover{ background: var(--danger); color: var(--white); }

/***** BUSCADOR *****
.input-buscar{ position: absolute; top: 15px; right: 12px; color: #DBDCDD; z-index: 10; }*/

/********** RATING **********/
.star-rating > .fieldset > input { display: none; }
.star-rating > .fieldset > label { display: flex; flex-direction: column; align-items: center; padding-left: 1vw; padding-right: 1vw; cursor: pointer; }
.star-rating > .fieldset > input:checked ~ label > div.ing-estrella1 { color: var(--yellow); }
.star-rating > .fieldset > input:checked ~ label > div.ing-insignia3 { color: var(--gold); }
.star-rating > .fieldset > input:checked ~ label > span{ color: var(--primary); }
.star-rating > .fieldset > label > div:active { position: relative; top: 2px; }
.star-rating > .fieldset:not(:checked) > label > div { color: var(--mainColor); }
.star-rating > .fieldset:not(:checked) > label > span { color: var(--mainColor); }
.star-rating > .fieldset:not(:checked) > label:hover{ cursor: pointer; }
.star-rating > .fieldset:not(:checked) > label:hover > div.ing-estrella1,.star-rating > .fieldset:not(:checked) > label:hover ~ label > div.ing-estrella1 { color: var(--yellow); text-shadow: 0 0 5px var(--yellow); }
.star-rating > .fieldset:not(:checked) > label:hover > div.ing-insignia3,.star-rating > .fieldset:not(:checked) > label:hover ~ label > div.ing-insignia3 { color: var(--gold); text-shadow: 0 0 5px var(--gold); }
.star-rating > .fieldset:not(:checked) > label:hover > span,.star-rating > .fieldset:not(:checked) > label:hover  ~ label > span { color: var(--primary); text-shadow: 0 0 1px var(--primary); }

/********** SWITCH **********/
.switch > input { display: none; }
.switch { height: 1.75em; width: 4em; background: var(--mainColor); color: var(--white); cursor: pointer; transform: skew(-30deg); border-radius: 3px;
    transition: all 0.2s ease-out; text-indent: 2em; line-height: 1.75em; outline: 1px solid var(--white); }
.switch > .span { transform: skew(30deg); transition: all 0.2s ease-out; font-size: 1em; z-index: -1; }
.switch:before { transition: all 0.2s ease-out; position: absolute; content: ''; height: 1.25em; width: 1.25em; top: 0.25em; left: 0.25em; cursor: pointer; background: var(--light); }
.switch.active { background: var(--azul1); }
.switch.active .span { text-indent: 0.75em; }
.switch.active:before { left: 2.5em; } /*Ajustar si varía el width principal width - (1.25+0.25)em */
.switch.switch-SiNo { background: var(--danger); }
.switch.switch-SiNo.active { background: var(--success); }