tweb-i2p/src/scss/components/_global.scss

//Default styles

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

ul {
  &:not(.browser-default) {
    padding-left: 0;
    list-style-type: none;
    
    & > li {
      list-style-type: none;
    }
  }
}

a {
  text-decoration: none;
  
  // Gets rid of tap active state
  -webkit-tap-highlight-color: transparent;
}

img, video {
  -webkit-user-drag: none;
}

// Positioning
.valign-wrapper {
  display: flex;
  align-items: center;
}

// Z-levels
.z-depth-0 {
  box-shadow: none !important;
}

/* 2dp elevation modified*/
.z-depth-1 {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),
  0 3px 1px -2px rgba(0,0,0,0.12),
  0 1px 5px 0 rgba(0,0,0,0.2);
}
.z-depth-1-half {
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}

/* 6dp elevation modified*/
.z-depth-2 {
  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14),
  0 1px 10px 0 rgba(0,0,0,0.12),
  0 2px 4px -1px rgba(0,0,0,0.3);
}

/* 12dp elevation modified*/
.z-depth-3 {
  box-shadow: 0 8px 17px 2px rgba(0,0,0,0.14),
  0 3px 14px 2px rgba(0,0,0,0.12),
  0 5px 5px -3px rgba(0, 0, 0, 0.2);
}

/* 16dp elevation */
.z-depth-4 {
  box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14),
  0 6px 30px 5px rgba(0,0,0,0.12),
  0 8px 10px -7px rgba(0,0,0,0.2);
}

/* 24dp elevation */
.z-depth-5 {
  box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14),
  0 9px 46px 8px rgba(0,0,0,0.12),
  0 11px 15px -7px rgba(0,0,0,0.2);
}

/*******************
Utility Classes
*******************/

.hide {
  display: none !important;
}

// No Text Select
.no-select {
  user-select: none;
}

/* .no-transition {
  transition: none !important;

  &-all, &-all * {
    transition: none !important;
  }
} */

.inline {
  display: inline;
}

.center-align, .text-center {
  text-align: center;
}

.justify-start {
  justify-content: flex-start!important;
}

.justify-self-start {
  justify-self: flex-start!important;
}

.justify-self-end {
  justify-self: flex-end!important;
}

.position-center {
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* .flex-grow {
  flex-grow: 1;
}

.flex-shrink {
  flex-shrink: 1;
} */