npm - @baloise/ds-styles - Versions diffs - 0.0.5-nightly.20240301 - Mend

@baloise/ds-styles 0.0.5-nightly.20240301

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (117) hide show

package/LICENSE +201 -0
package/README.md +40 -0
package/bin/index.mjs +1333 -0
package/css/all.css +18468 -0
package/css/all.css.map +1 -0
package/css/all.min.css +1 -0
package/css/baloise-design-system.css +18468 -0
package/css/baloise-design-system.css.map +1 -0
package/css/baloise-design-system.min.css +1 -0
package/css/core.css +4423 -0
package/css/core.css.map +1 -0
package/css/core.min.css +1 -0
package/css/font.css +29 -0
package/css/font.css.map +1 -0
package/css/font.min.css +1 -0
package/css/mixins.css +2 -0
package/css/mixins.css.map +1 -0
package/css/mixins.min.css +0 -0
package/css/normalize.css +351 -0
package/css/normalize.css.map +1 -0
package/css/normalize.min.css +1 -0
package/css/structure.css +147 -0
package/css/structure.css.map +1 -0
package/css/structure.min.css +1 -0
package/css/themes/compact.css +30 -0
package/css/themes/compact.css.map +1 -0
package/css/themes/compact.min.css +1 -0
package/css/utilities/all.css +13112 -0
package/css/utilities/all.css.map +1 -0
package/css/utilities/all.min.css +1 -0
package/css/utilities/background.css +1460 -0
package/css/utilities/background.css.map +1 -0
package/css/utilities/background.min.css +1 -0
package/css/utilities/border.css +4697 -0
package/css/utilities/border.css.map +1 -0
package/css/utilities/border.min.css +1 -0
package/css/utilities/elevation.css +317 -0
package/css/utilities/elevation.css.map +1 -0
package/css/utilities/elevation.min.css +1 -0
package/css/utilities/flex.css +969 -0
package/css/utilities/flex.css.map +1 -0
package/css/utilities/flex.min.css +1 -0
package/css/utilities/grid.css +1209 -0
package/css/utilities/grid.css.map +1 -0
package/css/utilities/grid.min.css +1 -0
package/css/utilities/interaction.css +44 -0
package/css/utilities/interaction.css.map +1 -0
package/css/utilities/interaction.min.css +1 -0
package/css/utilities/layout.css +1055 -0
package/css/utilities/layout.css.map +1 -0
package/css/utilities/layout.min.css +1 -0
package/css/utilities/sizing.css +1931 -0
package/css/utilities/sizing.css.map +1 -0
package/css/utilities/sizing.min.css +1 -0
package/css/utilities/spacing.css +1881 -0
package/css/utilities/spacing.css.map +1 -0
package/css/utilities/spacing.min.css +1 -0
package/css/utilities/typography.css +763 -0
package/css/utilities/typography.css.map +1 -0
package/css/utilities/typography.min.css +1 -0
package/package.json +36 -0
package/sass/all.sass +6 -0
package/sass/baloise-design-system.sass +1 -0
package/sass/core.sass +37 -0
package/sass/font.sass +1 -0
package/sass/mixins.sass +3 -0
package/sass/normalize.sass +359 -0
package/sass/structure.sass +113 -0
package/sass/themes/compact.sass +28 -0
package/sass/utilities/all.sass +9 -0
package/sass/utilities/background.sass +5 -0
package/sass/utilities/border.sass +2 -0
package/sass/utilities/elevation.sass +2 -0
package/sass/utilities/flex.sass +2 -0
package/sass/utilities/grid.sass +2 -0
package/sass/utilities/interaction.sass +2 -0
package/sass/utilities/layout.sass +12 -0
package/sass/utilities/sizing.sass +2 -0
package/sass/utilities/spacing.sass +2 -0
package/sass/utilities/typography.sass +127 -0
package/src/core/_all.sass +18 -0
package/src/core/container.sass +23 -0
package/src/core/form/_all.sass +6 -0
package/src/core/form/button.sass +532 -0
package/src/core/form/file.sass +139 -0
package/src/core/form/input-textarea.sass +80 -0
package/src/core/form/select.sass +111 -0
package/src/core/form/shared.sass +69 -0
package/src/core/form/tools.sass +209 -0
package/src/core/grid.sass +477 -0
package/src/core/link.sass +64 -0
package/src/core/list.sass +85 -0
package/src/core/table.sass +134 -0
package/src/core/typography.sass +33 -0
package/src/core/vars/_all.sass +7 -0
package/src/core/vars/button.vars.sass +282 -0
package/src/core/vars/form.vars.sass +137 -0
package/src/core/vars/link.vars.sass +36 -0
package/src/core/vars/list.vars.sass +20 -0
package/src/core/vars/structure.vars.sass +47 -0
package/src/core/vars/table.vars.sass +55 -0
package/src/core/vars/typography.vars.sass +12 -0
package/src/generated/background.sass +1091 -0
package/src/generated/border.sass +3943 -0
package/src/generated/elevation.sass +283 -0
package/src/generated/flex.sass +831 -0
package/src/generated/interaction.sass +26 -0
package/src/generated/layout.sass +948 -0
package/src/generated/sizing.sass +1703 -0
package/src/generated/spacing.sass +1683 -0
package/src/generated/typography.sass +453 -0
package/src/mixins/_all.sass +7 -0
package/src/mixins/bem.mixin.sass +39 -0
package/src/mixins/breakpoint.mixin.sass +67 -0
package/src/mixins/extends.sass +32 -0
package/src/mixins/general.mixin.sass +95 -0
package/src/mixins/svg.mixin.sass +6 -0

