spacedeck-open/styles/helper.scss

@import "vars";
@import "mixins";

.events {pointer-events: auto !important; }
.no-events {pointer-events: none !important; }

.no-bg {background-color: transparent !important; }
.bg-lighten {background-color: rgba(255,255,255,0.4) !important; }

.transition-1 {@include transition( all 0.1s ease-in-out); }

.disabled {
  pointer-events: none !important;
  opacity: 0.5 !important;
  * {pointer-events: none !important; }
}

.in {
  opacity: 1 !important;
  pointer-events: auto !important;
  // * {pointer-events: auto !important; }
}

.out {
  opacity: 0 !important;
  pointer-events: none !important;
  // * {pointer-events: none !important; }
}

.invis { display: none; }
.vis   { display: block; }

/*
.contained-dropdown,
.flex {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
  min-height: 100%;

  > *:not(.unflex) {
    -webkit-flex: 1 auto;
    flex: 1 auto;
    // width: 100%;
  }
  .overflow-y-scroll,
  .adapt {
    -webkit-flex: 1000 1000 auto;
    flex: 1000 1000 auto;
  }
  .dialog-title,
  .noflex {
    -webkit-flex: 0 auto;
    flex: 0 auto;
  }
}
*/

.no-min-w {min-width: 0px !important; }

.no-wrap { white-space: nowrap !important;} 
.text-center {text-align: center !important; }
.text-left   {text-align: left !important; }
.text-right  {text-align: right !important; }

.text-large {
  font-size: 30px !important;
  font-weight: 500 !important;
}

.text-medium {
  font-size: 20px !important;
  font-weight: 500 !important;
}

.bg-dark {background: $dark !important; }
.bg-blue {background: $blue !important; }
.bg-light {background: $light !important; }


.c-dark {color: $dark !important; }
.c-blue {color: $blue !important; }
.c-light {color: $light !important; }

.bg-1  { background-color: $color-1  !important; }
.bg-2  { background-color: $color-2  !important; }
.bg-3  { background-color: $color-3  !important; }
.bg-4  { background-color: $color-4  !important; }
.bg-5  { background-color: $color-5  !important; }
.bg-6  { background-color: $color-6  !important; }
.bg-7  { background-color: $color-7  !important; }
.bg-8  { background-color: $color-8  !important; }
.bg-9  { background-color: $color-9  !important; }
.bg-10 { background-color: $color-10 !important; }
.bg-11 { background-color: $color-11 !important; }

.c-1  { color: $color-1  !important; }
.c-2  { color: $color-2  !important; }
.c-3  { color: $color-3  !important; }
.c-4  { color: $color-4  !important; }
.c-5  { color: $color-5  !important; }
.c-6  { color: $color-6  !important; }
.c-7  { color: $color-7  !important; }
.c-8  { color: $color-8  !important; }
.c-9  { color: $color-9  !important; }
.c-10 { color: $color-10 !important; }
.c-11 { color: $color-11 !important; }

.inline-list {
  padding: 0;
  margin: 0;
  li {
    display: inline-block;
  }
}

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  position: sticky;
  top: 10px;
  z-index: 1;
}

.truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}


.table-fake {
  width: 100%;
  height: 100%;
  display: table;
  .cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
}

.ghost {
  height: 100%;
  width: 0px;
  display: inline-block;
  vertical-align: middle;
}

.collapse {
  display: none;
  &.in {
  display: block;
  }
}
.panel:hover { 
  .collapse.collapsed {
    max-height: 60px !important;
  }
}

.middle {
   top: 50%;
   left: 50%;
   -webkit-transform: translate3d(-50%, -50%, 0);
       -ms-transform: translate3d(-50%, -50%, 0);
           transform: translate3d(-50%, -50%, 0);
 }
.middle,

.static {position: static !important; }

// positions
.absolute-top,
.absolute-bottom,
.absolute-left, 
.absolute-right, 
.absolute-top-left, 
.absolute-top-right, 
.absolute-bottom-left-right, 
.absolute-bottom-left, 
.absolute-bottom-right {
  // z-index: 100; 
  position: absolute !important; 
}

.absolute-top  { top: 0; }
.absolute-right { right: 0; left: auto !important;}
.absolute-bottom  { bottom: 0; }
.absolute-left  { left: 0; right: auto !important;}

.absolute-top-left  { top: 0; left: 0; right: auto !important;}
.absolute-top-right { top: 0; right: 0; left: auto !important;}
.absolute-bottom-left    { bottom: 0; left: 0;  right: auto !important;}
.absolute-bottom-right   { bottom: 0; right: 0;  left: auto !important;} 

