Sha256: 4aee538b88978bed31a965b43a07b062257552c621e443ae803eaef9c7a6d2c2

Contents?: true

Size: 1.13 KB

Versions: 11

Compression:

Stored size: 1.13 KB

Contents

.emulation_mode_button {
  position: relative;
  float: left;
  cursor: pointer;

  &-wrapper {
    width: 110px;
    height: 30px;
  }

  &-desktop_icon,
  &-phone_icon {
    @include background-icon-center($color: var(--ui-on-surface-color), $font-size: 16px);
    width: 40px;
    height: 100%;
  }

  &-desktop_icon {
    @include monitor-icon;
    float: left;
  }

  &-phone_icon {
    @include mobile-icon;
    float: right;
  }

  &-track,
  &-thumb {
    position: absolute;
  }

  &-track {
    background-color: var(--ui-on-surface-color-lighter);
    top: 8px;
    left: 40px;
    border-radius: 7px;
    width: 34px;
    height: 14px;
  }

  &-thumb {
    background-color: var(--ui-primary-color);
    top: 5px;
    left: 37px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  }

  &.active .emulation_mode_button-thumb {
    transform: translateX(20px);
  }

  &.disabled {
    .emulation_mode_button-wrapper {
      opacity: 0.4;
    }
  }
}

Version data entries

11 entries across 11 versions & 1 rubygems

Version Path
pageflow-17.0.4 app/assets/stylesheets/pageflow/editor/emulation_mode_button.scss
pageflow-17.0.3 app/assets/stylesheets/pageflow/editor/emulation_mode_button.scss
pageflow-17.0.2 app/assets/stylesheets/pageflow/editor/emulation_mode_button.scss
pageflow-17.0.1 app/assets/stylesheets/pageflow/editor/emulation_mode_button.scss
pageflow-17.0.0 app/assets/stylesheets/pageflow/editor/emulation_mode_button.scss
pageflow-16.2.0 app/assets/stylesheets/pageflow/editor/emulation_mode_button.scss
pageflow-16.1.0 app/assets/stylesheets/pageflow/editor/emulation_mode_button.scss
pageflow-16.0.0 app/assets/stylesheets/pageflow/editor/emulation_mode_button.scss
pageflow-15.8.0 app/assets/stylesheets/pageflow/editor/emulation_mode_button.scss
pageflow-15.7.1 app/assets/stylesheets/pageflow/editor/emulation_mode_button.scss
pageflow-15.7.0 app/assets/stylesheets/pageflow/editor/emulation_mode_button.scss