metro4/source/components/keylock/keylock.less

The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

@import (once) "../../include/vars";
@import (once) "../../include/mixins";

.keylock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 36px;
  flex-flow: row nowrap;
  padding: 2px;
  cursor: pointer;
}

.keylock {
  .hideElement(input);

  .icon {
    width: 34px;
    height: 34px;
    display: block;
    position: relative;
    order: 1;
  }

  .icon > * {
    font-size: 32px;
    vertical-align: middle;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .state-on {
    display: none;
  }

  .state-off {
    display: block;
  }

  input:checked ~ .icon .state-on,
  input:checked ~ .caption .state-on
  {
    display: block;
  }

  input:checked ~ .icon .state-off,
  input:checked ~ .caption .state-off
  {
    display: none;
  }

  .caption {
    height: 34px;
    display: flex;
    align-items: center;
    margin: 0 6px;
    order: 2;
    white-space: nowrap;
  }

  &.caption-left {
    .icon {
      order: 2;
    }
    .caption {
      order: 1;
    }
  }
}