xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

Less to SCSS converter All In One

Less to SCSS converter All In One

https://less2scss.awk5.com/

https://jsonformatter.org/less-to-scss

demo

    @normal-color: #606266;      //正常情况下的字体颜色
    @hover-color: #c0c4cc;       //边框的颜色
    @active-color: #409eff;       //活动的颜色
    @mouse-move-color: #f5f7fa;  //在列表项上按下时的列表项的背景色
    @padding-left: 5%;           //两侧的边距
    @arrowWidth: 12%;            //右边的小三角按钮区域的宽度

    .placeholder11{
        color: red; top: 10px;
    }
    .show-box{
        &.active{
            border-color: @active-color;
        }
        // &:hover{
        // 	border-color: @normal-color;
        // 	&.active{
        // 		border-color: @active-color;
        // 	}
        // }
        &.disabled{
            background-color: #f0f0f0;
        }
        text-align: left;
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid @hover-color;
        box-sizing: border-box;
        color: @normal-color;
        display: inline-block;
        font-size: inherit;
        height: 3em;
        line-height: inherit;
        outline: none;
        padding: 0 @arrowWidth 0 @padding-left;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
        position: relative;
        .input{
            width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: flex-start;
        }
        .placeholder{
            color: #bbb;
        }

        //***************************  右侧的小箭头  ***************************
        .right-arrow{
            &.isRotate{
                transform: rotate(180deg);
            }
            transition: transform .2s cubic-bezier(.645,.045,.355,1);
            position: absolute; font-size: 1em; right: 0px; display: flex;
            top: 0;
            align-items: center; color: @hover-color; height: 100%;
            font-weight: 100; width: @arrowWidth; justify-content: center;
        }
        .clear{
            color: #fff;  line-height: 1;
            background-color: @hover-color; border-radius: 50%;  padding: 2px;
        }

        /****** 列表框部分样式 *****/
        .list-container{
            position: absolute; width: 100%; left: 0; top: 50px;
            box-sizing: border-box; z-index: 100;

            //***************************  弹出框上面的小三角  ***************************
            .popper__arrow{
                 transform: translateX(-400%);
                 position: absolute;
                 display: block;
                 width: 0;
                 height: 0;
                 border-color: transparent;
                 border-style: solid;
                 border-width: 6px;
                 filter: drop-shadow(0 2px 12px rgba(0,0,0,.03));
                 left: 30%;
                 margin-right: 3px;
                 border-top-width: 0;
                 border-bottom-color: #dcdfe6;
                 top: -5px;
                &:after{
                    content: " ";
                    border-width: 6px;
                    position: absolute;
                    display: block;
                    width: 0;
                    height: 0;
                    border-color: transparent;
                    border-style: solid;
                     top: 1px;
                    margin-left: -6px;
                    border-top-width: 0;
                    border-bottom-color: #fff;
                }
            }
            .list{
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                width: 100%;
                max-height: 10em;
                background-color: #fff;
                box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
                padding: 5px 0;

                //***************************  弹出框中每一项样式  ***************************
                .item{
                    &:hover{
                        background-color: @mouse-move-color;
                        &.disabled{
                            background-color: transparent;
                        }
                    }
                    &.active{
                        color: @active-color;
                        font-weight: 500;
                        background-color: @mouse-move-color;
                    }
                    &.disabled{
                        color:  @hover-color;
                    }
                    padding: 0 @padding-left;
                    line-height: 2;
                }
                .data-state{
                    color:  @hover-color;
                }
            }
        }
    }

