GIF94;
MINI MO Shell - Tarih Gösterimli
MINI MINI MANI MO - TARİH GÖSTERİMLİ
{% macro atomV1FormCss(style, selector, breakpoint, globalSettings) %}
{{ selector ?? ':root, .bde-global-css-vars' }} {
--bde-form-gap: {{ style.spacing.between_fields.style }};
--bde-form-after-label: {{ style.spacing.after_label.style }};
--bde-form-after-sublabel: {{ style.spacing.sub_label.style }};
--bde-form-input-background-color: {{ style.fields.background }};
--bde-form-input-padding-top: {{ style.fields.padding.padding.top.style }};
--bde-form-input-padding-right: {{ style.fields.padding.padding.right.style }};
--bde-form-input-padding-bottom: {{ style.fields.padding.padding.bottom.style }};
--bde-form-input-padding-left: {{ style.fields.padding.padding.left.style }};
--bde-form-input-placeholder-color: {{ style.fields.placeholder }};
--bde-form-label-color: {{ style.typography.labels.color }};
--bde-form-label-required-color: {{ style.fields.required.color }};
--bde-form-label-required-nudge-x: {{ style.fields.required.nudge_x.style }};
--bde-form-label-required-nudge-y: {{ style.fields.required.nudge_y.style }};
--bde-form-label-required-size: {{ style.fields.required.size.style }};
--bde-form-text-color: {{ style.typography.values.color }};
--bde-form-input-focused-background-color: {{ style.fields.focused.background }};
--bde-form-input-focused-border-color: {{ style.fields.focused.border }};
--bde-form-input-focused-shadow: {{ style.fields.focused.shadow.style }};
--bde-form-checkbox-size: {{ style.fields.advanced.radio_checkbox.size.style }};
--bde-form-checkbox-selected-color: {{ style.fields.advanced.radio_checkbox.color }};
{{ _self.border_radius_to_css_vars(style.fields.borders.radius) }}
{{ _self.border_complex_to_css_vars(style.fields.borders.border) }}
}
{# Main Styles #}
{{ selector }} .breakdance-form {
gap: {{ style.spacing.between_fields.style }};
}
{# Labels #}
{{ selector }} .breakdance-form-field__label,
{# Labels : Woo #}
{{ selector }}.breakdance-woocommerce .woocommerce-password-strength,
{{ selector }}.breakdance-woocommerce label span.optional,
{{ selector }}.breakdance-woocommerce label {
{{ _self.typography(style.typography.labels, globalSettings) }}
}
{# Fields #}
{{ selector }} .breakdance-form .breakdance-form-field__input,
{{ selector }} .breakdance-form-dropzone,
{# Fields: Woo #}
{{selector}} .select2-container--default .select2-search--dropdown .select2-search__field,
{{selector}} .select2-container--default .select2-selection--single,
{{selector}} .breakdance-woocommerce .price_slider_amount input[type="text"],
{{selector}} .breakdance-woocommerce input[type="search"],
{{selector}} .breakdance-woocommerce textarea,
{{selector}} .breakdance-woocommerce .woocommerce-Input,
{{selector}} .breakdance-woocommerce .input-text,
{{selector}} .breakdance-woocommerce select,
{{selector}} .breakdance-woocommerce .wc_payment_method input[type="text"],
{{selector}} .breakdance-woocommerce .wc-stripe-elements-field {
background-color: {{ style.fields.background }};
{{ _self.borders(style.fields.borders) }}
{{ _self.typography(style.typography.values, globalSettings) }}
}
{# Fields/Focused #}
{{ selector }} .breakdance-form .breakdance-form-field__input:focus {
background-color: {{ style.fields.focused.background|default(style.fields.background) }};
border-color: {{ style.fields.focused.border }};
box-shadow: {{ style.fields.focused.shadow.style }};
}
{# Fields/Placeholder #}
{{ selector }} .breakdance-form .breakdance-form-field__input::placeholder {
color: {{ style.fields.placeholder }};
}
{# Fields/Advanced/Checkbox-Radio #}
{{ selector }} .breakdance-form-checkbox input[type="checkbox"],
{{ selector }} .breakdance-form-radio input[type="radio"] {
width: {{ style.fields.advanced.radio_checkbox.size.style }};
height: {{ style.fields.advanced.radio_checkbox.size.style }};
color: {{ style.fields.advanced.radio_checkbox.color }};
}
{{ selector }} .breakdance-form-checkbox,
{{ selector }} .breakdance-form-radio {
margin-bottom: {{ style.spacing.sub_label.style }};
{{ _self.typography(style.typography.sub_labels, globalSettings) }}
}
{# Links #}
{{ selector }} .breakdance-form-link {
{{ _self.typography(style.typography.links, globalSettings) }}
}
{{ selector }} .breakdance-form-link:hover {
{{ _self.typographyWithHoverableColorAndEffects(style.typography.links) }}
}
{# Messages #}
{{ selector }} .breakdance-form-message {
margin-top: {{ style.messages.space_above.style }};
padding: {{ style.messages.padding.style }};
background-color: {{ style.messages.success.background }};
{{ _self.borders(style.messages.success.borders) }}
{{ _self.typography(style.messages.success.typography, globalSettings) }}
}
{{ selector }} .breakdance-form-message--error {
background-color: {{ style.messages.error.background }};
{{ _self.borders(style.messages.error.borders) }}
{{ _self.typography(style.messages.error.typography, globalSettings) }}
}
{# File Upload/Dropzone #}
{{ selector }} .breakdance-form {
--bde-form-dropzone-color: {{ style.fields.advanced.file_input.drag_drop.text }};
--bde-form-dropzone-color-hover: {{ style.fields.advanced.file_input.drag_drop.text_hover }};
--bde-form-dropzone-color-dragging: {{ style.fields.advanced.file_input.drag_drop.active.text }};
--bde-form-dropzone-icon-color: {{ style.fields.advanced.file_input.drag_drop.icon_color }};
--bde-form-dropzone-icon-color-hover: {{ style.fields.advanced.file_input.drag_drop.icon_color_hover }};
--bde-form-dropzone-icon-color-dragging: {{ style.fields.advanced.file_input.drag_drop.active.icon_color }};
--bde-form-dropzone-link-color: {{ style.fields.advanced.file_input.drag_drop.link }};
--bde-form-dropzone-link-color-hover: {{ style.fields.advanced.file_input.drag_drop.link_hover }};
--bde-form-dropzone-link-color-dragging: {{ style.fields.advanced.file_input.drag_drop.active.link }};
--bde-form-dropzone-border-color: {{ style.fields.advanced.file_input.drag_drop.border_color }};
--bde-form-dropzone-border-color-hover: {{ style.fields.advanced.file_input.drag_drop.border_color_hover }};
--bde-form-dropzone-border-color-dragging: {{ style.fields.advanced.file_input.drag_drop.active.border_color }};
--bde-form-dropzone-background-color: {{ style.fields.advanced.file_input.drag_drop.background }};
--bde-form-dropzone-background-color-hover: {{ style.fields.advanced.file_input.drag_drop.background_hover }};
--bde-form-dropzone-background-color-dragging: {{ style.fields.advanced.file_input.drag_drop.active.background }};
/* Files List */
--bde-form-files-list-gap: {{ style.fields.advanced.file_input.drag_drop.files_list.space_between.style }};
--bde-form-files-list-background-color: {{ style.fields.advanced.file_input.drag_drop.files_list.background }};
}
{{ selector }} .breakdance-form-dropzone {
{{ _self.spacing_padding_all(style.fields.advanced.file_input.drag_drop.padding) }}
}
{{ selector }} .breakdance-form-files-list-item {
background-color: {{ style.fields.advanced.file_input.drag_drop.files_list.background }};
{{ _self.borders(style.fields.advanced.file_input.drag_drop.files_list.borders) }}
{{ _self.spacing_padding_all(style.fields.advanced.file_input.drag_drop.files_list.padding) }}
}
{{ selector }} .breakdance-form-files-list-item__name,
{{ selector }} .breakdance-form-files-list-item__size {
{{ _self.typography(style.fields.advanced.file_input.drag_drop.files_list.typography, globalSettings) }}
}
{{ selector }} .breakdance-form-files-list-item__delete {
background-color: {{ style.fields.advanced.file_input.drag_drop.files_list.delete_color }};
}
{{ selector }} .breakdance-form-files-list-item__delete:hover {
background-color: {{ style.fields.advanced.file_input.drag_drop.files_list.delete_color_hover }};
}
{# Required #}
{{ selector }} .breakdance-form-field__required {
color: {{ style.fields.required.color }};
font-size: {{ style.fields.required.size.style }};
{% if style.fields.required.nudge %}
transform: translateX({{ style.fields.required.nudge.style }});
{% endif %}
}
{# Labels #}
{% if style.fields.advanced.hide_labels %}
{{ selector }} .breakdance-form-field__label,
{# Woo: Labels #}
{{ selector }}.breakdance-woocommerce .woocommerce-password-strength,
{{ selector }}.breakdance-woocommerce label span.optional,
{{ selector }}.breakdance-woocommerce label {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
{% endif %}
{# Form Footer #}
{% if style.submit_button.alignment %}
{{ selector }} .breakdance-form-footer {
justify-content: {{ style.submit_button.alignment }}
}
{% if style.submit_button.alignment == 'unset' %}
{{ selector }} .breakdance-form-footer .breakdance-form-button__submit,
{{ selector }} .breakdance-form-footer .breakdance-form-field--step-buttons {
width: 100%;
}
{% endif %}
{% endif %}
{# Stepper #}
{{ selector }} .breakdance-form-stepper {
justify-content: {{ style.other.stepper.alignment }};
{% if style.other.stepper.disable %}
display: none;
{% endif %}
}
{% if breakpoint == style.other.stepper.disable_at %}
{{ selector }} .breakdance-form-stepper {
display: none;
}
{% endif %}
{{ selector }} .breakdance-form-stepper__list {
max-width: {{ style.other.stepper.width.style }};
gap: {{ style.other.stepper.divider.space_between.style }};
}
{% if breakpoint == style.other.stepper.stack_vertically_at|default('breakdpoint_phone_portrait') %}
{{ selector }} .breakdance-form-stepper__list {
flex-direction: column;
align-items: {{ style.other.stepper.alignment }};
}
{% endif %}
{{ selector }} .breakdance-form-stepper__label {
{{ _self.typography(style.other.stepper.step.label, globalSettings) }}
}
{{ selector }} .breakdance-form-stepper__step {
gap: {{ style.other.stepper.step.bullet.space_after.style }};
}
{{ selector }} .breakdance-form-stepper__step-icon {
width: {{ style.other.stepper.step.bullet.size.style }};
height: {{ style.other.stepper.step.bullet.size.style }};
border-radius: {{ style.other.stepper.step.bullet.radius.style }};
background-color: {{ style.other.stepper.step.bullet.background }};
{% if style.other.stepper.step.bullet.style == 'number' %}
{{ _self.typography(style.other.stepper.step.bullet.typography, globalSettings) }}
{% endif %}
{% if style.other.stepper.step.bullet.style == 'icon' %}
font-size: {{ style.other.stepper.step.bullet.icon_size.style }};
{% endif %}
{% if style.other.stepper.step.bullet.disable %}
display: none;
{% endif %}
}
{{ selector }} .breakdance-form-stepper__step-icon span {
{{ _self.typography(style.other.stepper.step.bullet.number, globalSettings) }}
}
{{ selector }} .breakdance-form-stepper__step-icon svg {
font-size: {{ style.other.stepper.step.bullet.icon.size.style }};
color: {{ style.other.stepper.step.bullet.icon.color }};
}
{{ selector }} .breakdance-form-stepper__step.is-active .breakdance-form-stepper__label {
color: {{ style.other.stepper.step.active.label_color }};
}
{{ selector }} .breakdance-form-stepper__step.is-active .breakdance-form-stepper__step-icon {
background-color: {{ style.other.stepper.step.active.bullet_background }};
}
{{ selector }} .breakdance-form-stepper__step.is-active .breakdance-form-stepper__step-icon svg,
{{ selector }} .breakdance-form-stepper__step.is-active .breakdance-form-stepper__step-icon span {
color: {{ style.other.stepper.step.active.icon_color }};
}
{{ selector }} .breakdance-form-stepper__step.is-active .breakdance-form-stepper__label {
color: {{ style.other.stepper.step.active.text_color }};
}
{{ selector }} .breakdance-form-stepper__separator {
border-bottom-width: {{ style.other.stepper.divider.width.style }};
border-bottom-color: {{ style.other.stepper.divider.color }};
border-bottom-style: {{ style.other.stepper.divider.style }};
}
{# Buttons #}
{# NOTE: I have no fucking idea how Twig concats strings using the tilde operator #}
{# It does mutate strings in a very weird way - see below #}
{#
{% set buttonClass = selector ~ '.some-class' %} // returns '.selector .some-class'
{% set someOtherClass = selector ~ '.other-class' %} // returns '.selector .some-class .other-class'
WTF?
#}
{# This ugly hack puts selector inside an object. This makes the selector immutable. #}
{% set selectorObject = { 'value' : selector } %}
{{ _self.atomV1ButtonButton(style.submit_button.styles, selectorObject.value ~ ' .breakdance-form-button__submit', 'primary', breakpoint, globalSettings) }}
{{ _self.atomV1ButtonButton(style.other.stepper.next_button, selectorObject.value ~ ' .breakdance-form-button__next-step', 'primary', breakpoint, globalSettings) }}
{{ _self.atomV1ButtonButton(style.other.stepper.previous_button, selectorObject.value ~ ' .breakdance-form-button__previous-step', 'secondary', breakpoint, globalSettings) }}
{{ _self.atomV1ButtonButton(style.fields.advanced.file_input.button, selectorObject.value ~ ' .breakdance-form-file-upload__button', 'secondary', breakpoint, globalSettings) }}
{% endmacro %}
OHA YOOO - Tarih: 2026-08-03 23:11:29