Skip to content

Instantly share code, notes, and snippets.

@daviidy

daviidy/form.css

Created December 20, 2019 13:47
Show Gist options
  • Save daviidy/35c6d78952413fdfd89871a79ac7cb87 to your computer and use it in GitHub Desktop.
Save daviidy/35c6d78952413fdfd89871a79ac7cb87 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
form.css
label {
font-family: FibraOne-SemiBold, Gotham Rounded A, Gotham Rounded B, Segoe UI,
Roboto, Oxygen, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
font-weight: bold;
}
span {
font-family: FibraOne-SemiBold, Gotham Rounded A, Gotham Rounded B, Segoe UI,
Roboto, Oxygen, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
}
/*! CSS Used from: Embedded */
input::-webkit-input-placeholder {
color: #d2d3da;
font-family: "FibraOne-Regular", "Gotham Rounded A", "Gotham Rounded B",
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue",
sans-serif;
letter-spacing: 1px;
}
input::-moz-placeholder {
color: #d2d3da;
font-family: "FibraOne-Regular", "Gotham Rounded A", "Gotham Rounded B",
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue",
sans-serif;
letter-spacing: 1px;
}
input:-ms-input-placeholder {
color: #d2d3da;
font-family: "FibraOne-Regular", "Gotham Rounded A", "Gotham Rounded B",
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue",
sans-serif;
letter-spacing: 1px;
}
input::-ms-input-placeholder {
color: #d2d3da;
font-family: "FibraOne-Regular", "Gotham Rounded A", "Gotham Rounded B",
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue",
sans-serif;
letter-spacing: 1px;
}
input::placeholder {
color: #d2d3da;
font-family: "FibraOne-Regular", "Gotham Rounded A", "Gotham Rounded B",
"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Droid Sans", "Helvetica Neue",
sans-serif;
letter-spacing: 1px;
}
input:hover,
input:active,
input:focus {
outline: 0px !important;
-webkit-appearance: none;
}
/*! CSS Used from: Embedded */
::-ms-clear {
display: none;
}
/*! CSS Used from: Embedded */
._1644449 {
font-size: 28px;
font-family: FibraOne-SemiBold, Gotham Rounded A, Gotham Rounded B, Segoe UI,
Roboto, Oxygen, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
margin-top: 10px;
text-align: center;
}
._18c8ec60 {
width: 100%;
text-align: end;
color: #b0b2be;
margin-top: 5px;
cursor: pointer;
font-size: 12px;
}
._21dae779 {
height: 100%;
}
._2e4ff3bc {
width: 16px;
height: 21px;
}
._3f41241d {
flex: 1;
display: flex;
justify-content: center;
min-width: 50px;
}
._409742f4 {
flex: 2;
text-align: center;
color: #b0b2be;
}
._4dfd0c8c {
background-color: #d2d3da;
height: 2px;
flex: 1;
margin: 0px 5px;
}
._6142989a {
font-size: 16px;
font-family: FibraOne-Bold, Gotham Rounded A, Gotham Rounded B, Segoe UI,
Roboto, Oxygen, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
letter-spacing: 0.9px;
padding: 5px;
text-decoration: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #ffffff;
}
._65e52571 {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1000px;
flex-shrink: 0;
flex-grow: 1;
padding: 50px 50px;
box-sizing: border-box;
}
@media (max-width: 499px) {
._65e52571 {
padding: 0px 0px 50px 0px;
}
}
@media (max-width: 899px) {
._65e52571 {
flex-direction: column;
}
}
._71544996 {
font-size: 16px;
font-family: FibraOne-Bold, Gotham Rounded A, Gotham Rounded B, Segoe UI,
Roboto, Oxygen, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
padding: 5px;
text-decoration: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
color: #ffffff;
}
@media (max-width: 400px) {
._71544996 {
font-size: 14px;
}
}
@media (max-width: 350px) {
._71544996 {
font-size: 12px;
}
}
._7cf3baca {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 6px;
min-height: 48px;
margin-top: 8px;
cursor: pointer;
text-decoration: none;
color: #ffffff;
background-color: #ea4335;
fill: #ffffff;
}
._82a246cb {
position: absolute;
margin: auto;
top: 0px;
bottom: 0px;
left: 20px;
width: 20px;
height: 20px;
}
._86bb084a {
display: flex;
justify-content: space-between;
margin: 19px 0px;
width: 100%;
align-items: center;
}
._9020a18 {
color: #62d76b;
cursor: pointer;
text-decoration: underline;
}
._95a1a91b {
margin-left: 10px;
}
._964b105c {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 6px;
min-height: 48px;
margin-top: 8px;
cursor: pointer;
text-decoration: none;
color: #ffffff;
background-color: #000000;
fill: #ffffff;
}
._9830536 {
display: flex;
border-radius: 4px;
border: 2px solid #ebebee;
margin-bottom: 8px;
height: 48px;
align-items: center;
width: 100%;
box-sizing: border-box;
overflow: hidden;
}
._9a11307b {
flex: 7;
border-style: none;
height: 80%;
width: 100%;
font-size: 16px;
font-family: FibraOne-Regular, Gotham Rounded A, Gotham Rounded B, Segoe UI,
Roboto, Oxygen, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
}
._9a11307b:focus {
outline: none;
}
._9fffb9c6 {
display: flex;
flex-flow: column;
align-items: center;
max-width: 400px;
flex-grow: 1;
background-color: #ffffff;
box-shadow: 0px 0px 6px 0px #0000001a;
border-radius: 8px;
padding: 32px 32px;
box-sizing: border-box;
}
@media (max-width: 500px) {
._9fffb9c6 {
box-shadow: none;
}
}
._a2fa3940 {
margin-top: 8px;
color: #b0b2be;
font-size: 16px;
text-align: center;
}
._ae9eeff3 {
width: 20px;
height: 16px;
}
._b4d26ce {
width: 100%;
margin-top: 15px;
margin-bottom: 12px;
min-height: 20px;
}
._bf9bb0cc {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 8px;
min-height: 48px;
cursor: pointer;
text-decoration: none;
color: #ffffff;
background-color: #62d76b;
width: 100%;
}
._bf9bb0cc:hover {
background-color: #32b964;
}
._d6611e81 {
margin-top: 24px;
display: flex;
flex-flow: column;
width: 100%;
}
._d70702c3 {
display: flex;
flex-flow: column;
width: 100%;
fill: #b0b2be;
}
._e30ab864 {
height: 136px;
}
._eaf002ed {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 6px;
min-height: 48px;
margin-top: 8px;
cursor: pointer;
text-decoration: none;
color: #ffffff;
background-color: #3a579d;
fill: #ffffff;
}
/*! CSS Used fontfaces */
@font-face {
font-family: "FibraOne-Regular";
src: url(https://getmimo.com/assets/fonts/36EF76_4_0.eot);
src: url(https://getmimo.com/assets/fonts/36EF76_4_0.eot#iefix)
format("embedded-opentype"),
url(https://getmimo.com/assets/fonts/36EF76_4_0.woff2) format("woff2"),
url(https://getmimo.com/assets/fonts/36EF76_4_0.woff) format("woff"),
url(https://getmimo.com/assets/fonts/36EF76_4_0.ttf) format("truetype");
}
@font-face {
font-family: "FibraOne-SemiBold";
src: url(https://getmimo.com/assets/fonts/36EF76_8_0.eot);
src: url(https://getmimo.com/assets/fonts/36EF76_8_0.eot#iefix)
format("embedded-opentype"),
url(https://getmimo.com/assets/fonts/36EF76_8_0.woff2) format("woff2"),
url(https://getmimo.com/assets/fonts/36EF76_8_0.woff) format("woff"),
url(https://getmimo.com/assets/fonts/36EF76_8_0.ttf) format("truetype");
}
@font-face {
font-family: "FibraOne-Bold";
src: url(https://getmimo.com/assets/fonts/36EF76_9_0.eot);
src: url(https://getmimo.com/assets/fonts/36EF76_9_0.eot#iefix)
format("embedded-opentype"),
url(https://getmimo.com/assets/fonts/36EF76_9_0.woff2) format("woff2"),
url(https://getmimo.com/assets/fonts/36EF76_9_0.woff) format("woff"),
url(https://getmimo.com/assets/fonts/36EF76_9_0.ttf) format("truetype");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment