@pimaonline/pimaonline-themepack 2.4.1 → 3.0.0

package/dist/plugins/flashcards/css/style.css

@@ -1,216 +1,216 @@
-.flashcards {
-  margin: 10px auto;
-  max-width: 370px;
-  position: relative;
-}
-@media screen and (min-width:730px) {
-  .flashcards {
-    max-width: 500px;
-  }
-}
-#deck {
-  height: 300px;
-  list-style: none;
-  margin: 15px auto;
-  padding: 0;
-  position: relative;
-  text-align: center;
-  width: 100%;
-}
-@media screen and (min-width:730px) {
-  #deck {
-    height: 300px;
-    list-style: none;
-    margin: 15px auto;
-    padding: 0;
-    position: relative;
-    text-align: center;
-  }
-}
-#deck:hover {
-  cursor: pointer;
-}
-.card {
-  background-color: rgba(255, 255, 255, 1) !important;
-  color: rgba(34, 2, 0, 1);
-  display: none;
-  font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
-  height: 300px;
-  line-height: 60px;
-  position: relative;
-  width: 100%;
-  -webkit-perspective: 1600;
-  perspective: 1600;
-}
-.card:first-child {
-  display: block;
-}
-.side_one, .side_two {
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-  background-color: #fff;
-  background-size: 500px 30px;
-  background-position: 50%;
-  border: 1px solid rgba(13, 13, 13, .2);
-  height: inherit;
-  position: absolute;
-  -webkit-transition: all 0.4s ease-in-out;
-  -moz-transition: all 0.4s ease-in-out;
-  -ms-transition: all 0.4s ease-in-out;
-  -o-transition: all 0.4s ease-in-out;
-  transition: all 0.4s ease-in-out;
-  width: inherit;
-}
-.current .side_one, .current.flip .side_two {
-  -webkit-box-shadow: 1px 1px 4px -1px rgba(13, 13, 13, 0.3);
-  -moz-box-shadow: 1px 1px 4px -1px rgba(13, 13, 13, 0.3);
-  box-shadow: 1px 1px 4px -1px rgba(13, 13, 13, 0.3);
-}
-.current.flip .side_one {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
-}
-.side_one {
-  -webkit-transform: rotateX(0deg);
-  transform: rotateX(0deg);
-  -webkit-transform-style: preserve-3d;
-  transform-style: preserve-3d;
-  z-index: 900;
-}
-.flip .side_one {
-  -webkit-transform: rotateX(180deg);
-  transform: rotateX(180deg);
-}
-.side_two {
-  -webkit-transform: rotateX(-180deg);
-  transform: rotateX(-180deg);
-  -webkit-transform-style: preserve-3d;
-  transform-style: preserve-3d;
-  z-index: 800;
-}
-.flip .side_two {
-  -webkit-transform: rotateX(0deg);
-  transform: rotateX(0deg);
-  z-index: 1000;
-}
-.card p {
-  display: table-cell;
-  font-size: 1em;
-  height: 300px;
-  vertical-align: middle;
-  width: 500px;
-}
-#nav_deck {
-  color: rgba(51, 3, 0, 1);
-  display: flex;
-  justify-content: center;
-  position: relative;
-  text-align: center;
-}
-.icon {
-  cursor: pointer;
-  flex-basis: 25%;
-}
-.icon:before {
-  content: attr(data-icon);
-  font-family: 'Flash Cards';
-  visibility: visible;
-}
-.icon button {
-  background-color: rgba(255, 255, 255, 1);
-  border: none;
-  color: #333;
-  cursor: pointer;
-  margin: 0;
-  padding: 0;
-  width: 32px;
-}
-.icon button:hover {
-  background-color: rgba(255, 255, 255, 1);
-}
-.icon button img {
-  margin: 0;
-}
-.icon button img:hover {
-  -webkit-filter: brightness(80%);
-}
-.visuallyhidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-#keyboard_shortcuts {
-  background: rgba(13, 13, 13, 1);
-  bottom: 0;
-  display: none;
-  left: 0;
-  padding: 20px;
-  position: absolute;
-  z-index: 99999;
-}
-#keyboard_shortcuts h1 {
-  text-align: center
-}
-#keyboard_shortcuts td {
-  padding: 15px;
-  text-align: left;
-  width: 300px;
-}
-#keyboard_shortcuts td:first-child {
-  text-align: right
-}
-.or {
-  color: rgba(34, 2, 0, 1);
-  padding: 0 10px;
-}
-#keyboard_shortcuts_toggle {
-  cursor: pointer;
-  position: absolute;
-  right: 25px;
-  top: 25px;
-}
-#keyboard_shortcuts_toggle:before {
-  background: #0080ff;
-  -webkit-background-clip: padding;
-  -moz-background-clip: padding;
-  background-clip: padding-box;
-  -webkit-border-radius: 20px;
-  -moz-border-radius: 20px;
-  -ms-border-radius: 20px;
-  -o-border-radius: 20px;
-  border-radius: 20px;
-  border: 1px solid #fff;
-  color: #fff;
-  font-size: 25px;
-  height: 20px;
-  padding: 5px;
-  width: 20px;
-}
-.no-csstransforms3d .flip .side_one, .no-csstransforms3d .side_two {
-  opacity: 0;
-  -webkit-transition: all 0.4s ease-in-out;
-  -moz-transition: all 0.4s ease-in-out;
-  -ms-transition: all 0.4s ease-in-out;
-  -o-transition: all 0.4s ease-in-out;
-  transition: all 0.4s ease-in-out;
-}
-.no-csstransforms3d .flip .side_two {
-  opacity: 1;
-  -webkit-transition: all 0.4s ease-in-out;
-  -moz-transition: all 0.4s ease-in-out;
-  -ms-transition: all 0.4s ease-in-out;
-  -o-transition: all 0.4s ease-in-out;
-  transition: all 0.4s ease-in-out;
-}
-.card:first-child .side_two {
-  font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
-}
-ul#deck li:before {
-  content: none;
+.flashcards {
+  margin: 10px auto;
+  max-width: 370px;
+  position: relative;
+}
+@media screen and (min-width:730px) {
+  .flashcards {
+    max-width: 500px;
+  }
+}
+#deck {
+  height: 300px;
+  list-style: none;
+  margin: 15px auto;
+  padding: 0;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+@media screen and (min-width:730px) {
+  #deck {
+    height: 300px;
+    list-style: none;
+    margin: 15px auto;
+    padding: 0;
+    position: relative;
+    text-align: center;
+  }
+}
+#deck:hover {
+  cursor: pointer;
+}
+.card {
+  background-color: rgba(255, 255, 255, 1) !important;
+  color: rgba(34, 2, 0, 1);
+  display: none;
+  font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
+  height: 300px;
+  line-height: 60px;
+  position: relative;
+  width: 100%;
+  -webkit-perspective: 1600;
+  perspective: 1600;
+}
+.card:first-child {
+  display: block;
+}
+.side_one, .side_two {
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  background-color: #fff;
+  background-size: 500px 30px;
+  background-position: 50%;
+  border: 1px solid rgba(13, 13, 13, .2);
+  height: inherit;
+  position: absolute;
+  -webkit-transition: all 0.4s ease-in-out;
+  -moz-transition: all 0.4s ease-in-out;
+  -ms-transition: all 0.4s ease-in-out;
+  -o-transition: all 0.4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+  width: inherit;
+}
+.current .side_one, .current.flip .side_two {
+  -webkit-box-shadow: 1px 1px 4px -1px rgba(13, 13, 13, 0.3);
+  -moz-box-shadow: 1px 1px 4px -1px rgba(13, 13, 13, 0.3);
+  box-shadow: 1px 1px 4px -1px rgba(13, 13, 13, 0.3);
+}
+.current.flip .side_one {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.side_one {
+  -webkit-transform: rotateX(0deg);
+  transform: rotateX(0deg);
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  z-index: 900;
+}
+.flip .side_one {
+  -webkit-transform: rotateX(180deg);
+  transform: rotateX(180deg);
+}
+.side_two {
+  -webkit-transform: rotateX(-180deg);
+  transform: rotateX(-180deg);
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  z-index: 800;
+}
+.flip .side_two {
+  -webkit-transform: rotateX(0deg);
+  transform: rotateX(0deg);
+  z-index: 1000;
+}
+.card p {
+  display: table-cell;
+  font-size: 1em;
+  height: 300px;
+  vertical-align: middle;
+  width: 500px;
+}
+#nav_deck {
+  color: rgba(51, 3, 0, 1);
+  display: flex;
+  justify-content: center;
+  position: relative;
+  text-align: center;
+}
+.icon {
+  cursor: pointer;
+  flex-basis: 25%;
+}
+.icon:before {
+  content: attr(data-icon);
+  font-family: 'Flash Cards';
+  visibility: visible;
+}
+.icon button {
+  background-color: rgba(255, 255, 255, 1);
+  border: none;
+  color: #333;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  width: 32px;
+}
+.icon button:hover {
+  background-color: rgba(255, 255, 255, 1);
+}
+.icon button img {
+  margin: 0;
+}
+.icon button img:hover {
+  -webkit-filter: brightness(80%);
+}
+.visuallyhidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+#keyboard_shortcuts {
+  background: rgba(13, 13, 13, 1);
+  bottom: 0;
+  display: none;
+  left: 0;
+  padding: 20px;
+  position: absolute;
+  z-index: 99999;
+}
+#keyboard_shortcuts h1 {
+  text-align: center
+}
+#keyboard_shortcuts td {
+  padding: 15px;
+  text-align: left;
+  width: 300px;
+}
+#keyboard_shortcuts td:first-child {
+  text-align: right
+}
+.or {
+  color: rgba(34, 2, 0, 1);
+  padding: 0 10px;
+}
+#keyboard_shortcuts_toggle {
+  cursor: pointer;
+  position: absolute;
+  right: 25px;
+  top: 25px;
+}
+#keyboard_shortcuts_toggle:before {
+  background: #0080ff;
+  -webkit-background-clip: padding;
+  -moz-background-clip: padding;
+  background-clip: padding-box;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  -ms-border-radius: 20px;
+  -o-border-radius: 20px;
+  border-radius: 20px;
+  border: 1px solid #fff;
+  color: #fff;
+  font-size: 25px;
+  height: 20px;
+  padding: 5px;
+  width: 20px;
+}
+.no-csstransforms3d .flip .side_one, .no-csstransforms3d .side_two {
+  opacity: 0;
+  -webkit-transition: all 0.4s ease-in-out;
+  -moz-transition: all 0.4s ease-in-out;
+  -ms-transition: all 0.4s ease-in-out;
+  -o-transition: all 0.4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+}
+.no-csstransforms3d .flip .side_two {
+  opacity: 1;
+  -webkit-transition: all 0.4s ease-in-out;
+  -moz-transition: all 0.4s ease-in-out;
+  -ms-transition: all 0.4s ease-in-out;
+  -o-transition: all 0.4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+}
+.card:first-child .side_two {
+  font-family: "Helvetica Neue", Helvetica, Arial, "sans-serif";
+}
+ul#deck li:before {
+  content: none;
 }

