forked from a64f7bb4-7358-4778-9fbe-3b882c34cc1d/v1
485 lines
8.8 KiB
SCSS
485 lines
8.8 KiB
SCSS
@keyframes fadeInBottom {
|
|
0% {
|
|
transform: translateY(100%);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
// Option for 6 column layout
|
|
.show-6 {
|
|
.views-row {
|
|
@include mq(tiny) {
|
|
float: left;
|
|
width: 50%;
|
|
}
|
|
|
|
@include mq(small) {
|
|
width: 25%;
|
|
}
|
|
|
|
@include mq(large) {
|
|
width: 20%;
|
|
}
|
|
|
|
@include mq(wide) {
|
|
width: 16.666666667%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.block-system > .views-form,
|
|
.view-content .views-form {
|
|
.claro-details {
|
|
box-shadow: none;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.views-table {
|
|
order: -1;
|
|
margin-top: 0;
|
|
}
|
|
|
|
[data-drupal-selector*=edit-header] {
|
|
order: 99;
|
|
position: relative;
|
|
left: 0;
|
|
padding: 0 var(--gin-spacing-m) var(--gin-spacing-m) var(--gin-spacing-m);
|
|
border-radius: var(--gin-border-m);
|
|
background: rgba(var(--gin-color-sticky-rgb), .95);
|
|
|
|
@supports (backdrop-filter: blur()) {
|
|
opacity: .999; /* Fix Chrome issue with mask */
|
|
background: rgba(var(--gin-color-sticky-rgb), .9);
|
|
backdrop-filter: blur(12px);
|
|
|
|
.gin--dark-mode & {
|
|
background: rgba($colorDarkAppBackground, .8);
|
|
}
|
|
}
|
|
|
|
[data-drupal-selector*='edit-views-bulk-operations-bulk-form'] {
|
|
> * {
|
|
margin-right: var(--gin-spacing-xs);
|
|
}
|
|
|
|
.form-type--select,
|
|
.form-actions {
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.form-actions {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.form-type--checkbox {
|
|
align-self: center;
|
|
}
|
|
}
|
|
|
|
.form-item__label:not([for='edit-select-all']) {
|
|
display: block;
|
|
float: left;
|
|
top: 2px;
|
|
margin-top: var(--gin-spacing-xxs);
|
|
margin-right: var(--gin-spacing-m);
|
|
line-height: 1.75;
|
|
}
|
|
|
|
&.is-sticky {
|
|
z-index: 4;
|
|
opacity: 1;
|
|
position: sticky;
|
|
left: 0;
|
|
bottom: var(--gin-spacing-xs);
|
|
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, .03);
|
|
animation: fadeInBottom 320ms 1 forwards;
|
|
}
|
|
}
|
|
}
|
|
|
|
.views-exposed-form.views-exposed-form {
|
|
padding-top: var(--gin-spacing-xs);
|
|
|
|
.form-element--type-select {
|
|
max-width: 240px;
|
|
}
|
|
|
|
.form-type--boolean .form-boolean {
|
|
margin-left: 0;
|
|
margin-right: var(--gin-spacing-xs);
|
|
}
|
|
|
|
.fieldset--group {
|
|
margin-top: var(--gin-spacing-s);
|
|
}
|
|
|
|
// Exposed filter with fieldgroup
|
|
fieldset {
|
|
margin-right: var(--gin-spacing-s);
|
|
margin-bottom: .4rem;
|
|
|
|
> .fieldset__legend > .fieldset__label {
|
|
font-size: var(--gin-font-size-s);
|
|
padding: 0 var(--gin-spacing-xs);
|
|
margin-bottom: var(--gin-spacing-xxs);
|
|
}
|
|
|
|
.fieldset__wrapper {
|
|
display: flex;
|
|
margin: 0 0 0 var(--gin-spacing-xs);
|
|
}
|
|
|
|
.form-item {
|
|
margin: 0 var(--gin-spacing-xs) var(--gin-spacing-xs) 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.views-exposed-form__item--preceding-actions.views-exposed-form__item--preceding-actions {
|
|
margin-right: var(--gin-spacing-xs);
|
|
}
|
|
|
|
.gin-layer-wrapper {
|
|
padding: var(--gin-spacing-l);
|
|
|
|
@include mq($to: large) {
|
|
overflow: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
& + .gin-layer-wrapper {
|
|
margin-top: var(--gin-spacing-l);
|
|
}
|
|
|
|
& + h2,
|
|
& + h3 {
|
|
margin-top: var(--gin-spacing-xl);
|
|
}
|
|
}
|
|
|
|
.views-edit-view {
|
|
.unit-title {
|
|
margin-top: 0;
|
|
margin-bottom: var(--gin-spacing-m);
|
|
@extend h2;
|
|
}
|
|
}
|
|
|
|
// Preview form
|
|
.view-preview-form {
|
|
&__title {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
border-bottom: 0 none;
|
|
}
|
|
|
|
.preview-section {
|
|
padding: var(--gin-spacing-m);
|
|
border: 1px dashed var(--gin-border-color-layer2)
|
|
}
|
|
|
|
.view-filters .preview-section {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.form-actions {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.form-item--live-preview {
|
|
position: static !important;
|
|
margin-top: var(--gin-spacing-l);
|
|
}
|
|
|
|
.arguments-preview {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.views-live-preview {
|
|
padding: 0;
|
|
|
|
.gin-layer-wrapper {
|
|
border-color: var(--gin-border-color);
|
|
}
|
|
}
|
|
|
|
.views-displays {
|
|
border: 1px solid var(--gin-border-color);
|
|
border-radius: var(--gin-border-l);
|
|
}
|
|
|
|
.views-admin {
|
|
.icon.add {
|
|
background: none;
|
|
|
|
&:before {
|
|
content: "+";
|
|
font-size: var(--gin-font-size);
|
|
line-height: .1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.views-display-top {
|
|
padding: var(--gin-spacing-m);
|
|
background-color: var(--gin-bg-header);
|
|
border: 0 none;
|
|
border-radius: var(--gin-border-l);
|
|
|
|
// #3186729: Drupal 9.1 fix
|
|
&__extra-actions-wrapper {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.dropbutton-wrapper {
|
|
top: 20px;
|
|
right: 2var(--gin-spacing-l);
|
|
}
|
|
}
|
|
|
|
#edit-displays {
|
|
.views-display-top {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
}
|
|
|
|
.edit-display-settings {
|
|
padding: var(--gin-spacing-l);
|
|
margin: 0;
|
|
}
|
|
|
|
.views-tabs {
|
|
a {
|
|
padding: var(--gin-spacing-xs) var(--gin-spacing-m);
|
|
}
|
|
|
|
.add a,
|
|
li a {
|
|
font-size: var(--gin-font-size-xs);
|
|
font-weight: var(--gin-font-weight-heavy);
|
|
color: var(--gin-color-primary);
|
|
padding: var(--gin-spacing-xs) var(--gin-spacing-m);
|
|
background: transparent;
|
|
border: 2px solid var(--gin-color-primary);
|
|
border-radius: var(--gin-border-xs);
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
|
|
.icon.add {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.add a:hover,
|
|
.add a:focus,
|
|
li a:hover,
|
|
li a:focus,
|
|
li.is-active a,
|
|
li.is-active a.is-active {
|
|
color: var(--gin-bg-app);
|
|
background: var(--gin-color-primary);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.add a:focus,
|
|
li a:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 1px var(--gin-color-focus-border), 0 0 0 4px var(--gin-color-focus);
|
|
}
|
|
|
|
.add {
|
|
&.open {
|
|
a {
|
|
background: var(--gin-bg-layer2);
|
|
|
|
&:hover, &:focus, &:active {
|
|
color: var(--gin-color-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.action-list {
|
|
top: 36px;
|
|
background: var(--gin-bg-layer3);
|
|
box-shadow: 0 1px 2px var(--gin-shadow-button);
|
|
|
|
li {
|
|
background-color: transparent;
|
|
border: none;
|
|
|
|
input.button {
|
|
width: 100%;
|
|
text-align: left;
|
|
line-height: 1.2;
|
|
box-shadow: none;
|
|
border: none !important;
|
|
}
|
|
|
|
&:hover, &:focus, &:active {
|
|
&,
|
|
input.button {
|
|
color: var(--gin-color-button-text);
|
|
background: var(--gin-color-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.views-ui-display-tab-bucket {
|
|
// #3186729: Drupal 9.1 fix
|
|
&__header {
|
|
padding: 0;
|
|
}
|
|
|
|
& &__title {
|
|
font-size: var(--gin-font-size-xl);
|
|
font-weight: var(--gin-font-weight-semibold);
|
|
color: var(--gin-color-title);
|
|
text-transform: none;
|
|
padding: var(--gin-spacing-m);
|
|
}
|
|
|
|
// #3186729: Drupal 9.1 fix
|
|
&__header {
|
|
padding: var(--gin-spacing-m) 0 var(--gin-spacing-xs);
|
|
|
|
.views-ui-display-tab-bucket__title {
|
|
padding: 0 var(--gin-spacing-m);
|
|
}
|
|
|
|
.views-ui-display-tab-bucket__actions {
|
|
margin-right: var(--gin-spacing-m);
|
|
}
|
|
}
|
|
|
|
.views-display-setting,
|
|
.views-ui-display-tab-bucket > .views-display-setting {
|
|
padding: var(--gin-spacing-xs) var(--gin-spacing-m);
|
|
}
|
|
|
|
.views-display-setting {
|
|
color: var(--gin-color-text);
|
|
}
|
|
|
|
.views-display-setting:nth-of-type(even) {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.dropbutton-wrapper {
|
|
top: 14px;
|
|
right: var(--gin-spacing-m);
|
|
}
|
|
|
|
&.pager {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.views-ui-display-tab-bucket.views-ui-display-tab-bucket {
|
|
padding-top: 0;
|
|
margin-bottom: 0;
|
|
border-bottom-color: var(--gin-border-color);
|
|
}
|
|
|
|
.views-ui-display-tab-actions {
|
|
.views-ui-display-tab-setting {
|
|
padding: var(--gin-spacing-m);
|
|
}
|
|
}
|
|
|
|
.views-query-info table tr {
|
|
background-color: var(--gin-bg-layer2);
|
|
|
|
td {
|
|
color: var(--gin-color-text);
|
|
}
|
|
}
|
|
|
|
.system-modules,
|
|
.locale-translation-status-form {
|
|
tr.even,
|
|
tr.odd {
|
|
background: none;
|
|
border-top: 1px solid var(--gin-border-color);
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
|
|
.system-modules td {
|
|
padding: var(--gin-spacing-m);
|
|
height: auto;
|
|
|
|
details summary {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.views-display-column,
|
|
.edit-display-settings-top.views-ui-display-tab-bucket {
|
|
margin-bottom: var(--gin-spacing-m);
|
|
border-color: var(--gin-border-color);
|
|
border-radius: var(--gin-border-m);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.views-ui-dialog {
|
|
.form--inline {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.views-override:not(:empty) {
|
|
background-color: var(--gin-bg-app);
|
|
border-bottom: 0 none;
|
|
}
|
|
|
|
.form-item--fields-area-text-custom-removed {
|
|
display: inline-block;
|
|
margin-right: var(--gin-spacing-xxs);
|
|
}
|
|
}
|
|
|
|
a.views-field-excluded {
|
|
color: var(--gin-color-disabled);
|
|
}
|
|
|
|
.views-filterable-options {
|
|
border-top: none;
|
|
}
|
|
|
|
.view-block-content .views-table {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.views-display-columns {
|
|
.details-wrapper {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.machine-name-label {
|
|
color: var(--gin-color-text);
|
|
}
|
|
|
|
.machine-name-value {
|
|
color: var(--gin-color-title);
|
|
}
|
|
|
|
.views-exposed-form .form-datetime-wrapper {
|
|
margin-bottom: 0;
|
|
margin-right: var(--gin-spacing-xs);
|
|
}
|