Commit f1fdbbaf authored by Vytor Calixto's avatar Vytor Calixto 👾
Browse files

Alertas e inputs em sass

parent a832b41b
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Merriweather);
.card {
.card, .alert, .notice, .success, .error {
box-sizing: border-box; }
.clearfix:after, .list .list-item:after, .header:after, .clearfix:before, .list .list-item:before, .header:before {
.clearfix:after, .list .list-item:after, .alert:after, .notice:after, .success:after, .error:after, .header:after, .clearfix:before, .list .list-item:before, .alert:before, .notice:before, .success:before, .error:before, .header:before {
display: block;
clear: both;
content: ''; }
.normal {
.normal, .success {
background-color: #39628d; }
.dark, header {
......@@ -17,13 +17,13 @@
.darker {
background-color: #1a1a1a; }
.light, .button:active, .icon-button:active {
.light, .button:active, .icon-button:active, .notice {
background-color: #bfdede; }
.lighter, body {
background-color: #F5F5F5; }
.red, footer {
.red, .error, footer {
background-color: #EE3437; }
.error {
......@@ -167,6 +167,18 @@
.button-circle {
border-radius: 50%; }
.button-clean, .alert .alert-close button, .notice .alert-close button, .success .alert-close button, .error .alert-close button {
border: none;
margin: 0;
padding: 0;
background-color: inherit;
color: inherit; }
.button-clean:focus, .alert .alert-close button:focus, .notice .alert-close button:focus, .success .alert-close button:focus, .error .alert-close button:focus {
outline: 0;
background-color: inherit; }
.button-clean:hover, .alert .alert-close button:hover, .notice .alert-close button:hover, .success .alert-close button:hover, .error .alert-close button:hover {
background-color: inherit; }
.list .list-title {
padding: 20px;
text-align: center; }
......@@ -204,6 +216,177 @@ ul.list {
width: 100%;
height: 4em; }
input, .input, textarea {
vertical-align: middle;
margin: 3px 0 3px 0; }
input:focus, .input:focus, textarea:focus {
outline: 0; }
input:disabled, .input:disabled, textarea:disabled {
background-color: #808080;
border-color: #1a1a1a; }
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
.input, textarea {
border: 1px solid #808080;
padding: 10px; }
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
.input:focus, textarea:focus {
border-color: #39628d; }
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
.input:disabled, textarea:disabled {
border-color: #4d4d4d; }
input[type="checkbox"] {
visibility: hidden;
cursor: pointer;
margin-right: 8px; }
input[type="checkbox"]:before {
content: "";
display: inline-block;
margin-right: 15px;
width: 12px;
height: 12px;
visibility: visible;
border: 2px solid #676767;
border-radius: 2px;
line-height: 12px;
font-size: 14px;
text-align: center;
font-weight: bold; }
input[type="checkbox"]:checked:before {
color: #39628d;
font-family: FontAwesome;
content: "\f00c";
border-color: #39628d; }
input[type="checkbox"]:hover:not(:checked):before {
color: #676767;
font-family: FontAwesome;
content: "\f00c"; }
input[type="radio"] {
visibility: hidden;
cursor: pointer;
margin-right: 8px; }
input[type="radio"]:before {
font-family: FontAwesome;
color: #808080;
content: "";
display: inline-block;
margin-right: 15px;
width: 11px;
height: 11px;
border: 2px solid #676767;
border-radius: 50%;
visibility: visible;
line-height: 12px;
font-size: 14px;
text-align: center; }
input[type="radio"]:checked:before {
padding-left: -2px;
color: #39628d;
background-color: #39628d; }
input[type="radio"]:hover:not(:checked):before {
background-color: #676767; }
fieldset {
border: 1px solid #4d4d4d;
border-radius: 2px; }
.input-group {
margin: 0;
border: none;
padding: 0; }
.input-group input, .input-group textarea {
display: block;
margin: 0 0 -1px;
border-radius: 0;
position: relative;
top: -1px; }
.input-group input:focus, .input-group textarea:focus {
z-index: 3; }
.input-group input:first-child, .input-group textarea:first-child {
top: 1px;
border-radius: 2px 2px 0 0;
margin: 0; }
.input-group input:first-child:last-child, .input-group textarea:first-child:last-child {
top: 1px;
border-radius: 2px;
margin: 0; }
.input-group input:last-child, .input-group textarea:last-child {
top: -2px;
border-radius: 0 0 2px 2px;
margin: 0; }
.alert, .notice, .success, .error {
border: 1px solid;
border-radius: 3px;
margin: 10px 0 10px 0;
padding: 10px;
color: white; }
.alert .alert-close, .notice .alert-close, .success .alert-close, .error .alert-close {
padding: 0 5px 0 5px;
float: right; }
.alert .alert-close:hover, .notice .alert-close:hover, .success .alert-close:hover, .error .alert-close:hover {
cursor: pointer; }
.alert .info:before, .notice .info:before, .success .info:before, .error .info:before {
font-weight: bold; }
.notice {
border-color: #9dcdcd; }
.notice .alert-close:hover {
color: #9dcdcd; }
.notice .info:before {
content: "Info: "; }
.success {
border-color: #2a4969; }
.success .alert-close:hover {
color: #2a4969; }
.success .info:before {
content: "Sucesso: "; }
.error {
border-color: #dd1216; }
.error .alert-close:hover {
color: #dd1216; }
.error .info:before {
content: "Erro: "; }
input.warn {
border-color: #EE3437;
color: #1E2251; }
input.warn::-webkit-input-placeholder {
/* WebKit browsers */
color: #EE3437; }
input.warn:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #EE3437;
opacity: 1; }
input.warn::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #EE3437;
opacity: 1; }
input.warn:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #EE3437; }
input.warn:focus {
border-color: #EE3437; }
html {
min-height: 100%;
position: relative; }
......
.card,.search-bar{box-sizing:border-box}.clickable,a:hover{cursor:pointer}@font-face{font-family:Montserrat;font-style:normal;font-weight:400;src:local('Montserrat-Regular'),url(https://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYC3USBnSvpkopQaUR-2r7iU.ttf) format('truetype')}@font-face{font-family:Merriweather;font-style:normal;font-weight:400;src:local('Merriweather'),url(https://fonts.gstatic.com/s/merriweather/v8/RFda8w1V0eDZheqfcyQ4EInF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')}.clearfix:after,.clearfix:before,.header:after,.header:before,.list .list-item:after,.list .list-item:before{display:block;clear:both;content:''}.normal{background-color:#39628d}.dark,header{background-color:#1E2251}.darker{background-color:#1a1a1a}.button:active,.icon-button:active,.light{background-color:#bfdede}.lighter,body{background-color:#F5F5F5}.red,footer{background-color:#EE3437}.error{background-color:#EE3437!important}.inactive{background-color:grey}.float-right{float:right}.float-left{float:left}.margin{margin:20px}.no-margin{margin:0}.margin-vertical{margin-top:20px;margin-bottom:20px}.margin-horizontal{margin-left:20px;margin-right:20px}.padding{padding:20px}.no-padding{padding:0}.padding-vertical{padding-top:20px;padding-bottom:20px}.padding-horizontal{padding-left:20px;padding-right:20px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.center-vertical{margin:auto 0}.center-block{display:table;margin:auto}.full{width:100%}.half{width:48%}.one-third{width:33%}.two-thirds{width:66%}.one-quarter{width:25%}.three-quarters{width:75%}.inline-block{display:inline-block}.flex{display:flex}.no-wrap{flex-wrap:nowrap}.space-around{justify-content:space-around}.stretch{align-items:stretch}.button,.icon-button{color:#fff!important;border:none;border-radius:2px;font-size:110%;padding:5px;margin-top:10px;margin-bottom:10px;-webkit-transition:background-color .2s ease;-moz-transition:background-color .2s ease;-ms-transition:background-color .2s ease;-o-transition:background-color .2s ease;transition:background-color .2s ease}footer,header,header a,header a:hover{color:#fff}.button:hover,.icon-button:hover{cursor:pointer;text-decoration:none}.button:active,.icon-button:active{-webkit-transition:background-color .2s ease-out;-moz-transition:background-color .2s ease-out;-ms-transition:background-color .2s ease-out;-o-transition:background-color .2s ease-out;transition:background-color .2s ease-out}.button:focus,.icon-button:focus{outline:0}.float-button{position:relative;top:-1.3em}.icon-button{border-radius:0;font-family:FontAwesome;font-size:1.5em;position:relative;top:1.5px;left:-6px;color:#fff;padding:6px;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}body,footer a:hover{color:#1a1a1a}.button-circle{border-radius:50%}.list .list-title{padding:20px;text-align:center}.list .list-item{margin:0;padding:20px;border-top:1px solid #ccc}ul.list{list-style-type:none;padding:0;margin:0}.card{padding:20px;box-shadow:0 1px 2px #aaa;background:#fff;margin-bottom:20px}.card>.card{box-shadow:0 2px 5px #aaa}.card-list{padding:0}.page-wrap{margin-bottom:4em}.page-wrap:after{content:"";display:block}.header form,.header h2,.header nav,.uploadInfo{display:inline-block}.sticky{position:absolute;bottom:0;width:100%;height:4em}.header nav,html{position:relative}html{min-height:100%}body{font-family:Merriweather,serif;padding-bottom:4em;text-align:center;margin:0}a{color:#39628d;text-decoration:none}a:hover{text-decoration:underline;color:#1E2251}form{margin:0 auto}header,nav{font-family:Montserrat,sans-serif}header{box-shadow:1px 1px 3px rgba(0,0,0,.6);padding:5px 0}header h3{font-weight:100}footer{padding:20px 0}footer a{color:inherit}.index{background-image:url(../imgs/Farol.png);background-position:center center;background-size:contain;background-repeat:no-repeat;margin-top:20px;padding-top:20%}.index h1{margin:0;font-family:Montserrat,sans-serif;font-size:5em;text-transform:uppercase;color:#1E2251;text-shadow:-1px -1px 0 #F5F5F5,1px -1px 0 #F5F5F5,-1px 1px 0 #F5F5F5,1px 1px 0 #F5F5F5}.search-bar{background-color:rgba(255,255,255,.9);box-shadow:inset 0 1px 3px #ddd;font-size:1.3em;padding:5px;border:1px solid #bfdede}.search-bar:focus{border:1px solid #39628d;outline:0}.search-bar::-webkit-search-cancel-button{-webkit-appearance:none}.search-bar::-webkit-search-cancel-button:after{font-family:FontAwesome;content:'\f00d';color:#EE3437}.uploadInfo{box-shadow:2px 2px 15px rgba(0,0,0,.4);background-color:#fff;width:200px;margin:5px 15px}.uploadThumb{max-width:100%}.thumb{height:75px;border:1px solid #bfdede;margin:10px 5px 0 0}.header{text-align:left;padding:0}.header nav{height:100%;bottom:0}.header form .search-bar{width:25pc}.header h2{padding:20px 20px 0}.header h2 a{color:#fff;text-decoration:none}.header h2 a:hover{text-decoration:underline}.warning{border:1px solid #EE3437}.hover-shadow{box-shadow:0 0 0 rgba(0,0,0,.6);-webkit-transition:box-shadow .2s ease-in-out;-moz-transition:box-shadow .2s ease-in-out;-ms-transition:box-shadow .2s ease-in-out;-o-transition:box-shadow .2s ease-in-out;transition:box-shadow .2s ease-in-out}.hover-shadow:hover{box-shadow:2px 2px 5px rgba(0,0,0,.6);-webkit-transition:box-shadow .2s ease-in-out;-moz-transition:box-shadow .2s ease-in-out;-ms-transition:box-shadow .2s ease-in-out;-o-transition:box-shadow .2s ease-in-out;transition:box-shadow .2s ease-in-out}
\ No newline at end of file
.button:hover,.icon-button:hover,a{text-decoration:none}.alert,.card,.error,.notice,.search-bar,.success{box-sizing:border-box}.button:focus,.icon-button:focus,.input:focus,.search-bar:focus,input:focus,textarea:focus{outline:0}.alert .alert-close:hover,.button:hover,.clickable,.error .alert-close:hover,.icon-button:hover,.notice .alert-close:hover,.success .alert-close:hover,a:hover{cursor:pointer}@font-face{font-family:Montserrat;font-style:normal;font-weight:400;src:local('Montserrat-Regular'),url(https://fonts.gstatic.com/s/montserrat/v6/zhcz-_WihjSQC0oHJ9TCYC3USBnSvpkopQaUR-2r7iU.ttf) format('truetype')}@font-face{font-family:Merriweather;font-style:normal;font-weight:400;src:local('Merriweather'),url(https://fonts.gstatic.com/s/merriweather/v8/RFda8w1V0eDZheqfcyQ4EInF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')}.alert:after,.alert:before,.clearfix:after,.clearfix:before,.error:after,.error:before,.header:after,.header:before,.list .list-item:after,.list .list-item:before,.notice:after,.notice:before,.success:after,.success:before{display:block;clear:both;content:''}.normal,.success{background-color:#39628d}.dark,header{background-color:#1E2251}.darker{background-color:#1a1a1a}.button:active,.icon-button:active,.light,.notice{background-color:#bfdede}.lighter,body{background-color:#F5F5F5}.error,.red,footer{background-color:#EE3437}.inactive{background-color:grey}.float-right{float:right}.float-left{float:left}.margin{margin:20px}.no-margin{margin:0}.margin-vertical{margin-top:20px;margin-bottom:20px}.margin-horizontal{margin-left:20px;margin-right:20px}.padding{padding:20px}.no-padding{padding:0}.padding-vertical{padding-top:20px;padding-bottom:20px}.padding-horizontal{padding-left:20px;padding-right:20px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.center-vertical{margin:auto 0}.center-block{display:table;margin:auto}.full{width:100%}.half{width:48%}.one-third{width:33%}.two-thirds{width:66%}.one-quarter{width:25%}.three-quarters{width:75%}.inline-block{display:inline-block}.flex{display:flex}.no-wrap{flex-wrap:nowrap}.space-around{justify-content:space-around}.stretch{align-items:stretch}.button,.icon-button{color:#fff!important;border:none;border-radius:2px;font-size:110%;padding:5px;margin-top:10px;margin-bottom:10px;-webkit-transition:background-color .2s ease;-moz-transition:background-color .2s ease;-ms-transition:background-color .2s ease;-o-transition:background-color .2s ease;transition:background-color .2s ease}.button:active,.icon-button:active{-webkit-transition:background-color .2s ease-out;-moz-transition:background-color .2s ease-out;-ms-transition:background-color .2s ease-out;-o-transition:background-color .2s ease-out;transition:background-color .2s ease-out}.float-button{position:relative;top:-1.3em}.icon-button{border-radius:0;font-family:FontAwesome;font-size:1.5em;position:relative;top:1.5px;left:-6px;color:#fff;padding:6px;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}.button-circle{border-radius:50%}.alert .alert-close button,.button-clean,.error .alert-close button,.notice .alert-close button,.success .alert-close button{border:none;margin:0;padding:0;background-color:inherit;color:inherit}.alert .alert-close button:focus,.button-clean:focus,.error .alert-close button:focus,.notice .alert-close button:focus,.success .alert-close button:focus{outline:0;background-color:inherit}.alert .alert-close button:hover,.button-clean:hover,.error .alert-close button:hover,.notice .alert-close button:hover,.success .alert-close button:hover{background-color:inherit}.list .list-title{padding:20px;text-align:center}.list .list-item{margin:0;padding:20px;border-top:1px solid #ccc}ul.list{list-style-type:none;padding:0;margin:0}.card{padding:20px;box-shadow:0 1px 2px #aaa;background:#fff;margin-bottom:20px}.card>.card{box-shadow:0 2px 5px #aaa}.card-list{padding:0}.page-wrap{margin-bottom:4em}.page-wrap:after{content:"";display:block}.sticky{position:absolute;bottom:0;width:100%;height:4em}.header nav,html{position:relative}.input,input,textarea{vertical-align:middle;margin:3px 0}input[type=checkbox]:before,input[type=radio]:before{content:"";display:inline-block;margin-right:15px;visibility:visible;line-height:9pt;font-size:14px;text-align:center}.input:disabled,input:disabled,textarea:disabled{background-color:grey;border-color:#1a1a1a}.input,input[type=search],input[type=tel],input[type=text],input[type=email],input[type=password],input[type=number],textarea{border:1px solid grey;padding:10px}.input:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=number]:focus,textarea:focus{border-color:#39628d}.input:disabled,input[type=search]:disabled,input[type=tel]:disabled,input[type=text]:disabled,input[type=email]:disabled,input[type=password]:disabled,input[type=number]:disabled,textarea:disabled{border-color:#4d4d4d}input[type=checkbox],input[type=radio]{visibility:hidden;cursor:pointer;margin-right:8px}input[type=checkbox]:before{width:9pt;height:9pt;border:2px solid #676767;border-radius:2px;font-weight:700}input[type=checkbox]:checked:before{color:#39628d;font-family:FontAwesome;content:"\f00c";border-color:#39628d}input[type=checkbox]:hover:not(:checked):before{color:#676767;font-family:FontAwesome;content:"\f00c"}input[type=radio]:before{font-family:FontAwesome;color:grey;width:11px;height:11px;border:2px solid #676767;border-radius:50%}input[type=radio]:checked:before{color:#39628d;background-color:#39628d}input[type=radio]:hover:not(:checked):before{background-color:#676767}fieldset{border:1px solid #4d4d4d;border-radius:2px}.input-group{margin:0;border:none;padding:0}.input-group input,.input-group textarea{display:block;margin:0 0 -1px;border-radius:0;position:relative;top:-1px}.header form,.header h2,.header nav,.uploadInfo{display:inline-block}.input-group input:focus,.input-group textarea:focus{z-index:3}.input-group input:first-child,.input-group textarea:first-child{top:1px;border-radius:2px 2px 0 0;margin:0}.input-group input:first-child:last-child,.input-group textarea:first-child:last-child{top:1px;border-radius:2px;margin:0}.input-group input:last-child,.input-group textarea:last-child{top:-2px;border-radius:0 0 2px 2px;margin:0}.alert,.error,.notice,.success{border:1px solid;border-radius:3px;margin:10px 0;padding:10px;color:#fff}.alert .alert-close,.error .alert-close,.notice .alert-close,.success .alert-close{padding:0 5px;float:right}.alert .info:before,.error .info:before,.notice .info:before,.success .info:before{font-weight:700}.notice{border-color:#9dcdcd}.notice .alert-close:hover{color:#9dcdcd}.notice .info:before{content:"Info: "}.success{border-color:#2a4969}.success .alert-close:hover{color:#2a4969}.success .info:before{content:"Sucesso: "}.error{border-color:#dd1216}input.warn,input.warn:focus{border-color:#EE3437}.error .alert-close:hover{color:#dd1216}.error .info:before{content:"Erro: "}input.warn{color:#1E2251}input.warn::-webkit-input-placeholder{color:#EE3437}input.warn:-moz-placeholder{color:#EE3437;opacity:1}input.warn::-moz-placeholder{color:#EE3437;opacity:1}input.warn:-ms-input-placeholder{color:#EE3437}footer,header,header a,header a:hover{color:#fff}body,footer a:hover{color:#1a1a1a}html{min-height:100%}body{font-family:Merriweather,serif;padding-bottom:4em;text-align:center;margin:0}a{color:#39628d}a:hover{text-decoration:underline;color:#1E2251}form{margin:0 auto}header,nav{font-family:Montserrat,sans-serif}header{box-shadow:1px 1px 3px rgba(0,0,0,.6);padding:5px 0}header h3{font-weight:100}footer{padding:20px 0}footer a{color:inherit}.index{background-image:url(../imgs/Farol.png);background-position:center center;background-size:contain;background-repeat:no-repeat;margin-top:20px;padding-top:20%}.index h1{margin:0;font-family:Montserrat,sans-serif;font-size:5em;text-transform:uppercase;color:#1E2251;text-shadow:-1px -1px 0 #F5F5F5,1px -1px 0 #F5F5F5,-1px 1px 0 #F5F5F5,1px 1px 0 #F5F5F5}.search-bar{background-color:rgba(255,255,255,.9);box-shadow:inset 0 1px 3px #ddd;font-size:1.3em;padding:5px;border:1px solid #bfdede}.search-bar:focus{border:1px solid #39628d}.search-bar::-webkit-search-cancel-button{-webkit-appearance:none}.search-bar::-webkit-search-cancel-button:after{font-family:FontAwesome;content:'\f00d';color:#EE3437}.uploadInfo{box-shadow:2px 2px 15px rgba(0,0,0,.4);background-color:#fff;width:200px;margin:5px 15px}.uploadThumb{max-width:100%}.thumb{height:75px;border:1px solid #bfdede;margin:10px 5px 0 0}.header{text-align:left;padding:0}.header nav{height:100%;bottom:0}.header form .search-bar{width:25pc}.header h2{padding:20px 20px 0}.header h2 a{color:#fff;text-decoration:none}.header h2 a:hover{text-decoration:underline}.warning{border:1px solid #EE3437}.hover-shadow{box-shadow:0 0 0 rgba(0,0,0,.6);-webkit-transition:box-shadow .2s ease-in-out;-moz-transition:box-shadow .2s ease-in-out;-ms-transition:box-shadow .2s ease-in-out;-o-transition:box-shadow .2s ease-in-out;transition:box-shadow .2s ease-in-out}.hover-shadow:hover{box-shadow:2px 2px 5px rgba(0,0,0,.6);-webkit-transition:box-shadow .2s ease-in-out;-moz-transition:box-shadow .2s ease-in-out;-ms-transition:box-shadow .2s ease-in-out;-o-transition:box-shadow .2s ease-in-out;transition:box-shadow .2s ease-in-out}
\ No newline at end of file
.alert{
@extend %clearfix;
@extend %box-size;
border: 1px solid;
border-radius: 3px;
margin: 10px 0 10px 0;
padding: 10px;
color: white;
.alert-close{
padding: 0 5px 0 5px;
float: right;
&:hover{
cursor: pointer;
}
button{
@extend .button-clean;
}
}
.info:before{
font-weight: bold;
}
}
.notice{
@extend .alert;
@extend .light;
border-color: darken($aqua, 10%);
.alert-close:hover{
color: darken($aqua, 10%);
}
.info:before{
content: "Info: ";
}
}
.success{
@extend .alert;
@extend .normal;
border-color: darken($deep-sea, 10%);
.alert-close:hover{
color: darken($deep-sea, 10%);
}
.info:before{
content: "Sucesso: ";
}
}
.error{
@extend .alert;
@extend .red;
border-color: darken($crimson, 10%);
.alert-close:hover{
color: darken($crimson, 10%);
}
.info:before{
content: "Erro: ";
}
}
input.warn{
border-color: $crimson;
color: $nautical;
&::-webkit-input-placeholder { /* WebKit browsers */
color: $crimson;
}
&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: $crimson;
opacity: 1;
}
&::-moz-placeholder { /* Mozilla Firefox 19+ */
color: $crimson;
opacity: 1;
}
&:-ms-input-placeholder { /* Internet Explorer 10+ */
color: $crimson;
}
&:focus{
border-color: $crimson;
}
}
......@@ -21,7 +21,7 @@
}
.float-button{
position: relative;
position: relative;
top: -1.3em;
}
......@@ -46,4 +46,19 @@
.button-circle{
border-radius: 50%;
}
\ No newline at end of file
}
.button-clean{
border: none;
margin: 0;
padding: 0;
background-color: inherit;
color: inherit;
&:focus{
outline: 0;
background-color: inherit;
}
&:hover{
background-color: inherit;
}
}
$input-padding: 10px;
$input-margin: 3px;
$border-radius: 2px;
input, .input{
vertical-align: middle;
margin: $input-margin 0 $input-margin 0;
&:focus{
outline: 0;
}
&:disabled{
background-color: $gray;
border-color: $squid-ink;
}
}
//Class .input no fim, caso eu não tenha coberto algum tipo
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
.input{
border: 1px solid $gray;
padding: $input-padding;
&:focus{
border-color: $deep-sea;
}
&:disabled{
border-color: darken($gray, 20%);
}
}
input[type="checkbox"]{
visibility: hidden;
cursor: pointer;
margin-right: 8px;
&:before{
content: "";
display: inline-block;
margin-right: 15px;
width: 12px;
height: 12px;
visibility: visible;
border: 2px solid darken($gray, 10%);
border-radius: $border-radius;
line-height: 12px;
font-size: 14px;
text-align: center;
font-weight: bold;
}
&:checked:before{
color: $deep-sea;
font-family: FontAwesome;
//FontAwesome
content: "\f00c";
border-color: $deep-sea;
}
&:hover:not(:checked):before{
color: darken($gray, 10%);
font-family: FontAwesome;
//FontAwesome
content: "\f00c";
}
}
input[type="radio"]{
visibility: hidden;
cursor: pointer;
margin-right: 8px;
&:before{
font-family: FontAwesome;
color: $gray;
content: "";
display: inline-block;
margin-right: 15px;
width: 11px;
height: 11px;
border: 2px solid darken($gray, 10%);
border-radius:50%;
visibility: visible;
line-height: 12px;
font-size: 14px;
text-align: center;
}
&:checked:before{
padding-left: -2px;
color: $deep-sea;
background-color: $deep-sea;
}
&:hover:not(:checked):before{
background-color: darken($gray, 10%);
}
}
textarea{
@extend .input;
}
fieldset{
border: 1px solid darken($gray, 20%);
border-radius: $border-radius;
}
.input-group{
margin: 0;
border: none;
padding: 0;
input, textarea{
display: block;
margin: 0 0 -1px;
border-radius: 0;
position: relative;
top: -1px;
&:focus{
z-index: 3;
}
&:first-child{
top: 1px;
border-radius: $border-radius $border-radius 0 0;
margin: 0;
&:last-child{
top: 1px;
border-radius: $border-radius;
margin: 0;
}
}
&:last-child{
top: -2px;
border-radius: 0 0 $border-radius $border-radius;
margin: 0;
}
}
}
......@@ -11,6 +11,8 @@ $font-size: 1.3em;
@import "lists";
@import "cards";
@import "footer";
@import "inputs";
@import "alerts";
html{
min-height: 100%;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment