@cu-mkp/editioncrafter 0.0.4

package/dist/cjs/src/scss/_imageZoomControl.scss

@@ -0,0 +1,51 @@
+.ImageZoomControl {
+  position: absolute;
+  z-index: 1;
+  top: 8rem;
+  color: white;
+  // width: 1rem;
+  list-style: none;
+  background: #4A4A4A;
+  opacity: 0.4;
+  margin:0;
+  padding:.4rem .5rem;
+  border-radius: 0.3rem;
+  @include md {
+      top:4rem;
+      left: 2rem;
+  }
+}
+
+.ImageZoomControl > li {
+  color: #E0E0E0;
+}
+
+.ImageZoomControl > li > .zoom-in {
+  margin-top: 8px;
+}
+
+.ImageZoomControl > li:hover {
+  color: white;
+}
+
+.ImageZoomControl > li > .zoom-3 {
+  margin-top: 8px;
+}
+
+.ImageZoomControl > li > .zoom-2 {
+  margin-top: 8px;
+  margin-left: 5px;
+}
+
+.ImageZoomControl > li > .zoom-1 {
+  margin-top: 8px;
+  margin-left: 7px;
+}
+
+.ImageZoomControl > li > .zoom-out {
+  margin-top: 8px;
+}
+
+.ImageZoomControl > li > .zoom-grid {
+  margin-top: 30px;
+}

package/dist/cjs/src/scss/_jumpbox.scss

@@ -0,0 +1,42 @@
+.jumpToFolio_component {
+	margin: 1rem 0 0 -4.5rem;
+	padding: 0.6rem;
+	height: 1.2rem;
+	width: 9.5rem;
+	background: #e7e7e7;
+	border: 1px solid rgba(90, 98, 102, 0.53);
+	border-radius: 0.3rem;
+	-webkit-box-shadow: 6px 6px 5px 0 rgba(0, 0, 0, 0.211765);
+	-moz-box-shadow: 6px 6px 5px 0 rgba(0, 0, 0, 0.211765);
+	box-shadow: 6px 6px 5px 0 rgba(0, 0, 0, 0.211765);
+	font-family: sans-serif;
+}
+.jumpToFolio_component input:focus{
+    outline: none;
+}
+
+.jumpToFolio_component:after,
+.jumpToFolio_component:before {
+	bottom: 100%;
+	left: 50%;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+}
+
+.jumpToFolio_component:after {
+	border-color: rgba(255, 255, 255, 0);
+	border-bottom-color: #e7e7e7;
+	border-width: 9px;
+	margin-left: -9px;
+}
+
+.jumpToFolio_component:before {
+	border-color: rgba(194, 225, 245, 0);
+	border-bottom-color: rgba(90, 98, 102, 0.53);
+	border-width: 11px;
+	margin-left: -11px;
+}

package/dist/cjs/src/scss/_navigation.scss

@@ -0,0 +1,135 @@
+.navigationComponent {
+      #tool-bar-buttons{
+            font-size: 15px;
+      }
+      position: fixed;
+      z-index: 2;
+      height:48px;
+	white-space: nowrap;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+      user-select: none;
+      padding:4px;
+      top: 75px;
+      background-color: white;
+      border-radius: 0.3rem;
+      @include sm {
+            top: 80px;
+      }
+      @include md {
+            top: initial;
+      }
+      button{
+            cursor: pointer;
+      }
+}
+
+.navigationRow{
+      display:flex;
+      justify-content:space-between;
+      padding:12px 10px 12px 10px;
+      
+      
+}
+
+.helpIcon {
+      display: none;
+      margin-top:6px;
+      margin-right:16px;
+      @include md {
+            display: block;
+      }
+}
+
+.dropdownV2 {
+      width:150px;
+      margin-right:10px;
+}
+
+.imageViewComponent .navigationComponent {
+      background-color: #4A4A4A;
+      border-radius: 0.3rem;
+      opacity: 0.8;
+      @include md {
+            background-color: rgba(0,0,0,1);
+            color: #ffffff;
+            border-radius: 0;
+            opacity: 1;
+      }
+
+}
+.transcriptionViewComponent .navigationComponent {
+	background-color: rgba(255,255,255,1);;
+	color: #000000;
+}
+
+#doc-type-help:after {
+      color: rgb(151, 142, 142);
+}
+#doc-type-help{
+      .dark{
+            .MuiSvgIcon-root.MuiSelect-icon{
+                  color: white;
+            }
+      }
+}
+
+.breadcrumbs {
+      overflow:hidden;
+      display: none;
+      @include md {
+            display: block;
+      }
+}
+
+.breadcrumbs .folioName {
+  display:inline;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 900;
+  text-decoration:underline;
+}
+
+.closeX { 
+      float: right;
+      padding: 3px;
+      font-style: bold;
+      &:hover {
+            cursor: pointer;
+      }
+}
+
+.helpContainer {
+      padding:12px;
+      width:335px;
+      height:740px;
+
+      .readingGuide {
+            
+            td {
+                  padding: 8px;
+            }
+
+            h2 {
+                  margin-top: 16px;
+                  margin-bottom: 10px;
+            }
+      }
+}
+
+
+.searchHelpContainer {
+      padding: 10px 15px 10px 0;
+      width:335px;
+}
+
+.helpHeader{
+      text-align:center;
+}
+
+
+
+
+

