app/assets/stylesheets/mixins/forms.scss
@import "mixins/icons";
@import "mixins/layouts";
@mixin public-form-header-background($color, $final-color-width) {
background-image: linear-gradient(
to right,
#{$color} 0,
#{$color} calc(100% - #{$final-color-width} - 1px),
#{$body-background} calc(100% - #{$final-color-width}),
#{$body-background} 100%
);
}
@mixin public-form-header {
$border-width: 4px;
h1 {
margin-bottom: 0;
}
header {
$icon-size: $line-height * 4;
$padding-right: rem-calc(20);
$icon-size-with-padding: $icon-size + $padding-right;
$polygon-size: $icon-size * 0.5;
@include background-till-left-of-screen;
@include brand-secondary-background;
border: $border-width solid $brand-secondary;
border: $border-width solid var(--brand-secondary, $brand-secondary);
border-bottom-right-radius: rem-calc(12);
border-top-right-radius: rem-calc(12);
margin-top: $line-height * 2;
padding: $line-height * 2 0;
position: relative;
@include breakpoint(small) {
&::after {
display: none;
}
}
@include breakpoint(large) {
$rounding-error: 6px;
@include public-form-header-background($brand-secondary, $icon-size-with-padding);
@include public-form-header-background(var(--brand-secondary, $brand-secondary), $icon-size-with-padding);
padding-right: $icon-size-with-padding;
&::after {
background: $body-background;
content: "";
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% calc(100% + 1px), 0 50%);
display: block;
position: absolute;
right: calc(#{$icon-size-with-padding} - #{$rounding-error});
top: 0;
height: 100%;
width: $polygon-size;
}
}
&::before {
top: -$border-width;
height: calc(100% + #{$border-width * 2});
}
h1 {
$heading-icon-size: $icon-size * 0.85;
@include has-fa-icon(building, regular);
font-size: rem-calc(36);
@include breakpoint(small) {
&::after,
&::before {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
}
@include breakpoint(medium) {
padding-right: $heading-icon-size * 2.5;
&::after {
display: block;
font-size: $heading-icon-size;
right: $heading-icon-size;
}
}
@include breakpoint(large) {
font-size: rem-calc(44);
&::after {
right: calc(#{$icon-size-with-padding + $polygon-size + $heading-icon-size} / 2);
}
&::before {
@include brand-secondary-color;
display: block;
font-size: $icon-size;
right: $padding-right;
}
}
span {
display: block;
font-size: 0.75em;
margin-top: calc(#{$line-height} / 2);
}
}
a {
color: inherit;
text-decoration: underline;
}
}
}
%public-form-header {
@include public-form-header;
}
@mixin public-form {
.required-fields {
@include full-width-background($adjust-padding: true);
background: $light;
margin-bottom: $line-height;
padding-top: $line-height;
}
> fieldset > legend {
float: left;
font-size: rem-calc(36);
font-weight: bold;
margin-bottom: $line-height;
text-transform: uppercase;
+ * {
clear: left;
}
}
select {
min-height: $line-height * 2;
@include breakpoint(medium) {
&:not(.js-add-language):not(.js-select-language) {
width: 50%;
}
}
}
.globalize-languages,
.translatable-fields {
@include grid-row-nest;
@include grid-column-gutter;
}
[type="submit"] {
@include regular-button;
font-size: map-get($button-sizes, large);
margin-top: $line-height;
}
.actions {
border: 6px solid $border;
border-radius: rem-calc(12);
margin-left: auto;
margin-right: auto;
margin-top: $line-height * 2;
padding: $line-height * 2 $line-height;
text-align: center;
@include breakpoint(medium) {
width: 75%;
}
label {
margin-left: auto;
margin-right: auto;
}
}
}
%public-form {
@include public-form;
}
@mixin admin-fieldset-separator {
border-top: 4px solid $admin-border-color;
> legend {
color: $admin-text;
font-size: $small-font-size;
font-weight: bold;
padding-right: calc(#{$line-height} / 2);
text-transform: uppercase;
}
}