quasar 1.16.2 → 1.17.2

package/dist/quasar.styl

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v1.16.2
+ * Quasar Framework v1.17.2
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */
@@ -50,16 +50,14 @@ $sizes ?= {
   lg: $breakpoint-md + 1, 
   xl: $breakpoint-lg + 1  
 }
-$breakpoint-xs-min ?= 0
-$breakpoint-xs-max ?= $breakpoint-xs
+$breakpoint-xs-max ?= ($sizes.sm - 0.02)
 $breakpoint-sm-min ?= $sizes.sm
-$breakpoint-sm-max ?= $breakpoint-sm
+$breakpoint-sm-max ?= ($sizes.md - 0.02)
 $breakpoint-md-min ?= $sizes.md
-$breakpoint-md-max ?= $breakpoint-md
+$breakpoint-md-max ?= ($sizes.lg - 0.02)
 $breakpoint-lg-min ?= $sizes.lg
-$breakpoint-lg-max ?= $breakpoint-lg
+$breakpoint-lg-max ?= ($sizes.xl - 0.02)
 $breakpoint-xl-min ?= $sizes.xl
-$breakpoint-xl-max ?= 9999px
 $headings ?= {
   h1: {
     size: 6rem,
@@ -871,8 +869,6 @@ input[type='search']::-webkit-search-decoration
     font-size: 125%
     &--with-label
       margin-right: 8px
-  &--last a
-    pointer-events: none
 [dir=rtl] .q-breadcrumbs__separator .q-icon
   transform: scaleX(-1) /* rtl:ignore */
 .q-btn
@@ -1009,6 +1005,8 @@ input[type='search']::-webkit-search-decoration
       background: currentColor
 .q-btn-dropdown
   &--split .q-btn-dropdown__arrow-container
+    &.q-btn--outline
+      border-left: 1px solid currentColor
     &:not(.q-btn--outline)
       border-left: 1px solid rgba(255,255,255,.3)
     .q-btn__wrapper
@@ -1551,7 +1549,10 @@ body.desktop .q-chip--clickable:focus
   &--bordered
     border: 1px solid $separator-color
   &__header
-    height: 68px
+    &-tabs
+      height: 32px
+    &-banner
+      height: 36px
     input
       line-height: 24px
       border: 0
@@ -1610,40 +1611,30 @@ body.desktop .q-chip--clickable:focus
     box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4)
     border-radius: 50%
     transform: translate(-5px, -5px)
-  &__hue .q-slider__track-container
+  &__hue .q-slider__track
     background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%) !important 
     opacity: 1
-  &__alpha .q-slider__track-container
-    color: #fff
-    opacity: 1
-    height: 8px
-    background-color: #fff !important
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg==') !important
-    &:after
+  &__alpha
+    .q-slider__track-container
+      padding-top: 0
+    .q-slider__track:before
       content: ''
       position: absolute
       top: 0
       right: 0
       bottom: 0
       left: 0
+      border-radius: inherit
       background: linear-gradient(90deg, rgba(255,255,255,0), $grey-7)
   &__sliders
-    padding: 4px 16px 16px
-    .q-slider__track-container
-      height: 10px
-      margin-top: -5px
-    .q-slider__track
-      display: none
+    padding: 0 16px
     .q-slider__thumb
+      color: $grey-9
       path
         stroke-width: 2px
         fill: transparent
     .q-slider--active path
       stroke-width: 3px
-    .q-slider
-      height: 16px
-      margin-top: 8px
-      color: $grey-9
   
   &__tune-tab
     .q-slider
