figma-gridgen/src/ui.css

Utilizes built-in Figma rectangles, lines, and texts to generate tables with neatly organized layers

/* Import helper style from package root */
@import "../../styles.css";

/* --- Buttons --- */
.btn-standalone.half button {
  padding: 8px 45px;
}

/* --- Custom Radio Button --- */

/* Based on Codepen by Sal */
.options-radio-buttons-wrapper {
  clear: both;
  display: flex;
}

.options-radio-button {
  position: absolute;
  left: -9999em;
  top: -9999em;
}

.options-radio-button + label {
  width: 33.3%;
  float: left;
  padding: 0.5em 1em;
  cursor: pointer;
  border: 0;
  color: #bebebe;
  font-weight: 300;
  margin-right: -1px;
}

.options-radio-button + label:first-of-type {
  border-radius: 0.7em 0 0 0.7em;
}

.options-radio-button + label:last-of-type {
  border-radius: 0 0.7em 0.7em 0;
}

.options-radio-button:hover + label {
  color: #000;
  font-weight: 300;
}

.options-radio-button:checked + label {
  color: #000;
  font-weight: 550;
}

/* --- Animated Loader --- */

/* Based on loading.io */
.lds-dual-ring {
  padding: 200px 0;
}

/* The Modal (background) */
.modal {
  place-items: center; /* Will ensure modal is centered when display is grid */
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 18px;
  font-weight: regular;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}