@oat-sa/tao-core-ui 1.68.0 → 2.0.0

package/src/maths/calculator/css/calculator.css

@@ -10,373 +10,314 @@ Usage:
 /* Do not edit */
 /* font size mixin specific to calculator to use em instead of rem unit */
 .calculator {
-    position: relative;
-    font-family: monospace, sans-serif;
-    font-size: 12px;
-    width: 100%;
-    height: 100%;
-    display: -ms-flex;
-    display: flex;
-    flex-direction: column;
-    -ms-align-content: stretch;
-    align-content: stretch;
-}
-
+  position: relative;
+  font-family: monospace, sans-serif;
+  font-size: 12px;
+  width: 100%;
+  height: 100%;
+  display: -ms-flex;
+  display: flex;
+  flex-direction: column;
+  -ms-align-content: stretch;
+  align-content: stretch;
+}
 .calculator sup,
 .calculator sub {
-    font-size: 0.75em;
+  font-size: 0.75em;
 }
-
 .calculator sup {
-    top: -0.5em;
+  top: -0.5em;
 }
-
 .calculator sub {
-    bottom: -0.5em;
+  bottom: -0.5em;
 }
-
-.calculator [data-type='exponent'] {
-    vertical-align: super;
-    font-size: 0.75em;
+.calculator [data-type=exponent] {
+  vertical-align: super;
+  font-size: 0.75em;
 }
-
-.calculator [data-type='variable'] {
-    font-weight: bold;
+.calculator [data-type=variable] {
+  font-weight: bold;
 }
-
-.calculator [data-type='function']:not([data-value*='rt']) {
-    padding-right: 0.3em;
+.calculator [data-type=function]:not([data-value*=rt]) {
+  padding-right: 0.3em;
 }
-
 .calculator .screen,
 .calculator .input {
-    position: relative;
-    flex: 0 0 auto;
+  position: relative;
+  flex: 0 0 auto;
 }
-
 .calculator .focus {
-    outline: 2px solid #0e5d91;
+  outline: 2px solid rgb(14, 93, 145);
 }
-
 .calculator .keyboard {
-    padding: 0 20px 20px;
-    position: relative;
-    display: -ms-flex;
-    display: flex;
-    flex: 1 1;
+  padding: 0 20px 20px;
+  position: relative;
+  display: -ms-flex;
+  display: flex;
+  flex: 1 1;
 }
-
 .calculator .calculator-keyboard {
-    position: relative;
-    display: -ms-flex;
-    display: flex;
-    flex-direction: column;
-    -ms-align-content: stretch;
-    align-content: stretch;
-    background: #f3f1ef;
-    color: #222;
-    width: 100%;
-    height: auto;
-    padding-top: 8px;
-}
-
+  position: relative;
+  display: -ms-flex;
+  display: flex;
+  flex-direction: column;
+  -ms-align-content: stretch;
+  align-content: stretch;
+  background: #f3f1ef;
+  color: #222;
+  width: 100%;
+  height: auto;
+  padding-top: 8px;
+}
 .calculator .calculator-keyboard .row {
-    position: relative;
-    display: -ms-flex;
-    display: flex;
-    flex-direction: row;
-    -ms-align-content: stretch;
-    align-content: stretch;
-    flex: 1 1 auto;
-    width: 100%;
-    height: 100%;
-}
-
+  position: relative;
+  display: -ms-flex;
+  display: flex;
+  flex-direction: row;
+  -ms-align-content: stretch;
+  align-content: stretch;
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+}
 .calculator .calculator-keyboard .spacer {
-    flex: 1 1 auto;
-    width: 3.2em;
-    height: 100%;
+  flex: 1 1 auto;
+  width: 3.2em;
+  height: 100%;
 }
-
 .calculator .calculator-keyboard span {
-    position: relative;
-    display: inline-block;
-    z-index: 1;
-    font-size: 1.3em !important;
+  position: relative;
+  display: inline-block;
+  z-index: 1;
+  font-size: 1.3em !important;
 }
-
 .calculator .calculator-keyboard button {
-    position: relative;
-    background-color: #f3f1ef;
-    color: #222 !important;
-    display: inline-block;
-    border-radius: 0;
-    border: none;
-    padding: 0;
-    text-align: center;
-    text-shadow: none;
-    cursor: pointer;
-    flex: 1 1 auto;
-    width: 3.2em;
-    height: 100%;
-    font-size: 1em !important;
-}
-
+  position: relative;
+  background-color: #f3f1ef;
+  color: #222 !important;
+  display: inline-block;
+  border-radius: 0;
+  border: none;
+  padding: 0;
+  text-align: center;
+  text-shadow: none;
+  cursor: pointer;
+  flex: 1 1 auto;
+  width: 3.2em;
+  height: 100%;
+  font-size: 1em !important;
+}
 .calculator .calculator-keyboard button:not(.switch):before {
-    content: ' ';
-    border-radius: 50%;
-    display: inline-block;
-    position: absolute;
-    z-index: 0;
-    top: calc(50% - 1.6em + 2px);
-    left: calc(50% - 1.6em + 2px);
-    width: calc(3.2em - 4px);
-    height: calc(3.2em - 4px);
-}
-
+  content: " ";
+  border-radius: 50%;
+  display: inline-block;
+  position: absolute;
+  z-index: 0;
+  top: calc(50% - 1.6em + 2px);
+  left: calc(50% - 1.6em + 2px);
+  width: calc(3.2em - 4px);
+  height: calc(3.2em - 4px);
+}
 .calculator .calculator-keyboard button:hover:before {
-    background: #a4a9b1;
+  background: #a4a9b1;
 }
-
 .calculator .calculator-keyboard button.disabled {
-    visibility: hidden;
+  visibility: hidden;
 }
-
 .calculator .calculator-keyboard button.switch span {
-    color: #222 !important;
-    border-color: #919191 !important;
-    border-top: 1px solid;
-    border-bottom: 1px solid;
-    height: auto;
-    width: 100%;
-    padding: 4px 0.5em;
-    font-size: 1em !important;
-}
-
+  color: #222 !important;
+  border-color: #919191 !important;
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  height: auto;
+  width: 100%;
+  padding: 4px 0.5em;
+  font-size: 1em !important;
+}
 .calculator .calculator-keyboard button.switch.first span {
-    border-left: 1px solid;
-    border-top-left-radius: 2px;
-    border-bottom-left-radius: 2px;
+  border-left: 1px solid;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
 }
-
 .calculator .calculator-keyboard button.switch.last span {
-    border-right: 1px solid;
-    border-top-right-radius: 2px;
-    border-bottom-right-radius: 2px;
+  border-right: 1px solid;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
 }
-
 .calculator .calculator-keyboard button.switch:before {
-    content: ' ';
-    border-radius: 2px;
-    display: inline-block;
-    position: absolute;
-    z-index: 0;
-    top: calc(50% - 0.5em - 4px);
-    bottom: calc(50% - 0.5em - 4px);
-    left: 3px;
-    right: 3px;
-}
-
+  content: " ";
+  border-radius: 2px;
+  display: inline-block;
+  position: absolute;
+  z-index: 0;
+  top: calc(50% - 0.5em - 4px);
+  bottom: calc(50% - 0.5em - 4px);
+  left: 3px;
+  right: 3px;
+}
 .calculator .calculator-keyboard button.operand span {
-    font-weight: bold;
-    font-size: 1.7em !important;
+  font-weight: bold;
+  font-size: 1.7em !important;
 }
-
 .calculator .calculator-keyboard button.command span {
-    color: #0e5d91 !important;
+  color: rgb(14, 93, 145) !important;
 }
-
 .calculator .calculator-keyboard button.execute:before {
-    background: #3e7da7;
+  background: #3e7da7;
 }
-
 .calculator .calculator-keyboard button.execute span {
-    font-weight: bold;
-    color: white !important;
-    font-size: 1.7em !important;
+  font-weight: bold;
+  color: white !important;
+  font-size: 1.7em !important;
 }
-
 .calculator .calculator-keyboard button svg {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    stroke-width: 0;
-    stroke: currentColor;
-    fill: currentColor;
-}
-
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+}
 .calculator .calculator-keyboard button svg.backspace-outline {
-    width: 1.2em;
-    height: 1.2em;
+  width: 1.2em;
+  height: 1.2em;
 }
-
-.calculator.degree .calculator-keyboard button.switch[data-command='degree']:before {
-    background: #3e7da7;
+.calculator.degree .calculator-keyboard button.switch[data-command=degree]:before {
+  background: #3e7da7;
 }
-
-.calculator.degree .calculator-keyboard button.switch[data-command='degree'] span {
-    color: white !important;
+.calculator.degree .calculator-keyboard button.switch[data-command=degree] span {
+  color: white !important;
 }
-
-.calculator.radian .calculator-keyboard button.switch[data-command='radian']:before {
-    background: #3e7da7;
+.calculator.radian .calculator-keyboard button.switch[data-command=radian]:before {
+  background: #3e7da7;
 }
-
-.calculator.radian .calculator-keyboard button.switch[data-command='radian'] span {
-    color: white !important;
+.calculator.radian .calculator-keyboard button.switch[data-command=radian] span {
+  color: white !important;
 }
-
 .calculator .simple-screen {
-    position: relative;
-    width: 100%;
-    font-size: 1.3em !important;
-    color: #222;
-    font-family: monospace;
+  position: relative;
+  width: 100%;
+  font-size: 1.3em !important;
+  color: #222;
+  font-family: monospace;
 }
-
 .calculator .simple-screen .screen-panel {
-    position: relative;
-    width: 100%;
-    overflow: auto;
-    word-break: break-all;
-    text-align: left;
-    padding: 8px 8px;
-}
-
+  position: relative;
+  width: 100%;
+  overflow: auto;
+  word-break: break-all;
+  text-align: left;
+  padding: 8px 8px;
+}
 .calculator .simple-screen .history {
-    font-size: 1em !important;
-    border: 1px solid #ddd;
-    color: #4e4e4e;
-    height: calc(16px + 3.9em);
-    line-height: 1.3em;
+  font-size: 1em !important;
+  border: 1px solid #ddd;
+  color: #4e4e4e;
+  height: calc(16px + 3.9em);
+  line-height: 1.3em;
 }
-
 .calculator .simple-screen .history .history-line .history-expression {
-    text-align: left;
+  text-align: left;
 }
-
 .calculator .simple-screen .history .history-line .history-expression,
 .calculator .simple-screen .history .history-line .history-expression .term {
-    font-weight: lighter;
+  font-weight: lighter;
 }
-
 .calculator .simple-screen .history .history-line .history-result {
-    text-align: right;
-    font-weight: bolder;
+  text-align: right;
+  font-weight: bolder;
 }
-
 .calculator .simple-screen .history .history-line .history-result:before {
-    content: '=';
-    display: inline-block;
-    font-weight: lighter;
-    padding-right: 0.2em;
+  content: "=";
+  display: inline-block;
+  font-weight: lighter;
+  padding-right: 0.2em;
 }
-
 .calculator .simple-screen .expression {
-    font-size: 1.3em !important;
-    background: white;
-    color: #222;
-    height: calc(16px + 3.2em);
-    line-height: 1.6em;
+  font-size: 1.3em !important;
+  background: rgb(255, 255, 255);
+  color: #222;
+  height: calc(16px + 3.2em);
+  line-height: 1.6em;
 }
-
 .calculator .simple-screen .term {
-    padding: 0;
+  padding: 0;
 }
-
-.calculator .simple-screen .term.term-operator:not([data-token='POW']):not([data-token='FAC']):not([data-token='NEG']) {
-    padding: 0 0.2em;
+.calculator .simple-screen .term.term-operator:not([data-token=POW]):not([data-token=FAC]):not([data-token=NEG]) {
+  padding: 0 0.2em;
 }
-
-.calculator .simple-screen .term.term-operator[data-token='FAC'], .calculator .simple-screen .term.term-operator[data-token='NEG'] {
-    margin-left: -0.1em;
-    margin-right: -0.1em;
+.calculator .simple-screen .term.term-operator[data-token=FAC], .calculator .simple-screen .term.term-operator[data-token=NEG] {
+  margin-left: -0.1em;
+  margin-right: -0.1em;
 }
-
-.calculator .simple-screen .term.term-operator[data-token='POS'] {
-    display: none;
+.calculator .simple-screen .term.term-operator[data-token=POS] {
+  display: none;
 }
-
-.calculator .simple-screen .term.term-function:not([data-token='SQRT']):not([data-token='CBRT']) {
-    padding-right: 0.2em;
+.calculator .simple-screen .term.term-function:not([data-token=SQRT]):not([data-token=CBRT]) {
+  padding-right: 0.2em;
 }
-
 .calculator .simple-screen .term.term-operand {
-    font-weight: bold;
+  font-weight: bold;
 }
-
 .calculator .simple-screen .term.term-modificator {
-    font-weight: lighter;
+  font-weight: lighter;
 }
-
 .calculator .simple-screen .term.term-constant {
-    font-style: italic;
-    font-weight: bold;
+  font-style: italic;
+  font-weight: bold;
 }
-
 .calculator .simple-screen .term.term-variable {
-    font-weight: bold;
-    color: #3e7da7;
-}
-
-.calculator .simple-screen .term.term-variable[data-token='VAR_ANS'] {
-    background: #ecf2f6;
-    padding: 0;
-    margin: 0 0.4em;
-    position: relative;
-}
-
-.calculator .simple-screen .term.term-variable[data-token='VAR_ANS']::before, .calculator .simple-screen .term.term-variable[data-token='VAR_ANS']::after {
-    background: #ecf2f6;
-    content: '';
-    border-radius: 50%;
-    border: 2px none;
-    position: absolute;
-    z-index: 0;
-    top: 0;
-    bottom: 0;
-    width: 0.4em;
-}
-
-.calculator .simple-screen .term.term-variable[data-token='VAR_ANS']::before {
-    border-left-style: solid;
-    border-left-color: #3e7da7;
-    left: -0.2em;
-}
-
-.calculator .simple-screen .term.term-variable[data-token='VAR_ANS']::after {
-    border-right-style: solid;
-    border-right-color: #3e7da7;
-    right: -0.2em;
-}
-
-.calculator .simple-screen .term.term-variable[data-token='VAR_ANS'] * {
-    position: relative;
-    z-index: 1;
-}
-
+  font-weight: bold;
+  color: #3e7da7;
+}
+.calculator .simple-screen .term.term-variable[data-token=VAR_ANS] {
+  background: #ecf2f6;
+  padding: 0;
+  margin: 0 0.4em;
+  position: relative;
+}
+.calculator .simple-screen .term.term-variable[data-token=VAR_ANS]::before, .calculator .simple-screen .term.term-variable[data-token=VAR_ANS]::after {
+  background: #ecf2f6;
+  content: "";
+  border-radius: 50%;
+  border: 2px none;
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  bottom: 0;
+  width: 0.4em;
+}
+.calculator .simple-screen .term.term-variable[data-token=VAR_ANS]::before {
+  border-left-style: solid;
+  border-left-color: #3e7da7;
+  left: -0.2em;
+}
+.calculator .simple-screen .term.term-variable[data-token=VAR_ANS]::after {
+  border-right-style: solid;
+  border-right-color: #3e7da7;
+  right: -0.2em;
+}
+.calculator .simple-screen .term.term-variable[data-token=VAR_ANS] * {
+  position: relative;
+  z-index: 1;
+}
 .calculator .simple-screen .term.term-unknown {
-    color: #d8ae5b;
-    -webkit-text-decoration: underline wavy #ba122b;
-            text-decoration: underline wavy #ba122b;
+  color: rgb(216, 174, 91);
+  -webkit-text-decoration: underline wavy rgb(186, 18, 43);
+          text-decoration: underline wavy rgb(186, 18, 43);
 }
-
 .calculator .simple-screen .term.term-elide {
-    display: none;
+  display: none;
 }
-
 .calculator .simple-screen .term.term-error {
-    color: #ba122b;
+  color: rgb(186, 18, 43);
 }
-
 .calculator .simple-screen .term.term-syntaxError {
-    color: #ba122b;
-    -webkit-text-decoration: underline wavy #ba122b;
-            text-decoration: underline wavy #ba122b;
+  color: rgb(186, 18, 43);
+  -webkit-text-decoration: underline wavy rgb(186, 18, 43);
+          text-decoration: underline wavy rgb(186, 18, 43);
 }
-
 .calculator.error .screen .expression {
-    background: #f1d0d5;
+  background: #f1d0d5;
 }
-
 /*# sourceMappingURL=calculator.css.map */