apostrophe/lib/modules/apostrophe-modal/public/css/components/modal.less

The Apostrophe Content Management System.

// ===============================================================
//    Apostrophe Modal
// ===============================================================
//
//
//    |-----------------------------------------------|
//    |                                               |
//    |                 modal-header       {controls} |
//    |                                               |
//    |-----------------------------------------------|
//    |               modal-breadcrumb                |
//    |-----------------------------------------------|
//    |                                               |
//    |                                               |
//    |                                               |
//    |                modal-contents                 |
//    |                                               |
//    |                                               |
//    |                                               |
//    |-----------------------------------------------|
//    |                 modal-footer                  |
//    |-----------------------------------------------|
//


// Variables  ===================================
@apos-z-index-modal: @apos-z-index-7;
@apos-modal-timing: 0.25s;
@apos-modal-transition-curve: ease;


// Base Class  ===================================
.apos-ui.apos-modal
{
	position: fixed;

	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;

  z-index: @apos-z-index-modal;

  overflow: hidden;
  opacity: 1;

  .apos-transform(translate3d(0,0,0) scale3d(1,1,1));
  .apos-transitions(transform @apos-modal-timing @apos-modal-transition-curve, opacity @apos-modal-timing @apos-modal-transition-curve;);
	.apos-table tbody
  {
    height: 100%;
    overflow: auto;
  }
}

// A modal nested as a view should be less aggressive about sizing and positioning
.apos-ui.apos-modal .apos-modal
{
  width: 100%;
  height: 100%;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  overflow: auto;
  position: relative;
}

.apos-modal--pushed
{
  .apos-modal-body
  {
    border-left: 220px solid @apos-light;
  }
}
// Modal Body ===================================
.apos-modal
.apos-modal-content
{
  position: absolute;

	// this is replaced dynamically with js
  height: ~'calc(100vh - 100px - 189px - 82px)';     // 100vh - 100 (position) - 189 (header + breadcrumb) - 82px (footer bar)
  width: 100%;

  // background-color: @apos-white;
	background-color: lighten(@apos-light, 5%);
}

.apos-modal-body
{
	height: 100%;
	overflow: auto;
  .apos-scrollbar;
  background-color: lighten(@apos-light, 5%);
	li a {
		&:hover { color: @apos-primary; }
	}
}

// Stack Push Transition ===================================
.apos-modal.apos-modal-stack-push
{
	opacity: 0;
	.apos-transform(translate3d(0,0,0) scale3d(1.2,1.2,1));
	.apos-transitions(transform @apos-modal-timing @apos-modal-transition-curve, opacity @apos-modal-timing @apos-modal-transition-curve;);
}



// Sliding Transition ===================================
// - In a 'slide' transition, the body translates
//   out of the modal
.apos-modal-slideable .apos-modal-content
{
  .apos-transform(translate3d(-100%,0,0));
  .apos-transition(transform, @apos-modal-timing, @apos-modal-transition-curve);
}


// Current Slide ===================================
.apos-modal-slideable
.apos-modal-content.apos-modal-slide-current
{
	.apos-transform(translate3d(0,0,0));
}

// Next Slide ===================================
.apos-modal-content.apos-modal-slide-current + .apos-modal-content
{
	.apos-transform(translate3d(100%,0,0));
}