@semic/react v2.0.0

项目描述等 @semic/react

Nextjs SSR 通过 x.module.css 动态倒入

// tryon.module.css
.tryon {
  width: 320px;
  height: 424px;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
}

.tryonBody {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

.tryonUser {
  width: 100%;
  background: #fff;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  z-index: 101;
}

.tryonFrame {
  position: absolute;
  top: 100%;
  left: 0px;
  opacity: 1;
  z-index: 104;
}

.tryonTempleRight {
  position: absolute;
  top: 100%;
  left: 0px;
  transform-origin: left center;
  image-rendering: pixelated;
  opacity: 1;
  z-index: 103;
}

.tryonTempleLeft {
  position: absolute;
  top: 100%;
  left: 0px;
  transform-origin: left center;
  image-rendering: pixelated;
  opacity: 1;
  z-index: 102;
}

.unselectable {
  /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
  /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
  -moz-user-select: none;
  /* These user-select properties are inheritable, used to prevent text selection */
  -webkit-user-select: none;
  -ms-user-select: none;
  /* From IE10 only */
  user-select: none;
  /* Not valid CSS yet, as of July 2012 */

  -webkit-user-drag: none;
  /* Prevents dragging of images/divs etc */
  pointer-events: none;
}