Gapminder/vizabi

View on GitHub
src/components/dialogs/size/_size.scss

Summary

Maintainability
Test Coverage
.vzb-tool-dialogs {
  .vzb-dialogs-dialog {
    &[data-dlg="size"] {
      &.vzb-popup {
        .vzb-dialog-modal {        
          .vzb-dialog-title {
            @include rtl {
              padding-left: 5px;
              padding-right: 25px;
            }
            padding-right: 5px;
          }
        }
      }

      &.vzb-popup,
      &.vzb-sidebar {
        .vzb-dialog-title {
          display: flex;
          flex-direction: row;
          align-items: center;
          > span:first-child {
            display: block;
            flex: 0 0 auto;
          } 
        }

        .vzb-saxis-selector {
          display: block;
          flex: 1 1 auto;
          min-width: 1px;
        }
      }

      //hiding elements when in sidebar mode
      &.vzb-sidebar {
        .vzb-dialog-subtitle,
        .vzb-dialog-bubblesize {
          display: none;
        }
        }
    }
  }
}

//responsiveness
&.vzb-large {
  &.vzb-dialog-expand-true {
    .vzb-dialogs-dialog {
      &[data-dlg="size"] {
        &.vzb-sidebar {
          flex: none;
        }
      }
    }
  }
}