Adds several css border-radius variables to form components.

This commit is contained in:
mateuswetah 2023-11-17 11:10:53 -03:00
parent b37a11610f
commit 3470553840
21 changed files with 56 additions and 26 deletions

View File

@ -129,14 +129,14 @@
height: 1.5em;
width: 18%;
border: 2px solid var(--tainacan-input-border-color, rgba(200, 200, 200, 0.3));
border-radius: 3px;
border-radius: var(--tainacan-input-border-radius, 1px);
display: inline-block; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-textarea {
background-color: var(--tainacan-input-background-color, rgba(200, 200, 200, 0.3));
height: 2.5em;
width: 100%;
border: 2px solid var(--tainacan-input-border-color, rgba(200, 200, 200, 0.3));
border-radius: 3px;
border-radius: var(--tainacan-input-border-radius, 1px);
display: inline-block; }
.wp-block-tainacan-item-submission-form .item-submission-form-placeholder .fake-button {
background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.3));
@ -146,7 +146,7 @@
max-width: 3.45em;
min-width: 1em;
margin-left: 6px;
border-radius: 3px;
border-radius: var(--tainacan-button-border-radius, 4px);
display: flex;
align-items: center;
margin-right: auto; }

File diff suppressed because one or more lines are too long

View File

@ -166,6 +166,7 @@ export default {
justify-content: space-evenly;
padding: 1.5rem 1rem 2rem 1rem;
border: 1px solid var(--tainacan-input-border-color);
border-radius: var(--tainacan-input-border-radius, 1px);
li {
text-align: center;

View File

@ -1351,9 +1351,7 @@ export default {
if (currentItemMetadatum) {
const itemMetadatumValues = Array.isArray(currentItemMetadatum.value) ? currentItemMetadatum.value : [ currentItemMetadatum.value ];
const conditionalValues = Array.isArray(eventBusItemMetadata.conditionalSections[conditionalSectionId].metadatumValues) ? eventBusItemMetadata.conditionalSections[conditionalSectionId].metadatumValues : [eventBusItemMetadata.conditionalSections[conditionalSectionId].metadatumValues];
console.log(itemMetadatumValues, conditionalValues);
eventBusItemMetadata.conditionalSections[conditionalSectionId].hide = Array.isArray(itemMetadatumValues) ? itemMetadatumValues.every(aValue => conditionalValues.indexOf(aValue['id'] ? aValue['id'] : aValue) < 0) : conditionalValues.indexOf(itemMetadatumValues) < 0;
console.log(eventBusItemMetadata.conditionalSections[conditionalSectionId].hide)
}
}

View File

@ -236,7 +236,7 @@
}
.taginput-container {
border-radius: 1px !important;
border-radius: var(--tainacan-input-border-radius, 1px) !important;
box-shadow: none !important;
transition: background-color 0.1s;
}

View File

@ -866,7 +866,10 @@ export default {
.tainacan-hierarchical-list-columns-container {
background-color: var(--tainacan-background-color);
border: 1px solid var(--tainacan-gray2);
border-radius: 2px;
border-bottom-left-radius: var(--tainacan-dropdownmenu-border-radius);
border-bottom-right-radius: var(--tainacan-dropdownmenu-border-radius);
border-top-right-radius: 0px;
border-top-left-radius: 0px;
margin-top: 0px;
display: flex;
height: auto;

View File

@ -342,7 +342,10 @@ export default {
.tainacan-hierarchical-list-columns-container {
background-color: var(--tainacan-background-color);
border: 1px solid var(--tainacan-gray2);
border-radius: 2px;
border-bottom-left-radius: var(--tainacan-dropdownmenu-border-radius);
border-bottom-right-radius: var(--tainacan-dropdownmenu-border-radius);
border-top-right-radius: 0px;
border-top-left-radius: 0px;
margin-top: 0px;
display: flex;
height: auto;

View File

@ -962,6 +962,10 @@
.tainacan-finder-columns-container {
background-color: var(--tainacan-white);
border: 1px solid var(--tainacan-gray1);
border-bottom-left-radius: var(--tainacan-dropdownmenu-border-radius);
border-bottom-right-radius: var(--tainacan-dropdownmenu-border-radius);
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-top: 0px;
margin-top: -1px;
height: auto;

View File

@ -1034,6 +1034,10 @@
.tainacan-finder-columns-container {
background-color: var(--tainacan-white);
border: 1px solid var(--tainacan-gray1);
border-bottom-left-radius: var(--tainacan-dropdownmenu-border-radius);
border-bottom-right-radius: var(--tainacan-dropdownmenu-border-radius);
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-top: 0px;
margin-top: -1px;
display: flex;

View File

@ -143,7 +143,7 @@
<div class="field">
<button
@click.prevent="removeCriterion(searchCriterion)"
class="button is-white is-pulled-right has-text-secondary"
class="button button-remove-criterion is-pulled-right has-text-secondary"
type="button"
:aria-label="$i18n.get('remove_search_criterion')">
<span
@ -651,6 +651,7 @@
.tnc-advanced-search-container {
position: relative;
padding: 1.25em;
border-radius: var(--tainacan-dropdownmenu-border-radius, 0px);
h3 {
font-size: 1em !important;
@ -683,6 +684,13 @@
margin-right: 1em;
}
.button-remove-criterion {
color: var(--tainacan-input-color);
background: transparent;
border: none;
border-radius: var(--tainacan-button-border-radius, 4px);
}
@media screen and (max-width: 768px) {
.is-12>.columns {
flex-wrap: wrap;

View File

@ -213,7 +213,7 @@
}
.filter-tag {
border-radius: 3px;
border-radius: var(--tainacan-button-border-radius, 4px);
padding: 3px 8px 2px 8px;
position: relative;
background-color: var(--tainacan-input-background-color);

View File

@ -671,7 +671,7 @@
.button {
display: flex;
align-items: center;
border-radius: 0px !important;
border-radius: var(--tainacan-button-border-radius, 4px) !important;
height: 100% !important;
}

View File

@ -17,7 +17,7 @@ button.link-style:active {
}
}
.button {
border-radius: 4px !important;
border-radius: var(--tainacan-button-border-radius, 4px) !important;
min-height: 2.125em;
font-weight: normal;
text-transform: inherit;
@ -117,7 +117,7 @@ kbd {
border-left-width: 2px;
border-right-width: 3px;
border-bottom-width: 4px;
border-radius: 4px;
border-radius: var(--tainacan-button-border-radius, 4px);
border-style: solid;
border-color: var(--tainacan-gray2, #dbdbdb);
border-bottom-color: var(--tainacan-gray3, #a5a5a5);

View File

@ -45,6 +45,9 @@
--tainacan-label-color: var(--tainacan-gray5);
--tainacan-info-color: var(--tainacan-gray4);
--tainacan-heading-color: var(--tainacan-black);
--tainacan-input-border-radius: #{$tainacan-input-border-radius};
--tainacan-button-border-radius: #{$tainacan-button-border-radius};
--tainacan-dropdownmenu-border-radius: #{$tainacan-dropdownmenu-border-radius};
// Skeleton color
--tainacan-skeleton-color: #{$skeleton-color};

View File

@ -29,7 +29,7 @@
font-size: 1em;
padding: 0px;
margin-top: 0;
border-radius: 0px;
border-radius: var(--tainacan-dropdownmenu-border-radius, 0px);
min-width: 6em;
border: none;
z-index: 999991;
@ -37,7 +37,7 @@
.dropdown-content {
padding: 0px 0px 1px 0px;
border-radius: 0px !important;
border-radius: var(--tainacan-dropdownmenu-border-radius, 0px) !important;
max-height: 240px;
overflow-y: auto;
box-shadow: none;
@ -146,7 +146,7 @@
box-shadow: none;
}
.taginput-container {
border-radius: 1px !important;
border-radius: var(--tainacan-input-border-radius, 1px) !important;
padding: 0px !important;
background-color: transparent !important;

View File

@ -20,7 +20,7 @@ input[type="week"].input {
line-height: 1em;
font-size: 0.875em;
font-family: var(--tainacan-font-family, inherit);
border-radius: 1px !important;
border-radius: var(--tainacan-input-border-radius, 1px) !important;
box-shadow: none !important;
background-color: var(--tainacan-input-background-color);
border: 1px solid var(--tainacan-input-border-color);

View File

@ -69,7 +69,7 @@
.tainacan-modal-content {
font-family: var(--tainacan-font-family, inherit);
font-size: 1rem;
border-radius: 0px;
border-radius: var(--tainacan-dropdownmenu-border-radius, 0px);
background-color: var(--tainacan-background-color);
padding: 40px var(--tainacan-one-column);
padding: 40px 4.166666667vw;
@ -166,7 +166,7 @@
width: 100%;
.button {
border-radius: 4px !important;
border-radius: var(--tainacan-button-border-radius, 4px) !important;
font-weight: normal;
padding: 2px 15px !important;
margin-top: 0px !important;

View File

@ -1,6 +1,6 @@
.select {
padding-top: 0px !important;
border-radius: 1px;
border-radius: var(--tainacan-input-border-radius, 1px);
&,
&:not(.is-multiple) {
@ -12,7 +12,7 @@
select {
background: transparent; // WordPress 5.3 adds arrows here
border: none;
border-radius: 1px !important;
border-radius: var(--tainacan-input-border-radius, 1px) !important;
font-weight: normal;
font-size: 0.875em !important;
font-family: var(--tainacan-font-family, inherit);

View File

@ -78,6 +78,7 @@
height: auto !important;
text-align: start;
}
p.cont
button.is-primary:disabled,
button.is-primary:disabled:hover,
button.is-primary:disabled:focus,
@ -172,7 +173,7 @@
justify-content: space-between;
width: 100%;
border: 1px solid var(--tainacan-input-border-color) !important;
border-radius: 0 !important;
border-radius: var(--tainacan-input-border-radius, 1px) !important;
padding: 2px 14px 2px 18px !important
}
}

View File

@ -63,6 +63,11 @@ $yellow2-invert: findColorInvert($yellow2);
$tainacan-input-color: #1d1d1d;
$tainacan-input-color-invert: findColorInvert($tainacan-input-color);
// Input border radius
$tainacan-input-border-radius: 1px;
$tainacan-button-border-radius: 4px;
$tainacan-dropdownmenu-border-radius: 0px;
// Skeleton colors
$skeleton-color: #eeeeee;
$skeleton-color-invert: findColorInvert(#eeeeee);

View File

@ -157,7 +157,7 @@
height: 1.5em;
width: 18%;
border: 2px solid var(--tainacan-input-border-color, rgba(200,200,200, 0.3));
border-radius: 3px;
border-radius: var(--tainacan-input-border-radius, 1px);
display: inline-block;
}
.fake-textarea {
@ -165,7 +165,7 @@
height: 2.5em;
width: 100%;
border: 2px solid var(--tainacan-input-border-color, rgba(200,200,200, 0.3));
border-radius: 3px;
border-radius: var(--tainacan-input-border-radius, 1px);
display: inline-block;
}
.fake-button {
@ -176,7 +176,7 @@
max-width: 3.45em;
min-width: 1em;
margin-left: 6px;
border-radius: 3px;
border-radius: var(--tainacan-button-border-radius, 4px);
display: flex;
align-items: center;
margin-right: auto;