First commit

Modals/modal.css

@@ -0,0 +1,88 @@
+/* Start by styling the outermost element defining a modal. This element
+ * should cover the entire screen with a dark but transparent background
+ * color. It needs a z-index value to make sure it is placed over
+ * everything else. */
+.modal {
+  position: fixed;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgb(33, 37, 41, 0.5);
+
+  /* STEP 0: Initially, occupy only the bottom half of the screen. You'll
+   * change this later to cover the whole thing. */
+  top: 0;
+
+  /* STEP 1: Add an opacity value of 0 to make the modal initially
+   * invisible (completely transparent). */
+  opacity: 0;
+  z-index: 0;
+}
+
+/* Helper class for the modal. When the modal is activated, it "fades in"
+ * over the course of .15 seconds, going from fully transparent (can't
+ * be seen) to fully opaque (blocks out the background). This is optional,
+ * but it makes for a nicer looking transition. */
+.fade {
+  transition: opacity 0.15s linear;
+}
+
+/* STEP 1a: Define a combined selector that applies to any element that has
+ * the 'fade' class but doesn't have the 'show' class. HINT: There is a
+ * :not pseudoclass where :not(...) means the rule applies when ... is not
+ * true. */
+.fade:not(.show) {
+  pointer-events: none;
+}
+
+.show {
+  opacity: 1;
+}
+
+/* STEP 2: Define a descendant selector to grab any element with the
+ * 'modal-dialog' class that is a descendant of a shown modal (has both
+ * the 'modal' and 'show' classes). */
+TODO {
+  /* The transform property is used to define a change to an element. */
+  transition: transform 0.3s ease-out;
+  transform: translate(0, 10vh);
+}
+
+/* STEP 2a: Make the modal dialog a centered flexbox to add spacing to
+ * center the modal content horizontally. */
+.modal-dialog {
+}
+
+/* STEP 2a: As above, use a descendant selector to grab the 'modal-dialog'
+ * that is a descendant of 'modal', but only if the 'modal' element doesn't
+ * have the 'show' class. */
+TODO {
+  transition: transform 0.3s ease-out;
+  transform: translate(0, -10vh);
+}
+
+/* Create the box around the modal content */
+.modal-content {
+  background: white;
+  min-height: 10vh;
+  min-width: 30vw;
+  border: 1px solid black;
+  border-radius: 0.3rem;
+}
+
+/* Basic styling - not part of the tutorial */
+body {
+  background: lightgray;
+  font-family: "Trebuchet MS", sans-serif;
+}
+
+ul {
+  list-style: none;
+}
+
+li {
+  width: 15vw;
+  background: white;
+  border: 1px black solid;
+  padding: 0.5vh 1vw;
+}