package/src/generated/layout.sass ADDED Viewed

@@ -0,0 +1,948 @@
+.hidden
+  display: none !important
+.block
+  display: block !important
+.inline
+  display: inline !important
+.inline-block
+  display: inline-block !important
+.flex
+  display: flex !important
+.inline-flex
+  display: inline-flex !important
++mobile
+  .mobile\:hidden
+    display: none !important
+  .mobile\:block
+    display: block !important
+  .mobile\:inline
+    display: inline !important
+  .mobile\:inline-block
+    display: inline-block !important
+  .mobile\:flex
+    display: flex !important
+  .mobile\:inline-flex
+    display: inline-flex !important
++tablet
+  .tablet\:hidden
+    display: none !important
+  .tablet\:block
+    display: block !important
+  .tablet\:inline
+    display: inline !important
+  .tablet\:inline-block
+    display: inline-block !important
+  .tablet\:flex
+    display: flex !important
+  .tablet\:inline-flex
+    display: inline-flex !important
++tablet-only
+  .tablet-only\:hidden
+    display: none !important
+  .tablet-only\:block
+    display: block !important
+  .tablet-only\:inline
+    display: inline !important
+  .tablet-only\:inline-block
+    display: inline-block !important
+  .tablet-only\:flex
+    display: flex !important
+  .tablet-only\:inline-flex
+    display: inline-flex !important
++touch
+  .touch\:hidden
+    display: none !important
+  .touch\:block
+    display: block !important
+  .touch\:inline
+    display: inline !important
+  .touch\:inline-block
+    display: inline-block !important
+  .touch\:flex
+    display: flex !important
+  .touch\:inline-flex
+    display: inline-flex !important
++desktop
+  .desktop\:hidden
+    display: none !important
+  .desktop\:block
+    display: block !important
+  .desktop\:inline
+    display: inline !important
+  .desktop\:inline-block
+    display: inline-block !important
+  .desktop\:flex
+    display: flex !important
+  .desktop\:inline-flex
+    display: inline-flex !important
++desktop-only
+  .desktop-only\:hidden
+    display: none !important
+  .desktop-only\:block
+    display: block !important
+  .desktop-only\:inline
+    display: inline !important
+  .desktop-only\:inline-block
+    display: inline-block !important
+  .desktop-only\:flex
+    display: flex !important
+  .desktop-only\:inline-flex
+    display: inline-flex !important
++high-definition
+  .high-definition\:hidden
+    display: none !important
+  .high-definition\:block
+    display: block !important
+  .high-definition\:inline
+    display: inline !important
+  .high-definition\:inline-block
+    display: inline-block !important
+  .high-definition\:flex
+    display: flex !important
+  .high-definition\:inline-flex
+    display: inline-flex !important
++high-definition-only
+  .high-definition-only\:hidden
+    display: none !important
+  .high-definition-only\:block
+    display: block !important
+  .high-definition-only\:inline
+    display: inline !important
+  .high-definition-only\:inline-block
+    display: inline-block !important
+  .high-definition-only\:flex
+    display: flex !important
+  .high-definition-only\:inline-flex
+    display: inline-flex !important
++widescreen
+  .widescreen\:hidden
+    display: none !important
+  .widescreen\:block
+    display: block !important
+  .widescreen\:inline
+    display: inline !important
+  .widescreen\:inline-block
+    display: inline-block !important
+  .widescreen\:flex
+    display: flex !important
+  .widescreen\:inline-flex
+    display: inline-flex !important
++widescreen-only
+  .widescreen-only\:hidden
+    display: none !important
+  .widescreen-only\:block
+    display: block !important
+  .widescreen-only\:inline
+    display: inline !important
+  .widescreen-only\:inline-block
+    display: inline-block !important
+  .widescreen-only\:flex
+    display: flex !important
+  .widescreen-only\:inline-flex
+    display: inline-flex !important
++fullhd
+  .fullhd\:hidden
+    display: none !important
+  .fullhd\:block
+    display: block !important
+  .fullhd\:inline
+    display: inline !important
+  .fullhd\:inline-block
+    display: inline-block !important
+  .fullhd\:flex
+    display: flex !important
+  .fullhd\:inline-flex
+    display: inline-flex !important
+.overflow-auto
+  overflow: auto !important
+.overflow-hidden
+  overflow: hidden !important
+.overflow-visible
+  overflow: visible !important
+.overflow-scroll
+  overflow: scroll !important
+.overflow-x-auto
+  overflow: auto !important
+.overflow-x-hidden
+  overflow: hidden !important
+.overflow-x-visible
+  overflow: visible !important
+.overflow-x-scroll
+  overflow: scroll !important
+.overflow-y-auto
+  overflow: auto !important
+.overflow-y-hidden
+  overflow: hidden !important
+.overflow-y-visible
+  overflow: visible !important
+.overflow-y-scroll
+  overflow: scroll !important
++mobile
+  .mobile\:overflow-auto
+    overflow: auto !important
+  .mobile\:overflow-hidden
+    overflow: hidden !important
+  .mobile\:overflow-visible
+    overflow: visible !important
+  .mobile\:overflow-scroll
+    overflow: scroll !important
+  .mobile\:overflow-x-auto
+    overflow: auto !important
+  .mobile\:overflow-x-hidden
+    overflow: hidden !important
+  .mobile\:overflow-x-visible
+    overflow: visible !important
+  .mobile\:overflow-x-scroll
+    overflow: scroll !important
+  .mobile\:overflow-y-auto
+    overflow: auto !important
+  .mobile\:overflow-y-hidden
+    overflow: hidden !important
+  .mobile\:overflow-y-visible
+    overflow: visible !important
+  .mobile\:overflow-y-scroll
+    overflow: scroll !important
++tablet
+  .tablet\:overflow-auto
+    overflow: auto !important
+  .tablet\:overflow-hidden
+    overflow: hidden !important
+  .tablet\:overflow-visible
+    overflow: visible !important
+  .tablet\:overflow-scroll
+    overflow: scroll !important
+  .tablet\:overflow-x-auto
+    overflow: auto !important
+  .tablet\:overflow-x-hidden
+    overflow: hidden !important
+  .tablet\:overflow-x-visible
+    overflow: visible !important
+  .tablet\:overflow-x-scroll
+    overflow: scroll !important
+  .tablet\:overflow-y-auto
+    overflow: auto !important
+  .tablet\:overflow-y-hidden
+    overflow: hidden !important
+  .tablet\:overflow-y-visible
+    overflow: visible !important
+  .tablet\:overflow-y-scroll
+    overflow: scroll !important
++desktop
+  .desktop\:overflow-auto
+    overflow: auto !important
+  .desktop\:overflow-hidden
+    overflow: hidden !important
+  .desktop\:overflow-visible
+    overflow: visible !important
+  .desktop\:overflow-scroll
+    overflow: scroll !important
+  .desktop\:overflow-x-auto
+    overflow: auto !important
+  .desktop\:overflow-x-hidden
+    overflow: hidden !important
+  .desktop\:overflow-x-visible
+    overflow: visible !important
+  .desktop\:overflow-x-scroll
+    overflow: scroll !important
+  .desktop\:overflow-y-auto
+    overflow: auto !important
+  .desktop\:overflow-y-hidden
+    overflow: hidden !important
+  .desktop\:overflow-y-visible
+    overflow: visible !important
+  .desktop\:overflow-y-scroll
+    overflow: scroll !important
++widescreen
+  .widescreen\:overflow-auto
+    overflow: auto !important
+  .widescreen\:overflow-hidden
+    overflow: hidden !important
+  .widescreen\:overflow-visible
+    overflow: visible !important
+  .widescreen\:overflow-scroll
+    overflow: scroll !important
+  .widescreen\:overflow-x-auto
+    overflow: auto !important
+  .widescreen\:overflow-x-hidden
+    overflow: hidden !important
+  .widescreen\:overflow-x-visible
+    overflow: visible !important
+  .widescreen\:overflow-x-scroll
+    overflow: scroll !important
+  .widescreen\:overflow-y-auto
+    overflow: auto !important
+  .widescreen\:overflow-y-hidden
+    overflow: hidden !important
+  .widescreen\:overflow-y-visible
+    overflow: visible !important
+  .widescreen\:overflow-y-scroll
+    overflow: scroll !important
+.static
+  position: static !important
+.fixed
+  position: fixed !important
+.relative
+  position: relative !important
+.absolute
+  position: absolute !important
+.sticky
+  position: sticky !important
++mobile
+  .mobile\:static
+    position: static !important
+  .mobile\:fixed
+    position: fixed !important
+  .mobile\:relative
+    position: relative !important
+  .mobile\:absolute
+    position: absolute !important
+  .mobile\:sticky
+    position: sticky !important
++tablet
+  .tablet\:static
+    position: static !important
+  .tablet\:fixed
+    position: fixed !important
+  .tablet\:relative
+    position: relative !important
+  .tablet\:absolute
+    position: absolute !important
+  .tablet\:sticky
+    position: sticky !important
++desktop
+  .desktop\:static
+    position: static !important
+  .desktop\:fixed
+    position: fixed !important
+  .desktop\:relative
+    position: relative !important
+  .desktop\:absolute
+    position: absolute !important
+  .desktop\:sticky
+    position: sticky !important
++widescreen
+  .widescreen\:static
+    position: static !important
+  .widescreen\:fixed
+    position: fixed !important
+  .widescreen\:relative
+    position: relative !important
+  .widescreen\:absolute
+    position: absolute !important
+  .widescreen\:sticky
+    position: sticky !important
+.top-auto
+  top: auto !important
+.top-0
+  top: 0 !important
+.top-50
+  top: 50% !important
+.top-100
+  top: 100% !important
++mobile
+  .mobile\:top-auto
+    top: auto !important
+  .mobile\:top-0
+    top: 0 !important
+  .mobile\:top-50
+    top: 50% !important
+  .mobile\:top-100
+    top: 100% !important
++tablet
+  .tablet\:top-auto
+    top: auto !important
+  .tablet\:top-0
+    top: 0 !important
+  .tablet\:top-50
+    top: 50% !important
+  .tablet\:top-100
+    top: 100% !important
++desktop
+  .desktop\:top-auto
+    top: auto !important
+  .desktop\:top-0
+    top: 0 !important
+  .desktop\:top-50
+    top: 50% !important
+  .desktop\:top-100
+    top: 100% !important
++widescreen
+  .widescreen\:top-auto
+    top: auto !important
+  .widescreen\:top-0
+    top: 0 !important
+  .widescreen\:top-50
+    top: 50% !important
+  .widescreen\:top-100
+    top: 100% !important
+.right-auto
+  right: auto !important
+.right-0
+  right: 0 !important
+.right-50
+  right: 50% !important
+.right-100
+  right: 100% !important
++mobile
+  .mobile\:right-auto
+    right: auto !important
+  .mobile\:right-0
+    right: 0 !important
+  .mobile\:right-50
+    right: 50% !important
+  .mobile\:right-100
+    right: 100% !important
++tablet
+  .tablet\:right-auto
+    right: auto !important
+  .tablet\:right-0
+    right: 0 !important
+  .tablet\:right-50
+    right: 50% !important
+  .tablet\:right-100
+    right: 100% !important
++desktop
+  .desktop\:right-auto
+    right: auto !important
+  .desktop\:right-0
+    right: 0 !important
+  .desktop\:right-50
+    right: 50% !important
+  .desktop\:right-100
+    right: 100% !important
++widescreen
+  .widescreen\:right-auto
+    right: auto !important
+  .widescreen\:right-0
+    right: 0 !important
+  .widescreen\:right-50
+    right: 50% !important
+  .widescreen\:right-100
+    right: 100% !important
+.bottom-auto
+  bottom: auto !important
+.bottom-0
+  bottom: 0 !important
+.bottom-50
+  bottom: 50% !important
+.bottom-100
+  bottom: 100% !important
++mobile
+  .mobile\:bottom-auto
+    bottom: auto !important
+  .mobile\:bottom-0
+    bottom: 0 !important
+  .mobile\:bottom-50
+    bottom: 50% !important
+  .mobile\:bottom-100
+    bottom: 100% !important
++tablet
+  .tablet\:bottom-auto
+    bottom: auto !important
+  .tablet\:bottom-0
+    bottom: 0 !important
+  .tablet\:bottom-50
+    bottom: 50% !important
+  .tablet\:bottom-100
+    bottom: 100% !important
++desktop
+  .desktop\:bottom-auto
+    bottom: auto !important
+  .desktop\:bottom-0
+    bottom: 0 !important
+  .desktop\:bottom-50
+    bottom: 50% !important
+  .desktop\:bottom-100
+    bottom: 100% !important
++widescreen
+  .widescreen\:bottom-auto
+    bottom: auto !important
+  .widescreen\:bottom-0
+    bottom: 0 !important
+  .widescreen\:bottom-50
+    bottom: 50% !important
+  .widescreen\:bottom-100
+    bottom: 100% !important
+.left-auto
+  left: auto !important
+.left-0
+  left: 0 !important
+.left-50
+  left: 50% !important
+.left-100
+  left: 100% !important
++mobile
+  .mobile\:left-auto
+    left: auto !important
+  .mobile\:left-0
+    left: 0 !important
+  .mobile\:left-50
+    left: 50% !important
+  .mobile\:left-100
+    left: 100% !important
++tablet
+  .tablet\:left-auto
+    left: auto !important
+  .tablet\:left-0
+    left: 0 !important
+  .tablet\:left-50
+    left: 50% !important
+  .tablet\:left-100
+    left: 100% !important
++desktop
+  .desktop\:left-auto
+    left: auto !important
+  .desktop\:left-0
+    left: 0 !important
+  .desktop\:left-50
+    left: 50% !important
+  .desktop\:left-100
+    left: 100% !important
++widescreen
+  .widescreen\:left-auto
+    left: auto !important
+  .widescreen\:left-0
+    left: 0 !important
+  .widescreen\:left-50
+    left: 50% !important
+  .widescreen\:left-100
+    left: 100% !important
+.z-index-deep
+  z-index: var(--bal-z-index-deep) !important
+.z-index
+  z-index: var(--bal-z-index) !important
+.z-index-masked
+  z-index: var(--bal-z-index-masked) !important
+.z-index-mask
+  z-index: var(--bal-z-index-mask) !important
+.z-index-sticky
+  z-index: var(--bal-z-index-sticky) !important
+.z-index-navigation
+  z-index: var(--bal-z-index-navigation) !important
+.z-index-popup
+  z-index: var(--bal-z-index-popup) !important
+.z-index-modal
+  z-index: var(--bal-z-index-modal) !important
+.z-index-toast
+  z-index: var(--bal-z-index-toast) !important
+.z-index-tooltip
+  z-index: var(--bal-z-index-tooltip) !important
++mobile
+  .mobile\:z-index-deep
+    z-index: var(--bal-z-index-deep) !important
+  .mobile\:z-index
+    z-index: var(--bal-z-index) !important
+  .mobile\:z-index-masked
+    z-index: var(--bal-z-index-masked) !important
+  .mobile\:z-index-mask
+    z-index: var(--bal-z-index-mask) !important
+  .mobile\:z-index-sticky
+    z-index: var(--bal-z-index-sticky) !important
+  .mobile\:z-index-navigation
+    z-index: var(--bal-z-index-navigation) !important
+  .mobile\:z-index-popup
+    z-index: var(--bal-z-index-popup) !important
+  .mobile\:z-index-modal
+    z-index: var(--bal-z-index-modal) !important
+  .mobile\:z-index-toast
+    z-index: var(--bal-z-index-toast) !important
+  .mobile\:z-index-tooltip
+    z-index: var(--bal-z-index-tooltip) !important
++tablet
+  .tablet\:z-index-deep
+    z-index: var(--bal-z-index-deep) !important
+  .tablet\:z-index
+    z-index: var(--bal-z-index) !important
+  .tablet\:z-index-masked
+    z-index: var(--bal-z-index-masked) !important
+  .tablet\:z-index-mask
+    z-index: var(--bal-z-index-mask) !important
+  .tablet\:z-index-sticky
+    z-index: var(--bal-z-index-sticky) !important
+  .tablet\:z-index-navigation
+    z-index: var(--bal-z-index-navigation) !important
+  .tablet\:z-index-popup
+    z-index: var(--bal-z-index-popup) !important
+  .tablet\:z-index-modal
+    z-index: var(--bal-z-index-modal) !important
+  .tablet\:z-index-toast
+    z-index: var(--bal-z-index-toast) !important
+  .tablet\:z-index-tooltip
+    z-index: var(--bal-z-index-tooltip) !important
++desktop
+  .desktop\:z-index-deep
+    z-index: var(--bal-z-index-deep) !important
+  .desktop\:z-index
+    z-index: var(--bal-z-index) !important
+  .desktop\:z-index-masked
+    z-index: var(--bal-z-index-masked) !important
+  .desktop\:z-index-mask
+    z-index: var(--bal-z-index-mask) !important
+  .desktop\:z-index-sticky
+    z-index: var(--bal-z-index-sticky) !important
+  .desktop\:z-index-navigation
+    z-index: var(--bal-z-index-navigation) !important
+  .desktop\:z-index-popup
+    z-index: var(--bal-z-index-popup) !important
+  .desktop\:z-index-modal
+    z-index: var(--bal-z-index-modal) !important
+  .desktop\:z-index-toast
+    z-index: var(--bal-z-index-toast) !important
+  .desktop\:z-index-tooltip
+    z-index: var(--bal-z-index-tooltip) !important
++widescreen
+  .widescreen\:z-index-deep
+    z-index: var(--bal-z-index-deep) !important
+  .widescreen\:z-index
+    z-index: var(--bal-z-index) !important
+  .widescreen\:z-index-masked
+    z-index: var(--bal-z-index-masked) !important
+  .widescreen\:z-index-mask
+    z-index: var(--bal-z-index-mask) !important
+  .widescreen\:z-index-sticky
+    z-index: var(--bal-z-index-sticky) !important
+  .widescreen\:z-index-navigation
+    z-index: var(--bal-z-index-navigation) !important
+  .widescreen\:z-index-popup
+    z-index: var(--bal-z-index-popup) !important
+  .widescreen\:z-index-modal
+    z-index: var(--bal-z-index-modal) !important
+  .widescreen\:z-index-toast
+    z-index: var(--bal-z-index-toast) !important
+  .widescreen\:z-index-tooltip
+    z-index: var(--bal-z-index-tooltip) !important
+.vertical-align-top
+  vertical-align: top !important
+.vertical-align-middle
+  vertical-align: middle !important
+.vertical-align-bottom
+  vertical-align: bottom !important
++mobile
+  .mobile\:vertical-align-top
+    vertical-align: top !important
+  .mobile\:vertical-align-middle
+    vertical-align: middle !important
+  .mobile\:vertical-align-bottom
+    vertical-align: bottom !important
++tablet
+  .tablet\:vertical-align-top
+    vertical-align: top !important
+  .tablet\:vertical-align-middle
+    vertical-align: middle !important
+  .tablet\:vertical-align-bottom
+    vertical-align: bottom !important
++desktop
+  .desktop\:vertical-align-top
+    vertical-align: top !important
+  .desktop\:vertical-align-middle
+    vertical-align: middle !important
+  .desktop\:vertical-align-bottom
+    vertical-align: bottom !important
++widescreen
+  .widescreen\:vertical-align-top
+    vertical-align: top !important
+  .widescreen\:vertical-align-middle
+    vertical-align: middle !important
+  .widescreen\:vertical-align-bottom
+    vertical-align: bottom !important