Adds transparency to background color option and begins transparent. #388

This commit is contained in:
mateuswetah 2020-10-05 15:12:40 -03:00
parent 6f38f06df0
commit 0a072b395a
3 changed files with 9 additions and 7 deletions

View File

@ -55,6 +55,7 @@
&.is-active { background-color: var(--tainacan-primary); }
.media {
display: flex;
align-items: center;
.media-left {

View File

@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks;
const { __ } = wp.i18n;
const { Button, ExternalLink, TextControl, TextareaControl, ColorPicker, BaseControl, CheckboxControl, FontSizePicker, HorizontalRule, Spinner, ToggleControl, Placeholder, PanelBody, ToolbarGroup, ToolbarButton } = wp.components;
const { Button, TextControl, TextareaControl, ColorPicker, BaseControl, CheckboxControl, FontSizePicker, HorizontalRule, Spinner, ToggleControl, Placeholder, PanelBody, ToolbarGroup, ToolbarButton } = wp.components;
const { InspectorControls, BlockControls } = wp.editor;
@ -72,8 +72,8 @@ registerBlockType('tainacan/item-submission-form', {
default: false
},
backgroundColor: {
type: String,
default: '#ffffff'
type: Object,
default: { r: 255, g: 255, b: 255, a: 0}
},
baseFontSize: {
type: Number,
@ -548,10 +548,9 @@ registerBlockType('tainacan/item-submission-form', {
<ColorPicker
color={ backgroundColor }
onChangeComplete={ (colorValue ) => {
backgroundColor = colorValue.hex;
backgroundColor = colorValue.rgb;
setAttributes({ backgroundColor: backgroundColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
@ -692,7 +691,7 @@ registerBlockType('tainacan/item-submission-form', {
</div>
<div
style={{
'--tainacan-background-color': backgroundColor,
'--tainacan-background-color': 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')',
'--tainacan-input-color': inputColor,
'--tainacan-input-background-color': inputBackgroundColor,
'--tainacan-input-border-color': inputBorderColor,
@ -864,7 +863,7 @@ registerBlockType('tainacan/item-submission-form', {
style={{
'font-size': baseFontSize + 'px',
'--tainacan-base-font-size': baseFontSize + 'px',
'--tainacan-background-color': backgroundColor,
'--tainacan-background-color': 'rgba(' + backgroundColor.r + ',' + backgroundColor.g + ',' + backgroundColor.b + ',' + backgroundColor.a + ')',
'--tainacan-input-color': inputColor,
'--tainacan-input-background-color': inputBackgroundColor,
'--tainacan-input-border-color': inputBorderColor,

View File

@ -629,6 +629,8 @@ export default {
background-color: var(--tainacan-background-color);
padding-left: var(--tainacan-one-column);
padding-right: var(--tainacan-one-column);
padding-top: 24px;
padding-bottom: 10px;
@media screen and (max-width: 769px) {
max-width: 100%;