package/dist/cjs/src/scss/_pagination.scss

@@ -0,0 +1,36 @@
+.paginationComponent {
+	white-space: nowrap;
+	
+	text-align: center;
+	font-size: 1.2rem;
+	font-weight: 700;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+      user-select: none;
+      margin-top:52px;
+	@include md {
+		margin-bottom: 0;
+	}
+}
+// .paginationComponent:nth-of-type(3){
+//   padding:1rem 0 0 0;
+// }
+
+.paginationControl {
+	padding: 16px;
+	
+}
+
+.paginationControl .arrow {
+	font-size: 1.8rem;
+	color: #4A4A4A;
+	margin: 1rem 1rem 0;
+	cursor: pointer;
+}
+
+.paginationControl .folioName {
+	position: relative;
+	top: -.2rem;
+	color: #4A4A4A;
+}

package/dist/cjs/src/scss/_spinner.scss

@@ -0,0 +1,60 @@
+$spinner-size: 1rem;
+
+#loadingStateModal {
+	position: fixed;
+	z-index: 9000;
+	background-color: rgba(0, 0, 0, 0.48);
+	width: 100vw;
+	height: 100vh;
+}
+
+.spinner {
+	width:100%;
+	height:100%;
+	margin: calc(50vh - (#{$spinner-size}/2)) auto 0 auto;
+	text-align: center;
+}
+
+.spinner > div {
+	width: $spinner-size;
+	height: $spinner-size;
+	background-color: #ffffff;
+	border-radius: 100%;
+	display: inline-block;
+	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+	-webkit-animation-delay: -0.32s;
+	animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+	-webkit-animation-delay: -0.16s;
+	animation-delay: -0.16s;
+}
+@-webkit-keyframes sk-bouncedelay {
+	0%,
+	100%,
+	80% {
+		-webkit-transform: scale(0);
+	}
+
+	40% {
+		-webkit-transform: scale(1.0);
+	}
+}
+@keyframes sk-bouncedelay {
+	0%,
+	100%,
+	80% {
+		-webkit-transform: scale(0);
+		transform: scale(0);
+	}
+
+	40% {
+		-webkit-transform: scale(1.0);
+		transform: scale(1.0);
+	}
+}

package/dist/cjs/src/scss/_splitPaneView.scss

@@ -0,0 +1,35 @@
+.split-pane-view {
+  height: 100%;
+  width: 100%;
+  display: grid;
+  grid-template-areas: "image_viewer divider transcription";
+}
+
+.split-pane-view > .divider {
+    z-index: 2;
+    grid-area: divider;
+    width: 1rem;
+    background: #BBB;
+    cursor:ew-resize;
+    display: flex;
+}
+
+.split-pane-view > .divider > .drawer-button {
+  align-self: center;
+  align: center;
+  cursor: auto;
+}
+
+.split-pane-view > .divider > .drawer-button:hover {
+  color: white;
+}
+
+.split-pane-view > .divider > .hidden {
+  display: none;
+}
+
+.split-pane-view {
+  #annotation-view{
+    font-size: 16px;
+  }
+}

package/dist/cjs/src/scss/_thumbnails.scss

@@ -0,0 +1,17 @@
+$color-selected: rgba(7,122,255,0.831);
+
+figure {
+	padding: 0.3rem 0 0;
+	border-radius: 0.2rem;
+	margin: 0;
+	text-align: center;
+}
+
+figure.current {
+	background-color: $color-selected;
+}
+
+.thumbnail-caption.current {
+	color: $color-selected !important;
+	font-weight: 900;
+}

package/dist/cjs/src/scss/_transcriptView.scss

@@ -0,0 +1,178 @@
+
+.transcriptionViewComponent {
+	overflow: scroll;
+    height:calc(100vh - 7rem);
+	.transcriptContent {
+		padding: 50px 16px;
+		@include md {
+			padding: 5px 16px;
+		}
+	   
+	  -webkit-user-select: text;
+	  -moz-user-select: text;
+	  -ms-user-select: text;
+	  user-select: text;
+	  margin-bottom:92px;
+  
+	  figure {
+		  display: inline;
+	  }
+	  	
+	.block[data-layout='right-middle'] {
+		max-width: 250px;
+	}
+	
+	.block[data-layout='right-top'] {
+		max-width: 250px;
+	}
+	
+	.block[data-layout='right-bottom'] {
+		max-width: 250px;
+	}
+	
+	// TODO refactor to appropriate TEI element
+	// .ups {
+	// 	background: lightgray;
+	// 	font-size: 14px;
+	// }
+	
+	.x-small-inline-figure {
+		margin: 5px;
+		border: 1px solid gray;
+		width: 30px;
+	}
+	
+	.small-inline-figure {
+		margin: 5px;
+		border: 1px solid gray;
+		width: 60px;
+	}
+	
+	.medium-inline-figure {
+		margin: 5px;
+		border: 1px solid gray;
+		width: 200px;
+	}
+	
+	.large-inline-figure {
+		margin: 5px;
+		border: 1px solid gray;
+		width: 350px;
+	}
+	
+	
+	.surface {
+		grid-area: transcription;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	
+	.grid-mode {
+		display: grid;
+		grid-auto-rows: minmax(min-content, 0fr);
+		grid-gap: 2px;
+	}
+	
+	.surface > .small-font {
+		font-size: 11pt;
+	}
+	
+	.surface > div {
+		padding: 10px;
+	}
+	
+	.surface > #z0 {
+		grid-area: z0;
+	}
+	
+	.surface > #z1 {
+		grid-area: z1;
+	}
+	
+	.surface > #z2 {
+		grid-area: z2;
+	}
+	
+	.surface > #z3 {
+		grid-area: z3;
+	}
+	
+	.surface > #z4 {
+		grid-area: z4;
+	}
+	
+	.surface > #z5 {
+		grid-area: z5;
+	}
+	
+	.surface > #z6 {
+		grid-area: z6;
+	}
+	
+	.surface > #z7 {
+		grid-area: z7;
+	}
+	
+	.surface > #z8 {
+		grid-area: z8;
+	}
+	
+	.surface > #z9 {
+		grid-area: z9;
+	}
+	
+	.surface > #z10 {
+		grid-area: z10;
+	}
+	
+	.surface > #z11 {
+		grid-area: z11;
+	}
+	
+	.surface > #z12 {
+		grid-area: z12;
+	}
+	
+	.surface > #z13 {
+		grid-area: z13;
+	}
+	
+	.surface > #z14 {
+		grid-area: z14;
+	}
+	
+	.surface > #z15 {
+		grid-area: z15;
+	}
+	
+	.surface > #z16 {
+		grid-area: z16;
+	}
+	
+	.surface > #z17 {
+		grid-area: z17;
+	}
+	
+	.surface > #z18 {
+		grid-area: z18;
+	}
+	
+	.surface > #z19 {
+		grid-area: z19;
+	}
+	
+	.surface > #z20 {
+		grid-area: z20;
+	}
+	 .highlight {
+		 background-color: yellow;
+	 }
+  }
+}
+
+.editor-comment-content {
+	word-wrap:break-word;
+}
+
+