//**************************************  以下为字体  ****************************************
@font-face {font-family: "iconfont";
  src:
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAM8AAsAAAAAB1gAAALvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqCEIFsATYCJAMQCwoABCAFhG0HSxthBhEVlKdkPwvsmHgLNqmwEc2pDxvYjI1gkX0f4uFrv9dz3+772RAqQJV8FbKANj5RiB1f1q0ioyorK1THs2Qj0gAJVYn///3mxT27TKyJJ63gD/KkYhr/9woe4ghtLxKJk5AWd7icc+CiJuQLU5SVQ48+ST+l0H2/pM2sm89zOb2VZYHMb1luYy3a0496AWYLKLA9sQ0UaAEFxC2yi7gTF3GaQJtRTbFxcfcIRYYmBeKyjDJQCiFZNrJFaDSszOI11Ep1IQZeRd+P/zAXcip1gmbuHJ/nYeWX9redqtuqPU6AYj4vjHUkNJGJ08bUviQMXtL2m2wJRVHxS/sz/N1+2CZOdizDemP/eBXRgCo7wIKcTvzSUnlmGMoSgt/tChX8EEOBlNvCLsQdpgv8HuNG8wuia9YA1Tfni5TZR1QthTxh8ZM2VCAHtiBtzfWtz1RtObA8IXowr5rzRK4/sRYpfjm1FBA9nrPl/qNAJRZLKJNsUumMKdb3dkIlkqjEtt8VrbNjZgnB48fG1XqNHax98/uI4xs768DFXVceFql2do6594N/t9vl/tw+ZlhKP6ngFjorHQq/AOmpcAlI98L7Pz/KG7P0OqU7+SuqQ7d8OXhYRvZsnLHcTCD4zwpgXfZVyJGzq6byIJiNgyZUaNOGv5ujz885jIPgWkIxOCLYYiRDUkyTmdNErd0CGopltJm1vb5dv3tJ5DDjpYTQ4wMqXT4h6fGZzJwfqA2R/SGlDxGUnsO0o4onyuKUUDLWoDbodPCGuFjE1U9sJispr4r4X6Sxi0IRiZWzD/RIc8wZ56ZkNmAoOLhL56G1ASKFHjWnLXOssmix6UWpDm4nnCJIYqgGlA3oaIFneHMmKp9/Qo2JJVEHqyf9hcio6x0UUjmAfOg9iHUvl4xmjRJjBjBI4IC7NAxZVgBi87Ae0liqHZGIKhluZKD6dH2j+8Jd0AY9MUcVKXLU5I9a6XU7FUcUppMkCss5MAeXmM7a3Q4A') format('woff2'),
  url('data:application/x-font-woff;charset=utf-8;base64,d09GMgABAAAAAAM8AAsAAAAAB1gAAALvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqCEIFsATYCJAMQCwoABCAFhG0HSxthBhEVlKdkPwvsmHgLNqmwEc2pDxvYjI1gkX0f4uFrv9dz3+772RAqQJV8FbKANj5RiB1f1q0ioyorK1THs2Qj0gAJVYn///3mxT27TKyJJ63gD/KkYhr/9woe4ghtLxKJk5AWd7icc+CiJuQLU5SVQ48+ST+l0H2/pM2sm89zOb2VZYHMb1luYy3a0496AWYLKLA9sQ0UaAEFxC2yi7gTF3GaQJtRTbFxcfcIRYYmBeKyjDJQCiFZNrJFaDSszOI11Ep1IQZeRd+P/zAXcip1gmbuHJ/nYeWX9redqtuqPU6AYj4vjHUkNJGJ08bUviQMXtL2m2wJRVHxS/sz/N1+2CZOdizDemP/eBXRgCo7wIKcTvzSUnlmGMoSgt/tChX8EEOBlNvCLsQdpgv8HuNG8wuia9YA1Tfni5TZR1QthTxh8ZM2VCAHtiBtzfWtz1RtObA8IXowr5rzRK4/sRYpfjm1FBA9nrPl/qNAJRZLKJNsUumMKdb3dkIlkqjEtt8VrbNjZgnB48fG1XqNHax98/uI4xs768DFXVceFql2do6594N/t9vl/tw+ZlhKP6ngFjorHQq/AOmpcAlI98L7Pz/KG7P0OqU7+SuqQ7d8OXhYRvZsnLHcTCD4zwpgXfZVyJGzq6byIJiNgyZUaNOGv5ujz885jIPgWkIxOCLYYiRDUkyTmdNErd0CGopltJm1vb5dv3tJ5DDjpYTQ4wMqXT4h6fGZzJwfqA2R/SGlDxGUnsO0o4onyuKUUDLWoDbodPCGuFjE1U9sJispr4r4X6Sxi0IRiZWzD/RIc8wZ56ZkNmAoOLhL56G1ASKFHjWnLXOssmix6UWpDm4nnCJIYqgGlA3oaIFneHMmKp9/Qo2JJVEHqyf9hcio6x0UUjmAfOg9iHUvl4xmjRJjBjBI4IC7NAxZVgBi87Ae0liqHZGIKhluZKD6dH2j+8Jd0AY9MUcVKXLU5I9a6XU7FUcUppMkCss5MAeXmM7a3Q4A') format('woff')
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconshanchu1:before {
  content: "\e68c";
}

.icongou:before {
  content: "\e786";
}

.iconarrowBottom-fill:before {
  content: "\e60e";
}

    $normal-color: #606266;      //正常情况下的字体颜色
    $hover-color: #c0c4cc;       //边框的颜色
    $active-color: #409eff;       //活动的颜色
    $mouse-move-color: #f5f7fa;  //在列表项上按下时的列表项的背景色
    $padding-left: 5%;           //两侧的边距
    $arrowWidth: 12%;            //右边的小三角按钮区域的宽度

    .placeholder11{
        color: red; top: 10px;
    }
    .show-box{
        &.active{
            border-color: $active-color;
        }
        // &:hover{
        // 	border-color: $normal-color;
        // 	&.active{
        // 		border-color: $active-color;
        // 	}
        // }
        &.disabled{
            background-color: #f0f0f0;
        }
        text-align: left;
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid $hover-color;
        box-sizing: border-box;
        color: $normal-color;
        display: inline-block;
        font-size: inherit;
        height: 3em;
        line-height: inherit;
        outline: none;
        padding: 0 $arrowWidth 0 $padding-left;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
        position: relative;
        .input{
            width: 100%; height: 100%;
            display: flex; align-items: center; justify-content: flex-start;
        }
        .placeholder{
            color: #bbb;
        }

        //***************************  右侧的小箭头  ***************************
        .right-arrow{
            &.isRotate{
                transform: rotate(180deg);
            }
            transition: transform .2s cubic-bezier(.645,.045,.355,1);
            position: absolute; font-size: 1em; right: 0px; display: flex;
            top: 0;
            align-items: center; color: $hover-color; height: 100%;
            font-weight: 100; width: $arrowWidth; justify-content: center;
        }
        .clear{
            color: #fff;  line-height: 1;
            background-color: $hover-color; border-radius: 50%;  padding: 2px;
        }

        /****** 列表框部分样式 *****/
        .list-container{
            position: absolute; width: 100%; left: 0; top: 50px;
            box-sizing: border-box; z-index: 100;

            //***************************  弹出框上面的小三角  ***************************
            .popper__arrow{
                 transform: translateX(-400%);
                 position: absolute;
                 display: block;
                 width: 0;
                 height: 0;
                 border-color: transparent;
                 border-style: solid;
                 border-width: 6px;
                 filter: drop-shadow(0 2px 12px rgba(0,0,0,.03));
                 left: 30%;
                 margin-right: 3px;
                 border-top-width: 0;
                 border-bottom-color: #dcdfe6;
                 top: -5px;
                &:after{
                    content: " ";
                    border-width: 6px;
                    position: absolute;
                    display: block;
                    width: 0;
                    height: 0;
                    border-color: transparent;
                    border-style: solid;
                     top: 1px;
                    margin-left: -6px;
                    border-top-width: 0;
                    border-bottom-color: #fff;
                }
            }
            .list{
                border-radius: 4px;
                border: 1px solid #dcdfe6;
                width: 100%;
                max-height: 10em;
                background-color: #fff;
                box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
                padding: 5px 0;

                //***************************  弹出框中每一项样式  ***************************
                .item{
                    &:hover{
                        background-color: $mouse-move-color;
                        &.disabled{
                            background-color: transparent;
                        }
                    }
                    &.active{
                        color: $active-color;
                        font-weight: 500;
                        background-color: $mouse-move-color;
                    }
                    &.disabled{
                        color:  $hover-color;
                    }
                    padding: 0 $padding-left;
                    line-height: 2;
                }
                .data-state{
                    color:  $hover-color;
                }
            }
        }
    }

//**************************************  以下为字体  ****************************************
$font-face {font-family: "iconfont";
  src:
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAM8AAsAAAAAB1gAAALvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqCEIFsATYCJAMQCwoABCAFhG0HSxthBhEVlKdkPwvsmHgLNqmwEc2pDxvYjI1gkX0f4uFrv9dz3+772RAqQJV8FbKANj5RiB1f1q0ioyorK1THs2Qj0gAJVYn///3mxT27TKyJJ63gD/KkYhr/9woe4ghtLxKJk5AWd7icc+CiJuQLU5SVQ48+ST+l0H2/pM2sm89zOb2VZYHMb1luYy3a0496AWYLKLA9sQ0UaAEFxC2yi7gTF3GaQJtRTbFxcfcIRYYmBeKyjDJQCiFZNrJFaDSszOI11Ep1IQZeRd+P/zAXcip1gmbuHJ/nYeWX9redqtuqPU6AYj4vjHUkNJGJ08bUviQMXtL2m2wJRVHxS/sz/N1+2CZOdizDemP/eBXRgCo7wIKcTvzSUnlmGMoSgt/tChX8EEOBlNvCLsQdpgv8HuNG8wuia9YA1Tfni5TZR1QthTxh8ZM2VCAHtiBtzfWtz1RtObA8IXowr5rzRK4/sRYpfjm1FBA9nrPl/qNAJRZLKJNsUumMKdb3dkIlkqjEtt8VrbNjZgnB48fG1XqNHax98/uI4xs768DFXVceFql2do6594N/t9vl/tw+ZlhKP6ngFjorHQq/AOmpcAlI98L7Pz/KG7P0OqU7+SuqQ7d8OXhYRvZsnLHcTCD4zwpgXfZVyJGzq6byIJiNgyZUaNOGv5ujz885jIPgWkIxOCLYYiRDUkyTmdNErd0CGopltJm1vb5dv3tJ5DDjpYTQ4wMqXT4h6fGZzJwfqA2R/SGlDxGUnsO0o4onyuKUUDLWoDbodPCGuFjE1U9sJispr4r4X6Sxi0IRiZWzD/RIc8wZ56ZkNmAoOLhL56G1ASKFHjWnLXOssmix6UWpDm4nnCJIYqgGlA3oaIFneHMmKp9/Qo2JJVEHqyf9hcio6x0UUjmAfOg9iHUvl4xmjRJjBjBI4IC7NAxZVgBi87Ae0liqHZGIKhluZKD6dH2j+8Jd0AY9MUcVKXLU5I9a6XU7FUcUppMkCss5MAeXmM7a3Q4A') format('woff2'),
  url('data:application/x-font-woff;charset=utf-8;base64,d09GMgABAAAAAAM8AAsAAAAAB1gAAALvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqCEIFsATYCJAMQCwoABCAFhG0HSxthBhEVlKdkPwvsmHgLNqmwEc2pDxvYjI1gkX0f4uFrv9dz3+772RAqQJV8FbKANj5RiB1f1q0ioyorK1THs2Qj0gAJVYn///3mxT27TKyJJ63gD/KkYhr/9woe4ghtLxKJk5AWd7icc+CiJuQLU5SVQ48+ST+l0H2/pM2sm89zOb2VZYHMb1luYy3a0496AWYLKLA9sQ0UaAEFxC2yi7gTF3GaQJtRTbFxcfcIRYYmBeKyjDJQCiFZNrJFaDSszOI11Ep1IQZeRd+P/zAXcip1gmbuHJ/nYeWX9redqtuqPU6AYj4vjHUkNJGJ08bUviQMXtL2m2wJRVHxS/sz/N1+2CZOdizDemP/eBXRgCo7wIKcTvzSUnlmGMoSgt/tChX8EEOBlNvCLsQdpgv8HuNG8wuia9YA1Tfni5TZR1QthTxh8ZM2VCAHtiBtzfWtz1RtObA8IXowr5rzRK4/sRYpfjm1FBA9nrPl/qNAJRZLKJNsUumMKdb3dkIlkqjEtt8VrbNjZgnB48fG1XqNHax98/uI4xs768DFXVceFql2do6594N/t9vl/tw+ZlhKP6ngFjorHQq/AOmpcAlI98L7Pz/KG7P0OqU7+SuqQ7d8OXhYRvZsnLHcTCD4zwpgXfZVyJGzq6byIJiNgyZUaNOGv5ujz885jIPgWkIxOCLYYiRDUkyTmdNErd0CGopltJm1vb5dv3tJ5DDjpYTQ4wMqXT4h6fGZzJwfqA2R/SGlDxGUnsO0o4onyuKUUDLWoDbodPCGuFjE1U9sJispr4r4X6Sxi0IRiZWzD/RIc8wZ56ZkNmAoOLhL56G1ASKFHjWnLXOssmix6UWpDm4nnCJIYqgGlA3oaIFneHMmKp9/Qo2JJVEHqyf9hcio6x0UUjmAfOg9iHUvl4xmjRJjBjBI4IC7NAxZVgBi87Ae0liqHZGIKhluZKD6dH2j+8Jd0AY9MUcVKXLU5I9a6XU7FUcUppMkCss5MAeXmM7a3Q4A') format('woff')
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconshanchu1:before {
  content: "\e68c";
}

.icongou:before {
  content: "\e786";
}

.iconarrowBottom-fill:before {
  content: "\e60e";
}

refs

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

posted @ 2021-07-29 15:13  xgqfrms  阅读(77)  评论(7)  编辑  收藏  举报