f4d110c896
This recreates the Zooming Image Tool template for the HTML block. It does it in such a way that doesn't depend on any external resources: both the loupe code and sample image are inlined. Some benefits to this version are: * We can now maintain the loupe javascript code properly * Because the javascript is included in the contents of the block itself, the course author can customize it as needed * As opposed to the previous iteration, the magnified image URL is now optional: if it's not present, the regular image will be used for magnification * There can now be two or more instances of the tool in the same unit. This also removes some CSS left over from the previous iteration.
188 lines
3.1 KiB
SCSS
188 lines
3.1 KiB
SCSS
// studio - elements - vendor overrides
|
|
// ====================
|
|
|
|
// JQUI calendar
|
|
.ui-datepicker {
|
|
@extend %t-copy-sub2;
|
|
|
|
border-color: $darkGrey;
|
|
border-radius: 2px;
|
|
background: $white;
|
|
font-family: $f-sans-serif;
|
|
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
|
z-index: 100000 !important;
|
|
|
|
.ui-widget-header {
|
|
background: $darkGrey;
|
|
border: none;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.ui-datepicker-next,
|
|
.ui-datepicker-prev {
|
|
@include transition(none);
|
|
|
|
&.ui-state-hover {
|
|
border-color: transparent;
|
|
background: $mediumGrey;
|
|
|
|
.ui-icon-circle-triangle-e,
|
|
.ui-icon-circle-triangle-w {
|
|
background-image: url(../css/vendor/ui-lightness/images/ui-icons_ffffff_256x240.png);
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-state-default {
|
|
border-color: $mediumGrey;
|
|
color: $blue;
|
|
|
|
@include transition(none);
|
|
|
|
&.ui-state-hover {
|
|
background: $orange;
|
|
border-color: $orange;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
.ui-state-highlight {
|
|
background: $blue;
|
|
border-color: $blue;
|
|
color: $white;
|
|
}
|
|
|
|
.ui-state-active {
|
|
background: $orange;
|
|
border-color: $orange;
|
|
color: $white;
|
|
}
|
|
}
|
|
|
|
// ====================
|
|
|
|
// JQUI timepicker
|
|
.ui-timepicker-list {
|
|
z-index: 100000 !important;
|
|
}
|
|
|
|
// ====================
|
|
|
|
// reset styles to remove ui-lightness jquery ui theme from the tabs component (used in the add component problem tab menu)
|
|
.ui-tabs {
|
|
padding: 0;
|
|
white-space: normal;
|
|
}
|
|
|
|
.ui-corner-all,
|
|
.ui-corner-bottom,
|
|
.ui-corner-left,
|
|
.ui-corner-top,
|
|
.ui-corner-br,
|
|
.ui-corner-right {
|
|
border-radius: 0;
|
|
}
|
|
|
|
|
|
.ui-widget-content {
|
|
border: 0;
|
|
background: none;
|
|
}
|
|
|
|
.ui-widget {
|
|
@extend %t-copy-base;
|
|
}
|
|
|
|
.ui-widget-header {
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
.ui-tabs .ui-tabs-nav {
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-tabs .ui-tabs-nav li {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
top: 0;
|
|
float: none;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
|
|
.ui-tabs-nav {
|
|
li {
|
|
top: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
a {
|
|
@extend %t-regular;
|
|
|
|
float: none;
|
|
}
|
|
}
|
|
|
|
.ui-tabs .ui-tabs-panel {
|
|
padding: 0;
|
|
}
|
|
|
|
// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling
|
|
.problem-type-tabs {
|
|
border: none;
|
|
list-style-type: none;
|
|
width: 100%;
|
|
|
|
@include linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
|
|
//background-color: $lightBluishGrey;
|
|
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
|
|
|
|
li:first-child {
|
|
margin-left: $baseline;
|
|
}
|
|
|
|
li {
|
|
opacity: 0.8;
|
|
|
|
a:focus {
|
|
outline: none;
|
|
border: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui-autocomplete {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
cursor: default;
|
|
|
|
@include linear-gradient($gray-l5, $white);
|
|
|
|
border-right: 1px solid $gray-l2;
|
|
border-bottom: 1px solid $gray-l2;
|
|
border-left: 1px solid $gray-l2;
|
|
background-color: $gray-l5;
|
|
box-shadow: inset 0 1px 2px $shadow-l1;
|
|
color: $color-copy-emphasized;
|
|
|
|
li.ui-menu-item {
|
|
padding: 0;
|
|
margin: 0;
|
|
|
|
a {
|
|
color: $color-copy-emphasized;
|
|
}
|
|
|
|
a.ui-state-focus {
|
|
border: none;
|
|
background-color: $blue;
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|