package/dist/plugins/flashcards/flashcards-example.html

@@ -1,66 +1,66 @@
-<!doctype html>
-<html lang="en">
-<head>
-<title>Flashcards Example</title>
-<meta charset="UTF-8">
-<!--[if lt IE 9]>
-  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-<![endif]-->
-<meta name="viewport" content="initial-scale=1.0, width=device-width" />
-<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Lora:400,700&display=swap" rel="stylesheet">
-<link rel="stylesheet" type="text/css" href="https://d2l.pima.edu/shared/webdev/course-files/css/themes/cards/styles.css">
-<link rel="stylesheet" type="text/css" href="css/custom.css">	
-<!--Flashcards CSS-->
-<link rel="stylesheet" type="text/css" href="https://d2l.pima.edu/shared/webdev/course-files/plugins/flashcards/css/style.css">
-</head>
-<body>
-<div id="main">
-  <header class="header"> <img src="https://via.placeholder.com/1920x600" alt="decorative image of a woman's hand typing on a computer">
-    <div class="text-container">
-      <h1>Flashcards Example</h1>
-    </div>
-  </header>
-  <div class="content-body">
-    <div class="flashcards" id="flipper">
-      <ul id="deck">
-        <li class="card">
-          <div class="side_one">
-            <p>Abstract Word</p>
-          </div>
-          <div class="side_two">
-            <p>Words that refer to ideas or concepts that are removed from material reality. </p>
-          </div>
-        </li>
-        <li class="card">
-          <div class="side_one">
-            <p>Axiology</p>
-          </div>
-          <div class="side_two">
-            <p>A part of worldview; refers to an individual or group's value system. </p>
-          </div>
-        </li>
-        <li class="card">
-          <div class="side_one">
-            <p>Channel</p>
-          </div>
-          <div class="side_two">
-            <p>The means through which the message travels. </p>
-          </div>
-        </li>
-      </ul>
-      <div id="nav_btn">
-          <button class="icon-prev" id="prev"></button>
-          <button class="icon-flip"></button>
-          <button class="icon-next" id="next"></button>
-      </div>
-    </div>
-  </div>
-</div>
-<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
-<script type="text/javascript" src="https://d2l.pima.edu/shared/webdev/course-files/js/scripts.js"></script> 
-<!--Modernizr for Flashcards--> 
-<script src="https://d2l.pima.edu/shared/webdev/course-files/plugins/flashcards/js/vendor/modernizr-2.5.3.min.js"></script> 
-<!--Flashcards JS--> 
-<script src="https://d2l.pima.edu/shared/webdev/course-files/plugins/flashcards/js/flash_cards.min.js"></script>
-</body>
+<!doctype html>
+<html lang="en">
+<head>
+<title>Flashcards Example</title>
+<meta charset="UTF-8">
+<!--[if lt IE 9]>
+  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+<![endif]-->
+<meta name="viewport" content="initial-scale=1.0, width=device-width" />
+<link href="https://fonts.googleapis.com/css?family=Lato:400,700|Lora:400,700&display=swap" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="https://d2l.pima.edu/shared/webdev/course-files/css/themes/cards/styles.css">
+<link rel="stylesheet" type="text/css" href="css/custom.css">	
+<!--Flashcards CSS-->
+<link rel="stylesheet" type="text/css" href="https://d2l.pima.edu/shared/webdev/course-files/plugins/flashcards/css/style.css">
+</head>
+<body>
+<div id="main">
+  <header class="header"> <img src="https://via.placeholder.com/1920x600" alt="decorative image of a woman's hand typing on a computer">
+    <div class="text-container">
+      <h1>Flashcards Example</h1>
+    </div>
+  </header>
+  <div class="content-body">
+    <div class="flashcards" id="flipper">
+      <ul id="deck">
+        <li class="card">
+          <div class="side_one">
+            <p>Abstract Word</p>
+          </div>
+          <div class="side_two">
+            <p>Words that refer to ideas or concepts that are removed from material reality. </p>
+          </div>
+        </li>
+        <li class="card">
+          <div class="side_one">
+            <p>Axiology</p>
+          </div>
+          <div class="side_two">
+            <p>A part of worldview; refers to an individual or group's value system. </p>
+          </div>
+        </li>
+        <li class="card">
+          <div class="side_one">
+            <p>Channel</p>
+          </div>
+          <div class="side_two">
+            <p>The means through which the message travels. </p>
+          </div>
+        </li>
+      </ul>
+      <div id="nav_btn">
+          <button class="icon-prev" id="prev"></button>
+          <button class="icon-flip"></button>
+          <button class="icon-next" id="next"></button>
+      </div>
+    </div>
+  </div>
+</div>
+<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
+<script type="text/javascript" src="https://d2l.pima.edu/shared/webdev/course-files/js/scripts.js"></script> 
+<!--Modernizr for Flashcards--> 
+<script src="https://d2l.pima.edu/shared/webdev/course-files/plugins/flashcards/js/vendor/modernizr-2.5.3.min.js"></script> 
+<!--Flashcards JS--> 
+<script src="https://d2l.pima.edu/shared/webdev/course-files/plugins/flashcards/js/flash_cards.min.js"></script>
+</body>
 </html>