Sin Descripción

radio.css 11KB

    @charset "UTF-8"; /* BEM support Func -------------------------- */ /* Element Chalk Variables */ /* Transition -------------------------- */ /* Color -------------------------- */ /* 53a8ff */ /* 66b1ff */ /* 79bbff */ /* 8cc5ff */ /* a0cfff */ /* b3d8ff */ /* c6e2ff */ /* d9ecff */ /* ecf5ff */ /* Link -------------------------- */ /* Border -------------------------- */ /* Fill -------------------------- */ /* Typography -------------------------- */ /* Size -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* Message Box -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Timeline --------------------------*/ /* Break-point --------------------------*/ /* Break-points -------------------------- */ /* Scrollbar -------------------------- */ /* Placeholder -------------------------- */ /* BEM -------------------------- */ /* Element Chalk Variables */ /* Transition -------------------------- */ /* Color -------------------------- */ /* 53a8ff */ /* 66b1ff */ /* 79bbff */ /* 8cc5ff */ /* a0cfff */ /* b3d8ff */ /* c6e2ff */ /* d9ecff */ /* ecf5ff */ /* Link -------------------------- */ /* Border -------------------------- */ /* Fill -------------------------- */ /* Typography -------------------------- */ /* Size -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* Message Box -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Timeline --------------------------*/ /* Break-point --------------------------*/ /* Element Chalk Variables */ /* Transition -------------------------- */ /* Color -------------------------- */ /* 53a8ff */ /* 66b1ff */ /* 79bbff */ /* 8cc5ff */ /* a0cfff */ /* b3d8ff */ /* c6e2ff */ /* d9ecff */ /* ecf5ff */ /* Link -------------------------- */ /* Border -------------------------- */ /* Fill -------------------------- */ /* Typography -------------------------- */ /* Size -------------------------- */ /* z-index -------------------------- */ /* Disable base -------------------------- */ /* Icon -------------------------- */ /* Checkbox -------------------------- */ /* Radio -------------------------- */ /* Select -------------------------- */ /* Alert -------------------------- */ /* Message Box -------------------------- */ /* Message -------------------------- */ /* Notification -------------------------- */ /* Input -------------------------- */ /* Cascader -------------------------- */ /* Group -------------------------- */ /* Tab -------------------------- */ /* Button -------------------------- */ /* cascader -------------------------- */ /* Switch -------------------------- */ /* Dialog -------------------------- */ /* Table -------------------------- */ /* Pagination -------------------------- */ /* Popover -------------------------- */ /* Tooltip -------------------------- */ /* Tag -------------------------- */ /* Tree -------------------------- */ /* Dropdown -------------------------- */ /* Badge -------------------------- */ /* Card --------------------------*/ /* Slider --------------------------*/ /* Steps --------------------------*/ /* Menu --------------------------*/ /* Rate --------------------------*/ /* DatePicker --------------------------*/ /* Loading --------------------------*/ /* Scrollbar --------------------------*/ /* Carousel --------------------------*/ /* Collapse --------------------------*/ /* Transfer --------------------------*/ /* Header --------------------------*/ /* Footer --------------------------*/ /* Main --------------------------*/ /* Timeline --------------------------*/ /* Break-point --------------------------*/ .el-radio { color: #606266; font-weight: 500; line-height: 1; position: relative; cursor: pointer; display: inline-block; white-space: nowrap; outline: none; font-size: 14px; margin-right: 30px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .el-radio.is-bordered { padding: 12px 20px 0 10px; border-radius: 4px; border: 1px solid #DCDFE6; -webkit-box-sizing: border-box; box-sizing: border-box; height: 40px; } .el-radio.is-bordered.is-checked { border-color: #00837e; } .el-radio.is-bordered.is-disabled { cursor: not-allowed; border-color: #EBEEF5; } .el-radio.is-bordered + .el-radio.is-bordered { margin-left: 10px; } .el-radio--medium.is-bordered { padding: 10px 20px 0 10px; border-radius: 4px; height: 36px; } .el-radio--medium.is-bordered .el-radio__label { font-size: 14px; } .el-radio--medium.is-bordered .el-radio__inner { height: 14px; width: 14px; } .el-radio--small.is-bordered { padding: 8px 15px 0 10px; border-radius: 3px; height: 32px; } .el-radio--small.is-bordered .el-radio__label { font-size: 12px; } .el-radio--small.is-bordered .el-radio__inner { height: 12px; width: 12px; } .el-radio--mini.is-bordered { padding: 6px 15px 0 10px; border-radius: 3px; height: 28px; } .el-radio--mini.is-bordered .el-radio__label { font-size: 12px; } .el-radio--mini.is-bordered .el-radio__inner { height: 12px; width: 12px; } .el-radio:last-child { margin-right: 0; } .el-radio__input { white-space: nowrap; cursor: pointer; outline: none; display: inline-block; line-height: 1; position: relative; vertical-align: middle; } .el-radio__input.is-disabled .el-radio__inner { background-color: #f5f7fa; border-color: #E4E7ED; cursor: not-allowed; } .el-radio__input.is-disabled .el-radio__inner::after { cursor: not-allowed; background-color: #f5f7fa; } .el-radio__input.is-disabled .el-radio__inner + .el-radio__label { cursor: not-allowed; } .el-radio__input.is-disabled.is-checked .el-radio__inner { background-color: #f5f7fa; border-color: #E4E7ED; } .el-radio__input.is-disabled.is-checked .el-radio__inner::after { background-color: #C0C4CC; } .el-radio__input.is-disabled + span.el-radio__label { color: #C0C4CC; cursor: not-allowed; } .el-radio__input.is-checked .el-radio__inner { border-color: #00837e; background: #00837e; } .el-radio__input.is-checked .el-radio__inner::after { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .el-radio__input.is-checked + .el-radio__label { color: #00837e; } .el-radio__input.is-focus .el-radio__inner { border-color: #00837e; } .el-radio__inner { border: 1px solid #DCDFE6; border-radius: 100%; width: 14px; height: 14px; background-color: #FFFFFF; position: relative; cursor: pointer; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; } .el-radio__inner:hover { border-color: #00837e; } .el-radio__inner::after { width: 4px; height: 4px; border-radius: 100%; background-color: #FFFFFF; content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); -webkit-transition: -webkit-transform .15s ease-in; transition: -webkit-transform .15s ease-in; transition: transform .15s ease-in; transition: transform .15s ease-in, -webkit-transform .15s ease-in; } .el-radio__original { opacity: 0; outline: none; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; margin: 0; } .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) { /*获得焦点时 样式提醒*/ } .el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner { -webkit-box-shadow: 0 0 2px 2px #00837e; box-shadow: 0 0 2px 2px #00837e; } .el-radio__label { font-size: 14px; padding-left: 10px; }