cartodb/assets/stylesheets/common/dialog.scss

@import "../variables/colors";
@import "../variables/sizes";
@import '~cartoassets/src/scss/cdb-variables/colors';
$sSmallWidth: 670px;

/* set by base dialog */
body.is-inDialog {
  overflow: hidden;
}

.Dialog {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(white, 1) 0%, rgba(white, 0.95) 50%, rgba(white, 0.9) 100%);
}

.Dialog-contentWrapper { // this is necessary since the Dialog element might have `position: block` set by .hide/.show
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* If the animation duration is changed make sure to update the timeout value in Dialog's view! */
.Dialog.is-opening {
  animation: fade-and-scale-in 100ms ease-out;
}

.Dialog.is-closing {
  /* "forwards" to keep the last keyframe's styles after animation ended */
  animation: fade-and-scale-out 80ms ease-in forwards;
}

.Dialog.is-sticky .Dialog-closeBtn {
  display: none;
}

.Dialog-closeBtn {
  position: fixed;
  z-index: 2;
  top: $sMargin-group; // to be aligned with header icon
  right: $sMargin-section;
}

.Dialog-backBtn {
  position: fixed;
  top: $sMargin-group; // to be aligned with header icon
  left: $sMargin-section;
}

.Dialog-content {
  width: 100%;
}

.Dialog-content--expanded {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-around;
  width: 100%;
  height: 100%;
}

.Dialog-header--expanded {
  flex-grow: 1;
}

.Dialog-body--expanded {
  flex-grow: 100;
  background-color: $cStructure-grayBkg;
}

.Dialog-footer--expanded {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: $cStructure-grayBkg;
}

.Dialog-content.is-newContent {
  animation: fade-and-scale-in 100ms ease-out;
}

.Dialog-header {
  padding: $sMargin-group 0;
  text-align: center;
}

.Dialog-body {
  width: $sLayout-width;
  margin: 0 auto;
  padding-top: $sMargin-group;
  padding-bottom: $sMargin-group;
  border-top: 1px solid $cStructure-mainLine;
}

.Dialog-body.Dialog-body--tall {
  padding-top: $sMargin-section;
  padding-bottom: $sMargin-section;
}

.Dialog-body.Dialog-body--noPaddingTop {
  padding-top: 0;
}

.Dialog-body.Dialog-body--withoutBorder {
  border-top: none;
}

.Dialog-body.Dialog-body--create {
  $createDialog-footerInner-height: 72px;
  $createDialog-footerInner-padding: 16px;
  position: relative;
  width: 100%;
  margin-bottom: $createDialog-footerInner-height + 2 * $createDialog-footerInner-padding;
  overflow: auto;
}

.Dialog-body.Dialog-body--create.Dialog-body--no-spacing {
  margin: 0;
  padding: 0;
}

.Dialog-body.Dialog-body--share {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;

  & .u-inner {
    width: 620px;
  }
}

.Dialog-body.Dialog-body--small {
  width: $sSmallWidth;
}

.Dialog-Stretcher {
  display: flex;
  justify-content: center;
  width: $sLayout-width;
}

.Dialog-Stretcher--small {
  width: 700px;
}

.Dialog-Stretcher--medium {
  width: 830px;
}

.Filters.Dialog-bodyFilters {
  position: relative;
  background: none;
}

.Filters.Dialog-bodyFilters {
  position: relative;
  background: none;
}

.Dialog-body .ListingContent {
  margin-bottom: 100px;
}

.Dialog-footer {
  padding: $sMargin-group 0;
  text-align: center;
}

.Dialog-footer--withoutBorder {
  border-top: none;
}

.Dialog-footer--simple {
  display: flex;
  justify-content: center;
}

.Dialog-footer--small {
  width: $sSmallWidth;
}

.Dialog-footerContent {
  display: flex;
  justify-content: center;
}

.Dialog-footerWarning {
  color: $cHighlight-negative;
}

.Dialog-preFooter {
  position: fixed;
  z-index: 3;
  right: 5%;
  bottom: 100px; // to be located on top of the .Dialog-footer
  left: 0;
  left: 5%;
  // Make the item not go all the way to the edge, since that would cover the scrollbar…
  // Make margins on both sides to accomodate this
  width: 90%;
  background: $cStructure-grayBkg;

  // same as .CreateDialog-footerShadow but using ::before to not have to add more markup
  &::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    top: -18px;
    width: 100%;
    height: 18px;
    background-image: linear-gradient(to bottom, rgba(#F9F9F9, 0), rgba(#F9F9F9, 1));
  }
}

.Dialog-headerIcon {
  position: relative;
  width: $sIcon-layout;
  height: $sIcon-layout;
  margin-right: auto;
  margin-bottom: $sMargin-elementInline;
  margin-left: auto; // auto to center it in the container
  border: 1px solid $cStructure-softLine;
  border-radius: $sIcon-borderRadius;
  font-size: 22px;
  line-height: 44px;
}

.Dialog-headerIcon--neutral {
  // TODO: !important to not be overrided by .CreateDialog-headerIcon overriding stuff over here :(
  border-color: $cIcons-active !important;

  .CDB-IconFont {
    color: $cIcons-active !important;
  }
}

.Dialog-headerIcon--twitter {
  border-color: #55ACEE;
  color: #55ACEE;
}

.Dialog-headerIcon--negative {
  border-color: $cError;
  color: $cError;
}

.Dialog-headerIcon--positive {
  border-color: $cHighlight-positive;
  color: $cHighlight-positive;
}

.Dialog-headerIcon--alert {
  border-color: $cHighlight-alert2;
  color: $cHighlight-alert2;
}

.Dialog-headerIcon--small {
  position: relative;
  top: -3px;
  font-size: 10px;
  vertical-align: middle;
}

.Dialog-headerIconBadge {
  /* "backwards" to use the first keyframe's styles before animation starts */
  animation: fade-and-bounce-up 0.6s 350ms ease-in-out backwards;
}

.Dialog-headerTitle {
  color: $cTypography-paragraphs;
  font-size: $sFontSize-larger;
  font-weight: $sFontWeight-normal;
  line-height: $sLineHeight-larger;
}

.Dialog-headerTitle--warning {
  color: $cHighlight-alert2;
}

.Dialog-headerTitle--error {
  color: $cHighlight-negative;
}

.Dialog-headerText {
  color: $cTypography-paragraphs;
  font-size: $sFontSize-large;
  font-weight: $sFontWeight-lighter;
  line-height: $sLineHeight-large;
}

.Dialog-headerText:not(:last-child) {
  margin-bottom: $sMargin-elementInline;
}

.Dialog-headerText--centered {
  margin: auto;
}

.Dialog-headerText--ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Dialog-headerText--small {
  width: $sSmallWidth;
}

.Dialog-footerBtn {
  margin-right: $sMargin-element;
}

.Dialog-affectedEntities {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

// Styles related to expanded styles, where body--expanded is intended to be scrollable
$sStickyHeight: 97px;

.Dialog-content--expanded {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-around;
  width: 100%;
  height: 100%;
}

.Dialog-header--expanded {
  flex-grow: 1;
  min-height: 100px; // required to have its content visible, actual height is more like 17Xpx
}

.Dialog-expandedSubContent {
  flex-grow: 100;
  margin-bottom: 97px;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: 1px solid $cStructure-mainLine;
  background-color: $cStructure-grayBkg;
}

.Dialog-expandedSubContentInner {
  position: relative; // necessary to position subHeader properly
}
// These additional paddings are required to be applied on an inner element, for the paddings to apply in FF
// See http://stackoverflow.com/questions/26888428/display-flex-loses-right-padding-when-overflowing for an isolated explanation
.Dialog-bodyInnerExpandedWithSubFooter {
  padding-bottom: $sStickyHeight;
}

.Dialog-bodyInnerExpandedWithPreFooter {
  padding-bottom: $sStickyHeight + 100px;
}

.Dialog-stickyFooter {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: $sStickyHeight;
  background-color: $cStructure-grayBkg;
}

.Dialog-contentSubHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: $sMargin-group;
  padding-bottom: $sMargin-group;
  border-bottom: 1px solid $cStructure-mainLine;
}

// Results body, used for modals with additional "step" info (e.g. georeference results, help dialogs)
$sNarrower-width: 620px;

.Dialog-resultsBody {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: $sNarrower-width;
}

.Dialog-resultsBody--vcenter {
  align-items: center;
}

.Dialog-resultsBodyIcon {
  margin-right: $sMargin-element;
}

.Dialog-resultsBodyTexts {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 520px;
}

.Dialog-narrowerContent {
  width: $sNarrower-width;
}

.Dialog-countryBack {
  margin-left: 12px;
  float: right;
  pointer-events: auto;
}

@keyframes fade-and-scale-in {
  0% {
    transform: scale(2);
    opacity: 0;
  }

  10% {
    transform: scale(1.1);
    opacity: 0.9;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fade-and-bounce-up {
  0% {
    transform: translateY(6px);
    opacity: 0;
  }

  15% {
    transform: translateY(-3px);
    opacity: 0.8;
  }

  45% {
    transform: translateY(2px);
    opacity: 1;
  }

  70% {
    transform: translateY(-1px);
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-and-scale-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  80% {
    transform: scale(1.4);
    opacity: 0.05;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
  .Dialog-body .ListingContent {
    margin-bottom: 200px;
  }
}