diff --git a/scss/_definitions.scss b/scss/_definitions.scss index 734c402..be8c1b0 100644 --- a/scss/_definitions.scss +++ b/scss/_definitions.scss @@ -109,3 +109,29 @@ select { transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; margin-top: 0.75rem; } + +.input-group { + border-color: $color-dark; + &-prepend { + background-color: $color-grey; + @include borders(); + @include border-radius(); + } + + &-text { + background-color: transparent; + color: #FFF; + border: none; + text-shadow: 0px -1px 0px rgba(0,0,0,0.3); + } + + .form-control { + @include borders(); + @include border-radius(); + + box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.1); + &:focus { + box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 2px lighten($color-primary, 20%) ; + } + } +} diff --git a/style.css b/style.css index ee3072e..4a62e11 100644 --- a/style.css +++ b/style.css @@ -131,6 +131,24 @@ select { transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; margin-top: 0.75rem; } +.input-group { + border-color: #2D2D2D; } + .input-group-prepend { + background-color: #77767b; + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 0px 0px 0px 0px; } + .input-group-text { + background-color: transparent; + color: #FFF; + border: none; + text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); } + .input-group .form-control { + border: 1px solid rgba(0, 0, 0, 0.3); + border-radius: 0px 0px 0px 0px; + box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.1); } + .input-group .form-control:focus { + box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 2px #ee8c7d; } + /* * 2 - Typography ( _typography.scss ) *