/**
* @stylesheet equation-editor.css Equation Editor
* @parent ux.features
* The Equation Editor is an on-screen keybaord that provides access to mathematical symbols not available on the hardware keyboard.
**/
/**
* @styles 0-ee-presentation Presentation
* The Equation Editor appears at the bottom of the content area. It is divided into two sections.
* * _The tabs area_ contains the __Close__ button and the tabs used to navigate between button areas. The tab area has a thin top border (`#B6BDC3`) and a background gradient from `#F2F5F8` at the top to `#BECAD1` at the bottom.
* * _The button area_ displays the buttons associated with the currently selected tab. The button area has a dark gray `#373737` background.
*
* ### Tab States
* * _Default_. Tab has an off-white `#F2F2F2` background and a thin gray `#7C7C7C` border. Tab text is the same dark gray `#373737` as the button area.
* * _Selected_. Visible when the associated button area is on screen. Tab text changes to white `#FFFFFF`, and tab background changes to the same gray `#373737` as the button area.
*
* ### Close Button States
* * _Default_. Button text is white `#FFFFFF`, and button background is a gradient from `#36718D` at the top to `#295F80` at the bottom. A _down_ icon appears within a darker background `#255571` at the left of the button.
* * _Hover_. Button background gradient becomes darker, changing to `#3B5E70` at the top and `#2B4555` at the bottom. _Down_ icon background also becomes darker `#274454`.
*
* ### Symbol Button States
* * _Enabled_. Button background is white `#FFFFFF`, and button content is gray `#555555`.
* * _Disabled_. Button opacity reduces to 30%.
**/
#ee-wrapper {
background: #373737;
display: flex;
flex-direction: column;
font-size: 24px; /* Prevents zoom */
height: 9.4em;
transition: height 0.3s;
}
#ee-wrapper.hidden {
height: 0;
}
.ee-tabarea {
align-items: flex-end;
background: linear-gradient(#F2F5F8, #BECAD1);
border-top: 0.05em solid #B6BDC3;
display: flex;
flex: 0 0 auto;
height: 2.625em;
justify-content: space-between;
padding: 0 0.42em 0 0.2em;
}
.ee-tabarea ul {
align-items: flex-end;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.ee-tabarea li {
background: #f2f2f2;
border-right: 0.05em solid #7c7c7c;
border-top: 0.05em solid #7c7c7c;
color: #373737;
cursor: pointer;
display: block;
min-width: 9em;
padding: 0.42em 0;
text-align: center; }
.ee-tabarea li:first-of-type {
border-left: 0.05em solid #7c7c7c;
border-top-left-radius: 0.2em; }
.ee-tabarea li:last-of-type {
border-top-right-radius: 0.2em; }
.ee-tabarea li.selected {
background: #373737;
border-color: #373737;
border-radius: 0.2em 0.2em 0 0;
color: #fff;
padding: 0.84em 0 0.4em;
pointer-events: none;
}
#ee-btn-close {
align-self: center;
background: linear-gradient(#36718D, #295F80);
color: #fff;
display: flex;
line-height: 1.25;
padding: 0.25em 0.75em 0.3em 0.75em;
transition: background 0.2s; }
#ee-btn-close:hover {
background: linear-gradient(#3B5E70, #2B4555); }
#ee-btn-close:before {
background: #255571;
border-radius: 50%;
content: '\ea29';
display: block;
font-family: "naep-ee";
font-size: 1.25em;
line-height: 1;
margin-right: 0.5em; }
#ee-btn-close:hover:before {
background: #274454; }
.ee-btnarea {
flex: 1 0 auto;
padding: 0.625em;
}
.ee-btnarea-row {
display: flex;
justify-content: space-between; }
.ee-btnarea-row:first-of-type {
margin-bottom: 0.625em; }
.ee-btn {
background: #fff;
border: none;
border-radius: 0.2em;
color: #555;
cursor: pointer;
display: block;
flex: 0 0 auto;
font-family: inherit;
font-size: inherit;
letter-spacing: 0.02em;
line-height: 1;
min-width: 2.45em;
padding: 0.7em;
transition: opacity 0.2s; }
.ee-btnarea .ee-btn {
margin-right: 0.625em; }
.ee-btnarea-row .ee-btn:last-of-type {
margin-right: 2.95em; }
.ee-btnarea-row:first-of-type .ee-btn:last-of-type {
margin-right: 0; }
.ee-btn.disabled {
opacity: 0.3;
pointer-events: none; }
[class^="icon-ee-"],
[class*=" icon-ee-"] {
letter-spacing: normal;
padding: 0; }
[class^="icon-ee-"]:before,
[class*=" icon-ee-"]:before {
font-size: 2.42em; }
.ee-spacer {
flex: 0 0 auto;
margin-right: 0.625em;
min-width: 2.45em;
}
/**
* @styles 1-ee-behavior Behavior
* ### Opening and Closing
* The Equation Editor can be opened and closed by selecting the Equation Editor button in the [system-toolbar.css]. It can also be closed by selecting the __Close__ button at its upper right.
*
* When the Equation Editor is toggled on or off, it animates up or down (respectively) to help the user notice the change in state.
*
* The Equation Editor never overlays content. Rather, it reduces the available height for the content area when it is on screen.
*
* ### Interaction with Text Entry Fields
* The Equation Editor’s symbol buttons are disabled by default. They become enabled when the user selects (i.e., gives focus to) a text entry field. If the user selects any button or tab in the Equation Editor while a text entry field has focus, the text entry field retains focus (and the symbol buttons remain enabled).
*
* If a text entry field has focus when the Equation Editor is opened, the content area will automatically scroll to ensure that the text entry field remains visible.
**/
/**
@styles 3-ee-grade4 Grade 4 Variant
* The grade 4 variant’s buttons fit in a single button area, so no tabs are needed.
* _Demo is shown at 50% actual size. To see a full-size demo, click here._
* @iframe ../../demos/equation-editor/equation-editor-4.html 400
**/
/**
@styles 4-ee-grade8 Grade 8 Variant
* _Demo is shown at 50% actual size. To see a full-size demo, click here._
* @iframe ../../demos/equation-editor/equation-editor-8.html 400
**/
/**
@styles 5-ee-grade12 Grade 12 Variant
* _Demo is shown at 50% actual size. To see a full-size demo, click here._
* @iframe ../../demos/equation-editor/equation-editor-12.html 400
**/