89 lines
2.4 KiB
CSS
89 lines
2.4 KiB
CSS
|
/* 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;
|
||
|
|
}
|