package/dist/cjs/src/scss/_watermark.scss

@@ -0,0 +1,19 @@
+$watermark-size: 10rem;
+
+.watermark{
+	width:100%;
+	height:100%;
+	margin: calc(50vh - (#{$watermark-size}/2)) auto 0 auto;
+}
+.transcriptContent .watermark{
+   margin: calc(50vh - (25rem/2)) auto 0 auto;
+}
+
+.watermark_contents{
+	width:$watermark-size;
+	height:$watermark-size;
+	background-image: url("../img/lizard-no-bg.png");
+	background-size: 100%;
+	background-repeat: no-repeat;
+	margin: auto auto auto auto;
+}

package/dist/cjs/src/scss/_xmlView.scss

@@ -0,0 +1,25 @@
+.xmlViewComponent .navigationComponent {
+  background-color: white;
+  color: #000000; }
+  
+.xmlContent {
+  padding: 0;
+  margin: 4.5rem 0 0;
+  width: calc(100% - 1.2rem);
+  min-height: 100vh;
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+  min-width: 10rem;
+ }
+
+.xmlViewComponent {
+  overflow: scroll;
+  margin: 0 0 0 1rem;
+  height: calc(100vh - 7rem);
+}
+
+.xmlContentInner {
+  overflow-x: scroll;
+}

package/dist/cjs/src/scss/editioncrafter.scss

@@ -0,0 +1,109 @@
+@charset "utf-8";
+
+/* Normalize first */
+@import url("https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css");
+
+/*  Google fonts */
+// Link to these fonts: https://fonts.google.com/share?selection.family=Lato:wght@400;700%7CMartel%7CMartel%20Sans:wght@200%7CTaviraj:wght@300
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Martel+Sans:wght@200&family=Martel:wght@400;700&family=Taviraj:wght@300;500&display=swap');
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+/*
+	FontAwesome icon font http://fontawesome.io/
+	FIXME: This is still used by the imageView control panel, the rest of the app uses FA5 react npm module
+*/
+@import url("https://use.fontawesome.com/releases/v5.0.8/css/all.css");
+
+// Breakpoints
+$screen-xs-min: 0px;
+$screen-sm-min: 600px;
+$screen-md-min: 960px;
+$screen-lg-min: 1280px;
+$screen-xl-min: 1920px;
+
+// Standard Image Sizes
+$image-xs: 175px;
+$image-sm: 300px;
+$image-md: 425px;
+$image-lg: 600px;
+$image-xl: 900px;
+
+// Animation Mixins
+@mixin keyframes($animation-name) {
+	@-webkit-keyframes #{$animation-name} {
+	  @content;
+	}
+	@-moz-keyframes #{$animation-name} {
+	  @content;
+	}  
+	@-ms-keyframes #{$animation-name} {
+	  @content;
+	}
+	@-o-keyframes #{$animation-name} {
+	  @content;
+	}  
+	@keyframes #{$animation-name} {
+	  @content;
+	}
+  }
+  
+@mixin animation($str) {
+-webkit-animation: #{$str};
+-moz-animation: #{$str};
+-ms-animation: #{$str};
+-o-animation: #{$str};
+animation: #{$str};      
+}
+
+// BREAKPOINT MIXINS
+@mixin xs {
+   @media (min-width: #{$screen-xs-min}) {
+       @content;
+   }
+}
+@mixin sm {
+   @media (min-width: #{$screen-sm-min}) {
+       @content;
+   }
+}
+@mixin md {
+   @media (min-width: #{$screen-md-min}) {
+       @content;
+   }
+}
+@mixin lg {
+   @media (min-width: #{$screen-lg-min}) {
+       @content;
+   }
+}
+@mixin xl {
+   @media (min-width: #{$screen-xl-min}) {
+       @content;
+   }
+}
+
+@mixin first-child() {
+  &:first-of-type {
+    @content
+  }
+}
+
+@import "base";
+@import "globalNavigation";
+
+@import "spinner";
+@import "thumbnails";
+@import "watermark";
+@import "navigation";
+@import "pagination";
+
+@import "diplomatic";
+@import "imageGridView";
+@import "splitPaneView";
+@import "imageView";
+@import "imageZoomControl";
+@import "transcriptView";
+@import "xmlView";
+@import "glossary";
+@import "jumpbox";
+
+@import "CETEIcean";