togg/style.css

Angular UI directive for toggling classes and beyond

::selection { background: yellow; color: black; }
html { background: whitesmoke; color: black }
.logo, .button { background: hotpink; border-color: hotpink; color: black }
.button--toggled { background: MediumSpringGreen; border-color: MediumSpringGreen; color: black }
.logo:focus, .button:focus { border-color: MistyRose; }
.button--toggled:focus { border-color: DeepSkyBlue; }
.demo { background: inherit; border-color: SkyBlue; color: black }
.demo--toggled { background: MediumSpringGreen; border-color: MediumSpringGreen; color: black }
.demo:focus { border-color: black; }
.group { background: DeepSkyBlue }
:focus { outline-color: DeepSkyBlue; border-color: DeepSkyBlue }
.button:disabled { opacity: .4 }
.input:enabled { background: MediumSpringGreen; border-color: MediumSpringGreen; color: black; }

*, :before, :after { box-sizing: border-box }
[hidden] { display: none }
html { font: 1em/2 sans-serif; }
body { width: 100%; margin: auto; padding: 1em }
a, button, input, label, select, summary, textarea { touch-action: manipulation }
a { text-decoration: none }
a:hover { text-decoration: underline }
pre, code { -moz-tab-size: 2; -o-tab-size: 2; tab-size: 2 }
pre { white-space: pre-wrap; word-wrap: break-word; overflow: auto }
header, section, aside { display: block }
fieldset { padding: 0; border: 0; margin: 0 0 1em; }
pre, fieldset { border-radius: 1em; }
h1, h2, h3 { line-height: 1 }
h2 { font-size: 1.5em }
figure { display: block; margin: 0 0 1em }
button::-moz-focus-inner { border-style: none }

.demo {
  border-radius: 1em;
  border-width: 2px;
  border-style: dashed;
  padding: .5em 1em;
  font-size: 1.25em;
}

.button {
  font-size: inherit;
  font-style: inherit;
  font-weight: bold;
  min-height: 2.5em;
  display: inline-block;
  border-width: .33333em;
  border-style: double;
  border-radius: 1em;
  padding: 0 .66666em;
  margin: 0 0 1px;
  vertical-align: middle;
  cursor: pointer;
}

.button:disabled,
:disabled .button {
  cursor: default;
}

.button:enabled:hover,
.button:enabled:active {
  text-decoration: underline;
}

.logo[class],
.demo[class],
.button[class] {
  outline: 0;
}

.banner {
  margin-bottom: 2rem;
}

.logo {
  display: table;
  border-radius: 1em;
  margin-top: 0;
  font-size: 2em;
  width: 5em;
  height: 5em;
  padding: 1.66666em 0;
  border-width: .33333em;
  border-style: double;
  letter-spacing: .2em;
  max-width: 100%;
  text-align: center;
  font-family: monospace;
  vertical-align: middle;
}

.block {
  margin: 0 0 1rem;
  padding: 0;
  display: block;
  font-size: inherit;
}

.list {
  margin-top: 0;
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 1rem;
}

.group {
  display: block;
  padding: 1em;
  border-radius: 1em;
  border: 2px solid silver;
  margin: 0 0 2rem;
  counter-increment: group;
}

.group__title {
  font-weight: inherit;
}

.blurb {
  margin: 0 0 1rem;
  font-size: 1.5em;
  line-height: 1;
  max-width: 20em;
}

.inherit--color {
  color: inherit;
}

.width--50 {
  width: 50%;
}

.menu {
  margin: 0 0 1rem;
}

@media (min-width: 20em) {
  .menu {
    position: absolute;
    text-align: right;
    top: 2rem;
    right: 2rem;
    max-width: 100%;
  }
}

.clunk {
  display: block;
  text-align: center;
  margin: 0 0 .5rem;
  min-width: 5em
}