simple-calendar-widget/dist/index.css

A super simple calendar widget written in TypeScript and SCSS

.simple-calendar-widget {
  font-family: monospace;
  font-size: 1rem;
  line-height: 2;
  text-transform: lowercase;
  width: 20rem;
  border: 2px solid lightgray;
  margin: 20px auto;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}
.simple-calendar-widget caption {
  border: 2px solid lightgray;
  border-bottom: 0;
  overflow: hidden;
}
.simple-calendar-widget caption button {
  padding-bottom: 2px;
}
.simple-calendar-widget caption span,
.simple-calendar-widget caption button {
  text-align: center;
  min-width: calc(20rem / 7 - 1px);
  height: 32px;
  display: inline-block;
  vertical-align: top;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.simple-calendar-widget caption span:first-child,
.simple-calendar-widget caption button:first-child {
  min-width: calc(20rem / 7);
  float: left;
  border-right: 2px solid lightgray;
}
.simple-calendar-widget caption span:last-child,
.simple-calendar-widget caption button:last-child {
  min-width: calc(20rem / 7);
  float: right;
  border-left: 2px solid lightgray;
}
.simple-calendar-widget caption span:first-child, .simple-calendar-widget caption span:last-child,
.simple-calendar-widget caption button:first-child,
.simple-calendar-widget caption button:last-child {
  cursor: pointer;
}
.simple-calendar-widget caption span:first-child:hover, .simple-calendar-widget caption span:last-child:hover,
.simple-calendar-widget caption button:first-child:hover,
.simple-calendar-widget caption button:last-child:hover {
  background-color: lightgray;
}
.simple-calendar-widget th,
.simple-calendar-widget td {
  border: 2px solid lightgray;
}
.simple-calendar-widget td {
  padding: 0 0.5rem;
}
.simple-calendar-widget .is--empty {
  background-color: rgba(211, 211, 211, 0.2);
  cursor: default;
}
.simple-calendar-widget .is--today {
  background-color: rgba(211, 211, 211, 0.5);
}
/*# sourceMappingURL=index.css.map */