app/assets/stylesheets/application.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
@import './variables';
@import 'bootstrap';
@import "font-awesome";
@mixin form-mixin($border-color) {
border: 2px solid $border-color;
padding: 2em;
width: 95%;
max-width: 800px;
@media screen and (min-width: 40rem){
padding: 2em 4em;
}
form {
width: 100%;
}
label {
margin-top: 2em;
}
.actions {
margin: 2em auto;
}
button,
input[type='text'],
input[type='email'],
input[type='submit'],
input[type='password'] {
min-width: 18em;
max-width: 20em;
width: 100%;
margin: auto;
padding: .5em;
}
input[type='checkbox'] {
margin-right: 1em;
}
}
body {
font-family: 'Comfortaa', Helvetica, sans-serif;
min-height: 100vh;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0), 90%, $secondary);
}
h2 {
font-size: 1.5em;
margin: 1em auto 2em;
}
nav {
z-index: 2;
}
small {
margin: 0;
}
main {
display: grid;
place-items: center;
margin: 2em 0 4em;
max-width: 100em;
width: 100%;
text-align: center;
}
.sign-up-form, .login-form, .forgot-password-form, .bklb-form {
@include form-mixin($secondary);
}