Less to SCSS converter All In One
Less to SCSS converter All In One
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, 禁止转载 🈲️，侵权必究⚠️！
本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/15075198.html
未经授权禁止转载，违者必究！
