diff options
1 files changed, 62 insertions, 61 deletions
| -rw-r--r-- | src/forms.less | 123 |
diff --git a/src/forms.less b/src/forms.less index 55f4aad..3479fb3 100644 --- a/src/forms.less +++ b/src/forms.less @@ -4,21 +4,21 @@ } // Form element: Input boxes .form-input { - position: relative; - display: block; - width: 100%; - max-width: 100%; - height: 3.2rem; + -webkit-appearance: none; background: #fff; background-image: none; border: .1rem solid @control-color; border-radius: .3rem; color: @body-font-color; + display: block; font-size: 1.4rem; + height: 3.2rem; line-height: 1.6rem; - padding: .7rem .8rem; - -webkit-appearance: none; + max-width: 100%; outline: 0; + padding: .7rem .8rem; + position: relative; + width: 100%; &:focus { border-color: @core-color; @@ -30,23 +30,23 @@ // Input sizes &.input-sm { - height: 2.4rem; border-radius: .2rem; font-size: 1.2rem; + height: 2.4rem; padding: .3rem .6rem; } &.input-lg { - height: 4.2rem; border-radius: .4rem; font-size: 1.6rem; + height: 4.2rem; line-height: 2rem; padding: 1rem 1.2rem; } &.input-inline { - width: auto; display: inline-block; + width: auto; } // Textarea @@ -68,22 +68,22 @@ // Form element: Label .form-label { display: block; - margin-bottom: .5rem; line-height: 1.6rem; + margin-bottom: .5rem; } // Form element: Select .form-select { appearance: none; &:not([multiple]) { - height: 3.2rem; - font-size: 1.4rem; - vertical-align: middle; - padding: .5rem 2.4rem .5rem .8rem; + background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center / .8rem 1rem; border: .1rem solid @control-color; border-radius: .3rem; + font-size: 1.4rem; + height: 3.2rem; outline: 0; - background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right 0.75rem center / 0.8rem 1rem; + padding: .5rem 2.4rem .5rem .8rem; + vertical-align: middle; } &:focus { @@ -95,13 +95,12 @@ // Select small &.select-sm { - height: 2.4rem; border-radius: .2rem; font-size: 1.2rem; + height: 2.4rem; padding: .4rem 2rem .4rem .6rem; } } - // Form element: Checkbox and radio .form-checkbox, .form-radio, @@ -112,25 +111,25 @@ } .form-checkbox, .form-radio { - line-height: 1.8rem; - padding: .3rem 2rem; cursor: pointer; display: inline-block; + line-height: 1.8rem; + padding: .3rem 2rem; position: relative; .form-icon { - font-size: 1.4rem; - line-height: 2.4rem; - vertical-align: top; border: .1rem solid @control-color; display: inline-block; - width: 1.4rem; + font-size: 1.4rem; height: 1.4rem; + left: 0; + line-height: 2.4rem; + outline: none; padding: 0; position: absolute; top: .5rem; - left: 0; - outline: none; + vertical-align: top; + width: 1.4rem; } &:hover .form-icon { border-color: darken(@control-color, 15%); @@ -147,18 +146,19 @@ input:checked + .form-icon { &::after { - width: .6rem; - height: 1rem; + background-clip: padding-box; + border: .2rem solid #fff; + border-left-width: 0; + border-top-width: 0; content: ""; - position: absolute; - top: 50%; + height: 1rem; left: 50%; - margin-top: -.6rem; margin-left: -.3rem; - border: .2rem solid #fff; - border-top-width: 0; - border-left-width: 0; + margin-top: -.6rem; + position: absolute; + top: 50%; transform: rotate(45deg); + width: .6rem; } } } @@ -169,53 +169,54 @@ input:checked + .form-icon { &::after { - width: .4rem; - height: .4rem; + background: #fff; + border-radius: .2rem; content: ""; - position: absolute; - top: 50%; + height: .4rem; left: 50%; - margin-top: -.2rem; margin-left: -.2rem; - border-radius: .2rem; - background: #fff; + margin-top: -.2rem; + position: absolute; + top: 50%; + width: .4rem; } } } // Form element: Switch .form-switch { - line-height: 1.8rem; - padding: .3rem 2rem .3rem 3.6rem; cursor: pointer; display: inline-block; + line-height: 1.8rem; + padding: .3rem 2rem .3rem 3.6rem; position: relative; .form-icon { - line-height: 2.4rem; - vertical-align: top; - border: .1rem solid @control-color; background: @control-color; + background-clip: padding-box; + border: .1rem solid @control-color; + border-radius: .9rem; display: inline-block; - width: 3rem; height: 1.8rem; + left: 0; + line-height: 2.4rem; + outline: none; padding: 0; - border-radius: .9rem; position: absolute; top: .3rem; - left: 0; - outline: none; + vertical-align: top; + width: 3rem; &::after { + background: #fff; + border-radius: .8rem; content: ""; display: block; - width: 1.6rem; height: 1.6rem; - border-radius: .8rem; + left: 0; position: absolute; top: 0; - left: 0; - background: #fff; transition: left .15s ease; + width: 1.6rem; } } @@ -234,11 +235,11 @@ display: flex; .input-group-addon { - line-height: 1.6rem; - padding: .7rem .8rem; + background: @core-border-color; border: .1rem solid @control-color; border-radius: .3rem; - background: @core-border-color; + line-height: 1.6rem; + padding: .7rem .8rem; } .input-group-addon, .input-group-btn { @@ -249,17 +250,17 @@ .input-group-addon, .input-group-btn { &:first-child:not(:last-child) { - border-top-right-radius: 0; border-bottom-right-radius: 0; + border-top-right-radius: 0; } &:not(:first-child):not(:last-child) { - margin-left: -.1rem; border-radius: 0; + margin-left: -.1rem; } &:last-child:not(:first-child) { - margin-left: -.1rem; - border-top-left-radius: 0; border-bottom-left-radius: 0; + border-top-left-radius: 0; + margin-left: -.1rem; } &:focus { z-index: 99; |