Skip to content

Instantly share code, notes, and snippets.

@harveyphan

harveyphan/input.scss

Created November 19, 2020 11:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save harveyphan/79e16748c5dccc67e6448912b9207afe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save harveyphan/79e16748c5dccc67e6448912b9207afe to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
input.scss
@font-face {
font-family: "GT-Walsheim-Pro";
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Regular/GT-Walsheim-Pro-Regular.eot");
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Regular/GT-Walsheim-Pro-Regular.woff")
format("woff"),
url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Regular/GT-Walsheim-Pro-Regular.ttf")
format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT-Walsheim-Pro";
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Medium/GT-Walsheim-Pro-Medium.eot");
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Medium/GT-Walsheim-Pro-Medium.woff")
format("woff"),
url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Medium/GT-Walsheim-Pro-Medium.ttf")
format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT-Walsheim-Pro";
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Regular/GT-Walsheim-Pro-Regular.eot");
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Regular/GT-Walsheim-Pro-Regular.woff")
format("woff"),
url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Regular/GT-Walsheim-Pro-Regular.ttf")
format("truetype");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT-Walsheim-Pro";
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Light/GT-Walsheim-Pro-Light.eot");
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Light/GT-Walsheim-Pro-Light.woff")
format("woff"),
url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Light/GT-Walsheim-Pro-Light.ttf")
format("truetype");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT-Walsheim-Pro-Bold";
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Bold/GT-Walsheim-Pro-Bold.eot");
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Bold/GT-Walsheim-Pro-Bold.woff")
format("woff"),
url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Bold/GT-Walsheim-Pro-Bold.ttf")
format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT-Walsheim-Pro-Bold-Oblique";
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Bold-Oblique/GT-Walsheim-Pro-Bold-Oblique.eot");
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Bold-Oblique/GT-Walsheim-Pro-Bold-Oblique.woff")
format("woff"),
url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Bold-Oblique/GT-Walsheim-Pro-Bold-Oblique.ttf")
format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "GT-IconSet";
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-IconSet/GT-IconSet.eot");
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-IconSet/GT-IconSet.ttf")
format("truetype"),
url("https://gt-se.github.io/ResourcesVI/fonts/GT-IconSet/GT-IconSet.woff")
format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
#up-form {
padding: 0px !important;
h2,
p,
label,
.form-control {
font-family: "GT-Walsheim-Pro", Arial, Helvetica, sans-serif !important;
}
p,
label,
.form-control {
font-size: 1.8rem !important;
}
h2 {
font-size: 2.4rem;
line-height: 150%;
font-weight: 300;
font-style: normal;
}
label {
display: inline-block !important;
min-width: 15% !important;
vertical-align: top !important;
.text-danger {
color: black;
}
}
.form-control::placeholder,
.form-control:-ms-input-placeholder,
.form-control::-webkit-input-placeholder {
font-family: "GT-Walsheim-Pro", Arial, Helvetica, sans-serif !important;
font-size: 1.8rem !important;
}
.form-control {
width: 100%;
min-height: 5rem;
line-height: 1.5;
display: block;
border: 0.2rem solid #4f2d7f;
border-radius: 0;
background-color: #fff;
padding: 1rem 2rem;
color: #4f2d7f;
margin-bottom: 8px;
}
.form-control:focus {
box-shadow: none;
outline-offset: 0px;
outline: -webkit-focus-ring-color auto 1px;
}
input[name="Client.phone"] {
padding-left: 52px;
}
.submit-button button {
width: 120px;
height: 50px;
font-weight: 400;
color: #de002e;
background: transparent;
border: 2px solid #de002e !important;
padding: 1rem 3rem;
display: inline-block;
text-align: center;
margin: 2rem 0;
text-decoration: none;
position: relative;
overflow: hidden;
box-sizing: border-box;
z-index: 1;
cursor: pointer;
border-radius: 0px;
}
.submit-button button:after {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
right: 0;
height: 100%;
width: 0;
overflow: hidden;
background: #de002e;
box-sizing: border-box;
transition: width 0.2s 0s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
.submit-button button:hover {
color: white;
text-decoration: none;
}
.submit-button button:focus:after,
.submit-button button:hover:after {
width: 100%;
}
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
background-color: transparent;
display: inline-block;
position: relative;
width: 2rem;
height: 2rem;
}
input[type="checkbox"]:before {
content: "";
position: absolute;
left: 0px;
top: 3px;
width: 2rem;
height: 2rem;
border: 0.1rem solid #4f2d7f;
}
input[type="checkbox"]:focus:before {
border: 2px solid #4f2d7f;
}
input[type="checkbox"]:checked:after {
content: "" !important;
width: 1.4rem;
height: 0.75rem;
position: absolute;
left: 3px;
top: 0;
margin-top: 0.4rem;
border: 0.2rem solid #4f2d7f;
border-top: none;
border-right: none;
background: transparent;
transform: rotate(-55deg) skewX(-15deg);
}
input[type="checkbox"]:focus {
outline: none;
}
input[name*="singleOptIn"] {
margin-top: -1px !important;
}
.opt-in-label {
margin-left: 12px;
}
select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADIWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjMyNzlGNzQzRThFQjExRUE4NkRERjE3REExRkJCRkNDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjMyNzlGNzQ0RThFQjExRUE4NkRERjE3REExRkJCRkNDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzI3OUY3NDFFOEVCMTFFQTg2RERGMTdEQTFGQkJGQ0MiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzI3OUY3NDJFOEVCMTFFQTg2RERGMTdEQTFGQkJGQ0MiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz43c10IAAAAZElEQVQYV2P0163fzsDA4AHE2MB2JiBRCMR/wFxUABIrAim4AcTTQCJoACR2A6QABJqA+C2ECQYgdiOIAVMAEgApggGQ5DsQA6YABMBGAvF1IJ4OEgABZAUgR4EcXARlAwEDAwDgRBPocu+b3QAAAABJRU5ErkJggg==")
no-repeat right 20px top 50% #fff;
}
}
Raw
output.css
@font-face {
font-family: "GT-Walsheim-Pro";
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Regular/GT-Walsheim-Pro-Regular.eot");
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Regular/GT-Walsheim-Pro-Regular.woff") format("woff"), url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Regular/GT-Walsheim-Pro-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT-Walsheim-Pro";
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Medium/GT-Walsheim-Pro-Medium.eot");
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Medium/GT-Walsheim-Pro-Medium.woff") format("woff"), url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Medium/GT-Walsheim-Pro-Medium.ttf") format("truetype");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT-Walsheim-Pro";
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Regular/GT-Walsheim-Pro-Regular.eot");
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Regular/GT-Walsheim-Pro-Regular.woff") format("woff"), url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Regular/GT-Walsheim-Pro-Regular.ttf") format("truetype");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT-Walsheim-Pro";
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Light/GT-Walsheim-Pro-Light.eot");
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Light/GT-Walsheim-Pro-Light.woff") format("woff"), url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Light/GT-Walsheim-Pro-Light.ttf") format("truetype");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT-Walsheim-Pro-Bold";
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Bold/GT-Walsheim-Pro-Bold.eot");
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Bold/GT-Walsheim-Pro-Bold.woff") format("woff"), url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Bold/GT-Walsheim-Pro-Bold.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "GT-Walsheim-Pro-Bold-Oblique";
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Bold-Oblique/GT-Walsheim-Pro-Bold-Oblique.eot");
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Bold-Oblique/GT-Walsheim-Pro-Bold-Oblique.woff") format("woff"), url("https://gt-se.github.io/ResourcesVI/fonts/GT-Walsheim-Pro-Bold-Oblique/GT-Walsheim-Pro-Bold-Oblique.ttf") format("truetype");
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "GT-IconSet";
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-IconSet/GT-IconSet.eot");
src: url("https://gt-se.github.io/ResourcesVI/fonts/GT-IconSet/GT-IconSet.ttf") format("truetype"), url("https://gt-se.github.io/ResourcesVI/fonts/GT-IconSet/GT-IconSet.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
#up-form {
padding: 0px !important;
}
#up-form h2,
#up-form p,
#up-form label,
#up-form .form-control {
font-family: "GT-Walsheim-Pro", Arial, Helvetica, sans-serif !important;
}
#up-form p,
#up-form label,
#up-form .form-control {
font-size: 1.8rem !important;
}
#up-form h2 {
font-size: 2.4rem;
line-height: 150%;
font-weight: 300;
font-style: normal;
}
#up-form label {
display: inline-block !important;
min-width: 15% !important;
vertical-align: top !important;
}
#up-form label .text-danger {
color: black;
}
#up-form .form-control::placeholder,
#up-form .form-control:-ms-input-placeholder,
#up-form .form-control::-webkit-input-placeholder {
font-family: "GT-Walsheim-Pro", Arial, Helvetica, sans-serif !important;
font-size: 1.8rem !important;
}
#up-form .form-control {
width: 100%;
min-height: 5rem;
line-height: 1.5;
display: block;
border: 0.2rem solid #4f2d7f;
border-radius: 0;
background-color: #fff;
padding: 1rem 2rem;
color: #4f2d7f;
margin-bottom: 8px;
}
#up-form .form-control:focus {
box-shadow: none;
outline-offset: 0px;
outline: -webkit-focus-ring-color auto 1px;
}
#up-form input[name="Client.phone"] {
padding-left: 52px;
}
#up-form .submit-button button {
width: 120px;
height: 50px;
font-weight: 400;
color: #de002e;
background: transparent;
border: 2px solid #de002e !important;
padding: 1rem 3rem;
display: inline-block;
text-align: center;
margin: 2rem 0;
text-decoration: none;
position: relative;
overflow: hidden;
box-sizing: border-box;
z-index: 1;
cursor: pointer;
border-radius: 0px;
}
#up-form .submit-button button:after {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
right: 0;
height: 100%;
width: 0;
overflow: hidden;
background: #de002e;
box-sizing: border-box;
transition: width 0.2s 0s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
}
#up-form .submit-button button:hover {
color: white;
text-decoration: none;
}
#up-form .submit-button button:focus:after,
#up-form .submit-button button:hover:after {
width: 100%;
}
#up-form input[type=checkbox] {
appearance: none;
-webkit-appearance: none;
background-color: transparent;
display: inline-block;
position: relative;
width: 2rem;
height: 2rem;
}
#up-form input[type=checkbox]:before {
content: "";
position: absolute;
left: 0px;
top: 3px;
width: 2rem;
height: 2rem;
border: 0.1rem solid #4f2d7f;
}
#up-form input[type=checkbox]:focus:before {
border: 2px solid #4f2d7f;
}
#up-form input[type=checkbox]:checked:after {
content: "" !important;
width: 1.4rem;
height: 0.75rem;
position: absolute;
left: 3px;
top: 0;
margin-top: 0.4rem;
border: 0.2rem solid #4f2d7f;
border-top: none;
border-right: none;
background: transparent;
transform: rotate(-55deg) skewX(-15deg);
}
#up-form input[type=checkbox]:focus {
outline: none;
}
#up-form input[name*=singleOptIn] {
margin-top: -1px !important;
}
#up-form .opt-in-label {
margin-left: 12px;
}
#up-form select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADIWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjMyNzlGNzQzRThFQjExRUE4NkRERjE3REExRkJCRkNDIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjMyNzlGNzQ0RThFQjExRUE4NkRERjE3REExRkJCRkNDIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzI3OUY3NDFFOEVCMTFFQTg2RERGMTdEQTFGQkJGQ0MiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MzI3OUY3NDJFOEVCMTFFQTg2RERGMTdEQTFGQkJGQ0MiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz43c10IAAAAZElEQVQYV2P0163fzsDA4AHE2MB2JiBRCMR/wFxUABIrAim4AcTTQCJoACR2A6QABJqA+C2ECQYgdiOIAVMAEgApggGQ5DsQA6YABMBGAvF1IJ4OEgABZAUgR4EcXARlAwEDAwDgRBPocu+b3QAAAABJRU5ErkJggg==") no-repeat right 20px top 50% #fff;
}
Raw
settings.json
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment