@zzish/math-rich-input 0.1.0

package/dist/math-rich-input.css

@@ -0,0 +1,923 @@
+.MathRichInput-Container {
+  margin:10px;
+  border-radius:5px;
+}
+
+.MathRichInput-Container:focus-within {
+  background-color: white!important;
+  outline: 0px;
+  border:1px solid #663676;
+  /* box-shadow: inset 1px 1px 5px #a0a0a0; */
+}
+
+.MathRichInput-scrollview {
+  display:flex;
+  overflow:scroll;
+  border-radius:5px;
+  overflow: overlay;
+}
+
+.MathRichInput P {
+  padding:0px;
+  margin:0px
+}
+
+.MathRichInput {
+  font-size: 18px;
+  padding: 10px;
+  width: 100%;
+  border-radius: 5px;
+}
+
+.MathRichInput:focus {
+  outline:0;
+}
+
+.MathRichInput .katex {
+  border:0px;
+}
+
+.MathRichInput .base { /* Combine the katex and base class name to ensure the whole equation is surrounded */
+  background-color: #f0f0f0;
+  border: 0px;
+  border: 1px dotted #D0D0D0;
+  border-radius: 5px;
+  padding: 2px 2px 2px 2px;
+  margin: 0px 2px 0px 2px;
+}
+
+.katex .mathnormal {
+  /* font-family: KaTeX_Caligraphic; */
+   font-family: KaTeX_Math;
+   font-style: italic;
+}
+
+.MathRichInput .katex-error {
+  background-color: #f0f0f0;
+  border: 0px;
+  border: 1px dotted #ff8080;
+  border-radius: 5px;
+  padding: 2px 2px 2px 2px;
+  margin: 0px 2px 0px 2px;
+}
+
+/* Note that the top left position of the toolbar is set programatically in componentDidMount */
+
+.Toolbar {
+  position: fixed;
+  z-index: 1;
+  /* width:270px; */
+  height:42px;
+  background-color: white;
+  border: 1px solid #d0d0d0;
+  border-radius: 5px;
+  box-shadow: 1px 1px 5px #a0a0a0;
+	animation: 0.5s fadeIn1;
+  animation-fill-mode: forwards;
+  top: 0px;
+  left: 0px;  /* important to set this so that toolbar initially renders full width */
+}
+
+@keyframes fadeIn1 {
+  0% {
+    opacity: 0;
+  } 
+  100% {
+    opacity: 1.0;
+  }
+}
+
+.Toolbar-button {
+  font-family:sans-serif;
+  font-size: 16px;
+  width:40px;
+  height: 36px;
+  background-color: white;
+  border-radius: 5px;
+  border: 0px;
+  padding: 1px;
+  margin: 2px;
+}
+
+
+.Toolbar-button:hover {
+  color: white;
+  background: #663676;
+  cursor: pointer;
+}
+
+.Toolbar-button:active {
+  background: #808080;
+  color: white;
+  cursor: pointer;
+}
+
+.TB-narrow {
+  width:30px;
+}
+
+.TB-wide {
+  width:46px;
+}
+
+.TB-up4 {
+  position: relative;
+  top:-4px;
+}
+
+.TB-selected {
+  background: #D0D0D0;
+  color: black;
+  cursor: pointer;
+	animation: 0.2s TB-fadeIn;
+  animation-fill-mode: forwards;
+}
+
+.TB-selected:hover {
+  color: white;
+  background: #663676;
+  cursor: pointer;
+}
+
+@keyframes TB-fadeIn {
+  00% {
+    background: white;
+  } 
+  100% {
+    background: #D0D0D0;
+  }
+}
+
+
+/* Tooltip text */
+.Toolbar-button .tooltiptext {
+  font-weight: normal;
+  visibility: hidden;
+  width: 100px;
+  background-color: #222;
+  color: #fff;
+  /*font-weight: bold;*/
+  font-size: 12px;
+  text-align: center;
+  padding: 4px 10px;
+  border-radius: 6px;
+ 
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  z-index: 2;
+  top: -90%;  /* Must leave a small gap between tooltip and button */
+  left: 50px;
+
+  /* transform: translate (50%,0%); */
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.Toolbar-button:hover .tooltiptext {
+	animation: 0.8s fadeIn2;
+  animation-fill-mode: forwards;
+  visibility: visible;
+  /* width: 100px; */
+  /* top: -90%; */  /* Must leave a small gap between tooltip and button */
+  /* left: 20%; */
+  /* margin-left: -50px; */
+}
+
+@keyframes fadeIn2 {
+  00% {
+    opacity: 0;
+  } 
+  70% {
+    opacity: 0;
+  } 
+  100% {
+    visibility: visible;
+    opacity: 0.9;
+  }
+}
+
+/* .tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text 
+} */
+
+ 
+
+
+.EquationEditorModal-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width:100%;
+  height: 100%;
+  background: black;
+  z-index: 99;
+  animation: 0.3s shade;
+  animation-fill-mode: forwards;
+}
+
+@keyframes shade {
+00% {
+  opacity: 0;
+}
+100% {
+  opacity: 0.6;
+}
+}
+
+.EquationEditorModal {
+  background: white;
+  border:1px solid #808080;
+  border-radius:10px;
+  box-shadow: 0px 2px 5px 1px #a0a0a0;
+  position:fixed;
+  max-width:500px;
+  width: 98%;
+  top:50%;
+  left:50%;
+  /* transform: translate(-50%,-50%); */
+  z-index: 100;
+  animation: 0.3s rise;
+  animation-fill-mode: forwards;
+}
+
+@keyframes rise {
+00% {
+  transform: translate(-50%,100%);
+  opacity:0.0;
+}
+100% {
+  transform: translate(-50%,-50%);
+  opacity:1.0;
+}
+}
+
+.EquationEditorModal-mobile {
+  background: white;
+  border:1px solid #808080;
+  border-radius:10px;
+  box-shadow: 0px 2px 5px 1px #a0a0a0;
+  position:fixed;
+  max-width:500px;
+  width: 99%;
+  top:0%;
+  left:50%;
+  transform: translate(-50%, 1px);
+  z-index: 100;
+}
+
+.EquationEditorModal .title {
+  font-size: 14px;
+  color: #404040;
+  text-align: left;
+  background: #E0E0E0;
+  border:0px;
+  border-radius:5px 5px 0px 0px;
+  height:30px;
+  padding:20px 0px 5px 20px;
+  margin:0px;
+}
+
+.EquationEditorModal-mobile .title {
+  font-size: 14px;
+  color: #404040;
+  text-align: left;
+  background: #E0E0E0;
+  border:0px;
+  border-radius:5px 5px 0px 0px;
+  height:30px;
+  padding:20px 0px 5px 20px;
+  margin:0px;
+}
+
+.EquationEditorModal .expertModeSwitch {
+   /* background: url(images/settings-icon.png) no-repeat; */
+  float:right;
+  /* width:36px;
+  height:36px; */
+}
+
+.EquationEditorModal .expertModeSwitch .switch{
+  margin-right:10px;
+  margin-left:10px;
+
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 35px;
+  height: 22px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 14px;
+  width: 14px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #663676;
+  ;
+  /* background-color: #2196F3; */
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(13px);
+  -ms-transform: translateX(13px);
+  transform: translateX(13px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 18px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+/* Note that the top left position of the accent bar is set programatically in componentDidMount */
+
+.AccentBar {
+  position: fixed;
+  z-index: 1;
+  width:348px;  /* max of 346px to ensure fits on Moto G4 mobile device screens */
+  background-color: white;
+  border: 1px solid #d0d0d0;
+  border-radius: 5px;
+  box-shadow: 1px 1px 5px #a0a0a0;
+  padding:5px;
+	animation: 0.4s fadeIn1;
+  animation-fill-mode: forwards;
+}
+
+.AccentBar-compact {
+  position: fixed;
+  z-index: 1;
+  background-color: white;
+  border: 1px solid #d0d0d0;
+  border-radius: 5px;
+  box-shadow: 1px 1px 5px #a0a0a0;
+  padding:5px;
+  top:0px;
+  left:0px; /* Important to set this default so that accent bar renders to optimal width */
+	animation: 0.4s fadeIn1;
+  animation-fill-mode: forwards;
+}
+
+.AccentBar-outerContainer {
+  overflow-y:scroll;
+  border-radius:5px;
+  overflow: overlay;
+}
+
+.AccentBar-innerContainer {
+  height:350px; /* Height of overall box */
+}
+
+@keyframes fadeIn1 {
+  0% {
+    opacity: 0;
+  } 
+  100% {
+    opacity: 1.0;
+  }
+}
+
+.AccentBar .type-a-letter {
+  color: #A0A0A0;
+  font-family:sans-serif;
+  font-size: 14px;
+  font-weight: bold;
+  height: 36px;
+  padding-top:12px;
+  padding-left:20px;
+}
+
+.AccentBar-button {
+  font-family:sans-serif;
+  font-size: 17px;
+  width:40px;
+  height: 36px;
+  background: #f4f4f4;
+  border-radius: 5px;
+  border: 0px;
+  padding: 1px;
+  margin: 6px;
+}
+
+.AB-compact {
+  margin: 0px;
+  background: white;
+}
+
+.AB-narrow {
+  width:30px;
+}
+
+.AccentBar-button:hover {
+  /* filter: saturate(2.0); */
+  color: white;
+  background: #663676;
+  cursor: pointer;
+  box-shadow: 1px 1px 3px #808080;
+	animation: 2s grow;
+  animation-fill-mode: forwards;
+}
+
+@keyframes grow {
+  00% {
+    transform: scale(1);
+    box-shadow: 0px 0px 0px #808080;
+  } 
+  10% {
+    transform: scale(1.3);
+    box-shadow: 1px 1px 3px #808080;
+  }
+  90% {
+    transform: scale(1.3);
+    box-shadow: 1px 1px 3px #808080;
+  }
+  100% {
+    transform: scale(1.8);
+    box-shadow: 1px 1px 3px #808080;
+  }
+}
+
+.AccentBar-button:active {
+  background: #808080;
+  color: white;
+  cursor: pointer;
+}
+
+.AccentBar .tabBar {
+  background: white;
+  text-align: left;
+  border:0px;
+  padding:0px 0px 10px 0px;
+  margin:5px;
+}
+
+.AccentBar .tab {
+  font-size: 14px;
+  font-weight: bold;
+  color: #404040;
+  text-align: left;
+  border:0px;
+  height:30px;
+  padding:2px 5px 2px 5px;
+  margin:2px;
+  border-bottom: 4px solid #d0d0d0;
+}
+
+.AccentBar .tab:hover {
+  cursor:pointer
+}
+
+.AccentBar .tab-selected {
+  font-size: 14px;
+  font-weight: bold;
+  color: #404040;
+  text-align: left;
+  border:0px;
+  height:30px;
+  padding:2px 5px 2px 5px;
+  margin:2px;
+  border-bottom: 4px solid #663676;
+}
+
+.AccentBar .section-label {
+  font-size: 13px;
+  font-weight: bold;
+  /* color: #A0A0A0; */
+  color: #663676;
+  margin-top:8px;
+  margin-left:8px;
+  margin-bottom:4px;
+}
+
+.AccentBar .replace-section {
+  min-height: 70px;
+}
+
+.AccentBar .tabArea {
+  animation: 0.4s fadeIn1;
+  animation-fill-mode: forwards;
+}.EquationEditor {
+  /* max-width:500px; */
+  height:auto;
+  text-align: center;
+}
+
+.EquationEditor .editableAndCursorButtonsWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.EquationEditor .editableWrapper {
+  overflow: auto;
+  width:100%;
+}
+
+.EquationEditor .cursorButton {
+  font-size: 14px;
+  font-weight: bold;
+  color: #663676;
+  background: white;
+  text-align: center;
+  border:1px solid #663676;
+  border-radius: 5px;
+  min-width:40px;
+  width:auto;
+  height:40px;
+  padding:0px;
+  margin-top: 10px;
+  margin-left:15px;
+  margin-right:15px;
+  /* transition: all .2s ease-in-out; */
+}
+
+.EquationEditor .centerBox {
+  display:inline-block;
+  text-align:center;
+}
+
+.EquationEditor .editable {
+  /* width:auto; */
+  text-align: left;
+  min-height:26px;
+  min-width:150px;
+  font-size: 20px;
+  color: #404040;
+  border: 1px solid #B0B0B0;
+  border-radius:5px;
+  /* height:36px; */
+  padding:7px 10px 7px 10px;
+  margin-top:6px;
+  margin-bottom:5px;
+}
+
+.EquationEditor .editable-placeholder {
+  position: absolute;
+  z-index: -1;
+  min-height:26px;
+  min-width:150px; 
+  font-size: 15px;
+  color:grey;
+  /* Note the x translation needs to be updatad programatically if the modal width changes */
+  transform: translate(-12px,-36px) 
+}
+
+.EquationEditor .editable:focus-within {
+  border-radius:5px;
+  border: 1px solid #663676!important;
+  box-shadow: 0px 0px 0px white;
+  /* box-shadow: inset 1px 1px 5px #a0a0a0; */
+}
+
+.latexInputAreaWrapper {
+  width:auto;
+}
+
+.EquationEditor .katexRenderedInput {
+  text-align: left;
+  min-height:30px;
+  width:90%;
+  font-size: 16px;
+  color: #404040;
+  border: 0px solid #B0B0B0;
+  border-radius:5px;
+  /* height:36px; */
+  padding:7px 10px 4px 10px;
+  margin:5px 15px 5px 15px;
+}
+
+.EquationEditor .latexInput {
+  text-align: left;
+  height:88px;
+  width:90%;
+  font-size: 16px;
+  /* color: #202020; */
+  /* background-color: #e0e0e0; */
+  /* color: #00ff00;
+  background-color: #202020; */
+  color: #007000;
+  background-color: #e0e0e0;
+  border: 1px solid #B0B0B0;
+  border-radius:5px;
+  padding:7px 10px 5px 10px;
+  margin-top:10px;
+}
+
+.EquationEditor .latexInput:focus {
+  border: 1px solid #663676!important;
+  outline: 0;
+  /* outline: 2px solid #663676!important; */  /* Has square corners */
+  /* box-shadow: inset 1px 1px 5px #a0a0a0, 0px 0px 3px #663676; */
+}
+
+.EquationEditor .insertButton {
+  font-size: 14px;
+  color: white;
+  background: #663676;
+  text-align: left;
+  border:0px;
+  border-radius:5px;
+  height:36px;
+  padding:0px 30px 0px 30px;
+  margin-top:5px;
+  margin-bottom:5px;
+  margin-left:5px;
+  margin-right:5px;
+}
+
+.EquationEditor .cancelButton {
+  font-size: 14px;
+  background: white;
+  color: #663676;
+  text-align: left;
+  border:1px solid #663676;
+  border-radius:5px;
+  height:36px;
+  padding:0px 30px 0px 30px;
+  margin-bottom:10px;
+  margin-left:5px;
+  margin-right:5px;
+}
+
+.EquationEditor .insertButton:hover {
+  color: white;
+  background: #461656;
+  cursor: pointer; 
+}
+
+.EquationEditor .recentSymbols-recentText-active {
+  font-size: 14px;
+  font-weight: bold;
+  color: #404040;
+  margin-right: 10px;
+}
+
+.EquationEditor .recentSymbols-recentText-not-active {
+  font-size: 14px;
+  font-weight: bold;
+  color: #808080;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.EquationEditor .tabBar {
+  background: white;
+  text-align: left;
+  border:0px;
+  padding:10px 10px 5px 20px;
+  margin:5px;
+}
+
+.EquationEditor .tab {
+  font-size: 14px;
+  font-weight: bold;
+  color: #404040;
+  text-align: left;
+  border:0px;
+  height:30px;
+  padding:5px 10px 5px 10px;
+  margin:5px;
+  border-bottom: 6px solid #d0d0d0;
+}
+
+.EquationEditor .tab:hover {
+  cursor:pointer
+}
+.EquationEditor .tab-selected {
+  font-size: 14px;
+  font-weight: bold;
+  color: #404040;
+  text-align: left;
+  border:0px;
+  height:30px;
+  padding:5px 10px 5px 10px;
+  margin:5px;
+  border-bottom: 6px solid #663676;
+}
+
+.EquationEditor .recentSymbolsButtonArea {
+  text-align: left;
+  width:486px;
+  padding:2px 2px 2px 2px;
+  margin:5px;
+  margin-left:15px;
+}
+
+.EquationEditor .symbolButtonAreasOuterContainer {
+  overflow-x: auto;
+}
+
+.EquationEditor .symbolButtonAreasInnerContainer {
+  display: flex;
+  width: 2330px;
+  /* align-items: stretch; */
+}
+
+.EquationEditor .symbolButtonArea-1 {
+  text-align: left;
+  width:42px;
+  padding:12px 12px 12px 12px;
+  margin:0px;
+}
+
+.EquationEditor .symbolButtonArea-2 {
+  text-align: left;
+  width:84px;
+  padding:12px 12px 12px 12px;
+  margin:0px;
+}
+
+.EquationEditor .symbolButtonArea-3 {
+  text-align: left;
+  width:126px;
+  padding:12px 12px 12px 12px;
+  margin:0px;
+}
+
+.EquationEditor .symbolButtonArea-4 {
+  text-align: left;
+  width:168px;
+  padding:12px 12px 12px 12px;
+  margin:0px;
+}
+
+.EquationEditor .symbolButtonArea-5 {
+  text-align: left;
+  width:210px;
+  padding:12px 12px 12px 12px;
+  margin:0px;
+}
+
+.EquationEditor .symbolButtonArea-6 {
+  text-align: left;
+  width:252px;
+  padding:12px 12px 12px 12px;
+  margin:0px;
+}/* Fixes is a katex bug where horizontal lines are not rendering */
+/* .frac-line {
+  background-color: #404040;
+  height:0.03em;
+}
+.overline-line {
+  background-color: #404040;
+  height:0.03em;
+} */
+
+.SymbolButton {
+  overflow: hidden; /* Important to fix a bug where katex renders parts of the equation outside the box */
+  font-size: 14px;
+  font-weight: bold;
+  color: #202020;
+  background: #e0e0e0;
+  text-align: center;
+  border:0px;
+  border-radius: 5px;
+  width:36px;
+  height:36px;
+  padding:1px 1px 1px 1px;
+  margin:3px;
+  /* transition: all .2s ease-in-out; */
+}
+
+
+.SymbolButton:hover {
+  filter: saturate(2.0);
+  color: black;
+  /* transform: scale(1.3); */
+  cursor: pointer;
+  box-shadow: 1px 1px 3px #808080;
+	animation: 2s grow;
+  animation-fill-mode: forwards;
+}
+
+@keyframes grow {
+  00% {
+    transform: scale(1);
+    box-shadow: 0px 0px 0px #808080;
+  } 
+  10% {
+    transform: scale(1.3);
+    box-shadow: 1px 1px 3px #808080;
+  }
+  90% {
+    transform: scale(1.3);
+    box-shadow: 1px 1px 3px #808080;
+  }
+  100% {
+    transform: scale(1.8);
+    box-shadow: 1px 1px 3px #808080;
+  }
+}
+
+.SymbolButton:active {
+  background: #808080;
+  color: white;
+  transform: scale(1.3);
+  cursor: pointer;
+}
+
+.SymbolButton-fadeIn {
+  opacity:1;
+  width:100px;
+  height:100px;
+  transition: width 0.5s, height 0.5s, opacity 0.5s 0.5s;
+}
+
+.highlight-0{
+  background: #ebc9eb;
+  /* background: #80e0e0; */
+}
+/*
+.highlight-1{
+  background: #c0e0e0;
+}
+/* .highlight-2{
+  background: #c0e0e0;
+} */
+
+
+.highlight-operators{
+  background: #F8e8D8;
+}
+
+.highlight-angles{
+  background: #cceded;
+}
+
+.highlight-greeklower{
+  background: #F8e8D8;
+}
+
+.highlight-greekupper{
+  background: #cceded;
+}
+
+.highlight-misc{
+  background: #F8e8D8;
+}
+
+.highlight-sets{
+  background: #cceded;
+}
+
+.highlight-chemistry{
+  background: #F8e8D8;
+}
+
+.highlight-elements{
+  background: #cceded;
+}
+
+.highlight-physics2{
+  background: #F8e8D8;
+}
+
+.highlight-physics3{
+  background: #cceded;
+}
+
+.highlight-expert{
+  background: #f4d6f5;
+}
+
+.highlight-matrices{
+  background: #f4d6f5;
+}