.absolute-bottom-left-right    { bottom: 0; left: 0;  right: 0;}


// paddings
.p-5    { padding: 5px !important; }
.p-10   { padding: 10px !important; }
.p-20   { padding: 20px !important; }

.p-r-60 { padding-right: 60px !important; }
.p-l-60 { padding-left: 60px !important; }

.no-p   { padding: 0 !important; }
.no-p-v { padding-top: 0 !important; padding-bottom: 0 !important; }
.no-p-h { padding-left: 0 !important; padding-right: 0 !important; }
.no-p-b { padding-bottom: 0 !important; }
.no-p-t { padding-top: 0 !important; }
.no-p-l { padding-left: 0 !important; }
.no-p-r { padding-right: 0 !important; }

// margins
.m-5   { margin: 5px !important; }
.m-10   { margin: 10px !important; }
.m-20   { margin: 20px !important; }
.m-r-60 { margin-right: 60px !important; }
.m-r-20 { margin-right: 20px !important; }
.m-r-10 { margin-right: 10px !important; }
.m-l-20 { margin-left: 20px !important; }
.m-t-20 { margin-top: 20px !important; }
.m-t-15 { margin-top: 15px !important;}
.m-b-15 { margin-bottom: 15px !important;}
.m-h-20 { margin-left: 20px !important; margin-right: 20px !important;}
.m-v-neg-10 { margin-top: -10px !important; margin-bottom: -10px !important;}
.no-m   { margin: 0 !important; }

// widths
.w-auto {width: auto !important;}
.w-08   { width: 80px !important; }
.w-1    { width: 100px !important; }
.w-15   { width: 150px !important; }
.w-2    { width: 200px !important; }
.w-25   { width: 250px !important; }
.w-3    { width: 300px !important; }
.w-35   { width: 350px !important; }
.w-4    { width: 400px !important; }
.w-5    { width: 500px !important; }
.w-6    { width: 600px !important; }
.w-7    { width: 700px !important; }
.w-8    { width: 800px !important; }
.w-85   { width: 850px !important; }
.w-9    { width: 900px !important; }
.w-10 { width: 1000px !important; }

// heights
.h-5 { height: 500px !important; }
.h-55 { height: 550px !important; }
.h-6 { height: 600px !important; }

// radiuses
.no-r   { border-radius: 0 !important; }
.no-r-t   { border-top-left-radius: 0 !important;border-top-right-radius: 0 !important; }
.no-r-r   { border-top-right-radius: 0 !important;border-bottom-right-radius: 0 !important; }
.no-r-b   { border-bottom-left-radius: 0 !important;border-bottom-right-radius: 0 !important; }
.no-r-l   { border-top-left-radius: 0 !important;border-bottom-left-radius: 0 !important; }
.r-10   { border-radius: 10px !important; }

// border
.no-b { border: none !important; }
.b-v {border-top: 2px solid rgba(0,0,0,0.025) !important; border-bottom: 2px solid rgba(0,0,0,0.025) !important; }
.b-h {border-left: 2px solid rgba(0,0,0,0.025) !important; border-right: 2px solid rgba(0,0,0,0.025) !important; }
.b-t {border-top: 2px solid rgba(0,0,0,0.025) !important; }
.b-r {border-right: 2px solid rgba(0,0,0,0.025) !important; }
.b-b {border-bottom: 2px solid rgba(0,0,0,0.025) !important; }
.b-l {border-left: 2px solid rgba(0,0,0,0.025) !important; }
.b   {border: 2px solid rgba(0,0,0,0.025) !important; }

// Floats
// -------------------------
.clearfix {
  @include clearfix();
}
.pull-right {
  float: right !important;
}
.pull-left {
  float: left !important;
}

.block {display: block !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.hidden {
  display: none !important;
  visibility: hidden !important;
}
.invisible {
  opacity: 0;
  pointer-events: none;
}

.relative {
  position: relative !important;
}

.fade {
  opacity: 0;
  @include transition(opacity .1s linear);
  &.in {
    opacity: 1;
  }
}

// .collapse {
//   display: none;
//   &.in {
//     display: block;
//   }
// }

// .collapsing {
//   position: relative;
//   height: 0;
//   overflow: hidden;
//   @include transition(height .35s ease);
// }

// Dropdown arrow/caret
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top:   4px solid white;
  border-right: 4px solid transparent;
  border-left:  4px solid transparent;
}