/* * CSS global para todos los sitios del portal. * Este fichero se carga en el de todas las páginas * independientemente del tema activo. * * Desplegar con: * ./gradlew :modules:global-css-web:deploy */ label.toggle-switch { cursor: pointer } label.toggle-switch.disabled { cursor: not-allowed } .toggle-switch { display: inline-block; font-weight: 600; max-width: 100%; position: relative } .toggle-switch.disabled .toggle-switch-label { color: #a7a9bc; cursor: not-allowed } .toggle-switch.disabled .toggle-switch-text { color: #a7a9bc } .toggle-switch-check-bar { display: inline-flex; position: relative } .toggle-switch-bar .toggle-switch-handle { display: block; min-width: 60px; text-transform: uppercase } .toggle-switch-bar .toggle-switch-icon { font-size: .75rem } .toggle-switch-bar .toggle-switch-icon .lexicon-icon { margin-top: -0.2em } .toggle-switch-bar .button-icon { font-size: .75rem } .toggle-switch-check,label:not(.toggle-switch) .toggle-switch { bottom: 0; font-size: 62.5%; height: 32px; opacity: 0; position: absolute; width: 60px; z-index: 2 } @media(max-width: 767.98px) { .toggle-switch-check,label:not(.toggle-switch) .toggle-switch { height:24px; width: 44px } } .toggle-switch-check:empty ~ .toggle-switch-bar,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar { display: inline-flex; font-size: .75rem; height: 32px; line-height: 32px; position: relative; text-indent: 0; -ms-user-select: none; user-select: none } .toggle-switch-check:empty ~ .toggle-switch-bar:after,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar:after { background-color: #fff; border-color: #fff; border-radius: 50%; border-style: solid; border-width: 1px; bottom: 4px; content: ''; display: block; height: 24px; left: 4px; position: absolute; top: 4px; transition: background-color 100ms ease-in,border-color 100ms ease-in,box-shadow 150ms ease-in-out,color 100ms ease-in,left 100ms ease-in,right 100ms ease-in; width: 24px } .toggle-switch-check:empty ~ .toggle-switch-bar:before,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar:before { background-color: #a7a9bc; border-color: #a7a9bc; border-radius: 20px; border-style: solid; border-width: 1px; bottom: 0; content: ' '; display: block; left: 0; position: absolute; top: 0; transition: background-color 100ms ease-in,border-color 100ms ease-in,box-shadow 150ms ease-in-out,color 100ms ease-in,left 100ms ease-in,right 100ms ease-in; width: 60px } .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-handle:after,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar .toggle-switch-handle:after { content: attr(data-label-off); margin-left: 68px; transition: background-color 100ms ease-in,border-color 100ms ease-in,box-shadow 150ms ease-in-out,color 100ms ease-in,left 100ms ease-in,right 100ms ease-in; white-space: nowrap } .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-handle:before,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar .toggle-switch-handle:before { transition: background-color 100ms ease-in,border-color 100ms ease-in,box-shadow 150ms ease-in-out,color 100ms ease-in,left 100ms ease-in,right 100ms ease-in } .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar .toggle-switch-icon { color: #fff; left: 4px; line-height: 24px; position: absolute; text-align: center; text-indent: 0; top: 4px; transition: background-color 100ms ease-in,border-color 100ms ease-in,box-shadow 150ms ease-in-out,color 100ms ease-in,left 100ms ease-in,right 100ms ease-in; width: 24px; z-index: 1 } .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon-on,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar .toggle-switch-icon-on { left: 4px; opacity: 0 } .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon-off,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar .toggle-switch-icon-off { left: 32px } .toggle-switch-check:empty ~ .toggle-switch-bar .button-icon,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar .button-icon { color: #272833 } .toggle-switch-check:empty ~ .toggle-switch-bar .button-icon-on,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar .button-icon-on { opacity: 0 } .toggle-switch-check:checked ~ .toggle-switch-bar:after,label:not(.toggle-switch) .toggle-switch:checked ~ .toggle-switch-bar:after { background-color: #fff; border-color: #fff; border-radius: 50%; border-style: solid; border-width: 1px; left: 32px } .toggle-switch-check:checked ~ .toggle-switch-bar:before,label:not(.toggle-switch) .toggle-switch:checked ~ .toggle-switch-bar:before { background-color: #0b5fff; border-color: #0b5fff; border-radius: 20px; border-style: solid; border-width: 1px } .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-handle:after,label:not(.toggle-switch) .toggle-switch:checked ~ .toggle-switch-bar .toggle-switch-handle:after { content: attr(data-label-on) } .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-icon,label:not(.toggle-switch) .toggle-switch:checked ~ .toggle-switch-bar .toggle-switch-icon { color: #fff } .toggle-switch-check:checked ~ .toggle-switch-bar .button-icon,label:not(.toggle-switch) .toggle-switch:checked ~ .toggle-switch-bar .button-icon { color: #272833; left: 32px } .toggle-switch-check:checked ~ .toggle-switch-bar .button-icon-on,label:not(.toggle-switch) .toggle-switch:checked ~ .toggle-switch-bar .button-icon-on,.toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-icon-on,label:not(.toggle-switch) .toggle-switch:checked ~ .toggle-switch-bar .toggle-switch-icon-on { opacity: 1 } .toggle-switch-check:checked ~ .toggle-switch-bar .button-icon-off,label:not(.toggle-switch) .toggle-switch:checked ~ .toggle-switch-bar .button-icon-off,.toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-icon-off,label:not(.toggle-switch) .toggle-switch:checked ~ .toggle-switch-bar .toggle-switch-icon-off { opacity: 0 } .toggle-switch-check:disabled ~ .toggle-switch-bar,label:not(.toggle-switch) .toggle-switch:disabled ~ .toggle-switch-bar,.toggle-switch-check.disabled ~ .toggle-switch-bar,label:not(.toggle-switch) .disabled.toggle-switch ~ .toggle-switch-bar { cursor: not-allowed; opacity: .4 } .toggle-switch-check:focus ~ .toggle-switch-bar:before,label:not(.toggle-switch) .toggle-switch:focus ~ .toggle-switch-bar:before { box-shadow: 0 0 0 .125rem #fff,0 0 0 .25rem #80acff } .toggle-switch-label { display: block; margin-bottom: 2px } .toggle-switch-text { display: block; font-size: .75rem } .toggle-switch-text-left { display: inline-flex; line-height: 32px; margin-right: 8px } .toggle-switch-text-right { display: inline-flex; line-height: 32px; margin-left: 8px } @media(max-width: 767.98px) { .toggle-switch-bar .toggle-switch-handle { min-width:44px } .toggle-switch-bar .toggle-switch-icon { font-size: .625rem } .toggle-switch-bar .button-icon { font-size: .625rem } .toggle-switch-check:empty ~ .toggle-switch-bar,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar { height: 24px; line-height: 24px; text-indent: 0 } .toggle-switch-check:empty ~ .toggle-switch-bar:after,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar:after { bottom: 4px; height: 16px; left: 4px; top: 4px; width: 16px } .toggle-switch-check:empty ~ .toggle-switch-bar:before,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar:before { width: 44px } .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-handle:after,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar .toggle-switch-handle:after { margin-left: 52px } .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar .toggle-switch-icon { left: 4px; line-height: 16px; top: 4px; width: 16px } .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon-on,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar .toggle-switch-icon-on { left: 4px } .toggle-switch-check:empty ~ .toggle-switch-bar .toggle-switch-icon-off,label:not(.toggle-switch) .toggle-switch:empty ~ .toggle-switch-bar .toggle-switch-icon-off { left: 24px } .toggle-switch-check:checked ~ .toggle-switch-bar:after,label:not(.toggle-switch) .toggle-switch:checked ~ .toggle-switch-bar:after { left: 24px } .toggle-switch-check:checked ~ .toggle-switch-bar .toggle-switch-handle:after,label:not(.toggle-switch) .toggle-switch:checked ~ .toggle-switch-bar .toggle-switch-handle:after { margin-left: 52px } .toggle-switch-check:checked ~ .toggle-switch-bar .button-icon,label:not(.toggle-switch) .toggle-switch:checked ~ .toggle-switch-bar .button-icon { left: 24px } .toggle-switch-text-left,.toggle-switch-text-right { line-height: 24px } }