Current Path : /var/www/u0635749/data/www/hobbyclick.ru/hobbyclick.ru/www/bitrix/js/ui/switcher/ |
Current File : /var/www/u0635749/data/www/hobbyclick.ru/hobbyclick.ru/www/bitrix/js/ui/switcher/ui.switcher.css |
.ui-switcher { position: relative; display: inline-block; height: 22px; width: 53px; border-radius: 32px; overflow: hidden; box-sizing: border-box; cursor: pointer; z-index: 4; } .ui-switcher-enabled, .ui-switcher-disabled { display: inline-block; position: absolute; width: 100%; height: 100%; color: rgba(255, 255, 255, .5); font: 9px/22px "OpenSans-Bold", "Helvetica Neue", Arial, Helvetica, sans-serif; text-transform: uppercase; vertical-align: middle; transition: opacity .3s; overflow: hidden; box-sizing: border-box; z-index: 1; } .ui-switcher-enabled { padding: 0 22px 0 0; background-color: #2fc6f6; text-align: right; z-index: 2; } .ui-switcher-disabled { padding: 0 0 0 22px; background-color: #e3e5e8; color: rgba(81,92,105,.25); } .ui-switcher-cursor { position: absolute; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .09); transform: translate(33px, 0); transition: transform .3s; z-index: 3; } .ui-switcher-cursor svg { top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: inherit; width: inherit; -webkit-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite; -webkit-transform-origin: center center; transform-origin: center center; } .ui-switcher-cursor svg circle { stroke: #ccc; stroke-dasharray: 60, 200; stroke-dashoffset: 0; animation: dash 1.5s linear infinite; stroke-linecap: round; } /* region ---STATES--- */ .ui-switcher-size-sm.ui-switcher { width: 42px; height: 17px; } .ui-switcher-size-sm .ui-switcher-cursor { width: 11px; height: 11px; } .ui-switcher-size-sm .ui-switcher-enabled, .ui-switcher-size-sm .ui-switcher-disabled { font: 7px/17px "OpenSans-Bold", "Helvetica Neue", Arial, Helvetica, sans-serif; } .ui-switcher-text-size-sm.ui-switcher-enabled, .ui-switcher-text-size-sm.ui-switcher-disabled { font: 6px/18px "OpenSans-Bold", "Helvetica Neue", Arial, Helvetica, sans-serif; } .ui-switcher-size-sm .ui-switcher-enabled { padding: 0 18px 0 0; } .ui-switcher-size-sm .ui-switcher-disabled { padding: 0 0 0 17px; } .ui-switcher-color-green .ui-switcher-enabled, .ui-switcher-color-green .ui-switcher-disabled { color: rgba(81,92,105,.25); } .ui-switcher-color-green .ui-switcher-enabled { background-color: #bbed22; text-align: right; } .ui-switcher-color-green .ui-switcher-disabled { background-color: #e3e5e8; } .ui-switcher-size-sm .ui-switcher-cursor { transform: translate(27px, 0); } .ui-switcher-off .ui-switcher-cursor { transform: translate(4px, 0); } .ui-switcher-off .ui-switcher-disabled { opacity: 1; } .ui-switcher-off .ui-switcher-enabled { opacity: 0; } /* endregion */