tinyforms/app/assets/stylesheets/application.css.scss

167 lines
3.4 KiB
SCSS

@import "bulma/sass/utilities/initial-variables";
@import url('https://use.fontawesome.com/releases/v5.12.0/css/all.css');
@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Roboto:wght@100;400&display=swap');
$family-sans-serif: 'Roboto', sans-serif;
// // https://coolors.co/06aed5-086788-f0c808-fff1d0-dd1c1a
// $blue: #083d77;
// $red: #dd1c1a;
// $orange: #ee964b;
// $yellow: #f4d35e;
// $light: #f5fafe; // #ebebd3;
// $primary: $blue;
// $green: #007932; // hsl(141, 53%, 53%);
// $footer-background-color: $light;
$blue: #2535f5;
$primary: $blue;
$text: $grey-dark;
$body-background-color: #FAFCFE;
$light: #fff;
$weight-semibold: 400;
$weight-bold: 400;
@import 'bulma/bulma';
@import "checkmark-icon";
@import 'demo';
@import 'highlight';
.field_with_errors input {
border-color: $red;
}
.is-logo {
font-family: $family-sans-serif;
color: $grey;
a, a:visited {
color: $grey;
}
}
.card {
height: 100%;
}
.is-vcentered {
height: 100vh;
}
body {
min-height: 100vh;
}
main {
min-height: 70vh;
}
h1, h2, h3 {
font-family: 'Calistoga';
margin-bottom: 10px;
}
.button.google {
background: rgb(225, 98, 89);
color: white;
}
.button {
vertical-align: middle;
}
.table-wrapper {
overflow: auto;
overflow-y: scroll;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.submission-table tbody {
font-size: 0.75em;
}
.inline-svg svg {
display: inline
}
.svg-icon {
align-items: center;
display: inline-flex;
justify-content: center;
}
/*
Colours
#FFFFFF - White
#4c82fc - Mustard
#4c82fc - Green
*/
.has-mustard-bg {
background-color: #4c82fc;
}
.has-blue-bg {
background-color: #4c82fc;
}
.has-white-mustard-gradient {
background: rgb(255, 255, 255);
background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(76, 130, 252, 1) 50%, rgba(76, 130, 252, 1) 100%);
background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(76, 130, 252, 1) 50%, rgba(76, 130, 252, 1) 100%);
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(76, 130, 252, 1) 50%, rgba(76, 130, 252, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#4c82fc", GradientType=1);
}
@media(max-width: 1024px) {
.has-white-mustard-gradient {
background: rgb(255, 255, 255);
background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(76, 130, 252, 1) 25%, rgba(76, 130, 252, 1) 100%);
background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(76, 130, 252, 1) 25%, rgba(76, 130, 252, 1) 100%);
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(76, 130, 252, 1) 25%, rgba(76, 130, 252, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#4c82fc", GradientType=1);
}
}
.backend-logo {
white-space: nowrap;
img {
height: 30px;
vertical-align: text-bottom;
}
}
.features .columns {
margin-bottom: 3em;
}
.howto .box {
min-height: 100%;
}
.contact-form {
margin-top: 3em;
}
.call-to-action {
margin-top: 2em;
}
.social-link {
padding: 15px;
color: #FFFFFF !important;
}
#footer {
opacity: 0.3;
&:hover {
opacity: 1;
}
a {
color: #white;
}
}