drowl_paragraphs_bs-1.x-dev/modules/drowl_paragraphs_bs_type_image/drowl_paragraphs_bs_type_image.ui_styles.yml

# General practise to pass classes to other elements then the
# entity wrapper:
# - Add a prefix like "icon-combo__" and remove the prefix within
#   the according preprocess. Then add it to separate attributes
#   for this object.
# - Use a formatter class like "icon-combo--" and remove the prefix
#   within the according preprocess. Then add it to separate
#   attributes for this object.
# Furthermore, remove the class from the entities attributes in this
# cases (if the entity is !== the object).

# Styles to pass on the image instead the paragraphs wrapper, while
# "img-wrapper__" is our technical prefix, to drop this classes to the image-wrapper
# instead the paragraphs wrapper
img_borders_border:
  category: "Image Style"
  label: "Border"
  description: "Use it to add an element's borders. Choose from all borders or one at a time."
  links:
    - 'https://getbootstrap.com/docs/5.3/utilities/borders/#border'
  options:
    img-wrapper__border: "Additive All"
    img-wrapper__border-top: "Additive Top"
    img-wrapper__border-end: "Additive End"
    img-wrapper__border-bottom: "Additive Bottom"
    img-wrapper__border-start: "Additive Start"
  previewed_with:
    - p-2
    - bg-light

img_borders_border_color:
  category: "Image Style"
  label: "Border color"
  description: "Change the border color using utilities built on our theme colors."
  links:
    - 'https://getbootstrap.com/docs/5.3/utilities/borders/#color'
  options:
    img-wrapper__border-primary: "Primary"
    img-wrapper__border-primary-subtle: "Primary subtle"
    img-wrapper__border-secondary: "Secondary"
    img-wrapper__border-secondary-subtle: "Secondary subtle"
    img-wrapper__border-success: "Success"
    img-wrapper__border-success-subtle: "Success subtle"
    img-wrapper__border-danger: "Danger"
    img-wrapper__border-danger-subtle: "Danger subtle"
    img-wrapper__border-warning: "Warning"
    img-wrapper__border-warning-subtle: "Warning subtle"
    img-wrapper__border-info: "Info"
    img-wrapper__border-info-subtle: "Info subtle"
    img-wrapper__border-light: "Light"
    img-wrapper__border-light-subtle: "Light subtle"
    img-wrapper__border-dark: "Dark"
    img-wrapper__border-dark-subtle: "Dark subtle"
    img-wrapper__border-white: "White"
    img-wrapper__border-black: "Black"
  previewed_with:
    - border
    - p-2
    - bg-light

img_borders_border_opacity:
  category: "Image Style"
  label: "Border opacity"
  description: "This allows for real-time color changes without compilation and dynamic alpha transparency changes."
  links:
    - 'https://getbootstrap.com/docs/5.3/utilities/borders/#opacity'
  options:
    img-wrapper__border-opacity-100: "100%"
    img-wrapper__border-opacity-75: "75%"
    img-wrapper__border-opacity-50: "50%"
    img-wrapper__border-opacity-25: "25%"
    img-wrapper__border-opacity-10: "10%"
  previewed_with:
    - border
    - border-success
    - p-2

img_borders_border_width:
  category: "Image Style"
  label: "Border width"
  links:
    - 'https://getbootstrap.com/docs/5.3/utilities/borders/#width'
  options:
    img-wrapper__border-1: "1"
    img-wrapper__border-2: "2"
    img-wrapper__border-3: "3"
    img-wrapper__border-4: "4"
    img-wrapper__border-5: "5"
  previewed_with:
    - border
    - p-2
    - bg-light

img_borders_border_radius:
  category: "Image Style"
  label: "Border radius"
  description: "Add classes to an element to easily round its corners."
  links:
    - 'https://getbootstrap.com/docs/5.3/utilities/borders/#radius'
  options:
    img-wrapper__rounded: "Rounded"
    img-wrapper__rounded-top: "Rounded Top"
    img-wrapper__rounded-end: "Rounded End"
    img-wrapper__rounded-bottom: "Rounded Bottom"
    img-wrapper__rounded-start: "Rounded Start"
    img-wrapper__rounded-circle: "Rounded Circle"
    img-wrapper__rounded-pill: "Rounded Pill"
  previewed_with:
    - border
    - p-2
    - bg-light

img_borders_border_radius_width:
  category: "Image Style"
  label: "Border radius width"
  links:
    - 'https://getbootstrap.com/docs/5.3/utilities/borders/#radius'
  options:
    img-wrapper__rounded-0: "Rounded reset"
    img-wrapper__rounded-1: "Rounded size 1"
    img-wrapper__rounded-2: "Rounded size 2"
    img-wrapper__rounded-3: "Rounded size 3"
    img-wrapper__rounded-4: "Rounded size 4"
    img-wrapper__rounded-5: "Rounded size 5"
  previewed_with:
    - border
    - p-2
    - bg-light
# img_object_fit:
#   category: "Sizing"
#   label: "Image fit"
#   links:
#     - 'https://getbootstrap.com/docs/5.3/utilities/object-fit'
#   options:
#     img-wrapper__img-fit-contain: "Contain"
#     img-wrapper__img-fit-cover: "Cover"
#     img-wrapper__img-fit-fill: "Fill"
#     img-wrapper__img-fit-scale: "Scale"
#     img-wrapper__img-fit-none: "None"