<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet">
<div class="section section-basic" id="basic-elements">
<div class="container">
<div id="inputs">
<h4>Inputs</h4>
<p class="category">Form Controls</p>
<div class="row">
<div class="col-sm-6 col-lg-3">
<div class="form-group">
<input type="text" value="" placeholder="Regular" class="form-control">
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="form-group has-success">
<input type="text" value="Success" class="form-control form-control-success">
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="form-group has-danger">
<input type="email" value="Error Input" class="form-control form-control-danger">
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="now-ui-icons users_single-02"></i></span>
</div>
<input type="text" class="form-control" placeholder="Left Font Awesome Icon">
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Right Nucleo Icon">
<div class="input-group-append">
<span class="input-group-text"><i class="now-ui-icons users_single-02"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center ">
<p>Made with <a href="https://demos.creative-tim.com/now-ui-kit/index.html" target="_blank">Now UI Kit</a> by Creative Tim</p>
</footer>
button,
input {
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
body {
color: #2c2c2c;
font-size: 14px;
font-family: Montserrat, Helvetica Neue, Arial, sans-serif;
overflow-x: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
@font-face {
font-family: 'Nucleo Outline';
src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot");
src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot") format("embedded-opentype");
src: url("https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/fonts/nucleo-outline.woff2");
font-weight: normal;
font-style: normal;
}
.form-control::-moz-placeholder {
color: #888888;
opacity: 0.8;
filter: alpha(opacity=80);
}
.form-control:-moz-placeholder {
color: #888888;
opacity: 0.8;
filter: alpha(opacity=80);
}
.form-control::-webkit-input-placeholder {
color: #888888;
opacity: 0.8;
filter: alpha(opacity=80);
}
.form-control:-ms-input-placeholder {
color: #888888;
opacity: 0.8;
filter: alpha(opacity=80);
}
.form-control {
background-color: transparent;
border: 1px solid #E3E3E3;
border-radius: 30px;
color: #2c2c2c;
line-height: normal;
font-size: 0.8571em;
-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-webkit-box-shadow: none;
box-shadow: none;
}
.has-success .form-control {
border-color: #E3E3E3;
}
.form-control:focus {
border: 1px solid #f96332;
-webkit-box-shadow: none;
box-shadow: none;
outline: 0 !important;
color: #2c2c2c;
}
.form-control:focus+.input-group-text,
.form-control:focus~.input-group-text {
border: 1px solid #f96332;
border-left: none;
background-color: transparent;
}
.has-success .form-control,
.has-success .form-control:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
.has-success .form-control:focus {
border-color: #1be611;
}
.has-danger .form-control.form-control-success,
.has-danger .form-control.form-control-danger,
.has-success .form-control.form-control-success,
.has-success .form-control.form-control-danger {
background-image: none;
}
.has-danger .form-control {
border-color: #ffcfcf;
color: #FF3636;
background-color: rgba(222, 222, 222, 0.1);
}
.has-danger .form-control:focus {
background-color: #FFFFFF;
}
.has-success:after,
.has-danger:after {
font-family: 'Nucleo Outline';
content: "\ea22";
display: inline-block;
position: absolute;
right: 20px;
top: 12px;
color: #18ce0f;
font-size: 11px;
}
.has-danger:after {
content: "\ea53";
color: #FF3636;
}
.form-group .form-control,
.input-group .form-control {
padding: 10px 18px 10px 18px;
}
.form-group .form-control+.input-group-text,
.input-group .form-control+.input-group-text {
padding: 10px 18px 10px 0;
}
.form-group .input-group-text,
.input-group .input-group-text {
padding: 10px 0 10px 18px;
}
.form-group .input-group-text+.form-control,
.form-group .input-group-text~.form-control,
.input-group .input-group-text+.form-control,
.input-group .input-group-text~.form-control {
padding: 10px 19px 11px 16px;
}
.input-group-text {
background-color: #FFFFFF;
border: 1px solid #E3E3E3;
border-radius: 30px;
color: #555555;
-webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
-ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.has-success .input-group-text,
.has-danger .input-group-text {
background-color: #FFFFFF;
}
.has-danger .form-control:focus+.input-group-text {
color: #FF3636;
}
.has-success .form-control:focus+.input-group-text {
color: #18ce0f;
}
.input-group-text+.form-control,
.input-group-text~.form-control {
padding: -0.5rem 0.7rem;
padding-left: 18px;
}
.input-group-text i {
width: 17px;
}
.input-group,
.form-group {
margin-bottom: 10px;
position: relative;
}
.input-group[disabled] .input-group-text {
background-color: #E3E3E3;
}
.input-group .input-group-prepend,
.form-group .input-group-prepend {
margin-right: 0;
}
.input-group .input-group-prepend .input-group-text,
.form-group .input-group-prepend .input-group-text {
border-left: 1px solid #E3E3E3;
}
.input-group .input-group-append .input-group-text,
.form-group .input-group-append .input-group-text {
border-right: 1px solid #E3E3E3;
padding: 10px 18px 10px 0;
}
.input-group .form-control:first-child,
.input-group-text:first-child {
border-right: 0 none;
}
.input-group .form-control:last-child,
.input-group-text:last-child {
border-left: 0 none;
}
.form-control[disabled],
.form-control[readonly] {
background-color: #E3E3E3;
color: #888888;
cursor: not-allowed;
}
.has-success.form-group .form-control,
.has-danger.form-group .form-control {
padding-right: 40px;
}
.form-group input[type=file] {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
button,
input {
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
h4 {
font-weight: 400;
}
h4,
.h4 {
font-size: 1.5em;
line-height: 1.45em;
margin-top: 30px;
margin-bottom: 15px;
}
h4+.category,
.h4+.category {
margin-top: -5px;
}
p {
line-height: 1.61em;
font-weight: 300;
font-size: 1.2em;
}
.category {
text-transform: capitalize;
font-weight: 700;
color: #9A9A9A;
}
[data-toggle="collapse"][data-parent="#accordion"] i {
-webkit-transition: transform 150ms ease 0s;
-moz-transition: transform 150ms ease 0s;
-o-transition: transform 150ms ease 0s;
-ms-transition: all 150ms ease 0s;
transition: transform 150ms ease 0s;
}
[data-toggle="collapse"][data-parent="#accordion"][aria-expanded="true"] i {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
@font-face {
font-family: 'Nucleo Outline';
src: url("../fonts/nucleo-outline.eot");
src: url("../fonts/nucleo-outline.eot") format("embedded-opentype"), url("../fonts/nucleo-outline.woff2") format("woff2"), url("../fonts/nucleo-outline.woff") format("woff"), url("../fonts/nucleo-outline.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
.now-ui-icons {
display: inline-block;
font: normal normal normal 14px/1 'Nucleo Outline';
font-size: inherit;
speak: none;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@-webkit-keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes nc-icon-spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.now-ui-icons.users_single-02:before {
content: "\ea51";
}
.section {
padding: 70px 0;
position: relative;
background: #FFFFFF;
}
.section .row+.category {
margin-top: 15px;
}
[data-background-color="orange"] {
background-color: #e95e38;
}
[data-background-color="black"] {
background-color: #2c2c2c;
}
[data-background-color]:not([data-background-color="gray"]) {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) p {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) h4 {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) .input-group-text {
color: rgba(255, 255, 255, 0.8);
}
[data-background-color]:not([data-background-color="gray"]) .form-control::-moz-placeholder {
color: #ebebeb;
opacity: 1;
filter: alpha(opacity=100);
}
[data-background-color]:not([data-background-color="gray"]) .form-control:-moz-placeholder {
color: #ebebeb;
opacity: 1;
filter: alpha(opacity=100);
}
[data-background-color]:not([data-background-color="gray"]) .form-control::-webkit-input-placeholder {
color: #ebebeb;
opacity: 1;
filter: alpha(opacity=100);
}
[data-background-color]:not([data-background-color="gray"]) .form-control:-ms-input-placeholder {
color: #ebebeb;
opacity: 1;
filter: alpha(opacity=100);
}
[data-background-color]:not([data-background-color="gray"]) .form-control {
border-color: rgba(255, 255, 255, 0.5);
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) .form-control:focus {
border-color: #FFFFFF;
background-color: transparent;
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) .has-success:after,
[data-background-color]:not([data-background-color="gray"]) .has-danger:after {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) .has-danger .form-control {
background-color: transparent;
}
[data-background-color]:not([data-background-color="gray"]) .input-group-text {
background-color: transparent;
border-color: rgba(255, 255, 255, 0.5);
color: #FFFFFF;
}
.section-basic {
padding-top: 0;
}
.form-group.no-border.input-group-focus.no-border .input-group-text,
.input-group.no-border.input-group-focus.no-border .input-group-text {
background-color: rgba(222, 222, 222, 0.5);
}
.input-group-focus .input-group-text {
background-color: #FFFFFF;
border-color: #f96332;
}
.input-group.input-group-focus .input-group-prepend .input-group-text,
.form-group.input-group-focus .input-group-prepend .input-group-text {
border-left: 1px solid #f96332;
}
.input-group.input-group-focus .input-group-append .input-group-text,
.form-group.input-group-focus .input-group-append .input-group-text {
border-right: 1px solid #f96332;
}
.input-group.input-group-focus.no-border .input-group-prepend .input-group-text,
.form-group.input-group-focus.no-border .input-group-prepend .input-group-text {
border-left: transparent;
}
[data-background-color]:not([data-background-color="gray"]) .input-group-focus .input-group-text {
background-color: transparent;
border-color: #FFFFFF;
color: #FFFFFF;
}
footer{
margin-top:50px;
color: #555;
background: #fff;
padding: 25px;
font-weight: 300;
background: #f7f7f7;
}
.footer p{
margin-bottom: 0;
}
footer p a{
color: #555;
font-weight: 400;
}
footer p a:hover{
color: #e86c42;
}
$('.form-control').on("focus", function() {
$(this).parent('.input-group').addClass("input-group-focus");
}).on("blur", function() {
$(this).parent(".input-group").removeClass("input-group-focus");
});