@@ -1683,7 +1674,7 @@ body.desktop .q-chip--clickable:focus
     .q-color-picker__tune-tab input
       border: 1px solid alpha(#fff, .3)
     .q-slider
-      color: $grey-5
+      color: $grey-1
 .q-date
   display: inline-flex
   box-shadow: $shadow-2
@@ -1767,6 +1758,8 @@ body.desktop .q-chip--clickable:focus
     > div
       line-height: 30px
       text-align: center
+    > button
+      line-height: 22px
     &--out
       opacity: .18
     &--fill
@@ -2014,9 +2007,15 @@ body.q-ios-padding .q-dialog__inner
   background-color: #fff
   &.disabled
     border-style: dashed
-  > div:first-child, &__toolbars-container, &__toolbars-container > div:first-child
+  &.fullscreen
+    max-height: 100%
+  > div:first-child,
+  &__toolbars-container,
+  &__toolbars-container > div:first-child
     border-top-left-radius: inherit
     border-top-right-radius: inherit
+  &__toolbars-container
+    max-width: 100%
   &__content
     outline: 0
     padding: $editor-content-padding
@@ -2024,6 +2023,7 @@ body.q-ios-padding .q-dialog__inner
     border-bottom-left-radius: inherit
     border-bottom-right-radius: inherit
     overflow: auto
+    max-width: 100%
     pre
       white-space: pre-wrap
     hr
@@ -2690,14 +2690,15 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
 .q-file
   .q-field__native
     word-break: break-all
-    overflow: hidden
   .q-field__input
     opacity: 0 !important
     &::-webkit-file-upload-button
       cursor: pointer
   &__filler
-    opacity: 0
-    pointer-events: none
+    visibility: hidden
+    width: 100%
+    border: none
+    padding: 0
   &__dnd
     outline: 1px dashed currentColor
     outline-offset: -4px
@@ -2736,6 +2737,8 @@ $field-transition-label-right-up = .324s cubic-bezier(.4,0,.2,1)
   background: $light-dimmed-background
   &--dark
     background: $dimmed-background
+  &__label
+    margin-top: 8px
 .q-textarea
   .q-field__control
     min-height: 56px
@@ -3252,6 +3255,11 @@ body.desktop
 .q-rating
   color: $rating-grade-color
   vertical-align: middle
+  &__icon-container
+    height: 1em
+    outline: 0
+    & + &
+      margin-left: 2px
   &__icon
     color: currentColor
     text-shadow: $rating-shadow
@@ -3264,14 +3272,10 @@ body.desktop
       opacity: 1
     &--exselected
       opacity: .7
-    & + &
-      margin-left: 2px
   &--no-dimming .q-rating__icon
     opacity: 1
-  &--editable .q-icon
+  &--editable .q-rating__icon-container
     cursor: pointer
-  &--non-editable span, .q-icon
-    outline: 0
 .q-responsive
   position: relative
   max-width: 100%
@@ -3290,6 +3294,7 @@ body.desktop
       max-width: 100% !important
 .q-scrollarea
   position: relative
+  contain: strict
   &__bar,
   &__thumb
     opacity: .2
@@ -3311,6 +3316,9 @@ body.desktop
       opacity: .3
     &:active
       opacity: .5
+  &__content
+    min-height: 100%
+    min-width: 100%
   &--dark .q-scrollarea__thumb
     background: #fff
 .q-select
@@ -3540,196 +3548,251 @@ body.platform-ios
     cursor: pointer
 .q-slider
   position: relative
-  color: $primary
-  color: var(--q-color-primary)
-  outline: 0
   &--h
     width: 100%
-    height: 40px
   &--v
-    width: 40px
     height: 200px
+  &--editable .q-slider__track-container
+    cursor: grab
   &__track-container
-    background: rgba(0,0,0,.26)
+    outline: 0
     &--h
-      top: 50%
-      margin-top: -1px
       width: 100%
-      height: 2px
+      padding: 12px 0
+      .q-slider__selection
+        will-change: width, left
     &--v
-      left: 50%
-      margin-left: -1px
       height: 100%
-      width: 2px
+      padding: 0 12px
+      .q-slider__selection
+        will-change: height, top
   &__track
+    color: $primary
+    color: var(--q-color-primary)
+    background: rgba(0,0,0,.1)
+    border-radius: $generic-border-radius
+    width: inherit
+    height: inherit
+  &__inner
+    background: rgba(0,0,0,.1)
+    border-radius: inherit
+    width: 100%
+    height: 100%
+  &__selection
     background: currentColor
-    &--h
-      will-change: width, left
-      top: 0
-      bottom: 0
-    &--v
-      will-change: height, top
-      left: 0
-      right: 0
-  &__track-markers
-    color: #000
-    &--h
-      background-image: repeating-linear-gradient(to right, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
-    &--v
-      background-image: repeating-linear-gradient(to top, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+    border-radius: inherit
+    width: 100%
+    height: 100%
+  &__markers
+    color: rgba(0,0,0,.3)
+    border-radius: inherit
+    width: 100%
+    height: 100%
     &:after
       content: ''
       position: absolute
-      right: 0
-      top: 0
-      bottom: 0
-      height: 2px
-      width: 2px
       background: currentColor
-  &__thumb-container
-    width: 20px
-    height: 20px
+    &--h
+      background-image: repeating-linear-gradient(to right, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+      &:after
+        height: 100%
+        width: 2px
+        top: 0
+        right: 0
+    &--v
+      background-image: repeating-linear-gradient(to bottom, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
+      &:after
+        width: 100%
+        height: 2px
+        left: 0
+        bottom: 0
+  &__marker-labels-container
+    position: relative
+    width: 100%
+    height: 100%
+    min-height: 24px
+    min-width: 24px
+  &__marker-labels
+    position: absolute
+    &--h
+      &-standard
+        top: 0
+      &-switched
+        bottom: 0
+      &-ltr
+        transform: translateX(-50%) /* rtl:ignore */
+      &-rtl
+        transform: translateX(50%) /* rtl:ignore */
+    &--v
+      &-standard
+        left: 4px
+      &-switched
+        right: 4px
+      &-ltr
+        transform: translateY(-50%) /* rtl:ignore */
+      &-rtl
+        transform: translateY(50%) /* rtl:ignore */
+  &__thumb
+    z-index: 1
     outline: 0
+    color: $primary
+    color: var(--q-color-primary)
+    transition: transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
+    &.q-slider--focus
+      opacity: 1 !important
     &--h
       top: 50%
-      margin-top: -10px
-      transform: translateX(-10px) /* rtl:ignore */
       will-change: left
+      &-ltr
+        transform: scale(1) translate(-50%,-50%) /* rtl:ignore */
+      &-rtl
+        transform: scale(1) translate(50%,-50%) /* rtl:ignore */
     &--v
-      left: 50%
-      margin-left: -10px
-      transform: translateY(-10px)
+      left: 50% /* rtl:ignore */
       will-change: top
-  &__thumb
+      &-ltr
+        transform: scale(1) translate(-50%,-50%) /* rtl:ignore */
+      &-rtl
+        transform: scale(1) translate(-50%,50%) /* rtl:ignore */
+  &__thumb-shape
     top: 0
     left: 0
-    transform: scale(1)
-    transition: transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
     stroke-width: 3.5
     stroke: currentColor
+    transition: transform .28s
     path
       stroke: currentColor
       fill: currentColor
   &__focus-ring
-    width: 20px
-    height: 20px
-    transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out
     border-radius: 50%
     opacity: 0
+    transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out
     transition-delay: .14s
-  &__arrow
-    position: absolute
-    width: 0
-    height: 0
-    transform-origin: 50% 50%
-    transition: transform 100ms ease-out
+  &__pin
+    opacity: 0
+    white-space: nowrap
+    transition: opacity .28s ease-out
+    transition-delay: .14s
+    &:before
+      content: ''
+      width: 0
+      height: 0
+      position: absolute
     &--h
-      top: 19px
-      left: 4px
-      border-top: 6px solid currentColor
-      border-left: 6px solid transparent
-      border-right: 6px solid transparent
-      transform: scale(0) translateY(0)
+      &:before
+        border-left: 6px solid transparent
+        border-right: 6px solid transparent
+        left: 50%
+        transform: translateX(-50%)
+      &-standard
+        bottom: 100%
+        &:before
+          bottom: 2px
+          border-top: 6px solid currentColor
+      &-switched
+        top: 100%
+        &:before
+          top: 2px
+          border-bottom: 6px solid currentColor
     &--v
-      top: 4px
-      left: 15px
-      border-top: 6px solid transparent
-      border-bottom: 6px solid transparent
-      border-right: 6px solid currentColor
-      transform: scale(0) translateX(-20px)
-  &__pin
-    transition: transform 100ms ease-out
+      top: 0
+      &:before
+        top: 50%
+        transform: translateY(-50%)
+        border-top: 6px solid transparent
+        border-bottom: 6px solid transparent
+      &-standard
+        left: 100%
+        &:before
+          left: 2px
+          border-right: 6px solid currentColor
+      &-switched
+        right: 100%
+        &:before
+          right: 2px
+          border-left: 6px solid currentColor
+  &__label
     z-index: 1
     white-space: nowrap
+    position: absolute
     &--h
-      bottom: 0
-      right: 0
-      transform: scale(0) translateY(0)
-      will-change: left
+      left: 50%
+      transform: translateX(-50%)
+      &-standard
+        bottom: 7px
+      &-switched
+        top: 7px
     &--v
       top: 50%
-      left: 20px
-      height: 0
-      transform: scale(0) translateX(-20px)
-      will-change: top
-      transform-origin: left center
-    &-text-container
-      min-height: 25px
-      padding: 2px 8px
-      border-radius: $generic-border-radius
-      background: currentColor
-      position: relative
-      text-align: center
-      &--h
-        right: -50%
-      &--v
-        transform: translateY(-50%)
-    &-text
-      color: #fff
-      font-size: 12px
-  &--editable
-    cursor: grab
+      transform: translateY(-50%)
+      &-standard
+        left: 7px
+      &-switched
+        right: 7px
+  &__text-container
+    min-height: 25px
+    padding: 2px 8px
+    border-radius: $generic-border-radius
+    background: currentColor
+    position: relative
+    text-align: center
+  &__text
+    color: #fff
+    font-size: 12px
   &--no-value
-    .q-slider__thumb, .q-slider__track
-      visibility: hidden
-  &--focus
-    .q-slider__thumb
-      transform: scale(1)
-  &--focus, body.desktop &.q-slider--editable:hover
+    .q-slider__thumb,
+    .q-slider__inner,
+    .q-slider__selection
+      opacity: 0
+  &--focus,
+  body.desktop &.q-slider--editable .q-slider__track-container:hover
     .q-slider__focus-ring
       background: currentColor
       transform: scale3d(1.55, 1.55, 1)
       opacity: .25
-    .q-slider__thumb, .q-slider__track
-      visibility: visible
+    .q-slider__thumb,
+    .q-slider__inner,
+    .q-slider__selection
+      opacity: 1
   &--inactive
-    .q-slider__thumb-container
+    .q-slider__thumb
       &--h
         transition: left .28s, right .28s
       &--v
         transition: top .28s, bottom .28s
-    .q-slider__track
-      &--h
-        transition: width .28s, left .28s, right .28s
-      &--v
-        transition: height .28s, top .28s, bottom .28s
+    .q-slider__selection
+      transition: width .28s, left .28s, right .28s, height .28s, top .28s, bottom .28s
+    .q-slider__text-container
+      transition: transform .28s
   &--active
     cursor: grabbing
-    .q-slider__thumb
+    .q-slider__thumb-shape
       transform: scale(1.5)
-    .q-slider__focus-ring, &.q-slider--label .q-slider__thumb
+    .q-slider__focus-ring,
+    &.q-slider--label .q-slider__thumb-shape
       transform: scale(0) !important
-  body.desktop &.q-slider--enabled:hover
-    .q-slider__pin,
-    .q-slider__arrow
-      &--h
-        transform: scale(1) translateY(-25px)
-      &--v
-        transform: scale(1) translateX(5px)
+  body.desktop &.q-slider--enabled .q-slider__track-container:hover
+    .q-slider__pin
+      opacity: 1
   &--label
-    &.q-slider--active, .q-slider--focus, &.q-slider--label-always
-      .q-slider__pin,
-      .q-slider__arrow
-        &--h
-          transform: scale(1) translateY(-25px)
-        &--v
-          transform: scale(1) translateX(5px)
+    &.q-slider--active,
+    .q-slider--focus,
+    &.q-slider--label-always
+      .q-slider__pin
+        opacity: 1
   &--dark
+    .q-slider__track
+      background: rgba(#fff,.1)
+    .q-slider__inner
+      background: rgba(#fff,.1)
+    .q-slider__markers
+      color: rgba(#fff,.3)
+  &--dense
     .q-slider__track-container
-      background: rgba(#fff, .3)
-    .q-slider__track-markers
-      color: #fff
-  &--reversed
-    .q-slider__thumb-container
       &--h
-        transform: translateX(10px) /* rtl:ignore */
+        padding: 6px 0
       &--v
-        transform: translateY(10px)
-  &--dense
-    &--h
-      height: 20px
-    &--v
-      width: 20px
+        padding: 0 6px
 .q-space
   flex-grow: 1 !important
 .q-spinner
@@ -3889,6 +3952,30 @@ body.platform-ios
         text-align: center
         &:before, &:after
           display: none
+    &--contracted
+      min-height: 72px
+      &.q-stepper__header--alternative-labels
+        .q-stepper__tab
+          min-height: 72px
+          &:first-child
+            align-items: flex-start
+          &:last-child
+            align-items: flex-end
+      .q-stepper__tab
+        padding: 24px 0
+        &:first-child
+          .q-stepper__dot
+            transform: translateX(24px)
+        &:last-child
+          .q-stepper__dot
+            transform: translateX(-24px)
+        &:not(:last-child)
+          .q-stepper__dot:after
+            display: block !important
+      .q-stepper__dot
+        margin: 0
+      .q-stepper__label
+        display: none
   &__nav
     padding-top: 24px
   &--bordered
@@ -3974,31 +4061,6 @@ body.platform-ios
           background: $separator-dark-color
         .q-stepper__label
           color: rgba(255,255,255,.54)
-  &--contracted
-    .q-stepper__header
-      min-height: 72px
-      &--alternative-labels
-        .q-stepper__tab
-          min-height: 72px
-          &:first-child
-            align-items: flex-start
-          &:last-child
-            align-items: flex-end
-      .q-stepper__tab
-        padding: 24px 0
-        &:first-child
-          .q-stepper__dot
-            transform: translateX(24px)
-        &:last-child
-          .q-stepper__dot
-            transform: translateX(-24px)
-    .q-stepper__tab:not(:last-child)
-      .q-stepper__dot:after
-        display: block !important
-    .q-stepper__dot
-      margin: 0
-    .q-stepper__label
-      display: none
 .q-tab-panels
   background: #fff
 .q-tab-panel
@@ -4045,6 +4107,8 @@ body.platform-ios
       flex: 0 0 auto
   &__container
     position: relative
+    &.fullscreen
+      max-height: 100%
     > div:first-child
       border-top-left-radius: inherit
       border-top-right-radius: inherit
@@ -4317,13 +4381,13 @@ body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no
     display: none
   &--horizontal .q-tabs__arrow
     height: 100%
-    &--left
+    &--start
       top: 0
-      left: 0 /* rtl:ignore */
+      left: 0
       bottom: 0
-    &--right
+    &--end
       top: 0
-      right: 0 /* rtl:ignore */
+      right: 0
       bottom: 0
   &--vertical
     display: block !important
@@ -4335,11 +4399,11 @@ body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no
       width: 100%
       height: 36px
       text-align: center
-      &--left
+      &--start
         top: 0
         left: 0
         right: 0
-      &--right
+      &--end
         left: 0
         right: 0
         bottom: 0
@@ -4535,7 +4599,7 @@ body.desktop .q-table > tbody > tr:not(.q-tr--no-hover):hover > td:not(.q-td--no
   &__subtitle
     font-size: 12px
     margin-bottom: 8px
-    opacity: .4
+    opacity: .6
     text-transform: uppercase
     letter-spacing: 1px
     font-weight: 700
@@ -4897,7 +4961,7 @@ body.desktop
     position: absolute
     top: -3px
     bottom: 50%
-    width: 35px
+    width: 31px
     left: -35px
     border-left: 1px solid currentColor
     border-bottom: 1px solid currentColor
@@ -4934,21 +4998,28 @@ body.desktop
     transition: color .3s
   &__node--selected .q-tree__node-header-content
     color: $grey
-  &__icon, &__node-header-content .q-icon, &__spinner
+  &__icon,
+  &__node-header-content .q-icon
     font-size: 21px
   &__img
     height: 42px
-  &__avatar, &__node-header-content .q-avatar
+    border-radius: 2px
+  &__avatar,
+  &__node-header-content .q-avatar
     font-size: 28px
     border-radius: 50%
     width: 28px
     height: 28px
-  &__arrow, &__spinner
+  &__arrow,
+  &__spinner
     font-size: 16px
   &__arrow
     transition: transform .3s
+    margin-right: 4px
     &--rotate
       transform: rotate3d(0, 0, 1, 90deg)
+  &__tickbox
+    margin-right: 4px
   
   > .q-tree__node
     padding: 0
@@ -4964,6 +5035,42 @@ body.desktop
     .q-tree__node-header:before,
     .q-tree__node-body:after
       display: none !important
+  &--dense
+    > .q-tree__node--child > .q-tree__node-header
+      padding-left: 1px
+    .q-tree
+      &__arrow,
+      &__spinner
+        margin-right: 1px
+      &__img
+        height: 32px
+      &__tickbox
+        margin-right: 3px
+      &__node
+        padding: 0
+        &:after
+          top: 0
+          left: -8px
+      &__node-header
+        margin-top: 0
+        padding: 1px
+        &:before
+          top: 0
+          left: -8px
+          width: 8px
+      &__node--child
+        padding-left: 17px
+        > .q-tree__node-header:before
+          left: -25px
+          width: 21px
+      &__node-body
+        padding: 0 0 2px
+      &__node--parent > .q-tree__node-collapsible > .q-tree__node-body
+        padding: 0 0 2px 20px
+        &:after
+          left: 8px
+      &__children
+        padding-left: 16px
 [dir=rtl]
   .q-tree__arrow
     transform: rotate3d(0, 0, 1, 180deg) /* rtl:ignore */
@@ -5101,6 +5208,7 @@ body.desktop
     outline: 0
   &__content
     outline: none
+    contain: content
     *
       overflow-anchor: none
   &__padding
@@ -5216,14 +5324,17 @@ body.q-ios-padding .q-notifications__list
   font-size: 14px
   &__icon
     font-size: 24px
-    margin-right: 16px
     flex: 0 0 1em
+    &--additional
+      margin-right: 16px
   &__avatar
     font-size: 32px
-    margin-right: 8px
+    &--additional
+      margin-right: 8px
   &__spinner
     font-size: 32px
-    margin-right: 8px
+    &--additional
+      margin-right: 8px
   &__message
     padding: 8px 0
   &__caption
@@ -6836,6 +6947,8 @@ for $name, $size in $sizes
 .q-link
   outline: 0
   text-decoration: none
+  &--focusable:focus-visible
+    text-decoration: underline dashed currentColor 1px
 body.electron
   .q-electron-drag
     -webkit-user-select: none
@@ -6965,6 +7078,10 @@ img.responsive
   border-radius: 0 !important
   max-width: 100vw
   max-height: 100vh
+body.q-ios-padding .fullscreen
+  padding-top: $ios-statusbar-height !important
+  padding-top: env(safe-area-inset-top) !important
+  padding-bottom: env(safe-area-inset-bottom) !important
 .absolute-full, .fullscreen, .fixed-full
   top: 0
   right: 0