scout.popup.MobilePopup.css Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of org.eclipse.scout.rt.ui.html Show documentation

There is a newer version: 25.1.0-beta.0

Show newest version

/*******************************************************************************
 * Copyright (c) 2014-2015 BSI Business Systems Integration AG.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *     BSI Business Systems Integration AG - initial API and implementation
 ******************************************************************************/
@mobile-popup-title-margin-top: 10px;
@mobile-popup-title-margin-right: 30px;

.mobile-popup {
  background-color: @background-color;
  border-top: 5px solid @active-color;
  border-top-left-radius: @border-radius;
  border-top-right-radius: @border-radius;
  margin-top: 30px;
  #scout.drop-shadow(@x: 0px, @y: 0px, @blur: 30px, @spread: 5px, @alpha: 0.5);

  &.shown {
    #scout.animation-name(slidein-bottom);
    #scout.animation-duration(0.5s);
  }

  &.removed {
    #scout.animation-name(slideout-bottom);
    #scout.animation-duration(0.5s);
  }
}

.mobile-popup-header {
  position: absolute;
  width: 100%;

  padding-top: @mobile-popup-title-margin-top;
  padding-left: 20px;

  & > .title {
    #scout.overflow-ellipsis-nowrap();
    #scout.font-text-large();
    color: @active-color;
    width: 100%;
  }

  & > .closer {
    position: absolute;
    top: 0;
    right: 4px;
    padding: @mobile-popup-title-margin-top;
  }

  .mobile-popup.closable > & > .title {
    margin-right: @mobile-popup-title-margin-right;
    width: calc(~'100%' - @mobile-popup-title-margin-right);
  }
}