f630848bef
The "Leave Current/Switch/Select" Session button was sometimes wrapping its text if it wasn't given enough horizontal space. Now it should never wrap, instead stealing space from the dropdown next to it (or being bumped to a line below the dropdown). LEARNER-3668
129 lines
2.7 KiB
SCSS
129 lines
2.7 KiB
SCSS
// Shared styling between courses and programs dashboard
|
|
.course-entitlement-selection-container {
|
|
width: 100%;
|
|
position: relative;
|
|
flex-grow: 1;
|
|
|
|
.action-header {
|
|
padding-bottom: $baseline/4;
|
|
font-weight: $font-weight-bold;
|
|
color: theme-color("dark");
|
|
}
|
|
|
|
.action-controls {
|
|
display: flex;
|
|
|
|
.session-select {
|
|
background-color: theme-color("inverse");
|
|
height: $baseline*1.5;
|
|
flex-grow: 5;
|
|
margin-bottom: $baseline*0.4;
|
|
max-width: calc(100% - 200px);
|
|
}
|
|
|
|
.enroll-btn-initial {
|
|
@include margin-left($baseline);
|
|
|
|
height: $baseline*1.5;
|
|
flex-grow: 1;
|
|
letter-spacing: 0;
|
|
white-space: nowrap;
|
|
background: theme-color("inverse");
|
|
border-color: theme-color("primary");
|
|
color: theme-color("primary");
|
|
text-shadow: none;
|
|
font-size: $font-size-base;
|
|
padding: 0 $baseline/4;
|
|
box-shadow: none;
|
|
border-radius: $border-radius-sm;
|
|
transition: all 0.4s ease-out;
|
|
|
|
&:hover {
|
|
background: theme-color("primary");
|
|
border-color: theme-color("primary");
|
|
color: theme-color("inverse");
|
|
}
|
|
|
|
&.disabled {
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-down(xs) {
|
|
flex-direction: column;
|
|
|
|
.session-select {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.enroll-btn-initial {
|
|
margin: $baseline/4 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.popover {
|
|
.popover-title {
|
|
margin-bottom: $baseline/2;
|
|
}
|
|
|
|
.action-items {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: $baseline/2;
|
|
|
|
.final-confirmation-btn {
|
|
box-shadow: none;
|
|
border: 1px solid theme-color("dark");
|
|
background: none;
|
|
color: theme-color("dark");
|
|
text-shadow: none;
|
|
letter-spacing: 0;
|
|
flex-grow: 1;
|
|
margin: 0 $baseline/4;
|
|
padding: $baseline/10 $baseline;
|
|
font-size: $font-size-base;
|
|
|
|
&:hover {
|
|
background: theme-color("primary");
|
|
color: theme-color("inverse");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Styling overrides specific to the programs dashboard
|
|
.program-course-card {
|
|
.course-text {
|
|
.fa-close {
|
|
color: theme-color("error");
|
|
}
|
|
|
|
.enroll-error {
|
|
@include margin-left($baseline/4);
|
|
|
|
font-size: $font-size-sm;
|
|
}
|
|
|
|
.change-session {
|
|
@include margin(0, 0, 0, $baseline/4);
|
|
|
|
padding: 0;
|
|
font-size: $font-size-sm;
|
|
letter-spacing: normal;
|
|
}
|
|
}
|
|
|
|
.course-entitlement-selection-container {
|
|
padding-top: $baseline/2;
|
|
|
|
.action-header,
|
|
.action-controls .session-select{
|
|
font-size: $font-size-sm;
|
|
|
|
}
|
|
}
|
|
}
|