<div class="dialog dialog-select dialog-is-open l-dialog" id="dialog" tabindex="-1">
<div class="dialog-x-content">
<nav class="sidebar sidebar-dialog ">
<div class="brandvoice brandvoice-dialog">
<h3>Your results (9)</h3>
<button data-dialog="close" data-dialog-target="dialog" type="button" class="button">Close</button>
</div>
<button class="sidebaroption sidebaroption-is-active" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Child Development or Early Care and Education
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span class="sidebaroption-x-body">Provide intellectual, psychosocial, and physical care and development of children.</span>
</span>
</button>
<button class="sidebaroption" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Family and Consumer Sciences, General
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span class="sidebaroption-x-body">Balance personal, family and work responsibilities throughout the life cycle.</span>
</span>
</button>
<button class="sidebaroption" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Food Processing and Related Technology
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span class="sidebaroption-x-body">Use chemical, physical, and engineering principles to manufacture and distribute food products.</span>
</span>
</button>
<button class="sidebaroption" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Gerontology
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span class="sidebaroption-x-body">Work with older adults.</span>
</span>
</button>
<button class="sidebaroption" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Hospitality
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span class="sidebaroption-x-body">Organize and administer hospitality services, management, and training of personnel.</span>
</span>
</button>
<button class="sidebaroption" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Natural Resources
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
</span>
</button>
<button class="sidebaroption" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Nutrition, Foods, and Culinary Arts
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
</span>
</button>
<button class="sidebaroption" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Public Relations
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
</span>
</button>
</nav>
</div>
</div>
<div class="{{render '@dialog--select'}} {{render '@l-dialog'}}" id="dialog" tabindex="-1">
<div class="dialog-x-content">
<nav class="{{render '@sidebar--dialog'}}">
<div class="{{render '@brandvoice--dialog'}}">
<h3>Your results (9)</h3>
<button data-dialog="close" data-dialog-target="dialog" type="button" class="button">Close</button>
</div>
<button class="sidebaroption sidebaroption-is-active" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Child Development or Early Care and Education
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span class="sidebaroption-x-body">Provide intellectual, psychosocial, and physical care and development of children.</span>
</span>
</button>
<button class="sidebaroption" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Family and Consumer Sciences, General
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span
class="sidebaroption-x-body">Balance personal, family and work responsibilities throughout the life cycle.</span>
</span>
</button>
<button class="sidebaroption" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Food Processing and Related Technology
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span class="sidebaroption-x-body">Use chemical, physical, and engineering principles to manufacture and distribute food products.</span>
</span>
</button>
<button class="sidebaroption" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Gerontology
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span class="sidebaroption-x-body">Work with older adults.</span>
</span>
</button>
<button class="sidebaroption" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Hospitality
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span class="sidebaroption-x-body">Organize and administer hospitality services, management, and training of personnel.</span>
</span>
</button>
<button class="sidebaroption" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Natural Resources
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
</span>
</button>
<button class="sidebaroption" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Nutrition, Foods, and Culinary Arts
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
</span>
</button>
<button class="sidebaroption" type="button">
<span class="sidebaroption-x-container">
<span class="sidebaroption-x-title">
<span class="sidebaroption-x-highlight">
Public Relations
<svg class="sidebaroption-x-activeindicator">
<use xlink:href="#icon-pointerright"></use>
</svg>
</span>
</span>
<span class="sidebaroption-x-body">Conserve and manage renewable natural resources.</span>
</span>
</button>
</nav>
</div>
</div>
/* No context defined. */
.dialog {
// align-items: safe center;
background-color: rgba($color-dark1, .5);
box-sizing: border-box;
display: flex;
// justify-content: safe center;
opacity: 0;
// overflow-y: auto;
pointer-events: none;
transition: opacity $transition-duration $transition-easing;
.dialog-x-content {
// background-color: $color-light1;
height: 100%;
// overflow-x: hidden;
// overflow-y: auto;
position: relative;
width: 100%;
}
.dialog-x-close {
position: absolute;
right: $gridspacing;
top: $gridspacing;
}
&.dialog-is-open {
opacity: 1;
pointer-events: auto;
}
}
.dialog-select {
.dialog-x-content {
margin: 0 auto;
}
@media (min-width: $sidebar-max-width) {
padding-top: $gridspacing * 10;
}
}
No notes defined.