.authentication-styles { .button { font-family: "Lato", sans-serif; font-size: 0.875rem; font-weight: 300; color: #fff; min-height: 2.5rem; line-height: 1.4; padding: 0.5rem 1.875rem 0.625rem; box-sizing: border-box; position: relative; display: inline-block; background: #41b883; border: none; border-radius: 5px; z-index: 1; overflow: hidden; outline: none; vertical-align: middle; transition: 0.1s background ease, 0.1s border-color ease, 0.1s color ease; border-bottom: 3px solid #266d4d; text-decoration: none; } .button:hover, .button:focus { background: #349268; cursor: pointer; } .button:active { background: #266d4d; } .button:focus { outline: none; } .button--small { padding: 0.375rem 1.25rem 0.375rem; font-size: 0.75rem; min-height: 1.875rem; } .button--xlarge { padding: 0.875rem 3.125rem 0.9375rem; font-size: 1.125rem; min-height: 3.75rem; } .button--large { padding: 0.6875rem 2.5rem 0.8125rem; font-size: 1rem; min-height: 3.125rem; } .button--fake { background: none; color: #374853; border-color: transparent; } .button--fake:hover, .button--fake:focus { background: rgba(0, 0, 0, 0.05); } .button--hollow { background: none; color: #374853; border: 1px solid #a8a8a8; } .button--hollow:hover, .button--hollow:focus { background: rgba(0, 0, 0, 0.05); color: #000; border: 1px solid #1c1c1c; cursor: pointer; } .button--expanded { width: 100%; } .button--secondary { background: #374853; border-bottom: 3px solid #0e1316; } .button--secondary:hover, .button--secondary:focus { background: #232d34; cursor: pointer; } .button--success { background: #43ac6a; border-bottom: 3px solid #26633d; } .button--success:hover, .button--success:focus { background: #358753; cursor: pointer; } .button--error { background: #f08a24; border-bottom: 3px solid #a3570b; } .button--error:hover, .button--error:focus { background: #d3710e; cursor: pointer; } .button--info { background: #5fadd6; border-bottom: 3px solid #2a7ba5; } .button--info:hover, .button--info:focus { background: #3698cc; cursor: pointer; } .button__group { margin-bottom: 20px; width: 100%; } .button__group .button { display: inline-block; margin-right: 0; margin-bottom: 0; border-radius: 0; } .button__group .button:first-child { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .button__group .button:last-child { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .button__group--1 .button { width: 100%; } .button__group--2 .button { width: 50%; } .button__group--3 .button { width: 33.33333%; } .form { position: relative; } .form__input, .form-control, .form__textarea { position: relative; margin-bottom: 2rem; } // .form__input, // .form__textarea { // font-family: "Lato", sans-serif; // font-size: 0.875rem; // font-weight: 300; // color: #374853; // line-height: 2.375rem; // min-height: 2.375rem; // position: relative; // border: 1px solid #e8e8e8; // border-radius: 5px; // background: #fff; // padding: 0 0.8125rem; // width: 100%; // transition: border 0.1s ease; // box-sizing: border-box; // } .form__input:hover, .form-control:hover, .form__textarea:hover { border-color: #cfcfcf; } .form__input:focus, .form-control:focus, .form__textarea:focus { border-color: #a8a8a8; outline: none; } .form__input--with-left-icon, .form__textarea--with-left-icon { padding-left: 2.8125rem; } .form__input--with-right-icon, .form__textarea--with-right-icon { padding-right: 2.8125rem; } .form__icon { position: absolute; pointer-events: none; top: -1px; height: 2.5rem; line-height: 2.5rem; } .form__icon--right { right: 0.9375rem; } .form__icon--left { left: 0.8125rem; } .form__textarea { max-width: 100%; min-height: 5.125rem; resize: none; line-height: 1.4; padding-top: 10px; } .form__label, .form__label--inline { font-size: 0.8125rem; color: #4b6372; margin-bottom: 0.3125rem; margin-left: 0.875rem; display: block; font-family: "Lato", sans-serif; } .form__label--inline { display: inline-block; margin-right: 1.25rem; margin-left: 0.5rem; } .form-group { margin-bottom: 2rem; } .form-group .form__input, .form-group .form__textarea { margin-bottom: 0; } .form-group--merged { font-size: 0; display: table; width: 100%; border-collapse: separate; } .form-group--merged .form__label, .form-group--merged .form__label--inline { display: table-caption; } .form-group__input, .form-group__addon, .form-group__button { display: table-cell; vertical-align: middle; margin: 0; white-space: nowrap; } .form-group__addon:first-child, .form-group__input:first-child, .form-group__button:first-child .button { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -1px; } .form-group__addon:last-child, .form-group__input:last-child, .form-group__button:last-child .button { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; } .form-group__input:not(:first-child):not(:last-child), .form-group__addon:not(:first-child):not(:last-child), .form-group__button:not(:first-child):not(:last-child) .button { border-radius: 0; } .form-group__button:not(:first-child):not(:last-child) .button { margin-left: -1px; margin-right: -1px; } .form-group__addon:first-child { border-right: none; } .form-group__addon:last-child { border-left: none; } .form-group__addon { background: #f3f3f3; border: 1px solid #e8e8e8; border-radius: 5px; height: 2.375rem; line-height: 2.375rem; width: 1%; padding: 0 13px; font-size: 14px; text-align: center; } .form-group__button { width: 1%; } .form-group__button .button { margin: 0; padding-right: 1.25rem; padding-left: 1.25rem; } .form-group__message, .error { font-size: 0.75rem; line-height: 1; display: none; margin-left: 14px; margin-top: -1.6875rem; margin-bottom: 0.9375rem; } .form-group--alert, .form-group--error { animation-name: shakeError; animation-fill-mode: forwards; animation-duration: 0.6s; animation-timing-function: ease-in-out; } .form-group--loading .form__input, .form-group--loading .form-control { border-image-slice: 1; animation: loading-frame 1s infinite; } @keyframes loading-frame { 0% { border-color: #3acfd5; } 50% { border-color: #3a4ed5; } 100% { border-color: #3acfd5; } } .form-group--success .form__label, .form-group--success .form__label--inline { color: #43ac6a; } .form-group--success .form-group__addon { color: white; border-color: #85d0a1; background: #85d0a1; } .form-group--success input, .form-group--success textarea, .form-group--success input:focus, .form-group--success input:hover { border-color: #85d0a1; } .form-group--success + .form-group__message, .form-group--success + .error { display: block; color: #73c893; } .form-group--error .form__label, .form-group--error .form__label--inline { color: #f04124; } .form-group--error .form-group__addon { color: white; border-color: #f79483; background: #f79483; } .form-group--error input, .form-group--error textarea, .form-group--error input:focus, .form-group--error input:hover { border-color: #f79483 !important; } .form-group--error + .form-group__message, .form-group--error + .error { display: block; color: #f57f6c; } .form-group--alert .form__label, .form-group--alert .form__label--inline { color: #f08a24 !important; } .form-group--alert .form-group__addon { color: white; border-color: #f7bd83; background: #f7bd83; } .form-group--alert input, .form-group--alert textarea, .form-group--alert input:focus, .form-group--alert input:hover { border-color: #f7bd83; } .form-group--alert + .form-group__message { display: block; color: #f5b06c; } @keyframes shakeError { 0% { transform: translateX(0); } 15% { transform: translateX(0.375rem); } 30% { transform: translateX(-0.375rem); } 45% { transform: translateX(0.375rem); } 60% { transform: translateX(-0.375rem); } 75% { transform: translateX(0.375rem); } 90% { transform: translateX(-0.375rem); } 100% { transform: translateX(0); } } .list { font-family: "Lato", sans-serif; font-size: 1rem; color: #374853; letter-spacing: 0.4px; line-height: 32px; list-style: none; } .list--sticky { position: fixed; top: 0; } .list__heading { font-family: "Dosis", sans-serif; font-size: 0.875rem; font-weight: 700; line-height: 1.875rem; color: #41b883; text-transform: uppercase; letter-spacing: 0.4px; margin: 1.875rem 0 0.625rem; } .list__link { color: #374853; text-decoration: none; display: block; padding: 0 0.625rem; margin-left: -0.625rem; border-radius: 5px; } .list__link--active { background: #f3f3f3; } .list__link--disabled { color: #939ea5; pointer-events: none; } .list__dl { font-family: "Lato", sans-serif; font-weight: 300; } .list__dt { font-size: 0.875rem; margin-bottom: 0.625rem; color: #bbb; } .list__dd { font-size: 1rem; margin-left: 0; margin-bottom: 1.25rem; line-height: 1.4; } .list__ul, .list__ol { margin: 0 0 0 1.875rem; padding: 0; line-height: 1.8; font-weight: 300; } .list__ul { list-style: square; } .tabs, .vertical-tabs { display: flex; align-items: stretch; min-height: 2.5rem; } .tabs__link, .vertical-tabs__link { display: block; padding: 0 1.25rem; font-family: "Lato", sans-serif; font-size: 1rem; font-weight: 300; text-decoration: none; cursor: pointer; line-height: 2.5rem; color: #939ea5; transition: color 0.2s ease; } .tabs__link--active, .vertical-tabs__link--active { font-weight: 700; color: #374853; } .tabs { flex-direction: row; border-bottom: 3px solid #e8e8e8; margin-bottom: -3px; } .tabs__link { border-bottom: 3px solid #e8e8e8; margin-bottom: -3px; } .tabs__link:hover, .tabs__link:focus { color: #374853; } .tabs__link--active { border-color: #41b883; } .vertical-tabs { flex-direction: column; border-right: 3px solid #e8e8e8; margin-right: -3px; } .vertical-tabs__link { border-right: 3px solid #e8e8e8; margin-right: -3px; } .vertical-tabs__link:hover, .vertical-tabs__link:focus { color: #374853; } .vertical-tabs__link--active { border-color: #41b883; } .invalid .typo__label { color: #f04124; } .invalid .multiselect__tags { border-color: #f04124 !important; } }