Card + Products
This commit is contained in:
Kevin Adametz
parent
5ff57a21a7
commit
c129a44383
38 changed files with 4489 additions and 1789 deletions
311
public/css/custom-forms-v2.css
Executable file
311
public/css/custom-forms-v2.css
Executable file
|
|
@ -0,0 +1,311 @@
|
|||
/** CUSTOM FORM ELEMENTS [OPTIONAL]
|
||||
|
||||
This CSS file must be included after all other CSS's.
|
||||
Nothing special - will only rewrite the form elements (input, textarea, select2, buttons)
|
||||
to look more clean, professional.
|
||||
**************************************************************** **/
|
||||
|
||||
|
||||
/** CUSTOM : FORM ELEMENTS
|
||||
*************************** **/
|
||||
.btn:not(.btn-xs):not(.btn-sm):not(.btn-md):not(.btn-lg):not(.btn-xlg):not(.btn-reveal):not(.btn-3d):not(.btn-social):not(.btn-v1) {
|
||||
height:auto;
|
||||
padding: 14px 20px;
|
||||
}
|
||||
#footer .btn {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
#footer.footer-light input {
|
||||
color: #121212 !important;
|
||||
}
|
||||
|
||||
|
||||
input.form-control,
|
||||
select.form-control,
|
||||
textarea.form-control {
|
||||
height: auto;
|
||||
color: #121212;
|
||||
background-color: #fff;
|
||||
border-color: #dee5ed;
|
||||
width: 100%;
|
||||
|
||||
border-width:1px;
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
padding: 14px 20px;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 15px;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
|
||||
-webkit-transition: all .300s;
|
||||
-moz-transition: all .300s;
|
||||
-o-transition: all .300s;
|
||||
transition: all .300s;
|
||||
}
|
||||
form .row input.form-control,
|
||||
form .row select.form-control,
|
||||
form .row textarea.form-control {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) { /* mobile fix */
|
||||
input.form-control,
|
||||
select.form-control,
|
||||
textarea.form-control {
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
/* label spacing fix */
|
||||
form label {
|
||||
margin-top:15px;
|
||||
}
|
||||
#topBar form label,
|
||||
#header form label,
|
||||
#footer form label,
|
||||
form div.form-group label {
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input.form-control:hover,
|
||||
select.form-control:hover,
|
||||
textarea.form-control:hover {
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
|
||||
section.dark input.form-control:hover,
|
||||
section.dark select.form-control:hover,
|
||||
section.dark textarea.form-control:hover {
|
||||
background-color: #1c2125 !important;
|
||||
}
|
||||
|
||||
section.dark .select2-container .select2-selection--single .select2-selection__rendered,
|
||||
section.dark input.form-control,
|
||||
section.dark select.form-control,
|
||||
section.dark textarea.form-control {
|
||||
color: #ffffff;
|
||||
background-color: #272e33 ;
|
||||
border-color: #272e33;
|
||||
}
|
||||
|
||||
section.dark input::placeholder,
|
||||
section.dark select::placeholder,
|
||||
section.dark textarea::placeholder {
|
||||
color: #a3a9b0 !important;
|
||||
}
|
||||
|
||||
/* textarea */
|
||||
textarea.form-control {
|
||||
min-height:100px;
|
||||
}
|
||||
|
||||
/* normal select */
|
||||
select.form-control:not([size]):not([multiple]) {
|
||||
height: 50px;
|
||||
-webkit-appearance:none;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAMAAADNLv/0AAAANlBMVEUAAAD///+ZmZmfoqiaoKydo6ueo6ucpKqdo6qdoqqeoqqdo6qdoqqdo6qco6mdo6qcoqmdo6rJSltEAAAAEHRSTlMAAQVSU5Wmrbe+1NXf5f7+fUgvXAAAAC5JREFUeNodxkkCABAMBMEhiDX4/2fJ9KULLYHlhW5C3YIwvikgThOK3kcddPU9JQ4BFWtk/ScAAAAASUVORK5CYII=) no-repeat;
|
||||
background-position: center right 20px;
|
||||
background-color: #fff;
|
||||
color:#a3a9b0;
|
||||
}
|
||||
section.dark select.form-control:not([size]):not([multiple]) {
|
||||
background: #272e33 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAMAAADNLv/0AAAANlBMVEUAAAD///+ZmZmfoqiaoKydo6ueo6ucpKqdo6qdoqqeoqqdo6qdoqqdo6qco6mdo6qcoqmdo6rJSltEAAAAEHRSTlMAAQVSU5Wmrbe+1NXf5f7+fUgvXAAAAC5JREFUeNodxkkCABAMBMEhiDX4/2fJ9KULLYHlhW5C3YIwvikgThOK3kcddPU9JQ4BFWtk/ScAAAAASUVORK5CYII=) 15px center no-repeat;
|
||||
background-position: center right 20px;
|
||||
color:# c9c9c9;
|
||||
}
|
||||
|
||||
|
||||
/* SELECT2 CUSTOM */
|
||||
.select2 {
|
||||
position: relative;
|
||||
}
|
||||
.select2-container--default .select2-selection--single {
|
||||
border: none;
|
||||
background-color: #fff;
|
||||
}
|
||||
.select2-container {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
font-size: 16px;
|
||||
height: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
form .row .select2-container {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@media (min-width: 64em) {
|
||||
.select2-container.select2-container--open {
|
||||
max-width: 393px !important;
|
||||
}
|
||||
}
|
||||
.select2-container .select2-selection--single {
|
||||
height: auto;
|
||||
margin: 0;
|
||||
outline: none;
|
||||
}
|
||||
.select2-container .select2-selection--single .select2-selection__rendered {
|
||||
font-size: 16px;
|
||||
max-width: 100%;
|
||||
padding: 16px 20px;
|
||||
border-radius: 3px;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: #dee5ed;
|
||||
resize: none;
|
||||
line-height: 1;
|
||||
outline: none;
|
||||
color: #a3a9b0;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
height: 50px;
|
||||
}
|
||||
.select2-container .select2-selection--single .select2-selection__rendered:after {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAMAAADNLv/0AAAANlBMVEUAAAD///+ZmZmfoqiaoKydo6ueo6ucpKqdo6qdoqqeoqqdo6qdoqqdo6qco6mdo6qcoqmdo6rJSltEAAAAEHRSTlMAAQVSU5Wmrbe+1NXf5f7+fUgvXAAAAC5JREFUeNodxkkCABAMBMEhiDX4/2fJ9KULLYHlhW5C3YIwvikgThOK3kcddPU9JQ4BFWtk/ScAAAAASUVORK5CYII=) 0 center no-repeat;
|
||||
width: 20px;
|
||||
}
|
||||
.select2-container .select2-results .select2-results__options {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
.select2-container .select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted[aria-selected] {
|
||||
background-color: #ccc;
|
||||
}
|
||||
section.dark .select2-container .select2-selection--single .select2-selection__rendered {
|
||||
background-color: #272e33;
|
||||
border-color: #272e33;
|
||||
color: #a3a9b0;
|
||||
}
|
||||
section.dark .select2-container .select2-selection--single .select2-selection__rendered,
|
||||
.select2-container .select2-selection--single .select2-selection__rendered {
|
||||
-webkit-transition: all .300s;
|
||||
-moz-transition: all .300s;
|
||||
-o-transition: all .300s;
|
||||
transition: all .300s;
|
||||
}
|
||||
.select2-container .select2-selection--single .select2-selection__rendered:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
section.dark .select2-container .select2-selection--single .select2-selection__rendered:hover {
|
||||
background-color: #1c2125;
|
||||
}
|
||||
section.dark .select2-container .select2-selection--single .select2-selection__rendered:focus {
|
||||
border-color: #c1d120;
|
||||
}
|
||||
section.dark .select2-container .select2-results .select2-results__options {
|
||||
border-color: #a3a9b0;
|
||||
}
|
||||
section.dark .select2-container .select2-results .select2-results__options .select2-results__option {
|
||||
background-color: #272e33;
|
||||
color: #a3a9b0;
|
||||
}
|
||||
section.dark .select2-container .select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted[aria-selected] {
|
||||
background-color: #333a3f;
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAMAAADNLv/0AAAANlBMVEUAAAD///+ZmZmfoqiaoKydo6ueo6ucpKqdo6qdoqqeoqqdo6qdoqqdo6qco6mdo6qcoqmdo6rJSltEAAAAEHRSTlMAAQVSU5Wmrbe+1NXf5f7+fUgvXAAAAC5JREFUeNodxkkCABAMBMEhiDX4/2fJ9KULLYHlhW5C3YIwvikgThOK3kcddPU9JQ4BFWtk/ScAAAAASUVORK5CYII=) 0 center no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
right: 12px;
|
||||
top: 50%;
|
||||
margin-top: -9px;
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow b {
|
||||
display: none;
|
||||
}
|
||||
.select2-results__option {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.select2-container.select2-container--open {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
section.dark .select2-dropdown {
|
||||
border: 0;
|
||||
}
|
||||
.select2-dropdown {
|
||||
border-color: #dee5ed;
|
||||
border-width:1px;
|
||||
}
|
||||
.select2-container--focus {
|
||||
outline: 1px solid transparent;
|
||||
z-index: 102;
|
||||
}
|
||||
/* search field */
|
||||
.select2-container--default .select2-search--dropdown .select2-search__field {
|
||||
padding: 6px !important;
|
||||
border-radius: 0;
|
||||
-webkit-border-radius: 0;
|
||||
}
|
||||
/* optgroup */
|
||||
.select2-container--default .select2-results__group {
|
||||
font-size:14px;
|
||||
border-top: #eaeaea 1px solid;
|
||||
padding-left: 17px;
|
||||
padding-right: 17px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* FANCY FORM */
|
||||
.fancy-file-upload {
|
||||
height: auto;
|
||||
}
|
||||
.fancy-file-upload>span.button {
|
||||
height: 41px;
|
||||
line-height: 41px;
|
||||
}
|
||||
.fancy-file-upload>i {
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* MISC */
|
||||
@media only screen and (max-width: 768px) {
|
||||
form .row {
|
||||
margin-bottom:0 !important;
|
||||
}
|
||||
form .row>div {
|
||||
margin-bottom:15px !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
form .row>div>.row>div:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/** RTL
|
||||
Add .rtl class to body
|
||||
*************************** **/
|
||||
/* forms */
|
||||
body.rtl .select2-container .select2-results .select2-results__options,
|
||||
body.rtl .select2-container .select2-selection--single .select2-selection__rendered {
|
||||
text-align: right !important;
|
||||
}
|
||||
body.rtl .select2-container--default .select2-selection--single .select2-selection__arrow {
|
||||
left:15px;
|
||||
}
|
||||
body.rtl .select2-results__option,
|
||||
body.rtl .select2-container .select2-selection--single .select2-selection__rendered {
|
||||
padding-left:20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
body.rtl input, body.rtl select, body.rtl textarea {
|
||||
text-align:right !important;
|
||||
}
|
||||
|
||||
/* normal select */
|
||||
body.rtl select.form-control:not([size]):not([multiple]) {
|
||||
background-position: center left 15px;
|
||||
}
|
||||
body.rtl section.dark select.form-control:not([size]):not([multiple]) {
|
||||
background-position: center left 15px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue