diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 0000000000..a304db9471 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1,3 @@ +src/main/resources/css +src/main/resources/lib +src/main/resources/scss/utils/_icons.scss diff --git a/src/main/js/legacy/app/account/identity/Index.css b/src/main/js/legacy/app/account/identity/Index.css index 5bd7fc98c0..5d80871080 100644 --- a/src/main/js/legacy/app/account/identity/Index.css +++ b/src/main/js/legacy/app/account/identity/Index.css @@ -6,7 +6,6 @@ background-color: var(--nav-background-color, #313131); } - :global(.media-toolbar) .identity:global(.x-component.identity) :global(.profile-pic .presence) { background-color: #313131; -} \ No newline at end of file +} diff --git a/src/main/js/legacy/app/account/identity/Index.js b/src/main/js/legacy/app/account/identity/Index.js index 09cdf9e79e..934b4fc69a 100644 --- a/src/main/js/legacy/app/account/identity/Index.js +++ b/src/main/js/legacy/app/account/identity/Index.js @@ -1,21 +1,19 @@ const Ext = require('@nti/extjs'); -const classnames = require('classnames/bind'); const NTIFormat = require('legacy/util/Format'); -const Styles = require('./Index.css'); +const styles = require('./Index.css'); require('./components/Settings'); -const cx = classnames.bind(Styles); -const knockOut = cx('knockout'); -const noKnockOut = cx('no-knockout'); +const knockOut = styles.knockout; +const noKnockOut = styles['no-knockout']; module.exports = exports = Ext.define('NextThought.app.account.identity.Index', { extend: 'Ext.Component', alias: 'widget.identity', - cls: `identity x-menu ${cx('identity')}`, + cls: `identity x-menu ${styles.identity}`, renderTpl: Ext.DomHelper.markup([ {cls: 'profile-pic', 'data-qtip': '{user:displayName}', tabindex: '0', 'aria-label': '{user:displayName}', role: 'button' ,cn: [ diff --git a/src/main/js/legacy/app/account/registration/Prompt.js b/src/main/js/legacy/app/account/registration/Prompt.js index 9e8a799369..514a236445 100644 --- a/src/main/js/legacy/app/account/registration/Prompt.js +++ b/src/main/js/legacy/app/account/registration/Prompt.js @@ -1,5 +1,3 @@ -const Url = require('url'); - const Ext = require('@nti/extjs'); const PromptStateStore = require('legacy/app/prompt/StateStore'); @@ -30,7 +28,7 @@ let registerPrompt = module.exports = exports = Ext.define('NextThought.app.acco this.callParent(arguments); let src = this.Prompt.data.link; - this.postMessageSourceId = Url.resolve(window.location.href, src); + this.postMessageSourceId = new URL(src, window.location.href).toString(); this.Prompt.Header.disableClose(); diff --git a/src/main/js/legacy/app/chat/components/gutter/Tab.js b/src/main/js/legacy/app/chat/components/gutter/Tab.js index 9f30a62dbf..33d0e849ef 100644 --- a/src/main/js/legacy/app/chat/components/gutter/Tab.js +++ b/src/main/js/legacy/app/chat/components/gutter/Tab.js @@ -1,22 +1,21 @@ const Ext = require('@nti/extjs'); -const classnames = require('classnames/bind'); +const cx = require('classnames'); const ChatActions = require('legacy/app/chat/Actions'); const ChatStateStore = require('legacy/app/chat/StateStore'); const NavigationStateStore = require('legacy/app/navigation/StateStore'); -const Styles = require('./Tab.css'); -const cx = classnames.bind(Styles); +const styles = require('./Tab.css'); -const lightCls = cx('light'); -const darkCls = cx('dark'); +const lightCls = styles.light; +const darkCls = styles.dark; module.exports = exports = Ext.define('NextThought.app.chat.components.gutter.Tab', { extend: 'Ext.Component', renderTpl: Ext.DomHelper.markup([ - {cls: cx('chat-notifications-icon', 'icon'), role: 'button', tabindex: '0', 'aria-label': 'Chat Notifications'} + {cls: cx('chat-notifications-icon', styles.icon), role: 'button', tabindex: '0', 'aria-label': 'Chat Notifications'} ]), setTheme (theme) { diff --git a/src/main/js/legacy/app/contentviewer/reader/NoteOverlay.js b/src/main/js/legacy/app/contentviewer/reader/NoteOverlay.js index 64403a1a4d..f10d3fda0d 100644 --- a/src/main/js/legacy/app/contentviewer/reader/NoteOverlay.js +++ b/src/main/js/legacy/app/contentviewer/reader/NoteOverlay.js @@ -6,7 +6,6 @@ const LineUtils = require('legacy/util/Line'); const {getString} = require('legacy/util/Localization'); const SharingUtils = require('legacy/util/Sharing'); -const WBUtils = require('../../whiteboard/Utils'); const UserdataActions = require('../../userdata/Actions'); const DiscussionEditor = require('../components/editor/DiscussionEditor'); diff --git a/src/main/js/legacy/app/course/enrollment/components/parts/CreditCards.scss b/src/main/js/legacy/app/course/enrollment/components/parts/CreditCards.scss index 759f336f44..1a9d79634f 100644 --- a/src/main/js/legacy/app/course/enrollment/components/parts/CreditCards.scss +++ b/src/main/js/legacy/app/course/enrollment/components/parts/CreditCards.scss @@ -8,6 +8,11 @@ padding-top: 7px; padding-bottom: 7px; height: 2.4rem; + + .missing-name & { + border: 1px solid var(--primary-red); + box-shadow: inset 4px 0 0 0 var(--primary-red); + } } .card-input .card-number, @@ -33,13 +38,6 @@ } } - .name-input { - .missing-name & { - border: 1px solid var(--primary-red); - box-shadow: inset 4px 0 0 0 var(--primary-red); - } - } - .card-input .card-number { .missing-number & { border: 1px solid var(--primary-red); @@ -61,5 +59,4 @@ } } } - } diff --git a/src/main/js/legacy/app/course/info/components/Menu.js b/src/main/js/legacy/app/course/info/components/Menu.js index 212c5f4328..de9479d45e 100644 --- a/src/main/js/legacy/app/course/info/components/Menu.js +++ b/src/main/js/legacy/app/course/info/components/Menu.js @@ -2,7 +2,6 @@ const Ext = require('@nti/extjs'); const {scoped} = require('@nti/lib-locale'); const CoursesStateStore = require('legacy/app/library/courses/StateStore'); -const {getString} = require('legacy/util/Localization'); const DEFAULT_TEXT = { instructor: { diff --git a/src/main/js/legacy/app/course/overview/Index.js b/src/main/js/legacy/app/course/overview/Index.js index 1bd82c7d2e..c2f71bc5dd 100644 --- a/src/main/js/legacy/app/course/overview/Index.js +++ b/src/main/js/legacy/app/course/overview/Index.js @@ -15,6 +15,7 @@ const Slidedeck = require('legacy/model/Slidedeck'); const Video = require('legacy/model/Video'); const LTIExternalToolAsset = require('legacy/model/LTIExternalToolAsset'); const WebinarAsset = require('legacy/model/WebinarAsset'); + const {ROUTE_BUILDERS} = require('./components/Constants'); require('legacy/mixins/FillScreen'); diff --git a/src/main/js/legacy/app/course/overview/components/editing/Editor.js b/src/main/js/legacy/app/course/overview/components/editing/Editor.js index dc98f6ec42..41cf0359ea 100644 --- a/src/main/js/legacy/app/course/overview/components/editing/Editor.js +++ b/src/main/js/legacy/app/course/overview/components/editing/Editor.js @@ -223,7 +223,7 @@ module.exports = exports = Ext.define('NextThought.app.course.overview.component addPreview: function () {}, addParentSelection: function (record, parentRecord, rootRecord, onChange) {}, - addHeaderCmp() {}, + addHeaderCmp () {}, addFormCmp: function () { var values = this.getDefaultValues(); diff --git a/src/main/js/legacy/app/course/overview/components/editing/content/Prompt.js b/src/main/js/legacy/app/course/overview/components/editing/content/Prompt.js index 07cb02d902..9e42174f67 100644 --- a/src/main/js/legacy/app/course/overview/components/editing/content/Prompt.js +++ b/src/main/js/legacy/app/course/overview/components/editing/content/Prompt.js @@ -1,5 +1,4 @@ const Ext = require('@nti/extjs'); -const classnames = require('classnames/bind'); const OutlinenodeChildCreation = require('../outline/outlinenode/ChildCreation'); @@ -21,12 +20,10 @@ const styles = require('./Prompt.css'); require('../outline/Prompt'); -const cx = classnames.bind(styles); - module.exports = exports = Ext.define('NextThought.app.course.overview.components.editing.content.Prompt', { extend: 'NextThought.app.course.overview.components.editing.outline.Prompt', alias: 'widget.overview-editing-content-editor', - cls: cx('overview-editing-content-editor-prompt'), + cls: styles['overview-editing-content-editor-prompt'], statics: { diff --git a/src/main/js/legacy/app/course/overview/components/editing/content/overviewgroup/ListItem.css b/src/main/js/legacy/app/course/overview/components/editing/content/overviewgroup/ListItem.css index 9157c82bbe..7ebea4cdea 100644 --- a/src/main/js/legacy/app/course/overview/components/editing/content/overviewgroup/ListItem.css +++ b/src/main/js/legacy/app/course/overview/components/editing/content/overviewgroup/ListItem.css @@ -8,4 +8,4 @@ float: left; clear: none; } -} \ No newline at end of file +} diff --git a/src/main/js/legacy/app/course/overview/components/editing/content/overviewgroup/ListItem.js b/src/main/js/legacy/app/course/overview/components/editing/content/overviewgroup/ListItem.js index 817be4bb0e..320f942da5 100644 --- a/src/main/js/legacy/app/course/overview/components/editing/content/overviewgroup/ListItem.js +++ b/src/main/js/legacy/app/course/overview/components/editing/content/overviewgroup/ListItem.js @@ -1,5 +1,4 @@ const Ext = require('@nti/extjs'); -const classnames = require('classnames/bind'); const WindowsActions = require('legacy/app/windows/Actions'); const DndOrderingContainer = require('legacy/mixins/dnd/OrderingContainer'); @@ -18,8 +17,7 @@ const VideoListItem = require('../video/ListItem'); const VideorollListItem = require('../videoroll/ListItem'); const WebinarListItem = require('../webinar/ListItem'); -const Styles = require('./ListItem.css'); -const cx = classnames.bind(Styles); +const styles = require('./ListItem.css'); require('legacy/common/components/BoundCollection'); require('legacy/mixins/dnd/OrderingItem'); @@ -40,7 +38,7 @@ module.exports = exports = Ext.define('NextThought.app.course.overview.component }, transitionStates: true, - cls: `overview-section overview-section-editing ${cx('overview-group')}`, + cls: `overview-section overview-section-editing ${styles['overview-group']}`, bodyCls: 'overview-group-body', initComponent: function () { diff --git a/src/main/js/legacy/app/course/overview/components/editing/content/quotes/BaseQuote.js b/src/main/js/legacy/app/course/overview/components/editing/content/quotes/BaseQuote.js index 3968bf5396..7a2d204dd8 100644 --- a/src/main/js/legacy/app/course/overview/components/editing/content/quotes/BaseQuote.js +++ b/src/main/js/legacy/app/course/overview/components/editing/content/quotes/BaseQuote.js @@ -1,8 +1,6 @@ const Ext = require('@nti/extjs'); -const classnames = require('classnames/bind'); const styles = require('./Quote.css'); -const cx = classnames.bind(styles); const QUOTE_COMPLETED = 'inapp-quote-done'; module.exports = exports = Ext.define( @@ -47,7 +45,7 @@ module.exports = exports = Ext.define( this.itemEditorCmp = this.add({ xtype: 'box', - cls: cx('quote-iframe'), + cls: styles['quote-iframe'], autoEl: { tag: 'iframe', src: `${this.hubspotPageUrl}?firstname=${firstName}${email ? `&email=${email}` : ''}&client_site_name=${clientSite}` diff --git a/src/main/js/legacy/app/course/overview/components/editing/content/survey/Editor.js b/src/main/js/legacy/app/course/overview/components/editing/content/survey/Editor.js index 8f85b06eab..da118d33ab 100644 --- a/src/main/js/legacy/app/course/overview/components/editing/content/survey/Editor.js +++ b/src/main/js/legacy/app/course/overview/components/editing/content/survey/Editor.js @@ -4,7 +4,7 @@ const {encodeForURI} = require('@nti/lib-ntiids'); const SurveyRef = require('legacy/model/SurveyRef'); const NavigationActions = require('legacy/app/navigation/Actions'); -const Type = 'application/vnd.nextthought.nasurvey'; +// const Type = 'application/vnd.nextthought.nasurvey'; require('../questionset/types/Assignment'); require('./SurveySelection'); diff --git a/src/main/js/legacy/app/course/overview/components/editing/controls/Publish.scss b/src/main/js/legacy/app/course/overview/components/editing/controls/Publish.scss index 058415d2d3..a3f7359440 100644 --- a/src/main/js/legacy/app/course/overview/components/editing/controls/Publish.scss +++ b/src/main/js/legacy/app/course/overview/components/editing/controls/Publish.scss @@ -1,9 +1,9 @@ .flyout.publish-controls { - z-index: 10; + z-index: 10; } - .outline-node-listitem { - .publish-trigger { - margin: 10px; - } - } +.outline-node-listitem { + .publish-trigger { + margin: 10px; + } +} diff --git a/src/main/js/legacy/app/course/scorm-content/Index.js b/src/main/js/legacy/app/course/scorm-content/Index.js index 202a0076ab..27ca9a40cc 100644 --- a/src/main/js/legacy/app/course/scorm-content/Index.js +++ b/src/main/js/legacy/app/course/scorm-content/Index.js @@ -1,5 +1,4 @@ const queryString = require('querystring'); -const url = require('url'); const Ext = require('@nti/extjs'); const { Scorm } = require('@nti/web-course'); @@ -75,9 +74,9 @@ module.exports = exports = Ext.define('NextThought.app.course.scorm-content.Inde } const {history, location} = global; - const updatedRoute = url.parse(location.href); + const updatedRoute = new URL(location.href); updatedRoute.search = Object.keys(queryParams).length === 0 ? '' : queryString.stringify(queryParams); - history.replaceState(history.state, '', updatedRoute.format()); + history.replaceState(history.state, '', updatedRoute.toString()); if (this.scormContent) { diff --git a/src/main/js/legacy/app/invite/Index.scss b/src/main/js/legacy/app/invite/Index.scss index 9b1385902f..6748e1ffc2 100644 --- a/src/main/js/legacy/app/invite/Index.scss +++ b/src/main/js/legacy/app/invite/Index.scss @@ -2,6 +2,7 @@ .invite-form { width: 500px; + textarea { font: italic 100 22px var(--body-font-family); color: var(--secondary-grey); @@ -28,13 +29,15 @@ color: white; .msg { - line-height: normal; - padding: 8px 0px 8px 15px; font: 100 14px var(--body-font-family); + line-height: normal; + padding: 8px 0 8px 15px; + &.error { background-color: var(--primary-red); } } + &.hidden { display: none; } @@ -54,6 +57,7 @@ border-radius: 3px; font-size: 10px; text-align: center; + input[type="file"] { opacity: 0; width: 64px; @@ -63,7 +67,8 @@ left: 0; top: 0; } - &:before { + + &::before { content: ''; background-image: url("/app/resources/images/icons/email.png"); background-repeat: no-repeat; @@ -78,25 +83,26 @@ .field.emails { overflow: hidden; - background-color: var(--panel-background); + background-color: var(--panel-background); } .unstyled-tokens { - height: 50px; - background: var(--panel-background); - overflow: hidden; + height: 50px; + background: var(--panel-background); + overflow: hidden; visibility: visible; display: flex; align-items: stretch; .token-wrap { - max-height: 29px; - overflow: hidden; - margin: 12px 0px 11px 18px; - text-overflow: ellipsis; - white-space: nowrap; - color: var(--secondary-grey); - flex: 1 1 auto; + max-height: 29px; + overflow: hidden; + margin: 12px 0 11px 18px; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--secondary-grey); + flex: 1 1 auto; + .token { border: none; background: none; @@ -105,29 +111,30 @@ padding-right: 4px; font-size: 12px; - &:not(:last-child):after { + &:not(:last-child)::after { content: ','; } } + .emptyState { border: none; - padding: 0; - font-size: 12px; - color: var(--secondary-grey); + padding: 0; + font-size: 12px; + color: var(--secondary-grey); } } .email-count { - font-size: 14px; - font-weight: 100; - color: var(--primary-blue); - display: block; - min-width: 10px; - height: 50px; - line-height: 50px; - padding-left: 10px; - padding-right: 15px; - flex: 0 0 auto; + font-size: 14px; + font-weight: 100; + color: var(--primary-blue); + display: block; + min-width: 10px; + height: 50px; + line-height: 50px; + padding-left: 10px; + padding-right: 15px; + flex: 0 0 auto; } &.hidden { @@ -138,7 +145,7 @@ } .email-token-field.x-component-tokens { - margin: 7px 10px 6px 15px; + margin: 7px 10px 6px 15px; &.hidden { display: none; @@ -152,22 +159,23 @@ flex-wrap: wrap; .token { - background: white; - font-family: var(--body-font-family); - color: var(--secondary-grey); - font-size: 14px; - border: 1px solid #E2E2E2; - border-radius: 4px; - padding: 3px 5px 7px 10px; - text-transform: none; - margin-right: 3px; - flex: 0 0 auto; - max-width: 100%; + background: white; + font-family: var(--body-font-family); + color: var(--secondary-grey); + font-size: 14px; + border: 1px solid #e2e2e2; + border-radius: 4px; + padding: 3px 5px 7px 10px; + text-transform: none; + margin-right: 3px; + flex: 0 0 auto; + max-width: 100%; &:hover { position: relative; z-index: 2; } + .x { display: inline-block; @@ -191,17 +199,15 @@ border-color: var(--primary-red); .x { - &::after { background-image: url("/app/resources/images/icons/red-x-8.png"); } } - } } .token-input-wrap { - margin: 3px 0px 3px 0px; + margin: 3px 0 3px 0; } } @@ -220,10 +226,8 @@ } &.initial { - min-width: 134px; + min-width: 134px; } } } - - } diff --git a/src/main/js/legacy/app/navigation/Index.css b/src/main/js/legacy/app/navigation/Index.css index 2e03ffd149..596505ddc7 100644 --- a/src/main/js/legacy/app/navigation/Index.css +++ b/src/main/js/legacy/app/navigation/Index.css @@ -25,4 +25,4 @@ max-height: 70px; width: auto; display: block; -} \ No newline at end of file +} diff --git a/src/main/js/legacy/app/navigation/Index.js b/src/main/js/legacy/app/navigation/Index.js index 31e99005eb..dfd7bf4def 100644 --- a/src/main/js/legacy/app/navigation/Index.js +++ b/src/main/js/legacy/app/navigation/Index.js @@ -1,5 +1,4 @@ const Ext = require('@nti/extjs'); -const classname = require('classnames/bind'); const {wait} = require('@nti/lib-commons'); const {Theme} = require('@nti/web-commons'); @@ -11,13 +10,12 @@ const SearchBar = require('../search/SearchBar'); const GutterTab = require('../chat/components/gutter/Tab'); const NavigationStateStore = require('./StateStore'); -const Styles = require('./Index.css'); +const styles = require('./Index.css'); require('legacy/mixins/State'); require('../chat/Index'); -const cx = classname.bind(Styles); const DefaultAsset = 'assets.logo'; @@ -29,11 +27,11 @@ module.exports = exports = Ext.define('NextThought.app.navigation.Index', { State: 'NextThought.mixins.State' }, - cls: `main-navigation ${cx('navbar')}`, + cls: `main-navigation ${styles.navbar}`, renderTpl: Ext.DomHelper.markup([ {cls: 'back-container', cn: [ - {cls: cx('branding-container'), tabindex: '0', 'aria-label': 'Home', tag: 'a'}, + {cls: 'branding-container', tabindex: '0', 'aria-label': 'Home', tag: 'a'}, {cls: 'back', tabindex: '0', 'aria-label': 'Back', tag: 'a', cn: [ { cls: 'icon-remove' } ]} @@ -296,7 +294,7 @@ module.exports = exports = Ext.define('NextThought.app.navigation.Index', { this.brandingCmp = ReactHarness.create({ component: Theme.Asset, name: DefaultAsset, - className: cx('navigation-branding-asset'), + className: styles['navigation-branding-asset'], cacheBust: true }); @@ -426,7 +424,7 @@ module.exports = exports = Ext.define('NextThought.app.navigation.Index', { /** * Override this method in the state mixin so it doesn't * write the state to local storage. We only want this state - * to persist in memory, not across refreshs. + * to persist in memory, not across refreshes. * @param {Object} state the state to apply * @returns {void} */ diff --git a/src/main/js/legacy/app/notifications/Tab.css b/src/main/js/legacy/app/notifications/Tab.css index e865ddcfff..8182732a26 100644 --- a/src/main/js/legacy/app/notifications/Tab.css +++ b/src/main/js/legacy/app/notifications/Tab.css @@ -12,7 +12,6 @@ opacity: 1; } - :global(.main-navigation.dark-nav .notification-container [data-badge]:not([data-badge="0"])).no-knockout::before, :global(.main-navigation.dark-nav .notification-container [data-badge]:not([data-badge="0"])).no-knockout::before { border-color: white; @@ -20,9 +19,9 @@ :global(.main-navigation.dark-nav .notification-container [data-badge]:not([data-badge="0"])).knockout::before, :global(.main-navigation.dark-nav .notification-container [data-badge]:not([data-badge="0"])).knockout::before { - border-color: var(--nav-background-color, #313131);; + border-color: var(--nav-background-color, #313131); } :global(.nti-notifications-tab-container) { cursor: pointer; -} \ No newline at end of file +} diff --git a/src/main/js/legacy/app/notifications/Tab.js b/src/main/js/legacy/app/notifications/Tab.js index f257cabcac..3e336edccd 100644 --- a/src/main/js/legacy/app/notifications/Tab.js +++ b/src/main/js/legacy/app/notifications/Tab.js @@ -1,17 +1,16 @@ +const cx = require('classnames'); const Ext = require('@nti/extjs'); -const classnames = require('classnames/bind'); -const Styles = require('./Tab.css'); const NotificationsStateStore = require('./StateStore'); +const styles = require('./Tab.css'); require('./components/TabView'); -const cx = classnames.bind(Styles); -const lightCls = cx('light'); -const darkCls = cx('dark'); -const knockOut = cx('knockout'); -const noKnockOut = cx('no-knockout'); +const lightCls = styles.light; +const darkCls = styles.dark; +const knockOut = styles.knockout; +const noKnockOut = styles['no-knockout']; module.exports = exports = Ext.define('NextThought.app.notifications.Tab', { extend: 'Ext.Component', @@ -21,7 +20,7 @@ module.exports = exports = Ext.define('NextThought.app.notifications.Tab', { renderTpl: Ext.DomHelper.markup([ - {cls: cx('notifications-icon', 'icon'), role: 'button', tabindex: '0', 'aria-label': 'Notifications'} + {cls: cx('notifications-icon', styles.icon), role: 'button', tabindex: '0', 'aria-label': 'Notifications'} ]), setTheme (theme, knockout) { diff --git a/src/main/js/legacy/app/profiles/group/Index.js b/src/main/js/legacy/app/profiles/group/Index.js index 40ca6161c4..a657a6995c 100644 --- a/src/main/js/legacy/app/profiles/group/Index.js +++ b/src/main/js/legacy/app/profiles/group/Index.js @@ -1,5 +1,4 @@ const Ext = require('@nti/extjs'); -const { encodeForURI } = require('@nti/lib-ntiids'); const {isMe} = require('legacy/util/Globals'); const GroupsActions = require('legacy/app/groups/Actions'); diff --git a/src/main/js/legacy/app/redeem/Redeem.scss b/src/main/js/legacy/app/redeem/Redeem.scss index 2896ff3ca6..ced48a2c5f 100644 --- a/src/main/js/legacy/app/redeem/Redeem.scss +++ b/src/main/js/legacy/app/redeem/Redeem.scss @@ -3,80 +3,79 @@ margin: 2em 0 2.5em; display: flex; flex-direction: row; - flex-wrap: wrap; + flex-wrap: wrap; .redeemLabel { - flex: 0 1 100%; + flex: 0 1 100%; color: var(--primary-grey); - float: left; - font: normal 300 1.125em/1 var(--body-font-family); - margin-bottom: 10px; + float: left; + font: normal 300 1.125em/1 var(--body-font-family); + margin-bottom: 10px; } .common-form { display: flex; } - .error-label { - color: var(--primary-red); - font: 200 14px var(--body-font-family); + color: var(--primary-red); + font: 200 14px var(--body-font-family); } .form-container { - width: 100%; + width: 100%; height: 40px; - + .invitation_codes { - width: 22%; + width: 22%; } input[name="invitation_codes"] { - width: 100%; + width: 100%; font-size: 14px; margin-bottom: 1.25em; padding: 0.65em; - font-family: var(--body-font-family); - font-style: italic; - color: var(--primary-grey); - border: none; - box-shadow: 0 0 0 1px #d8d8d8; - border-radius: 2px; + font-family: var(--body-font-family); + font-style: italic; + color: var(--primary-grey); + border: none; + box-shadow: 0 0 0 1px #d8d8d8; + border-radius: 2px; } .reedem { - background-color: var(--primary-blue); - color: white; - font-size: 14px; - display: inline-block; - font-family: var(--body-font-family); - font-weight: 500; - border-radius: 2px; - cursor: pointer; - margin-left: 8px; - height: 39px; - width: 90px; + background-color: var(--primary-blue); + color: white; + font-size: 14px; + display: inline-block; + font-family: var(--body-font-family); + font-weight: 500; + border-radius: 2px; + cursor: pointer; + margin-left: 8px; + height: 39px; + width: 90px; } - .redeem[disabled="disabled"]{ + .redeem[disabled="disabled"] { background-color: var(--tertiary-grey); - cursor: inherit; + cursor: inherit; } &.error { .reedem { - background-color: grey; - opacity: 0.65; - pointer-events: none; + background-color: grey; + opacity: 0.65; + pointer-events: none; } + input[name="invitation_codes"] { - box-shadow: 0 0 0 1px var(--primary-red); + box-shadow: 0 0 0 1px var(--primary-red); } } } .redeem-controls { margin-left: 5px; - } } diff --git a/src/main/js/legacy/app/search/SearchBar.js b/src/main/js/legacy/app/search/SearchBar.js index d8b9d22d9e..f856ec005c 100644 --- a/src/main/js/legacy/app/search/SearchBar.js +++ b/src/main/js/legacy/app/search/SearchBar.js @@ -1,5 +1,4 @@ const Ext = require('@nti/extjs'); -const classnames = require('classnames/bind'); const { encodeForURI, isNTIID } = require('@nti/lib-ntiids'); const {wait} = require('@nti/lib-commons'); const {Store, Input} = require('@nti/web-search'); @@ -8,16 +7,15 @@ const {default:Search} = require('nti-web-components-search'); const SearchActions = require('./Actions'); const SearchStateStore = require('./StateStore'); -const Styles = require('./SearchBar.css'); +const styles = require('./SearchBar.css'); require('legacy/overrides/ReactHarness'); require('./components/AdvancedOptions'); const SearchStore = Store.getGlobal(); -const cx = classnames.bind(Styles); -const darkCls = cx('dark'); -const lightCls = cx('light'); +const darkCls = styles.dark; +const lightCls = styles.light; module.exports = exports = Ext.define('NextThought.app.search.SearchBar', { extend: 'Ext.Component', diff --git a/src/main/js/legacy/common/form/fields/ImagePicker.js b/src/main/js/legacy/common/form/fields/ImagePicker.js index 181e34d531..d181868f22 100644 --- a/src/main/js/legacy/common/form/fields/ImagePicker.js +++ b/src/main/js/legacy/common/form/fields/ImagePicker.js @@ -1,5 +1,3 @@ -const path = require('path'); - const Ext = require('@nti/extjs'); const PromptActions = require('legacy/app/prompt/Actions'); diff --git a/src/main/js/legacy/mixins/Router.js b/src/main/js/legacy/mixins/Router.js index e91f9831f0..21f4c4e6dc 100644 --- a/src/main/js/legacy/mixins/Router.js +++ b/src/main/js/legacy/mixins/Router.js @@ -1,5 +1,3 @@ -const url = require('url'); - const Ext = require('@nti/extjs'); const { encodeForURI, isNTIID } = require('@nti/lib-ntiids'); @@ -13,11 +11,9 @@ require('./routing/Object'); function setObjHash (route, obj) { const id = encodeForURI(obj.get('NTIID')); - const parts = url.parse(route.path); - - parts.hash = id; + const [path] = route.path.split('#'); - route.path = url.format(parts); + route.path = [path, id].join('#'); return route; } diff --git a/src/main/js/legacy/model/courses/CourseOutline.js b/src/main/js/legacy/model/courses/CourseOutline.js index 4616ba426d..ccad54778b 100644 --- a/src/main/js/legacy/model/courses/CourseOutline.js +++ b/src/main/js/legacy/model/courses/CourseOutline.js @@ -1,5 +1,3 @@ -const Url = require('url'); - const Ext = require('@nti/extjs'); const ContentUtils = require('legacy/util/Content'); @@ -138,7 +136,7 @@ module.exports = exports = Ext.define('NextThought.model.courses.CourseOutline', getAdminOutlineContents: function (doNotCache) { var link = this.getLink('contents'), - parts = Url.parse(link), + parts = new URL(link, global.location.origin), query = Ext.Object.fromQueryString(parts.search); if(!link) { @@ -148,7 +146,7 @@ module.exports = exports = Ext.define('NextThought.model.courses.CourseOutline', delete query['omit_unpublished']; parts.search = '?' + Ext.Object.toQueryString(query); - link = Url.format(parts); + link = parts.toString(); return this.__loadContents(link, 'AdminLoadContents', doNotCache, 'AdminOutlineContents'); }, diff --git a/src/main/js/legacy/util/Globals.js b/src/main/js/legacy/util/Globals.js index 8b8d0dc539..13ab91bc30 100644 --- a/src/main/js/legacy/util/Globals.js +++ b/src/main/js/legacy/util/Globals.js @@ -1,5 +1,6 @@ /*global ActiveXObject*/ /*eslint no-control-regex:0*/ +// eslint-disable-next-line no-restricted-modules const Url = require('url'); const Ext = require('@nti/extjs'); diff --git a/src/main/js/nti-web-app-lesson-items/Modal.css b/src/main/js/nti-web-app-lesson-items/Modal.css index cf86e16918..26d3a5aaf5 100644 --- a/src/main/js/nti-web-app-lesson-items/Modal.css +++ b/src/main/js/nti-web-app-lesson-items/Modal.css @@ -1,7 +1,7 @@ .nti-web-app-lesson-items-modal { justify-content: flex-start; padding: 20px 0 0; - top: 70px;/*height of the header*/ + top: 70px;/* height of the header */ --course-content-viewer-header-sticky-top: -20px; --note-sidebar-sticky-top: -18px; diff --git a/src/main/js/nti-web-app-lesson-items/overrides/assignment/sidebar-parts/CountDownTimer.css b/src/main/js/nti-web-app-lesson-items/overrides/assignment/sidebar-parts/CountDownTimer.css index a93b4a0b1b..c16e3fe365 100644 --- a/src/main/js/nti-web-app-lesson-items/overrides/assignment/sidebar-parts/CountDownTimer.css +++ b/src/main/js/nti-web-app-lesson-items/overrides/assignment/sidebar-parts/CountDownTimer.css @@ -1,8 +1,8 @@ @keyframes pulsate-time-expired { 0% { opacity: 0.5; } - 33% { opacity: 1.0; } + 33% { opacity: 1; } 66% { opacity: 0.5; } - 100% { opacity: 1.0; } + 100% { opacity: 1; } } .timer, diff --git a/src/main/js/nti-web-app-lesson-items/overrides/assignment/sidebar-parts/Timed.css b/src/main/js/nti-web-app-lesson-items/overrides/assignment/sidebar-parts/Timed.css index 38703acde4..5dff91448a 100644 --- a/src/main/js/nti-web-app-lesson-items/overrides/assignment/sidebar-parts/Timed.css +++ b/src/main/js/nti-web-app-lesson-items/overrides/assignment/sidebar-parts/Timed.css @@ -1,8 +1,7 @@ -.timed-assignment{ +.timed-assignment { border-bottom: 1px solid var(--border-grey-light); } - .not-started { background: white; } @@ -25,7 +24,8 @@ text-align: center; font-weight: 400; font-size: 1rem; - /*match the height of the content header*/ + + /* match the height of the content header */ line-height: 2.15; padding: 0.75rem 0.625rem; } @@ -47,12 +47,8 @@ text-transform: uppercase; } - .not-started.starting .container, -.not-started.starting .nti-button{ +.not-started.starting .nti-button { pointer-events: none; opacity: 0.7; } - - - diff --git a/src/main/js/nti-web-community-overrides/Styles.css b/src/main/js/nti-web-community-overrides/Styles.css index 694ea5d311..f62eb4e65b 100644 --- a/src/main/js/nti-web-community-overrides/Styles.css +++ b/src/main/js/nti-web-community-overrides/Styles.css @@ -1,14 +1,13 @@ .community-override-paging-window { justify-content: flex-start; padding: 20px 0 0; - top: 70px;/*height of the header*/ + top: 70px;/* height of the header */ --prompt-paging-window-header-sticky-top: -20px; } - :global(html.msg-bar-open) .community-override-paging-window { - top: 110px; /*height of the header with a message*/ + top: 110px; /* height of the header with a message */ } :global(html.prompt-open) .community-override-paging-window { @@ -20,5 +19,5 @@ } :global(html.msg-bar-open) .community-view-override { - --community-sidebar-top-offset: 130px; + --community-sidebar-top-offset: 130px; } diff --git a/src/main/js/nti-web-community-overrides/blog-entry/View.css b/src/main/js/nti-web-community-overrides/blog-entry/View.css index ad138e5f05..e867c11fc7 100644 --- a/src/main/js/nti-web-community-overrides/blog-entry/View.css +++ b/src/main/js/nti-web-community-overrides/blog-entry/View.css @@ -13,4 +13,4 @@ .topic :global(.topic-window .forums-topic-editor-box .forums-topic-editor .editor .main .content) { max-height: 300px; padding: 20px 15px; -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-community-overrides/note/View.css b/src/main/js/nti-web-community-overrides/note/View.css index 58b3a39e75..45b6987fb1 100644 --- a/src/main/js/nti-web-community-overrides/note/View.css +++ b/src/main/js/nti-web-community-overrides/note/View.css @@ -4,4 +4,4 @@ .note :global(.note-window .note.main-view) { padding-bottom: 2rem; -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-community-overrides/topic/View.css b/src/main/js/nti-web-community-overrides/topic/View.css index ad138e5f05..e867c11fc7 100644 --- a/src/main/js/nti-web-community-overrides/topic/View.css +++ b/src/main/js/nti-web-community-overrides/topic/View.css @@ -13,4 +13,4 @@ .topic :global(.topic-window .forums-topic-editor-box .forums-topic-editor .editor .main .content) { max-height: 300px; padding: 20px 15px; -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-components-search/components/UserList.scss b/src/main/js/nti-web-components-search/components/UserList.scss index c9a6a788a3..98cc21a10a 100644 --- a/src/main/js/nti-web-components-search/components/UserList.scss +++ b/src/main/js/nti-web-components-search/components/UserList.scss @@ -20,6 +20,88 @@ $black_50: rgba(0, 0, 0, 0.5); vertical-align: top; display: inline-block; } + + .block-info { + cursor: pointer; + } + + .user-info { + //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) + box-shadow: 0 2px 2px 0 $black_19, 0 0 3px 0 $black_30; + margin-top: 10px; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 4px; + padding: 25px; + height: 227px; + position: relative; + overflow: hidden; + + .user-name { + white-space: normal; + word-wrap: break-word; + word-break: break-word; + color: var(--primary-grey); + font-size: 20px; + font-weight: bold; + line-height: 22px; + text-align: center; + display: block; + padding-bottom: 3px; + + @include limit-lines($line-height: 1.1); + } + + .friend-stt { + color: var(--tertiary-grey); + font-size: 10px; + font-weight: bold; + line-height: 14px; + text-align: center; + display: block; + } + } + + .img-user { + width: 100px; + height: 100px; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 100%; + margin: 0 auto 14px; + + img { + width: 100%; + height: 100%; + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 100%; + } + } + + .follow-btn { + //Instead of the line below you could use @include border-radius($radius, $vertical-radius) + border-radius: 0 0 4px 4px; + background-color: $color_chateau_green_approx; + width: 100%; + display: block; + padding: 10px 0; + text-align: center; + color: $white; + font-size: 14px; + font-weight: 600; + line-height: 19px; + cursor: pointer; + + &.incorrect { + background-color: var(--incorrect); + } + + .icon-add-user { + padding-right: 5px; + } + + .icon-remove-user { + padding-right: 5px; + } + } } &.all-user { @@ -144,90 +226,6 @@ $black_50: rgba(0, 0, 0, 0.5); } } - .result-block { - .block-info { - cursor: pointer; - } - - .user-info { - //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) - box-shadow: 0 2px 2px 0 $black_19, 0 0 3px 0 $black_30; - margin-top: 10px; - //Instead of the line below you could use @include border-radius($radius, $vertical-radius) - border-radius: 4px; - padding: 25px; - height: 227px; - position: relative; - overflow: hidden; - - .user-name { - white-space: normal; - word-wrap: break-word; - word-break: break-word; - color: var(--primary-grey); - font-size: 20px; - font-weight: bold; - line-height: 22px; - text-align: center; - display: block; - padding-bottom: 3px; - - @include limit-lines($line-height: 1.1); - } - - .friend-stt { - color: var(--tertiary-grey); - font-size: 10px; - font-weight: bold; - line-height: 14px; - text-align: center; - display: block; - } - } - - .img-user { - width: 100px; - height: 100px; - //Instead of the line below you could use @include border-radius($radius, $vertical-radius) - border-radius: 100%; - margin: 0 auto 14px; - - img { - width: 100%; - height: 100%; - //Instead of the line below you could use @include border-radius($radius, $vertical-radius) - border-radius: 100%; - } - } - - .follow-btn { - //Instead of the line below you could use @include border-radius($radius, $vertical-radius) - border-radius: 0 0 4px 4px; - background-color: $color_chateau_green_approx; - width: 100%; - display: block; - padding: 10px 0; - text-align: center; - color: $white; - font-size: 14px; - font-weight: 600; - line-height: 19px; - cursor: pointer; - - &.incorrect { - background-color: var(--incorrect); - } - - .icon-add-user { - padding-right: 5px; - } - - .icon-remove-user { - padding-right: 5px; - } - } - } - &.view-all { box-shadow: 0 2px 2px 0 $black_19, 0 0 3px 0 $black_30; border-radius: 2px; diff --git a/src/main/js/nti-web-course-resources/components/readings/View.scss b/src/main/js/nti-web-course-resources/components/readings/View.scss index 06eb5c4f26..f788fe66a7 100644 --- a/src/main/js/nti-web-course-resources/components/readings/View.scss +++ b/src/main/js/nti-web-course-resources/components/readings/View.scss @@ -73,7 +73,7 @@ } .published-inline { - font-size: .625rem; + font-size: 0.625rem; font-weight: bold; text-transform: uppercase; color: var(--tertiary-grey); diff --git a/src/main/js/nti-web-course-roster/instructors/components/PermissionsListItem.scss b/src/main/js/nti-web-course-roster/instructors/components/PermissionsListItem.scss index 9ddfdacfd8..144cd58dcb 100644 --- a/src/main/js/nti-web-course-roster/instructors/components/PermissionsListItem.scss +++ b/src/main/js/nti-web-course-roster/instructors/components/PermissionsListItem.scss @@ -33,7 +33,7 @@ .meta { color: var(--primary-grey); flex: 0 0 auto; - font-size: .75rem; + font-size: 0.75rem; text-overflow: ellipsis; max-width: 150px; overflow: hidden; diff --git a/src/main/js/nti-web-discussion-overrides/Context.css b/src/main/js/nti-web-discussion-overrides/Context.css index 4511c8af76..405ce79eea 100644 --- a/src/main/js/nti-web-discussion-overrides/Context.css +++ b/src/main/js/nti-web-discussion-overrides/Context.css @@ -6,4 +6,4 @@ &:global(.note-window .note.main-view .context img) { height: auto !important; } -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-react-components/IEAlert.css b/src/main/js/nti-web-react-components/IEAlert.css index b468ad0ca9..f160dd9eaa 100644 --- a/src/main/js/nti-web-react-components/IEAlert.css +++ b/src/main/js/nti-web-react-components/IEAlert.css @@ -24,4 +24,4 @@ padding: 0; margin: 0.5rem 0; font-size: 0.875rem; -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-site-admin/components/common/Card.scss b/src/main/js/nti-web-site-admin/components/common/Card.scss index 076a011012..2c331f11c2 100644 --- a/src/main/js/nti-web-site-admin/components/common/Card.scss +++ b/src/main/js/nti-web-site-admin/components/common/Card.scss @@ -2,5 +2,5 @@ .site-admin-card { background-color: white; - box-shadow: 0 1px 2px 1px rgba(0,0,0,0.15); + box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.15); } diff --git a/src/main/js/nti-web-site-admin/components/configuration/branding/View.jsx b/src/main/js/nti-web-site-admin/components/configuration/branding/View.jsx index 950d7743fb..206fe559cb 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/branding/View.jsx +++ b/src/main/js/nti-web-site-admin/components/configuration/branding/View.jsx @@ -8,7 +8,6 @@ import Card from '../../common/Card'; import {ERROR, LOADING, MODIFIED, CAN_EDIT_EMAIL_ASSET, CAN_RESET} from './constants'; import Controls from './Controls'; import Preview from './preview'; -import Reset from './Reset'; import {Library, Assets, Site} from './sections/'; import style from './View.css'; import Store from './Store'; diff --git a/src/main/js/nti-web-site-admin/components/configuration/branding/preview/widgets/Logo.jsx b/src/main/js/nti-web-site-admin/components/configuration/branding/preview/widgets/Logo.jsx index 393f55ccb1..cee51e2466 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/branding/preview/widgets/Logo.jsx +++ b/src/main/js/nti-web-site-admin/components/configuration/branding/preview/widgets/Logo.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import classnames from 'classnames/bind'; +import classnames from 'classnames'; import {Theme} from '@nti/web-commons'; import Avatar from '../../sections/library/preview/Avatar'; @@ -7,13 +7,11 @@ import NotificationsIcon from '../../sections/library/preview/NotificationsIcon' import styles from './Logo.css'; -const cx = classnames.bind(styles); +const cx = x => styles[x]; -const globalTheme = Theme.getGlobalTheme(); - -export default function Logo (props) { +export default function Logo ({className, ...props}) { return ( -
+
NTI-1001
diff --git a/src/main/js/nti-web-site-admin/components/configuration/branding/sections/library/Editor.css b/src/main/js/nti-web-site-admin/components/configuration/branding/sections/library/Editor.css index 8440b22d79..aabe6b1d9b 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/branding/sections/library/Editor.css +++ b/src/main/js/nti-web-site-admin/components/configuration/branding/sections/library/Editor.css @@ -1,7 +1,9 @@ .editor-bar { position: absolute; - top: auto; bottom: 0; - left: 0; right: -2rem; + top: auto; + bottom: 0; + left: 0; + right: -2rem; display: flex; align-items: center; justify-content: center; @@ -18,7 +20,6 @@ justify-content: space-between; } - .input:not(:last-of-type) { margin-right: 1rem; -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-site-admin/components/configuration/branding/sections/library/InputContainer.css b/src/main/js/nti-web-site-admin/components/configuration/branding/sections/library/InputContainer.css index 3c9ea14efe..6b3b78d41b 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/branding/sections/library/InputContainer.css +++ b/src/main/js/nti-web-site-admin/components/configuration/branding/sections/library/InputContainer.css @@ -10,4 +10,4 @@ line-height: 1.4; color: var(--secondary-grey); text-transform: uppercase; -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-site-admin/components/configuration/branding/sections/library/ThemeOptions.css b/src/main/js/nti-web-site-admin/components/configuration/branding/sections/library/ThemeOptions.css index c62a7ed84a..bc1516f097 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/branding/sections/library/ThemeOptions.css +++ b/src/main/js/nti-web-site-admin/components/configuration/branding/sections/library/ThemeOptions.css @@ -1,3 +1,3 @@ .theme-options :global(.nti-select-native-wrapper) { margin: 0.625rem 0; -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-site-admin/components/configuration/branding/sections/site/View.css b/src/main/js/nti-web-site-admin/components/configuration/branding/sections/site/View.css index c217c3814d..6876a38090 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/branding/sections/site/View.css +++ b/src/main/js/nti-web-site-admin/components/configuration/branding/sections/site/View.css @@ -16,7 +16,6 @@ width: 100%; } - .site-params li + li { margin-top: 1rem; } diff --git a/src/main/js/nti-web-site-admin/components/configuration/login/View.css b/src/main/js/nti-web-site-admin/components/configuration/login/View.css index b2e0991955..03d473ef5a 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/login/View.css +++ b/src/main/js/nti-web-site-admin/components/configuration/login/View.css @@ -22,4 +22,4 @@ left: 0; right: 0; background: white; -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-site-admin/components/configuration/login/View.jsx b/src/main/js/nti-web-site-admin/components/configuration/login/View.jsx index a2450a01ae..629c2638f5 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/login/View.jsx +++ b/src/main/js/nti-web-site-admin/components/configuration/login/View.jsx @@ -5,7 +5,6 @@ import {Theme, Loading, Errors} from '@nti/web-commons'; import Card from '../../common/Card'; import Controls from '../branding/Controls'; -import Reset from '../branding/Reset'; import Store from './Store'; import Styles from './View.css'; @@ -37,7 +36,7 @@ function AdvancedLogin ({error, loading, modified, theme, save, cancel}) { if (e) { e.preventDefault(); e.stopPropagation(); - + } setPreview(true); @@ -87,4 +86,4 @@ export default Store [Store.Theme]: 'theme', [Store.Save]: 'save', [Store.Cancel]: 'cancel' - })(AdvancedLogin); \ No newline at end of file + })(AdvancedLogin); diff --git a/src/main/js/nti-web-site-admin/components/configuration/login/commons/AssetInput.css b/src/main/js/nti-web-site-admin/components/configuration/login/commons/AssetInput.css index 9d0aadb876..19f93382c5 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/login/commons/AssetInput.css +++ b/src/main/js/nti-web-site-admin/components/configuration/login/commons/AssetInput.css @@ -15,4 +15,4 @@ .change { color: var(--primary-blue); -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-site-admin/components/configuration/login/commons/AssetPreview.css b/src/main/js/nti-web-site-admin/components/configuration/login/commons/AssetPreview.css index 46b2eb9741..339cb82a9a 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/login/commons/AssetPreview.css +++ b/src/main/js/nti-web-site-admin/components/configuration/login/commons/AssetPreview.css @@ -58,8 +58,10 @@ span.not-set-label { .clear { position: absolute; - top: -15px; bottom: auto; - left: auto; right: -15px; + top: -15px; + bottom: auto; + left: auto; + right: -15px; padding: 0.625rem; cursor: pointer; } @@ -70,4 +72,4 @@ span.not-set-label { border: 2px solid white; border-radius: 20px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3); -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-site-admin/components/configuration/login/commons/Filename.css b/src/main/js/nti-web-site-admin/components/configuration/login/commons/Filename.css index 0a6189cc91..08f71845ba 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/login/commons/Filename.css +++ b/src/main/js/nti-web-site-admin/components/configuration/login/commons/Filename.css @@ -12,4 +12,4 @@ .ext { flex: 0 0 auto; -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-site-admin/components/configuration/login/commons/Property.css b/src/main/js/nti-web-site-admin/components/configuration/login/commons/Property.css index e90e017d23..a1436d3cd1 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/login/commons/Property.css +++ b/src/main/js/nti-web-site-admin/components/configuration/login/commons/Property.css @@ -7,7 +7,8 @@ .preview { flex: 1 1 auto; - /*Not Ideal, but the easiest solution since the previews have overflowing parts*/ + + /* Not Ideal, but the easiest solution since the previews have overflowing parts */ max-width: 394px; } @@ -15,4 +16,4 @@ flex: 0 0 auto; width: 300px; padding-right: 0.5rem; -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-site-admin/components/configuration/login/commons/Text.css b/src/main/js/nti-web-site-admin/components/configuration/login/commons/Text.css index 5d1b22a918..838481a1c9 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/login/commons/Text.css +++ b/src/main/js/nti-web-site-admin/components/configuration/login/commons/Text.css @@ -29,4 +29,4 @@ line-height: 1.3; color: var(--tertiary-grey); margin-right: 0.5rem; -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-site-admin/components/configuration/login/commons/TextInput.css b/src/main/js/nti-web-site-admin/components/configuration/login/commons/TextInput.css index 30679a4afe..8b31f53c14 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/login/commons/TextInput.css +++ b/src/main/js/nti-web-site-admin/components/configuration/login/commons/TextInput.css @@ -40,4 +40,4 @@ font-weight: bold; line-height: 1.3; color: var(--secondary-grey); -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-site-admin/components/configuration/login/preview/View.css b/src/main/js/nti-web-site-admin/components/configuration/login/preview/View.css index 869a0199f2..0b8fa930ce 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/login/preview/View.css +++ b/src/main/js/nti-web-site-admin/components/configuration/login/preview/View.css @@ -44,7 +44,6 @@ .feature { flex: 1 1 auto; - display: flex; align-items: center; justify-content: center; @@ -105,5 +104,5 @@ } .button.dark { - color: rgba(0, 0, 0, 0.8); -} \ No newline at end of file + color: rgba(0, 0, 0, 0.8); +} diff --git a/src/main/js/nti-web-site-admin/components/configuration/login/sections/Assets.css b/src/main/js/nti-web-site-admin/components/configuration/login/sections/Assets.css index fee6783bed..f25ba35309 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/login/sections/Assets.css +++ b/src/main/js/nti-web-site-admin/components/configuration/login/sections/Assets.css @@ -20,8 +20,10 @@ .feature-overlay { position: absolute; - top: 0; bottom: 0; - left: 0; right: auto; + top: 0; + bottom: 0; + left: 0; + right: auto; height: 100%; max-width: 80%; padding-left: 2rem; diff --git a/src/main/js/nti-web-site-admin/components/configuration/login/sections/LoginButton.css b/src/main/js/nti-web-site-admin/components/configuration/login/sections/LoginButton.css index 3e24ded1a1..0d8d13e1fc 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/login/sections/LoginButton.css +++ b/src/main/js/nti-web-site-admin/components/configuration/login/sections/LoginButton.css @@ -27,11 +27,10 @@ border-radius: 25px; margin-left: 15px; border: 3px solid white; - border-radius: 25px; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3); cursor: pointer; } .color-picker { padding: 0.5rem; -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-site-admin/components/configuration/sync/View.scss b/src/main/js/nti-web-site-admin/components/configuration/sync/View.scss index 5e0ecbf673..b71fbdf344 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/sync/View.scss +++ b/src/main/js/nti-web-site-admin/components/configuration/sync/View.scss @@ -76,5 +76,4 @@ width: 400px; margin-top: 20px; } - } diff --git a/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/Styles.css b/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/Styles.css index 42ae09762f..1a4cb2dde0 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/Styles.css +++ b/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/Styles.css @@ -38,7 +38,4 @@ display: flex; flex-direction: column; justify-content: flex-end; - - & .footer-content { - } -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/preview/Dialog.jsx b/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/preview/Dialog.jsx index bbd551a48d..ed2db735b2 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/preview/Dialog.jsx +++ b/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/preview/Dialog.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames/bind'; import {scoped} from '@nti/lib-locale'; -import {Prompt, Button, Hooks, Loading, Errors} from '@nti/web-commons'; +import {Prompt, Button, Hooks, Loading} from '@nti/web-commons'; import Store from '../Store'; diff --git a/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/preview/Styles.css b/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/preview/Styles.css index cd1c5f0da7..c0322d4d4c 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/preview/Styles.css +++ b/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/preview/Styles.css @@ -20,8 +20,10 @@ & .side-bar-image { position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; width: 100%; height: 100%; object-fit: cover; @@ -29,8 +31,10 @@ & .logo-container { position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; width: 100%; height: 100%; display: flex; @@ -90,8 +94,10 @@ & iframe { position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; width: 100%; height: 100%; border: 1px solid var(--border-grey-light); @@ -99,7 +105,7 @@ } .certificate-preview-modal { - & .header{ + & .header { margin-bottom: 2rem; & .close { @@ -120,4 +126,4 @@ padding: 0.625rem 0; text-align: center; } -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/sections/Pill.css b/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/sections/Pill.css index 13e0a240cd..581bef1c06 100644 --- a/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/sections/Pill.css +++ b/src/main/js/nti-web-site-admin/components/configuration/transcripts/certificate-styling/sections/Pill.css @@ -68,7 +68,6 @@ font-size: 0.75rem; font-weight: bold; color: var(--secondary-grey); - } & .clear-file { @@ -85,7 +84,6 @@ } } - & .asset-wrapper { max-width: 100%; overflow: hidden; @@ -103,4 +101,4 @@ .color-picker { padding: 0.5rem; -} \ No newline at end of file +} diff --git a/src/main/js/nti-web-site-admin/components/content/book/nav-bar/Identity.scss b/src/main/js/nti-web-site-admin/components/content/book/nav-bar/Identity.scss index 36173871c4..6d18756b4f 100644 --- a/src/main/js/nti-web-site-admin/components/content/book/nav-bar/Identity.scss +++ b/src/main/js/nti-web-site-admin/components/content/book/nav-bar/Identity.scss @@ -24,7 +24,6 @@ } } - .actions { display: flex; justify-content: space-between; diff --git a/src/main/js/nti-web-site-admin/components/content/book/roster/Item.scss b/src/main/js/nti-web-site-admin/components/content/book/roster/Item.scss index 103614c0a3..eb52cadded 100644 --- a/src/main/js/nti-web-site-admin/components/content/book/roster/Item.scss +++ b/src/main/js/nti-web-site-admin/components/content/book/roster/Item.scss @@ -5,7 +5,6 @@ align-items: center; padding: rem-calc(10px); - .user-avatar { width: 60px; height: 60px; diff --git a/src/main/js/nti-web-site-admin/components/content/info/roster/Item.scss b/src/main/js/nti-web-site-admin/components/content/info/roster/Item.scss index 19d4dc7b79..b1009f1bd5 100644 --- a/src/main/js/nti-web-site-admin/components/content/info/roster/Item.scss +++ b/src/main/js/nti-web-site-admin/components/content/info/roster/Item.scss @@ -5,7 +5,6 @@ align-items: center; padding: rem-calc(10px); - .user-avatar { width: 60px; height: 60px; @@ -26,11 +25,11 @@ flex: 0 0 auto; margin-left: 1rem; - .nti-course-enrollment-admin-prompt-trigger { - width: 40px; - height: 40px; - line-height: 40px; - color: var(--primary-blue); - } + .nti-course-enrollment-admin-prompt-trigger { + width: 40px; + height: 40px; + line-height: 40px; + color: var(--primary-blue); + } } } diff --git a/src/main/js/nti-web-site-admin/components/reports/View.jsx b/src/main/js/nti-web-site-admin/components/reports/View.jsx index f5f33eee34..a568f847ed 100644 --- a/src/main/js/nti-web-site-admin/components/reports/View.jsx +++ b/src/main/js/nti-web-site-admin/components/reports/View.jsx @@ -1,4 +1,3 @@ -import './View.scss'; import React from 'react'; import {getService} from '@nti/web-client'; import {List} from '@nti/web-reports'; diff --git a/src/main/js/nti-web-site-admin/components/reports/View.scss b/src/main/js/nti-web-site-admin/components/reports/View.scss deleted file mode 100644 index a757682d0c..0000000000 --- a/src/main/js/nti-web-site-admin/components/reports/View.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "~@nti/style-common"; - -.course-dashboard { - -} diff --git a/src/main/js/nti-web-site-admin/components/user-book-enrollment/Frame.scss b/src/main/js/nti-web-site-admin/components/user-book-enrollment/Frame.scss index 5eba1d921b..5fca94cb23 100644 --- a/src/main/js/nti-web-site-admin/components/user-book-enrollment/Frame.scss +++ b/src/main/js/nti-web-site-admin/components/user-book-enrollment/Frame.scss @@ -3,7 +3,6 @@ .site-admin-user-enrollment-view { min-height: 200px; - .content { padding-top: rem-calc(54px);//the height of the header } diff --git a/src/main/js/nti-web-site-admin/components/user-course-enrollment/Frame.scss b/src/main/js/nti-web-site-admin/components/user-course-enrollment/Frame.scss index 5eba1d921b..5fca94cb23 100644 --- a/src/main/js/nti-web-site-admin/components/user-course-enrollment/Frame.scss +++ b/src/main/js/nti-web-site-admin/components/user-course-enrollment/Frame.scss @@ -3,7 +3,6 @@ .site-admin-user-enrollment-view { min-height: 200px; - .content { padding-top: rem-calc(54px);//the height of the header } diff --git a/src/main/js/nti-web-site-admin/components/users/list/InvitePeople.scss b/src/main/js/nti-web-site-admin/components/users/list/InvitePeople.scss index ffc4d69d00..f2e157ac0a 100644 --- a/src/main/js/nti-web-site-admin/components/users/list/InvitePeople.scss +++ b/src/main/js/nti-web-site-admin/components/users/list/InvitePeople.scss @@ -77,11 +77,10 @@ i.icon-bold-x { color: var(--tertiary-grey); cursor: pointer; - margin-left: 0.375rem; + margin-left: 0.375rem; } } } - } .invite-people-role-field { diff --git a/src/main/resources/scss/accessibility.scss b/src/main/resources/scss/accessibility.scss index f8dbb8a89a..717e6af95d 100644 --- a/src/main/resources/scss/accessibility.scss +++ b/src/main/resources/scss/accessibility.scss @@ -1,5 +1,4 @@ $accessibility_mode: true; @import "utils/variables-accessible"; - @import "legacy"; diff --git a/src/main/resources/scss/base/_fonts.scss b/src/main/resources/scss/base/_fonts.scss index af7475b6cb..aaf7711633 100644 --- a/src/main/resources/scss/base/_fonts.scss +++ b/src/main/resources/scss/base/_fonts.scss @@ -5,216 +5,263 @@ @font-face { font-family: 'LatinModernMathJax_Alphabets'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Alphabets-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Alphabets-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Alphabets-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Alphabets-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Alphabets-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Alphabets-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Alphabets-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Arrows'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Arrows-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Arrows-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Arrows-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Arrows-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Arrows-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Arrows-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Arrows-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_DoubleStruck'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_DoubleStruck-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_DoubleStruck-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_DoubleStruck-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_DoubleStruck-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_DoubleStruck-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_DoubleStruck-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_DoubleStruck-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Fraktur'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Fraktur-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Fraktur-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Fraktur-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Fraktur-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Fraktur-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Fraktur-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Fraktur-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Latin'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Latin-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Latin-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Latin-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Latin-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Latin-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Latin-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Latin-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Main'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Main-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Main-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Main-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Main-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Main-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Main-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Main-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Marks'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Marks-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Marks-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Marks-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Marks-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Marks-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Marks-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Marks-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Misc'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Misc-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Misc-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Misc-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Misc-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Misc-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Misc-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Misc-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Monospace'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Monospace-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Monospace-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Monospace-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Monospace-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Monospace-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Monospace-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Monospace-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_NonUnicode'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_NonUnicode-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_NonUnicode-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_NonUnicode-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_NonUnicode-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_NonUnicode-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_NonUnicode-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_NonUnicode-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Normal'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Normal-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Normal-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Normal-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Normal-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Normal-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Normal-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Normal-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Operators'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Operators-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Operators-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Operators-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Operators-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Operators-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Operators-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Operators-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_SansSerif'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_SansSerif-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_SansSerif-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_SansSerif-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_SansSerif-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_SansSerif-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_SansSerif-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_SansSerif-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Script'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Script-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Script-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Script-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Script-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Script-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Script-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Script-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Shapes'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Shapes-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Shapes-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Shapes-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Shapes-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Shapes-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Shapes-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Shapes-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Size1'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Size1-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Size1-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Size1-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Size1-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size1-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size1-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size1-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Size2'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Size2-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Size2-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Size2-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Size2-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size2-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size2-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size2-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Size3'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Size3-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Size3-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Size3-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Size3-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size3-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size3-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size3-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Size4'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Size4-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Size4-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Size4-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Size4-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size4-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size4-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size4-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Size5'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Size5-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Size5-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Size5-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Size5-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size5-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size5-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size5-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Size6'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Size6-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Size6-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Size6-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Size6-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size6-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size6-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size6-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Size7'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Size7-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Size7-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Size7-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Size7-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size7-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size7-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Size7-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Symbols'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Symbols-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Symbols-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Symbols-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Symbols-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Symbols-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Symbols-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Symbols-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } + @font-face { font-family: 'LatinModernMathJax_Variants'; src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Variants-Regular.eot'); - src: url('../lib/fonts/lmmathjax/LatinModernMathJax_Variants-Regular.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Variants-Regular.woff') format('woff'), - url('../lib/fonts/lmmathjax/LatinModernMathJax_Variants-Regular.otf') format('opentype'); + src: + url('../lib/fonts/lmmathjax/LatinModernMathJax_Variants-Regular.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Variants-Regular.woff') format('woff'), + url('../lib/fonts/lmmathjax/LatinModernMathJax_Variants-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } @@ -223,9 +270,10 @@ @font-face { font-family: 'Latin Modern Roman'; src: url('../lib/fonts/lmroman/lmroman10-bold-webfont.eot'); - src: url('../lib/fonts/lmroman/lmroman10-bold-webfont.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmroman/lmroman10-bold-webfont.woff') format('woff'), - url('../lib/fonts/lmroman/lmroman10-bold-webfont.ttf') format('truetype'); + src: + url('../lib/fonts/lmroman/lmroman10-bold-webfont.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmroman/lmroman10-bold-webfont.woff') format('woff'), + url('../lib/fonts/lmroman/lmroman10-bold-webfont.ttf') format('truetype'); font-weight: bold; font-style: normal; } @@ -233,9 +281,10 @@ @font-face { font-family: 'Latin Modern Roman'; src: url('../lib/fonts/lmroman/lmroman10-bolditalic-webfont.eot'); - src: url('../lib/fonts/lmroman/lmroman10-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmroman/lmroman10-bolditalic-webfont.woff') format('woff'), - url('../lib/fonts/lmroman/lmroman10-bolditalic-webfont.ttf') format('truetype'); + src: + url('../lib/fonts/lmroman/lmroman10-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmroman/lmroman10-bolditalic-webfont.woff') format('woff'), + url('../lib/fonts/lmroman/lmroman10-bolditalic-webfont.ttf') format('truetype'); font-weight: bold; font-style: italic; } @@ -243,9 +292,10 @@ @font-face { font-family: 'Latin Modern Roman'; src: url('../lib/fonts/lmroman/lmroman10-italic-webfont.eot'); - src: url('../lib/fonts/lmroman/lmroman10-italic-webfont.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmroman/lmroman10-italic-webfont.woff') format('woff'), - url('../lib/fonts/lmroman/lmroman10-italic-webfont.ttf') format('truetype'); + src: + url('../lib/fonts/lmroman/lmroman10-italic-webfont.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmroman/lmroman10-italic-webfont.woff') format('woff'), + url('../lib/fonts/lmroman/lmroman10-italic-webfont.ttf') format('truetype'); font-weight: normal; font-style: italic; } @@ -253,9 +303,10 @@ @font-face { font-family: 'Latin Modern Roman'; src: url('../lib/fonts/lmroman/lmroman10-regular-webfont.eot'); - src: url('../lib/fonts/lmroman/lmroman10-regular-webfont.eot?#iefix') format('embedded-opentype'), - url('../lib/fonts/lmroman/lmroman10-regular-webfont.woff') format('woff'), - url('../lib/fonts/lmroman/lmroman10-regular-webfont.ttf') format('truetype'); + src: + url('../lib/fonts/lmroman/lmroman10-regular-webfont.eot?#iefix') format('embedded-opentype'), + url('../lib/fonts/lmroman/lmroman10-regular-webfont.woff') format('woff'), + url('../lib/fonts/lmroman/lmroman10-regular-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } diff --git a/src/main/resources/scss/debris/_account-window.scss b/src/main/resources/scss/debris/_account-window.scss index 097217fd0e..fbe337c5d9 100644 --- a/src/main/resources/scss/debris/_account-window.scss +++ b/src/main/resources/scss/debris/_account-window.scss @@ -1,7 +1,7 @@ - .account-window { @extend .nti-window; + border: 1px solid #c2c2c2; .x-window-body { @@ -15,15 +15,16 @@ position: absolute; top: 10px; right: 10px; + @include sprite($window-control-close); - &:hover{ + &:hover { opacity: 1; } } .button-wrapper { - border-bottom: 1px solid #ebebeb !important; + border-bottom: 1px solid #ebebeb !important; } .x-btn-account-small { @@ -56,7 +57,8 @@ .picture-editor { border-radius: 0 0 5px 5px; - background: #ffffff; + background: #fff; + .footer { border-top: 1px solid #e7e7e7; } @@ -97,7 +99,7 @@ position: absolute; top: 0; left: 0; - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + filter: progid:dximagetransform.microsoft.alpha(opacity=0); opacity: 0; font-size: 200px; cursor: pointer; @@ -113,7 +115,7 @@ .identity { border-radius: 5px 5px 0 0; - background: #ffffff; + background: #fff; border-bottom: 1px solid #ebebeb !important; position: relative; overflow: hidden; @@ -144,8 +146,9 @@ color: var(--primary-grey); } - .identities{ + .identities { overflow: hidden; + @include ellipse; } @@ -154,14 +157,19 @@ display: inline-block; position: relative; overflow: hidden; + @include ellipse; + padding-left: 20px; - &:empty{ display: none; } - &::after{ + &:empty { display: none; } + + &::after { content: ' '; position: absolute; - top: 3px; left: 0; + top: 3px; + left: 0; + @include sprite($account-username); } } @@ -174,6 +182,7 @@ &::after { top: 4px; + @include sprite($account-email); } } @@ -183,23 +192,26 @@ .footer { .x-btn-flat-medium { cursor: pointer; + .x-btn-button { background: none; border: none; padding: 12px 20px; - .x-btn-inner{ + .x-btn-inner { font: { size: 14px; style: normal; weight: normal; } + color: var(--primary-grey); padding-right: 2px; } .rotate { @include sprite($rotate); + left: 0; top: 13px; } @@ -211,36 +223,39 @@ float: right; } - &, .x-btn-button{ + &, .x-btn-button { border-radius: 0 0 3px 0; } + cursor: pointer; + .x-btn-button { background: var(--primary-blue); border: 1px solid var(--border-blue); padding: 12px 20px; - .x-btn-inner{ + .x-btn-inner { font: { size: 14px; style: italic; weight: 700; } - color: #ffffff; + + color: #fff; padding-right: 2px; } } - &.x-btn-disabled { .x-btn-button { span { opacity: 1; } cursor: default; border-color: #d0d0d0; - background: rgba(184,184,184,0.5); + background: rgba(184, 184, 184, 0.5); + .x-btn-inner { - color: rgba(255,255,255,0.7); + color: rgba(255, 255, 255, 0.7); } } } @@ -255,9 +270,8 @@ } .password-box, .x-container { - margin: 5px 0; - &, input { font-size: 14px;} + &, input { font-size: 14px; } input { &:focus { @@ -287,14 +301,14 @@ font-size: 14px; font-weight: 500; line-height: 25px; - border: 1px solid var(--border-grey);//#dcdcdc; - border-left-width: 0px; - background: #ffffff; + border-left-width: 0; + background: #fff; padding: 6px 10px; margin: 0; min-height: 39px; width: calc(100% - 4px); + .x-opera &, .x-safari5 & { width: 90%; @@ -304,18 +318,20 @@ left: 4px; box-shadow: -4px 0 0 0 var(--border-grey); } + .clear { top: 10px; right: 5px; - cursor: pointer; position: absolute; display: none; + @include sprite($clear_line); } .placeholder { @include placeholder-style(); + position: absolute; top: 0; left: 0; @@ -327,16 +343,17 @@ .message-box { margin: 0 10px 0 35px; display: table; + .text { display: table-cell; text-align: center; color: var(--primary-green); vertical-align: middle; + &.error { color: var(--primary-red); } } - } .footer { @@ -345,13 +362,13 @@ overflow: hidden; } - .cant-change{ + .cant-change { color: var(--primary-grey); font-size: 24px; font-weight: 400; font-style: italic; - .subtext{ + .subtext { font-size: 14px; font-style: normal; font-weight: 300; @@ -359,8 +376,7 @@ } } - - .account-preferences{ + .account-preferences { padding: 1px 20px; .nti-checkbox { @@ -383,11 +399,11 @@ font: normal 600 0.9em var(--body-font-family); } } - } .email-verification-window { @extend .nti-window; + outline: 0; border-radius: 0; min-height: 204px; @@ -397,7 +413,7 @@ height: 160px; background-color: #fcfcfc; border: 1px solid rgb(206, 206, 206); - box-shadow: rgba(0, 0, 0, 0.137255) 0px 2px 4px 1px, rgba(255, 255, 255, 0.498039) 0px 2px inset; + box-shadow: rgba(0, 0, 0, 0.137255) 0 2px 4px 1px, rgba(255, 255, 255, 0.498039) 0 2px inset; } .email-verify-wrapper { @@ -416,7 +432,7 @@ font: normal 300 19px/1 var(--body-font-family); } - .sub{ + .sub { font: normal 300 14px/1 var(--body-font-family); } } @@ -435,12 +451,13 @@ .info { width: 40px; height: 30px; + @include icon($info_active, $top: 3px, $left: 0); } } } - background-color: rgba(1,1,1,0); // Make it clear. + background-color: rgba(1, 1, 1, 0); // Make it clear. border: none; box-shadow: none; } @@ -472,18 +489,18 @@ margin-bottom: 5px; .support { - .link a{ + .link a { text-decoration: none; color: var(--primary-blue); } } } - .buttons{ + .buttons { display: inline-block; margin: 0; - .link{ + .link { float: left; padding: 0 7px 0 9px; color: var(--primary-blue); @@ -501,7 +518,7 @@ font-style: italic; } - &::after{ + &::after { content: "|"; position: absolute; right: 0; @@ -526,15 +543,15 @@ .input-box { border: 1px solid var(--tertiary-grey); padding-right: 30px; - background: #ffffff; + background: #fff; margin: 0 34px 0 15px; position: relative; - input{ + input { color: var(--secondary-grey); font: normal 500 14px/25px var(--body-font-family); border: 0; - background: #ffffff; + background: #fff; padding: 6px 10px; margin: 0; min-height: 39px; @@ -557,6 +574,7 @@ cursor: pointer; position: absolute; display: none; + @include sprite($clear_line); } @@ -587,7 +605,7 @@ } } - .footer{ + .footer { background-color: var(--quad-grey); overflow: hidden; bottom: 0; @@ -602,7 +620,7 @@ left: 0; right: 0; background-color: #f0f0f0; - box-shadow: 0 0 5px 0 rgba(0,0,0,0.35); + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.35); clip: rect(300px, auto, 310px, auto); border-radius: 350em / 4em; } @@ -645,7 +663,7 @@ bottom: 40px; background: #fff; - .text{ + .text { text-align: center; margin-top: 30px; color: var(--secondary-green); @@ -653,23 +671,25 @@ padding: 48px 20px 5px 20px; font: normal 300 16px/1 var(--body-font-family); - .title{ + .title { font: normal 300 21px/1 var(--body-font-family); } - &::after{ + &::after { content: ' '; position: absolute; - top: 3px; left: 45%; + top: 3px; + left: 45%; + @include sprite($assignment_ontime); } } - &.pending-wrapper{ - .text{ + &.pending-wrapper { + .text { color: var(--secondary-grey); - .title{ + .title { color: var(--primary-red); } @@ -680,11 +700,12 @@ } } - &.has-time-error{ + &.has-time-error { .card { min-height: 270px; } } + perspective: 800; .card { @@ -705,7 +726,7 @@ z-index: 2; background-color: #fcfcfc; border: 1px solid rgb(206, 206, 206); - box-shadow: rgba(0, 0, 0, 0.137255) 0px 2px 4px 1px, rgba(255, 255, 255, 0.498039) 0px 2px inset; + box-shadow: rgba(0, 0, 0, 0.137255) 0 2px 4px 1px, rgba(255, 255, 255, 0.498039) 0 2px inset; backface-visibility: hidden; &.front { @@ -738,31 +759,30 @@ .badge-lock { padding: 20px; - background: white; - border-bottom: 1px solid #d9d9d9; - - .msg { - color: var(--secondary-grey); - } - - .email { - color: var(--primary-grey); - padding: 5px 0; - font-style: italic; - } + background: white; + border-bottom: 1px solid #d9d9d9; + + .msg { + color: var(--secondary-grey); + } + + .email { + color: var(--primary-grey); + padding: 5px 0; + font-style: italic; + } } } - .registration-prompt { width: calc(100vw - 150px); - height: calc(100vh - 145px); - max-width: 775px; - overflow: hidden; + height: calc(100vh - 145px); + max-width: 775px; + overflow: hidden; iframe { border: none; width: 100%; - height:100%; + height: 100%; } } diff --git a/src/main/resources/scss/debris/_activity.scss b/src/main/resources/scss/debris/_activity.scss index 03a77a16ec..0883354270 100644 --- a/src/main/resources/scss/debris/_activity.scss +++ b/src/main/resources/scss/debris/_activity.scss @@ -191,7 +191,6 @@ display: inline-block; padding: 0 0.3em; background: none; - text-decoration: none; } .tag:last-of-type::after, diff --git a/src/main/resources/scss/debris/_annotations.scss b/src/main/resources/scss/debris/_annotations.scss index e84b52e0d1..34060be040 100644 --- a/src/main/resources/scss/debris/_annotations.scss +++ b/src/main/resources/scss/debris/_annotations.scss @@ -1,5 +1,4 @@ @mixin image-bar { - .wrapper { position: relative !important; line-height: 0; @@ -10,11 +9,23 @@ a { pointer-events: all; text-decoration: none; - &.disabled { &, &:hover { display:none; opacity: 0.5; cursor: default; pointer-events: none; } } + + &.disabled { + &, &:hover { + display: none; + opacity: 0.5; + cursor: default; + pointer-events: none; + } + } + &.zoom, &.unzoom { display: block; position: absolute; - top: 0; left: 0; right: 0; bottom: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; z-index: 2; } } @@ -53,6 +64,7 @@ a.bar-cell { border-left: 1px solid #dadada; + & ~ .bar-cell { margin-right: 45px; } @@ -77,45 +89,44 @@ content: ' '; overflow: hidden; position: absolute; - top: 0; left: 3px; + top: 0; + left: 3px; + @include sprite($add-comment-19x17); } &:hover { color: var(--secondary-grey-alt); + &::after { @include sprite($add-comment-19x17_hover); } } } - - &.slide { display: none; width: 54px; background: var(--primary-blue); border-color: var(--border-blue); - position: absolute; top: 0; right: 0; bottom: 0; - &::after{ + &::after { content: ' '; overflow: hidden; position: absolute; top: 44%; top: calc(50% - 9px); - left: 17px; @include sprite($presentation-view); } &:hover { - &::after{ + &::after { @include sprite($presentation-view); } } @@ -124,16 +135,14 @@ } } - @mixin highlight-tip { position: relative; top: 0; - vertical-align: baseline; -//vertical-align: initial; + //vertical-align: initial; display: inline-block; width: 5px; - width: 0px; + width: 0; overflow: hidden; //line-height: 23px; //height: 24px; @@ -141,19 +150,17 @@ padding: 0 0 0 4px; } - .annotation-gutter { position: absolute; top: 0; right: 0; width: 60px; - overflow: visible; z-index: 4; &.debug { bottom: 0; - background: rgba(255,0,0,0.3); + background: rgba(255, 0, 0, 0.3); } .column { @@ -187,6 +194,7 @@ &:hover, &.active { background: var(--primary-blue); + .count { color: #fff; } @@ -196,7 +204,7 @@ } @media screen and (max-device-width: 768px) { // iPad - .annotation-gutter{ + .annotation-gutter { width: 25px; right: 35px; @@ -206,14 +214,17 @@ } } -.x-panel-notes-and-discussion .x-panel-body-notes-and-discussion{ +.x-panel-notes-and-discussion .x-panel-body-notes-and-discussion { position: absolute !important; top: 60px; bottom: 0; height: auto !important; & > .x-component { - position: absolute; top: 0; bottom: 0; height: auto !important; + position: absolute; + top: 0; + bottom: 0; + height: auto !important; } } @@ -223,24 +234,26 @@ x: hidden; y: auto; //scroll; } + .row { cursor: pointer; margin: 0 1px; padding: 10px 15px; border-bottom: 1px solid #ededed; - &.x-item-selected{ - &, &.over{ - .name,.footer{ + &.x-item-selected { + &, &.over { + .name,.footer { color: #c5eaff; } - .snippet{color: #ffffff;} + .snippet { color: #fff; } + background: var(--primary-blue); - box-shadow: inset -1px 0 0 1px #107eed,1px 0 0 0px #107eed; + box-shadow: inset -1px 0 0 1px #107eed, 1px 0 0 0 #107eed; } } - &.over{ + &.over { background: #fff; border-bottom-color: #cfcfcf; box-shadow: 0 -1px 0 0 #cfcfcf; @@ -251,8 +264,10 @@ text-transform: uppercase; color: var(--primary-blue); overflow: hidden; + @include ellipse; } + .snippet { min-height: 50px; max-height: 5em; @@ -265,8 +280,8 @@ word-wrap: break-word; .body-divider .whiteboard-container { - .whiteboard-wrapper .overlay{bottom: 0;} - .toolbar {display: none;} + .whiteboard-wrapper .overlay { bottom: 0; } + .toolbar { display: none; } } p { @@ -275,18 +290,20 @@ @include attachment-small(); } + .footer { font: normal 400 10px/15px var(--body-font-family); color: var(--tertiary-grey); - span{ - &::after{ + span { + &::after { text-decoration: none !important; position: static; content: '\00B7'; padding: 0 0.5em; background: none; } + &:last-of-type::after { content: ''; display: none; @@ -295,57 +312,58 @@ } } - &.dark{ + &.dark { background-color: #292929; box-shadow: -1px 0 0 0 #191919; - .row{ + .row { border-bottom-color: #222; - &.over:not(.x-item-selected){ + &.over:not(.x-item-selected) { background-color: #343434; border-bottom-color: #222; box-shadow: none; - .name{ + .name { color: var(--tertiary-grey); } - .snippet{ + .snippet { color: #fff; } - .footer{ + .footer { color: var(--tertiary-grey); } } - &.x-item-selected{ + &.x-item-selected { box-shadow: none; - .name{ - color: #E2F3FE; + + .name { + color: #e2f3fe; } - .snippet{ + .snippet { color: #fff; } - .footer{ - color: #E2F3FE; + .footer { + color: #e2f3fe; } } - .name{ + .name { font-weight: 700 !important; color: var(--secondary-grey); } - .snippet{ + .snippet { font-weight: 600 !important; color: var(--tertiary-grey); } - .footer{ + .footer { font-weight: 700 !important; color: #bababa; } @@ -353,9 +371,7 @@ } } - .share-with-data { - .title { font-size: 32px; font-weight: normal; @@ -375,10 +391,11 @@ width: auto; .initials { - border-radius: 4px; + border-radius: 4px; } - .avatar-pic{ - border-radius: 4px; + + .avatar-pic { + border-radius: 4px; } } } @@ -389,7 +406,9 @@ font-size: 14px; display: inline-block; overflow: hidden; + @include ellipse; + max-width: 80%; } @@ -402,27 +421,27 @@ .comment & { @include icon($activity-comment, $left: 2px); } + .highlight & { @include icon($activity-highlight, $left: 3px); } + .note & { @include icon($activity-note, $left: 6px); } } } - .x-dd-drag-proxy { - - .x-dd-drop-icon{ + .x-dd-drop-icon { display: none; opacity: 0.3; } - &.x-dd-drop-ok { - //ok state - //.x-dd-drag-ghost {opacity: 1;} - } + // &.x-dd-drop-ok { + // ok state + // .x-dd-drag-ghost {opacity: 1;} + // } .x-dd-drag-ghost { padding: 0; @@ -438,9 +457,9 @@ } } - .body-divider { @include no-select; + position: relative; overflow: hidden; text-align: left; @@ -448,24 +467,21 @@ //padding: 5px; } - .x-component-zoom { - img {width: 100%;} - @include image-bar; + img { width: 100%; } + @include image-bar; } - // Styles below are intended to target things inside the content iframe - -.note-window .main-view .context [itemprop~="nti-data-markupenabled"] {} +// .note-window .main-view .context [itemprop~="nti-data-markupenabled"] {} .x-component-image-zoom-view { overflow: visible; border: 1px solid #bcbcbc; border-radius: 1px; - box-shadow: 0 10px 40px 0 rgba(0,0,0,0.45); + box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.45); background: #fafafa; position: fixed !important; margin-top: 35px;//account for the close button @@ -478,6 +494,7 @@ position: absolute; @include sprite($close_popup); + cursor: pointer; border-radius: 90px; } @@ -491,7 +508,7 @@ } .note-window .note.main-view .context { - [itemprop~="nti-data-markupenabled"],[itemprop~="nti-slide-video"]{ + [itemprop~="nti-data-markupenabled"],[itemprop~="nti-slide-video"] { &:hover { a.zoom { display: none !important; @@ -515,6 +532,7 @@ position: center-center; repeat: no-repeat; } + box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.35); border-radius: 1px; float: left; @@ -545,14 +563,13 @@ .no-access { font: normal 500 0.9em/1 var(--body-font-family); - color: #FD817F; + color: #fd817f; } } } .note-window .main-view .context, #NTIContent { - .figure { [itemprop*="nti-data-markup"]:not(.no-details) { max-width: 100%; @@ -570,8 +587,9 @@ } [itemprop*="nti-data-markup"]:not(.no-details), - [itemprop~="nti-slide-video"]{ + [itemprop~="nti-slide-video"] { @include hardware-accelerate(); + display: inline-block; //overflow: hidden; position: relative; @@ -585,6 +603,7 @@ box-shadow: inset 0 0 0 10px white; background: rgba(63, 179, 246, 0.05); display: none; + @include animate($name: fadeZoomIn, $duration: 0.5s, $delay: 0s); } @@ -599,10 +618,10 @@ .bar a.slide { display: block; } } - object[type$=slidevideo] .bar a.mark {display: none;} + object[type$=slidevideo] .bar a.mark { display: none; } //Sometimes footnotes are redacted, this will hide the actual footnote when that is the case - li.footnote{ + li.footnote { &.redacted { span, a { display: none; @@ -610,49 +629,51 @@ } } - #footnotes{ - .redacted-text{ + #footnotes { + .redacted-text { color: var(--tertiary-grey); text-decoration: line-through; display: none; } + li.footnote.redacted { - .redacted-text{ + .redacted-text { display: inline; } } } - .block-redaction { display: block; clear: both; width: 100%; margin: 25px 0; - &.head{ + &.head { position: relative; border-top: 1px solid var(--border-grey); overflow: visible; &.redacted { border-color: white; + &::after { position: absolute; content: ''; background: url(../images/elements/div_block_redaction.png) 0 0 repeat-x; - top: -6px; left: 0; + top: -6px; + left: 0; width: 100%; height: 11px; } } } - &.redacted .redactionAction{ - .controls{ + &.redacted .redactionAction { + .controls { display: none; } - span.editableSpan{ border-right-width: 1px; } + span.editableSpan { border-right-width: 1px; } } } @@ -661,9 +682,10 @@ span.editableSpan { cursor: text; } + .controls { span { - &.share,&.delete{ + &.share,&.delete { display: none; } } @@ -672,7 +694,6 @@ } .redactionAction { - &.block { position: absolute; top: -12px; @@ -681,30 +702,28 @@ } &.searchHitInside { - span.editableSpan{ + span.editableSpan { background-color: #fcff13; } } font-size: 10px; line-height: 14px; - vertical-align: top;//fix alignment in firefox + vertical-align: middle; margin: 0 2px 0 2px; overflow: hidden; - vertical-align: middle; display: inline-block; * { vertical-align: middle; } - &.redacted{ - .controls{display: none;} - span.editableSpan{ border-right-width: 1px; } + &.redacted { + .controls { display: none; } + span.editableSpan { border-right-width: 1px; } } - span.editableSpan { display: inline-block; position: relative; @@ -718,7 +737,9 @@ //font-style: italic; height: 24px; overflow: hidden; + @include ellipse; + max-width: 600px; cursor: pointer; @@ -740,7 +761,7 @@ height: 24px; width: 25px; cursor: pointer; - background: #ffffff; + background: #fff; box-shadow: inset 0 0 0 1px var(--border-grey); &::after { @@ -749,17 +770,17 @@ width: 16px; height: 16px; position: absolute; - } - &.edit{ @include icon($redactions-edit,$top: 6px, $left: 6px); } - &.share{ @include icon($redactions-share,$top: 6px, $left: 6px); } - &.delete{ @include icon($redactions-trashcan,$top: 5px, $left: 7px); } + &.edit { @include icon($redactions-edit,$top: 6px, $left: 6px); } + &.share { @include icon($redactions-share,$top: 6px, $left: 6px); } + &.delete { @include icon($redactions-trashcan,$top: 5px, $left: 7px); } - &.edit.save{ - box-shadow: inset 0 0 0 1px #369AD3; + &.edit.save { + box-shadow: inset 0 0 0 1px #369ad3; background-color: var(--primary-blue); - width:90px; - &::after{ + width: 90px; + + &::after { width: auto; content: 'Save Title'; background: none; @@ -776,18 +797,17 @@ &:hover { background-color: var(--primary-blue); - box-shadow: inset 0 0 0 1px #369AD3 !important; - outline: #369AD3; + box-shadow: inset 0 0 0 1px #369ad3 !important; + outline: #369ad3; z-index: 1; - &.delete{ + &.delete { background-color: var(--primary-red); - box-shadow: inset 0 0 0 1px #D14646 !important; - &::after{ @include sprite($redactions-trashcan_hover); } + box-shadow: inset 0 0 0 1px #d14646 !important; + &::after { @include sprite($redactions-trashcan_hover); } } - &.edit::after{ @include sprite($redactions-edit_hover); } - &.share::after{ @include sprite($redactions-share_hover); } - + &.edit::after { @include sprite($redactions-edit_hover); } + &.share::after { @include sprite($redactions-share_hover); } } } } @@ -808,13 +828,13 @@ } .application-highlight { - &.suppressed { - //do nothing special when range is suppressed. - } + // &.suppressed { + // do nothing special when range is suppressed. + // } & + li.part, & + li.exercise { - &::before, &::after { z-index: 1; color: #076da7 } + &::before, &::after { z-index: 1; color: #076da7; } } // &.highlight-mouse-over { // & + li.part, & + li.exercise { @@ -823,7 +843,6 @@ // } &.plain { - &, * { position: relative; z-index: 1; @@ -842,7 +861,6 @@ border-bottom: 1px solid #9fd9fa; } - // &.highlight-mouse-over { // &,.math { // color: #ffffff; @@ -857,7 +875,7 @@ } } - &.highlight-mouse-over{ + &.highlight-mouse-over { &,a { // color: #ffffff; // background-color: var(--primary-blue); @@ -875,16 +893,16 @@ &.redacted { display: none; } + background: #efefef; color: var(--secondary-grey); - border-bottom: 0px; + border-bottom: 0; } &.counter { color: var(--secondary-grey); font-family: var(--body-font-family) !important; font-weight: bold; - background: transparent; @include highlight-tip; @@ -897,9 +915,8 @@ width: 30px; background-image: url(../images/counter_tip_default.png); - - &.highlight-mouse-over{ - color: #ffffff; + &.highlight-mouse-over { + color: #fff; background-image: url(../images/counter_tip_hover.png); } @@ -908,6 +925,7 @@ text-align: center; margin-left: 5px; overflow: hidden; + @include ellipse; } } @@ -917,33 +935,31 @@ } #NTIContent { - [itemprop~="nti-data-markupenabled"], - [itemprop~="nti-slide-video"]{ - &[itemprop~="nti-data-resizeable"]{ + [itemprop~="nti-slide-video"] { + &[itemprop~="nti-data-resizeable"] { .bar .image-title { overflow: hidden; + @include ellipse; } } } - [itemprop~="nti-data-resizeable"]{ - img{ + [itemprop~="nti-data-resizeable"] { + img { max-width: 100%; height: auto !important; } } } -div.section-problem .highlight-mouse-over .MathJax_Display { color: #076da7 } - +div.section-problem .highlight-mouse-over .MathJax_Display { color: #076da7; } #NTIContent ol.parts > li.part::before { z-index: 2; } - #annotation-container { &, .highlight-canvas { position: absolute; @@ -957,9 +973,10 @@ div.section-problem .highlight-mouse-over .MathJax_Display { color: #076da7 } } .nt-annotation-menu { - $transition-duration:.1s; + $transition-duration:0.1s; + background: var(--annotations-menu-bg); - border-radius:6px; + border-radius: 6px; position: fixed !important; opacity: 0.01; // so we can show the menu, compute its width, and center it. (can't get the width until it's rendered in the dom.) &.visible { @@ -971,7 +988,8 @@ div.section-problem .highlight-mouse-over .MathJax_Display { color: #076da7 } // the pointer/arrow &::after { - $arrow-size:.5em; + $arrow-size:0.5em; + content: ''; position: absolute; width: 0; @@ -988,100 +1006,110 @@ div.section-problem .highlight-mouse-over .MathJax_Display { color: #076da7 } .x-panel-body-nt-annotation { background: none; - border:none; - padding:0; + border: none; + padding: 0; } + .x-menu-item { - &.icon { - } + // &.icon {} + &.add-note { @include icon($comment_white, $left: 2px, $top: 3px); - text-indent:-100em; + + text-indent: -100em; } + &.define { @include icon($search-white,$top:8px,$left:5px); - text-indent:-100em; + + text-indent: -100em; } - &:after { - opacity:.75; + &::after { + opacity: 0.75; transition: opacity $transition-duration 0; } - &:hover:after { - opacity:1.0; + &:hover::after { + opacity: 1; transition: opacity $transition-duration 0; } } .x-menu-item-active { - background:none !important; + background: none !important; } .x-component { - &:before { // divider line between items + &::before { // divider line between items content: ""; - border-right: 2px solid rgba(128,128,128,0.2); + border-right: 2px solid rgba(128, 128, 128, 0.2); position: absolute; height: 75%; top: 5px; right: 0; } + &:last-child { - padding-right:1.5em; - &:before { - content:none; // no divider following the last item. + padding-right: 1.5em; + + &::before { + content: none; // no divider following the last item. } } } .nt-highlight-picker { - background:none; - height:auto; - width:auto; - padding-left:.5em; - padding-right:.5em; + background: none; + height: auto; + width: auto; + padding-left: 0.5em; + padding-right: 0.5em; white-space: nowrap; - &.x-component:last-child{ - padding-right:.5em; + &.x-component:last-child { + padding-right: 0.5em; } a { span { // the color swatches $swatchSize:1.25em; - display:inline-block; - width:$swatchSize; - height:$swatchSize; - border:2px solid transparent; - border-radius:$swatchSize/2; - margin:.5em .2em; - position:relative; - transform: scale(1,1); // so the transform will animate on mouseout. + + display: inline-block; + width: $swatchSize; + height: $swatchSize; + border: 2px solid transparent; + border-radius: $swatchSize/2; + margin: 0.5em 0.2em; + position: relative; + transform: scale(1, 1); // so the transform will animate on mouseout. transition: all $transition-duration 0; + &::after { - content:''; - position:absolute; - top:0; - left:0; + content: ''; + position: absolute; + top: 0; + left: 0; background: url('../images/icons/rhp-status-checkmark.png') center no-repeat transparent; - width:100%; - height:100%; - opacity:0; + width: 100%; + height: 100%; + opacity: 0; transition: opacity $transition-duration 0; // fade out the checkmark } } } a:hover, a.x-color-picker-selected { - background:none; - border:none; + background: none; + border: none; + span { - border-color:white; + border-color: white; transition: all $transition-duration 0; - transform: scale(1.2,1.2); + transform: scale(1.2, 1.2); + &::after { - opacity: 1.0; + opacity: 1; transition: opacity $transition-duration 0; // fade up the checkmark } } diff --git a/src/main/resources/scss/debris/_assessments.scss b/src/main/resources/scss/debris/_assessments.scss index 758859875f..3173af0d6b 100644 --- a/src/main/resources/scss/debris/_assessments.scss +++ b/src/main/resources/scss/debris/_assessments.scss @@ -1,79 +1,84 @@ -@mixin draggable-zone{ - .draggable-area{ +@mixin draggable-zone { + .draggable-area { display: table-cell; min-width: 54px; - border: 0px solid var(--tertiary-grey-alt); + border: 0 solid var(--tertiary-grey-alt); border-bottom-width: 1px; padding-left: 15px; position: relative; cursor: move; - .text{ + .text { position: relative; margin-right: 61px; line-height: 26px; min-width: 30px; } - &:hover{ + &:hover { outline: 1px solid var(--tertiary-grey); - &::after{ + + &::after { @include sprite($drag-controls-hover); } } - .controls{ + .controls { position: relative; - .drag-control{ + .drag-control { position: absolute; top: 20px; right: 20px; + @include sprite($drag-controls); } } } } -@mixin draggable-span{ - .dd-label-token{ +@mixin draggable-span { + .dd-label-token { display: inline-block; position: relative; padding: 0 10px; margin: 0 10px 10px 0; border: 1px solid var(--primary-blue); border-radius: 3px; - box-shadow: 1px 1px 2px rgba(0,0,0,.09); + box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.09); cursor: move; font-weight: 600; color: var(--primary-blue); - p{margin: 0;} + p { margin: 0; } - &:hover{ + &:hover { background-color: var(--primary-blue); color: #fff; } - .value{ + .value { position: relative; display: inline-block; vertical-align: middle; } - .x{ + .x { position: relative; width: 15px; height: 18px; display: none; vertical-align: middle; - &::after{ + &::after { content: ''; display: block; position: absolute; + @include sprite($light-x_hover); - top: 6px; left: 9px; + + top: 6px; + left: 9px; cursor: pointer; } } @@ -89,15 +94,12 @@ body.dragging * { position: fixed; height: auto; bottom: 0; - top: 0; left: 0; right: 0; + top: 0; + left: 0; + right: 0; background: transparent; z-index: 1; } - - .tabable:active, - .tabable:focus { - - } } .assignment-description > pre { @@ -116,6 +118,7 @@ body.dragging * { style: normal; weight: normal; } + line-height: 2em; .math { @@ -170,12 +173,11 @@ body.dragging * { } } - .dd-assessment-proxy-ghost { overflow: visible; //pointer-events: auto; - .x-dd-drag-ghost{ + .x-dd-drag-ghost { filter: none; opacity: 1; position: relative; @@ -185,19 +187,16 @@ body.dragging * { font: normal normal 1.3em/2em var(--body-font-family); border: 1px solid var(--primary-blue); border-radius: 3px; - box-shadow: 0px 0px 7px -2px rgba(0, 0, 0, 0.5); + box-shadow: 0 0 7px -2px rgba(0, 0, 0, 0.5); display: inline-block; padding: 0 15px; - color: #fff; background: var(--primary-blue); - cursor: grabbing; } - } -.feedback-panel{ +.feedback-panel { &, & > .x-panel-body { overflow: visible; } @@ -210,19 +209,19 @@ body.dragging * { } } - .x-component-feedback-title{ + .x-component-feedback-title { margin: 0 -60px 0 -30px; padding: 0 60px 0 30px; position: relative; border-bottom: 1px solid #f0f0f0; - h1{ + h1 { font: normal 200 1.6em/1 var(--body-font-family); color: var(--secondary-grey); margin: 0; } - .message{ + .message { font: normal 500 1.1em/2.5 var(--body-font-family); color: var(--secondary-grey); margin-bottom: 10px; @@ -236,7 +235,7 @@ body.dragging * { left: 0; right: 0; background-color: #f0f0f0; - box-shadow: 0 0 5px 0 rgba(0,0,0,0.35); + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.35); clip: rect(300px, auto, 310px, auto); border-radius: 350em / 5em; } @@ -251,6 +250,7 @@ body.dragging * { .feedback-item { $s: 35px; $m: $s + 10px; + border: 0 solid #f0f0f0; border-bottom-width: 1px; position: relative; @@ -300,9 +300,11 @@ body.dragging * { color: var(--primary-blue); cursor: pointer; } + span { display: inline-block; - &::after{ + + &::after { color: var(--tertiary-grey); font: normal 500 12px/20px var(--body-font-family); text-decoration: none !important; @@ -313,6 +315,7 @@ body.dragging * { padding: 0 0.5em; background: none; } + &:last-of-type::after { content: ''; display: none; @@ -323,20 +326,20 @@ body.dragging * { } } - .x-component-comment-box{ + .x-component-comment-box { background-color: var(--panel-background); border: 1px solid #f0f0f0; border-top: none; box-shadow: inset 0 1px 0 0 #fff; overflow: hidden; - .editor-box{ + .editor-box { border: 1px solid #dcdcdc; background-color: white; line-height: 39px; margin: 10px; - &:not(.editor-active)::before{ + &:not(.editor-active)::before { content: 'Add a comment'; margin-left: 10px; color: var(--tertiary-grey); @@ -349,7 +352,7 @@ body.dragging * { .x-panel-assessment { &.question.no-data { border-color: #f0f0f0; - box-shadow: 0px 1px 2px 1px rgba(127, 127, 127, 0.08); + box-shadow: 0 1px 2px 1px rgba(127, 127, 127, 0.08); &::before { content: ""; @@ -395,7 +398,7 @@ body.dragging * { background: var(--panel-background); border: 1px solid #e2e2e2; border-radius: 3px; - box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.08); + box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.08); a { color: var(--primary-blue); @@ -405,11 +408,12 @@ body.dragging * { & > .x-panel-body-assessment { .question-content { @extend .assessment-content; + vertical-align: initial; margin: 17px 40px 15px 40px; min-height: 28px; - &:empty {display: none;} + &:empty { display: none; } & > pre { padding: 6px 20px; @@ -417,12 +421,14 @@ body.dragging * { overflow-x: auto; } } + .question-number-container { top: 21px; left: 13px; min-width: 20px; position: absolute; } + .question-number { color: rgb(190, 190, 190); font-size: 14px; @@ -430,13 +436,15 @@ body.dragging * { font-weight: normal; float: right; } - background: #ffffff; + + background: #fff; color: var(--primary-grey); overflow: hidden; position: relative; - .labels{ + .labels { padding: 10px 15px 0 0; + @include draggable-span; } } @@ -450,12 +458,13 @@ body.dragging * { size: 14px; style: normal; } - border: 0px solid #e2e2e2; + + border: 0 solid #e2e2e2; border-bottom-width: 1px !important; padding: 11px 10px 6px 10px; - &.correct{ font-style: italic; color: var(--primary-green); } - &.incorrect{ font-style: italic; color: var(--primary-red); } + &.correct { font-style: italic; color: var(--primary-green); } + &.incorrect { font-style: italic; color: var(--primary-red); } .title, .status { display: inline; @@ -463,11 +472,11 @@ body.dragging * { .controls { @include like-and-favorite; + position: absolute; right: 0; top: 0; - .video { opacity: 0.8; position: relative; @@ -486,8 +495,8 @@ body.dragging * { position: absolute; left: 3px; top: 2px; - content: ' '; + @include sprite($video); } } @@ -500,13 +509,13 @@ body.dragging * { } } - .dropzone:not(.graded) { color: #e0e0e0; font-weight: 500; .target.drag { transition: padding-right 0.5s ease; + .reset { transition: all 0.5s ease; display: inline-block; @@ -518,13 +527,17 @@ body.dragging * { top: 0; left: 0; cursor: pointer; + @include icon($light-x,10px,6px); - &:hover::after{ + + &:hover::after { @include sprite($light-x_hover); } } + &:hover { padding-right: 0; + .reset { width: 1.5em; opacity: 1; @@ -553,11 +566,12 @@ body.dragging * { border: 1px solid var(--primary-blue); border-radius: 3px; background: #fff; - box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2); + box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.2); display: inline-block; padding: 0 15px; font: normal normal 1em/2 var(--body-font-family); margin: 15px 5px 15px 0; + @include experimental-value(cursor,grab); &:active, @@ -574,7 +588,6 @@ body.dragging * { visibility: hidden; } - .reset { display: none; } @@ -585,7 +598,9 @@ body.dragging * { &.correct { cursor: pointer; + @include icon($circle-check-green-18,26px,11px); + .target.drag { background: var(--primary-green); border-color: var(--primary-green); @@ -597,7 +612,9 @@ body.dragging * { &.incorrect { cursor: pointer; + @include icon($circle-x-red-18,26px,11px); + .target.drag { background: var(--primary-red); border-color: var(--primary-red); @@ -608,7 +625,6 @@ body.dragging * { } } - &.submission-panel { border: 0 solid #ebebeb; border-top-width: 1px; @@ -641,20 +657,20 @@ body.dragging * { } .reset,.submit { - border: 1px solid rgba(0,0,0,0); + border: 1px solid rgba(0, 0, 0, 0); cursor: pointer; &.tabable:active, &.tabable:focus { - border: 1px dashed rgba(0,0,0,0.5); + border: 1px dashed rgba(0, 0, 0, 0.5); } } - .submit{ + .submit { background: var(--primary-blue); border: 1px solid var(--border-blue); - color: #ffffff; - font:{ + color: #fff; + font: { weight: bold; style: italic; } @@ -662,21 +678,22 @@ body.dragging * { &.disabled { cursor: default; border-color: #d0d0d0; - background: rgba(184,184,184,0.5); - color: rgba(255,255,255,0.7); + background: rgba(184, 184, 184, 0.5); + color: rgba(255, 255, 255, 0.7); } } } } &.scoreboard { - & > .x-panel-body-assessment{ padding: 0 15px 0 10px; } + & > .x-panel-body-assessment { padding: 0 15px 0 10px; } .x-btn-secondary-large .x-btn-inner { font-weight: bold; } + & > .score-header { - border: 0px solid #efefef; + border: 0 solid #efefef; border-bottom-width: 1px !important; border-radius: 3px 3px 0 0; - box-shadow: 0 1px 0 0 #ffffff; + box-shadow: 0 1px 0 0 #fff; padding: 6px 10px; font: { family: var(--body-font-family); @@ -696,7 +713,7 @@ body.dragging * { position: relative; float: right; color: var(--secondary-grey); - font:{ + font: { family: var(--body-font-family); size: 11px; style: normal; @@ -708,9 +725,11 @@ body.dragging * { .arrow { @include arrow(top,7px,4px,#a2a2a2); + vertical-align: middle; position: absolute; - right: 2px; top: 6px; + right: 2px; + top: 6px; } } } @@ -744,55 +763,60 @@ body.dragging * { size: 12px; } - &.correct { color: #94b61a; } - &.incorrect { color: #e95a57; } - &.questions{ padding: 0; color: var(--tertiary-grey); font-weight: 400; } - &.correct { + color: #94b61a; + @include icon($check_progress_grn,$top: 3px); } + &.incorrect { + color: #e95a57; + @include icon($red-x-10,$top: 3px); } + + &.questions { padding: 0; color: var(--tertiary-grey); font-weight: 400; } } } &.assignment { .tally .stat { padding-left: 0; - &::after {content: none; display: none;} + &::after { content: none; display: none; } } } background: #fcfcfc; border: 1px solid #e2e2e2; border-radius: 5px; - box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.08); + box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.08); width: 100%; } & > .parts { margin: 0; border-radius: 0 0 3px 3px; - border: 0px solid #e2e2e2; + border: 0 solid #e2e2e2; border-top-width: 1px !important; &.multipart > .x-panel-body-assessment, &.part-of-set > .x-panel-body-assessment { padding-bottom: 0; .footer .action.check { display: none; } + .multipart-submission .footer .action.check { display: block; border-radius: 0 0 3px 0; } } + &.correct.multipart > .x-panel-body-assessment, &.correct.part-of-set > .x-panel-body-assessment { padding-bottom: 20px; } - &.multipart > .x-panel-body-assessment{ - padding: 0px; + &.multipart > .x-panel-body-assessment { + padding: 0; .part-container { padding: 30px 60px; @@ -810,13 +834,13 @@ body.dragging * { font-weight: 600; color: var(--primary-grey); } + .content { font-weight: normal; color: var(--secondary-grey); } } } - } & > .x-panel-body-assessment { @@ -827,7 +851,7 @@ body.dragging * { .response-container { position: relative; min-height: 38px; - background: #ffffff; + background: #fff; border: 1px solid var(--tertiary-grey); .inputbox { @@ -835,7 +859,8 @@ body.dragging * { min-height: 38px; @include icon($circle-x-red-18,$top: 10px, $left: 10px); - &::after{ + + &::after { display: none; } @@ -853,8 +878,9 @@ body.dragging * { min-width: 100%; padding: 12px 8px 5px 8px !important; - &[data-label]::after{ + &[data-label]::after { @include placeholder-style(); + content: attr(data-label); margin: 0.3em; } @@ -864,7 +890,9 @@ body.dragging * { position: absolute; display: inline-block; white-space: nowrap; + @include placeholder-style(); + padding: 0 0.3em; line-height: 38px; top: 0; @@ -874,10 +902,13 @@ body.dragging * { &, input.answer-field { font-weight: 600; } + padding-left: 28px; + input.answer-field { left: 28px; } + &::after { display: block; } @@ -888,7 +919,7 @@ body.dragging * { &::after { @include sprite($circle-x-red-18); } } - &.correct{ + &.correct { &, input.answer-field { color: var(--primary-green); font-weight: normal; @@ -900,17 +931,19 @@ body.dragging * { } .x-mask { - background: rgba(245,245,245,0.66); + background: rgba(245, 245, 245, 0.66); } input.answer-field { @extend .assessment-content; + color: var(--primary-grey); margin: 5px 10px 4px; border: none; padding: 0; position: absolute; - left: 0; right: 0; + left: 0; + right: 0; min-height: 28px; // mainly a fix for IE min-width: 85%; // mainly a fix for IE @@ -922,7 +955,7 @@ body.dragging * { } } - .historyMenu{ + .historyMenu { display: block; position: absolute; top: 9px; @@ -930,16 +963,18 @@ body.dragging * { width: 32px; height: 20px; - &::after{ + &::after { content: ' '; + @include sprite($answer-history); + position: absolute; top: 0; left: 0; } - &:hover{ - &::after{ + &:hover { + &::after { @include sprite($answer-history_active); } } @@ -947,15 +982,17 @@ body.dragging * { .choice { @extend .assessment-content; + cursor: pointer; position: relative; color: var(--primary-grey); vertical-align: middle; min-height: 38px; - background: #ffffff; - border: 0px solid var(--tertiary-grey); + background: #fff; + border: 0 solid var(--tertiary-grey); border-bottom-width: 1px; - &:last-of-type { border-bottom-width: 0px; } + &:last-of-type { border-bottom-width: 0; } + padding-left: 54px; & > span { @@ -967,14 +1004,17 @@ body.dragging * { font-weight: bold; margin-right: 10px; } + .control { position: absolute; - top: 0; left: 0; + top: 0; + left: 0; display: inline-block; width: 54px; height: 38px; border: none; border-left: 6px solid white; + &.checked { border-color: var(--primary-blue); } @@ -993,17 +1033,18 @@ body.dragging * { .multi, .single { .choice, .choice:hover { - &.correct .control { - &,&.checked{ + &,&.checked { border-color: #9ac73c; + @include icon($circle-check-green-18,$top:10px,$left:9px, $position:absolute); } } - &.incorrect .control{ - &,&.checked{ + &.incorrect .control { + &,&.checked { border-color: var(--primary-red); + @include icon($circle-x-red-18,$top:10px,$left:9px, $position:absolute); } } @@ -1016,9 +1057,10 @@ body.dragging * { &.checked::after { @include sprite($checkbox-14_active); } } - &:hover .control{ + &:hover .control { &::after { @include sprite($checkbox-14_hover); } - &.checked::after{ + + &.checked::after { @include sprite($checkbox-14_active); } } @@ -1029,38 +1071,42 @@ body.dragging * { @include icon($radio-button-16, $top:10px,$left:10px, $position:absolute); &.checked::after { @include sprite($radio-button-16_active); } } - &:hover .control{ + + &:hover .control { &::after { @include sprite($radio-button-16_hover); } - &.checked::after{ + + &.checked::after { @include sprite($radio-button-16_active); } } } - .ordering-dd-zone{ + .ordering-dd-zone { display: table; table-layout: fixed; - .ordinal{ + .ordinal { @extend .assessment-content; + position: relative; display: table-row; color: var(--primary-grey); vertical-align: middle; - background: #ffffff; + background: #fff; border: 0 solid var(--tertiary-grey); border-bottom-width: 1px; + &:last-of-type { - border-bottom-width: 0px; - .draggable-area{ border-bottom-width: 0px;} - .label{ border-bottom-width: 0px;} + border-bottom-width: 0; + .draggable-area { border-bottom-width: 0; } + .label { border-bottom-width: 0; } } - &.selected{ + &.selected { opacity: 0.3; } - .text{ + .text { line-height: 26px; min-width: 54px; padding: 12px 0; @@ -1072,7 +1118,7 @@ body.dragging * { padding-left: 20px; padding-right: 20px; font-weight: bold; - background-color: rgba(209,209,209, 0.6); + background-color: rgba(209, 209, 209, 0.6); border: 0 solid var(--tertiary-grey-alt); border-bottom-width: 1px; border-right-width: 1px; @@ -1086,32 +1132,33 @@ body.dragging * { max-width: 275px !important; } } - } - &.target-hover{ - .label{ + &.target-hover { + .label { background-color: var(--panel-background); } } @include draggable-zone; - .draggable-area{ - - .controls{ + .draggable-area { + .controls { .control { position: absolute; - top: 6px; left: 0; + top: 6px; + left: 0; width: 20px; height: 38px; border: none; display: none; - &::after{ + &::after { position: absolute; - left: 0px; top: 10px; + left: 0; + top: 10px; content: ' '; + @include sprite($circle-check-green-18); } } @@ -1124,18 +1171,18 @@ body.dragging * { } } - &.correct, &.incorrect{ - .controls .control{ + &.correct, &.incorrect { + .controls .control { display: inline-block; } - .text{ + .text { margin-left: 38px; } } - &.incorrect .controls .control{ - &::after{ + &.incorrect .controls .control { + &::after { @include sprite($circle-x-red-18); } } @@ -1143,17 +1190,21 @@ body.dragging * { } } - .solution { @extend .assessment-content; + padding: 10px 20px 15px 20px; + .close { opacity: 0.8; cursor: pointer; position: absolute; - right: 17px; top: 16px; + right: 17px; + top: 16px; + @include sprite($window-control-close); - &:hover{ + + &:hover { opacity: 1; } } @@ -1167,8 +1218,8 @@ body.dragging * { margin-left: 10px; } - .ordering-solution{ - span{ + .ordering-solution { + span { display: inline-block; padding-right: 20px; vertical-align: middle; @@ -1180,12 +1231,13 @@ body.dragging * { width: auto !important; } - &.solution-ordering-text{ + &.solution-ordering-text { color: var(--primary-green); } } } } + .explanation { color: var(--secondary-grey); } @@ -1197,6 +1249,7 @@ body.dragging * { .response-container { background: var(--panel-background); border: 1px solid #e2e2e2; + .inputbox { background: var(--panel-background); @@ -1208,20 +1261,24 @@ body.dragging * { } .solution { - background: #FFFFFF; + background: #fff; } } } + .modeled-body-part { .response-container { background: var(--panel-background); border: 1px solid #e2e2e2; + .main { background: var(--panel-background); opacity: 1; + .content { color: var(--primary-grey); } + :hover { cursor: default; } @@ -1243,15 +1300,16 @@ body.dragging * { float: left; .action { float: left; } } + .right { float: right; .action { float: right; } } - .mathsymbol { opacity: 0.6; - &:hover{ opacity: 1; } + &:hover { opacity: 1; } + margin-top: 4px; cursor: pointer; width: 36px; @@ -1264,16 +1322,22 @@ body.dragging * { &.parens { background-position: -82px -2px; } &.approx { background-position: -122px -2px; } &.pi { background-position: -162px -2px; } + &.leq { background: none; + @include icon($symbols-leq); } + &.geq { background: none; + @include icon($symbols-geq); } + &.neq { background: none; + @include icon($symbols-neq); } } @@ -1291,7 +1355,7 @@ body.dragging * { &.check { background: var(--primary-blue); border: 1px solid var(--border-blue); - color: #ffffff; + color: #fff; font: { style: italic; weight: 700; @@ -1305,20 +1369,18 @@ body.dragging * { &.disabled { cursor: default; border-color: #d0d0d0; - background: rgba(184,184,184,0.5); - color: rgba(255,255,255,0.7); + background: rgba(184, 184, 184, 0.5); + color: rgba(255, 255, 255, 0.7); } } &.report { @include icon($reports-gray_hover, $top: 12px); } - } } } - &.file-submission { width: auto; left: 0 !important; @@ -1356,14 +1418,14 @@ body.dragging * { } [table=false] { - opacity: .5; + opacity: 0.5; } & > div.footer { overflow: visible; position: absolute; - .action {padding: 0;} + .action { padding: 0; } & > div.right { display: none; @@ -1412,7 +1474,7 @@ body.dragging * { display: flex; margin: 20px 20px 10px 20px; box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.1), 0 0 1px 1px rgba(0, 0, 0, 0.05); - border-radius: 2px; + border-radius: 2px; &.uploading { opacity: 0.5; @@ -1421,6 +1483,7 @@ body.dragging * { .controls { display: none; } + .clear { display: none; } @@ -1450,6 +1513,7 @@ body.dragging * { font-size: 14px; font-weight: 600; overflow: hidden; + @include ellipse(); .name { @@ -1477,6 +1541,7 @@ body.dragging * { a { color: var(--primary-blue); text-decoration: none; + &:hover, &:visited { color: var(--primary-blue); } @@ -1492,7 +1557,9 @@ body.dragging * { position: absolute !important; top: 10px; right: 20px; + @include icon($window-control-close, $top:0, $left:0); + cursor: pointer; } } @@ -1530,7 +1597,7 @@ body.dragging * { width: 250px; padding: 10px 20px; float: none; - margin: 0px auto; + margin: 0 auto; font-size: 13px; font-weight: 600; position: absolute; @@ -1558,10 +1625,12 @@ body.dragging * { display: block; z-index: 10; } + .drop,.preview-wrapper { display: none; z-index: 0; } + .input-wrapper { input[type=file] { z-index: 11; @@ -1592,7 +1661,6 @@ body.dragging * { z-index: 0; } } - } .empty-submission { @@ -1607,16 +1675,17 @@ body.dragging * { position: relative; top: 30px; margin: 0 auto; + @include sprite($none_large); } .title { position: relative; - top: 40px; - width: 150px; - margin: 0 auto; - color: var(--tertiary-grey); - font-size: 14px; + top: 40px; + width: 150px; + margin: 0 auto; + color: var(--tertiary-grey); + font-size: 14px; } } @@ -1626,6 +1695,7 @@ body.dragging * { .progress { display: none; } + .preview { .meta { .controls { @@ -1633,6 +1703,7 @@ body.dragging * { display: none; } } + .clear { display: none; } @@ -1651,15 +1722,18 @@ body.dragging * { } &.late { - .due {color: var(--primary-red);} + .due { color: var(--primary-red); } + &::after { @include sprite($assignment_late); } } + &.good { .due { color: var(--primary-green); } + &::after { @include sprite($assignment_ontime); } @@ -1693,6 +1767,7 @@ body.dragging * { color: var(--primary-grey); word-break: break-all; } + .due { font: normal 700 0.8em/3 var(--body-font-family); text-transform: uppercase; @@ -1738,17 +1813,18 @@ body.dragging * { input { cursor: pointer; position: absolute; - top: 0; right: 0; + top: 0; + right: 0; opacity: 0; font-size: 3em; } + position: relative; } a.download.button:not(.active) { display: none; } - } .shortanswer-input, @@ -1763,17 +1839,17 @@ body.dragging * { line-height: 3; } - input {display: none;} + input { display: none; } .blank { display: inline-block; margin-right: 0.5em; border-radius: 3px; - position: relative; &.drop-hover { - .drag {visibility: hidden;} + .drag { visibility: hidden; } + background: rgba(0, 0, 0, 0.3); } @@ -1791,22 +1867,23 @@ body.dragging * { } } - &::after { $o: 0; + content: ''; position: absolute; height: 24px; - left: $o; right: $o; bottom: 6px; - + left: $o; + right: $o; + bottom: 6px; border: 2px solid var(--border-grey); border-radius: 3px; clip: rect(20px auto auto auto); } - &:not(.graded) .wordentry { padding-right: 0; + .reset { opacity: 1; display: inline-block; @@ -1819,7 +1896,7 @@ body.dragging * { .wordbank-input { .blank { &.drop-hover, &:not(:empty) { - &::after{display: none;} + &::after { display: none; } } } } @@ -1832,16 +1909,18 @@ body.dragging * { line-height: 2; } - .blank{ + .blank { margin-right: 0; - &::after {display: none;} + &::after { display: none; } } + input { text-align: center; font: normal normal 1em/1 var(--body-font-family); color: var(--secondary-grey); display: inline-block; - padding:x 0; margin: 0 0.2em; + padding: x 0; + margin: 0 0.2em; border: 1px solid var(--border-grey); background: white; } @@ -1876,18 +1955,16 @@ body.dragging * { border-right: 1px #e2e2e2 solid; border-bottom: 1px #e2e2e2 solid; border-left: 1px #e2e2e2 solid; - box-shadow: 0px 1px 2px 1px #e6e6e6; + box-shadow: 0 1px 2px 1px #e6e6e6; padding: 15px; } } - .blank[data-term], .blank[data-input] { display: inline-block; margin-right: 0.5em; border-radius: 3px; - position: relative; &:empty { @@ -1899,11 +1976,13 @@ body.dragging * { &::after { $o: 0; + content: ''; position: absolute; height: 24px; - left: $o; right: $o; bottom: 6px; - + left: $o; + right: $o; + bottom: 6px; border: 2px solid var(--border-grey); border-radius: 3px; clip: rect(20px auto auto auto); @@ -1914,7 +1993,6 @@ body.dragging * { display: none; } - input.preview[readonly] { border: 0; box-shadow: inset 0 -2px 0 0 var(--border-grey); @@ -1922,10 +2000,9 @@ input.preview[readonly] { margin-right: 0.5em; } - .x-component-assessment.audio-clip { - .note-container .context & {display: none;} + .note-container .context & { display: none; } display: inline-block; cursor: pointer; @@ -1941,12 +2018,13 @@ input.preview[readonly] { &.playing { opacity: 0.7; + &::after { background-position: sprite-position($audio-icon_hover); } } - &:hover{ + &:hover { &.playing { opacity: 1; } @@ -1956,7 +2034,7 @@ input.preview[readonly] { } } - &:active{ + &:active { &:not(.noplay)::after { background-position: sprite-position($audio-icon_hover); } @@ -1967,7 +2045,6 @@ input.preview[readonly] { background-position: sprite-position($audio-icon_error); } - .drag:hover &:not(.noplay) { opacity: 0.6; @@ -1975,28 +2052,30 @@ input.preview[readonly] { &:hover { opacity: 1; } + &::after { background-position: sprite-position($audio-icon_white); } } } -.x-dd-drag-ghost{ +.x-dd-drag-ghost { @include draggable-zone; + top: -30px; color: var(--primary-grey); vertical-align: middle; background: transparent; - .draggable-area{ + .draggable-area { height: 100%; display: block; - background: #ffffff; + background: #fff; border: solid 1px var(--primary-blue); background-color: #fff; - box-shadow: 0 0 5px rgba(63,179,246,.23), 0 3px 8px rgba(0,0,0,.22); + box-shadow: 0 0 5px rgba(63, 179, 246, 0.23), 0 3px 8px rgba(0, 0, 0, 0.22); - .text{ + .text { white-space: normal; font: { size: 14px; @@ -2007,7 +2086,8 @@ input.preview[readonly] { } @include draggable-span; - .dd-label-token{ + + .dd-label-token { color: #fff !important; cursor: move; white-space: normal; @@ -2015,7 +2095,7 @@ input.preview[readonly] { background-color: var(--primary-blue); line-height: 26px; border-radius: 3px; - box-shadow: 0 3px 8px rgba(0,0,0,.22); + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22); font: { size: 14px; @@ -2025,7 +2105,6 @@ input.preview[readonly] { } } - //in the iframe .x-ie9 #NTIContent .naquestion { &, * { @@ -2034,16 +2113,17 @@ input.preview[readonly] { } } -.answer_history_menu{ - .x-menu-item{ - &.answer-title{ +.answer_history_menu { + .x-menu-item { + &.answer-title { font-weight: bold !important; font-size: 11px !important; font-family: var(--body-font-family) !important; - color: #8A8989 !important; + color: #8a8989 !important; padding: 10px 0 10px 15px !important; } - &.no-answer-history{ + + &.no-answer-history { font-size: 11px !important; font-family: var(--body-font-family) !important; padding: 10px 0 10px 15px !important; @@ -2051,7 +2131,6 @@ input.preview[readonly] { } } - .alibraimage { display: block; text-align: center; @@ -2073,12 +2152,14 @@ input.preview[readonly] { .survey-history { @include flexItem(1 1 auto); + font-size: 1.5em; color: var(--primary-grey); } .survey-report { @include flexItem(0 0 auto); + padding: 0 20px; color: var(--primary-blue); opacity: 0.8; @@ -2125,7 +2206,7 @@ input.preview[readonly] { } .error { - border: 0px solid #e2e2e2; + border: 0 solid #e2e2e2; border-top-width: 1px !important; padding: 20px 20px 0; font-size: 0.875rem; @@ -2134,7 +2215,7 @@ input.preview[readonly] { } .poll-results-container { - border: 0px solid #e2e2e2; + border: 0 solid #e2e2e2; border-top-width: 1px; padding-bottom: 15px; @@ -2151,6 +2232,7 @@ input.preview[readonly] { font-weight: 600; color: var(--primary-grey); } + .content { font-weight: normal; color: var(--secondary-grey); @@ -2165,7 +2247,7 @@ input.preview[readonly] { .result-part { padding: 20px 20px 0; border-radius: 0 0 3px 3px; - border: 0px solid #e2e2e2; + border: 0 solid #e2e2e2; border-top-width: 1px !important; .tab-bar { @@ -2190,16 +2272,18 @@ input.preview[readonly] { &:first-of-type { border-radius: 3px 0 0 3px; - box-shadow: -1px 0 1px 0 rgba(0, 0, 0, 0.1), - 0 1px 1px 0 rgba(0, 0, 0, 0.1), - 0 -1px 1px 0 rgba(0, 0, 0, 0.1); + box-shadow: + -1px 0 1px 0 rgba(0, 0, 0, 0.1), + 0 1px 1px 0 rgba(0, 0, 0, 0.1), + 0 -1px 1px 0 rgba(0, 0, 0, 0.1); } &:last-of-type { border-radius: 0 3px 3px 0; - box-shadow: 1px 0 1px 0 rgba(0, 0, 0, 0.1), - 0 1px 1px 0 rgba(0, 0, 0, 0.1), - 0 -1px 1px 0 rgba(0, 0, 0, 0.1); + box-shadow: + 1px 0 1px 0 rgba(0, 0, 0, 0.1), + 0 1px 1px 0 rgba(0, 0, 0, 0.1), + 0 -1px 1px 0 rgba(0, 0, 0, 0.1); } } } @@ -2207,7 +2291,7 @@ input.preview[readonly] { .result.chart { .graph { - background: #ffffff; + background: #fff; border: 1px solid var(--tertiary-grey); } @@ -2224,6 +2308,7 @@ input.preview[readonly] { font: normal 400 0.875rem/40px var(--body-font-family); padding: 0 10px; overflow: hidden; + @include ellipse; } @@ -2238,7 +2323,7 @@ input.preview[readonly] { position: relative; display: inline-block; - & > .label { + & > .label { text-align: right; line-height: 40px; font-size: 0.875rem; @@ -2311,6 +2396,7 @@ input.preview[readonly] { width: 25%; margin-bottom: 5px; overflow: hidden; + @include ellipse; .key { @@ -2356,6 +2442,7 @@ input.preview[readonly] { .prev-arrow { margin: 0 1em 0 3em; + @include icon($arrow-up); &.disabled { @@ -2416,7 +2503,6 @@ input.preview[readonly] { } tr { - td, th { text-align: center; @@ -2438,6 +2524,7 @@ input.preview[readonly] { th, td:first-of-type { font: normal 400 0.875rem/40px var(--body-font-family); overflow: hidden; + @include ellipsis; } } diff --git a/src/main/resources/scss/debris/_auditlog.scss b/src/main/resources/scss/debris/_auditlog.scss index 5f43a45f1d..b1f917fd15 100644 --- a/src/main/resources/scss/debris/_auditlog.scss +++ b/src/main/resources/scss/debris/_auditlog.scss @@ -1,21 +1,21 @@ .audit-log { - padding-top: 2em; - - .load-more{ - background: var(--primary-blue); - color: #fff; - cursor: pointer; - font-size: 0.875em; - font-weight: 600; - line-height: 1em; - text-transform: uppercase; - padding: 18px; - height: auto; - text-align: center; - } - - .loading-container { - height: 75px; + padding-top: 2em; + + .load-more { + background: var(--primary-blue); + color: #fff; + cursor: pointer; + font-size: 0.875em; + font-weight: 600; + line-height: 1em; + text-transform: uppercase; + padding: 18px; + height: auto; + text-align: center; + } + + .loading-container { + height: 75px; line-height: 75px; text-align: center; position: relative; @@ -25,7 +25,8 @@ color: var(--primary-grey); line-height: 24px;//height of the spinner padding-left: 30px;//width of the spinner + 6px - top: 50%; left: 50%; + top: 50%; + left: 50%; margin-top: -12px; margin-left: -51px; @@ -38,22 +39,23 @@ .auditlog-item { .content { - background: white; - overflow: hidden; - max-width: 775px; - margin-bottom: 10px; - padding: 15px 14px; - box-shadow: 0 0 3px 0px rgba(0,0,0,0.3); - - @include flexContainer(); + background: white; + overflow: hidden; + max-width: 775px; + margin-bottom: 10px; + padding: 15px 14px; + box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); + + @include flexContainer(); } .avatar-wrapper { width: 40px; height: 40px; margin-right: 14px; + @include flexItem(0 0 auto); - + .avatar-container { width: 40px; height: 40px; @@ -72,14 +74,13 @@ font: normal 400 0.875em/1.36 var(--body-font-family); } - .username { color: var(--primary-blue); margin-right: 5px; } .message { - color: grey; + color: grey; } .date { @@ -91,30 +92,29 @@ } .audit-log-header { - padding-bottom: 1rem; + padding-bottom: 1rem; - @include icon($change-log, $top: 2px); + @include icon($change-log, $top: 2px); - .change-log { - font-weight: 600; - color: var(--secondary-grey); - margin-left: 25px; - } + .change-log { + font-weight: 600; + color: var(--secondary-grey); + margin-left: 25px; + } } .audit-log-prompt { - .audit-log { - padding: 1em; - width: 807px;//1em + 775px + 1em - } + .audit-log { + padding: 1em; + width: 807px;//1em + 775px + 1em + } } - .course-overview .editing-controls .buttons .button.auditLog { - background-color: rgba(0,0,0,0.6); - margin-right: 10px; - color: white; - padding-left: 40px; - - @include icon($change-white, $top: 11px, $left: 15px); + background-color: rgba(0, 0, 0, 0.6); + margin-right: 10px; + color: white; + padding-left: 40px; + + @include icon($change-white, $top: 11px, $left: 15px); } diff --git a/src/main/resources/scss/debris/_avatar-choices.scss b/src/main/resources/scss/debris/_avatar-choices.scss index d776364ce2..d5fce97f62 100644 --- a/src/main/resources/scss/debris/_avatar-choices.scss +++ b/src/main/resources/scss/debris/_avatar-choices.scss @@ -1,14 +1,15 @@ - .avatar-choices { padding: 0; margin: 0; + li { - background: #ffffff; + background: #fff; display: block; position: relative; overflow: hidden; border-bottom: 1px solid var(--border-grey); + &:last-child { border-bottom: none; border-radius: 0 0 3px 3px; @@ -16,11 +17,13 @@ &.selected { box-shadow: inset 4px 0 0 0 var(--primary-blue); + &::after { content: ' '; position: absolute; right: 25px; top: 43px; + @include sprite($check_blue); } } @@ -30,8 +33,8 @@ height: 54px; float: left; margin: 20px 0 20px 20px; - border: 1px solid #aaaaaa; - box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.3); + border: 1px solid #aaa; + box-shadow: -1px 1px 5px 0 rgba(0, 0, 0, 0.3); .avatar, .user-background-container { width: 100%; @@ -46,6 +49,7 @@ color: var(--primary-grey); font-size: 14px; } + div, a, a:link, a:visited, a:active { color: var(--primary-blue); font-size: 12px; diff --git a/src/main/resources/scss/debris/_blog.scss b/src/main/resources/scss/debris/_blog.scss index 9442f680d7..0b44031c90 100644 --- a/src/main/resources/scss/debris/_blog.scss +++ b/src/main/resources/scss/debris/_blog.scss @@ -1,6 +1,7 @@ // .topic-window .forums-topic-editor-box .forums-topic-editor .editor .main .content .blog-window { overflow-x: hidden; + .blog-editor { .editor { .main .content { @@ -9,6 +10,7 @@ } } } + .entry { .meta { .name-wrap { diff --git a/src/main/resources/scss/debris/_branding-defaults.scss b/src/main/resources/scss/debris/_branding-defaults.scss index bc11bcd4b5..e2cc2602f3 100644 --- a/src/main/resources/scss/debris/_branding-defaults.scss +++ b/src/main/resources/scss/debris/_branding-defaults.scss @@ -2,7 +2,7 @@ position: relative; display: none;//site css needs to show it - .logo{ + .logo { // top: 25%; // position: absolute; //example image @@ -16,7 +16,7 @@ color: #fff; padding: 15px; margin: 40px 6px 40px 50%; - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, 0.2); .flourish1, .flourish2 { display: none; @@ -30,18 +30,18 @@ bottom: -20px; } - &::before{ + &::before { left: -1px; width: 1px; opacity: 0.2; //background: #fff; - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, #ffffff 30%, #ffffff 70%, rgba(255, 255, 255, 0.5) 100%); + background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, #fff 30%, #fff 70%, rgba(255, 255, 255, 0.5) 100%); } &::after { left: -96px; width: 100px; - background: rgba(0,0,0,0.5); + background: rgba(0, 0, 0, 0.5); box-shadow: 0 0 10px black; border-radius: 10px / 50%; clip: rect(auto, 110px, auto, 96px); diff --git a/src/main/resources/scss/debris/_buttons.scss b/src/main/resources/scss/debris/_buttons.scss index 258c7c7703..7eff0347a8 100644 --- a/src/main/resources/scss/debris/_buttons.scss +++ b/src/main/resources/scss/debris/_buttons.scss @@ -1,5 +1,4 @@ - $skins: nt,primary,secondary,caution; $sizes: small,medium,large; @@ -9,25 +8,25 @@ $button-borders: #a8a8a8, #a8a8a8; -$button-shadows: #a4c8f5,#cce49c,#ffffff,#ffb3b3; -$button-start-colors: #6D91EB,#a4ce50,#e4e4e4,#ff7979; -$button-end-colors: #384EA9,#87b133,#c8c8c8,#eb4a4a; +$button-shadows: #a4c8f5,#cce49c,#fff,#ffb3b3; +$button-start-colors: #6d91eb,#a4ce50,#e4e4e4,#ff7979; +$button-end-colors: #384ea9,#87b133,#c8c8c8,#eb4a4a; -$button-text-colors: #ffffff,#ffffff,#707070,#ffffff; -$button-text-shadows: #12236a,#688b23,#ffffff,#B93533; +$button-text-colors: #fff,#fff,#707070,#fff; +$button-text-shadows: #12236a,#688b23,#fff,#b93533; $button-text-weights: 500,500,600,500; @each $skin in $skins { $experimental-support-for-svg: true; - $x: index($skins,$skin); + $x: index($skins, $skin); - $border: nth($button-borders,$x); - $shadow: nth($button-shadows,$x); - $startColor: nth($button-start-colors,$x); - $endColor: nth($button-end-colors,$x); - $color: nth($button-text-colors,$x); - $text-shadow: nth($button-text-shadows,$x); - $font-weight: nth($button-text-weights,$x); + $border: nth($button-borders, $x); + $shadow: nth($button-shadows, $x); + $startColor: nth($button-start-colors, $x); + $endColor: nth($button-end-colors, $x); + $color: nth($button-text-colors, $x); + $text-shadow: nth($button-text-shadows, $x); + $font-weight: nth($button-text-weights, $x); $direction: -1px; @@ -36,7 +35,7 @@ $button-text-weights: 500,500,600,500; } @each $size in $sizes { - $i: index($sizes,$size) - 1; + $i: index($sizes, $size) - 1; @each $type in icon, noicon { .x-btn-#{$skin}-#{$size}-#{$type} { @@ -56,31 +55,32 @@ $button-text-weights: 500,500,600,500; } .x-btn-#{$skin}-#{$size} { - margin-left:10px; + margin-left: 10px; border: 1px $border solid; border-radius: 4px; - box-shadow: inset 0px 1px 1px $shadow; + box-shadow: inset 0 1px 1px $shadow; padding: (4px*$i) 10px+(5px*$i); - background-image: linear-gradient(to bottom, $startColor 0%, $endColor 100%); &.x-over {} - &.x-disabled{ + + &.x-disabled { box-shadow: none; background: #e4e4e4; border-color: #e4e4e4; cursor: default; //color: #adadad; - .x-btn-inner{ + .x-btn-inner { box-shadow: none; text-shadow: none; font-weight: lighter; color: var(--secondary-grey); } } + &.x-pressed { - box-shadow: inset 0px -1px 1px $shadow; + box-shadow: inset 0 -1px 1px $shadow; background-image: linear-gradient(to bottom, $endColor 0%, $startColor 100%); } @@ -97,17 +97,19 @@ $button-text-weights: 500,500,600,500; .x-btn-flat-large, .x-btn-flat-medium { cursor: pointer; + a { background: none; border: none; padding: 12px 20px; - .x-btn-inner{ + .x-btn-inner { font: { size: 14px; style: normal; weight: normal; } + color: var(--primary-grey); padding-right: 2px; } @@ -117,6 +119,7 @@ $button-text-weights: 500,500,600,500; .x-btn-blue-large, .x-btn-blue-medium { cursor: pointer; + .x-btn-button { padding: 8px 20px; letter-spacing: 0.1em; @@ -126,14 +129,15 @@ $button-text-weights: 500,500,600,500; cursor: pointer; z-index: 10; - .x-btn-inner{ + .x-btn-inner { font: { size: 14px; style: italic; weight: 600; family: var(--body-font-family); } - color: #ffffff; + + color: #fff; padding-right: 2px; } } @@ -195,14 +199,13 @@ $button-text-weights: 500,500,600,500; display: inline-block; cursor: pointer; background-color: white; - background-image: linear-gradient(to bottom, #ffffff 0%, #f2f2f2 100%); + background-image: linear-gradient(to bottom, #fff 0%, #f2f2f2 100%); color: var(--secondary-grey); border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); text-align: center; line-height: 40px; padding: 0 1rem; - } &.synclock { diff --git a/src/main/resources/scss/debris/_card.scss b/src/main/resources/scss/debris/_card.scss index 663f8611ef..09ca3a11f8 100644 --- a/src/main/resources/scss/debris/_card.scss +++ b/src/main/resources/scss/debris/_card.scss @@ -1,7 +1,7 @@ -%icon-fallback-link {background-image: url(/app/resources/images/file-icons/icon-www.png) !important;} -%icon-fallback-unknow {background-image: url(/app/resources/images/file-icons/generic.png) !important;} -%icon-fallback-download {background-image: url(/app/resources/images/file-icons/blank-download.png) !important;} +%icon-fallback-link { background-image: url(/app/resources/images/file-icons/icon-www.png) !important; } +%icon-fallback-unknow { background-image: url(/app/resources/images/file-icons/generic.png) !important; } +%icon-fallback-download { background-image: url(/app/resources/images/file-icons/blank-download.png) !important; } @mixin file-custom-icon() { .icon { @@ -13,6 +13,7 @@ $red: var(--primary-red); $gap: 0.625rem; $icon-width: 125px; + color: $grey; position: absolute; top: 0; @@ -25,13 +26,15 @@ &.fallback { @extend %icon-fallback-download; + &.www { @extend %icon-fallback-link; - label {display: none;} + label { display: none; } } + &.unknown { @extend %icon-fallback-unknow; - label {display: none;} + label { display: none; } } label { diff --git a/src/main/resources/scss/debris/_charts.scss b/src/main/resources/scss/debris/_charts.scss index 10ebb97794..d85ee4a101 100644 --- a/src/main/resources/scss/debris/_charts.scss +++ b/src/main/resources/scss/debris/_charts.scss @@ -19,9 +19,12 @@ ul.legend { position: absolute; - bottom: 0; left: 0; right: 0; - list-style-type:none; - margin: 0; padding: 0 30px; + bottom: 0; + left: 0; + right: 0; + list-style-type: none; + margin: 0; + padding: 0 30px; .label:nth-child(2n):not(.total) { text-align: right; @@ -29,7 +32,7 @@ .label { text-align: left; - list-style-type:none; + list-style-type: none; position: static; float: left; width: 50%; @@ -44,6 +47,7 @@ display: block; line-height: 1em; overflow: hidden; + @include ellipse; //text-align: center; } @@ -57,4 +61,4 @@ text-align: center; } } -} \ No newline at end of file +} diff --git a/src/main/resources/scss/debris/_chat.scss b/src/main/resources/scss/debris/_chat.scss index ca5566fb04..0534028beb 100644 --- a/src/main/resources/scss/debris/_chat.scss +++ b/src/main/resources/scss/debris/_chat.scss @@ -1,5 +1,4 @@ - .chat-window { @extend .nti-window; @@ -7,7 +6,7 @@ left: auto !important; top: 100px !important; border: none; - background-color: rgba(255,255,255, 0.0); + background-color: rgba(255, 255, 255, 0); &.gutter-list-open { right: 240px !important; @@ -17,11 +16,11 @@ height: 42px; background-color: #2d2d2d; border: none; - box-shadow: none; + box-shadow: none; .header-body { > span { - color: #ffffff; + color: #fff; font-size: 16px; font-weight: 600; text-transform: capitalize; @@ -37,13 +36,12 @@ &.minimize { display: none; } - - } &.has-tools { padding-left: 5px; - &:after { + + &::after { content: none; } } @@ -51,13 +49,15 @@ .tools { padding-right: 0; - img.tool{ + + img.tool { &.settings { opacity: 0.6; margin-right: 5px; + @include sprite($chat_options); - &:hover{ + &:hover { opacity: 1; } } @@ -66,20 +66,26 @@ display: none; //turned off until this is possible in the server... opacity: 0.6; margin-right: 5px; + @include sprite($add_people); - &:hover{ + + &:hover { opacity: 1; } } + &.flag-for-moderation { display: none; margin-right: 5px; + @include sprite($flag-chat-13); - &:hover{ + + &:hover { @include sprite($flag-chat-13_hover); } + &.moderating { - &,&:hover{ + &,&:hover { @include sprite($flag-chat-13_active); } } @@ -104,6 +110,7 @@ & > div.gutter-entry:first-child { border-radius: 5px 0 0 0; } + .gutter-entry { overflow: hidden; position: relative; @@ -118,6 +125,7 @@ float: left; margin: 3px 10px 3px 6px; } + .wrapper { margin: 6px 0 10px 53px; width: 115px; @@ -125,8 +133,10 @@ .name { @include menu-label-text-treatment; } + .status { @include menu-label-text-treatment; + text-transform: none; font-weight: 500; font-style: italic; @@ -172,6 +182,7 @@ } } } + &.moderating { .log-entry-wrapper { div.message-bounding-box { @@ -180,11 +191,10 @@ } } } - } .chat-log-view { - overflow:{ + overflow: { x: hidden; y: auto; //scroll; } @@ -197,7 +207,7 @@ // .x-mask { - background: rgba(245,245,245,0); // Make it transparent + background: rgba(245, 245, 245, 0); // Make it transparent } .control { @@ -206,28 +216,34 @@ &.moderating { .control { - top: 15px; left: 7px; + top: 15px; + left: 7px; float: left; display: inline-block; width: 15px; height: 15px; + @include icon($checkbox-14); + &:hover { - &::after{ + &::after { @include sprite($checkbox-14_hover); } } - &.checked{ + + &.checked { &,&:hover { - &::after{ + &::after { @include sprite($checkbox-14_active); } } } + &.confirmFlagged { display: none; } } + .log-entry-wrapper { div.message-bounding-box { margin-left: 25px; @@ -243,17 +259,17 @@ font-style: italic; font-weight: 600; - .message{ + .message { word-wrap: break-word; &.more { padding: 10px 10px; - background-color: #3f3f3f; - font-size: 14px; - width: 160px; - margin: 8px auto; - border-radius: 5px; - cursor: pointer; + background-color: #3f3f3f; + font-size: 14px; + width: 160px; + margin: 8px auto; + border-radius: 5px; + cursor: pointer; } } } @@ -267,10 +283,10 @@ .avatar { display: none; } - .control{ + + .control { display: none; } - } .avatar-container { @@ -298,13 +314,16 @@ &.flagged { border: 1px solid #fd9191; background: #fefefe; - .name{ + + .name { color: #fd817f; } + .body-text { color: #fec1bf; text-decoration: line-through; } + &::before { content: url(../images/elements/other-bubble-tip-flagged.png); } @@ -332,12 +351,15 @@ background: #fefefe; border: 1px solid #e3e3e3; margin: 14px; + .name { display: none; } + .body-text { color: var(--secondary-grey); } + &::before { left: inherit; top: inherit; @@ -353,14 +375,17 @@ font-size: 10px; margin-bottom: 3px; text-transform: uppercase; + @include ellipse; + overflow: hidden; max-width: 210px; } + .body-text { font-size: 10pt; font-weight: 700; - color: #ffffff; + color: #fff; // break-word for most browsers works fine, but need to insert // hyphens for longer bits of text, and ms workaround @@ -377,6 +402,7 @@ .entry-card { border: none; + .mod-buttons { // border-radius: 0 0 5px 5px; padding: 4px 12px; @@ -392,16 +418,16 @@ .chat-entry { position: absolute; - background-color: rgba(35, 35, 35, 0.0); //transparent - bottom: 0px; - right: 0px; - left: 0px; - z-index: 10; - border: none; + background-color: rgba(35, 35, 35, 0); //transparent + bottom: 0; + right: 0; + left: 0; + z-index: 10; + border: none; - .x-mask { - background: rgba(63,63,63, 0.9); //TODO: find a better color. - } + .x-mask { + background: rgba(63, 63, 63, 0.9); //TODO: find a better color. + } .entry-wrapper { margin: 10px 8px 10px 8px; @@ -412,12 +438,14 @@ .add-whiteboard { float: right; margin: 10px 4px; + @include sprite($whiteboard); + cursor: pointer; opacity: 0.6; &:hover { - opacity: 1.0; + opacity: 1; } } @@ -430,7 +458,7 @@ color: var(--tertiary-grey); //Make it transparent - background-color: rgba(35,35,35,0.0); + background-color: rgba(35, 35, 35, 0); height: 30px; font-family: var(--body-font-family); font-size: 14px; @@ -454,11 +482,14 @@ .chat-transcript { @include divider; + .divider { margin: 20px 15px; + &::after { border-bottom: none; } + span { color: var(--tertiary-grey); } @@ -468,24 +499,29 @@ .message:not(.moderated) { .control { position: relative; - top: 15px; left: 7px; + top: 15px; + left: 7px; float: left; display: inline-block; width: 15px; height: 15px; + @include icon($checkbox-14); + &:hover { - &::after{ + &::after { @include sprite($checkbox-14_hover); } } - &.checked{ + + &.checked { &,&:hover { - &::after{ + &::after { @include sprite($checkbox-14_active); } } } + &.confirmFlagged { display: none; } @@ -494,11 +530,12 @@ .time { margin-left: 30px; } + .wrap { margin-left: 100px; .body .body-divider { - margin-right: 0; + margin-right: 0; } } } @@ -511,6 +548,7 @@ .time { @include menu-label-text-treatment; + position: absolute; width: 60px; top: 1.5em; @@ -522,9 +560,12 @@ .wrap { margin-left: 70px; + .name { @include menu-label-text-treatment; + color: var(--primary-blue); + .me { color: var(--tertiary-grey); } @@ -534,11 +575,13 @@ color: var(--primary-grey); word-wrap: break-word; word-break: break-word; + .body-divider { margin-right: 30px; .whiteboard-container { - .overlay {bottom: 0;} + .overlay { bottom: 0; } + .toolbar { display: none !important; } @@ -558,34 +601,35 @@ &.flagged, &.confirmFlagged { background: #fefefe; - .name{ + + .name { color: #fd817f; } + .body { color: #fec1bf; text-decoration: line-through; } } } - - } #chat-dock-placeholder { cursor: pointer; } #chat-dock-placeholder, -#chat-dock > .x-panel-header{ +#chat-dock > .x-panel-header { background-color: var(--panel-background); box-shadow: 0 -1px var(--border-grey), inset 0 1px #fcfcfc; border-bottom: 1px solid #dfdfdf; border-bottom-width: 1px !important; color: var(--secondary-grey); - text-shadow: 0 1px rgba(255,255,255,0.7); + text-shadow: 0 1px rgba(255, 255, 255, 0.7); font: italic 700 14px/36px var(--body-font-family); background-image: linear-gradient(to top, #d3d3d3 0%, #f3f3f3 100%); .x-header-text-container { padding: 0 60px 0 20px; + @include icon($rhp-arrow-open-dark, $top: 14px, $left:8px); } @@ -595,19 +639,20 @@ .count { position: absolute; - top: 9px; right: 10px; + top: 9px; + right: 10px; padding: 0 4px; text-align: center; min-width: 29px; border-radius: 8px; background: #299bdc; font: normal 600 12px/17px var(--body-font-family); - color: #ffffff; - box-shadow: 0 1px rgba(255,255,255,0.3), - inset 0 1px rgba(0,0,0,0.15), - inset 0 0 1px rgba(0,0,0,0.15); + color: #fff; + box-shadow: + 0 1px rgba(255, 255, 255, 0.3), + inset 0 1px rgba(0, 0, 0, 0.15), + inset 0 0 1px rgba(0, 0, 0, 0.15); } - } #chat-dock-placeholder { @@ -617,14 +662,12 @@ } #chat-dock-placeholder.notice-me, -#chat-dock.notice-me > .x-panel-header -{ +#chat-dock.notice-me > .x-panel-header { background-color: var(--primary-blue); box-shadow: 0 -1px #d9d9d9, inset 0 1px #95ddfb; border-bottom-color: #30a1f4; background-image: linear-gradient(to top, #30a1f4 0%, #4ec6f8 100%); - - color: #ffffff; + color: #fff; text-shadow: 0 -1px #33a4f4; font-weight: 600; @@ -633,15 +676,16 @@ } } -#chat-dock-placeholder.notice-me{ +#chat-dock-placeholder.notice-me { .x-header-text-container { @include icon($rhp-arrow-closed, $top: 14px, $left:8px); } } #chat-dock-placeholder.hide-arrow, -#chat-dock.hide-arrow .x-panel-header{ +#chat-dock.hide-arrow .x-panel-header { cursor: default; + .x-header-text-container { &::after { display: none !important; @@ -649,26 +693,27 @@ } } -.chat-dock-item{ +.chat-dock-item { position: relative; overflow: hidden; min-height: 50px; div { $val: opacity 0.5s, color 0.5s, background 0.5s; + @include experimental(transition, $val); } - background: #ffffff; + background: #fff; - .avatars{ + .avatars { position: absolute; top: 0; left: 0; width: 50px; height: 50px; - .avatar{ + .avatar { position: absolute; top: 0; left: 0; @@ -677,47 +722,48 @@ background-size: cover; background-position: center; - &.img2,&.img3,&.img4{ + &.img2,&.img3,&.img4 { display: none; } } - &.quad{ - .avatar{ + &.quad { + .avatar { width: 50%; height: 50%; - &.img2,&.img4{ + &.img2,&.img4 { left: 50%; } - &.img3,&.img4{ + &.img3,&.img4 { top: 50%; } - &.img2,&.img3,&.img4{ + &.img2,&.img3,&.img4 { display: block; } } } } - .count,.close{ + .count,.close { position: absolute; } .count { padding: 0 4px; - top: 17px; right: 10px; + top: 17px; + right: 10px; text-align: center; min-width: 24px; border-radius: 8px; background: #299bdc; font: normal 600 12px/17px var(--body-font-family); - color: #ffffff; + color: #fff; } - .close{ + .close { top: 0; bottom: 0; right: 0; @@ -725,14 +771,17 @@ background: #f6f6f6; opacity: 0; visibility: hidden; + @include icon($rhp-close-chat,$top:19px,$left:19px); position: absolute; &::before { content: ''; - top: 0; bottom: 0; - left: -1px; width: 1px; + top: 0; + bottom: 0; + left: -1px; + width: 1px; overflow: hidden; position: absolute; z-index: 2; @@ -742,19 +791,20 @@ &:hover { background: var(--primary-red); - &::after{ @include sprite($rhp-close-chat_hover); } - &::before {display: none;} + &::after { @include sprite($rhp-close-chat_hover); } + &::before { display: none; } & ~ .avatars { opacity: 0.25; } + & ~ .wrap { background: #feeeee; - .names{ color: #df9b9b; } + .names { color: #df9b9b; } .status { color: #f4c3c3; } } } } - .wrap{ + .wrap { padding: 10px 40px 0 60px; height: 50px; @@ -763,25 +813,25 @@ color: var(--tertiary-grey); } - .names{ + .names { @include ellipse; + overflow: hidden; font: normal 600 12px/16px var(--body-font-family); color: var(--primary-grey); - &.overflown::before{ + &.overflown::before { content: "(" attr(data-count) ")"; display: block; float: left; padding-right: 4px; } } - } - &:hover{ + &:hover { background: #f6f6f6; - box-shadow: 0 0 2px rgba(0,0,0,0.15), inset 0 1px rgba(255,255,255,0.1); + box-shadow: 0 0 2px rgba(0, 0, 0, 0.15), inset 0 1px rgba(255, 255, 255, 0.1); .wrap { &:hover { @@ -790,6 +840,7 @@ } .count { opacity: 0; } + .close { opacity: 1; visibility: visible; @@ -797,9 +848,8 @@ } } - #chat-history { - .x-panel-header{ + .x-panel-header { background: #f1f1f1; color: var(--primary-grey); text-transform: uppercase; @@ -810,28 +860,27 @@ } } - #chat-history-body{ - .more{ + #chat-history-body { + .more { background-color: white; text-align: center; font-size: 14px; - padding: 5px 0px 5px 0px; + padding: 5px 0 5px 0; color: var(--primary-blue); cursor: pointer; - &::after{ + &::after { content: '...'; } } - .no-history{ + .no-history { background-color: white; - padding: 5px 0px 5px 0px; + padding: 5px 0 5px 0; font: italic 300 14px/28px var(--body-font-family); text-align: center; color: var(--tertiary-grey); } - } } @@ -862,7 +911,7 @@ } body.white-shade-mask .chat-gutter-window { - background-color: rgba(35, 35, 35, 0.15); + background-color: rgba(35, 35, 35, 0.15); } .chat-gutter-window, .chat-gutter-list-window, .gutter-calendar-window { @@ -871,8 +920,8 @@ body.white-shade-mask .chat-gutter-window { bottom: 60px; right: 15px; z-index: 200; - width: 60px; - background-color: rgba(35, 35, 35, 0.70); + width: 60px; + background-color: rgba(35, 35, 35, 0.7); border-radius: 5px; padding-bottom: 60px; transition: right 0.5s; @@ -895,45 +944,50 @@ body.white-shade-mask .chat-gutter-window { } } - @media #{$hide-chat-break-point} { .chat-container:not(.show-gutter) & { display: none; } } - .presence-gutter-entry { - margin: 8px auto; - width: 45px; - height: 45px; - cursor: pointer; - - &.show-contacts { - position: absolute !important; - bottom: 0; - left: 8px; - @include icon($contacts-2,$top:1px,$left:1px); - opacity: 0.6; - &:hover { - opacity: 1.0; - } - } - - &.other-contacts { + .presence-gutter-entry { + margin: 8px auto; + width: 45px; + height: 45px; + cursor: pointer; + + &.show-contacts { position: absolute !important; - color: #ffffff; + bottom: 0; + left: 8px; + + @include icon($contacts-2,$top:1px,$left:1px); + + opacity: 0.6; + + &:hover { + opacity: 1; + } + } + + &.other-contacts { + position: absolute !important; + color: #fff; bottom: 55px; left: 8px; + @include icon($more,$top:1px,$left:1px); + opacity: 0.6; - &:hover { - opacity: 1.0; - } + + &:hover { + opacity: 1; + } } - .profile-pic, &.other-contacts { - &[data-badge]:not([data-badge="0"]) { - &::before { + .profile-pic, &.other-contacts { + &[data-badge]:not([data-badge="0"]) { + &::before { content: attr(data-badge); background-color: var(--primary-red); font-size: 0.55em; @@ -943,47 +997,48 @@ body.white-shade-mask .chat-gutter-window { border: 2px solid white; position: absolute; top: -4px; - left: -4px; + left: -4px; border-radius: 12em; z-index: 100; text-indent: 0; - line-height: 1.0em; + line-height: 1em; width: auto; } - } - } + } + } - &.active { - .profile-pic{ - .avatar-pic { - border: 2px solid #747474; - } + &.active { + .profile-pic { + .avatar-pic { + border: 2px solid #747474; + } - &.Online,&.online,&.available { + &.Online,&.online,&.available { .avatar-pic { - border: 2px solid var(--primary-green); - } - + border: 2px solid var(--primary-green); + } } &.idle {} - &.away{ + + &.away { .avatar-pic { border: 2px solid #ebcd25; } } + &.DnD,&.dnd { .avatar-pic { border: 2px solid var(--primary-red); } } - } - } - } + } + } + } &.gutter-calendar-window { right: 80px; width: 280px; - padding-bottom: 0px; + padding-bottom: 0; background-color: rgba(35, 35, 35, 1); &.hidden { @@ -999,7 +1054,7 @@ body.white-shade-mask .chat-gutter-window { } } - &.chat-gutter-list-window { + &.chat-gutter-list-window { right: 10px; width: 220px; @@ -1009,7 +1064,7 @@ body.white-shade-mask .chat-gutter-window { position: relative; .title { - color: #ffffff; + color: #fff; font-size: 14px; font-weight: 200; } @@ -1018,7 +1073,9 @@ body.white-shade-mask .chat-gutter-window { position: absolute !important; right: 20px; top: 10px; + @include icon($window-control-close, $top:0, $left:0); + cursor: pointer; } } @@ -1034,11 +1091,11 @@ body.white-shade-mask .chat-gutter-window { } .presence-gutter-entry { - padding: 0px; + padding: 0; width: 200px; position: relative; - .profile-pic{ + .profile-pic { position: absolute; left: 0; top: 0; @@ -1054,11 +1111,12 @@ body.white-shade-mask .chat-gutter-window { position: relative; width: 150px; height: 42px; - color: #ffffff; + color: #fff; padding: 12px 4px 0 4px; overflow: hidden; font-size: 14px; font-weight: 200; + @include ellipsis; } @@ -1082,14 +1140,11 @@ body.white-shade-mask .chat-gutter-window { .show-contacts { position: relative !important; left: 0; - } } - } } - .chat-notifications-icon { width: 50px; cursor: pointer; diff --git a/src/main/resources/scss/debris/_contact-search.scss b/src/main/resources/scss/debris/_contact-search.scss index 5c095cb521..fff72b2e94 100644 --- a/src/main/resources/scss/debris/_contact-search.scss +++ b/src/main/resources/scss/debris/_contact-search.scss @@ -1,5 +1,4 @@ - @mixin contact-card { overflow: hidden; padding: 5px 8px 3px 20px; @@ -16,17 +15,19 @@ .name { @include menu-label-text-treatment; + color: var(--primary-blue); } + .affiliation { color: var(--secondary-grey); font: { size: 12px; weight: 400; } + margin-left: 2px; } } } - @mixin contact-card-large { position: relative; overflow: hidden; @@ -56,9 +57,11 @@ font: italic 300 30px/40px var(--body-font-family); color: var(--primary-blue); overflow: hidden; + @include ellipse; + text-transform: none; - display:block; + display: block; max-width: 400px; } @@ -70,10 +73,8 @@ } } - - .contact-search { - box-shadow: 0 1px 1px -1px rgba(0,0,0,0.2); + box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2); &.x-box-layout-ct { &, & > .x-box-inner { @@ -81,27 +82,27 @@ } } - background: #ffffff; + background: #fff; .search-field { - background: #ffffff; + background: #fff; border: 0 solid #ededed; border-width: 1px 0; - box-shadow: 0 1px 1px -1px rgba(0,0,0,0.2); + box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2); padding: 10px; - &::after{ + &::after { content: ' '; position: absolute; width: 158px; height: 1px; - background: #ffffff; + background: #fff; top: -1px; right: 0; } } - .empty-list{ + .empty-list { padding: 20px 0; font: italic 300 14px/28px var(--body-font-family); text-align: center; @@ -109,7 +110,7 @@ } .search-results { - box-shadow: inset 0 0 0 -1px #ffffff; + box-shadow: inset 0 0 0 -1px #fff; //border: 1px solid #cacaca; .x-item-selected, @@ -132,7 +133,9 @@ margin-top: 7px; float: right; cursor: pointer; + @include sprite($add-contact); + &:hover { @include sprite($add-contact_active); } @@ -145,21 +148,22 @@ &.my-contact { .add { margin-top: 5px; + @include sprite($options); - &:hover{ + + &:hover { @include sprite($options_active); } } + .text-wrap { margin-right: 36px; } } } - } - - &.large{ + &.large { .search-field { border-width: 1px; } @@ -167,6 +171,7 @@ .search-results { .item { @include contact-card-large; + img.add { margin-top: 7px; } @@ -175,6 +180,7 @@ img.add { margin-top: 5px; } + .text-wrap { margin-right: 36px; } @@ -184,9 +190,9 @@ } } - .contact-popout { position: fixed !important; + &.x-layer { overflow: visible; } @@ -194,15 +200,15 @@ background: var(--quad-grey); border: 1px solid #cecece; //box-shadow: 0 2px 10px 0 rgba(0,0,0,0.14), inset 0 2px 0 0 rgba(255,255,255,0.5); - box-shadow: 0 2px 4px 1px rgba(0,0,0,0.14); + box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.14); .person-card, .header { - - .contact-card{ + .contact-card { @include contact-card; + margin: 0 0 0 0; padding: 0; - background-color: #ffffff; + background-color: #fff; border-bottom: 1px solid #e6e6e6; .text-wrap { @@ -214,45 +220,51 @@ text-transform: none; line-height: 30px !important; } + .affiliation { - color:var(--primary-grey) !important; + color: var(--primary-grey) !important; font: { size: 12px; weight: 400; } + margin-left: 2px; } - .meta-role{ - color:var(--primary-grey); + + .meta-role { + color: var(--primary-grey); font-size: 12px; font-weight: 400; overflow: hidden; + @include ellipse; + padding-right: 10px; } - .location{ - color:var(--primary-grey); + + .location { + color: var(--primary-grey); font-size: 12px; font-weight: 400; padding-right: 10px; } - } img { - width: 100px; height: 100px; + width: 100px; + height: 100px; margin: 0; padding: 0; } } - .person-card-body ul{ + .person-card-body ul { max-height: 300px; - overflow:{ + overflow: { x: hidden; y: auto; //scroll; } } } - .footer{ + .footer { position: relative; bottom: 0; left: 0; @@ -275,48 +287,52 @@ box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.14); } - .left{ + .left { position: relative; margin-right: 105px; display: block; text-align: left; - .control{ + .control { position: relative; width: 50px; height: 44px; display: inline-block; border-right: 1px solid #e6e6e6; - &::after{ + &::after { content: ''; position: absolute; - left: 17px; top: 13px; + left: 17px; + top: 13px; outline: 0; } - &.lists{ - &::after{ - left:15px; + &.lists { + &::after { + left: 15px; + @include sprite($rhp-contact-flyout-lists); } - &:hover{ + &:hover { background-color: #fff; - &::after{ + + &::after { @include sprite($rhp-contact-flyout-lists_hover); } } } - &.options{ - &::after{ + &.options { + &::after { @include sprite($rhp-contact-flyout-settings); } - &:hover{ + &:hover { background-color: #fff; - &::after{ + + &::after { @include sprite($rhp-contact-flyout-settings_hover); } } @@ -324,7 +340,7 @@ } } - .right{ + .right { position: relative; width: 105px; float: right; @@ -337,36 +353,37 @@ line-height: 45px; font: italic 500 14px/45px var(--body-font-family); text-align: center; - color: #ffffff; + color: #fff; width: 105px; } - &.add-contact{ - a.button{ + &.add-contact { + a.button { outline: 1px solid #69a92b; background: #75bc30; } } - &.chat{ + &.chat { width: 90px; - a.button{ + + a.button { width: 90px; outline: 1px solid var(--border-blue); background: var(--primary-blue); } - &.disabled a.button{ + + &.disabled a.button { cursor: default; outline: 1px solid #d0d0d0; - background: rgba(184,184,184,0.5); - color: rgba(255,255,255,0.7); + background: rgba(184, 184, 184, 0.5); + color: rgba(255, 255, 255, 0.7); } } } } - - .add-button.x-container{ + .add-button.x-container { border-top: 1px solid #e6e6e6; box-shadow: inset 0 1px 0 0 #fdfdfd; padding: 12px; @@ -375,16 +392,16 @@ .x-btn-primary-large, .x-btn-secondary-large, .x-btn-caution-large, - .x-btn-tertiary-large{ + .x-btn-tertiary-large { margin: 0; - .x-btn-inner{ + + .x-btn-inner { font-style: italic; } } } } - .user-search-suggestion { position: relative; overflow: hidden; @@ -398,11 +415,13 @@ float: left; margin: 5px; } + span { display: block; margin-left: 40px; font-weight: bold; overflow: hidden; + @include ellipse; } } diff --git a/src/main/resources/scss/debris/_contacts.scss b/src/main/resources/scss/debris/_contacts.scss index b56c33c345..f3beb8f3d8 100644 --- a/src/main/resources/scss/debris/_contacts.scss +++ b/src/main/resources/scss/debris/_contacts.scss @@ -1,7 +1,7 @@ $over-color: #f4f3f3; -@mixin contact-user-row{ - .contact-row{ +@mixin contact-user-row { + .contact-row { height: 50px; position: relative; cursor: pointer; @@ -13,7 +13,8 @@ $over-color: #f4f3f3; .avatar { position: absolute; - top: 0; left: 0; + top: 0; + left: 0; width: 50px; height: 50px; background: { @@ -25,13 +26,17 @@ $over-color: #f4f3f3; .presence { position: absolute; - top: 23px; right: 15px; + top: 23px; + right: 15px; + @include presence-style; } .nib { display: none; + @include icon($add-contact); + cursor: pointer; position: absolute; right: 8px; @@ -43,6 +48,7 @@ $over-color: #f4f3f3; &.not-contact { .presence { display: none; } + .nib { display: block; } @@ -51,14 +57,18 @@ $over-color: #f4f3f3; .wrap { margin: 0 30px 0 60px; padding-top: 10px; + .name { @include ellipse(); + overflow: hidden; font: normal 600 12px/15px var(--body-font-family); color: var(--primary-grey); } + .status { @include ellipse(); + overflow: hidden; font: italic 400 12px/20px var(--body-font-family); color: var(--tertiary-grey); @@ -67,18 +77,19 @@ $over-color: #f4f3f3; } } - .contact-card { margin: 7px 0 0 10px; overflow: hidden; cursor: pointer; .x-menu-list-ct &, - .selection-nt &{ + .selection-nt & { margin-left: 0; + img { &.nib { @include sprite($add); + margin-top: 10px; border: none !important; float: right; @@ -88,18 +99,18 @@ $over-color: #f4f3f3; &.x-menu-item-over, &.selection-item-over, - .selection-item-over & - { - img.nib{ + .selection-item-over & { + img.nib { opacity: 0.5; display: block; + &:active { opacity: 1; } } } - div.avatar, img{ + div.avatar, img { float: left; width: 32px; height: 32px; @@ -108,6 +119,7 @@ $over-color: #f4f3f3; &.nib { @include sprite($options); + display: none; margin-top: 7px; border: none !important; @@ -121,6 +133,7 @@ $over-color: #f4f3f3; &.group { background: url(../images/old_sprites/spr_groups_dark.png) 0 0 no-repeat; } + &.group { background-position: -32px 0; } @@ -132,8 +145,8 @@ $over-color: #f4f3f3; &.public, &.group, - &.list{ - &::after{ + &.list { + &::after { content: ' '; top: 0; left: 0; @@ -141,40 +154,40 @@ $over-color: #f4f3f3; } } - &.public::after{ + &.public::after { @include sprite($dark-globe-26x26); } - &.group::after{ + &.group::after { @include sprite($dark-groups-32x22); } - &.list::after{ + &.list::after { @include sprite($dark-lists-31x21); } } &.card-over { - border-radius: 1px; box-shadow: 0 0 0 4px #f1f1f1; background-color: #f1f1f1; - img.nib{ + img.nib { display: block; + &:active,&:hover { @include sprite($options_active); } } } - .card-body { margin-left: 44px; } - &.offline{ + &.offline { cursor: default; + .name { color: var(--tertiary-grey); } @@ -182,76 +195,81 @@ $over-color: #f4f3f3; .name { @include menu-label-text-treatment; + color: var(--primary-blue); cursor: pointer; } + .status { color: var(--tertiary-grey); font: { size: 8pt; weight: 500; } } } - -.person-options-menu{ - - .x-menu-item{ - &.x-menu-item-unchecked{ - &::after{ +.person-options-menu { + .x-menu-item { + &.x-menu-item-unchecked { + &::after { content: ''; position: absolute; left: 10px; top: 9px; outline: 0; + @include sprite($checkbox-14); } } - &.label{ + &.label { position: relative; margin-top: 10px; background: none !important; padding: 9px 5px 5px 32px !important; - &::after{ + &::after { content: ''; position: absolute; - left: 10px; top: 6px; + left: 10px; + top: 6px; outline: 0; + @include sprite($rhp-contact-flyout-settings); } } - &.no-checkbox{ + &.no-checkbox { background: none !important; - &::after{ + + &::after { background: none !important; } } - } - .close{ + .close { position: absolute; cursor: pointer; - top: 0px; - right: 0px; + top: 0; + right: 0; width: 20px; height: 20px; - &::after{ + + &::after { cursor: pointer; position: absolute; - top: 10px; right: 10px; + top: 10px; + right: 10px; content: ''; + @include sprite($rhp-close-lists); } } } +.contact-popout .group-selection-list, .x-menu .group-selection-list { + background: #fff; -.contact-popout .group-selection-list, .x-menu .group-selection-list{ - background: #ffffff; - - .toolbar{ + .toolbar { position: absolute; top: 0; width: 350px; @@ -259,7 +277,7 @@ $over-color: #f4f3f3; left: 0; background-color: white; - .title{ + .title { position: relative; display: inline-block; cursor: pointer; @@ -269,12 +287,13 @@ $over-color: #f4f3f3; text-transform: uppercase; padding: 13px 0 0 35px; - &::after{ + &::after { content: ''; position: absolute; left: 7px; top: 12px; outline: 0; + @include sprite($rhp-contact-flyout-lists); } } @@ -289,10 +308,10 @@ $over-color: #f4f3f3; top: 0; right: 5px; - - &::after{ + &::after { position: absolute; - top: 7px; left: 14px; + top: 7px; + left: 14px; content: ''; @include sprite($rhp-close-lists); @@ -301,7 +320,7 @@ $over-color: #f4f3f3; } .selection-list-ct { - &::before{ + &::before { content: ''; display: block; height: 2px; @@ -309,10 +328,11 @@ $over-color: #f4f3f3; } background: none; + ul { //padding-bottom: 10px; - &.disallowSelection{ + &.disallowSelection { li.selection-list-item { background: none !important; padding: 5px; @@ -322,45 +342,46 @@ $over-color: #f4f3f3; li.selection-list-item { padding: 5px 5px 5px 35px; color: var(--secondary-grey) !important; + @include icon($check_box, $top: 7px, $left: 12px); - &.selection-item-over{ + &.selection-item-over { background-color: $over-color; color: var(--secondary-grey) !important; pointer: default; } - &.selection-selected { @include icon($check_mark_a, $top: 10px, $left: 15px); + &:active::after { @include sprite($check_mark_b); } } - &.add-group-action { background: none; - &::after {content: none;} + &::after { content: none; } .input-wrap { left: -5px; } } - .name{ + .name { overflow: hidden; + @include ellipse; } a { - &:active, &:visited, &:link{ + &:active, &:visited, &:link { border: 0 dotted var(--secondary-grey); border-bottom-width: 2px; color: var(--secondary-grey); display: inline-block; font-style: italic; - padding: 0px 2px; + padding: 0 2px; text-decoration: none; } } @@ -371,11 +392,14 @@ $over-color: #f4f3f3; height: auto; $value: text-shadow 0.5s, color 0.5s; + transition: $value; &.error { transition: $value; + @include animate(shake); + color: red; text-shadow: 2px 2px 2px #ffc0c0; } @@ -383,12 +407,15 @@ $over-color: #f4f3f3; img.delete-group { display: none; + @include sprite($remove); + margin-top: 3px; border: none !important; float: right; cursor: pointer; opacity: 0.5; + &:active { opacity: 1; } @@ -402,72 +429,78 @@ $over-color: #f4f3f3; } } - -.group-chat-initiator{ +.group-chat-initiator { background: #fafafa; overflow: hidden; position: absolute; - bottom: 0; top: 0; - left: 0; right: 0; + bottom: 0; + top: 0; + left: 0; + right: 0; background: #fafafa; - div[id$=list]{ + div[id$=list] { position: absolute; - bottom: 125px; top: 0; - left: 0; right: 0; + bottom: 125px; + top: 0; + left: 0; + right: 0; overflow: { x: hidden; y: auto; //scroll; } - .contact-row{ + .contact-row { .presence { display: none; } .nib { display: block; - top: 10px; right: 10px; + top: 10px; + right: 10px; width: 20px; height: 20px; - &::after{ @include sprite($checkbox-light-unchecked);} + &::after { @include sprite($checkbox-light-unchecked); } &:hover::after { @include sprite($checkbox-light-unchecked_hover); } } &.checked { .nib { - &::after{ @include sprite($checkbox-light-checked);} + &::after { @include sprite($checkbox-light-checked); } &:hover::after { @include sprite($checkbox-light-checked_hover); } } } } } - div[id$=tokens], div[id$=buttons]{ + div[id$=tokens], div[id$=buttons] { border-top: 1px solid #dcdcdc; } - div[id$=tokens]{ + div[id$=tokens] { background: #fff; position: absolute; overflow: { x:hidden; y: auto; //scroll; } + bottom: 45px; - left: 0; right: 0; + left: 0; + right: 0; min-height: 80px; max-height: 180px; - .tokens { margin-right: 0 !important; } } - div[id$=buttons]{ + div[id$=buttons] { position: absolute; overflow: hidden; bottom: 0; - left: 0; right: 0; + left: 0; + right: 0; height: 45px; div { @@ -479,6 +512,7 @@ $over-color: #f4f3f3; text-align: center; color: var(--secondary-grey); cursor: pointer; + @include experimental(transition, all 0.5s); &.cancel { @@ -489,35 +523,36 @@ $over-color: #f4f3f3; &.start { width: 95px; font: italic bold 14px/44px var(--body-font-family); - color: #ffffff; + color: #fff; border: 1px solid #69a92b; background: #75bc30; - &.disabled{ + &.disabled { cursor: default; border: 1px solid #d0d0d0; - background: rgba(184,184,184,0.5); - color: rgba(255,255,255,0.7); + background: rgba(184, 184, 184, 0.5); + color: rgba(255, 255, 255, 0.7); } } } } - - } - .contacts-view { position: relative; overflow: hidden; - box-shadow: inset -1px 0 0 0 #fff, - inset 1px 0 0 0 #fff; + box-shadow: + inset -1px 0 0 0 #fff, + inset 1px 0 0 0 #fff; &.offline { .contact-row::after { content: ''; position: absolute; - top: 0; left: 0; bottom: 0; right: 0; + top: 0; + left: 0; + bottom: 0; + right: 0; background: rgba(255, 255, 255, 0.5); } } @@ -526,9 +561,12 @@ $over-color: #f4f3f3; .contact-search, .contact-list, - .contact-search-group-chat{ + .contact-search-group-chat { position: absolute; - top: 0; left: 0; right: 0; bottom: 40px; + top: 0; + left: 0; + right: 0; + bottom: 40px; z-index: 0; overflow: { @@ -551,28 +589,31 @@ $over-color: #f4f3f3; &.searching { .contact-search { - display:block; + display: block; } } .button-row { position: absolute; - bottom: 0; left: 0; right: 0; - + bottom: 0; + left: 0; + right: 0; height: 40px; width: 100%; cursor: pointer; &.search { - .search{ + .search { width: 220px !important; - background-color: #ffffff; - input{ - background: #ffffff; + background-color: #fff; + + input { + background: #fff; visibility: visible; opacity: 1; } } + .group-chat { width: 40px !important; } @@ -580,11 +621,11 @@ $over-color: #f4f3f3; & > div { @include experimental(transition, all 0.5s); + border: 1px solid #ebebeb; border-bottom-width: 0; padding-left: 40px; white-space: nowrap; - position: absolute !important; font: italic 400 14px/40px var(--body-font-family); color: var(--tertiary-grey); @@ -594,7 +635,7 @@ $over-color: #f4f3f3; top: 0; &:hover { - background-color: #ffffff; + background-color: #fff; } &:last-of-type { @@ -605,29 +646,33 @@ $over-color: #f4f3f3; left: 0; border-left-width: 0; padding-left: 35px; + @include icon($rhp-search,$top:11px,$left:9px); - &::after{ opacity: 0.6; } + &::after { opacity: 0.6; } input { @include experimental(transition, opacity 0.5s); + visibility: hidden; position: absolute; border: 0; background: #fafafa; - font: normal 400 14px/25px var(--body-font-family); color: var(--primary-grey); height: 40px; - top: 0; left: 30px; right: 26px; + top: 0; + left: 30px; + right: 26px; opacity: 0; } + .clear { @include icon($clear_line); + position: absolute; top: 14px; right: 10px; left: auto; - margin: 0; width: 16px; height: 16px; @@ -638,14 +683,16 @@ $over-color: #f4f3f3; &.group-chat { right: 0; + @include icon($rhp-group-chat,$top:11px,$left:7px); + &:hover::after { @include sprite($rhp-group-chat_hover); } } } - &.no-group-chat{ + &.no-group-chat { &.search .search, .search { width: 260px !important; } .group-chat { display: none; } @@ -653,23 +700,24 @@ $over-color: #f4f3f3; } } - -.disabled-contacts-view{ - padding-top: 0px; +.disabled-contacts-view { + padding-top: 0; color: var(--secondary-grey); - .disabled-message-div{ + .disabled-message-div { background-color: #f1f1f1; padding: 15px; - .disabled-title{ + .disabled-title { color: var(--primary-grey); padding-bottom: 3px; font-size: 16px; font-style: italic; + &:active,&.active { background-position: -56px 0; - &:hover{ + + &:hover { background-position: -84px 0; } } @@ -678,6 +726,7 @@ $over-color: #f4f3f3; background-position: -28px 0; } } + .resend-consent { cursor: pointer; color: var(--primary-blue); @@ -685,17 +734,17 @@ $over-color: #f4f3f3; } } - -div.add-group-action{ +div.add-group-action { padding: 0 0 30px 15px; + a { - &:active, &:visited, &:link{ + &:active, &:visited, &:link { border: 0 dotted var(--secondary-grey); border-bottom-width: 2px; color: var(--secondary-grey); display: inline-block; font-style: italic; - padding: 0px 2px; + padding: 0 2px; text-decoration: none; } } @@ -705,22 +754,24 @@ div.add-group-action{ background: transparent; $value: text-shadow 0.5s, color 0.5s; + @include experimental(transition, $value); &.error { @include experimental(transition, $value); @include animate(shake); + color: red; text-shadow: 2px 2px 2px #ffc0c0; } } } - div.contact-buttons { background: #fff; text-transform: uppercase; - div.contact-button{ + + div.contact-button { cursor: pointer; display: inline-block; position: relative; @@ -730,14 +781,16 @@ div.contact-buttons { font-weight: 600; font-size: 10px; color: var(--tertiary-grey); - &:hover{ + + &:hover { color: var(--secondary-grey); } } div.join-group { @include icon($add-contact-14x14); - &:hover::after{ + + &:hover::after { @include sprite($add-contact-14x14_hover); } } @@ -746,11 +799,13 @@ div.contact-buttons { &::after { content: ' '; position: absolute; - top: 1px; left: 0; + top: 1px; + left: 0; @include sprite($create-group-14x10); } - &:hover::after{ + + &:hover::after { @include sprite($create-group-14x10_hover); } } @@ -759,241 +814,243 @@ div.contact-buttons { &::after { content: ' '; position: absolute; - top: 1px; left: 0; + top: 1px; + left: 0; + @include sprite($create-list); } - &:hover::after{ + + &:hover::after { @include sprite($create-list_hover); } } } -.suggest-window, .profile-create-window{ - box-shadow: 0 0 5px 0 rgba(0,0,0,0.35); - background-color: white; - - .header{ - position: relative; - color: var(--secondary-grey); - border-bottom: 1px solid var(--tertiary-grey-alt); - box-shadow: inset 0 1px 0 0 white; - height: 60px; - background: var(--quad-grey); - padding: 15px 30px; - - .title{ - font: normal 300 20px/34px var(--body-font-family); - } - } - - .container-body { - background: #fff; - min-height: 300px; - max-height: 400px; - padding: 0; - overflow: { - x: hidden; - y: auto; //scroll; - } - - font: normal 400 14px/25px var(--body-font-family); - - .contact-card{ - position: relative; - width: 310px; - border-bottom: 1px solid var(--border-grey); - margin: 0 0 0 30px; - float: left; +.suggest-window, .profile-create-window { + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.35); + background-color: white; + + .header { + position: relative; + color: var(--secondary-grey); + border-bottom: 1px solid var(--tertiary-grey-alt); + box-shadow: inset 0 1px 0 0 white; + height: 60px; + background: var(--quad-grey); + padding: 15px 30px; + + .title { + font: normal 300 20px/34px var(--body-font-family); + } + } + + .container-body { + background: #fff; + min-height: 300px; + max-height: 400px; + padding: 0; + overflow: { + x: hidden; + y: auto; //scroll; + } + + font: normal 400 14px/25px var(--body-font-family); + + .contact-card { + position: relative; + width: 310px; + border-bottom: 1px solid var(--border-grey); + margin: 0 0 0 30px; + float: left; cursor: default; padding: 3px 0 5px 0; - - .avatar{ + .avatar { cursor: default; - width: 48px; - height: 48px; - border-radius: 5px; - margin: 5px 5px 5px 0; - } - - .meta{ - margin-left: 60px; - width: 170px; - height: 48px; - margin-top: 5px; + width: 48px; + height: 48px; + border-radius: 5px; + margin: 5px 5px 5px 0; + } + + .meta { + margin-left: 60px; + width: 170px; + height: 48px; + margin-top: 5px; font: normal 400 12px/16px var(--body-font-family); color: var(--secondary-grey); - .name{ + .name { cursor: default; - color: var(--secondary-grey); - font: normal 600 14px/18px var(--body-font-family); - text-transform: capitalize; - } - } - - .add-to-contacts{ - position: absolute; - top: 17px; - right: 0; - text-transform: capitalize; - font-size: 12px; + color: var(--secondary-grey); + font: normal 600 14px/18px var(--body-font-family); + text-transform: capitalize; + } + } + + .add-to-contacts { + position: absolute; + top: 17px; + right: 0; + text-transform: capitalize; + font-size: 12px; cursor: pointer; - a.button{ - padding: 10px 25px; - height: 38px; - color: var(--secondary-grey); - background: var(--quad-grey); - border-radius: 5px; - border: 1px solid var(--border-grey); - cursor: pointer; - - &:hover{ - background: var(--secondary-green); - color: #ffffff; - border: none; - } - - &.remove-contact, &.selected{ - color: var(--primary-blue); - background: none; - border: none; - } - } - } - } - } - - > .footer{ - position: relative; - color: var(--tertiary-grey); - height: 40px; - background-color: var(--quad-grey); - - &:after { - content: ''; - position: absolute; - top: -10px; - height: 10px; - left: 0; - right: 0; - background-color: rgba(0,0,0,0.35); - box-shadow: 0 0 5px 0 rgba(0,0,0,0.35); - clip: rect(10px, auto, 20px, auto); - border-radius: 335em / 2em; - } - - - a.button { - cursor: pointer; - display: inline-block; - height: 40px; - line-height: 40px; - font-size: 14px; - text-align: center; - color: var(--secondary-grey); - margin: 0; - padding: 0 1.5em; - float: right; - - &.confirm{ - color: #ffffff; - background: var(--primary-blue); - } - - &.disabled{ - cursor: default; - border: 1px solid #d0d0d0; - background: rgba(184,184,184,0.5); - color: rgba(255,255,255,0.7); - } - } - } + a.button { + padding: 10px 25px; + height: 38px; + color: var(--secondary-grey); + background: var(--quad-grey); + border-radius: 5px; + border: 1px solid var(--border-grey); + cursor: pointer; + + &:hover { + background: var(--secondary-green); + color: #fff; + border: none; + } + + &.remove-contact, &.selected { + color: var(--primary-blue); + background: none; + border: none; + } + } + } + } + } + + > .footer { + position: relative; + color: var(--tertiary-grey); + height: 40px; + background-color: var(--quad-grey); + + &::after { + content: ''; + position: absolute; + top: -10px; + height: 10px; + left: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.35); + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.35); + clip: rect(10px, auto, 20px, auto); + border-radius: 335em / 2em; + } + + a.button { + cursor: pointer; + display: inline-block; + height: 40px; + line-height: 40px; + font-size: 14px; + text-align: center; + color: var(--secondary-grey); + margin: 0; + padding: 0 1.5em; + float: right; + + &.confirm { + color: #fff; + background: var(--primary-blue); + } + + &.disabled { + cursor: default; + border: 1px solid #d0d0d0; + background: rgba(184, 184, 184, 0.5); + color: rgba(255, 255, 255, 0.7); + } + } + } } -.profile-create-window{ - .picture-editor-container{ - position: absolute; - top: 60px; - left: 0; - width: 300px; - height: 340px; - padding: 20px; - - .picture-editor{ - .picture-container { +.profile-create-window { + .picture-editor-container { + position: absolute; + top: 60px; + left: 0; + width: 300px; + height: 340px; + padding: 20px; + + .picture-editor { + .picture-container { height: 240px; - .picture{ - width: 214px; - margin: 0 auto; - position: relative; + .picture { + width: 214px; + margin: 0 auto; + position: relative; z-index: 6; - img{ - width: 214px; - } - - .actions{ - position: absolute; - top: 0; - right: 0; - width: 40px; - height: 214px; - background-color: var(--primary-grey); - opacity: 0.6; + img { + width: 214px; + } + + .actions { + position: absolute; + top: 0; + right: 0; + width: 40px; + height: 214px; + background-color: var(--primary-grey); + opacity: 0.6; visibility: hidden; - .link{ - background-color: black; - border-radius: 5px; - width: 30px; - height: 30px; - margin-top: 10px; - cursor: pointer; - position: relative; - margin-left: 5px; - - &::after{ - content: ''; - overflow: hidden; - position: absolute; - top: 6px; - left: auto; - right: 6px; - height: 15px; - width: 15px; - } - - &.upload{ + .link { + background-color: black; + border-radius: 5px; + width: 30px; + height: 30px; + margin-top: 10px; + cursor: pointer; + position: relative; + margin-left: 5px; + + &::after { + content: ''; + overflow: hidden; + position: absolute; + top: 6px; + left: auto; + right: 6px; + height: 15px; + width: 15px; + } + + &.upload { cursor: pointer; + @include icon($edit-15-white, $left:auto, $top: 7px, $right: 6px); - } - } - - .file-input{ - position: absolute; - top: 10px; - left: 5px; - height: 30px; - width: 30px; - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); - opacity: 0; - display: block; - } - } - - &:hover{ - .actions{ - visibility: visible; - } - } - } - - .placeholder{ - width: 214px; - height: 214px; + } + } + + .file-input { + position: absolute; + top: 10px; + left: 5px; + height: 30px; + width: 30px; + filter: progid:dximagetransform.microsoft.alpha(opacity=0); + opacity: 0; + display: block; + } + } + + &:hover { + .actions { + visibility: visible; + } + } + } + + .placeholder { + width: 214px; + height: 214px; background: url('../images/backdrops/add-photo.png') 0 0 no-repeat; padding-top: 118px; text-align: center; @@ -1002,107 +1059,108 @@ div.contact-buttons { font-size: 14px; margin-left: 25px; - .link{ + .link { color: var(--primary-blue); } - } - - .file-input { - display: block; - position: absolute; - top: 20px; - left: 40px; - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); - opacity: 0; - cursor: pointer; - width: 220px; - height: 220px; - z-index: 4; - } - - canvas { + } + + .file-input { + display: block; position: absolute; top: 20px; left: 40px; + filter: progid:dximagetransform.microsoft.alpha(opacity=0); + opacity: 0; + cursor: pointer; width: 220px; height: 220px; - z-index: 2; - } - } + z-index: 4; + } + canvas { + position: absolute; + top: 20px; + left: 40px; + width: 220px; + height: 220px; + z-index: 2; + } + } - .footer{ + .footer { height: 40px; - .button{ + + .button { position: relative; margin: 0 12px; cursor: pointer; padding: 10px 20px; - &.rotate{ - &::after{ + &.rotate { + &::after { content: ''; position: absolute; top: 0; left: 0; + @include sprite($rotate); } } - &.confirm{ + &.confirm { border-radius: 5px; color: white; z-index: 3; overflow: hidden; font: normal 300 0.85em/36px var(--body-font-family); - box-shadow: 0 1px 0 0 rgba(255,255,255,0.1); + box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1); background: var(--secondary-green); - } - } - } - } - } - - .container-body{ - position: relative; - max-height: none; - margin-left: 300px; - height: inherit; - - .fold{ - margin-top: 20px; - .field{ - - .label{ - display: none; - } - - input, textarea{ - width: 87%; - padding: 10px 13px; - margin-bottom: 15px; - border-radius: 4px; - border: 1px solid var(--tertiary-grey-alt); - font-size: 1em; - color: var(--secondary-grey); - } - - textarea{ - height: 100px; - } - - &.locked{ + } + } + } + } + } + + .container-body { + position: relative; + max-height: none; + margin-left: 300px; + height: inherit; + + .fold { + margin-top: 20px; + + .field { + .label { + display: none; + } + + input, textarea { + width: 87%; + padding: 10px 13px; + margin-bottom: 15px; + border-radius: 4px; + border: 1px solid var(--tertiary-grey-alt); + font-size: 1em; + color: var(--secondary-grey); + } + + textarea { + height: 100px; + } + + &.locked { @include icon($lock, $left:auto, $top: 13px, $right: 67px); - &::after{ + + &::after { position: absolute; display: block; content: ''; - } } - } - } - } + } + } + } } #contacts { @@ -1117,14 +1175,15 @@ div.contact-buttons { .search { position: absolute; cursor: pointer; - top: 0; right: 0; + top: 0; + right: 0; width: 153px; height: 50px; padding-top: 5px; color: var(--tertiary-grey); font: italic 400 14px/40px var(--body-font-family); - &::after{ + &::after { content: ' '; position: absolute; top: 17px; @@ -1133,20 +1192,20 @@ div.contact-buttons { @include sprite($search); } - &::before{ - border: 0px solid #ededed; + &::before { + border: 0 solid #ededed; border-bottom-width: 0; content: ' '; position: absolute; - top: 10px; left: -7px; + top: 10px; + left: -7px; right: 0; bottom: 9px; - } &:active, &.active { - &::before{ + &::before { border: 1px solid #ededed; } } @@ -1163,7 +1222,7 @@ div.contact-buttons { } } - .contact-card{ + .contact-card { position: relative; overflow: hidden; min-height: 150px; @@ -1181,13 +1240,14 @@ div.contact-buttons { box-shadow: 0 0 3.5px 0.5px rgba(30, 30, 30, 1); } - .nib{ + .nib { top: 40%; right: 20px; float: none; display: none; @include icon($options_active,$top: auto, $left: auto); + position: absolute; margin-top: 10px; width: 20px; @@ -1197,12 +1257,12 @@ div.contact-buttons { .meta { margin: 15px 0 0 160px; - [data-field],.separator{ + [data-field],.separator { color: var(--primary-grey); font: normal 500 14px/25px var(--body-font-family); } - .separator{ color: var(--tertiary-grey); } + .separator { color: var(--tertiary-grey); } .name { display: block; @@ -1212,7 +1272,9 @@ div.contact-buttons { font: italic 300 30px/40px var(--body-font-family); color: var(--primary-blue); overflow: hidden; + @include ellipse; + text-transform: none; max-width: 400px; } @@ -1238,27 +1300,31 @@ div.contact-buttons { opacity: 1; } - &::after{ + &::after { content: ' '; position: absolute; - top: 4px; left: 0; + top: 4px; + left: 0; } } - .chat{ - padding-left:25px; + .chat { + padding-left: 25px; + &::after { @include sprite($activity-chat); } } + .email::after { @include sprite($account-email); } + .message::after { left: 2px; + @include sprite($activity-comment); } - } } @@ -1269,11 +1335,11 @@ div.contact-buttons { } } - &:hover, &.active{ - .nib{ + &:hover, &.active { + .nib { display: block; } - }; + } } .contact-grouping { @@ -1282,41 +1348,45 @@ div.contact-buttons { overflow: hidden; &:hover .x-component-nti-tool-action:not(.disabled) { - .icon.options::after{ @include sprite($options-menu-card_hover); } + .icon.options::after { @include sprite($options-menu-card_hover); } } - - .x-component-nti-tool-action{ + .x-component-nti-tool-action { margin: 0 0 0 20px; + .icon { - &.options::after{ + &.options::after { @include sprite($options-menu); } } + &:hover,&.over { - &:not(.disabled){ + &:not(.disabled) { .icon { - &.options::after{ @include sprite($options-menu_hover); } + &.options::after { @include sprite($options-menu_hover); } } } } } - .grouping-header{ + .grouping-header { margin: 10px 0; white-space: nowrap; - .tools{ + .tools { margin-top: 3px; float: right; - .nti-tool-action{ + + .nti-tool-action { display: inline-block; } } - .name{ + .name { overflow: hidden; + @include ellipse; + max-width: 600px; display: inline-block; vertical-align: bottom; @@ -1326,23 +1396,24 @@ div.contact-buttons { } } - span{ + span { white-space: nowrap; font: normal 300 26px/35px var(--body-font-family); color: var(--primary-grey); } - span.count{ + span.count { padding-left: 0.5em; color: var(--tertiary-grey); } } - .show-more{ + .show-more { cursor: pointer; position: relative; background: var(--quad-grey); - width: 140px; height: 140px; + width: 140px; + height: 140px; float: left; text-align: center; color: var(--primary-blue); @@ -1351,6 +1422,7 @@ div.contact-buttons { .dots { line-height: 0; margin-top: 50px; + div { display: inline-block; background: var(--primary-blue); @@ -1363,57 +1435,57 @@ div.contact-buttons { } } - .contact-card-container { float: left; width: 140px; height: 140px; border: none; - margin:0; + margin: 0; padding: 0; .contact-card { width: 140px; height: 140px; min-height: 0; - margin:0; + margin: 0; padding: 0; - .avatar{ + .avatar { position: static; - top: initial; left: initial; + top: initial; + left: initial; box-shadow: none; } &.Offline { .meta { - &::before{ background: var(--tertiary-grey); } + &::before { background: var(--tertiary-grey); } } } &.idle { - .meta::before{ background: #ebcd25; } + .meta::before { background: #ebcd25; } } - .nib{ + .nib { bottom: 8px; right: 5px; @include icon($share-options-gear_hover); - position: absolute; + position: absolute; width: 13px; height: 13px; top: auto; opacity: 0.4; - &:hover{ + &:hover { opacity: 0.8; - }; + } } .meta { - &::before{ + &::before { content: ' '; background: #2db651; border-radius: 90px; @@ -1427,16 +1499,18 @@ div.contact-buttons { } position: absolute; - bottom: 0; left: 0; right: 0; - background: rgba(38,38,38,0.94); + bottom: 0; + left: 0; + right: 0; + background: rgba(38, 38, 38, 0.94); margin: 0; height: 28px; - [data-field]:not(.name),.separator,.composite-line{ + [data-field]:not(.name),.separator,.composite-line { display: none; } - .name{ + .name { font: italic 300 16px/27px var(--body-font-family); max-width: 95px; color: #ababab; @@ -1460,13 +1534,13 @@ div.contact-buttons { padding-right: 0; width: 0; overflow: hidden; - &::after{ + + &::after { top: 5px; left: 2px; } } } - } &.not-contact { @@ -1479,7 +1553,6 @@ div.contact-buttons { } } - .contact-sub-view { .empty { background: #fff; @@ -1496,16 +1569,16 @@ div.contact-buttons { margin-top: 5px; } - .nav-outline{ + .nav-outline { margin-top: 20px; - &.contact{ + &.contact { padding: 0; } + &.list, &.group, &.contact { .outline-list { margin-bottom: 40px; - } .buttons { @@ -1514,7 +1587,8 @@ div.contact-buttons { overflow: hidden; top: auto; height: 40px; - left: 0; right: 0; + left: 0; + right: 0; bottom: 0; background: #fafafa; color: var(--tertiary-grey); @@ -1522,60 +1596,67 @@ div.contact-buttons { border: 0; border-top: 1px solid #f2f2f2; - .contact-button{ + .contact-button { cursor: pointer; line-height: 40px; display: inline-block; - margin: 0; padding: 0 0 0 30px; + margin: 0; + padding: 0 0 0 30px; width: 50%; & ~ .contact-button { box-shadow: -1px 0 0 0 #f2f2f2; } + &.join { @include icon($reply, $top: 13px, $left: 7px); + &::after { opacity: 0.6; } } + &.create, &.suggest { @include icon($editor-add, $top: 14px, $left: 10px); } - &.search{ + &.search { width: 100%; left: 0; border-left-width: 0; padding-left: 35px; + @include icon($rhp-search,$top:11px,$left:9px); - &::after{ opacity: 0.6; } + &::after { opacity: 0.6; } - &.half{ - width: 50%; - float: left; - } + &.half { + width: 50%; + float: left; + } input { @include experimental(transition, opacity 0.5s); + visibility: hidden; position: absolute; border: 0; background: #fafafa; - font: normal 400 14px/25px var(--body-font-family); color: var(--primary-grey); height: 40px; - top: 0; left: 30px; right: 26px; + top: 0; + left: 30px; + right: 26px; opacity: 0; } .clear { @include icon($clear_line); + position: absolute; top: 14px; right: 10px; left: auto; - margin: 0; width: 16px; height: 16px; @@ -1583,10 +1664,11 @@ div.contact-buttons { border-width: 0; } - &.active{ - background-color: #ffffff; - input{ - background: #ffffff; + &.active { + background-color: #fff; + + input { + background: #fff; visibility: visible; opacity: 1; } @@ -1597,13 +1679,16 @@ div.contact-buttons { &.searching { .contact-search { - display:block; + display: block; } } - .contact-search{ + .contact-search { position: absolute; - top: 50px; left: 0; right: 0; bottom: 40px; + top: 50px; + left: 0; + right: 0; + bottom: 40px; z-index: 10; display: none; @@ -1620,8 +1705,9 @@ div.contact-buttons { } @include contact-user-row; - .contact-row{ - &.contact{ + + .contact-row { + &.contact { padding: 10px 0 0 0; } } diff --git a/src/main/resources/scss/debris/_containers.scss b/src/main/resources/scss/debris/_containers.scss index a5f6bf5942..ca0d38ef6a 100644 --- a/src/main/resources/scss/debris/_containers.scss +++ b/src/main/resources/scss/debris/_containers.scss @@ -25,7 +25,6 @@ text-transform: uppercase; .tool { - &.link { color: var(--primary-blue); cursor: pointer; @@ -46,15 +45,13 @@ } } - .x-container.nti-header { position: relative; - width: 769px; height: 200px; + width: 769px; + height: 200px; background: var(--panel-background); - box-shadow: 0 1px 0 0 #e0e0e0, 0px 0px 5px 0px rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 0 0 #e0e0e0, 0 0 5px 0 rgba(0, 0, 0, 0.2); line-height: 0; z-index: 2; - clip: rect(0,auto,215px,0); - - -} \ No newline at end of file + clip: rect(0, auto, 215px, 0); +} diff --git a/src/main/resources/scss/debris/_content-editing-parentselection.scss b/src/main/resources/scss/debris/_content-editing-parentselection.scss index de58868d33..8b49757983 100644 --- a/src/main/resources/scss/debris/_content-editing-parentselection.scss +++ b/src/main/resources/scss/debris/_content-editing-parentselection.scss @@ -12,7 +12,7 @@ } } - & > .label { + & > .label { color: var(--tertiary-grey); font: normal 600 0.625em/1 var(--body-font-family); text-transform: uppercase; @@ -44,7 +44,7 @@ line-height: 40px; font-size: 0.875rem; padding: 0 1em 0 10px; - box-shadow: 0 0 3px 0px rgba(0, 0, 0, 0.3); + box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3); cursor: pointer; position: relative; @@ -61,7 +61,6 @@ border-width: 0 4px 5px 4px; border-color: transparent transparent #bfbfbf transparent; } - } } @@ -98,6 +97,7 @@ width: 200px; font: normal 400 0.875rem/40px var(--body-font-family); overflow: hidden; + @include ellipse(); } @@ -113,7 +113,6 @@ } } - .overview-editing-parentselection-menu, .overview-editing-parentselection-position-menu { position: fixed; @@ -123,7 +122,6 @@ overflow: auto; } - .overview-editing-parentselection-position-menu { list-style: none; margin: 0; @@ -153,7 +151,6 @@ } } - .overview-editing-parentselection-menu { .parentselection-menuitem { padding: 8px; @@ -168,14 +165,14 @@ font-size: 0.875em; color: var(--primary-blue); - &:before { + &::before { content: "+"; - padding-right: .5em; + padding-right: 0.5em; } } &:first-child { - border-top: .75px solid rgba(0, 0, 0, 0.08); + border-top: 0.75px solid rgba(0, 0, 0, 0.08); } .label { @@ -184,6 +181,7 @@ width: 200px; font: normal 400 0.875rem/40px var(--body-font-family); overflow: hidden; + @include ellipse(); } @@ -211,6 +209,7 @@ background-color: var(--primary-blue); color: white; } + .back, .save { display: inline-block; line-height: 35px; @@ -219,7 +218,7 @@ cursor: pointer; } - .error-msg{ + .error-msg { font-size: 0.875rem; line-height: 1.5rem; color: white; diff --git a/src/main/resources/scss/debris/_content-nav.scss b/src/main/resources/scss/debris/_content-nav.scss index 02846c7991..715defa520 100644 --- a/src/main/resources/scss/debris/_content-nav.scss +++ b/src/main/resources/scss/debris/_content-nav.scss @@ -3,23 +3,22 @@ } .x-panel-notes-and-discussion { - &,.x-panel-body-default{ + &,.x-panel-body-default { background: var(--panel-background); } + border-left: 1px solid #ededed; border-left-width: 1px !important; } .nti-notes-and-discussion-tabbar, -.content-toolbar:not(.student-reader-header) { +.content-toolbar:not(.student-reader-header) { border-bottom: 1px solid #ededed; border-bottom-width: 1px !important; } -.nti-notes-and-discussion-tabbar{ +.nti-notes-and-discussion-tabbar { .x-tab { - - text-transform: uppercase; color: var(--tertiary-grey); font: normal 600 12px/59px var(--body-font-family); @@ -27,7 +26,6 @@ .x-tab-icon-el { width: 21px; height: 20px; - top: 20px; left: 15px; @@ -37,6 +35,7 @@ &.discuss { top: 22px; + @include icon($discussions,$position:absolute); } } diff --git a/src/main/resources/scss/debris/_context.scss b/src/main/resources/scss/debris/_context.scss index df07365470..8c8b011377 100644 --- a/src/main/resources/scss/debris/_context.scss +++ b/src/main/resources/scss/debris/_context.scss @@ -35,16 +35,16 @@ .context-content { & > .snippet { overflow: hidden; - height: inherit; - font: italic 300 1.1em/1.6em var(--body-font-family); - color: #7593a4; - background-color: #f6fcff; - padding: 0.2em 15px; + height: inherit; + font: italic 300 1.1em/1.6em var(--body-font-family); + color: #7593a4; + background-color: #f6fcff; + padding: 0.2em 15px; - .par { - margin-top: 0; - margin-bottom: 0; - } + .par { + margin-top: 0; + margin-bottom: 0; + } } } -} \ No newline at end of file +} diff --git a/src/main/resources/scss/debris/_coppa-specific.scss b/src/main/resources/scss/debris/_coppa-specific.scss index ec486252d3..bc2566e79c 100644 --- a/src/main/resources/scss/debris/_coppa-specific.scss +++ b/src/main/resources/scss/debris/_coppa-specific.scss @@ -11,13 +11,14 @@ @include reset-window-border-radius(3px); - box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.3), - 0 0 0 110px transparent; - + box-shadow: + 0 0 50px 5px rgba(0, 0, 0, 0.3), + 0 0 0 110px transparent; background-color: var(--quad-grey); .account-header-view { margin: 24px 0; + .avatar { position: relative; box-shadow: 0 0 0 1px #e5e5e5; @@ -36,7 +37,7 @@ width: 100%; } - &:after { + &::after { content: ' '; position: absolute; z-index: 1999; @@ -45,9 +46,9 @@ @include sprite($green_check); } - } - .text{ + + .text { &.full-width { margin-left: 34px; margin-right: 34px; @@ -62,22 +63,23 @@ font-size: 20px; font-style: italic; } + .detail { font-size: 14px; } } } - .coppa-form{ + .coppa-form { margin: 0 10px 20px 100px; - .legend{ + .legend { font: normal 400 14px/22px var(--body-font-family); margin-bottom: 5px; } - .fields{ - .birthdate input{ + .fields { + .birthdate input { border-left-width: 0 !important; } @@ -85,31 +87,34 @@ white-space: nowrap; } - input, .selectbox{ + input, .selectbox { vertical-align: bottom; color: var(--secondary-grey); font: italic 500 14px/25px var(--body-font-family); border: 1px solid #dcdcdc; - background: #ffffff; + background: #fff; padding: 6px 10px; margin: 0; min-height: 39px; - &[size='3']{ + &[size='3'] { width: 75px; } - &[size='2']{ + + &[size='2'] { width: 60px; } - &[size='4']{ + + &[size='4'] { width: 137px; } - &[size='5']{ + + &[size='5'] { width: 285px; } } - .selectbox{ + .selectbox { cursor: pointer; display: inline-block; width: 150px; @@ -118,17 +123,18 @@ box-shadow: inset 5px 0 0 0 #a0a0a0; position: relative; - &::after{ + &::after { content: ''; position: absolute; - top: 15px; right: 15px; + top: 15px; + right: 15px; @include sprite($collapse); } } - & > div{ - span, .validation-message{ + & > div { + span, .validation-message { padding-left: 20px; display: inline-block; vertical-align: top; @@ -137,21 +143,24 @@ font-style: italic; color: var(--secondary-grey); - &.long{ + &.long { width: 260px; padding-top: 0; } } - &.invalid{ - span, .validation-message{ color: var(--primary-red); } - input[data-required=true], .selectbox{ + &.invalid { + span, .validation-message { color: var(--primary-red); } + + input[data-required=true], .selectbox { box-shadow: inset 5px 0 0 0 var(--primary-red) !important; } } - &.valid{ - span, .validation-message{ color: var(--primary-green); } - input[data-required=true], .selectbox{ + + &.valid { + span, .validation-message { color: var(--primary-green); } + + input[data-required=true], .selectbox { box-shadow: inset 5px 0 0 0 var(--primary-green) !important; } } @@ -167,26 +176,26 @@ padding: 0 20px; margin-left: 5px; white-space: nowrap; - color: #ffffff; + color: #fff; background: #37b2f9; border: 1px solid #31a0e0; font-size: 14px; font-style: italic; font-weight: bold; - &.submitted{ + &.submitted { background: none; border: none; color: var(--primary-green); } - &.disabled{ + &.disabled { background: var(--tertiary-grey); border: 1px solid var(--tertiary-grey); } } - .account-info{ + .account-info { margin-top: 15px; .submit { @@ -201,7 +210,7 @@ bottom: 0; height: auto; line-height: 3em; - color: #ffffff; + color: #fff; outline: 1px solid #69a92b; border: none; background: #75bc30; @@ -226,6 +235,7 @@ content: ''; top: 16px; left: 15px; + @include sprite($checkbox-14); } @@ -243,18 +253,20 @@ } } } - .fields{ - & > div{ - &.hidden{ display: none; } - input{ - &[data-required=true]{ + .fields { + & > div { + &.hidden { display: none; } + + input { + &[data-required=true] { display: inline-block; margin-bottom: 10px; border-left-width: 0; box-shadow: inset 5px 0 0 0 #a0a0a0; } - &[name=last]{ + + &[name=last] { margin-bottom: 10px; margin-left: 10px; } @@ -297,15 +309,15 @@ position: relative; } - .hidden {display: none;} + .hidden { display: none; } - textarea.input-box.error{ + textarea.input-box.error { box-shadow: -4px 0 0 0 var(--primary-red); } .input-box, .combo-box { margin: 5px 0; - &, input, .x-form-item { font-size: 14px;} + &, input, .x-form-item { font-size: 14px; } .x-form-cb-label-after { margin-left: 10px; @@ -319,32 +331,32 @@ border: 1px solid var(--border-grey);//#dcdcdc; padding-right: 30px; - background: #ffffff; + background: #fff; .clear { top: 10px; right: 15px; - cursor: pointer; position: absolute; display: none; + @include sprite($clear_line); } .placeholder { @include placeholder-style; + position: absolute; top: 0; left: 0; font-weight: 500; line-height: 25px; padding: 7px 14px; - } } - textarea.input-box, .input-box input, textarea.combo-box, .combo-box input{ - &::-ms-clear{ + textarea.input-box, .input-box input, textarea.combo-box, .combo-box input { + &::-ms-clear { display: none; } @@ -361,19 +373,20 @@ //vertical-align: bottom; color: var(--secondary-grey); font: normal 500 14px/25px var(--body-font-family); - border: 0; - - background: #ffffff; + background: #fff; padding: 6px 10px; margin: 0; min-height: 39px; + @include experimental-value(width, calc(100% - 8px)); + .x-opera &, .x-safari5 & { width: 291px; &[placeholder$="Name"] { width: 145px; } } + position: relative; left: 4px; box-shadow: -4px 0 0 0 var(--border-grey); @@ -409,7 +422,7 @@ height: 70px; padding: 20px 0 0 3px; - &::after{ + &::after { content: ':'; } } @@ -423,15 +436,16 @@ .submit { @include top-etch($dark: #e2e2e2, $light: #fafafa); + background-color: #f3f3f3; padding: 15px 10px; overflow: hidden; - .privacyLink, .policy-link{ + .privacyLink, .policy-link { text-decoration: none; color: var(--primary-blue); font-size: 12px; - top:5px !important; + top: 5px !important; cursor: pointer; padding-left: 10px; } @@ -449,27 +463,29 @@ margin-left: 34px; margin-right: 34px; } - textarea, + textarea, .input-box { input { outline: none; box-shadow: -4px 0 0 0 var(--border-grey); - &:focus{ + + &:focus { box-shadow: -4px 0 0 0 var(--border-grey); } } } - textarea.input-box{ + textarea.input-box { resize: none; width: 402px; height: 134px; outline: none; box-shadow: -4px 0 0 0 var(--border-grey); border: solid 1px var(--border-grey); - border-left: 0px; - &:focus{ + border-left: 0; + + &:focus { box-shadow: -4px 0 0 0 var(--border-grey); } } @@ -477,17 +493,16 @@ .contact-main-view, .forumcreation-main-view, - .embedvideo-main-view{ - .input-box{ + .embedvideo-main-view { + .input-box { width: 99%; } } - } -.forumcreation-main-view{ - .submit{ - .sharing-checkbox{ +.forumcreation-main-view { + .submit { + .sharing-checkbox { position: absolute; top: 8px !important; left: 5px !important; @@ -495,9 +510,9 @@ } } -.x-menu{ - &.month-picker-list{ - .x-menu-item{ +.x-menu { + &.month-picker-list { + .x-menu-item { border-bottom-width: 0 !important; } } @@ -505,8 +520,7 @@ .codecreation-window, .createlist-window, -.coderetrieval-window{ - +.coderetrieval-window { .close { opacity: 0.5; cursor: pointer; @@ -516,21 +530,22 @@ @include sprite($window-control-close); - &:hover{ + &:hover { opacity: 1; } } .codecreation-main-view, .coderetrieval-main-view, - .createlist-main-view{ + .createlist-main-view { .input-box.group-name { - .x-mask{ + .x-mask { background-color: white; opacity: 0; } - &.x-masked{ - .clear{ + + &.x-masked { + .clear { display: none !important; } } @@ -538,25 +553,26 @@ input { box-shadow: -4px 0 0 0 var(--primary-green); } - input.empty{ + + input.empty { box-shadow: -4px 0 0 0 var(--border-grey); } } - .group-code{ + .group-code { background-color: var(--quad-grey); - input{ + input { cursor: text; } - input, input:focus{ + input, input:focus { background-color: var(--quad-grey); box-shadow: -4px 0 0 0 var(--primary-green); } } - .label{ + .label { text-transform: uppercase; font-weight: 700; font-size: 10px; @@ -566,7 +582,7 @@ } .error-box { - margin-top: 0px; + margin-top: 0; font-weight: 600; font-size: 14px; @@ -576,6 +592,5 @@ padding: 20px 10px 20px 10px; } } - } } diff --git a/src/main/resources/scss/debris/_course-assessment.scss b/src/main/resources/scss/debris/_course-assessment.scss index f091d23d33..43cc779784 100644 --- a/src/main/resources/scss/debris/_course-assessment.scss +++ b/src/main/resources/scss/debris/_course-assessment.scss @@ -1,5 +1,4 @@ - canvas.x-component-course-assessment { & + .label { top: 14px; @@ -29,7 +28,6 @@ canvas.x-component-course-assessment { } } - .timed-placeholder { font-size: 1rem; padding: 0 60px 0 35px; @@ -50,7 +48,9 @@ canvas.x-component-course-assessment { position: absolute !important; width: 62%; top: 250px; + @include experimental(transform, translateY(-50%)); + left: 50%; margin-left: -31%; box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3); @@ -87,11 +87,11 @@ canvas.x-component-course-assessment { background: var(--panel-background); border: 1px solid #e2e2e2; border-radius: 3px; - box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.08); + box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.08); margin-bottom: 30px; .prompt { - background: #ffffff; + background: #fff; color: var(--primary-grey); overflow: hidden; position: relative; @@ -116,14 +116,14 @@ canvas.x-component-course-assessment { .answer-container { margin: 0; border-radius: 0 0 3px 3px; - border: 0px solid #e2e2e2; + border: 0 solid #e2e2e2; border-top-width: 1px !important; padding: 20px; .answers { position: relative; min-height: 38px; - background: #ffffff; + background: #fff; border: 1px solid var(--tertiary-grey); .answer { @@ -131,8 +131,8 @@ canvas.x-component-course-assessment { color: var(--primary-grey); vertical-align: middle; min-height: 38px; - background: #ffffff; - border: 0px solid var(--tertiary-grey); + background: #fff; + border: 0 solid var(--tertiary-grey); border-bottom-width: 1px; padding-left: 54px; @@ -146,7 +146,9 @@ canvas.x-component-course-assessment { content: ''; position: absolute; top: 50%; + @include experimental(transform, translateY(-50%)); + left: 54px; height: 1.5em; width: 80%; @@ -167,6 +169,7 @@ canvas.x-component-course-assessment { .course-assessment-view.navigation-panel { padding-top: 20px; + .body-view { background: white; padding-top: 0; @@ -211,7 +214,7 @@ canvas.x-component-course-assessment { } &.disabled { - opacity: .3; + opacity: 0.3; } .nti-checkbox-input { @@ -226,7 +229,6 @@ canvas.x-component-course-assessment { } } - .contents > .error { font-size: 0.875em; line-height: 40px; @@ -257,7 +259,6 @@ canvas.x-component-course-assessment { z-index: 1; } - .inline-publish-editor { margin-bottom: 1.5rem; @@ -278,7 +279,6 @@ canvas.x-component-course-assessment { } } - .inline-reset-menu { .publish-reset-label { display: block; @@ -287,6 +287,7 @@ canvas.x-component-course-assessment { font-family: var(--body-font-family); margin: 0 1.25rem 0.25rem 0; } + .publish-reset-text { display: block; font-size: 0.75rem; @@ -294,6 +295,7 @@ canvas.x-component-course-assessment { color: var(--secondary-grey); margin: 0 1.25rem 1.25rem 0; } + .publish-reset { display: block; height: 2rem; @@ -362,8 +364,7 @@ canvas.x-component-course-assessment { display: inline; } - .status-item{ - + .status-item { &:last-of-type::after { display: none; } @@ -391,14 +392,14 @@ canvas.x-component-course-assessment { } } - .excused{ - padding-left: 6px; - color: var(--primary-red); - } + .excused { + padding-left: 6px; + color: var(--primary-red); + } - .due{ + .due { &.today { - color: var(--primary-orange); + color: var(--primary-orange); } &.late { @@ -411,17 +412,18 @@ canvas.x-component-course-assessment { } } - .x-component-course-assessment { - &.nav-outline{ + &.nav-outline { position: relative; background: #f5f4f4; &::after { content: ''; position: absolute; - top: 0; bottom: 0; - right: 0; width: 10px; + top: 0; + bottom: 0; + right: 0; + width: 10px; background: none; overflow: hidden; box-shadow: inset -2px 0 3px -2px rgba(0, 0, 0, 0.3); @@ -440,6 +442,7 @@ canvas.x-component-course-assessment { .outline-row { background: none; + .count { font-size: 0.7em; line-height: 1; @@ -452,11 +455,10 @@ canvas.x-component-course-assessment { background: var(--primary-blue); &.hidden { - display: none + display: none; } } - &.over { background: #f0f0f0; } @@ -472,11 +474,12 @@ canvas.x-component-course-assessment { } } - &.course-assessment-activity { - overflow: {x: hidden; y: auto;} + overflow: { x: hidden; y: auto; } + color: var(--primary-grey); padding: 10px 30px; + .header { font: normal 300 1.5em/2 var(--body-font-family); } @@ -499,14 +502,17 @@ canvas.x-component-course-assessment { &.unread { font-weight: 600; + &::before { content: ''; background: var(--primary-blue); position: absolute; overflow: hidden; border-radius: 10em; - width: 0.3em; height: 0.3em; - top: 1.3em; left: -1em; + width: 0.3em; + height: 0.3em; + top: 1.3em; + left: -1em; } } @@ -522,8 +528,10 @@ canvas.x-component-course-assessment { } } } + .more { - &.hidden {visibility: hidden;} + &.hidden { visibility: hidden; } + display: block; font: normal 600 0.7em/2 var(--body-font-family); text-align: center; @@ -543,10 +551,10 @@ canvas.x-component-course-assessment { .x-container.grouping { & > .header { .title { - width: 85%; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + width: 85%; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } } } @@ -570,6 +578,7 @@ canvas.x-component-course-assessment { @include sprite($assignment_late_small); } } + &.nosubmit { &::after { @include sprite($assignment_due_small); @@ -613,7 +622,7 @@ canvas.x-component-course-assessment { &:not(.editor-open):hover, &.selected { background: #fafafa; - .report{ + .report { display: block; } } @@ -635,7 +644,6 @@ canvas.x-component-course-assessment { left: 18px; top: 15px; } - } &.editor-open { @@ -707,6 +715,7 @@ canvas.x-component-course-assessment { display: none; top: 22px;//60/2 - 16/2 right: 31px; + @include icon($reports-gray_hover, $position:absolute); &:hover { @@ -740,7 +749,6 @@ canvas.x-component-course-assessment { margin-top: 50px; } - .assignment-status-container { position: relative; @@ -754,7 +762,7 @@ canvas.x-component-course-assessment { border-radius: 20px; &:hover { - background-color: #EAEAEA; + background-color: #eaeaea; color: var(--secondary-grey); &::after { @@ -764,7 +772,9 @@ canvas.x-component-course-assessment { &::after { content: ''; + @include arrow($pointFrom: top, $color: var(--tertiary-grey)); + margin-top: 2px; } @@ -778,7 +788,7 @@ canvas.x-component-course-assessment { } &:not(.nosubmit)::after { - border-top-color: var(--primary-red); + border-top-color: var(--primary-red); } } } @@ -815,7 +825,6 @@ canvas.x-component-course-assessment { } } - .pager-settings { .x-menu-item.x-menu-item-separator.labeled-separator { background: none !important; @@ -867,7 +876,7 @@ canvas.x-component-course-assessment { .admin-list-header { background: var(--quad-grey); position: relative; - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid #ddd; .header-container { @include containFloats(); @@ -891,14 +900,14 @@ canvas.x-component-course-assessment { &::after { content: ''; - box-shadow: 0 -5px 15px 5px rgba(0,0,0,0.2); + box-shadow: 0 -5px 15px 5px rgba(0, 0, 0, 0.2); position: absolute; right: 0; bottom: 0; left: 0; height: 100px; clip: rect(100px, auto, 150px, auto); - background: #dddddd; + background: #ddd; border-radius: 40em / 10px; } @@ -911,6 +920,7 @@ canvas.x-component-course-assessment { font: normal 300 1.3em/1.5 var(--body-font-family); color: var(--primary-grey); overflow: hidden; + @include ellipsis(); } @@ -933,6 +943,7 @@ canvas.x-component-course-assessment { margin: 0.5em; color: var(--tertiary-grey); } + &:first-of-type::before { content: none; } @@ -1071,6 +1082,7 @@ canvas.x-component-course-assessment { &:hover { color: var(--primary-grey); + @include icon($mv-dropdown-arrow, $position: relative, $side: after, $top: 16px, $left: auto, $right: 15px); } } @@ -1107,14 +1119,14 @@ canvas.x-component-course-assessment { &::before { content: ''; - box-shadow: 0 -5px 15px 5px rgba(0,0,0,0.2); + box-shadow: 0 -5px 15px 5px rgba(0, 0, 0, 0.2); position: absolute; right: 0; top: -100px; left: 0; height: 100px; clip: rect(100px, auto, 150px, auto); - background: #dddddd; + background: #ddd; border-radius: 40em / 10px; } } @@ -1132,14 +1144,14 @@ canvas.x-component-course-assessment { &::before { content: ''; - box-shadow: 0 5px 15px 5px rgba(0,0,0,0.2); + box-shadow: 0 5px 15px 5px rgba(0, 0, 0, 0.2); position: absolute; right: 0; bottom: -100px; left: 0; height: 100px; - clip: rect(-10px, auto, 0px, auto); - background: #dddddd; + clip: rect(-10px, auto, 0, auto); + background: #ddd; border-radius: 40em / 10px; } } @@ -1183,20 +1195,20 @@ canvas.x-component-course-assessment { } .course-assessment-admin.performance { - &.show-final-grade { .gradebox { display: block; } - .column-names .right{ - display: inline-block + .column-names .right { + display: inline-block; } } .button { &[href=""], &.hidden { display: none; + & ~ .column-names { margin-top: 7em; } @@ -1213,7 +1225,6 @@ canvas.x-component-course-assessment { right: 15px; top: 25px; margin: 1em 2em; - } & > .tools { @@ -1226,13 +1237,12 @@ canvas.x-component-course-assessment { //margin: 0 0 2em 0; } - - .x-grid-data-row .x-grid-cell, .list > .item { box-shadow: inset 0 -1px 0 0 #f7f7f7; position: relative; overflow: hidden; + .x-grid-cell-inner { line-height: normal; } @@ -1253,6 +1263,7 @@ canvas.x-component-course-assessment { .action-items { font: normal 600 0.7em/2 var(--body-font-family); text-transform: uppercase; + &:empty { color: var(--tertiary-grey); &::after { content: 'No Action Items'; } @@ -1276,7 +1287,6 @@ canvas.x-component-course-assessment { .toggle-avatar { position: absolute; - top: 1em; right: 1em; padding: 0.8em 0; @@ -1309,11 +1319,13 @@ canvas.x-component-course-assessment { color: var(--secondary-grey) !important; padding-right: 0.5em; overflow: hidden; + @include ellipsis; .accent-name { font-weight: normal; overflow: hidden; + @include ellipsis; } } @@ -1326,6 +1338,7 @@ canvas.x-component-course-assessment { width: 10.7em; font: normal 500 1em/1 var(--body-font-family); border: 1px solid #dcdcdc; + & > * { font: normal 500 1em/1 var(--body-font-family); padding: 0.7em 1em; @@ -1340,12 +1353,13 @@ canvas.x-component-course-assessment { border-width: 0 1px 0 0; border-right: { style: solid; color: #dcdcdc; } } + .dropdown { width: 44%; display: inline-block; line-height: 1.35em; - &:focus{ + &:focus { background-color: var(--primary-blue); color: white; } @@ -1356,6 +1370,7 @@ canvas.x-component-course-assessment { position: absolute; top: 2em; right: 1.5em; + @include arrow($pointFrom:top, $width: 8px, $height: 5px, $color: var(--secondary-grey)); } } @@ -1387,7 +1402,6 @@ canvas.x-component-course-assessment { } } - .create-assignment { flex: 0 0 125px; background-color: var(--primary-blue); @@ -1412,6 +1426,7 @@ canvas.x-component-course-assessment { width: 33.3333333333%; padding: 0 2em; box-shadow: inset -1px 0 0 0 #f1f1f1; + &:last-of-type { box-shadow: none; } @@ -1419,23 +1434,26 @@ canvas.x-component-course-assessment { .dropmenu { cursor: pointer; + @include icon($arrow-course-dropdown-light, $top:1.5em, $left:auto, $right:1em); &:hover { color: var(--primary-grey); + &::after { @include sprite($arrow-course-dropdown); } } - &.disabled{ + &.disabled { cursor: default; opacity: 0.5; pointer-events: none; &:hover { color: inherit; - &::after{ + + &::after { @include sprite($arrow-course-dropdown-light); } } @@ -1444,7 +1462,9 @@ canvas.x-component-course-assessment { .search { padding-left: 3em; + @include icon($rhp-search, $top:1.1em, $left:1.5em); + &:hover { color: var(--primary-grey); } @@ -1458,32 +1478,36 @@ canvas.x-component-course-assessment { .clear { cursor: pointer; - top: 1.2em; right: 1em; + top: 1.2em; + right: 1em; position: absolute; + @include sprite($clear_line); } } - } .x-panel-nt.group-by-menu { padding: 0; height: 150px; - .x-menu-body{ + .x-menu-body { padding: 0; - .x-menu-item.group-by-option{ + + .x-menu-item.group-by-option { font: normal 500 0.9em/3.5em var(--body-font-family); line-height: 40px; color: var(--secondary-grey); padding: 4px 5px 5px 2em; background: var(--panel-background); - &.x-menu-item-checked{ + &.x-menu-item-checked { color: white !important; background: var(--primary-blue) !important; - box-shadow: inset 0px 0 1px 1px var(--border-blue), + box-shadow: + inset 0 0 1px 1px var(--border-blue), inset 3px 0 0 0 var(--border-blue); + @include icon($arrow-course-dropdown-white, $top:1.5em, $left:auto, $right:1em); &.x-menu-item-active { @@ -1491,7 +1515,7 @@ canvas.x-component-course-assessment { } } - &.x-menu-item-active{ + &.x-menu-item-active { color: var(--primary-grey); background: #f0f0f0 !important; } @@ -1503,20 +1527,20 @@ canvas.x-component-course-assessment { padding: 0; box-shadow: none !important; - .x-menu-body{ + .x-menu-body { padding: 0; - .x-menu-item.letter-grade-option{ + .x-menu-item.letter-grade-option { font: normal 500 0.8em/1 var(--body-font-family); line-height: 25px; padding: 4px 5px 5px 13px; - background: rgba(255,255,255,1); + background: rgba(255, 255, 255, 1); - &.x-menu-item-checked{ + &.x-menu-item-checked { background: #f0f0f0; color: var(--primary-grey); - &::after{ + &::after { content: ''; overflow: hidden; position: absolute; @@ -1524,11 +1548,12 @@ canvas.x-component-course-assessment { right: 1.7em; left: auto; background: none; + @include arrow($pointFrom:top, $width: 8px, $height: 5px, $color: var(--secondary-grey)); } } - &.x-menu-item-active{ + &.x-menu-item-active { color: #fff !important; background: var(--primary-blue); } @@ -1547,12 +1572,12 @@ canvas.x-component-course-assessment { } .course-assessment-assignments { - .show-older-container{ + .show-older-container { height: 1em; line-height: 1em; margin-top: 40px; - .show-older{ + .show-older { display: inline-block; margin-left: 30px; cursor: pointer; @@ -1562,9 +1587,13 @@ canvas.x-component-course-assessment { } .scrollzone { - overflow: {x: hidden; y: auto;} + overflow: { x: hidden; y: auto; } + position: absolute;//avoid ext's anchor layout - top: 0; left: 0; right: 0; bottom: 0; + top: 0; + left: 0; + right: 0; + bottom: 0; margin-top: 50px;//toolbar } @@ -1628,13 +1657,13 @@ canvas.x-component-course-assessment { &.warning-red, &.over-time { - .time{ + .time { background-color: var(--primary-red); color: white; } } - &.warning-orange .time{ + &.warning-orange .time { background-color: var(--primary-orange); color: white; } @@ -1643,8 +1672,10 @@ canvas.x-component-course-assessment { &.recent { .time { font-size: 1.3em; - .meta{ + + .meta { padding-left: 0; + &::after { will-change: top, opacity; opacity: 0; @@ -1677,10 +1708,10 @@ canvas.x-component-course-assessment { margin-top: -1.2em; font-size: 0.4em; text-transform: uppercase; - color: rgb(249,171,171); + color: rgb(249, 171, 171); } - .time-left{ + .time-left { font-size: 0.9em; } } @@ -1723,6 +1754,7 @@ canvas.x-component-course-assessment { &::after { opacity: 1; $transition: top 0.5s 0.3s, opacity 0.1s 0.2s; + @include experimental(transition, $transition); } } @@ -1732,12 +1764,14 @@ canvas.x-component-course-assessment { top: 0; opacity: 1; $transition: top 0.5s 0.3s; + @include experimental(transition, $transition); } .label { display: none; $transition: height 0.5s, font-size 0.5s, opacity 0.5s; + @include experimental(transition, $transition); } } @@ -1752,9 +1786,9 @@ canvas.x-component-course-assessment { .submit { padding: 0; - height: 0px; + height: 0; font-size: 0.9em; - border-bottom: 0px solid #efefef; + border-bottom: 0 solid #efefef; overflow: hidden; @include experimental(transition, height 1s); @@ -1810,7 +1844,6 @@ canvas.x-component-course-assessment { font-size: 16px;//force a base em size &.assignment-item { - .toolbar { font: normal normal 12px var(--body-font-family); color: var(--primary-grey); @@ -1840,6 +1873,7 @@ canvas.x-component-course-assessment { .path.current { position: relative; top: 0; + @include experimental(transition, top 0.25s); } @@ -1849,7 +1883,7 @@ canvas.x-component-course-assessment { &::before { position: relative; - top: 8px + top: 8px; } } @@ -1886,8 +1920,6 @@ canvas.x-component-course-assessment { color: var(--primary-red); } } - - } .path.part { @@ -1899,7 +1931,6 @@ canvas.x-component-course-assessment { color: var(--primary-grey); } - &:last-of-type { cursor: default; @@ -1940,6 +1971,7 @@ canvas.x-component-course-assessment { &.disabled { cursor: default; } + &:not(.disabled):hover { opacity: 1; } @@ -1962,7 +1994,7 @@ canvas.x-component-course-assessment { } } - &.student-reader-header{ + &.student-reader-header { text-transform: uppercase; .header { @@ -1987,6 +2019,7 @@ canvas.x-component-course-assessment { .up, .down { height: 60px; + &::after { top: 24px; } @@ -1994,7 +2027,6 @@ canvas.x-component-course-assessment { } .header { - .status { right: 9.7em; } @@ -2034,7 +2066,8 @@ canvas.x-component-course-assessment { background: var(--quad-grey); position: relative; padding: 15px 30px; - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid #ddd; + &::after { content: ''; box-shadow: 0 -5px 15px 5px rgba(0, 0, 0, 0.2); @@ -2044,7 +2077,7 @@ canvas.x-component-course-assessment { left: 0; height: 100px; clip: rect(100px, auto, 150px, auto); - background: #dddddd; + background: #ddd; border-radius: 40em / 10px; } @@ -2070,7 +2103,6 @@ canvas.x-component-course-assessment { .assignment-navigation-bar-attempt-switcher-trigger { margin-left: -0.5rem; } - } } @@ -2085,10 +2117,12 @@ canvas.x-component-course-assessment { position: absolute; top: 50%; right: 15em; + @include experimental('transform', translateY(-50%)); + padding-right: 0.5em; - .status-item{ + .status-item { font: normal 600 0.6em/1 var(--body-font-family); text-transform: uppercase; text-align: right; @@ -2109,16 +2143,16 @@ canvas.x-component-course-assessment { color: var(--secondary-green); } - .excused{ - &.on{ - display: block; - color: var(--primary-red); - } + .excused { + &.on { + display: block; + color: var(--primary-red); + } - &.off{ - display: none; - } - } + &.off { + display: none; + } + } } } @@ -2126,7 +2160,9 @@ canvas.x-component-course-assessment { right: 40px; top: 50%; height: 10px; + @include experimental('transform', translateY(-50%)); + cursor: pointer; @include icon($more-options, $position: absolute); @@ -2153,7 +2189,7 @@ canvas.x-component-course-assessment { line-height: 3; color: var(--primary-red); - &.good{ + &.good { color: var(--primary-green); } } @@ -2170,6 +2206,7 @@ canvas.x-component-course-assessment { width: 10.5em; font: normal 500 1em/1 var(--body-font-family); background: #fff; + & > * { font: normal 500 1em/1 var(--body-font-family); padding: 0.7em 1em; @@ -2183,19 +2220,23 @@ canvas.x-component-course-assessment { width: 56%; border: 1px solid #dcdcdc !important; } + input:focus { - border-color: #B8B8B9 !important; + border-color: #b8b8b9 !important; } + .dropdown { width: 44%; display: inline-block; padding-top: 0.8em; + &::after { content: ''; overflow: hidden; position: absolute; top: 1.8em; right: 1.5em; + @include arrow($pointFrom:top, $width: 8px, $height: 5px, $color: var(--secondary-grey)); } } @@ -2207,6 +2248,7 @@ canvas.x-component-course-assessment { .label { padding-right: 5px; + @include icon($info, $left: auto, $right: -12px, $top: 7px); } @@ -2225,11 +2267,13 @@ canvas.x-component-course-assessment { display: inline-block; position: relative; max-width: 100%; + @include presence-style-sudo($x:-1em, $y:0.3em, $xSide:'right'); div { max-width: 100%; overflow: hidden; + @include ellipse(); } } @@ -2251,12 +2295,12 @@ canvas.x-component-course-assessment { span { &.link { color: var(--primary-blue); cursor: pointer; } - &::before { content: '\00B7'; margin: 0.5em; color: var(--tertiary-grey); } + &:first-of-type::before { content: none; } @@ -2267,6 +2311,7 @@ canvas.x-component-course-assessment { &.hidden { display: none; } + display: inline-block; cursor: pointer; width: 42px; @@ -2277,30 +2322,32 @@ canvas.x-component-course-assessment { &.email { @include icon($mail, $left: 10px, $top: 10px); + &:target, &:hover { &::after { @include sprite-position($mail_hover); } } - &:active{ + + &:active { &::after { @include sprite-position($mail_active); } } } - - &.download { @include icon($download, $left: 11px, $top: 8px); + &:target, &:hover { &::after { @include sprite-position($download_hover); } } - &:active{ + + &:active { &::after { @include sprite-position($download_active); } @@ -2321,7 +2368,8 @@ canvas.x-component-course-assessment { .nti-header { - .grade {float: left; box-shadow: 1px 0 0 0 #eaeaea, 2px 0 0 0 #fff; } + .grade { float: left; box-shadow: 1px 0 0 0 #eaeaea, 2px 0 0 0 #fff; } + .performance { width: 545px; } @@ -2340,6 +2388,7 @@ canvas.x-component-course-assessment { width: 16px; height: 18px; display: inline-block; + @include icon($info, $top: -7px, $position: absolute); } } @@ -2348,20 +2397,19 @@ canvas.x-component-course-assessment { position: absolute; top: 3.125em; left: 30px; - font: italic normal 1em/1 var(--body-font-family); color: var(--secondary-grey); } .assignments-completed { left: 385px; + & + .label { left: 385px; } } } - // Grid Styles .x-container-course-assessment.grade > .body { margin-top: 0; } @@ -2377,45 +2425,45 @@ canvas.x-component-course-assessment { } } - .x-grid-body { .x-grid-row .x-grid-cell { .late, .ontime, .incomplete { font-weight: 600; } + .late { color: var(--primary-red); } + .ontime { color: var(--primary-green); } + .incomplete { color: var(--tertiary-grey); } - &.feedback{ - padding-left: 10px; - - .x-grid-cell-inner { - line-height: 30px; + &.feedback { + padding-left: 10px; - .grade-excused{ - &.off{ - display: none; - } + .x-grid-cell-inner { + line-height: 30px; - &.on{ - display: block; - color: var(--primary-red); - } - } - } + .grade-excused { + &.off { + display: none; + } - } + &.on { + display: block; + color: var(--primary-red); + } + } + } + } } } - .admin-paged-grid { &.disabled { .x-grid-header-ct { @@ -2425,14 +2473,15 @@ canvas.x-component-course-assessment { content: ''; display: block; position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; } } } } - .full-assignment-editor { padding-top: 20px; } diff --git a/src/main/resources/scss/debris/_course-dashboard.scss b/src/main/resources/scss/debris/_course-dashboard.scss index c24f9acbb5..da5f6fd40d 100644 --- a/src/main/resources/scss/debris/_course-dashboard.scss +++ b/src/main/resources/scss/debris/_course-dashboard.scss @@ -1,5 +1,5 @@ @mixin tile-shadow { - box-shadow: 0 0 3px rgba(0,0,0,0.5); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); } .course-dashboard { @@ -26,7 +26,7 @@ .course-dashboard, .community-activity { .empty-state { height: 300px; - background: #ffffff; + background: #fff; padding: 50px; margin-top: 0; @@ -64,7 +64,7 @@ .tile { background-color: white; border-radius: 3px; - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25); margin-bottom: 11px; overflow: hidden; } @@ -88,21 +88,21 @@ .dashboard-item { min-height: 200px; background-color: transparent; - box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5), inset 0px -43px 0px 0px rgba(24, 82, 116, 0.5); + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5), inset 0 -43px 0 0 rgba(24, 82, 116, 0.5); padding: 10px 15px; position: relative; cursor: pointer; &.assignment-tile { - background-image: linear-gradient( 125deg, rgba(60,206,220,0.6) 0%, rgb(73,208,172) 100%); - box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.25), inset 0px -43px 0px 0px rgba(30, 60, 64, 0.5); + background-image: linear-gradient(125deg, rgba(60, 206, 220, 0.6) 0%, rgb(73, 208, 172) 100%); + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25), inset 0 -43px 0 0 rgba(30, 60, 64, 0.5); .path, .bullets { color: #9bf2de; } .footer { color: #70bcb1; } &.late { - background-image: linear-gradient( 125deg, rgba(221,62,81,0.6) 0%, rgb(250,103,92) 100%); - box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5), inset 0px -43px 0px 0px rgba(103, 27, 34, 0.5); + background-image: linear-gradient(125deg, rgba(221, 62, 81, 0.6) 0%, rgb(250, 103, 92) 100%); + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5), inset 0 -43px 0 0 rgba(103, 27, 34, 0.5); .path, .bullets { color: #ffbea7; } .footer { color: #cb8b7e; } @@ -110,8 +110,8 @@ } &.lesson-tile { - background-image: linear-gradient( 125deg, rgba(76,143,219,0.6) 0%, rgb(83,186,246) 100%); - box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5), inset 0px -43px 0px 0px rgba(24, 82, 116, 0.5); + background-image: linear-gradient(125deg, rgba(76, 143, 219, 0.6) 0%, rgb(83, 186, 246) 100%); + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5), inset 0 -43px 0 0 rgba(24, 82, 116, 0.5); .path, .bullets { color: #bbe5fd; } .footer { color: #7accf7; } @@ -129,7 +129,6 @@ max-height: 4.2em; color: var(--quad-grey); margin-bottom: 0.2em; - overflow: hidden; text-overflow: ellipsis; @@ -147,7 +146,8 @@ .footer { position: absolute; bottom: 0; - left: 0; right: 0; + left: 0; + right: 0; text-align: center; line-height: 43px; color: white; @@ -156,11 +156,12 @@ .dashboard-post { min-height: 200px; - background-color: rgba(255,255,255,0.8); + background-color: rgba(255, 255, 255, 0.8); cursor: pointer; &.topic { min-height: 185px; + .location { min-height: 1.3em; } @@ -177,6 +178,7 @@ .path { overflow: hidden; + @include ellipsis; &.has-current::after { @@ -187,6 +189,7 @@ .current { overflow: hidden; color: var(--primary-blue); + @include ellipsis; } } @@ -207,17 +210,21 @@ & > .title { top: 50%; left: 50%; + @include experimental(transform, translateX(-50%)); + margin-top: -24px; line-height: 38px; max-width: 80%; font-size: 0.8em; color: white; - background-color: rgba(0,0,0,0.68); - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15),0 0 3px 0 #000; + background-color: rgba(0, 0, 0, 0.68); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 3px 0 #000; border-radius: 5em; overflow: hidden; + @include ellipsis; + padding: 0 10px 0 50px; @include icon($play-small, $position: absolute, $top: 3px, $left: 3px); @@ -250,16 +257,16 @@ background-color: #f6fcff; overflow: hidden; height: 150px; - padding: 10px 10px 15px 10px; + padding: 10px 10px 15px 10px; .thumbnail { width: 100px; - height: 125px; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - box-shadow: 0px 0px 3px 0 rgba(0,0,0,0.35); - float: left; + height: 125px; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.35); + float: left; } .meta { @@ -294,9 +301,10 @@ position: absolute; top: 1px; right: 0; + @include like-and-favorite; - .favorite-spacer { display: none;} + .favorite-spacer { display: none; } .like { margin: 4px; } } @@ -323,8 +331,8 @@ font-size: 1.1em; font-weight: 300; margin-bottom: -7px; - overflow: hidden; + @include ellipsis; } @@ -333,6 +341,7 @@ max-width: 90px; overflow: hidden; vertical-align: middle; + @include ellipsis; } @@ -350,6 +359,7 @@ .title { font-weight: 600; overflow: hidden; + @include ellipsis; } @@ -391,6 +401,7 @@ margin-right: 5px; max-width: 120px; overflow: hidden; + @include ellipsis; } diff --git a/src/main/resources/scss/debris/_course-email.scss b/src/main/resources/scss/debris/_course-email.scss index 5153d162ad..b596da3e56 100644 --- a/src/main/resources/scss/debris/_course-email.scss +++ b/src/main/resources/scss/debris/_course-email.scss @@ -68,7 +68,7 @@ .action { position: absolute; - top: 0px; + top: 0; right: 10px; left: auto; bottom: auto; @@ -81,15 +81,14 @@ background-color: white; font-weight: 400; font-size: 0.775em; - - padding: 0px 25px 0px 10px; + padding: 0 25px 0 10px; position: relative; text-align: right; .toggle { color: var(--secondary-grey); - input[type=checkbox]+label { + input[type=checkbox] + label { min-height: 38px; line-height: 38px; padding-right: 7px; @@ -108,7 +107,7 @@ &.picker { .arrow { - padding-right: 0px; + padding-right: 0; &::after { position: relative; @@ -119,7 +118,7 @@ } } - .reply-scope{ + .reply-scope { &.disabled { opacity: 0.5; cursor: default; @@ -129,21 +128,22 @@ .cc-instructors { float: right; - padding-right: 15px; + padding-right: 15px; } } &.receiver { .field { top: 10px; - color: var(--primary-blue); - text-transform: capitalize; - width: 350px; - position: relative; - @include ellipsis; - - &.group { - &.arrow { + color: var(--primary-blue); + text-transform: capitalize; + width: 350px; + position: relative; + + @include ellipsis; + + &.group { + &.arrow { &::after { display: inline-block; position: relative; @@ -154,7 +154,7 @@ top: 8px; } } - } + } } } } @@ -162,14 +162,15 @@ .title { input { - font: normal 300 18px/30px var(--body-font-family); - padding-left: 0; + font: normal 300 18px/30px var(--body-font-family); + padding-left: 0; } } } .footer { overflow: hidden; + .save { width: 140px; } @@ -179,12 +180,12 @@ .toggle { color: var(--secondary-grey); - padding-right: 10px; - font-weight: 400; - font-size: 0.875em; - line-height: 40px; + padding-right: 10px; + font-weight: 400; + font-size: 0.875em; + line-height: 40px; - input[type=checkbox] + label { + input[type=checkbox] + label { padding: 1px 15px 1px 20px; &::after { @@ -196,7 +197,7 @@ left: 0; } } - } + } } } } diff --git a/src/main/resources/scss/debris/_course-info.scss b/src/main/resources/scss/debris/_course-info.scss index 3d14d61237..862095337d 100644 --- a/src/main/resources/scss/debris/_course-info.scss +++ b/src/main/resources/scss/debris/_course-info.scss @@ -2,10 +2,9 @@ &.info-only { top: 0 !important; } - } -.x-ios #course-info.info-only{ +.x-ios #course-info.info-only { overflow: visible; } @@ -41,6 +40,7 @@ .registered { padding-left: 50px; + @include icon($circle-check-white-large); .edit { @@ -54,6 +54,7 @@ a.enroll { @include icon($enroll, $position: absolute, $top: 10px, $left: 10px); + display: block; z-index: 10; background: var(--primary-green); @@ -67,6 +68,7 @@ weight: 500; size: 0.65em; } + white-space: nowrap; text-decoration: none !important; } @@ -95,12 +97,12 @@ background: none; .static-invitation-code { - background: #fff; - border-top: 1px solid #F1F1F1; - margin-top: -.5em; + background: #fff; + border-top: 1px solid #f1f1f1; + margin-top: -0.5em; .invitation-wrapper { - padding: 8px 5px 8px 19px; + padding: 8px 5px 8px 19px; .invite-header { color: var(--secondary-grey); @@ -119,6 +121,7 @@ color: var(--tertiary-grey); text-transform: uppercase; font: { size: 0.7em; weight: 600; } + padding-right: 1em; &.code { @@ -155,7 +158,7 @@ background: #000; } - .curtain{ + .curtain { display: none; top: 0; bottom: 0; @@ -176,23 +179,23 @@ display: none; } } - } &.no-video.has-image { padding-top: 56%; .curtain { - bottom:40px; + bottom: 40px; background-size: cover; } } - &.playing{ - .curtain{ + &.playing { + .curtain { display: none; } - .title{ + + .title { display: none; } } @@ -235,7 +238,8 @@ .value { span { white-space: nowrap; - &+span { + + & + span { margin-left: 1em; } } @@ -243,9 +247,8 @@ } } - .value { - font:{size:1.2em; weight: 300;} + font: { size:1.2em; weight: 300; } &:not(.open) { .open, @@ -263,6 +266,7 @@ font: { style: italic; } + .red { color: var(--text-red); } @@ -292,6 +296,7 @@ weight: 300; size: 2em; } + color: var(--primary-grey); position: relative; top: -0.1em; @@ -305,6 +310,7 @@ position: center center; repeat: no-repeat; } + width: 160px; height: 160px; } @@ -335,7 +341,6 @@ color: var(--primary-grey); font: normal 400 0.85em/1.95em var(--body-font-family); - .photo { float: left; background: url('/app/resources/images/backdrops/tech_support.jpg'); @@ -363,6 +368,7 @@ &.open { padding-top: 0; + .open-info { display: block; } @@ -390,6 +396,7 @@ color: var(--primary-green); font-weight: 500; padding-left: 30px; + @include icon($circle-check-green,$top: 1em); } @@ -410,7 +417,8 @@ li { font-weight: 600; - &:before { + + &::before { display: inline-block; margin: 0 0.25em 0 0; content: '\00B7'; @@ -426,7 +434,6 @@ } } - .course-info-roster { .nti-header { .pie { @@ -439,11 +446,13 @@ .grouping { padding: 0; + & > .header { background: var(--quad-grey); position: relative; padding: 15px 30px; - border-bottom: 1px solid #dddddd; + border-bottom: 1px solid #ddd; + &::after { content: ''; box-shadow: 0 -5px 15px 5px rgba(0, 0, 0, 0.2); @@ -453,7 +462,7 @@ left: 0; height: 100px; clip: rect(100px, auto, 150px, auto); - background: #dddddd; + background: #ddd; border-radius: 40em / 10px; } @@ -491,20 +500,21 @@ left: auto; vertical-align: middle; height: 35px; - white-space: nowrap; - font: normal 600 14px/35px var(--body-font-family); - padding: 0 15px 0 15px; - color: #ffffff; - background: var(--primary-blue); - border-radius: 3px; - cursor: pointer; - z-index: 10; - text-transform: capitalize; - - &::before { - content: none; - @include icon($mail-white, $top: 7px, $left: 5px); - } + white-space: nowrap; + font: normal 600 14px/35px var(--body-font-family); + padding: 0 15px 0 15px; + color: #fff; + background: var(--primary-blue); + border-radius: 3px; + cursor: pointer; + z-index: 10; + text-transform: capitalize; + + &::before { + content: none; + + @include icon($mail-white, $top: 7px, $left: 5px); + } } } } @@ -514,8 +524,6 @@ .x-grid-body .x-grid-row .x-grid-cell.x-grid-cell-first { cursor: default; } } - - .course-details { overflow: auto; padding: 7px 15px 15px 20px; @@ -591,7 +599,7 @@ } .x-component-course-info { - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.35); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35); &.gutter { display: none; } } } @@ -636,7 +644,7 @@ .enroll-card, .gift-card { background-color: var(--panel-background); - box-shadow: 0 1px 2px 0 rgba(0,0,0,0.35); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35); } .gift-card { @@ -672,7 +680,6 @@ } @include icon($arrow-next_hover, $side: after, $left: auto, $right: 5px, $top: 10px); - } .give { @@ -763,6 +770,7 @@ &.enrolled { padding-right: 40px; + @include icon($ico_enrollment_circhlecheck, $top: 20px, $right: 10px, $left: auto); .title { @@ -853,7 +861,7 @@ } &.full { - .title span{display: none;} + .title span { display: none; } } &.checkbox.full { @@ -867,7 +875,6 @@ } } - &.checkbox:not(.full):not(.loading) { cursor: pointer; padding-left: 35px; @@ -923,9 +930,9 @@ } } - &.has-overlay{ - overflow: hidden; - } + &.has-overlay { + overflow: hidden; + } } .complete-enrollment-layer, .welcome-card { @@ -938,8 +945,8 @@ bottom: 0; z-index: 10; - .congrats-container{ - .congrats{ + .congrats-container { + .congrats { text-align: center; position: absolute; transform: translateY(-50%); @@ -949,7 +956,7 @@ height: 250px; width: inherit; - &::after{ + &::after { content: ''; position: absolute; display: block; @@ -975,13 +982,13 @@ opacity: 0.8; } - .actions{ + .actions { margin: 30px auto 10px; width: 175px; position: relative; text-align: left; - > a{ + > a { position: relative; display: block; padding: 7px 0 7px 32px; @@ -989,7 +996,7 @@ text-transform: uppercase; font-size: 0.8em; - &::before{ + &::before { content: ''; overflow: hidden; position: absolute; @@ -1001,8 +1008,8 @@ width: 22px; } - &.completed{ - &::before{ + &.completed { + &::before { background: url('../images/icons/circle-check-white-green-small.png') no-repeat; } } @@ -1010,7 +1017,7 @@ } } - .add-selection{ + .add-selection { position: absolute; bottom: 0; left: 0; @@ -1018,13 +1025,13 @@ text-align: center; margin: 10px; - > span{ + > span { font-size: 0.9em; color: var(--quad-grey); font-style: italic; margin: 10px; - a.button{ + a.button { border-bottom: 1px solid var(--quad-grey); cursor: pointer; } @@ -1032,18 +1039,19 @@ } } - &.welcome-card{ + &.welcome-card { background: { image: url('../images/backdrops/welcome.jpg'); size: cover; position: center center; repeat: no-repeat; } + opacity: 1; - .congrats-container{ - .congrats{ - &::after{ + .congrats-container { + .congrats { + &::after { background: url('../images/platform.ou.edu/ou_janux_white.png') no-repeat; width: 315px; height: 94px; @@ -1052,5 +1060,4 @@ } } } - } diff --git a/src/main/resources/scss/debris/_dictionary.scss b/src/main/resources/scss/debris/_dictionary.scss index 12cf8c54f1..e71d673ef8 100644 --- a/src/main/resources/scss/debris/_dictionary.scss +++ b/src/main/resources/scss/debris/_dictionary.scss @@ -1,12 +1,12 @@ - .dictionary-window { @extend .nti-window; + padding-bottom: 3px; overflow: visible; .nti-window-header { - border-bottom: 1px solid #E7E7E7; + border-bottom: 1px solid #e7e7e7; } &.north::before { @@ -15,15 +15,17 @@ z-index: 1; top: -15px; left: 45%; + @include sprite($window-nib-north); } - &.south::before{ + &.south::before { content: ""; position: absolute; z-index: 1; bottom: -14px; left: 45%; + @include sprite($window-nib-south); } } diff --git a/src/main/resources/scss/debris/_dnd.scss b/src/main/resources/scss/debris/_dnd.scss index ecb32a0bef..d2f93f7d6c 100644 --- a/src/main/resources/scss/debris/_dnd.scss +++ b/src/main/resources/scss/debris/_dnd.scss @@ -28,6 +28,7 @@ &::before { @include loadingSpinner(); + position: static; display: inline-block; vertical-align: middle; @@ -35,6 +36,6 @@ } } -[draggable='true']{ +[draggable='true'] { max-height: 90000px; } diff --git a/src/main/resources/scss/debris/_editor.scss b/src/main/resources/scss/debris/_editor.scss index 0307c0fe62..bb5f85bd4c 100644 --- a/src/main/resources/scss/debris/_editor.scss +++ b/src/main/resources/scss/debris/_editor.scss @@ -1,6 +1,6 @@ @import "./card"; -span.tab{ +span.tab { white-space: nowrap; display: inline-block; width: 4em; @@ -11,7 +11,7 @@ span.tab{ $selector: '.attachment-part'; #{$selector} { - box-shadow: 0 0 1px 0 rgba(0,0,0,0.3); + box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3); cursor: pointer; margin: 3px 0; display: block; @@ -72,6 +72,7 @@ span.tab{ display: none; } } + &:not(.fallback) { label { display: none; @@ -91,8 +92,8 @@ span.tab{ .text { position: relative; - overflow: hidden; - text-overflow: ellipsis; + overflow: hidden; + text-overflow: ellipsis; display: block; padding: 12px 0; @@ -109,8 +110,9 @@ span.tab{ padding: 0; text-align: left; overflow: hidden; - text-overflow: ellipsis; + text-overflow: ellipsis; } + .size { display: block; color: var(--tertiary-grey); @@ -192,6 +194,7 @@ span.tab{ .meta { @include experimental-value(width, calc(100% - 48px)); + float: left; .text { @@ -218,14 +221,15 @@ span.tab{ #{$selector} { @include hardware-accelerate(); + position: relative;//default &.active { - display: block; + display: block; } - &.x-repaint{ - background: #ffffff; + &.x-repaint { + background: #fff; visibility: hidden; display: initial !important; } @@ -251,7 +255,7 @@ span.tab{ color: var(--secondary-grey); &:focus { - &::after{ + &::after { outline: 1px dotted var(--primary-blue); outline-offset: 1px; } @@ -265,14 +269,17 @@ span.tab{ .title { @include experimental(transition, all 0.5s); + position: relative; border: 0 solid #f2f2f2; border-bottom-width: 1px; + .placeholder { position: absolute; top: 3px; left: 15px; } + input { display: block; font: normal 300 25px/40px var(--body-font-family); @@ -282,7 +289,7 @@ span.tab{ color: var(--primary-grey); &[type=text]:not([value]), - &[type=text][value=""]{ + &[type=text][value=""] { font-style: italic; &:focus { @@ -290,9 +297,9 @@ span.tab{ } } - /*.x-ie10 &, .x-ie &{ + /* .x-ie10 &, .x-ie &{ height: 33px !important; - }*/ + } */ } } @@ -302,85 +309,91 @@ span.tab{ position: relative; border: 0 solid #f2f2f2; border-bottom-width: 1px; - padding: 0px 5px; + padding: 0 5px; - input{ + input { font: normal italic 14px/30px var(--body-font-family); font-style: italic; text-transform: none; } - .tags{ + .tags { margin: 0 105px 0 0; } - .action{ + + .action { float: right; - &.publish{ + + &.publish { width: 82px; height: 30px; position: relative; - &::after{ + &::after { content: ''; position: absolute; - left: 0; top: 5px; + left: 0; + top: 5px; outline: 0; + @include sprite($btn_toggle_private); } - &.on::after{ + &.on::after { @include sprite($btn_toggle_public); } } } - - } - .aux+.title, .title.small{ - input{ + .aux + .title, .title.small { + input { font: italic 14px/20px var(--body-font-family); padding-left: 5px; } } - .content { @include scrollbar(#ffffff, var(--tertiary-grey)); @include text-content; - @include experimental(transition, all 0.5s); + cursor: text; padding: 2px 5px 0; color: var(--secondary-grey); font: 14px var(--body-font-family); - overflow:{ + overflow: { x: hidden; y: auto; //scroll; } + min-height: 50px; max-height: 200px; outline: 0; position: relative; - &.show-placeholder[data-placeholder]::after{ + &.show-placeholder[data-placeholder]::after { display: block; position: absolute; content: attr(data-placeholder); + @include placeholder-style(); + top: 2px; left: 5px; } - .video-thumbnail, .unknown{ + .video-thumbnail, .unknown { height: 75px; width: 55px; cursor: pointer; + @include icon($filetype-video, $top:20px, $left:10px); } - .unknown{ + .unknown { cursor: default; + @include icon($filetype-unknown, $top:20px, $left:10px); } @@ -414,15 +427,17 @@ span.tab{ .footer { @include experimental(transition, all 0.5s); + position: absolute; bottom: 0; - left: 0; right: 0; + left: 0; + right: 0; height: 45px; white-space: nowrap; background-color: #efefef; border-top: 1px solid #dcdcdc; - &::after{ + &::after { content: ''; position: absolute; top: -8px; @@ -433,8 +448,8 @@ span.tab{ border-radius: 90px; } - .left .action {float: left;} - .right .action {float: right;} + .left .action { float: left; } + .right .action { float: right; } .action { position: relative; @@ -445,28 +460,28 @@ span.tab{ text-align: center; color: var(--secondary-grey); margin: -1px; - @include experimental(transition, all 0.5s); + @include experimental(transition, all 0.5s); - &.text-controls, &.object-controls{ + &.text-controls, &.object-controls { width: 34px; height: 34px; margin: 6px 0 0 5px; border-radius: 3px; - &::after{ + &::after { content: ''; position: absolute; - top: 9px; left: 5px; + top: 9px; + left: 5px; outline: none; - } - &.selected{ + &.selected { box-shadow: inset 0 0 0 1px #dcdcdc; - background-color: #ffffff; + background-color: #fff; - .popover{ + .popover { display: block; } } @@ -477,29 +492,29 @@ span.tab{ left: 50%; } - .popover{ + .popover { position: relative; height: 34px; left: -25%; background-color: #fff; - box-shadow: 1px 2px 3px -1px rgba(0,0,0,.3); + box-shadow: 1px 2px 3px -1px rgba(0, 0, 0, 0.3); border: 1px solid var(--quad-grey); z-index: 16; padding: 0 5px; display: none; white-space: nowrap; - &::after{ + &::after { content: ''; position: absolute; - top:32px; + top: 32px; left: 16%;//safar5 left: calc(25% - 6px); @include sprite($font_style_pointer); } - .control{ + .control { width: 20px; height: 32px; line-height: 32px; @@ -511,59 +526,65 @@ span.tab{ margin-top: 4px; height: 28px; - &:last-of-type{ margin-right: 0; } + &:last-of-type { margin-right: 0; } - &::after{ + &::after { content: ''; position: absolute; - top: 5px; left: 2px; + top: 5px; + left: 2px; } } &.bold { - &::after{ @include sprite($bold); } - &.selected::after{ @include sprite($bold_active); } + &::after { @include sprite($bold); } + &.selected::after { @include sprite($bold_active); } } + &.italic { - &::after{ @include sprite($italic); } - &.selected::after{ @include sprite($italic_active); } + &::after { @include sprite($italic); } + &.selected::after { @include sprite($italic_active); } } + &.underline { - &::after{ @include sprite($underline); } - &.selected::after{ @include sprite($underline_active); } + &::after { @include sprite($underline); } + &.selected::after { @include sprite($underline_active); } } &.whiteboard { @include icon($editor-insert-image, $top:10px); - &:hover::after{ + + &:hover::after { @include sprite($editor-insert-image_hover); } } &.video { @include icon($editor-insert-video, $top:9px); - &:hover::after{ + + &:hover::after { @include sprite($editor-insert-video_hover); } } &.upload { @include icon($editor-upload-file, $top:8px); - &:hover::after{ + + &:hover::after { @include sprite($editor-upload-file-hover); } } - - &.whiteboard, &.video, &.upload{ + &.whiteboard, &.video, &.upload { margin-right: 10px; - &::after{ + + &::after { top: 6px; } } - &.video{ - &::after{ + &.video { + &::after { top: 5px; } } @@ -595,8 +616,9 @@ span.tab{ &::after { @include sprite($font_styles_default); } + &.selected { - &::after{ @include sprite($font_styles_active); } + &::after { @include sprite($font_styles_active); } } &::before { @@ -611,10 +633,11 @@ span.tab{ } } - &.object-controls{ + &.object-controls { @include icon($editor-attach, $top:10px, $left:10px); - &.selected{ - &::after{ + + &.selected { + &::after { @include sprite($editor-attach_hover); } } @@ -629,46 +652,45 @@ span.tab{ line-height: 44px; font-weight: bold; font-style: italic; - color: #ffffff; + color: #fff; border: 1px solid var(--border-blue); padding: 0 0 0 24px; background: var(--primary-blue); position: relative; - &::after { content: ' '; overflow: hidden; position: absolute; - top: 8px; left: 15px; + top: 8px; + left: 15px; @include sprite($comment_white); + outline: 0; } - &.disabled{ + &.disabled { cursor: default; border: 1px solid #d0d0d0; - background: rgba(184,184,184,0.5); - color: rgba(255,255,255,0.7); + background: rgba(184, 184, 184, 0.5); + color: rgba(255, 255, 255, 0.7); margin: -1px; } - } } - &.x-repaint{ - background: #ffffff; + &.x-repaint { + background: #fff; visibility: hidden; } } - &.disabled { .main { opacity: 0.6; - .toolbar{ + .toolbar { visibility: hidden; opacity: 0; pointer-events: none; @@ -676,18 +698,20 @@ span.tab{ .content { } } - .action{ - &.whiteboard{ + + .action { + &.whiteboard { opacity: 0; visibility: hidden; pointer-events: none; } + &.save { pointer-events: none; cursor: default; border-color: #d0d0d0; background: var(--tertiary-grey); - color: #ffffff; + color: #fff; opacity: 0.5; } } @@ -695,14 +719,13 @@ span.tab{ } } - @include editor(); .x-component-editor { @include editor(true); - &.in-gutter{ - background: #ffffff; + &.in-gutter { + background: #fff; border: 1px solid #cfcfcf;//#ededed position: fixed !important; @@ -711,20 +734,23 @@ span.tab{ .aux { padding: 0; + .x-component-tokens.user-token-field { overflow: visible; - .control.publish{ + + .control.publish { left: 10px; margin-left: -10px; } - .tokens{ + + .tokens { padding-left: 0; } } } - .aux+.title, - .title.small{ + .aux + .title, + .title.small { input { padding-left: 0; } } @@ -734,7 +760,8 @@ span.tab{ } padding: 2px 0 0; - &.show-placeholder[data-placeholder]::after{ + + &.show-placeholder[data-placeholder]::after { left: 0; } } @@ -753,18 +780,20 @@ span.tab{ position: static !important; .x-menu-item.x-item-selected { - border-radius: 0; - border-width: 0; - border-style: none; - background: #efefef !important; - color: #3c3c3c !important; + border-radius: 0; + border-width: 0; + border-style: none; + background: #efefef !important; + color: #3c3c3c !important; } } .share-search-mask { position: absolute !important; - top: 0 !important; bottom: 0 !important; - left: 0 !important; right: 0 !important; + top: 0 !important; + bottom: 0 !important; + left: 0 !important; + right: 0 !important; background: white; text-align: center; } @@ -790,8 +819,10 @@ span.tab{ .avatar-container::before { content: ''; position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; background: var(--secondary-green); opacity: 0.7; z-index: 3; @@ -799,20 +830,21 @@ span.tab{ } } - -.share-search{ +.share-search { position: fixed !important; background-color: white; - .contact-card{ - .avatar-container{ + .contact-card { + .avatar-container { display: none; } - &.person{ - .avatar.icon{ + + &.person { + .avatar.icon { display: none; } - .avatar-container{ + + .avatar-container { display: block; } } diff --git a/src/main/resources/scss/debris/_file-uploader.scss b/src/main/resources/scss/debris/_file-uploader.scss index 31283649cf..53647a0dae 100644 --- a/src/main/resources/scss/debris/_file-uploader.scss +++ b/src/main/resources/scss/debris/_file-uploader.scss @@ -1,11 +1,10 @@ - .file-upload-manager { - .x-panel-body-default{ + .x-panel-body-default { background-color: transparent; } - .upload-icon{ + .upload-icon { @include sprite($upload); } } diff --git a/src/main/resources/scss/debris/_form-fields.scss b/src/main/resources/scss/debris/_form-fields.scss index 33dde089e2..f4ae0c7502 100644 --- a/src/main/resources/scss/debris/_form-fields.scss +++ b/src/main/resources/scss/debris/_form-fields.scss @@ -1,18 +1,17 @@ - .nt-combobox { .x-form-trigger-wrap { border-collapse: separate; padding: 0 15px 0 0; border-radius: 5px; border: 1px solid #a0a0a0; - box-shadow: inset 1px 1px 0 0 #cccccc; - background: #ffffff; + box-shadow: inset 1px 1px 0 0 #ccc; + background: #fff; position: relative; - } - .x-trigger-cell {width: 0 !important; display: inline;} + .x-trigger-cell { width: 0 !important; display: inline; } + .x-form-trigger { position: absolute; right: 6px; @@ -23,7 +22,7 @@ background: url(../images/elements/search-nib.png) 0 0 no-repeat; } - .x-form-field.x-form-text{ + .x-form-field.x-form-text { padding: 13px 0 13px 10px; border: none; border-radius: 5px; @@ -32,21 +31,21 @@ font-size: 13px; font-weight: 600; } - } - .input-wrap, .textbox-base { position: relative; input { @include text-box-style(); + padding-right: 20px; } .placeholder { @include placeholder-style(); + position: absolute; top: 0; left: 0; @@ -59,6 +58,7 @@ display: none; right: 4px; top: 7px; + @include sprite($clear_line); } } @@ -68,6 +68,7 @@ display: block; top: 5px; right: 54px; + .x-opera &, .x-safari5 & { right: 60px; @@ -76,13 +77,15 @@ input { width: calc(100% - 50px); + .x-opera &, .x-safari5 & { width: 77%; } + line-height: 20px; padding: 2px 25px 2px 5px; - height: 26px !important;; + height: 26px !important; border: 1px solid var(--tertiary-grey); border-right-width: 0; border-radius: 1px 0 0 1px; @@ -103,38 +106,34 @@ color: #fff; &.save-button-disabled { - background-color: #E4E4E4; + background-color: #e4e4e4; color: var(--tertiary-grey); cursor: default; - border: 1px solid #E4E4E4; + border: 1px solid #e4e4e4; } } } - .error-tip { position: relative; overflow: visible !important; - &[data-error-tip]{ + &[data-error-tip] { &::before { display: block; - position: absolute; - top: -16px; left: 5px; + top: -16px; + left: 5px; z-index: 999; - content: attr(data-error-tip); color: var(--quad-grey); background: var(--primary-red); border: 1px solid var(--secondary-red); - box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.1); - + box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1); padding: 1px 5px 1px 3px; font-size: 11px; font-style: italic; font-weight: 500; - text-align: left; text-shadow: 0 1px 0 var(--primary-red); text-transform: uppercase; @@ -146,23 +145,21 @@ //content: url(../images/tooltip_pointer.png); display: block; position: absolute; - top: 7px; left: 10px; z-index: 9999; } - &.error-on-bottom { &::before { top: auto; bottom: -16px; } + &::after { //TODO: put a triangle tip here thats flipped } } - } } @@ -228,7 +225,6 @@ } } - span.nti-checkbox { display: inline-block; position: relative; @@ -242,6 +238,7 @@ span.nti-checkbox { } &::after { margin-top: -7px; } + @include icon($checkbox-14, $top:50%, $left:0); &:not(.checked):hover::after { @@ -253,7 +250,6 @@ span.nti-checkbox { } } - span.nti-radiobutton { display: inline-block; position: relative; @@ -267,6 +263,7 @@ span.nti-radiobutton { } &::after { margin-top: -7px; } + @include icon($radio-button-16, $top:50%, $left:0); &:not(.checked):hover::after { @@ -278,11 +275,9 @@ span.nti-radiobutton { } } - .searchcombobox { position: relative; - input { font-size: 14px; font-weight: 500; @@ -322,7 +317,6 @@ span.nti-radiobutton { } .options { - position: fixed; top: 100%; background-color: white; @@ -347,7 +341,7 @@ span.nti-radiobutton { } &.active, &:hover { - background-color: #efefef + background-color: #efefef; } } } @@ -372,7 +366,9 @@ span.nti-radiobutton { &::after { content: ''; + @include arrow($pointFrom: top, $color: var(--tertiary-grey)); + position: absolute; top: 50%; margin-top: -2px; @@ -407,8 +403,10 @@ form.common-form { &::before { position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; } } } @@ -432,8 +430,9 @@ form.common-form { height: 100%; box-shadow: none; border: 1px solid var(--tertiary-grey); - background: #ffffff; + background: #fff; } + input.date-field-input { border-left-width: 0; } @@ -469,6 +468,7 @@ form.common-form { .input-container { display: inline-block; + .no-file { display: none; } @@ -489,6 +489,7 @@ form.common-form { font-weight: 700; max-width: 300px; overflow: hidden; + @include ellipse(); } @@ -612,8 +613,10 @@ form.common-form { &::before { content: ''; position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; z-index: 2; background: rgba(0, 0, 0, 0.3); } @@ -621,14 +624,17 @@ form.common-form { .preview { position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; z-index: 1; background-size: cover; background-position: center; background-repeat: no-repeat; @include file-custom-icon(); + .icon { position: relative; height: 100%; @@ -638,8 +644,10 @@ form.common-form { input[type=file] { position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; z-index: 3; opacity: 0; width: 100%; @@ -650,7 +658,8 @@ form.common-form { position: absolute; cursor: pointer; bottom: 0; - left: 0; right: 0; + left: 0; + right: 0; z-index: 4; line-height: 2.1em; padding-top: 0.1em; @@ -665,14 +674,14 @@ form.common-form { content: ''; position: absolute; top: 1px; - left: 1px; right: 1px; + left: 1px; + right: 1px; height: 1px; background-color: rgba(255, 255, 255, 0.5); } } } - .url-field { @include flexContainer(); @@ -703,6 +712,7 @@ form.common-form { input[type=text] { @include flexItem(1 1 auto); + line-height: 35px; font-size: 1em; box-shadow: inset 0 0 0 1px #d8d8d8; @@ -712,6 +722,7 @@ form.common-form { a { @include flexItem(0 0 auto); + pointer-events: none; width: 93px; color: var(--primary-grey); @@ -722,9 +733,10 @@ form.common-form { text-align: center; text-decoration: none; box-shadow: inset -1px 0 0 #d8d8d8, inset 0 1px 0 #d8d8d8, inset 0 -1px 0 #d8d8d8; + /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f2f2f2+100 */ - background: #ffffff; - background-image: linear-gradient(to bottom, #ffffff 0%,#f2f2f2 100%); + background: #fff; + background-image: linear-gradient(to bottom, #fff 0%, #f2f2f2 100%); @include icon($preview-gray, $side: after, $top: 50%, $left: auto, $right: 1em); @@ -735,18 +747,18 @@ form.common-form { &.loading a { position: relative; - color: rgba(0,0,0,0); + color: rgba(0, 0, 0, 0); text-indent: -500px; pointer-events: none; &::after { margin: 0; + @include loadingSpinner($top: 6px, $left: 34px); } } } - .save-progress { .progress-bar { height: 10px; @@ -771,9 +783,7 @@ form.common-form { } } - .date-time-field { - &.disabled { opacity: 0.5; pointer-events: none; @@ -790,7 +800,6 @@ form.common-form { box-shadow: 0 0 0 1px var(--tertiary-grey); height: 37px; - &:focus { box-shadow: inset 0 0 1px 0 var(--primary-blue), 0 0 0 1px var(--primary-blue); position: relative; @@ -798,8 +807,8 @@ form.common-form { } &[type=number] { - -moz-appearance:textfield; - appearance:textfield; + -moz-appearance: textfield; + appearance: textfield; &::-webkit-outer-spin-button, &::-webkit-inner-spin-button { @@ -811,6 +820,7 @@ form.common-form { .date .container, .time .container { @include flexContainer(); + -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; @@ -824,7 +834,6 @@ form.common-form { max-width: 165px; } - .select-current-date { display: inline-block; margin-top: 21px; @@ -845,7 +854,7 @@ form.common-form { border-radius: 0; line-height: 25px; padding: 6px; - background: #ffffff; + background: #fff; height: 37px; &.error { @@ -889,18 +898,21 @@ form.common-form { .hour-input { @include flexItem(0 0 40px); + width: 40px; max-width: 40px; } .seperator { @include flexItem(0 0 6px); + line-height: 40px; text-align: center; } .minute-input { @include flexItem(0 0 40px); + width: 40px; max-width: 40px; } diff --git a/src/main/resources/scss/debris/_grid.scss b/src/main/resources/scss/debris/_grid.scss index df326652dd..5966556927 100644 --- a/src/main/resources/scss/debris/_grid.scss +++ b/src/main/resources/scss/debris/_grid.scss @@ -1,5 +1,5 @@ //@mixin grid-def($useParent:false, $gridSpacing: 10px){ -@mixin grid-def($gridSpacing: 10px){ +@mixin grid-def($gridSpacing: 10px) { $selector: '.grid'; //@if $useParent == true { @@ -17,12 +17,12 @@ } .grid-item { - box-shadow: 0 0 3px rgba(0,0,0,0.5); + box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); position: relative; float: left; margin: 0 $gridSpacing $gridSpacing 0; //to see WIP cells. - background: rgba(255,0,0,0.6); + background: rgba(255, 0, 0, 0.6); @for $i from 1 through 8 { $s: (128px * $i) - $gridSpacing; @@ -31,8 +31,9 @@ &.col-#{$i} { width: $s; } - &.allow-flex.col-#{$i}{ + &.allow-flex.col-#{$i} { max-width: $m; + @include experimental-value(width, calc(#{(12.5% * $i)} - #{$gridSpacing})); } @@ -44,11 +45,8 @@ @include grid-def(); - - //Grid components (tables) - .x-grid-header-ct { background: none !important; border: 0 none !important; @@ -62,6 +60,7 @@ style: solid; width: 1px !important; } + text-shadow: none; color: var(--tertiary-grey); font: normal 700 0.6em/3 var(--body-font-family); @@ -91,12 +90,15 @@ &.x-column-header-sort-ASC { .x-column-header-text::after { vertical-align: text-top; + @include arrow($width: 8px, $height: 5px); } } + &.x-column-header-sort-DESC { .x-column-header-text::after { vertical-align: text-bottom; + @include arrow($pointFrom: top, $width: 8px, $height: 5px); } } @@ -118,6 +120,7 @@ .disclaimer-header { display: inline-block; padding-right: 12px; + @include icon($info, $left: auto, $right: -6px, $top: 7px); } } @@ -131,7 +134,7 @@ x: hidden; } - .x-grid-table{ + .x-grid-table { position: relative !important; } } @@ -146,7 +149,6 @@ border-color: var(--tertiary-grey); } } - } .x-grid-td { @@ -162,6 +164,7 @@ top-width: 0 !important; bottom-width: 0 !important; } + background: none; background-color: initial !important; } @@ -194,7 +197,6 @@ font: normal 300 0.85em/3 var(--body-font-family); color: var(--secondary-grey); - &.x-grid-cell-selected { background-color: inherit !important; } @@ -204,18 +206,20 @@ color: var(--primary-grey); font-weight: 600; } + &.x-grid-cell-first { color: var(--primary-blue); cursor: pointer; } - .right-aligned{ + .right-aligned { text-align: right; } .check { text-indent: -100px; overflow: hidden; + @include icon($check_gray, $top: 1em, $left: 1.6em); } @@ -223,33 +227,34 @@ cursor: pointer; width: 40px; height: 40px; + @include icon($more-options, $top: 15px, $left: 9px); } - &.feedback{ + &.feedback { padding-left: 10px; .x-grid-cell-inner { line-height: 30px; - .grade-excused{ - &.off{ + .grade-excused { + &.off { display: none; } - &.on{ + &.on { display: block; color: var(--primary-red); } } } - } .disclosure { cursor: pointer; width: 40px; height: 40px; + @include icon($options-menu, $top: 6px, $left: 5.5px); &:target, @@ -268,15 +273,15 @@ } } - div.padded-cell, - &.padded-cell .x-grid-cell-inner{ + &.padded-cell .x-grid-cell-inner { margin-left: 30px; } &.text { cursor: text; overflow: visible; + .x-grid-cell-inner { overflow: visible; } @@ -296,15 +301,16 @@ input { font: normal normal 1em/1 var(--body-font-family); width: 45%; - padding: 0.7em 0.3em 0.7em 1.0em; + padding: 0.7em 0.3em 0.7em 1em; margin-left: -0.3em; + &:hover, &:focus { border-color: var(--tertiary-grey); } } - .grade-excused{ + .grade-excused { color: var(--primary-red); padding-left: 5px; width: 45%; @@ -319,25 +325,30 @@ float: left; display: inline-block; line-height: 0; - width: 60px; height: 60px; + width: 60px; + height: 60px; background: { size: cover; position: center center; repeat: no-repeat; } } + .name { margin-left: 75px; line-height: 60px; max-width: 100%; overflow: hidden; + @include ellipse; + color: var(--primary-grey); - .accent-name{ + .accent-name { font-weight: normal; padding-right: 0.5em; overflow: hidden; + @include ellipse; } } @@ -360,11 +371,10 @@ } } - //Grid Views: .x-grid { - .x-grid-cell-editor{ - input{ + .x-grid-cell-editor { + input { font: normal 300 0.8em/1 var(--body-font-family); height: 40px !important; border: 1px solid #dcdcdc; @@ -372,7 +382,7 @@ } } - &.fixed-table{ + &.fixed-table { table { table-layout: fixed !important; } diff --git a/src/main/resources/scss/debris/_header.scss b/src/main/resources/scss/debris/_header.scss index f22bebb08e..1479f4873e 100644 --- a/src/main/resources/scss/debris/_header.scss +++ b/src/main/resources/scss/debris/_header.scss @@ -1,4 +1,4 @@ -@mixin content-item-row{ +@mixin content-item-row { height: 57px; cursor: pointer; margin-right: 0; @@ -7,13 +7,15 @@ .image { position: absolute; - top: 0; bottom: 0; left: 0; + top: 0; + bottom: 0; + left: 0; width: 60px; z-index: 2; background-size: cover; background-position: center; - &.is-book{ + &.is-book { //background-size: contain; background-repeat: no-repeat; } @@ -33,6 +35,7 @@ font: normal bold 0.6em/1.3em var(--body-font-family); color: var(--secondary-grey); overflow: hidden; + @include ellipse(); } @@ -42,33 +45,33 @@ text-transform: uppercase; color: var(--primary-grey); overflow: hidden; + @include ellipse(); } } } - .browser-warning { - .x-panel-body{ - height: auto; + .x-panel-body { + height: auto; padding: 0.5em 0.5em 0.5em 3em; background: { - color: #F9DD0A; + color: #f9dd0a; } + font-size: 2em; } } //TODO: get rid of this .x-main-navigation { - .x-masked & {z-index: 99;}//below the extjs mask z-index + .x-masked & { z-index: 99; }//below the extjs mask z-index background: #ebebec; padding-left: 100px; height: 57px; z-index: 150;//keep this above dashboard - & > div { width: 70px; height: 57px; @@ -79,6 +82,7 @@ &:first-child { position: relative; width: auto; + &:hover { .branding { z-index: 1; @@ -87,11 +91,15 @@ } .box { - position: absolute; top: 0; left: 0; right: 0; bottom: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; z-index: 1; } - &::after{ + &::after { z-index: 3; } @@ -100,41 +108,42 @@ content: ''; position: absolute; right: 0; - top: 10px; bottom: 10px; + top: 10px; + bottom: 10px; width: 1px; - background: #f6f6f6; box-shadow: -1px 0 0 0 #e2e2e2; } &.active .box, - .active .box{ + .active .box { $width: 10px; - background: #ffffff; + + background: #fff; &::before, &::after { content: ''; position: absolute; - top: 0; bottom: 0; + top: 0; + bottom: 0; width: $width; z-index: 1; - border-radius: 3px / 50%; - box-shadow: 0px 0px 5px -1px rgba(0,0,0,0.8); + box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.8); } - &::before{ - clip: rect(0px, ($width*2), auto, $width); + &::before { + clip: rect(0, ($width*2), auto, $width); right: 0; } - &::after{ - clip: rect(0px, 0px, auto, -$width); + + &::after { + clip: rect(0, 0, auto, -$width); left: 0; } } } - .branding { background-position: center center; background-repeat: no-repeat; @@ -155,6 +164,7 @@ .content { @include content-item-row; + height: 57px; width: initial; min-width: 275px; @@ -162,24 +172,26 @@ z-index: 2; @include icon($arrow-course-dropdown, $top: 25px, $left: auto, $right: 15px); - &::after{ + + &::after { z-index: 1; } opacity: 0.5; + &.active, &:hover { opacity: 1; } - - } .library { @include icon($course-nav-library,$top: 14px, $left: 24px); - &:hover::after{ + + &:hover::after { @include sprite($course-nav-library_hover); } - &.active::after{ + + &.active::after { @include sprite($course-nav-library_active); } } @@ -187,10 +199,11 @@ .forums { @include icon($course-nav-forum,$top: 14px, $left: 20px); - &:hover::after{ + &:hover::after { @include sprite($course-nav-forum_hover); } - &.active::after{ + + &.active::after { @include sprite($course-nav-forum_active); } } @@ -198,11 +211,11 @@ .contacts { @include icon($course-nav-contacts,$top: 16px, $left: 17px); - &:hover::after{ + &:hover::after { @include sprite($course-nav-contacts_hover); } - &.active::after{ + &.active::after { @include sprite($course-nav-contacts_active); } } @@ -210,38 +223,40 @@ .search { @include icon($course-nav-search,$top: 15px, $left: 22px); - &:hover::after{ + &:hover::after { @include sprite($course-nav-search_hover); } - &.active::after{ + &.active::after { @include sprite($course-nav-search_active); } } } -.x-panel-content-switcher{ - box-shadow: 0 0 8px rgba(0,0,0,0.5); +.x-panel-content-switcher { + box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); - .x-menu-body{ padding: 0; background: #eae9e9; border: none; } + .x-menu-body { padding: 0; background: #eae9e9; border: none; } .item { @include content-item-row; + border-bottom: 1px solid #eae9e9; &:first-of-type { background: #fff; + @include icon($arrow-course-dropdown, $top: 25px, $left: auto, $right: 15px); } - &:not(:first-of-type){ + &:not(:first-of-type) { background: #fff; opacity: 0.5; + &:hover { opacity: 1; } } - } .more { diff --git a/src/main/resources/scss/debris/_history-view.scss b/src/main/resources/scss/debris/_history-view.scss index 11b1e94404..f4f7cde179 100644 --- a/src/main/resources/scss/debris/_history-view.scss +++ b/src/main/resources/scss/debris/_history-view.scss @@ -3,24 +3,23 @@ @include side-panel-view-title; } -.activity-view{ +.activity-view { margin-bottom: 40px; - .filters-container{ + .filters-container { position: absolute; bottom: 0; right: 0; left: 0; - .activity-filters{ - .tabs{ + .activity-filters { + .tabs { position: relative; overflow: hidden; height: 40px !important; - .tab{ - - &.from{ + .tab { + &.from { @include icon($arrow-course-dropdown, $top: 16px, $left: 195px, $side:'after'); width: 218px; @@ -31,10 +30,9 @@ padding-left: 30px; float: left; border-right: 1px solid var(--tertiary-grey-alt); - } - &.types{ + &.types { @include icon($rhp-contact-flyout-settings_hover, $top: 10px, $left: 12px, $side:'after'); width: 42px; @@ -46,35 +44,35 @@ border-top: 1px solid var(--tertiary-grey-alt); cursor: pointer; - &::after{ + &::after { opacity: 0.5; } - &.selected{ + + &.selected { background-color: white; color: black; - &:after{ + &::after { opacity: 1; } } - } - } - + } } } } .x-menu.from-menu, -.x-menu.types-menu{ +.x-menu.types-menu { box-shadow: none !important; - - .x-header-text-container{ + + .x-header-text-container { background-color: white; border-top: 1px solid gainsboro !important; padding-top: 6px; - .x-header-text{ + + .x-header-text { color: var(--tertiary-grey); font: normal 600 10px/20px var(--body-font-family); margin: 10px 0 0 15px; @@ -82,9 +80,7 @@ } } - .x-menu-body{ + .x-menu-body { border: none !important; } - - } diff --git a/src/main/resources/scss/debris/_identity.scss b/src/main/resources/scss/debris/_identity.scss index 9868d3562e..13115360c9 100644 --- a/src/main/resources/scss/debris/_identity.scss +++ b/src/main/resources/scss/debris/_identity.scss @@ -8,7 +8,7 @@ top: 109px !important; } - &::after{ + &::after { content: ''; position: absolute; right: 1px; @@ -18,45 +18,46 @@ background-color: white; } - .account-menu-item{ + .account-menu-item { padding: 5px; - border-bottom: 1px solid #EDEDED; - - .avatar{ + border-bottom: 1px solid #ededed; + + .avatar { float: left; width: 60px; height: 60px; background-size: cover; } - .content{ + .content { margin-left: 75px; font: normal 400 0.9em/2 var(--body-font-family); padding: 8px 0 0 0; - .username{ + .username { max-width: 100%; overflow: hidden; + @include ellipsis; } - .links{ + .links { font-size: 0.8em; font-weight: 500; line-height: 1; color: var(--primary-blue); - .profile{ + .profile { cursor: pointer; display: inline; - &::after{ + &::after { content: ' \00B7 '; font-size: 1.1em; } } - .account{ + .account { cursor: pointer; display: inline; } @@ -69,25 +70,25 @@ cursor: pointer; overflow: hidden; - &.menu-showing{ + &.menu-showing { background-color: white; - box-shadow: -1px 0 0px 0px #DCDCDC; + box-shadow: -1px 0 0 0 #dcdcdc; transition: background-color 0.3s, box-shadow 0.3s; } - .undocked &{ + .undocked & { top: 38px; right: 0; } - .profile-pic{ + .profile-pic { float: right; margin: 14px;//70/2 - 42/2 } } .x-component.identity, .presence-gutter-entry { - .profile-pic{ + .profile-pic { position: relative; .avatar { @@ -110,7 +111,7 @@ z-index: 3; .main-navigation.dark-nav & { - background-color: #313131 + background-color: #313131; } @include presence-style-sudo($x: 2px, $y: 2px); @@ -124,41 +125,43 @@ } } -.presence-menu{ - .header{ +.presence-menu { + .header { color: var(--tertiary-grey); font: normal 600 10px/20px var(--body-font-family); margin: 10px 0 0 15px; } - .list{ - - .status{ + .list { + .status { height: 30px; position: relative; cursor: pointer; - .label{ + .label { float: left; display: block; padding-left: 30px; overflow: hidden; + @include ellipse; + font: normal 400 14px/30px var(--body-font-family); width: 200px; color: var(--tertiary-grey); } - .presence{ + .presence { @include presence-style; + position: absolute; right: 13px; top: 11px; - } - .edit{ + .edit { @include icon($rhp-status-edit,$top:9px,$left:8px); + position: absolute; top: 0; bottom: 0; @@ -166,76 +169,80 @@ width: 30px; display: none; - &:hover{ + &:hover { @include icon($rhp-status-edit_hover, $top:9px, $left:8px); + position: absolute; top: 0; bottom: 0; right: 30px; width: 30px; - background-color: #dddddd; + background-color: #ddd; } } - &.selected{ + &.selected { @include icon($rhp-status-checkmark, $top:8px, $left:15px, $side:'before'); - .label{ + .label { font: normal 600 14px/30px var(--body-font-family); color: var(--primary-grey); } } - &.active{ - .edit{ + &.active { + .edit { display: none; } - .presence{ + + .presence { display: none; } } - &:hover,&.active{ + &:hover,&.active { background-color: #efefef; - .label{ + .label { font: normal 600 14px/30px var(--body-font-family); - color: var(--primary-grey); + color: var(--primary-grey); } - .edit{ - border-left: 1px solid #ffffff; - border-right: 1px solid #ffffff; - display: block; + .edit { + border-left: 1px solid #fff; + border-right: 1px solid #fff; + display: block; } } } } } -.presence-editor{ +.presence-editor { height: 30px; width: 232px; border: none; - input{ + input { background: none; width: 165px; float: right; border: none; height: 27px; line-height: 27px; - background-color: #efefef + background-color: #efefef; } - .controls{ + .controls { right: 0; height: 30px; top: -3px; overflow: visible; background-color: #efefef; - .cancel{ + + .cancel { @include icon($clear_line,$top:7px,$left:0); + width: 24px; overflow: visible; z-index: 2; @@ -244,14 +251,15 @@ } } -.avatar-container{ - .initials{ +.avatar-container { + .initials { text-align: center; width: 100%; text-transform: uppercase; font-weight: 600; - color: #FFF; - div.inner{ + color: #fff; + + div.inner { position: absolute; top: 50%; width: 100%; diff --git a/src/main/resources/scss/debris/_image-cropping.scss b/src/main/resources/scss/debris/_image-cropping.scss index 88282c9156..c4e9121fb8 100644 --- a/src/main/resources/scss/debris/_image-cropping.scss +++ b/src/main/resources/scss/debris/_image-cropping.scss @@ -1,5 +1,4 @@ .image-cropping-prompt { - .image-cropping-editor { padding: 25px; background-color: #ededed; @@ -36,7 +35,7 @@ .rotate { cursor: pointer; display: inline-block; - background-color: rgba(0,0,0,0.4); + background-color: rgba(0, 0, 0, 0.4); color: white; line-height: 40px; padding: 0 19px 0 40px; @@ -47,8 +46,8 @@ @include icon($rotate-white, $side: after, $top: 50%, $left: 20px); &::after { - margin-top: -7px + margin-top: -7px; } } } -} \ No newline at end of file +} diff --git a/src/main/resources/scss/debris/_ipad.scss b/src/main/resources/scss/debris/_ipad.scss index 69bc44faf9..e59a5dd2f2 100644 --- a/src/main/resources/scss/debris/_ipad.scss +++ b/src/main/resources/scss/debris/_ipad.scss @@ -1,21 +1,22 @@ //iPad Specific styling @media only screen and (device-width: 768px) { - .topic-comment{ - .like:not(.on):not(.liked) { - visibility: visible !important; - } - &:not(:hover){ - .wrap{ - .meta{ - .datetime.nodot{ + .topic-comment { + .like:not(.on):not(.liked) { visibility: visible !important; - } } - } + + &:not(:hover) { + .wrap { + .meta { + .datetime.nodot { + visibility: visible !important; + } + } + } + } } - } - .scrollable { - -webkit-overflow-scrolling: touch; - } -} \ No newline at end of file + .scrollable { + -webkit-overflow-scrolling: touch; + } +} diff --git a/src/main/resources/scss/debris/_lightbox.scss b/src/main/resources/scss/debris/_lightbox.scss index b532ce2535..3aa51d3ae0 100644 --- a/src/main/resources/scss/debris/_lightbox.scss +++ b/src/main/resources/scss/debris/_lightbox.scss @@ -10,23 +10,23 @@ right: 10px; position: absolute; - @include sprite($note-window-x); + cursor: pointer; &:hover { @include sprite($note-window-x_hover); } - } .content { padding: 25px 30px; height: 100%; - &.loading{ + &.loading { &::after { @include loadingSpinner($top:50%,$left:50%); + margin-top: -12px; margin-left: -12px; } @@ -35,7 +35,6 @@ .page-contents { display: -ms-flexbox; -ms-box-orient: vertical; - display: flex; flex-wrap: nowrap; flex-direction: column; diff --git a/src/main/resources/scss/debris/_link-styles.scss b/src/main/resources/scss/debris/_link-styles.scss index ad9a749a1a..877581e122 100644 --- a/src/main/resources/scss/debris/_link-styles.scss +++ b/src/main/resources/scss/debris/_link-styles.scss @@ -14,29 +14,30 @@ position: absolute; top: 0; right: 0; + @include like-and-favorite; .edit { padding: 5px 10px; - color: var(--primary-blue); - margin: 5px; - - &:hover { - background-color: var(--primary-blue); - color: #fff; - border-radius: 5px; - } + color: var(--primary-blue); + margin: 5px; + + &:hover { + background-color: var(--primary-blue); + color: #fff; + border-radius: 5px; + } } } .thumbnail { - background:{ + background: { size: cover; repeat: no-repeat; position: center; } //border-right: 1px solid var(--quad-grey); - box-shadow: 0px 0px 3px 0 rgba(0,0,0,0.35); + box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.35); float: left; width: $thumbWidth; height: 100px; @@ -53,15 +54,16 @@ margin-bottom: 5px; color: var(--primary-grey); } + .byline { font: normal 600 10px/10px var(--body-font-family); text-transform: uppercase; color: var(--primary-blue); - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .description { color: var(--primary-grey); font: normal normal 12px/1rem var(--body-font-family); @@ -82,21 +84,21 @@ } a[href] { - &.internal-link { + &.internal-link { @include content-link-def; &:active, &:hover, &:visited { @include content-link-def; } } - #NTIContent &, #profile .profile-head &{ + #NTIContent &, #profile .profile-head & { @include content-link-def; + line-height: inherit; color: var(--primary-blue); } } - -.content-card{ - &, .note-window .note.main-view &{ +.content-card { + &, .note-window .note.main-view & { @include content-card-def; } @@ -119,7 +121,7 @@ a[href] { } .content-launcher { - &, .note-window .note.main-view &{ + &, .note-window .note.main-view & { @include content-card-def; $thumbWidth: 150px; @@ -131,9 +133,10 @@ a[href] { .meta { margin-left: $thumbWidth+15px; + .launcher-button { - margin: 5px 0px; - padding: 0px 10px 0px 40px; + margin: 5px 0; + padding: 0 10px 0 40px; background-color: var(--primary-blue); border: 1px solid var(--border-blue); font: italic 500 14px/30px var(--body-font-family); @@ -147,25 +150,24 @@ a[href] { position: absolute; top: 6px; left: 10px; + @include sprite($presentation-view); } - &.video-transcript-button{ + &.video-transcript-button { margin-left: 40px; padding-left: 10px; - &::after{ + &::after { content: none; } } } } - } } .component-overlay, .content-editor { - .content-card-target-container { margin: 0 5px 0 0; border: 1px solid var(--border-grey); @@ -176,10 +178,12 @@ a[href] { .no-support { display: block; position: absolute; - top: 50%; left:0; right:0; + top: 50%; + left: 0; + right: 0; transform: translateY(-50%); - &, a, div a { &, &:link, &:hover, &:visited{ text-decoration: none; } } + &, a, div a { &, &:link, &:hover, &:visited { text-decoration: none; } } padding: 0 5em; text-align: center; @@ -199,16 +203,18 @@ a[href] { // z-index: -2; //} - .back-button{ + .back-button { cursor: pointer; position: absolute; top: 20px; left: -25px; width: 25px; height: 25px; - &::after{ + + &::after { position: absolute; - top: 0; left: 0; + top: 0; + left: 0; content: ''; @include sprite($profile_back_arrow); @@ -223,7 +229,7 @@ a[href] { .no-support { position: relative; top: 50%; - transform: translateY(-50%); + transform: translateY(-50%); background-color: #fff; font-size: 12px; @@ -244,7 +250,6 @@ a[href] { } } - .link { &.arrow { position: relative; @@ -258,7 +263,7 @@ a[href] { position: absolute; width: 0.5em; height: 0.5em; - top: 0em; + top: 0; right: -0.9em; transform: rotate(-90deg); } diff --git a/src/main/resources/scss/debris/_masks-and-tips.scss b/src/main/resources/scss/debris/_masks-and-tips.scss index 078770e52d..8d3ca59bee 100644 --- a/src/main/resources/scss/debris/_masks-and-tips.scss +++ b/src/main/resources/scss/debris/_masks-and-tips.scss @@ -1,6 +1,7 @@ .masked-mask { visibility: hidden; } + .x-masked .x-masked { .nt-mask, .x-mask, @@ -20,9 +21,9 @@ body > .x-mask { } .nt-mask-msg, -.x-mask-msg{ - border: none !important; - box-shadow: none !important; +.x-mask-msg { + border: none !important; + box-shadow: none !important; background: transparent; color: var(--primary-grey); @@ -35,7 +36,7 @@ body > .x-mask { &.body-mask, &.drag-mask { - div{ + div { border: none !important; background: transparent !important; width: 100%; @@ -44,7 +45,7 @@ body > .x-mask { } } - &.drag-mask .x-mask-msg-text{ + &.drag-mask .x-mask-msg-text { display: none; } @@ -69,13 +70,14 @@ body > .x-mask { top: 15% !important; } - &.navigation{ + &.navigation { .x-mask-msg-text { border: none; padding: 1em 1em 1.5em 1em; font-size: 18px; max-width: 35rem; text-align: center; + &::after { top: auto; bottom: 0; @@ -86,7 +88,7 @@ body > .x-mask { } &.zoom { - div{ + div { background: none !important; padding: 1em; font-size: 3em; @@ -110,7 +112,7 @@ body > .x-mask { .x-mask { opacity: 1; background: rgba(245, 245, 245, 0.96); -// z-index: 999991; + // z-index: 999991; &.nti-clear { opacity: 0; @@ -121,14 +123,14 @@ body > .x-mask { opacity: 1; } - &.nti-black-clear{ + &.nti-black-clear { opacity: 0.6; - background: rgba(0,0,0, 0.9); + background: rgba(0, 0, 0, 0.9); } } .badge-tip { - background-color: rgba(40,40,40,0.95) !important; + background-color: rgba(40, 40, 40, 0.95) !important; padding: 10px !important; max-width: 240px; @@ -137,12 +139,12 @@ body > .x-mask { } } -.x-tip{ +.x-tip { -webkit-font-smoothing: antialiased; pointer-events: none; border-width: 0 !important; border-radius: 0 !important; - box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.25); + box-shadow: 1px 2px 5px 0 rgba(0, 0, 0, 0.25); &:not(.badge-tip) { background-color: #404040 !important; @@ -162,17 +164,16 @@ body > .x-mask { margin: 5px 0; } - .x-tip-header-text { font-size: 11px; font-weight: 600; - color: #ffffff; + color: #fff; text-transform: uppercase; } - .x-tip-body{ + .x-tip-body { text-transform: uppercase; - color: #ffffff !important; + color: #fff !important; font-size: 11px; font-weight: 600; } @@ -189,25 +190,28 @@ body > .x-mask { visibility: visible !important; } - .x-tip-anchor-top{ + .x-tip-anchor-top { @include sprite($tooltip-pointer-black-top); } - .x-tip-anchor-right{ + + .x-tip-anchor-right { @include sprite($tooltip-pointer-black-right); } - .x-tip-anchor-bottom{ + + .x-tip-anchor-bottom { @include sprite($tooltip-pointer-black-bottom); } - .x-tip-anchor-left{ + + .x-tip-anchor-left { @include sprite($tooltip-pointer-black-left); } } .dark .x-mask { - background: rgba(0,0,0,0.9) !important; + background: rgba(0, 0, 0, 0.9) !important; } -.message-bar{ +.message-bar { color: var(--secondary-grey); background-color: #fffbe3; border-width: 0; @@ -220,9 +224,9 @@ body > .x-mask { text-align: center; line-height: 32px; padding: 2px 20% 0; - box-shadow: 0 1px 5px 0px rgba(0,0,0,.5); + box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5); - a{ + a { margin-left: 0.5em; font-weight: 500; //display: inline-block; @@ -236,7 +240,7 @@ body > .x-mask { //border-bottom: 1px dotted var(--primary-grey); } - .remember{ + .remember { display: inline-block; //position: absolute; position: relative; @@ -249,28 +253,29 @@ body > .x-mask { width: 33%; margin: 0 -33% 0 3%; - &::after{ + &::after { content: ' '; position: absolute; - top: 6px; left: 0; + top: 6px; + left: 0; @include sprite($checkbox-light-unchecked); } - &:hover::after{ + &:hover::after { @include sprite($checkbox-light-unchecked_hover); } - &.checked{ - &::after{ + &.checked { + &::after { @include sprite($checkbox-light-checked); } - &:hover::after{ + + &:hover::after { @include sprite($checkbox-light-checked_hover); } } } - } .purchasable-mask { @@ -278,7 +283,7 @@ body > .x-mask { left: 0; right: 0; bottom: 0; - background: rgba(255,255,255,.6); + background: rgba(255, 255, 255, 0.6); z-index: 10; } @@ -290,37 +295,44 @@ body > .x-mask { z-index: 10; display: block; position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; - background-color: rgba(245,245,245,0.96); + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(245, 245, 245, 0.96); color: #555; font-family: var(--body-font-family); } + &::after { z-index: 11; + @include loadingSpinner(); + top: 100px; left: 327px; } } .container-loading-mask { - position: absolute; - top: 0; bottom: 0; - right: 0; left: 0; - background: rgba(52, 52, 52, 0.5); - z-index: 5; - min-height: 50px; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + background: rgba(52, 52, 52, 0.5); + z-index: 5; + min-height: 50px; - .load-text { - position: absolute; - top: 10%; - left: 50%; - margin-left: -25px; - color: white; + .load-text { + position: absolute; + top: 10%; + left: 50%; + margin-left: -25px; + color: white; - &::after { - @include loadingSpinner($top: 0, $left: -30px); - } + &::after { + @include loadingSpinner($top: 0, $left: -30px); } } +} diff --git a/src/main/resources/scss/debris/_menu-items.scss b/src/main/resources/scss/debris/_menu-items.scss index e9c1e8c633..bce2f7bf86 100644 --- a/src/main/resources/scss/debris/_menu-items.scss +++ b/src/main/resources/scss/debris/_menu-items.scss @@ -1,9 +1,8 @@ - .file-browser-menu { overflow: hidden; - .x-menu-item-icon.upload{ + .x-menu-item-icon.upload { @include sprite($upload); } @@ -15,13 +14,11 @@ right: -2px; //height: 30px; height: 50px; - filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + filter: progid:dximagetransform.microsoft.alpha(opacity=0); opacity: 0; - font-size: 200px; cursor: pointer; } - } .user-course-menu.x-panel-nt .x-menu-body { @@ -29,18 +26,18 @@ } .x-menu-nt { //the combobox drop list uses this class, -//don't combine with x-panel-nt to reduce css size. + //don't combine with x-panel-nt to reduce css size. @include animate(fadeIn,0.3s); //This looks suspicious, but this is the only real way to get the //crisp edges on the top/left while still giving a soft shadow to the right & bottom. - box-shadow: 3px 3px 3px -3px rgba(0,0,0,0.3); + box-shadow: 3px 3px 3px -3px rgba(0, 0, 0, 0.3); } .x-panel-nt { @include animate(fadeIn,0.3s); //This looks suspicious, but this is the only real way to get the //crisp edges on the top/left while still giving a soft shadow to the right & bottom. - box-shadow: 3px 3px 3px -3px rgba(0,0,0,0.3); + box-shadow: 3px 3px 3px -3px rgba(0, 0, 0, 0.3); position: fixed !important; .x-menu-body { @@ -56,18 +53,18 @@ position: fixed !important; } - .x-menu-list-ct, //the combobox drop list uses this class .x-menu-body { border: 1px solid #dcdcdc; - background: #ffffff; + background: #fff; } li.x-menu-item { border-bottom: 1px solid #dcdcdc; + &.no-border, &:last-of-type { - border-bottom-width: 0px; + border-bottom-width: 0; } } @@ -87,38 +84,42 @@ label.x-menu-item-cmp { margin: 0 !important; cursor: pointer; overflow: hidden; + @include ellipse; - &.label{ + &.label { @include menu-label-text-treatment; + padding: 15px 10px 5px 30px; } &.x-menu-item-checked { @include icon($menu_check, $top: 50%, $left: 10px); + &::after { margin-top: -5px; } } &.x-menu-item-checked, - &.x-menu-item-unchecked{ + &.x-menu-item-unchecked { padding: 5px 10px 5px 30px; } &.current, &.x-menu-item-over, &.x-menu-item-active { - border:{ + border: { radius: 0; width: 0; style: none; } + background: #efefef !important; color: #3c3c3c !important; } - &.x-menu-item-separator{ + &.x-menu-item-separator { background: #dcdcdc !important; height: 1px; padding: 0 !important; @@ -129,9 +130,10 @@ label.x-menu-item-cmp { .label { background: none; position: relative; + span { color: #d0d0d0; - background: #ffffff; + background: #fff; top: -6px; left: 25px; padding: 0 5px; @@ -145,7 +147,7 @@ label.x-menu-item-cmp { } } - &.doublespaced{ + &.doublespaced { margin-bottom: 37px !important; .label span { @@ -156,8 +158,8 @@ label.x-menu-item-cmp { } } - &.noline{ - height: 0px; + &.noline { + height: 0; } } } @@ -168,18 +170,23 @@ label.x-menu-item-cmp { .x-box-scroller-bottom { position: absolute; - left: 0; right: 0; - top: auto; height: 8px; + left: 0; + right: 0; + top: auto; + height: 8px; bottom: 0; .x-menu-scroll-bottom { background: #fff; opacity: 0.5; + @include icon($menu-arrow-down-active, $top: 0, $left: 50%); - &::after {margin-left: -4px;} + &::after { margin-left: -4px; } + &.x-menu-scroll-bottom-hover { opacity: 1; } + &.x-menu-scroll-bottom-disabled { opacity: 0 !important; } @@ -191,39 +198,37 @@ label.x-menu-item-cmp { opacity: 0.5; @include icon($menu-arrow-up-active, $top: 3px, $left: 50%); - &::after {margin-left: -4px;} + &::after { margin-left: -4px; } &.x-menu-scroll-top-hover { opacity: 1; } + &.x-menu-scroll-top-disabled { opacity: 0 !important; } } - .no-checkboxes { - label.x-menu-item-cmp { padding-left: 15px; } .selection-list-item, .x-menu-item { - &.selection-selected, &.x-menu-item-checked { &::after { content: none; } } padding-left: 15px; - &.label{ + + &.label { padding-left: 15px; } } } - .blue-menu-items { &.no-checkboxes .x-menu-item-checked, &:not(.no-checkboxes) .x-menu-item-active { @@ -237,40 +242,38 @@ label.x-menu-item-cmp { } } - - .x-menu-item-cmp.search-box { - border-top: 1px solid #F1F1F1; + border-top: 1px solid #f1f1f1; background: var(--quad-grey); height: 61px; overflow: hidden; + @include icon($rhp-search,$top:21px,$left:19px); input { margin: 10px; padding: 0 26px 0 30px; - background: #fff; border: 1px solid #dcdcdc; - font: normal 400 1em/1.5 var(--body-font-family); color: var(--primary-grey); - height: 40px; width: 92%;//fallback... + @include experimental-value(width, calc(100% - 20px)); } - input:not(:empty) > .clear {display: block;} + input:not(:empty) > .clear { display: block; } .clear { display: none; + @include icon($clear_line); + position: absolute; top: 22px; right: 15px; left: auto; - margin: 0; width: 16px; height: 16px; @@ -279,13 +282,12 @@ label.x-menu-item-cmp { } } - //Custom filter Menu .x-panel-nt.no-checkboxes.filter-search { font-size: 0.9em; label.x-menu-item-cmp, - .x-menu-item{ + .x-menu-item { padding-left: 10px; } diff --git a/src/main/resources/scss/debris/_misc.scss b/src/main/resources/scss/debris/_misc.scss index b963390ef5..ca6884e6e6 100644 --- a/src/main/resources/scss/debris/_misc.scss +++ b/src/main/resources/scss/debris/_misc.scss @@ -15,7 +15,7 @@ html, body { //reset base font settings line-height: normal; - font:{ + font: { variant: normal; weight: normal; style: normal; @@ -32,9 +32,8 @@ input::-ms-clear { display: none; } ::-webkit-input-placeholder { @include placeholder-style(); } ::-moz-placeholder { @include placeholder-style(); } input:-moz-placeholder { @include placeholder-style(); } -:-ms-input-placeholder{ @include placeholder-style(); } -input:-ms-input-placeholder{ @include placeholder-style(); } - +:-ms-input-placeholder { @include placeholder-style(); } +input:-ms-input-placeholder { @include placeholder-style(); } .ellipsis { margin: 0 10px; @@ -44,7 +43,8 @@ input:-ms-input-placeholder{ @include placeholder-style(); } div { display: inline-block; border-radius: 90px; - width: 4px; height: 4px; + width: 4px; + height: 4px; margin: 2px; background: var(--primary-blue); } @@ -54,18 +54,16 @@ input:-ms-input-placeholder{ @include placeholder-style(); } -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 1px); - transform: translate3d(0,0,1px); + transform: translate3d(0, 0, 1px); -webkit-perspective: 1000px; perspective: 1000px; } -.scroll-lock{ +.scroll-lock { overflow: hidden !important; } - - -.empty-state{ +.empty-state { text-align: center; font: normal 300 2em var(--body-font-family); color: var(--tertiary-grey); @@ -76,12 +74,12 @@ input:-ms-input-placeholder{ @include placeholder-style(); } color: var(--primary-blue); } - .sub{ + .sub { font-size: 0.5em; } - &.no-assignments{ - margin-bottom: 2em; + &.no-assignments { + margin-bottom: 2em; } } diff --git a/src/main/resources/scss/debris/_myaccount.scss b/src/main/resources/scss/debris/_myaccount.scss index 3e2f090bf1..a38de6a521 100644 --- a/src/main/resources/scss/debris/_myaccount.scss +++ b/src/main/resources/scss/debris/_myaccount.scss @@ -1,21 +1,23 @@ - .account-view { color: var(--secondary-grey); - font: {size: 16px; style: normal; weight: 4;} + font: { size: 16px; style: normal; weight: 4; } + line-height: 25px; + @include side-panel-view-title; .view-title { margin-bottom: 10px; } - + .item { display: block; min-height: 25px; margin-left: 20px; - &.x-item-disabled { opacity: 0.5; cursor: default; &:hover{color:var(--secondary-grey);}} + &.x-item-disabled { opacity: 0.5; cursor: default; &:hover { color: var(--secondary-grey); } } .x-mask { display: none; } } + a.item { cursor: pointer; @@ -27,7 +29,6 @@ } } - .notifications { min-height: 50px; line-height: normal; @@ -46,6 +47,7 @@ text-decoration: none; color: #747474; margin-left: 18px; + &:hover { color: var(--primary-blue); } @@ -54,6 +56,7 @@ .notification-item { line-height: normal; &:hover{ } + cursor: pointer; margin: 15px 0 15px 3px; padding: 0 0 0 12px !important; @@ -74,22 +77,27 @@ font-weight: 800; color: var(--primary-blue); text-transform: uppercase; + @include ellipse; + overflow: hidden; } + .message { color: #adadad; line-height: normal; font-size: 11px; font-weight: 300; + @include ellipse; + overflow: hidden; } } } } -.account-form-username .x-panel-body-account{ +.account-form-username .x-panel-body-account { font-size: 20px; padding: 0 0 1em 0; } diff --git a/src/main/resources/scss/debris/_navbar.scss b/src/main/resources/scss/debris/_navbar.scss index 41e872041a..aecfa70317 100644 --- a/src/main/resources/scss/debris/_navbar.scss +++ b/src/main/resources/scss/debris/_navbar.scss @@ -46,6 +46,7 @@ .nav-container { @include flexItem(1 1 100px); + transition: opacity 0.5s, width 0.5s; position: relative; left: 0; @@ -62,11 +63,13 @@ .search-container { @include flexItem(1 1 auto); + position: relative; .search-field-wrap { position: absolute; - top: 0; bottom: 0; + top: 0; + bottom: 0; right: 0; width: 100%; transition: width 0.5s; @@ -110,11 +113,11 @@ .icons { @include flexItem(0 0 auto); @include flexContainer(); + justify-content: flex-end; -webkit-box-pack: end; -webkit-justify-content: flex-end; - -ms-flex-pack: end; - + -ms-flex-pack: end; & > div { @include flexItem(0 0 auto); @@ -122,6 +125,7 @@ .chat-notification-container { display: none; + @media #{$hide-chat-break-point} { display: block; } @@ -161,7 +165,8 @@ opacity: 0; left: 0; display: none; - @include flexBasis(0px); + + @include flexBasis(0); @include flexItem(0 1 100px); } @@ -187,6 +192,7 @@ .main-navigation.has-nav { .search-container { @include flexBasis(150px); + max-width: 200px; .search-field-wrap { @@ -199,6 +205,7 @@ &.collapsed { @include flexItem(0 0 50px); + .search-field-wrap { .search-field { width: 50px; @@ -221,6 +228,7 @@ display: block; top: 10px; left: 15px; + @include icon($warning-icon-red, $side: after, $position: absolute); & + .msg { @@ -234,9 +242,9 @@ font-size: 14px; line-height: 40px; margin-right: 10px; - vertical-align: top; - font-weight: 500; - margin: 0 10px 0 20px; + vertical-align: top; + font-weight: 500; + margin: 0 10px 0 20px; } .buttons { @@ -251,7 +259,7 @@ cursor: pointer; position: relative; - &::after{ + &::after { content: "|"; position: absolute; right: 0; @@ -261,26 +269,27 @@ } &:last-of-type { - &::after { - content: none; - } + &::after { + content: none; } + } - &:first-of-type { - padding-left: 0; - } + &:first-of-type { + padding-left: 0; + } } } - .close{ + .close { @include icon($note-window-x, $side: after, $position: absolute); + top: 10px; right: 10px; cursor: pointer; width: 24px; height: 24px; - &:hover{ + &:hover { @include icon($note-window-x_hover, $side: after, $position: absolute); } } diff --git a/src/main/resources/scss/debris/_navigation-menu.scss b/src/main/resources/scss/debris/_navigation-menu.scss index 16e779d35b..54b1118047 100644 --- a/src/main/resources/scss/debris/_navigation-menu.scss +++ b/src/main/resources/scss/debris/_navigation-menu.scss @@ -1,4 +1,4 @@ -.x-panel-navigation-menu{ +.x-panel-navigation-menu { position: absolute !important; top: 57px !important; left: -3px !important; @@ -7,73 +7,73 @@ .x-panel-body-navigation-menu { @include scrollbar(#ffffff, var(--tertiary-grey)); + width: 100% !important; height: 100% !important; padding: 0 50px; margin: 0; - /*box-shadow: inset 1px 0 0 0 #d2d2d2, + + /* box-shadow: inset 1px 0 0 0 #d2d2d2, inset 2px 0 0 0 #ffffff, -1px 0 3px 0 rgba(0, 0, 0, 0.2); background: var(--quad-grey) !important; border: 0px solid #99c14f; - border-right-width: 3px !important;*/ + border-right-width: 3px !important; */ .x-menu-item-cmp { margin-bottom: 0 !important; } } - &.x-panel.x-layer.x-menu{ + &.x-panel.x-layer.x-menu { overflow: visible; } - &.search-menu{ + &.search-menu { width: 700px !important; - .x-panel-body-navigation-menu{ + .x-panel-body-navigation-menu { padding: 0; - .x-box-inner{ + .x-box-inner { width: 100% !important; - .x-box-target{ + .x-box-target { width: 100% !important; } } - .x-menu-item-cmp{ + .x-menu-item-cmp { width: 100% !important; } } } } - .x-component-navigation-collection { //&.x-menu-item{} background: var(--quad-grey); border: 1px solid #d2d2d2 !important; border-top-width: 0 !important; border-right-width: 0 !important; - - box-shadow: inset 1px 0 0 0 #ffffff, - 0 3px 0 0 #eaeaea; + box-shadow: + inset 1px 0 0 0 #fff, + 0 3px 0 0 #eaeaea; margin-bottom: 3px; - padding: 0 6px 15px; position: relative; overflow: hidden; - &:nth-child(n+1){ + &:nth-child(n+1) { margin-top: 10px; } - .stratum { padding: 10px; border: none !important; border-bottom: 1px solid #e4e4e4 !important; + &:last-of-type { border-bottom: none !important; } @@ -81,7 +81,8 @@ .count { color: #73cdfb; - font:{ size: 10px; style: italic; weight: bold; } + font: { size: 10px; style: italic; weight: bold; } + text-transform: uppercase; display: inline-block; position: relative; @@ -91,10 +92,11 @@ .collection-name { color: #abaaaa; - font:{ + font: { size: 14px; weight: 600; } + text-transform: uppercase; } @@ -108,20 +110,22 @@ &.selected, &.x-item-selected { background-color: #ebebeb; - box-shadow: inset 0 -2px 0 0px #D4D4D4, - inset 0 2px 0 0px #D4D4D4, - inset -3px 0 0 0px #D4D4D4, - inset 3px 0 0 0px #D4D4D4; + box-shadow: + inset 0 -2px 0 0 #d4d4d4, + inset 0 2px 0 0 #d4d4d4, + inset -3px 0 0 0 #d4d4d4, + inset 3px 0 0 0 #d4d4d4; } .cover { - background:{ + background: { color: var(--tertiary-grey); size: cover; position: center center; repeat: no-repeat; } - box-shadow: -1px 1px 3px 0 rgba(0,0,0,0.35); + + box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.35); border-radius: 1px; float: left; width: 54px; @@ -134,7 +138,9 @@ .title, .author, .price { color: var(--primary-grey); font: normal bold 12px/18px var(--body-font-family); + @include ellipse; + overflow: hidden; } @@ -169,8 +175,9 @@ height: 85px; box-shadow: none; } + .meta { - .title, .author{ + .title, .author { white-space: normal; } @@ -179,20 +186,21 @@ margin-left: 0; padding-left: 75px; padding-top: 10px; - box-shadow: -1px 1px 3px 0 rgba(0,0,0,0.35); + box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.35); } - .history{ + + .history { border-top: 1px solid #e6e6e6; clear: both; margin-left: -75px; - text-align: center; - padding: 10px; - background: white; - color: #ababab; - font-size: 12px; - line-height: 15px; - font-weight: bold; - } + text-align: center; + padding: 10px; + background: white; + color: #ababab; + font-size: 12px; + line-height: 15px; + font-weight: bold; + } } } } diff --git a/src/main/resources/scss/debris/_notes.scss b/src/main/resources/scss/debris/_notes.scss index 079ba79fde..7e6a0ab897 100644 --- a/src/main/resources/scss/debris/_notes.scss +++ b/src/main/resources/scss/debris/_notes.scss @@ -10,11 +10,12 @@ cursor: pointer; } - - .shared-to{ + .shared-to { display: inline-block; overflow: hidden; + @include ellipse; + max-width: 340px; vertical-align: text-bottom; } @@ -28,13 +29,14 @@ @include like-and-favorite; } } + .clear { clear: both; - height: 0px; + height: 0; } } -@mixin note-control-box{ +@mixin note-control-box { .note-here-control-box { @include animate(fadeIn,0.1s); @include icon($add-note,$position: absolute, $top:-4px); @@ -54,15 +56,12 @@ // //} - &.note-overlay-hidden{ + &.note-overlay-hidden { display: none; } - } } - - @mixin reply-options { .reply-options { opacity: 0.4; @@ -76,8 +75,8 @@ height: 32px; margin-right: 30px; cursor: pointer; - opacity: 0.75; + &:hover { opacity: 1; } @@ -88,7 +87,8 @@ &::after { content: ' '; position: absolute; - top: 8px; left: 0; + top: 8px; + left: 0; overflow: hidden; } } @@ -113,21 +113,24 @@ position: relative; margin-right: 0; width: 32px; - border: 1px solid rgba(0,0,0,0); + border: 1px solid rgba(0, 0, 0, 0); border-radius: 2px; &::after { content: ' '; overflow: hidden; position: absolute; - top: 10px; left: 5px; + top: 10px; + left: 5px; + @include sprite($more-options); } &.active { border-color: #dcdcdc; - background-color: #ffffff; - box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.09); + background-color: #fff; + box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.09); + &::after { @include sprite($more-options_active); } @@ -136,36 +139,35 @@ } } -.reply-options-menu{ - +.reply-options-menu { &.dark { - box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.8) !important; - .x-menu-body{ + box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.8) !important; + + .x-menu-body { border: 1px solid #343434 !important; background: #343434 !important; .x-menu-item { color: var(--secondary-grey) !important; - &.edit::after{ @include sprite($edit-dark); } - &.flag::after{ @include sprite($flag-dark); } - &.delete::after{ @include sprite($trash-can-dark); } + &.edit::after { @include sprite($edit-dark); } + &.flag::after { @include sprite($flag-dark); } + &.delete::after { @include sprite($trash-can-dark); } &.x-menu-item-active { color: var(--tertiary-grey) !important; background: #3d3d3d !important; - &.edit::after{ @include sprite($edit-dark_hover); } - &.flag::after{ @include sprite($flag-dark_hover); } - &.delete::after{ @include sprite($trash-can-dark_hover); } + &.edit::after { @include sprite($edit-dark_hover); } + &.flag::after { @include sprite($flag-dark_hover); } + &.delete::after { @include sprite($trash-can-dark_hover); } } - } } } .x-menu-item { - &.reply-option{ + &.reply-option { padding: 1px 10px 2px 37px !important; line-height: 27px; cursor: pointer; @@ -173,8 +175,7 @@ font-weight: normal; position: relative; - - &::after{ + &::after { content: ''; overflow: hidden; position: absolute; @@ -182,31 +183,30 @@ left: 13px; } - &.edit::after{ @include sprite($edit-15); } - &.flag::after{ @include sprite($flag-13x15); } - &.add-contact::after{ @include sprite($add-contact-14x14); } + &.edit::after { @include sprite($edit-15); } + &.flag::after { @include sprite($flag-13x15); } + &.add-contact::after { @include sprite($add-contact-14x14); } &.chat::after { @include sprite($chat-18x12); } - &.follow::after{ @include sprite($follow); } - &.block::after{ @include sprite($block); } - &.mute::after{ @include sprite($mute-14x13); } - &.delete::after{ @include sprite($trash-can-11x14); } + &.follow::after { @include sprite($follow); } + &.block::after { @include sprite($block); } + &.mute::after { @include sprite($mute-14x13); } + &.delete::after { @include sprite($trash-can-11x14); } &.x-menu-item-active { - &.edit::after{ @include sprite($edit-15_hover); } - &.flag::after{ @include sprite($flag-13x15_hover); } - &.add-contact::after{ @include sprite($add-contact-14x14_hover); } + &.edit::after { @include sprite($edit-15_hover); } + &.flag::after { @include sprite($flag-13x15_hover); } + &.add-contact::after { @include sprite($add-contact-14x14_hover); } &.chat::after { @include sprite($chat-18x12_hover); } - &.follow::after{ @include sprite($follow_hover); } - &.block::after{ @include sprite($block_hover); } - &.mute::after{ @include sprite($mute-14x13_hover); } - &.delete::after{ @include sprite($trash-can-11x14_hover); } + &.follow::after { @include sprite($follow_hover); } + &.block::after { @include sprite($block_hover); } + &.mute::after { @include sprite($mute-14x13_hover); } + &.delete::after { @include sprite($trash-can-11x14_hover); } } } } } .note-gutter { - position: absolute; top: 0; right: 0 !important; @@ -216,61 +216,67 @@ @include note-control-box; } - .note-container { position: relative; .note { position: relative; padding: 16px 27px 5px 30px; - border: 0px solid #f2f2f2; + border: 0 solid #f2f2f2; border-bottom-width: 1px; &:not(.root) { .meta { .controls { .favorite { - display:none; - margin-top: 0px; + display: none; + margin-top: 0; } } - .shared-to{display: none;} - .title{display: none; } - .name{ + .shared-to { display: none; } + .title { display: none; } + + .name { font-size: 14px; color: var(--primary-blue); display: inline-block; max-width: 40em; overflow: hidden; + @include ellipse; } } } - &.first{ + &.first { &::after { content: ' '; position: absolute; overflow: hidden; - top: 15px; left: 18px; + top: 15px; + left: 18px; @include sprite($reply_arrow); } } &.deleted-reply { - &::after {background: none !important;} + &::after { background: none !important; } + min-height: 35px; padding: 6px 30px; + .meta { display: none; - .controls {display: none !important;} + .controls { display: none !important; } } .body { display: none; } - .avatar {display: none;} - .name {display: none;} + .avatar { display: none; } + .name { display: none; } + .respond { overflow: visible; + .time { position: static; //float: right; @@ -278,22 +284,23 @@ display: block !important; } } + .reply-options { display: none !important; } } - &.editor-active,&.hover { border-color: #e6e6e6; box-shadow: none; .meta .controls { display: block; } - .respond .reply-options{ opacity: 1; } + .respond .reply-options { opacity: 1; } } .avatar { float: left; cursor: pointer; + img { border-radius: 2px; margin-left: 4px; @@ -334,25 +341,24 @@ font-size: 14px; line-height: default; font-family: var(--body-font-family); - color: var(--primary-grey); + @include note-body; @include attachment(); .attachment-part { margin: 7px 0; } - } - - &.editor-active .respond{ + &.editor-active .respond { display: block; - .reply-options{display: none;} - .time{display: none;} + .reply-options { display: none; } + .time { display: none; } + .editor { display: block; - .action.share {display: none !important;} + .action.share { display: none !important; } } } @@ -361,7 +367,7 @@ overflow: hidden; @include reply-options; - .reply-options .more ol{ position: fixed; } + .reply-options .more ol { position: fixed; } &.shared .reply-options .share { display: inline-block; @@ -370,7 +376,7 @@ .time { color: var(--tertiary-grey); position: absolute; - right: 0px; + right: 0; top: 8px; font-size: 12px; font-style: italic; @@ -380,28 +386,28 @@ .editor { margin-top: 10px; - .main{ + .main { padding-left: 10px; padding-right: 13px; border: 1px solid #dcdcdc; border-bottom-width: 0; - .content{ + .content { padding: 6px 0 0 0; - &.show-placeholder[data-placeholder]::after{ + &.show-placeholder[data-placeholder]::after { top: 5px; } } - .error-tip[data-error-tip]::before{ + .error-tip[data-error-tip]::before { top: 32px !important; } } - .footer{ + .footer { background-color: transparent; - &::after{ display: none; } + &::after { display: none; } } } } @@ -412,7 +418,6 @@ } &.child { - .note .respond .reply-options .share { display: none; } @@ -420,8 +425,9 @@ .note-container.child { .note { padding-left: 60px; - &.first{ - &::after{ + + &.first { + &::after { left: 48px; } } @@ -432,10 +438,10 @@ .note-window { background: #fff; - box-shadow: 3px 0px 9px -3px rgba(0,0,0,0.3); + box-shadow: 3px 0 9px -3px rgba(0, 0, 0, 0.3); .note { - box-shadow: inset 0 1px 0 0 #ffffff; + box-shadow: inset 0 1px 0 0 #fff; } .note.main-view { @@ -445,7 +451,7 @@ padding-left: 27px; &.editor-active, &.hover { - box-shadow: inset 0 1px 0 0 #ffffff; + box-shadow: inset 0 1px 0 0 #fff; } img.avatar, .avatar-container { @@ -469,11 +475,11 @@ font-size: 12px; position: relative; - .controls{ + .controls { top: -16px; } - .title{ + .title { height: 55px; max-width: 600px; font-size: 40px; @@ -481,16 +487,17 @@ font-family: var(--header-font-family); word-wrap: nowrap; overflow: hidden; + @include ellipsis; - .whiteboard-container{display: none !important;} + .whiteboard-container { display: none !important; } } - .name-wrap{ + .name-wrap { position: relative; font-size: 14px; - &::before{ + &::before { content: 'Posted by '; } @@ -498,24 +505,26 @@ vertical-align: text-bottom; } - .name{ + .name { color: var(--primary-blue); margin-right: 5px; display: inline-block; max-width: 200px; overflow: hidden; + @include ellipse; } - .shared-to{ + .shared-to { color: var(--primary-blue); - name[data-profile-idx]:not([data-profile-idx=""]){ + + name[data-profile-idx]:not([data-profile-idx=""]) { cursor: pointer; } } - .time{ - &::after{ + .time { + &::after { text-decoration: none !important; position: static; content: '\00B7'; @@ -524,20 +533,20 @@ } } } - } .context { - position: relative; + position: relative; margin: 20px 0; padding: 20px; - background: #ffffff; - box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2); + background: #fff; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); clear: both; - overflow:{ + overflow: { x: hidden; y: auto //scroll; } + max-height: 30em; .see-more { @@ -575,54 +584,52 @@ } .nobreak { - white-space: nowrap; + white-space: nowrap; } .vfrac { - white-space: nowrap; + white-space: nowrap; - .divider { - font-size: 140%; - vertical-align: -4%; + .divider { + font-size: 140%; + vertical-align: -4%; } } .underline { - text-decoration: underline; + text-decoration: underline; } .overline { - text-decoration: overline; + text-decoration: overline; } em, .mathname { - font-style: italic; + font-style: italic; } - .mathjax { - line-height: normal; + .mathjax { + line-height: normal; white-space: nowrap; } - & > canvas { + & > canvas { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + top: 0; + left: 0; + width: 100%; + height: 100%; } - & > span.text{ - position: relative; - z-index: 1; + & > span.text { + position: relative; + z-index: 1; color: var(--primary-grey); font-size: 14px; line-height: 32px; - white-space:normal; - + white-space: normal; word-wrap: break-word; - -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; @@ -636,18 +643,18 @@ } .action { - background-color: var(--secondary-green); - width: 120px; + background-color: var(--secondary-green); + width: 120px; &.button { - line-height: 42px; - text-align: center; - font-weight: 300; - font-size: 1.2em; - letter-spacing: 1px; - color: white; - cursor: pointer; - border-radius: 3px; + line-height: 42px; + text-align: center; + font-weight: 300; + font-size: 1.2em; + letter-spacing: 1px; + color: white; + cursor: pointer; + border-radius: 3px; } } } @@ -666,13 +673,9 @@ font: 16px/24px var(--body-font-family); margin-left: auto; } - - } - - .note-container.child {background: #ffffff;} - + .note-container.child { background: #fff; } .note-footer, .note-content-container.scrollbody { @include scrollbar(#ffffff, var(--tertiary-grey)); @@ -686,20 +689,18 @@ padding: 20px; color: var(--tertiary-grey); - &::after{ + &::after { content: 'End'; } } } - .x-component-reader-notepad { cursor: text; overflow: hidden; position: relative; - - .note-here{ + .note-here { top: -50px; left: 0 !important; right: 0 !important; @@ -715,10 +716,8 @@ &.hidden { display: none; } - } - .x-component-notepad-item, .x-container-notepad-item { position: absolute; @@ -728,10 +727,10 @@ background: var(--panel-background); color: var(--secondary-grey); - &.collide { //@include experimental(transition, height 0.5s); - box-shadow: inset 0px -1px 0px 0px #e3e3e3; + box-shadow: inset 0 -1px 0 0 #e3e3e3; + &::after { content: ''; position: absolute; @@ -742,7 +741,7 @@ z-index: 1; border-radius: 100%; background: rgba(0, 0, 0, 0.1); - box-shadow: 0px 0px 7px -1px rgba(0, 0, 0, 0.45); + box-shadow: 0 0 7px -1px rgba(0, 0, 0, 0.45); clip: rect(-10px, auto, 2px, auto); } @@ -750,7 +749,7 @@ overflow: visible; height: auto !important; z-index: 10; - background-image: linear-gradient(to bottom, #ffffff 0%, rgba(251, 251, 251, 0) 70%); + background-image: linear-gradient(to bottom, #fff 0%, rgba(251, 251, 251, 0) 70%); &::after { bottom: 1px; @@ -765,34 +764,35 @@ //make sure nodes are sorted & + .x-component-notepad-item { - background-image: linear-gradient(to bottom, #ffffff 0%, rgba(251, 251, 251, 0) 70%); + background-image: linear-gradient(to bottom, #fff 0%, rgba(251, 251, 251, 0) 70%); } } } - .x-container-notepad-item { overflow: hidden; //.x-component-notepad-item:not(.inline-editor) { .x-component-notepad-item { - &:hover{ + &:hover { box-shadow: none; } + &:first-child { - box-shadow: inset 0px 1px 0px 0px #e3e3e3; + box-shadow: inset 0 1px 0 0 #e3e3e3; } + &:last-of-type { - box-shadow: inset 0px -1px 0px 0px #e3e3e3; - &.inline-editor{ - box-shadow: inset 0px 0px 0px 0px #e3e3e3; + box-shadow: inset 0 -1px 0 0 #e3e3e3; + + &.inline-editor { + box-shadow: inset 0 0 0 0 #e3e3e3; } } } } .x-component-notepad-item { - .x-component-notepad-item { position: relative; overflow: visible; @@ -824,17 +824,17 @@ padding: 0.4em 0.5em; &:not(.inline-editor):hover { - box-shadow: inset 0px -1px 0px 0px #e3e3e3, - inset 0px 1px 0px 0px #e3e3e3; + box-shadow: + inset 0 -1px 0 0 #e3e3e3, + inset 0 1px 0 0 #e3e3e3; } - &.inline-editor{ + &.inline-editor { background: #fff; z-index: 100; padding-left: 1em; - - &:not(.empty){ + &:not(.empty) { & > div[contenteditable] { margin-left: -0.5em; padding-left: 0.5em; @@ -845,7 +845,8 @@ } & > div > .x-component-notepad-item.inline-editor { - box-shadow: inset 0px -1px 0px 0px #ededed, - inset 0px 1px 0px 0px #ededed; + box-shadow: + inset 0 -1px 0 0 #ededed, + inset 0 1px 0 0 #ededed; } } diff --git a/src/main/resources/scss/debris/_notifications.scss b/src/main/resources/scss/debris/_notifications.scss index b351d8de21..0c27c5c264 100644 --- a/src/main/resources/scss/debris/_notifications.scss +++ b/src/main/resources/scss/debris/_notifications.scss @@ -70,7 +70,8 @@ color: var(--primary-grey); line-height: 24px;//height of the spinner padding-left: 30px;//width of the spinner + 6px - top: 50%; left: 50%; + top: 50%; + left: 50%; margin-top: -12px; margin-left: -51px; @@ -90,7 +91,7 @@ width: 300px; background-color: white; overflow: visible; - box-shadow: 3px 3px 3px -3px rgba(0,0,0,0.3); + box-shadow: 3px 3px 3px -3px rgba(0, 0, 0, 0.3); z-index: 201; html.msg-bar-open & { @@ -99,14 +100,14 @@ &::before { content: ""; - position: absolute; - width: 15px; - height: 15px; - right: 73px; - transform: rotate(45deg); - background: white; - border: 1px solid #dcdcdc; - top: -8px; + position: absolute; + width: 15px; + height: 15px; + right: 73px; + transform: rotate(45deg); + background: white; + border: 1px solid #dcdcdc; + top: -8px; } .show-all { @@ -119,19 +120,22 @@ .notification-stream { @include flexContainer(); + -webkit-align-content: stretch; - -ms-flex-line-pack: stretch; - align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; .sidebar { background: #424242; box-shadow: 1px 0 0 0 #5e5e5e; min-height: calc(100vh - 72px); + @include flexItem(1 1 25%); } .groups { padding: 0 36px; + @include flexItem(2 2 100%); } @@ -192,20 +196,24 @@ max-width: 775px; margin-bottom: 10px; padding: 15px 14px; + @include flexContainer(); .icon-wrapper { @include flexItem(0 0 auto); + margin-right: 14px; } .username { @include flexItem(0 0 25%); + float: left; font: normal 400 0.875em/1.36 var(--body-font-family); color: var(--primary-blue); margin-right: 5px; overflow: hidden; + @include ellipse; } @@ -253,7 +261,7 @@ padding: 10px 10px 10px 60px; position: relative; min-height: 60px;//40 + 10 + 10 - box-shadow: inset 0 -1px 0 0px #f0f0f0 !important; + box-shadow: inset 0 -1px 0 0 #f0f0f0 !important; line-height: 1; .icon-wrapper { @@ -270,7 +278,7 @@ display: inline; margin-right: 0.5em; color: var(--primary-blue); - weight: 600 + weight: 600; } time { @@ -312,7 +320,6 @@ } } - .notification-header { h3 { font: normal 300 2em/1.3em var(--body-font-family); diff --git a/src/main/resources/scss/debris/_nti-welcome.scss b/src/main/resources/scss/debris/_nti-welcome.scss index b51124795c..75a810f6b2 100644 --- a/src/main/resources/scss/debris/_nti-welcome.scss +++ b/src/main/resources/scss/debris/_nti-welcome.scss @@ -1,14 +1,14 @@ .guide-window, .tos-window, .iframe-window, .notifications-window, .confirm-window { @extend .nti-window; + background-color: var(--quad-grey); - box-shadow: 0 10px 40px rgba(0,0,0,0.61); + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.61); - iframe{ - &.help-iframe{ + iframe { + &.help-iframe { //top: 0 !important; width: 100%; - } //height: 100%; // removed top and height attrs, unnecessary if layout is fit or vbox @@ -17,6 +17,7 @@ .tos-header { //tos margin: 8px 24px; width: 675px !important; + h3 { font-size: 16px; font-weight: bold; @@ -24,28 +25,32 @@ margin: 0; padding: 0; } + .you-should { font-size: 12px; color: var(--tertiary-grey); } } - .nti-window-header{ + .nti-window-header { display: none; } - .nti-window-footer{ + + .nti-window-footer { background-color: #f3f3f3; padding: 10px; - .x-btn-primary-large{ - &.dismiss{ + .x-btn-primary-large { + &.dismiss { padding: 8px 30px; } } - .x-disabled{ //tos + + .x-disabled { //tos opacity: 0.5 !important; } - .yes-checkbox{ //tos + + .yes-checkbox { //tos margin-top: 6px; float: left; } @@ -76,7 +81,8 @@ .nti-window-footer { position: absolute; bottom: 0; - left: 0; right: 0; + left: 0; + right: 0; } } @@ -105,6 +111,7 @@ .x-container-footer { position: absolute; bottom: 0; - left: 0; right: 0; + left: 0; + right: 0; } } diff --git a/src/main/resources/scss/debris/_oobe-contacts.scss b/src/main/resources/scss/debris/_oobe-contacts.scss index 6fe09256c7..379ab351fa 100644 --- a/src/main/resources/scss/debris/_oobe-contacts.scss +++ b/src/main/resources/scss/debris/_oobe-contacts.scss @@ -1,11 +1,11 @@ .contacts-oobe-window { @extend .nti-window; + @include reset-window-border-radius(3px); - box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.3), 0 0 0 110px transparent; + box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.3), 0 0 0 110px transparent; background: var(--quad-grey); - .error { position: absolute; bottom: 45px; @@ -34,7 +34,6 @@ bottom: 0; left: 0; right: 0; - border: 0 solid #dcdcdc; border-top-width: 1px; text-align: right; @@ -66,7 +65,7 @@ line-height: 44px; font-weight: 500; font-style: italic; - color: #ffffff; + color: #fff; outline: 1px solid #69a92b; background: #75bc30; @@ -82,7 +81,6 @@ } } } - } .container-body { @@ -100,10 +98,11 @@ margin: 14px 24px 0 24px; padding: 0 24px 5px; border-bottom: 1px solid #ccc; + @include icon($search,$top:11px, $left:5px); input { - background: #ffffff; + background: #fff; padding: 5px; color: var(--secondary-grey); font-size: 18px; @@ -118,12 +117,17 @@ .oobe-contact-results { position: absolute; left: 24px; - right: 24px; bottom: 20px; height: 420px; + right: 24px; + bottom: 20px; + height: 420px; margin-right: -20px; //scrollbar buffer .empty { position: absolute; - top:0; bottom: 0; left:0; right:0; + top: 0; + bottom: 0; + left: 0; + right: 0; padding: 15% 2em; text-align: center; color: var(--secondary-grey); @@ -142,6 +146,7 @@ .item { $size: 140px; + float: left; width: $size; height: $size; @@ -161,18 +166,21 @@ .name { position: absolute; - bottom: 0; left: 0; right: 0; + bottom: 0; + left: 0; + right: 0; background: rgba(38, 38, 38, 0.94); color: #ababab; overflow: hidden; - @include ellipse(); + @include ellipse(); margin: 0; padding: 1px 2px; font: normal 400 12px/27px var(--body-font-family); $value: background 0.5s ease, padding-top 0.4s ease; + @include experimental(transition, $value); } @@ -180,7 +188,7 @@ @include icon($add_contact_check,$top:41px,$left:41px); .name { - background: rgba(63,179,79,0.85); + background: rgba(63, 179, 79, 0.85); padding-top: 112px; text-align: center; color: #fff; diff --git a/src/main/resources/scss/debris/_pointer.scss b/src/main/resources/scss/debris/_pointer.scss index 355491a5a0..e0b41ffc42 100644 --- a/src/main/resources/scss/debris/_pointer.scss +++ b/src/main/resources/scss/debris/_pointer.scss @@ -2,6 +2,7 @@ .x-component-nt.pointer { position: absolute; overflow: hidden; + @include sprite($rhp_flyout_nib_wht); &.grey { @include sprite($rhp_flyout_nib_gry); } diff --git a/src/main/resources/scss/debris/_profiles.scss b/src/main/resources/scss/debris/_profiles.scss index f9715141c1..7777628654 100644 --- a/src/main/resources/scss/debris/_profiles.scss +++ b/src/main/resources/scss/debris/_profiles.scss @@ -3,8 +3,10 @@ .avatar-pic { position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; @@ -24,8 +26,10 @@ .background-pic { position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; background-size: contain; background-color: #343434; } @@ -48,6 +52,7 @@ -webkit-font-smoothing: antialiased; max-width: 600px; overflow: hidden; + @include ellipse; } } @@ -72,6 +77,7 @@ &.edit { background-color: var(--primary-blue); + @include icon($notepad_active_white, $top: 8px, $left: 1.5em); } @@ -90,9 +96,9 @@ background-color: var(--secondary-green); } - &.leave, &.settings { - background: linear-gradient(to bottom, rgba(35,35,35,0.65) 0%,rgba(0,0,0,0.65) 100%); - } + &.leave, &.settings { + background: linear-gradient(to bottom, rgba(35, 35, 35, 0.65) 0%, rgba(0, 0, 0, 0.65) 100%); + } &.leave { padding: 0 1.5em; @@ -107,17 +113,20 @@ &.follow { background-color: var(--secondary-green); + @include icon($add_contact, $top: 9px, $left: 1.5em); } &.unfollow { background-color: var(--primary-red); + @include icon($rhp-delete-contact_hover, $top: 10px, $left: 1.5em); } &.presence { background-color: var(--primary-blue); padding-left: 50px;//1.5em + with of icon + padding + @include icon($chat_active, $top: 10px, $left: 1.5em); &.unavailable { @@ -185,13 +194,15 @@ width: 180px; height: 180px; float: left; - .fallback.initials{ + + .fallback.initials { font-size: 72px; font-weight: bold; } &.editing { cursor: pointer; + @include icon($edit-15-white, $left:auto, $top: 10px, $right: 10px); &::before { @@ -213,7 +224,6 @@ } } - .outline { background-color: rgba(35, 35, 35, 0.7); } @@ -225,10 +235,12 @@ .about { float: left; - .field{ + + .field { &.education { margin-bottom: 6px; } + &.position { margin-bottom: 4px; } @@ -275,7 +287,6 @@ } } - .username, .location, .homepage { display: inline-block; } @@ -295,15 +306,19 @@ .education, .location, .position { &::before { @include icon-font(); + margin-right: 0.5em; opacity: 0.7; width: 1.3em; display: inline-block; text-align: center; } + white-space: nowrap; + @include ellipse; - height: 1.4em; + + height: 1.4em; } .education::before { @@ -319,13 +334,13 @@ content: $icon-briefcase; } - .field { color: white; max-width: 580px; overflow: hidden; font-size: 0.875em; font-weight: 300; + @include ellipse; &.hidden, &.not-in-schema { @@ -345,13 +360,12 @@ margin-top: -3px; } } - } } -.group-header{ - .meta{ - .username::before{ +.group-header { + .meta { + .username::before { display: none; } } @@ -368,8 +382,8 @@ #profile { margin-top: -105px; width: 1024px; - padding:0; - overflow:{ + padding: 0; + overflow: { x: hidden; y: auto; //scroll; } @@ -379,7 +393,7 @@ } } -.x-component-resource-not-found{ +.x-component-resource-not-found { width: 700px; padding: 75px 0; margin: 0 auto; @@ -399,10 +413,11 @@ width: 1024px !important; margin-top: 40px; - .fixed-about{ + .fixed-about { display: none; position: absolute; - left: 0; bottom: 0; + left: 0; + bottom: 0; width: 180px; background-color: var(--quad-grey); border-right: 1px solid #f0f0f0; @@ -417,6 +432,7 @@ line-height: 40px; margin-left: 45px; overflow: hidden; + @include ellipse; } } @@ -435,25 +451,26 @@ &::after { content: ''; position: absolute; - bottom: 0px; + bottom: 0; height: 300px; left: 0; right: 0; - background-color: rgba(0,0,0,0.35); - box-shadow: 0 0 5px 0 rgba(0,0,0,0.35); + background-color: rgba(0, 0, 0, 0.35); + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.35); clip: rect(300px, auto, 310px, auto); border-radius: 350em / 2em; } - .avatar, .about, .controls{ + .avatar, .about, .controls { display: none; } - .fixed-about{ + .fixed-about { display: inline-block; .avatar { @include animate($name: fadeIn, $duration: 0.5s, $delay: 0s); + display: block; } @@ -466,6 +483,7 @@ $control: 45px; $avatar: 180px; + .avatar { width: $avatar; height: $avatar; @@ -481,6 +499,7 @@ &.editing { .avatar { cursor: pointer; + @include icon($edit-15-white, $left:auto, $top: 10px, $right: 10px); &::before { @@ -493,11 +512,10 @@ position: absolute; opacity: 0.9; border-radius: 5px; - } } - .name:not(.read-only){ + .name:not(.read-only) { cursor: pointer; color: var(--primary-grey); z-index: 1000; @@ -545,14 +563,14 @@ } } - - .about{ + .about { padding-top: 15px; padding-left: 200px; width: 750px; .field { overflow: hidden; + @include ellipse; color: var(--secondary-grey); @@ -565,12 +583,15 @@ color: var(--primary-grey); display: inline; overflow: hidden; + @include ellipse(); + margin: 0; font: normal 600 1.6em/35px var(--header-font-family); - @include presence-style-sudo($x:0px, $y:15px, $xSide:'right', $side: 'before'); - &.no-presence::before{ + @include presence-style-sudo($x:0, $y:15px, $xSide:'right', $side: 'before'); + + &.no-presence::before { display: none !important; } } @@ -578,7 +599,8 @@ .controls { position: absolute; - top: 55px; right: 20px; + top: 55px; + right: 20px; height: 40px; &.isMe { @@ -633,13 +655,15 @@ margin-right: 10px; width: 50px; height: 40px; + @include icon($ico_profile_contact, $top: 9px, $left: 10px); - &::before{ + &::before { content: ''; position: absolute; right: 2px; top: 18px; + @include arrow($pointFrom: top, $color: var(--tertiary-grey)); } } @@ -650,36 +674,35 @@ border-radius: 5px 0 0 5px; border-right-width: 0; display: none; - @include icon($mail, $top: 11px, $left: 13px) - } + + @include icon($mail, $top: 11px, $left: 13px); } .chat { width: 50px; height: 40px; //border-radius: 0 5px 5px 0; // border-left-width: 0; - @include icon($chat-32, $top: 9px, $left: 9px) - } + @include icon($chat-32, $top: 9px, $left: 9px); } .add-contact { width: 140px; background-color: var(--primary-green); color: white; padding-left: 50px; - @include icon($ico_profile_add_contact, $top: 12px, $left: 25px) - } - } + @include icon($ico_profile_add_contact, $top: 12px, $left: 25px); } + } $head: $avatar + $control; .nav { position: absolute; - left: 180px; right: 0; + left: 180px; + right: 0; bottom: 0; height: 41px; - .nav-outline{ + .nav-outline { position: relative; max-height: 100%; background-color: var(--quad-grey); @@ -700,7 +723,7 @@ background-color: var(--quad-grey); } - &:not(.disabled).x-item-selected{ + &:not(.disabled).x-item-selected { box-shadow: none; .label { @@ -710,13 +733,14 @@ &::before { position: absolute; font-weight: 700; - left: 0; right: 0; + left: 0; + right: 0; text-align: center; content: attr(data-text); } } - &.over, &:hover{ + &.over, &:hover { box-shadow: none; } } @@ -749,7 +773,6 @@ margin-top: 5px; } - .x-panel-profile,.x-panel-body-profile { overflow: visible; padding-bottom: 1em; @@ -768,23 +791,20 @@ cursor: pointer; } - - .loading-bar{ + .loading-bar { height: 40px; background: var(--panel-background); - .x-mask{ + .x-mask { opacity: 0; } } - .reply-event { position: relative; overflow: hidden; background: var(--panel-background); - .body { padding-bottom: 1em; } @@ -794,19 +814,20 @@ .transcriptsummary-event { position: relative; - &:hover{ + &:hover { &::after { content: ''; position: absolute; top: 38px; right: 20px; opacity: 1; + @include sprite($arrow-next); } } } - .transcriptsummary-event{ + .transcriptsummary-event { position: relative; background: var(--panel-background); border: 0 solid #f2f2f2; @@ -816,36 +837,40 @@ cursor: pointer; overflow: hidden; - - &:hover::after{ + &:hover::after { top: 26px; } - .icon{ + .icon { float: left; - width: 35px; height: 35px; + width: 35px; + height: 35px; border-radius: 5px; - background:{ + background: { position: center; repeat: no-repeat; size: contain; } } - .meta{ + + .meta { margin-left: 45px; - .title{ + + .title { font: normal 300 20px/30px var(--body-font-family); font-size: 17px !important; - .name{ + .name { color: var(--primary-blue); } } - .time{ + + .time { font: normal 400 12px/20px var(--body-font-family); color: var(--tertiary-grey); - span{ - &::after{ + + span { + &::after { color: var(--tertiary-grey); font: normal 500 12px/20px var(--body-font-family); text-decoration: none !important; @@ -855,6 +880,7 @@ padding: 0 0.5em; background: none; } + &:last-of-type::after { content: ''; display: none; @@ -866,7 +892,7 @@ .blogged-event, .joined-event, - .created-event{ + .created-event { background: var(--panel-background); border: 0 solid #f2f2f2; border-bottom-width: 1px; @@ -875,15 +901,16 @@ padding: 18px; margin-top: 5px; - &:not(.joined-event){ + &:not(.joined-event) { cursor: pointer; } - .avatar{ + .avatar { float: left; - width: 60px; height: 60px; + width: 60px; + height: 60px; border-radius: 5px; - background:{ + background: { position: center; repeat: no-repeat; size: cover; @@ -893,14 +920,17 @@ .meta { margin: 0 0 0 75px; color: var(--tertiary-grey); - .title{ + + .title { color: var(--primary-grey); font: normal 300 20px/30px var(--body-font-family); } + .counts { font: normal 400 12px/20px var(--body-font-family); - span{ - &::after{ + + span { + &::after { color: var(--tertiary-grey); font: normal 500 12px/20px var(--body-font-family); text-decoration: none !important; @@ -910,6 +940,7 @@ padding: 0 0.5em; background: none; } + &:last-of-type::after { content: ''; display: none; @@ -959,7 +990,6 @@ line-height: 1.3; font-size: 0.9em; } - } } @@ -967,21 +997,20 @@ background: none; } - .note-container { position: relative; background: var(--panel-background); - .meta{ - .subject{ - .whiteboard-container{ + .meta { + .subject { + .whiteboard-container { display: none !important; } } } } - &.reply-event .profile-activity-item .content-callout::before{ display: none; } + &.reply-event .profile-activity-item .content-callout::before { display: none; } .profile-activity-item { margin: 0; @@ -994,7 +1023,7 @@ border-bottom-width: 0; } - .whiteboard-container{ + .whiteboard-container { cursor: default; } @@ -1016,7 +1045,7 @@ border: 1px solid #eaeaea; background: var(--panel-background); - .missing-context-info{ + .missing-context-info { box-shadow: none; } } @@ -1024,7 +1053,7 @@ & + .note-replies, & + .note-replies + .respond, & + .topic-replies, - & + .topic-replies + .respond{ + & + .topic-replies + .respond { border-color: #f0f0f0; border-top-width: 0; top: -1px; @@ -1032,31 +1061,35 @@ } & + .topic-replies + .respond, - & + .note-replies + .respond{ + & + .note-replies + .respond { box-shadow: inset 0 1px 0 0 white; padding: 10px; + & > div { background: white; border: 1px solid #dcdcdc; color: #dcdcdc; font: italic 400 14px/37px var(--body-font-family); padding: 0 10px; + .editor { margin: 10px 0; - .footer{ + + .footer { background-color: transparent; - &::after{ display: none; } + &::after { display: none; } } - .main{ - .content{ - &.show-placeholder[data-placeholder]::after{ + + .main { + .content { + &.show-placeholder[data-placeholder]::after { left: 0; top: 2px; font-style: italic !important; } } - .error-tip[data-error-tip]::before{ + .error-tip[data-error-tip]::before { top: 32px !important; } } @@ -1064,27 +1097,28 @@ } } - & + .topic-replies .reply{ - .whiteboard-container{ + & + .topic-replies .reply { + .whiteboard-container { cursor: default; } } &.editor-active ~ .respond { .reply-options { display: none; } - .editor .action.share {display: none !important;} + .editor .action.share { display: none !important; } } .content-callout { min-height: 65px; - &:hover{ + &:hover { &::after { content: ''; position: absolute; top: 38px; right: 20px; opacity: 1; + @include sprite($arrow-next); } } @@ -1095,13 +1129,14 @@ bottom: -1px; left: 90px; z-index: 20; + @include sprite($up-border-arrow); } } .path, .content-callout { - padding: 16px 36px 0px 16px; + padding: 16px 36px 0 16px; border-bottom-width: 0; cursor: pointer; border-color: #eaeaea; @@ -1127,12 +1162,13 @@ .icon { float: left; - width: 54px; height: 66px; - - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), - -1px 1px 3px 0 rgba(0,0,0,0.35); + width: 54px; + height: 66px; + box-shadow: + inset 0 0 0 1px rgba(0, 0, 0, 0.3), + -1px 1px 3px 0 rgba(0, 0, 0, 0.35); - background:{ + background: { color: transparent; position: center; repeat: no-repeat; @@ -1150,6 +1186,7 @@ font: normal 600 10px/20px var(--body-font-family); color: var(--tertiary-grey) !important; overflow: hidden; + @include ellipse; span:not(:first-of-type)::before { @@ -1162,15 +1199,19 @@ max-height: 150px; } - .context{ + .context { overflow: hidden; position: relative; cursor: pointer; height: 64px; - canvas{ - position: absolute; display:none; - top: 0; left: 0; right: 0; bottom: 0; + canvas { + position: absolute; + display: none; + top: 0; + left: 0; + right: 0; + bottom: 0; } & > .text { @@ -1183,16 +1224,16 @@ a { color: var(--primary-blue); text-decoration: none; } img { max-width: 50% !important; } - p{ margin: 0; } + p { margin: 0; } } - &.video-context{ + &.video-context { height: 130px; - & > .text{ + & > .text { height: 170px; - img {max-width: 200px !important; float: left; } + img { max-width: 200px !important; float: left; } .video-title { display: inline-block; @@ -1204,8 +1245,10 @@ &::after { content: ' '; position: absolute; - left: 0; right: 0; - bottom: 0; height: 10px; + left: 0; + right: 0; + bottom: 0; + height: 10px; background-image: linear-gradient(to bottom, rgba(251, 251, 251, 0) 0% 100%); } } @@ -1218,23 +1261,26 @@ font: normal 700 10px/40px var(--body-font-family); min-height: 40px; overflow: hidden; + @include ellipse; span.path-part { - &::after{ + &::after { content: ' / '; } - &:last-of-type::after{ + + &:last-of-type::after { content: ''; } } } - &.deleted-reply{ - .item-spacer{ + &.deleted-reply { + .item-spacer { min-height: 0; } - .controls{ + + .controls { display: none; } } @@ -1247,24 +1293,25 @@ border: 1px solid #eaeaea; border-top-color: #f0f0f0; border-bottom-color: #ececec; - box-shadow: 0 1px 4px 0px rgba(30, 30, 30, 0.05); + box-shadow: 0 1px 4px 0 rgba(30, 30, 30, 0.05); padding: 0 20px 20px; @include like-and-favorite; - .favorite-spacer{display: none;} + .favorite-spacer { display: none; } + &.reply { - .favorite-spacer{display: block;} + .favorite-spacer { display: block; } } & > * { margin-top: 20px; } - .controls {margin: 0 -20px 0 0;} + .controls { margin: 0 -20px 0 0; } .avatar { float: left; width: 60px; height: 60px; border-radius: 5px; - background:{ + background: { color: transparent; position: center; repeat: no-repeat; @@ -1284,19 +1331,19 @@ text-overflow: ellipsis; overflow: hidden; - .name {font: inherit;} + .name { font: inherit; } - span{ - &::after{ + span { + &::after { color: var(--tertiary-grey); font: normal 500 12px/20px var(--body-font-family); - position: static; content: '\00B7'; display: inline; padding: 0 0.5em; background: none; } + &:last-of-type::after { content: ''; display: none; @@ -1311,33 +1358,32 @@ max-width: 570px; overflow: hidden; white-space: nowrap; + @include ellipse(); - &::after{ + &::after { content: ''; display: none; } } .subject:empty, - .subject.no-subject{ + .subject.no-subject { display: none; } - } + .body,.foot { clear: both; } - .body,.foot{ clear: both; } - - .body{ + .body { margin: 20px 0; font: normal 400 16px var(--body-font-family); color: var(--primary-grey); + @include text-pre-wrap; @include attachment(); } - .foot { clear: both; opacity: 1; @@ -1352,8 +1398,9 @@ opacity: 0.75; padding: 0 0 0 0.5em; margin: 0; - &:hover { opacity: 1; &::after{opacity: 0.75;} } - &::after{ + &:hover { opacity: 1; &::after { opacity: 0.75; } } + + &::after { font: normal 600 14px/20px var(--body-font-family); position: static; content: '\00B7'; @@ -1362,34 +1409,37 @@ padding: 0 0 0 0.5em; background: none; } + &:last-of-type::after { content: ''; display: none; } - &.last::after{ + + &.last::after { content: ''; display: none; } - &.flag.on{ + &.flag.on { color: var(--primary-red) !important; } } } } - .profile-activity-reply-item { position: relative; padding: 25px 0 0 20px; min-height: 100px; + @include like-and-favorite; .avatar { float: left; - width: 35px; height: 35px; + width: 35px; + height: 35px; border-radius: 3px; - background:{ + background: { color: transparent; position: center; repeat: no-repeat; @@ -1402,11 +1452,12 @@ } .meta { - .time{ + .time { color: var(--tertiary-grey); text-transform: uppercase; font: normal 600 10px var(--body-font-family); } + .name { font: normal 400 14px var(--body-font-family); color: var(--primary-blue); @@ -1426,23 +1477,25 @@ @include attachment(); } - &.deleted-reply{ - .controls{ + &.deleted-reply { + .controls { display: none; } - .respond{ + + .respond { display: none; } } &.editor-active { .reply-options { display: none; } + .editor { display: block; - .action.share {display: none !important;} + .action.share { display: none !important; } - .main{ - .error-tip[data-error-tip]::before{ + .main { + .error-tip[data-error-tip]::before { top: 32px !important; } } @@ -1462,15 +1515,16 @@ &.link { cursor: pointer; + &:hover { opacity: 1; - &::after{ + + &::after { opacity: 0.6; } } } - &::after { content: '-'; text-decoration: none !important; @@ -1478,6 +1532,7 @@ display: inline; padding: 0.5em; } + &.link::after { content: '\00B7'; } @@ -1494,43 +1549,47 @@ border: 1px solid #dcdcdc; margin-top: 10px; - .main{ + .main { padding-left: 13px; padding-right: 13px; - .error-tip[data-error-tip]::before{ + .error-tip[data-error-tip]::before { top: 32px !important; } } - .footer{ + .footer { background-color: transparent; - &::after{ display: none; } + &::after { display: none; } } } } } - .profile-activity-item,.profile-activity-reply-item{ + .profile-activity-item,.profile-activity-reply-item { .body { @include note-body; } } .note-container.child { - & > .reply.first{ + & > .reply.first { &::after { content: ' '; position: absolute; overflow: hidden; - top: 30px; left: 5px; + top: 30px; + left: 5px; + @include sprite($reply_arrow); } } + .note-container.child > .reply { padding-left: 60px; - &.first{ - &::after{ + + &.first { + &::after { left: 45px; } } @@ -1548,6 +1607,7 @@ color: #eaeaea; width: 0 0 1px 0; } + font: normal 500 14px/38px var(--body-font-family); color: var(--tertiary-grey); } @@ -1563,13 +1623,14 @@ .icon { float: left; - width: 54px; height: 66px; + width: 54px; + height: 66px; cursor: pointer; + box-shadow: + inset 0 0 0 1px rgba(0, 0, 0, 0.3), + -1px 1px 3px 0 rgba(0, 0, 0, 0.35); - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3), - -1px 1px 3px 0 rgba(0,0,0,0.35); - - background:{ + background: { color: transparent; position: center; repeat: no-repeat; @@ -1590,6 +1651,7 @@ &:first-of-type { margin-top: auto; border-top-width: 0; + .label { line-height: 20px; } @@ -1597,7 +1659,9 @@ .label { overflow: hidden; + @include ellipse; + color: var(--tertiary-grey); font: normal 600 10px/30px var(--body-font-family); text-transform: uppercase; @@ -1609,11 +1673,13 @@ position: relative; margin: 0 0 20px 0; left: -3px; + span { // color: #076da7; // background-color: #e1f4fe; word-break: break-all; font: normal 400 14px/16px var(--body-font-family); + & > span { position: relative; display: inline-block; @@ -1637,6 +1703,7 @@ } } } + @include highlight-colors($selector:'span > span',$nibselector: '& > span:last-child::after' ); } } @@ -1646,13 +1713,14 @@ } .meta-editor, -.name-editor{ +.name-editor { overflow: visible; border: 1px solid var(--border-grey); background: #fff; .input-wrap, .textbox-base { max-width: 854px; + input { border-radius: 0; border-width: 0; @@ -1664,20 +1732,21 @@ padding-right: 25px; //height: 25px; } + .clear { top: 5px; } } - .controls{ + .controls { position: absolute; overflow: hidden; - right:-126px; - top:-1px; + right: -126px; + top: -1px; bottom: -1px; .save, - .cancel{ + .cancel { padding: 0 8px; height: 100%; line-height: 25px; @@ -1702,43 +1771,43 @@ border-right-width: 0; margin-left: -1px; - .input-wrap, .textbox-base{ - input{ + .input-wrap, .textbox-base { + input { font: normal 600 1.6em/35px var(--header-font-family); height: 40px; padding-left: 20px; padding-right: 30px; } + .clear { top: 12px; right: 24px; } } - .controls{ + .controls { .save, - .cancel{ + .cancel { line-height: 40px; } } } - .profile-about, -.profile-head{ +.profile-head { position: relative; .meta { font: normal 500 14px/24px var(--body-font-family); color: var(--secondary-grey); - .placeholder{ + .placeholder { color: var(--tertiary-grey) !important; font-style: italic !important; } - .separator{ - position:relative; + .separator { + position: relative; //z-index: -2; } @@ -1773,7 +1842,7 @@ } } - .email-verification{ + .email-verification { display: inline-block; width: 150px; position: relative; @@ -1796,34 +1865,34 @@ .info { width: 40px; height: 30px; + @include icon($info_active, $top: 3px, $left: 0); } .x-mask { opacity: 0.6; - background: rgba(0,0,0, 0.9); + background: rgba(0, 0, 0, 0.9); } - .x-mask-msg-text{ - color: #ffffff; + .x-mask-msg-text { + color: #fff; } } - .editable[contenteditable=true] + .email-verification{ + .editable[contenteditable=true] + .email-verification { display: none; } - .error-msg{ + .error-msg { margin-top: 4px; color: red; font-style: italic; font-weight: 300; - &::before{ - content: '*' + + &::before { + content: '*'; } } - - } .label { @@ -1894,6 +1963,7 @@ padding: 0 8px; box-shadow: 0 1px 0 0 #e3e3e3; overflow: hidden; + @include flexContainer(); &.empty { @@ -1904,6 +1974,7 @@ .current { box-shadow: 1px 0 0 0 #e3e3e3; + @include flexItem(); } @@ -1912,7 +1983,7 @@ } } - .completed,.current{ + .completed,.current { float: left; padding: 25px 0 0; @@ -1968,11 +2039,11 @@ } .completed,.current,.achievements { - .header-container { height: 14px; padding-left: 8px; width: 100%; + @include flexContainer(); } @@ -1982,6 +2053,7 @@ text-transform: uppercase; float: left; clear: both; + @include flexItem(1 1 auto); } @@ -1991,6 +2063,7 @@ text-transform: uppercase; float: right; margin: 0 10px; + @include flexItem(0 0 auto); } @@ -2021,19 +2094,21 @@ background-size: contain; } - .title { color: var(--primary-grey); padding: 0 3px; max-height: 20px; position: absolute; - bottom: 0px; - left: 0px; right: 0px; + bottom: 0; + left: 0; + right: 0; font: normal 600 0.9em/20px var(--body-font-family); text-align: center; - background-color: rgba(255,255,255,0.95); + background-color: rgba(255, 255, 255, 0.95); overflow: hidden; + @include ellipsis; + transition: all 0.5s ease; } @@ -2086,7 +2161,6 @@ overflow: visible; } } - } &.read-only { @@ -2168,6 +2242,7 @@ &.about { box-shadow: inset 5px 0 0 0 #fc9f77; + .editable { &[contenteditable="true"] { max-height: 3.6em; @@ -2179,7 +2254,6 @@ box-shadow: inset 5px 0 0 0 #fdcf61; } - &.positions { box-shadow: inset 5px 0 0 0 #7ecfc8; } @@ -2264,11 +2338,11 @@ position: relative; transition: width 0.3s, padding 0.3s; - &:not(.new-field){ + &:not(.new-field) { @include ellipse; } - &:nth-of-type(3n){ + &:nth-of-type(3n) { margin-right: 0; } @@ -2312,7 +2386,6 @@ } } - .groupset { font-size: 0.875em; color: var(--primary-grey); @@ -2332,7 +2405,8 @@ position: absolute; height: 10px; width: 10px; - top: 0; right: -20px; + top: 0; + right: -20px; cursor: pointer; @include icon($message_box_close, $position: absolute); @@ -2358,21 +2432,21 @@ } } - .degree, .field.title{ - + .degree, .field.title { &[contenteditable="true"] { min-width: 500px; max-width: 500px; - &:not(:empty){ - margin-right: 0em; + + &:not(:empty) { + margin-right: 0; } } - &:not(:empty){ + &:not(:empty) { margin-right: 1em; &::after { - content: ',' + content: ','; } } } @@ -2402,7 +2476,7 @@ &:hover + .entry { background-color: var(--quad-grey); - box-shadow: 20px 0 0 6px var(--quad-grey), -10px 0 0 6px var(--quad-grey); + box-shadow: 20px 0 0 6px var(--quad-grey), -10px 0 0 6px var(--quad-grey); } } } @@ -2430,25 +2504,27 @@ background: white; padding: 20px; - &.admin .entry .avatar{ + &.admin .entry .avatar { @include icon($admin_badge, $top: auto, $left: auto, $side: after); - &::after{ + + &::after { z-index: 10; bottom: 2px; right: 2px; } } - .entry.admin{ + .entry.admin { @include icon($admin_badge, $top: auto, $left: auto, $side: after); - &::after{ + + &::after { z-index: 10; - bottom: 0px; - right: 0px; + bottom: 0; + right: 0; } } - .entry[data-route]:not([data-route=""]){ + .entry[data-route]:not([data-route=""]) { cursor: pointer; } @@ -2458,14 +2534,15 @@ &.condensed { .header { - color: var(--secondary-grey); + .title { font-size: 18px; font-weight: normal; display: inline-block; padding-right: 20px; } + .see-all { font-size: 10px; font-weight: bold; @@ -2477,7 +2554,7 @@ } } - .entries{ + .entries { padding-top: 5px; line-height: 0; } @@ -2487,11 +2564,12 @@ width: 38px; height: 38px; margin: 2px; - .name{ + + .name { display: none; } - .avatar-container{ + .avatar-container { width: 38px; height: 38px; } @@ -2535,6 +2613,7 @@ max-width: 240px; white-space: nowrap; overflow: hidden; + @include ellipse(); } } @@ -2555,6 +2634,7 @@ .entry { width: 238px; } + .entry:nth-of-type(4n) { margin-right: 0; } @@ -2563,17 +2643,21 @@ &.communities { .entry { vertical-align: top; + .avatar { width: 100%; } + .name { width: 100%; margin-left: 9px; } } + &.four-column { .entry { height: 204px; + .avatar { height: 131px; } @@ -2610,7 +2694,9 @@ max-width: 160px; white-space: nowrap; overflow: hidden; + @include ellipse; + margin: 5px 0; } } @@ -2669,7 +2755,7 @@ .avatar-pic { background-size: cover; background-position: center center; - border-radius: 5px 5px 0 0 ; + border-radius: 5px 5px 0 0; } } @@ -2689,7 +2775,6 @@ } } - .community-topics { border-top: 20px solid black; @@ -2705,13 +2790,12 @@ font-size: 0.875em; cursor: pointer; - &.active { background-color: var(--primary-blue); } &:not(:last-of-type) { - box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(255, 255,255, 0.15) + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.15); } span { @@ -2730,7 +2814,6 @@ } } - .memberships.community { background: none; padding: 16px; @@ -2841,20 +2924,19 @@ } } - -.badge-window{ +.badge-window { .export { .x-btn-button { width: 30px; height: 30px; padding: 5px; - .x-btn-inner{ + .x-btn-inner { display: none; } - .x-btn-icon-el{ - &.export-icon{ + .x-btn-icon-el { + &.export-icon { @include icon($download_hover, $top: 0, $left: 0); &:active, &:hover { @@ -2891,7 +2973,6 @@ font-weight: 600; } - .group { margin-bottom: 10px; @@ -2904,7 +2985,6 @@ margin: 0 10px; } - .single-select { input[type="radio"] { display: none; @@ -2924,9 +3004,9 @@ cursor: pointer; &:hover { - background-color: #F0F0F0; + background-color: #f0f0f0; color: var(--primary-grey); - box-shadow: inset 4px 0 0 0 #CFCFCF; + box-shadow: inset 4px 0 0 0 #cfcfcf; } } } diff --git a/src/main/resources/scss/debris/_prompt.scss b/src/main/resources/scss/debris/_prompt.scss index 0c5d3feaba..4440aeeab6 100644 --- a/src/main/resources/scss/debris/_prompt.scss +++ b/src/main/resources/scss/debris/_prompt.scss @@ -1,17 +1,19 @@ .prompt-container { position: absolute; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; z-index: 1; @include flexContainer(); @include experimental(align-items, center); + justify-content: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; - &.covered { .body-container, .prompt-header, .prompt-footer { opacity: 0.05; @@ -36,6 +38,7 @@ .prompt { @include flexItem(); + background: white; position: relative; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3); @@ -65,6 +68,7 @@ background: white; border-bottom: 1px solid #d9d9d9; position: relative; + @include flexContainer(); @include experimental(align-items, center); @@ -96,12 +100,12 @@ cursor: pointer; @include flexItem(0 0 150px); - @include icon($arrow-left, $top: 9px); } .title { text-align: center; + @include flexItem(1 1 auto); .main { @@ -123,6 +127,7 @@ .close { text-align: right; padding: 10px 0; + @include flexItem(0 0 150px); .icon { @@ -142,7 +147,8 @@ .msg-container { position: absolute; top: 100%; - left: 0; right: 0; + left: 0; + right: 0; font-size: 0.875rem; line-height: 1.5rem; color: white; @@ -172,7 +178,6 @@ background: white; border-top: 1px solid #d9d9d9; - &.hidden { display: none; } @@ -198,7 +203,7 @@ color: white; &:focus { - background-color: #35A0DD; + background-color: #35a0dd; } &.disabled { diff --git a/src/main/resources/scss/debris/_random-gravatar-picker.scss b/src/main/resources/scss/debris/_random-gravatar-picker.scss index c8d4e82ff3..81500849c4 100644 --- a/src/main/resources/scss/debris/_random-gravatar-picker.scss +++ b/src/main/resources/scss/debris/_random-gravatar-picker.scss @@ -1,5 +1,4 @@ - .random-gravatar-picker { white-space: normal !important; margin-bottom: 14px; @@ -15,7 +14,7 @@ border: 1px solid var(--tertiary-grey); vertical-align: top; - img{ + img { height: 100%; width: 100%; } @@ -29,7 +28,7 @@ width: 52px; &::before, - &::after{ + &::after { content: ' '; position: absolute; z-index: 1999; @@ -43,13 +42,14 @@ &.mini { padding: 10px 0 0 10px !important; + .item-wrap { margin: 4px 10px 4px 0; width: 32px; height: 32px; box-shadow: none; - &.x-item-selected{ + &.x-item-selected { margin: 0 6px 0 -4px; height: 40px; width: 40px; diff --git a/src/main/resources/scss/debris/_reader.scss b/src/main/resources/scss/debris/_reader.scss index b6291633ef..df00b76bf6 100644 --- a/src/main/resources/scss/debris/_reader.scss +++ b/src/main/resources/scss/debris/_reader.scss @@ -2,15 +2,14 @@ .navigation-placeholder { float: right; margin: 0; - width: 258px; + width: 258px; } .navigation-view.floating { bottom: 0; } - - .center{ + .center { float: left; width: 766px; background-color: white; @@ -21,7 +20,7 @@ .x-reader-pane { max-height: 100%; overflow-y: auto; - clear:both; + clear: both; margin-top: 61px; } } diff --git a/src/main/resources/scss/debris/_sidebar.scss b/src/main/resources/scss/debris/_sidebar.scss index 86eb9c06d8..245fa05fa6 100644 --- a/src/main/resources/scss/debris/_sidebar.scss +++ b/src/main/resources/scss/debris/_sidebar.scss @@ -5,11 +5,12 @@ text-align: center !important; } -.rhp-no-contacts{ +.rhp-no-contacts { padding: 15px 0 0 100px; height: 100px; font: italic 300 14px/18px var(--body-font-family) !important; color: var(--tertiary-grey) !important; + @include icon($add_contacts_card); * { position: relative; z-index: 1; } @@ -31,13 +32,14 @@ } } - - -.x-panel-sidebar{ +.x-panel-sidebar { &::before { content: ''; position: absolute; - top: 57px; bottom: 0; left: 0; right: 0; + top: 57px; + bottom: 0; + left: 0; + right: 0; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.45); } @@ -50,15 +52,15 @@ &.undocked { border-radius: 5px 5px 0 0; - .x-panel-body-sidebar{ + + .x-panel-body-sidebar { border-radius: 5px 5px 0 0; } } - - .x-panel-body-sidebar{ + .x-panel-body-sidebar { background: #fafafa; - background: rgba(250,250,250,0.97); + background: rgba(250, 250, 250, 0.97); } .x-mask-msg { @@ -68,32 +70,29 @@ } } - .sidebar-tab-bar-sidebar { .x-panel-sidebar.down & { background: #f3f3f3; box-shadow: inset 0 -1px 0 0 #f7f7f7; } + background: #ebebec; padding: 0 0 0 10px; - border: 1px solid #dddddd; + border: 1px solid #ddd; border-left-width: 0; border-right-width: 0; border-bottom-width: 1px !important; - &::after { - content: ''; - display: block; - position: absolute; - - bottom: -1px; - left: 0; - right: 0; - height: 10px; - overflow: hidden; - - box-shadow: 0 3px 3px -3px rgba(0,0,0,0.2); + content: ''; + display: block; + position: absolute; + bottom: -1px; + left: 0; + right: 0; + height: 10px; + overflow: hidden; + box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.2); } .x-tab { @@ -120,13 +119,11 @@ width: 15px; } - .badge.red { position: absolute; border-radius: 10em; background: var(--primary-red); color: #fff; - top: 6px; right: auto; left: 55%; @@ -136,9 +133,9 @@ padding: 0.3em 0.5em; border: 2px solid #ebebec; width: auto; - text-indent: 0em; + text-indent: 0; - &:empty {display: none;} + &:empty { display: none; } } .x-tab-button { @@ -156,18 +153,37 @@ span.x-tab-icon-el { top: 18px; - &.contacts { left: 7px; @include sprite($rhp-contacts); } - &.activity { left: 9px; @include sprite($rhp-activity); } - &.inbox { left: 14px; top: 16px; @include sprite($rhp-notification); } + &.contacts { + left: 7px; - &.history { left: 10px; @include sprite($rhp-history); } - } + @include sprite($rhp-contacts); + } + &.activity { + left: 9px; - .x-tab-top-active{ + @include sprite($rhp-activity); + } + + &.inbox { + left: 14px; + top: 16px; + + @include sprite($rhp-notification); + } + + &.history { + left: 10px; + + @include sprite($rhp-history); + } + } + + .x-tab-top-active { background: none; - button span.x-tab-inner{ color: #b1b1b1; } - span.x-tab-icon-el{ + button span.x-tab-inner { color: #b1b1b1; } + + span.x-tab-icon-el { &.contacts { @include sprite($rhp-contacts_active); } &.activity { @include sprite($rhp-activity_active); } &.inbox { @include sprite($rhp-notification_active); } diff --git a/src/main/resources/scss/debris/_slidedeck.scss b/src/main/resources/scss/debris/_slidedeck.scss index 4a97589e03..2ed7d883ac 100644 --- a/src/main/resources/scss/debris/_slidedeck.scss +++ b/src/main/resources/scss/debris/_slidedeck.scss @@ -18,11 +18,13 @@ $active-text-color: rgba(255, 255, 255, 1); border-radius: 3px; border: 1px solid black; color: var(--tertiary-grey); - background-image: linear-gradient(to bottom, - $slidedeck-exit-button-gradient-top 0%, - $slidedeck-exit-button-gradient-bottom 100%); - - box-shadow: inset 0 1px 0px 0px rgba(255, 255, 255, 0.13), 0 1px 0px 0px rgba(255, 255, 255, 0.12); + background-image: + linear-gradient( + to bottom, + $slidedeck-exit-button-gradient-top 0%, + $slidedeck-exit-button-gradient-bottom 100% + ); + box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.13), 0 1px 0 0 rgba(255, 255, 255, 0.12); &:focus, &:hover, @@ -30,37 +32,43 @@ $active-text-color: rgba(255, 255, 255, 1); } &:active:not(.disabled) { - background-image: linear-gradient(to bottom, - $slidedeck-exit-button-gradient-bottom 0%, - $slidedeck-exit-button-gradient-top 100%); + background-image: + linear-gradient( + to bottom, + $slidedeck-exit-button-gradient-bottom 0%, + $slidedeck-exit-button-gradient-top 100% + ); } } @mixin slide-comment-editor { .editor { - background: #222222; + background: #222; margin: 10px; + .main { padding-left: 13px; padding-right: 13px; background-color: $slidedeck-controls-background; border: 1px solid #323232; - .aux{ + .aux { border-color: #323232; background: #161616; - .publish{ + + .publish { background-color: #161616; - &::after{ + + &::after { @include sprite($btn_toggle_private_dark); } - &.on::after{ + &.on::after { @include sprite($btn_toggle_public_dark); } } - .token{ + .token { border-bottom-color: #3a9bd3; border-top-color: #3a9bd3; border-right-color: #3a9bd3; @@ -69,87 +77,98 @@ $active-text-color: rgba(255, 255, 255, 1); } } - .token-input-wrap span.token-input-sizer{ + .token-input-wrap span.token-input-sizer { color: var(--tertiary-grey); } - input{ + input { color: var(--tertiary-grey); background-color: #161616; } } + .toolbar { background-color: $slidedeck-controls-background; border-bottom: 1px solid #2b2b2b; } + .content, .x-mask, .x-mask-message { background-color: $slidedeck-controls-background; - color: #999999 + color: #999; } - .content{ - &.show-placeholder[data-placeholder]::after{ + + .content { + &.show-placeholder[data-placeholder]::after { left: 1px; font-style: italic !important; } } + .footer { background: rgba(44, 44, 44, 0.98); border-top: 1px solid #323232; - .left{ - .action.text-controls, .action.object-controls{ - border: 0px solid #1f1f1f; + .left { + .action.text-controls, .action.object-controls { + border: 0 solid #1f1f1f; - &.selected{ + &.selected { margin: 5px 0 0 4px; border-width: 1px; background-color: #393939; - &::after{ @include sprite($font_styles_default); } + &::after { @include sprite($font_styles_default); } } - .popover{ + + .popover { background-color: #2b2b2b; - box-shadow: 0 1px 3px rgba(0,0,0,.34); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.34); border: 1px solid #141414; - &::after{ + &::after { @include sprite($font_style_pointer_dark); } - .control{ - + .control { &.bold { - &::after{ @include sprite($bold-dark); } - &.selected::after{ @include sprite($bold-dark_active); } + &::after { @include sprite($bold-dark); } + &.selected::after { @include sprite($bold-dark_active); } } + &.italic { - &::after{ @include sprite($italic-dark); } - &.selected::after{ @include sprite($italic-dark_active); } + &::after { @include sprite($italic-dark); } + &.selected::after { @include sprite($italic-dark_active); } } + &.underline { - &::after{ @include sprite($underline-dark); } - &.selected::after{ @include sprite($underline-dark_active); } + &::after { @include sprite($underline-dark); } + &.selected::after { @include sprite($underline-dark_active); } } + &.whiteboard { @include icon($editor-insert-image_hover, $top:10px); - &:hover::after{ + + &:hover::after { @include sprite($editor-insert-image); } } &.video { @include icon($editor-insert-video_hover, $top:9px); - &:hover::after{ + + &:hover::after { @include sprite($editor-insert-video); } } } } } - .action.object-controls{ + + .action.object-controls { @include icon($editor-attach, $top:10px, $left:10px); - &.selected{ - &::after{ + + &.selected { + &::after { @include sprite($editor-attach); } } @@ -160,9 +179,7 @@ $active-text-color: rgba(255, 255, 255, 1); } .x-container-slidedeck { - .x-container-slidedeck-controls { - box-shadow: 0 0 10px 0 black; background: $slidedeck-controls-background; @@ -211,7 +228,9 @@ $active-text-color: rgba(255, 255, 255, 1); height: 34px; float: right; position: relative; + @include slide-button; + &::after { content: ' '; overflow: hidden; @@ -220,9 +239,10 @@ $active-text-color: rgba(255, 255, 255, 1); left: 12px; background-color: transparent; background-repeat: no-repeat; - @include sprite($arrow-previous); + @include sprite($arrow-previous); } + &::before { content: ' '; overflow: hidden; @@ -232,18 +252,23 @@ $active-text-color: rgba(255, 255, 255, 1); z-index: 3; background-color: transparent; background-repeat: no-repeat; + @include sprite($dark-button-divider); } } + .prev { border-radius: 3px 0 0 3px; border-right-width: 0; + &::after { @include sprite($arrow-previous); } + &:hover::after { @include sprite($arrow-previous_hover); } + &.disabled { &, &:hover { &::after { @@ -252,15 +277,19 @@ $active-text-color: rgba(255, 255, 255, 1); } } } + .next { border-radius: 0 3px 3px 0; border-left-width: 0; + &::after { @include sprite($arrow-next); } + &:hover::after { @include sprite($arrow-next_hover); } + &.disabled { &, &:hover { &::after { @@ -293,6 +322,7 @@ $active-text-color: rgba(255, 255, 255, 1); left: 20px; background-color: transparent; background-repeat: no-repeat; + @include sprite($checkbox-dark); } @@ -311,6 +341,7 @@ $active-text-color: rgba(255, 255, 255, 1); &::after { @include sprite($checkbox-dark-checked); } + &:hover::after { @include sprite($checkbox-dark-checked_hover); } @@ -321,10 +352,11 @@ $active-text-color: rgba(255, 255, 255, 1); @include hardware-accelerate(); @include scrollbar($track: $slidedeck-controls-background, $nib: $slidedeck-primary-text-color); @include fixIEScrollbarGulf(); - overflow:{ + overflow: { x: hidden; - y: auto; //scroll; + y: auto; //scroll; } + padding: 14px 0; .item-wrap { @@ -339,6 +371,7 @@ $active-text-color: rgba(255, 255, 255, 1); .content-wrap { position: relative; overflow: hidden; + img { float: left; width: 128px; @@ -346,10 +379,12 @@ $active-text-color: rgba(255, 255, 255, 1); max-height: 96px; border: 3px solid $slidedeck-primary-text-color; } + .title { margin: 0 0 0 135px; font-size: 12px; font-weight: 400; + h3 { font-size: 14px; font-weight: 600; @@ -368,8 +403,10 @@ $active-text-color: rgba(255, 255, 255, 1); &.over { opacity: 1; } + &.x-item-selected { opacity: 1; + .content-wrap { background: $slidedeck-selected-background; } @@ -381,10 +418,11 @@ $active-text-color: rgba(255, 255, 255, 1); .x-container-slide { @include scrollbar($track: $slidedeck-controls-background, $nib: $slidedeck-primary-text-color); @include fixIEScrollbarGulf(); - overflow:{ + overflow: { x: hidden; y: auto; //scroll; } + padding: 95px 95px 0 95px; .image-wrap { @@ -405,10 +443,12 @@ $active-text-color: rgba(255, 255, 255, 1); bottom: 0; background: rgba(0, 0, 0, 0); } + .left { left: 0; right: 50%; } + .right { left: 50%; right: 0; @@ -434,42 +474,53 @@ $active-text-color: rgba(255, 255, 255, 1); .next { @include animate(fadeInRight, 0.5s); - box-shadow: inset -1px 0px 1px 0px rgba(255, 255, 255, 0.03); + box-shadow: inset -1px 0 1px 0 rgba(255, 255, 255, 0.03); right: 0; border-radius: 90px 0 0 90px; + &::after { right: 7px; + @include sprite($arrow-next); } + &:hover::after { @include sprite($arrow-next_hover); } + &.disabled { &, &:hover { cursor: default; + &::after { @include sprite($arrow-next_disabled); } } } } + .prev { @include animate(fadeInLeft, 0.5s); - box-shadow: inset 1px 0px 1px 0px rgba(255, 255, 255, 0.03); + box-shadow: inset 1px 0 1px 0 rgba(255, 255, 255, 0.03); left: 0; border-radius: 0 90px 90px 0; + &::after { left: 7px; + @include sprite($arrow-previous); } + &:hover::after { @include sprite($arrow-previous_hover); } + &.disabled { &, &:hover { cursor: default; + &::after { @include sprite($arrow-previous_disabled); } @@ -529,8 +580,10 @@ $active-text-color: rgba(255, 255, 255, 1); border: 1px solid #323232; $value: margin-right 0.5s; + transition: $value; } + .count { padding-right: 48px; float: right; @@ -539,6 +592,7 @@ $active-text-color: rgba(255, 255, 255, 1); opacity: 0; visibility: hidden; $value: opacity 0.5s; + transition: $value; transition-delay: 0.3s; } @@ -547,6 +601,7 @@ $active-text-color: rgba(255, 255, 255, 1); .count { visibility: visible; opacity: 1; + & + .input { margin-right: 200px; } @@ -586,6 +641,7 @@ $active-text-color: rgba(255, 255, 255, 1); .comment-link { display: inline; } + .reply-options { display: none; } @@ -599,12 +655,12 @@ $active-text-color: rgba(255, 255, 255, 1); } .note { - &, &.hover, &.editor-active { border-color: #1a1a1a; box-shadow: inset 0 1px 0 0 #3a3a3a; } - background: #222222; + + background: #222; &::after { opacity: 0.2; @@ -615,22 +671,25 @@ $active-text-color: rgba(255, 255, 255, 1); color: #3a9bd3; font: normal 14px var(--body-font-family); } + .controls { .like, .favorite { opacity: 0.2; + &:hover, &.on { opacity: 1; } } } + .shared-to { color: #656565; font: normal 12px/25px var(--body-font-family); margin-left: 5px; } - .title{ - .whiteboard-container{ + .title { + .whiteboard-container { display: none !important; } } @@ -653,10 +712,10 @@ $active-text-color: rgba(255, 255, 255, 1); @include slide-comment-editor; - .editor{ - .main{ - .content{ - &.show-placeholder[data-placeholder]::after{ + .editor { + .main { + .content { + &.show-placeholder[data-placeholder]::after { top: 5px; left: 0; font-style: italic !important; @@ -683,15 +742,18 @@ $active-text-color: rgba(255, 255, 255, 1); margin-left: 70px; margin-top: 0; - .title{ + .title { font-size: 24px; color: var(--primary-blue); } - .name{ + + .name { color: var(--secondary-grey); } + .controls { top: 1px; + .favorite-spacer { display: none; } @@ -702,6 +764,7 @@ $active-text-color: rgba(255, 255, 255, 1); margin: 0; padding: 10px 0; } + .respond { .time { color: #9c9c9c; @@ -716,6 +779,7 @@ $active-text-color: rgba(255, 255, 255, 1); & > .note-container > .first { box-shadow: inset 0 1px 0 0 #1a1a1a; + .first { box-shadow: inset 0 1px 0 0 #3a3a3a; } @@ -739,127 +803,133 @@ $active-text-color: rgba(255, 255, 255, 1); //move this to the left to let the profile icon not overlap it. top: 15px; right: 85px; - font-family: var(--body-font-family); font-size: 14px; font-weight: 500; + @include slide-button; } - .identity{ + .identity { right: 5px !important; } } - .x-container-transcript{ + .x-container-transcript { background-color: #282828 !important; } - .x-component-video-title{ - & > div{ + .x-component-video-title { + & > div { position: relative; } + padding-left: 108px; width: 860px; color: $inactive-text-color; font: 14px normal var(--body-font-family); - .control-container{ + .control-container { right: -20px !important; display: none; } } - .x-mask{ - background: rgba(0,0,0,0.65) !important; + .x-mask { + background: rgba(0, 0, 0, 0.65) !important; } - .x-mask-msg{ + .x-mask-msg { left: 50% !important; top: 40% !important; - .x-mask-msg-text{ + .x-mask-msg-text { color: white !important; } } } -.content-video-navigation{ +.content-video-navigation { position: relative; - .navigation{ + .navigation { position: absolute; width: 40px; bottom: 40px; top: 40px; left: 0; - &.prev{ - .nav-container{ + &.prev { + .nav-container { left: 0; - &:hover{ - .arrow{ - &::after{ + + &:hover { + .arrow { + &::after { @include sprite($video-back-arrow_hover); } } } - .arrow{ - &::after{ + + .arrow { + &::after { @include sprite($video-back-arrow); } } } } - &.next{ + &.next { right: 0; left: auto; - .nav-container{ - right: 0px; - &:hover{ - .arrow{ - &::after{ + .nav-container { + right: 0; + + &:hover { + .arrow { + &::after { @include sprite($video-next-arrow_hover); } } } - .arrow{ + + .arrow { float: right; - &::after{ + &::after { left: auto; right: 10px; + @include sprite($video-next-arrow); } } - .content{ + .content { float: left; - .thumbnail{ + .thumbnail { float: left; } - .about{ + .about { float: right; } } } } - &:hover{ - .nav-container{ + &:hover { + .nav-container { display: block; - .arrow{ + .arrow { display: block; } } } - .nav-container{ + .nav-container { display: none; position: absolute; top: 50%; @@ -867,25 +937,25 @@ $active-text-color: rgba(255, 255, 255, 1); height: 70px; width: 275px; - &:hover{ - .content{ + &:hover { + .content { display: block; } - .arrow{ + .arrow { display: block; - background-color: rgb(0,0,0); + background-color: rgb(0, 0, 0); } } - .arrow{ + .arrow { height: 70px; width: 40px; - background-color: rgba(0,0,0,0.5); + background-color: rgba(0, 0, 0, 0.5); cursor: pointer; float: left; - &::after{ + &::after { content: ''; position: absolute; top: 17px; @@ -893,15 +963,15 @@ $active-text-color: rgba(255, 255, 255, 1); } } - .content{ + .content { display: none; width: 235px; height: 70px; - background-color: rgb(0,0,0); + background-color: rgb(0, 0, 0); float: right; cursor: pointer; - .thumbnail{ + .thumbnail { width: 70px; height: 70px; float: right; @@ -909,35 +979,35 @@ $active-text-color: rgba(255, 255, 255, 1); background-size: cover; } - .about{ + .about { width: 165px; float: left; padding: 0 5px 0 5px; - .pre-title{ + .pre-title { font: 13px normal var(--body-font-family); margin-top: 4px; width: 140px; height: 20px; - color: rgba(255,255,255,0.7); + color: rgba(255, 255, 255, 0.7); overflow: hidden; + @include ellipsis; } - .title{ + .title { font: 13px normal var(--body-font-family); line-height: 20px; overflow: hidden; width: 140px; height: 20px; color: white; + @include ellipsis; } } } - } - } } @@ -963,7 +1033,7 @@ body.media-viewer-closing { bottom: 0 !important; right: 0 !important; left: 0 !important; - box-shadow: 0 1px 0 0 rgba(0,0,0, 0.1); + box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.8) !important; display: none; z-index: 199 !important; @@ -976,8 +1046,8 @@ body.media-viewer-closing { &.ready { display: block; - .header{ - .media-toolbar{ + .header { + .media-toolbar { display: block; } } @@ -986,14 +1056,15 @@ body.media-viewer-closing { &.showing { @include animate($name: fadeIn, $duration: 0.3s, $delay: 0s); - .x-gecko &{ + .x-gecko & { animation: none; } } &.closing { @include animate($name: fadeOut, $duration: 0.3s, $delay: 0s); - .x-gecko &{ + + .x-gecko & { animation: none; } } @@ -1002,20 +1073,22 @@ body.media-viewer-closing { overflow: initial; } - .header{ + .header { position: absolute; - top: 0; left: 0; + top: 0; + left: 0; width: 100%; - .media-toolbar{ + .media-toolbar { display: none; background-color: $video-background; //height: 75px; - .left{ + .left { position: relative; margin-right: 485px; - .back-button{ + + .back-button { position: relative; float: left; left: 0; @@ -1025,28 +1098,29 @@ body.media-viewer-closing { background-color: #282828; cursor: pointer; - &::after{ + &::after { content: ''; overflow: hidden; position: absolute; top: 17px; left: auto; right: 23px; + @include sprite($mv-back-arrow); } - &:hover{ - &::after{ + &:hover { + &::after { @include sprite($mv-back-arrow_hover); } } } - .navigation{ + .navigation { margin: 0 0 0 65px; height: 75px; - .section-number{ + .section-number { min-width: 75px; float: left; padding: 10px 0 10px 15px; @@ -1054,46 +1128,49 @@ body.media-viewer-closing { color: var(--secondary-grey); } - .wrap{ + .wrap { margin-left: 80px; max-width: 600px; overflow: hidden; padding: 16px 10px 10px 0; - & ~ .section-number{ + & ~ .section-number { margin-left: 70px; } - .section-name{ + .section-name { color: var(--secondary-grey); font: 400 normal 10px/14px var(--body-font-family); text-transform: uppercase; overflow: hidden; white-space: nowrap; + @include ellipse; } - .title{ + + .title { font: 200 normal 20px/24px var(--body-font-family); color: var(--tertiary-grey-alt); text-transform: uppercase; white-space: nowrap; overflow: hidden; + @include ellipse; } } } } - .right{ + .right { position: absolute; right: 200px; top: 0; height: 75px; - .video-picker{ + .video-picker { position: relative; - .grid-view{ + .grid-view { position: relative; float: left; width: 67px; @@ -1101,27 +1178,29 @@ body.media-viewer-closing { left: 0; cursor: pointer; top: 16px; - border: 0px solid #0e110e; + border: 0 solid #0e110e; border-right-width: 1px; - &::after{ + &::after { content: ''; overflow: hidden; position: absolute; top: 10px; left: auto; right: 15px; + @include sprite($mv-grid-view); } + &.active::after, - &:hover::after{ + &:hover::after { @include sprite($mv-grid-view_active); } - &:not(.active):hover{ opacity: 0.8; } - &.active:hover{ opacity: 1; } + &:not(.active):hover { opacity: 0.8; } + &.active:hover { opacity: 1; } } - .selected-mv-type{ + .selected-mv-type { position: relative; float: left; width: 215px; @@ -1132,30 +1211,30 @@ body.media-viewer-closing { text-transform: uppercase; padding-top: 30px; - - &.hasTranscript{ + &.hasTranscript { cursor: pointer; - &::before{ + &::before { content: ''; overflow: hidden; position: absolute; top: 35px; left: auto; right: 15px; + @include sprite($arrow-course-dropdown); } - &:active, &:hover{ + &:active, &:hover { color: #ababab; - &::before{ + &::before { @include sprite($arrow-course-dropdown-light); } } } - &::after{ + &::after { content: ''; overflow: hidden; position: absolute; @@ -1164,44 +1243,43 @@ body.media-viewer-closing { right: auto; } - &.transcript-focus{ - &::after{ + &.transcript-focus { + &::after { @include sprite($mv-transcript-focus); } - &:hover, &:active{ - &::after{ + &:hover, &:active { + &::after { @include sprite($mv-transcript-focus_active); } } } - &.video-focus{ - &::after{ + &.video-focus { + &::after { @include sprite($mv-video-focus); } - &:hover, &:active{ - &::after{ + &:hover, &:active { + &::after { @include sprite($mv-video-focus_active); } } } - &.full-video{ - &::after{ + &.full-video { + &::after { @include sprite($mv-full-view); } - &.hasTranscript{ + &.hasTranscript { &:hover, &:active { - &::after{ + &::after { @include sprite($mv-full-view_active); } } } } - } } @@ -1211,10 +1289,10 @@ body.media-viewer-closing { float: left; top: 20px; left: 40px; - font-family: var(--body-font-family); font-size: 14px; font-weight: 500; + @include slide-button; } } @@ -1231,14 +1309,14 @@ body.media-viewer-closing { } } - - .x-component-media-viewer-grid{ + .x-component-media-viewer-grid { position: relative; overflow: hidden; padding: 0 145px; .heading { $indent: 75px; + margin: 50px 0 0 (-$indent); display: block; font: normal 300 24px/50px var(--body-font-family); @@ -1246,7 +1324,7 @@ body.media-viewer-closing { clear: both; float: none; - span{ + span { display: inline-block; padding: 0 0.5em 0 0; @@ -1275,20 +1353,25 @@ body.media-viewer-closing { repeat: no-repeat; }; } + .meta { text-transform: uppercase; - .title{ + + .title { font: normal 700 14px/1 var(--header-font-family); color: #fff; margin-bottom: 5px; } + .info { - font:{ + font: { size: 10px; weight: 600; } + color: var(--tertiary-grey); - span:not(:empty)::after{ + + span:not(:empty)::after { text-decoration: none !important; position: static; content: '\00B7'; @@ -1298,7 +1381,7 @@ body.media-viewer-closing { background: none; } - span:empty::after, span:last-of-type::after{ + span:empty::after, span:last-of-type::after { display: none; } } @@ -1318,7 +1401,7 @@ body.media-viewer-closing { position: absolute; top: 5px; right: 5px; - padding: 0px 10px 0 30px; + padding: 0 10px 0 30px; color: white; background-color: var(--secondary-green); z-index: 1; @@ -1330,6 +1413,7 @@ body.media-viewer-closing { &:hover { .thumbnail { @include icon($play,$top:68px,$left:138px); + &::after { opacity: 0.6; } @@ -1344,11 +1428,13 @@ body.media-viewer-closing { } } - .x-container-media-viewer{ + .x-container-media-viewer { position: relative; overflow: hidden; + @include flexContainer(); - flex-flow : row; + + flex-flow: row; .sync-button { position: absolute; @@ -1366,80 +1452,85 @@ body.media-viewer-closing { border-radius: 15px; padding: 10px 15px; } - } - &.inactive{ + &.inactive { display: none !important; } - .video-player{ + .video-player { top: 20px; left: 10px; + @include flexItem($flex: 0 0 67%); + position: relative; } - .body{ + .body { @include scrollbar($track:$slidedeck-controls-background, $nib:var(--secondary-grey)); - @include flexItem($flex: 1 1 auto); - /*margin: 10px 0 0 1000px;*/ - overflow:{ + @include flexItem($flex: 1 1 auto); + + /* margin: 10px 0 0 1000px; */ + overflow: { y: auto; //scroll; x: hidden; } + position: relative; - .x-container-transcript{ + .x-container-transcript { width: auto !important; position: relative; overflow-y: hidden !important; margin-right: 75px; - .searchHit-overlay{ + .searchHit-overlay { pointer-events: none; } - .note-gutter{ + .note-gutter { left: auto !important; right: 20px !important; } - .content-video-transcript{ + .content-video-transcript { margin: 0 !important; - /*max-width: 390px !important;*/ - .row-item{ - .timestamp{ + /* max-width: 390px !important; */ + + .row-item { + .timestamp { visibility: hidden; } } } - &.no-transcript-view{ + &.no-transcript-view { height: 60px; margin-top: -10px; - .note-gutter{ + .note-gutter { right: auto !important; } } } } - &.small-video-player{ - .video-player{ + &.small-video-player { + .video-player { @include flexItem($flex: 0 0 512px); } - .body{ + .body { margin-left: 40px; - .x-container-transcript{ - .content-video-transcript{ + + .x-container-transcript { + .content-video-transcript { padding-left: 70px !important; - .row-item{ - .timestamp{ + .row-item { + .timestamp { visibility: visible; } } @@ -1452,53 +1543,53 @@ body.media-viewer-closing { } } - &.full-video-player{ + &.full-video-player { right: 0 !important; display: block; - .video-player{ + .video-player { position: relative; left: 0; top: 0; margin: 10px auto; - .content-video{ + .content-video { margin: 10px auto; } } - .body{ + .body { display: none; } - &.has-gutter-view{ - .video-player{ + &.has-gutter-view { + .video-player { position: absolute; } - .body{ + + .body { display: block; } } } } - .x-mask{ - background: rgba(0,0,0,0.65) !important; + .x-mask { + background: rgba(0, 0, 0, 0.65) !important; } - .x-mask-msg{ - .x-mask-msg-text{ + .x-mask-msg { + .x-mask-msg-text { color: white !important; } } } - -.x-component-annotation-view{ - &.presentation-note-slider{ +.x-component-annotation-view { + &.presentation-note-slider { @include animate(FadeIn); - border-width: 0px; + border-width: 0; width: 240px; position: fixed !important; top: 77px !important; @@ -1518,41 +1609,43 @@ body.media-viewer-closing { } } - -.x-menu.share-search.slide-comment-header{ - .x-menu-list-ct{ +.x-menu.share-search.slide-comment-header { + .x-menu-list-ct { border-color: #3d3d3d !important; } - .x-menu-item{ - &.contact-card, &.no-results{ + + .x-menu-item { + &.contact-card, &.no-results { background: #343434; - &.x-menu-item-over{ + + &.x-menu-item-over { background: #3d3d3d; } } } } -.share-search-mask.slide-comment-header{ +.share-search-mask.slide-comment-header { background: #343434; color: var(--tertiary-grey); } -.x-container-transcript, .x-panel-transcript{ - overflow:{ +.x-container-transcript, .x-panel-transcript { + overflow: { y: auto; //scroll; x: hidden; } + width: 920px; - .note-gutter{ + .note-gutter { position: absolute; left: 815px; width: 40px; top: 0; //bottom: 0; - .count{ + .count { position: absolute; left: 0; font: normal bold 9px/19px var(--body-font-family); @@ -1571,7 +1664,7 @@ body.media-viewer-closing { } } - .content-video-transcript{ + .content-video-transcript { position: relative; margin: 50px 20px 20px 100px; color: var(--primary-grey); @@ -1580,33 +1673,35 @@ body.media-viewer-closing { line-height: 2.2em; padding-right: 60px; - .cue{ + .cue { padding: 3px; color: $inactive-text-color; font: 14px normal var(--body-font-family); cursor: pointer; - &:first-child{ + &:first-child { padding-left: 0; } - &.active, &.current, &:active, &:hover{ + + &.active, &.current, &:active, &:hover { background: #313233; border-radius: 3px; color: $active-text-color; } } - .control-container{ + .control-container { position: absolute; right: 0 !important; width: 60px; height: 28px; @include note-control-box; - .note-here-control-box{ + + .note-here-control-box { left: 20px; - &.hidden{ + &.hidden { display: none; } @@ -1640,22 +1735,23 @@ body.media-viewer-closing { } } - .x-component-slide{ + .x-component-slide { padding: 50px 90px 0 0; - .image-wrap{ + .image-wrap { position: relative; - .add-note-here{ + .add-note-here { position: absolute; width: 60px; height: 28px; @include note-control-box; - .note-here-control-box{ + + .note-here-control-box { left: 10px; - &.hidden{ + &.hidden { display: none; } @@ -1664,7 +1760,7 @@ body.media-viewer-closing { } } - img{ + img { border-width: 0; background: #242424; width: 100%; @@ -1673,24 +1769,24 @@ body.media-viewer-closing { } } - - .x-component-video-title{ + .x-component-video-title { margin-top: 40px; color: $inactive-text-color; padding-right: 60px;//leave room for the note gutter - .control-container{ + .control-container { position: absolute; right: 0 !important; width: 60px; height: 28px; @include note-control-box; - .note-here-control-box{ + + .note-here-control-box { left: 20px; top: -16px; - &.hidden{ + &.hidden { display: none; } @@ -1699,26 +1795,24 @@ body.media-viewer-closing { } } - &.no-transcript{ + &.no-transcript { width: 60px; } - } } - -.x-menu{ - &.video-player-options-menu{ +.x-menu { + &.video-player-options-menu { position: fixed !important; top: 0 !important; - .x-menu-body{ + .x-menu-body { padding: 0 !important; border-width: 0 !important; background: none !important; } - .x-menu-item{ + .x-menu-item { padding: 30px 5px 15px 65px !important; height: 75px !important; background: #282828 !important; @@ -1726,7 +1820,6 @@ body.media-viewer-closing { border: 0 !important; font: 600 normal 12px var(--body-font-family) !important; - &.selection-item-over, &.x-menu-item-over, &.x-menu-item-active { @@ -1734,30 +1827,31 @@ body.media-viewer-closing { color: white !important; } - &.x-menu-item-checked{ + &.x-menu-item-checked { background: none !important; background-color: #3a3a3a !important; - &::before{ + &::before { content: ''; overflow: hidden; position: absolute; top: 35px; left: auto; right: 15px; + @include sprite($arrow-course-dropdown); } - &:active, &:hover{ + &:active, &:hover { color: #ababab; - &::before{ + &::before { @include sprite($arrow-course-dropdown-light); } } } - &::after{ + &::after { content: ''; overflow: hidden; position: absolute; @@ -1766,36 +1860,37 @@ body.media-viewer-closing { right: auto; } - &.video-focus{ - &::after{ + &.video-focus { + &::after { @include sprite($mv-video-focus); } - &:hover, &:active{ - &::after{ + &:hover, &:active { + &::after { @include sprite($mv-video-focus_active); } } } - &.transcript-focus{ - &::after{ + &.transcript-focus { + &::after { @include sprite($mv-transcript-focus); } - &:hover, &:active{ - &::after{ + &:hover, &:active { + &::after { @include sprite($mv-transcript-focus_active); } } } - &.full-video{ - &::after{ + + &.full-video { + &::after { @include sprite($mv-full-view); } &:hover, &:active { - &::after{ + &::after { @include sprite($mv-full-view_active); } } @@ -1804,11 +1899,9 @@ body.media-viewer-closing { } } - //Make sure the identity el is on top of the mv. -body.media-viewer-open{ - - #window{ +body.media-viewer-open { + #window { z-index: 300; } @@ -1816,12 +1909,12 @@ body.media-viewer-open{ z-index: 301; } - .media-toolbar .x-component.identity{ + .media-toolbar .x-component.identity { display: block; top: 2px !important; width: 70px; position: absolute; - right: 0px; + right: 0; } .media-toolbar .notifications-icon { diff --git a/src/main/resources/scss/debris/_static-resources.scss b/src/main/resources/scss/debris/_static-resources.scss index 74eab3853f..4a73f76a51 100644 --- a/src/main/resources/scss/debris/_static-resources.scss +++ b/src/main/resources/scss/debris/_static-resources.scss @@ -1,33 +1,36 @@ -.resource-not-found{ +.resource-not-found { position: relative; background-color: var(--quad-grey); border: 1px solid var(--border-grey); border-radius: 3px; - .body{ + + .body { padding-top: 6px; padding-left: 90px; - .actions{ + .actions { padding-top: 8px; padding-bottom: 8px; position: relative; - a{ + a { position: relative; padding-right: 18px; - &, a:link, a:visited, a:active { - color: var(--primary-blue); - font-style: normal !important; - font: 14px var(--body-font-family) !important; - font-weight: 300 !important; - text-decoration: none; - &:hover { - text-decoration: underline; - cursor: pointer; - } + + &, a:link, a:visited, a:active { + color: var(--primary-blue); + font-style: normal !important; + font: 14px var(--body-font-family) !important; + font-weight: 300 !important; + text-decoration: none; + + &:hover { + text-decoration: underline; + cursor: pointer; + } } - &::after{ + &::after { color: var(--tertiary-grey); font: 24px var(--body-font-family) !important; font-weight: 300 !important; @@ -38,29 +41,25 @@ right: 5px; } - &:last-child::after{ + &:last-child::after { content: " "; } } - - - } @include icon($modal-yellow-sign,$top: 12px,$left: 20px); - .heading{ + .heading { color: var(--tertiary-grey); font: 24px var(--body-font-family) !important; font-weight: 300 !important; font-style: italic !important; } - .subtext{ + .subtext { color: var(--primary-grey); font: 14px var(--body-font-family) !important; font-style: normal !important; } } - } diff --git a/src/main/resources/scss/debris/_store.scss b/src/main/resources/scss/debris/_store.scss index 35d12dbc7b..686ae1b215 100644 --- a/src/main/resources/scss/debris/_store.scss +++ b/src/main/resources/scss/debris/_store.scss @@ -27,15 +27,19 @@ &[data-width="2/3"] { width: 260px; } + &[data-width="1/2"] { width: 200px; } + &[data-width="1/3"] { width: 140px; } + &[data-width="1/4"] { width: 95px; } + &[data-width="1/8"] { width: 45px; } @@ -50,14 +54,13 @@ @mixin activation-bubble($pointer-left: 25%) { a.activation { display: inline; + .desc { box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.1); background-color: #fcfcfc; border: 1px solid var(--border-grey); border-radius: 5px; - pointer-events: none; - display: block; visibility: hidden; top: -75px; @@ -73,8 +76,8 @@ color: var(--secondary-grey); padding: 10px 30px; z-index: 100000; - transition: all 0.3s ease-in; + .x-safari5 & { transition: none; } @@ -85,6 +88,7 @@ z-index: 1; bottom: -14px; left: $pointer-left; + @include sprite($window-nib-south); } @@ -99,7 +103,6 @@ opacity: 1; } } - } @mixin purchasable-info-panel { @@ -115,6 +118,7 @@ position: center center; repeat: no-repeat; } + box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.35); border-radius: 1px; float: left; @@ -182,18 +186,19 @@ .purchase-window { @extend .nti-window; + @include reset-window-border-radius(3px); - box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.3), 0 0 0 110px transparent; + box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.3), 0 0 0 110px transparent; background: var(--quad-grey); - .x-mask { background: rgba(255,255,255,0.9); } + .x-mask { background: rgba(255, 255, 255, 0.9); } .header { .titlebar { position: relative; color: var(--tertiary-grey); - border-bottom: 1px solid #BFBFBF; + border-bottom: 1px solid #bfbfbf; box-shadow: inset 0 1px 0 0 white; &.started { @@ -211,9 +216,11 @@ .close { display: none; } + .tab[data-order] { display: inline-block; } + .tab[data-order="history"] { display: none; } @@ -251,12 +258,14 @@ &[data-order] { display: none; padding-left: 35px; + &::after { content: attr(data-order); position: absolute; - top: 0px; + top: 0; left: 17px; } + &::before { content: ''; position: absolute; @@ -292,8 +301,10 @@ &[data-order="history"] { display: none; + &.active { display: inline-block; + & ~ .tab[data-order] { display: none; } @@ -303,9 +314,11 @@ &:first-of-type.visited, &.visited { color: var(--secondary-grey); + &::before { border-color: var(--secondary-grey); } + &[data-order]::after { content: ''; top: 14px; @@ -313,6 +326,7 @@ @include sprite($check_progress); } + &[data-order].active::after { @include sprite($check_progress_grn); } @@ -320,6 +334,7 @@ &.active { color: var(--primary-green); + &::before { border-color: var(--primary-green); } @@ -356,8 +371,11 @@ .activation-code { display: none; + @include input-box-style; + position: relative; + input[type=text] { margin: 15px 0 0 0; width: 200px; @@ -386,10 +404,12 @@ .columns { display: block; } + .info { .meta { margin-right: 175px; } + .quantity { display: block; } @@ -399,6 +419,7 @@ &.final-price { .price { color: var(--primary-grey); + &::before { display: none; } @@ -434,7 +455,6 @@ bottom: 0; left: 0; right: 0; - border: 0 solid #dcdcdc; border-top-width: 1px; text-align: right; @@ -484,6 +504,7 @@ content: ''; top: 16px; left: 15px; + @include sprite($checkbox-14); } @@ -519,7 +540,7 @@ line-height: 44px; font-weight: 500; font-style: italic; - color: #ffffff; + color: #fff; outline: 1px solid #69a92b; background: #75bc30; @@ -534,13 +555,12 @@ outline: none; } - &.red{ + &.red { background: var(--primary-red); outline: 1px solid var(--border-red); } } } - } .container-body { @@ -558,8 +578,10 @@ &.show-columns .columns { display: none; } + .titlebar .tab.visited { display: none; + &.active { display: inline-block; } @@ -571,14 +593,13 @@ display: none; } } - } } .missing-context-msg { padding: 10px 18px 0; font: normal 600 10px/30px var(--body-font-family); - color: #FD817F; + color: #fd817f; box-shadow: inset 0 -1px 0 0 #ededed; text-transform: uppercase; background: #fff; @@ -604,6 +625,7 @@ position: relative; margin: 20px auto; padding: 2px 2px 2px 24px; + &::after { @include loadingSpinner($top: 5px,$left: 0); } @@ -622,7 +644,6 @@ @include sprite($red-x-10); } } - } } @@ -634,9 +655,11 @@ td, th { span { @include ellipse; + overflow: hidden; display: block; } + padding: 0 5px; border: 0 solid var(--border-grey); border-bottom-width: 1px; @@ -688,7 +711,6 @@ &.bulk td:first-of-type div::after { @include sprite($purchase-history-activation-key); } - } tr.bulk { @@ -703,7 +725,7 @@ color: var(--primary-red); } - td:not(:first-of-type){ + td:not(:first-of-type) { visibility: hidden; } } @@ -717,7 +739,6 @@ padding-right: 15px; padding-bottom: 100px; margin-right: -14px; - color: var(--secondary-grey); a { @@ -758,6 +779,7 @@ &.smaller-margin { margin-top: 20px; + input { margin: 0 5px; } @@ -777,11 +799,11 @@ &.card, &.location { position: relative; + &::before { position: absolute; top: 2px; left: -35px; - content: ''; @include sprite($credit_card); @@ -791,6 +813,7 @@ &.location::before { top: 0; left: -25px; + @include sprite($location_pin); } } @@ -819,9 +842,9 @@ &::before { position: absolute; content: ''; - top: 7px; left: 0; + @include sprite($radio-button-16); } @@ -912,7 +935,7 @@ min-width: 250px; font: normal 600 14px/30px var(--body-font-family); color: var(--secondary-grey); - background: #eeeeee; + background: #eee; border-radius: 3px; padding: 1px 10px; diff --git a/src/main/resources/scss/debris/_stream.scss b/src/main/resources/scss/debris/_stream.scss index c146b63301..391b3fe8d6 100644 --- a/src/main/resources/scss/debris/_stream.scss +++ b/src/main/resources/scss/debris/_stream.scss @@ -1,7 +1,7 @@ .stream { -webkit-font-smoothing: antialiased; position: relative; - + .item { &.loading, &.empty, &.done, &.error { position: relative; @@ -28,21 +28,21 @@ color: var(--primary-red); } } - + &.empty { height: 345px; - + .container-empty { color: var(--secondary-grey); text-align: center; top: 50%; transform: translateY(-50%); position: relative; - + .title { font: normal 300 1.75em/35px var(--body-font-family); } - + .subtitle { font: normal 300 1em/35px var(--body-font-family); } @@ -59,7 +59,8 @@ color: var(--primary-grey); line-height: 24px;//height of the spinner padding-left: 30px;//width of the spinner + 6px - top: 50%; left: 50%; + top: 50%; + left: 50%; margin-top: -12px; margin-left: -51px; @@ -111,6 +112,7 @@ max-width: 100%; overflow: hidden; margin-bottom: 5px; + @include ellipsis; } @@ -168,4 +170,4 @@ border: 1px solid #dcdcdc; } } -} \ No newline at end of file +} diff --git a/src/main/resources/scss/debris/_tabbars.scss b/src/main/resources/scss/debris/_tabbars.scss index 1019384bac..1dd3c8fe2e 100644 --- a/src/main/resources/scss/debris/_tabbars.scss +++ b/src/main/resources/scss/debris/_tabbars.scss @@ -1,4 +1,4 @@ -@mixin tabbar($ui, $font, $border-widths){ +@mixin tabbar($ui, $font, $border-widths) { .nti-#{$ui}-tabbar { border: 0 solid var(--border-grey); border-width: $border-widths !important; @@ -19,34 +19,32 @@ padding: 0 6px; } - .x-tab-wrap{padding: 0;} + .x-tab-wrap { padding: 0; } &.x-tab-active { box-shadow: inset 0 -4px 0 0 #85b746; + .x-tab-inner { color: #85b746; } } - & + .x-tab-#{$ui}-tab{ + & + .x-tab-#{$ui}-tab { margin-left: 30px; } } - } } @include tabbar(contacts,normal 600 14px/50px var(--body-font-family), 0 0 1px); @include tabbar(profile, italic 500 18px/50px var(--body-font-family), 1px 0 1px); - .nti-content-tabbar { border-top: 1px solid #f1f1f1 !important; - .nti-body-content-tabbar{ - + .nti-body-content-tabbar { .x-tab-content-tab { - background: #ffffff; + background: #fff; border: 1px solid #f1f1f1; border-right-width: 0 !important; border-top-width: 0 !important; @@ -56,7 +54,8 @@ &:last-of-type { border-right-width: 1px !important; } - .x-tab-wrap {padding: 0 15px;} + .x-tab-wrap { padding: 0 15px; } + .x-tab-inner { color: var(--secondary-grey); font: 12px/32px var(--body-font-family) !important; @@ -64,54 +63,51 @@ } &.x-tab-active { - background: #ffffff; + background: #fff; + .x-tab-inner { color: #85b746; font-weight: 600 !important; } } - } } } - .nti-secondary-tabbar { .x-tab { margin: 0 0 20px 0; height: 31px; - border: 1px solid #cfcfcf; border-right-width: 0 !important; border-left-width: 0 !important; - - background: #ebebeb; - - background-image: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.65) 100%); - box-shadow: 0 1px 0 0 #ffffff, inset 0 2px 0 0 rgba(255,255,255,0.4); + background-image: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0.65) 100%); + box-shadow: 0 1px 0 0 #fff, inset 0 2px 0 0 rgba(255, 255, 255, 0.4); &.x-tab-top-active { $experimental-support-for-svg: true; - background-image: linear-gradient(to bottom, #6dae1d 0%, #8fd03f 100%); - box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.5); + background-image: linear-gradient(to bottom, #6dae1d 0%, #8fd03f 100%); + box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5); .x-tab-inner { - color: #ffffff; + color: #fff; } } - - .x-tab-wrap {padding: 0;} + .x-tab-wrap { padding: 0; } .x-tab-button { - .x-ie & {&,&:active { - left: 0; - top: 0; - overflow-x: hidden; - overflow-y: hidden; - }} + .x-ie & { + &,&:active { + left: 0; + top: 0; + overflow-x: hidden; + overflow-y: hidden; + } + } + overflow: hidden; } @@ -131,6 +127,7 @@ &:first-of-type { border-left-width: 1px !important; border-radius: 5px 0 0 5px; + .x-tab-inner { text-align: right; padding-left: 20px; @@ -140,6 +137,7 @@ &:last-of-type { border-right-width: 1px !important; border-radius: 0 5px 5px 0; + .x-tab-inner { text-align: left; padding-right: 20px; @@ -148,16 +146,15 @@ } } - .x-panel-body-secondary-tabpanel { - .x-panel-body-default{ + .x-panel-body-default { background: transparent; } } -.x-body{ - &.x-ios{ - .nti-profile-tabbar{ +.x-body { + &.x-ios { + .nti-profile-tabbar { pointer-events: none; } } diff --git a/src/main/resources/scss/debris/_toast.scss b/src/main/resources/scss/debris/_toast.scss index 0895eab5c2..4f61347bf2 100644 --- a/src/main/resources/scss/debris/_toast.scss +++ b/src/main/resources/scss/debris/_toast.scss @@ -1,10 +1,9 @@ - .x-component-toast-message { - background: rgba(255,255,255,0.95); + background: rgba(255, 255, 255, 0.95); border: 4px solid var(--border-blue); border-width: 4px 0 0 0; - box-shadow: 0 3px 6px 0 rgba(0,0,0,0.25); + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25); padding: 10px; position: fixed !important; @@ -13,9 +12,11 @@ top: 8px; @include sprite($message_box_close); + right: 8px; cursor: pointer; opacity: 0.7; + &:hover { opacity: 1; } @@ -56,8 +57,7 @@ overflow: hidden; text-align: right; - &:not(:empty){ margin-top: 10px; } - + &:not(:empty) { margin-top: 10px; } .toast-button { margin: 0 10px; diff --git a/src/main/resources/scss/debris/_token.scss b/src/main/resources/scss/debris/_token.scss index 8a8498cdce..a7cbc8f68c 100644 --- a/src/main/resources/scss/debris/_token.scss +++ b/src/main/resources/scss/debris/_token.scss @@ -1,13 +1,12 @@ - -.x-component-tokens{ +.x-component-tokens { position: relative; overflow: hidden; - font: normal 400 12px/30px var(--body-font-family); .x-gecko & { padding-top: 1px; + & > * { float: left; } @@ -34,40 +33,49 @@ color: var(--secondary-grey); vertical-align: middle; - &.person, &.public, &.group, &.list{ - &::after{ + &.person, &.public, &.group, &.list { + &::after { content: ''; position: absolute; - top: 3px; left:6px; + top: 3px; + left: 6px; vertical-align: middle; } } - &.person { &::after{display: none;}} + &.person { &::after { display: none; } } + &.public { padding-left: 22px !important; - &::after{ + + &::after { @include sprite($light-globe-13x13); } } + &.group { padding-left: 22px !important; - &::after{ - top: 5px; left: 5px; + &::after { + top: 5px; + left: 5px; + @include sprite($light-groups-12x9); } } + &.list { padding-left: 22px !important; - &::after{ - top: 5px; left: 5px; + &::after { + top: 5px; + left: 5px; + @include sprite($lists-white_hover); } } - .value,.x{ + .value,.x { position: relative; display: inline-block; vertical-align: middle; @@ -83,7 +91,6 @@ color: #fff; border-color: var(--border-blue); background: var(--primary-blue); - padding: 0 7px 0 10px; margin-right: -9px; position: relative; @@ -93,39 +100,44 @@ display: inline-block; } } - .x{ + + .x { position: relative; width: 15px; height: 18px; display: none; - &::after{ + &::after { content: ''; display: block; position: absolute; @include sprite($light-x_hover); - top: 6px; left: 6px; + + top: 6px; + left: 6px; cursor: pointer; } } } - .token-input-wrap{ + .token-input-wrap { vertical-align: middle; position: relative; overflow: hidden; display: inline-block; - input{ + input { padding: 0; padding-left: -3px; text-indent: 3px; font: normal 700 10px/20px var(--body-font-family) !important; position: absolute; background: #fff; - top: 0; left: 0; - bottom: 0; right: 0; + top: 0; + left: 0; + bottom: 0; + right: 0; margin: 0; border: 0; width: 100%; @@ -138,24 +150,26 @@ width: 100%; } - .x-gecko &{ + .x-gecko & { width: 100%; height: 30px; } text-transform: uppercase; - &.empty{ + &.empty { text-transform: none; //font-style: italic; } } + .placeholder { position: absolute; - top: 0; left: 0; + top: 0; + left: 0; } - span.token-input-sizer{ + span.token-input-sizer { display: inline-block; font: normal 700 10px/30px var(--body-font-family); visibility: hidden; @@ -167,9 +181,9 @@ } } - &.user-token-field{ - &.readOnly{ - .control.publish{ + &.user-token-field { + &.readOnly { + .control.publish { cursor: default; } @@ -186,36 +200,37 @@ } } - .control.disabled{ + .control.disabled { cursor: default; - opacity: .3; + opacity: 0.3; } - .tokens{ + .tokens { position: relative; padding-left: 3px; - .token + .inputArea{ + .token + .inputArea { .plus { margin-left: 5px; } } - .inputArea{ + .inputArea { white-space: nowrap; display: inline-block; position: relative; - .plus{ + .plus { position: relative; display: inline-block; margin: 0 2px 0 0; width: 8px; - &::after{ + &::after { content: ''; position: absolute; - left: 0; top: -7px; + left: 0; + top: -7px; outline: 0; @include sprite($ico_plus); @@ -234,18 +249,19 @@ &.hidden { display: none; } - } - .token-input-wrap{ + .token-input-wrap { position: relative; + input { font: italic normal 14px/20px var(--body-font-family) !important; text-transform: none; background: transparent; //padding: 5px 0; } - .token-input-sizer{ + + .token-input-sizer { position: relative; font: italic normal 14px/30px var(--body-font-family) !important; margin-left: 10px; @@ -255,11 +271,11 @@ } } - .x-gecko &{ + .x-gecko & { float: none !important; } - .token{ + .token { font: normal 700 10px/18px var(--body-font-family); text-transform: none; color: #fff; @@ -268,13 +284,13 @@ position: relative; z-index: 2; - &:hover{ + &:hover { z-index: 10; } } } - .control.publish{ + .control.publish { position: relative; float: right; width: 85px; @@ -282,37 +298,39 @@ cursor: pointer; z-index: 10; - &::after{ + &::after { content: ''; position: absolute; - left: 0; top: 5px; + left: 0; + top: 5px; outline: 0; + @include sprite($btn_toggle_private); } - &.on::after{ + &.on::after { @include sprite($btn_toggle_public); } } - &.readOnly{ - .tokens{ - .token{ - &:hover{ + &.readOnly { + .tokens { + .token { + &:hover { padding: 0 10px 0 10px; margin: 3px 3px 3px 0; - .x{ display: none;} + .x { display: none; } } } - .plus{ + .plus { display: none; } - .token-input-wrap{ + + .token-input-wrap { display: none; } } - } } } diff --git a/src/main/resources/scss/debris/_transitions.scss b/src/main/resources/scss/debris/_transitions.scss index e54296e5a9..2f1880ddb3 100644 --- a/src/main/resources/scss/debris/_transitions.scss +++ b/src/main/resources/scss/debris/_transitions.scss @@ -22,4 +22,4 @@ opacity: 0; } } -} \ No newline at end of file +} diff --git a/src/main/resources/scss/debris/_user-data-panel.scss b/src/main/resources/scss/debris/_user-data-panel.scss index d274e1d616..5f54d9e55b 100644 --- a/src/main/resources/scss/debris/_user-data-panel.scss +++ b/src/main/resources/scss/debris/_user-data-panel.scss @@ -1,12 +1,11 @@ - @mixin chat-history-item { margin: 15px; padding-left: 30px; position: relative; overflow: hidden; - &::after{ + &::after { position: absolute; top: 5px; left: 5px; @@ -18,6 +17,7 @@ .occupants { @include menu-label-text-treatment; + color: var(--primary-blue); line-height: 20px; } @@ -34,20 +34,23 @@ .history { &.chat { @include chat-history-item; + background: var(--panel-background); border: 1px solid #eaeaea; border-radius: 6px; padding: 10px 20px 10px 30px; margin-left: 0; + &::after { top: 13px; left: 10px; } - .occupants{ + .occupants { font-weight: 700; font-size: 9px; } + .time { font-weight: 700; font-size: 9px; @@ -59,10 +62,9 @@ .user-data-panel { @include scrollbar(#ffffff, var(--tertiary-grey)); - @include divider; - overflow:{ + overflow: { y: auto; //scroll; x: hidden; } @@ -71,17 +73,16 @@ padding-top: 12px; } - .divider + .post, .divider + .comment{ + .divider + .post, .divider + .comment { box-shadow: none !important; border-top: none !important; } - div.history:first-of-type{ margin-top: 10px; } - - .divider + div.history:first-of-type{ margin-top: 0; } + div.history:first-of-type { margin-top: 10px; } - .history{ + .divider + div.history:first-of-type { margin-top: 0; } + .history { &:first-of-type:not(.notification) { padding-top: 10px; } @@ -93,12 +94,12 @@ color: var(--tertiary-grey); .verb { - &::before{ - content: ' ' + &::before { + content: ' '; } - &::after{ - content: ' ' + &::after { + content: ' '; } } @@ -113,7 +114,7 @@ font-style: italic; } - &.quote::before, &.quote::after{ + &.quote::before, &.quote::after { content: '"';//" } } @@ -124,33 +125,36 @@ } &:not(.notification) { - &.chat{ + &.chat { @include chat-history-item; + .time { - .date { display: none; } + .date { display: none; } } } &.note, &.post, &.highlight, - &.favorite{ + &.favorite { margin: 0 20px; - .path,.location, .tags, .title{ + .path,.location, .tags, .title { color: var(--tertiary-grey); font-family: var(--body-font-family); } - .path, .title{ + .path, .title { font-size: 10px; font-weight: 600; text-transform: uppercase; + @include ellipse; + overflow: hidden; } - .location, .text, .tags{ + .location, .text, .tags { font-size: 14px; font-weight: 500; font-style: italic; @@ -165,7 +169,6 @@ font-weight: normal; color: var(--primary-grey); word-wrap: break-word; - position: relative; .whiteboard-container { @@ -178,32 +181,33 @@ content: ' '; overflow: hidden; position: absolute; - top: 0; left: 15px; + top: 0; + left: 15px; + @include sprite($ldquo); } - &::after{ + &::after { content: ' '; display: inline-block; margin-left: 5px; + @include sprite($rdquo); } } } - &.post{ + &.post { cursor: pointer; position: relative; border-top: 1px solid #eaeaea; - box-shadow: inset 0 1px 0 0 #ffffff; - - + box-shadow: inset 0 1px 0 0 #fff; padding: 12px 0 12px 0; font-size: 12px; color: var(--secondary-grey); overflow: hidden; - .author{ + .author { font-style: normal; font-size: 10px; font-weight: bold; @@ -211,7 +215,7 @@ text-transform: uppercase; } - .title, .tags{ + .title, .tags { font-size: 12px; } } @@ -250,31 +254,30 @@ } } - &.highlight{ + &.highlight { .body { span { color: #136ea5; background: #e1f2fc; line-height: 25px; - padding: .25em; + padding: 0.25em; } background: none; - &::before, &::after{ + + &::before, &::after { display: none; } } } - } - &.nothing{ + &.nothing { color: var(--tertiary-grey); text-align: center; font-family: var(--body-font-family); font-size: 10px; font-weight: 600; } - } } diff --git a/src/main/resources/scss/debris/_ux-components.scss b/src/main/resources/scss/debris/_ux-components.scss index a36c3d27d0..78f496ba9b 100644 --- a/src/main/resources/scss/debris/_ux-components.scss +++ b/src/main/resources/scss/debris/_ux-components.scss @@ -15,6 +15,7 @@ .body-container { overflow: hidden; + @include experimental(transition, margin 1s ease-in-out); div { @@ -28,9 +29,11 @@ position: absolute; width: 20px; - top: 0; bottom: 50px; + top: 0; + bottom: 50px; opacity: 0.7; cursor: pointer; + @include experimental(transition, $transition); &.disabled { @@ -49,19 +52,22 @@ .previous { left: 0; + @include icon($arrow-left_inactive, $position: absolute, $top: 50%, $left: 4px); } .next { right: 0; + @include icon($arrow-right_inactive, $position: absolute, $top: 50%, $left: 4px); } .footer { position: absolute; height: 50px; - left: 0; right: 0; + left: 0; + right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.06); } -} \ No newline at end of file +} diff --git a/src/main/resources/scss/debris/_video.scss b/src/main/resources/scss/debris/_video.scss index 0eae7a5a84..32886b5079 100644 --- a/src/main/resources/scss/debris/_video.scss +++ b/src/main/resources/scss/debris/_video.scss @@ -1,6 +1,8 @@ .curtain { position: absolute; - left: 0; top: 0; bottom: 0; + left: 0; + top: 0; + bottom: 0; cursor: pointer; //set the base size for all the subsequent ems font-size: 16px; @@ -13,14 +15,16 @@ cursor: auto; } - &.content-video-curtain{ - right: auto; bottom: auto; + &.content-video-curtain { + right: auto; + bottom: auto; width: 640px !important; height: 360px !important; } &.context-video-curtain { - right: auto; bottom: auto; + right: auto; + bottom: auto; width: 330px; height: 188px; } @@ -30,26 +34,28 @@ overflow: visible; left: 50%; top: 50%; + .play { position: relative; top: -1.375em;//half the line-height left: -50%; } - .controls{ - position: absolute; - overflow: visible; - left: 50%; - top: -40%; - .edit { - padding: 5px 10px; - color: var(--primary-blue); - margin: 5px; + .controls { + position: absolute; + overflow: visible; + left: 50%; + top: -40%; + + .edit { + padding: 5px 10px; + color: var(--primary-blue); + margin: 5px; &:hover { - background-color: var(--primary-blue); - color: #fff; - border-radius: 5px; + background-color: var(--primary-blue); + color: #fff; + border-radius: 5px; } } } @@ -66,8 +72,10 @@ .blur-clip,.blur { border-radius: 5em; position: absolute; - top: 0; left: 0; - bottom: 0; right: 0; + top: 0; + left: 0; + bottom: 0; + right: 0; overflow: hidden; } @@ -77,6 +85,7 @@ size: 512px auto; repeat: no-repeat; } + @include blur-effect(); } @@ -98,37 +107,42 @@ } .label { - background-color: rgba(0,0,0,0.68); - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15),//stroke + background-color: rgba(0, 0, 0, 0.68); + box-shadow: + inset 0 0 0 1px rgba(255,255,255,0.15),//stroke 0 0 3px 0 black;//shadow + border-radius: 5em; overflow: hidden; padding: 0 15px 0 50px; max-width: 400px; + @include ellipse(); + position: relative; } - .launch-player{ + .launch-player { display: block; top: 0; left: 0; bottom: 0; width: 50px; border-radius: 50px; + @include icon($play, $position:absolute, $top:2px, $left:5px); } &.transcripts { - .label{ + .label { padding-right: 60px; + @include icon($play-transcript,$top:3px,$right:3px, $left:auto); } } } } - .content-video-container { .content-video-curtain { z-index: 1; @@ -147,7 +161,8 @@ position: relative; .play { - top: 50%; left: 50%; + top: 50%; + left: 50%; margin-top: -23px; margin-left: -23px; width: 46px; @@ -155,6 +170,7 @@ background: rgba(0, 0, 0, 0.68); box-shadow: 0 0 3px 0 #000; border-radius: 48px; + @include icon($play, $position: absolute, $side: after, $top: 50%, $left: 50%); &::after { @@ -172,18 +188,20 @@ .video-window-container { padding: 30px; position: relative; + .controls { display: none; } .close { cursor: pointer; - top: 0; right: 0; + top: 0; + right: 0; width: 26px; height: 26px; display: inline-block; - @include icon($close_popup, $position: absolute); + @include icon($close_popup, $position: absolute); } } } diff --git a/src/main/resources/scss/debris/_videopopup.scss b/src/main/resources/scss/debris/_videopopup.scss index af1f10e4b8..61d94b06e9 100644 --- a/src/main/resources/scss/debris/_videopopup.scss +++ b/src/main/resources/scss/debris/_videopopup.scss @@ -6,6 +6,7 @@ position: fixed !important; max-height: calc(100vh - 40px); } + .component-overlay .x-panel-image-roll, .component-overlay .x-panel-video-roll { padding: 0; @@ -28,13 +29,13 @@ line-height: 0; overflow: hidden; cursor: pointer; - padding: 0px; + padding: 0; margin: 15px 10px; border: 1px solid var(--tertiary-grey-alt); - box-shadow: 2px 3px 1px 0 rgba(0,0,0,0.13); + box-shadow: 2px 3px 1px 0 rgba(0, 0, 0, 0.13); &.x-item-selected { - img.item{ + img.item { box-shadow: inset 0 0 0 5px var(--primary-blue); } } @@ -56,7 +57,7 @@ .fade-outs { overflow: visible; - * {position: absolute; bottom: 0; width: 20px; height: 109px; z-index: 2;} + * { position: absolute; bottom: 0; width: 20px; height: 109px; z-index: 2; } .left { background-image: linear-gradient(to right, #fafafa 0%, rgba(250, 250, 250, 0) 80%, rgba(250, 250, 250, 0) 100%); @@ -74,12 +75,13 @@ .component-overlay .x-panel-image-roll, .component-overlay .x-panel-video-roll, .x-panel-video.videos { - .close { top: -26px;//22 + 4 right: -26px;//22 + 4 position: absolute; + @include sprite($close_popup); + cursor: pointer; border-radius: 90px; } @@ -90,7 +92,7 @@ padding: 10px 15px; position: relative; white-space: nowrap; - overflow:{ + overflow: { x: auto; //scroll; y: hidden; } @@ -104,9 +106,11 @@ &.x-item-selected::after { position: absolute; - top: 25px; left: 25px; + top: 25px; + left: 25px; content: ' '; z-index: 1; + @include sprite($now_playing); } @@ -135,7 +139,8 @@ .left, .right { cursor: pointer; position: absolute; - top: 0; bottom: 114px; + top: 0; + bottom: 114px; width: 30px; background-color: rgba(0, 0, 0, 0.5); opacity: 0.7; @@ -161,6 +166,7 @@ border-color: transparent white transparent transparent; } } + .right { right: 0; @@ -193,13 +199,13 @@ .carousel { position: absolute; bottom: 0; - left: 0; right: 0; + left: 0; + right: 0; } } - -.component-overlay .x-panel-image-roll{ +.component-overlay .x-panel-image-roll { .carousel { - .item-wrap.x-item-selected::after{display: none;} + .item-wrap.x-item-selected::after { display: none; } } } diff --git a/src/main/resources/scss/debris/_whiteboard.scss b/src/main/resources/scss/debris/_whiteboard.scss index affc9eb3eb..6fa5e1b3d3 100644 --- a/src/main/resources/scss/debris/_whiteboard.scss +++ b/src/main/resources/scss/debris/_whiteboard.scss @@ -1,5 +1,4 @@ - @mixin whiteboard-toolbar-common { margin: 0; padding: 0; @@ -9,11 +8,12 @@ @mixin whiteboard-tool-button-common { @include whiteboard-toolbar-common; + width: 80px; height: 80px; } -@mixin button-base($size:24px, $r:5px){ +@mixin button-base($size:24px, $r:5px) { cursor: pointer; display: block; border-radius: $r; @@ -23,14 +23,16 @@ height: $size; } -@mixin color-button-base{ +@mixin color-button-base { @include button-base; + border: 1px solid #d2d2d2; - box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.43); + box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.43); } .color { - &.x-toolbar-item {margin: 0;} + &.x-toolbar-item { margin: 0; } + display: inline-block; padding: 8px 7px; border: 1px solid transparent; @@ -39,54 +41,62 @@ &.x-over, &.x-pressed { border-color: #e0e0e0; - background: #ffffff; + background: #fff; } em.button, - .whiteboard-color-button{ + .whiteboard-color-button { @include color-button-base; - background-image: linear-gradient(to right bottom, - var(--quad-grey) 45%, - rgba(244, 82, 82, 0.7) 50%, - var(--quad-grey) 55% - ); - - span.whiteboard-color-inner{display: none;} - span.whiteboard-color-icon{display: none;} + + background-image: + linear-gradient( + to right bottom, + var(--quad-grey) 45%, + rgba(244, 82, 82, 0.7) 50%, + var(--quad-grey) 55% + ); + + span.whiteboard-color-inner { display: none; } + span.whiteboard-color-icon { display: none; } + span.whiteboard-color-icon-el { @include color-button-base; + position: absolute; - top: 0; left: 0; + top: 0; + left: 0; text-indent: -1em; border-width: 0; opacity: 0.5; - background-image: linear-gradient(107deg, - rgba(0, 0, 0, 0) 0%, - rgba(255, 255, 255, 0) 42%, - rgba(255, 255, 255, 0.21) 51%, - #ffffff 100% - ); + background-image: + linear-gradient( + 107deg, + rgba(0, 0, 0, 0) 0%, + rgba(255, 255, 255, 0) 42%, + rgba(255, 255, 255, 0.21) 51%, + #fff 100% + ); } - } - &.black {em.button,.whiteboard-color-button { background: #333333; border-color: #333333; }} - &.grey1 {em.button,.whiteboard-color-button { background: #858585; border-color: #707070; }} - &.grey2 {em.button,.whiteboard-color-button { background: #e1e1e1; border-color: #acacac; }} - &.white {em.button,.whiteboard-color-button { background: #ffffff; border-color: #b3b3b3; div {opacity: 0.9;} }} - &.red {em.button,.whiteboard-color-button { background: #d34f39; border-color: #c6452f; }} - &.blue {em.button,.whiteboard-color-button { background: #2b89c5; border-color: #2880b9; }} - &.green {em.button,.whiteboard-color-button { background: #a0c94c; border-color: #82a835; }} - &.orange {em.button,.whiteboard-color-button { background: var(--primary-orange); border-color: #d97704; }} - &.magenta {em.button,.whiteboard-color-button{ background: #b42789; border-color: #b42789; }} - &.purple {em.button,.whiteboard-color-button { background: #6f3d93; border-color: #6f3d93; }} - &.yellow {em.button,.whiteboard-color-button { background: #fff02a; border-color: #d9d15d; div {opacity: 0.93;} }} + &.black { em.button,.whiteboard-color-button { background: #333; border-color: #333; } } + &.grey1 { em.button,.whiteboard-color-button { background: #858585; border-color: #707070; } } + &.grey2 { em.button,.whiteboard-color-button { background: #e1e1e1; border-color: #acacac; } } + &.white { em.button,.whiteboard-color-button { background: #fff; border-color: #b3b3b3; div { opacity: 0.9; } } } + &.red { em.button,.whiteboard-color-button { background: #d34f39; border-color: #c6452f; } } + &.blue { em.button,.whiteboard-color-button { background: #2b89c5; border-color: #2880b9; } } + &.green { em.button,.whiteboard-color-button { background: #a0c94c; border-color: #82a835; } } + &.orange { em.button,.whiteboard-color-button { background: var(--primary-orange); border-color: #d97704; } } + &.magenta { em.button,.whiteboard-color-button { background: #b42789; border-color: #b42789; } } + &.purple { em.button,.whiteboard-color-button { background: #6f3d93; border-color: #6f3d93; } } + &.yellow { em.button,.whiteboard-color-button { background: #fff02a; border-color: #d9d15d; div { opacity: 0.93; } } } } .x-panel-nt, .x-menu-nt { &.color-picker { - .x-menu-body {padding: 0;border-radius: 3px;} + .x-menu-body { padding: 0; border-radius: 3px; } + overflow: visible; &::before { @@ -111,9 +121,10 @@ margin: 0; } -.wb-window{ +.wb-window { @extend .nti-window; - background: #ffffff; + + background: #fff; &.wb-small { .x-panel-whiteboard-editor { @@ -129,7 +140,7 @@ bottom: 0; right: 0; left: 0; - border-top: 1px solid #E1E1E1 !important; + border-top: 1px solid #e1e1e1 !important; .footer-region { float: left; @@ -142,40 +153,39 @@ .x-btn-new-medium, .x-btn-history-medium { - &, .x-btn-button { width: 50px; height: 30px; } .x-btn-icon-el { - top: 0; left: 0; + top: 0; + left: 0; width: 50px; height: 30px; background: url(../images/old_sprites/spr_whiteboard.png) 0 0 no-repeat; - &.undo{ background-position: -325px -1335px; } - &.redo{ background-position: -425px -1335px; } - &.new-page { background-position: -525px -1335px; } + &.undo { background-position: -325px -1335px; } + &.redo { background-position: -425px -1335px; } + &.new-page { background-position: -525px -1335px; } } - &.x-over .x-btn-icon-el{ - &.undo{ background-position: -325px -1435px; } - &.redo{ background-position: -425px -1435px; } - &.new-page { background-position: -525px -1435px; } + &.x-over .x-btn-icon-el { + &.undo { background-position: -325px -1435px; } + &.redo { background-position: -425px -1435px; } + &.new-page { background-position: -525px -1435px; } } - &.x-pressed .x-btn-icon-el{ - &.undo{ background-position: -325px -1235px; } - &.redo{ background-position: -425px -1235px; } - &.new-page { background-position: -525px -1235px; } + &.x-pressed .x-btn-icon-el { + &.undo { background-position: -325px -1235px; } + &.redo { background-position: -425px -1235px; } + &.new-page { background-position: -525px -1235px; } } } - } .x-panel-whiteboard-editor { - .x-panel-body-whiteboard-editor{ + .x-panel-body-whiteboard-editor { background: white; max-height: 100vh; padding-bottom: 58px; @@ -184,27 +194,30 @@ canvas { cursor: crosshair; - &.moveSelected{ + &.moveSelected { cursor: default !important; } } .x-toolbar-options { @include whiteboard-toolbar-common; + padding-left: 6px; - .x-toolbar-text {color: #8b8b8b;} + .x-toolbar-text { color: #8b8b8b; } &.text-options { padding: 0 0 0 40px; + .color { margin-right: 30px; } } - &.image-options{ + &.image-options { padding: 0 35px 0 30px; - .x-btn-option-toolbar-large{ + + .x-btn-option-toolbar-large { margin-right: 30px; } } @@ -216,6 +229,7 @@ overflow: hidden; float: left; } + &.pencil-color-options { padding: 11px 0 8px 34px; border: 0 solid transparent; @@ -223,6 +237,7 @@ overflow: hidden; float: left; } + &.shape-options { padding: 0; border: 0 solid transparent; @@ -241,6 +256,7 @@ background: none; } } + .nt-combobox { margin: 13px 10px 0 0; float: left; @@ -260,21 +276,22 @@ .x-btn-options-toolbar-medium { @include button-base(30px, 3px); + border: 1px solid transparent; &.x-over, &.x-pressed { border-color: #e0e0e0; - background: #ffffff; + background: #fff; } - &.x-over .x-btn-icon-el{ + &.x-over .x-btn-icon-el { &.bold { background-position: -36px -1436px; } &.italic { background-position: -136px -1436px; } &.underline { background-position: -236px -1436px; } } - &.x-pressed .x-btn-icon-el{ + &.x-pressed .x-btn-icon-el { &.bold { background-position: -36px -1236px !important; } &.italic { background-position: -136px -1236px !important; } &.underline { background-position: -236px -1236px !important; } @@ -282,10 +299,13 @@ .x-btn-button { @include button-base(30px, 3px); + span.x-btn-icon-el { @include button-base(30px, 3px); + position: absolute; - top: 0; left: 0; + top: 0; + left: 0; background: url(../images/old_sprites/spr_whiteboard.png) 0 0 no-repeat; &.bold { background-position: -36px -1336px; } @@ -306,9 +326,10 @@ .x-btn-arrow-right, .x-btn-split-right { background: url(../images/elements/menu-arrow-down-active.png) right 20px no-repeat; - padding-right: 15px!important; - .x-btn-inner{ - padding-right: 0px; + padding-right: 15px !important; + + .x-btn-inner { + padding-right: 0; } } @@ -330,14 +351,14 @@ border-left-color: #e9e9e9; border-right-color: #bcbcbc; } + .selected-right { border-left-color: #bcbcbc; border-right-color: #e9e9e9; } } - - .whiteboard-tool-option-button-toolbar-large{ + .whiteboard-tool-option-button-toolbar-large { margin: 8px 0; padding: 4px 5px; border-radius: 3px; @@ -347,7 +368,7 @@ &.x-over, &.x-pressed { - background: #ffffff; + background: #fff; border: 1px solid #e0e0e0; } @@ -362,7 +383,6 @@ background: url(../images/elements/split-light-nib.png) right 14px no-repeat; margin-right: 2px; - //for poly .whiteboard-tool-option-inner { display: block; @@ -375,27 +395,32 @@ font-weight: bold; color: white; font-size: 12px; - } } } .whiteboard-tool-option-button { @include whiteboard-toolbar-common; + display: block; position: relative; background: none; - width: 32px; height: 32px; + width: 32px; + height: 32px; } - &.move{ + &.move { top: 10px !important; } - .whiteboard-tool-option-icon-el{ + .whiteboard-tool-option-icon-el { @include whiteboard-toolbar-common; - position: absolute; top: 0; left: 0; - width: 32px; height: 32px; + + position: absolute; + top: 0; + left: 0; + width: 32px; + height: 32px; background: url(../images/old_sprites/spr_whiteboard.png) 0 0 no-repeat; &.stroke { @@ -414,20 +439,21 @@ } &.move { - &.back{ background-position: -34px -1634px } - &.forward{ background-position: -134px -1634px } - &.duplicate{ background-position: -234px -1634px } - &.delete{ background-position: -334px -1634px } + &.back { background-position: -34px -1634px; } + &.forward { background-position: -134px -1634px; } + &.duplicate { background-position: -234px -1634px; } + &.delete { background-position: -334px -1634px; } } } - &.x-pressed .whiteboard-tool-option-icon-el{ + &.x-pressed .whiteboard-tool-option-icon-el { &.stroke { &.fine { background-position: -34px -934px !important; } &.small { background-position: -134px -934px !important; } &.medium { background-position: -234px -934px !important; } &.large { background-position: -334px -934px !important; } } + &.shape { &.line { background-position: -34px -334px !important; } &.square { background-position: -134px -334px !important; } @@ -437,10 +463,10 @@ } &.move { - &.back{ background-position: -34px -1534px !important;} - &.forward{ background-position: -134px -1534px !important;} - &.duplicate{ background-position: -234px -1534px !important;} - &.delete{ background-position: -334px -1534px !important;} + &.back { background-position: -34px -1534px !important; } + &.forward { background-position: -134px -1534px !important; } + &.duplicate { background-position: -234px -1534px !important; } + &.delete { background-position: -334px -1534px !important; } } } @@ -451,6 +477,7 @@ &.medium { background-position: -234px -1134px; } &.large { background-position: -334px -1134px; } } + &.shape { &.line { background-position: -34px -534px; } &.square { background-position: -134px -534px; } @@ -460,34 +487,40 @@ } &.move { - &.back{ background-position: -34px -1734px } - &.forward{ background-position: -134px -1734px } - &.duplicate{ background-position: -234px -1734px } - &.delete{ background-position: -334px -1734px } + &.back { background-position: -34px -1734px; } + &.forward { background-position: -134px -1734px; } + &.duplicate { background-position: -234px -1734px; } + &.delete { background-position: -334px -1734px; } } } } } .whiteboard-tool { - .whiteboard-tool-button{ + .whiteboard-tool-button { @include whiteboard-tool-button-common; + display: block; background: none; position: relative; .whiteboard-tool-inner { display: none; } + .whiteboard-tool-icon-el { - position: absolute; top: 0; left: 0; + position: absolute; + top: 0; + left: 0; + @include whiteboard-tool-button-common; + background: url(../images/old_sprites/spr_whiteboard.png) 0 0 no-repeat; &.move { background-position: -10px -110px; } - &.pencil{ background-position: -110px -110px; } - &.shape{ background-position: -210px -110px; } - &.text{ background-position: -310px -110px; } - &.image{ background-position: -410px -110px; } - &.eraser{ background-position: -510px -110px; } + &.pencil { background-position: -110px -110px; } + &.shape { background-position: -210px -110px; } + &.text { background-position: -310px -110px; } + &.image { background-position: -410px -110px; } + &.eraser { background-position: -510px -110px; } } } @@ -497,31 +530,29 @@ &.x-pressed .whiteboard-tool-icon-el { &.move { background-position: -10px -10px !important; } - &.pencil{ background-position: -110px -10px !important; } - &.shape{ background-position: -210px -10px !important; } - &.text{ background-position: -310px -10px !important; } - &.image{ background-position: -410px -10px !important; } - &.eraser{ background-position: -510px -10px !important; } + &.pencil { background-position: -110px -10px !important; } + &.shape { background-position: -210px -10px !important; } + &.text { background-position: -310px -10px !important; } + &.image { background-position: -410px -10px !important; } + &.eraser { background-position: -510px -10px !important; } } &.x-over .whiteboard-tool-icon-el { &.move { background-position: -10px -210px; } - &.pencil{ background-position: -110px -210px; } - &.shape{ background-position: -210px -210px; } - &.text{ background-position: -310px -210px; } - &.image{ background-position: -410px -210px; } - &.eraser{ background-position: -510px -210px; } + &.pencil { background-position: -110px -210px; } + &.shape { background-position: -210px -210px; } + &.text { background-position: -310px -210px; } + &.image { background-position: -410px -210px; } + &.eraser { background-position: -510px -210px; } } } - .whiteboard-tools-secondary { background: #f7f7f7; border: 1px solid #e7e7e7; border-left-width: 0; border-right-width: 0; } - } .shape-options .nt-combobox-option-toolbar { @@ -571,17 +602,16 @@ .body-divider { display: block; - .whiteboard-container{ + .whiteboard-container { display: inline-block; position: relative; overflow: hidden; cursor: pointer; - - padding: 0px; + padding: 0; margin: 3px; margin-bottom: 8px; border: 1px solid var(--tertiary-grey-alt); - box-shadow: 2px 3px 1px 0 rgba(0,0,0,0.13); + box-shadow: 2px 3px 1px 0 rgba(0, 0, 0, 0.13); .whiteboard-wrapper { position: relative; @@ -590,9 +620,13 @@ .overlay { display: none; position: absolute; - top: 0; left: 0; bottom: 20px; right: 0; + top: 0; + left: 0; + bottom: 20px; + right: 0; box-shadow: inset 0 0 0 5px white; background: rgba(63, 179, 246, 0.05); + @include animate(pulseIn,0.5s); } } @@ -604,6 +638,7 @@ display: block; } } + .toolbar { visibility: visible; } @@ -619,12 +654,13 @@ } } - .toolbar{ + .toolbar { display: block; visibility: hidden; position: absolute; bottom: 0; - left: 0; right: 0; + left: 0; + right: 0; overflow: hidden; background: #fafafa; border-top: 1px solid var(--tertiary-grey-alt); @@ -641,7 +677,7 @@ overflow: hidden; padding-left: 30px; - &::after{ + &::after { content: ' '; overflow: hidden; position: absolute; @@ -651,18 +687,21 @@ .include { display: none; - &::after{ + + &::after { @include sprite($checkbox-light-unchecked); + left: 6px; top: 7px; } &:hover { - &::after{ @include sprite($checkbox-light-unchecked_hover); } + &::after { @include sprite($checkbox-light-unchecked_hover); } } &.checked { - &::after{ @include sprite($checkbox-light-checked); } + &::after { @include sprite($checkbox-light-checked); } + &:hover::after { @include sprite($checkbox-light-checked_hover); } @@ -673,26 +712,26 @@ color: var(--secondary-grey-alt); font-weight: bold; - &::after{ + &::after { left: 8px; + @include sprite($reply); } } .editor-active & { - .reply {display: none;} - .include {display: block;} + .reply { display: none; } + .include { display: block; } } - } } } - .whiteboard-error-image { display: none; background-image: url(../images/backdrops/whiteboard_error_unknown.png); } + .whiteboard-broken-image { display: none; background-image: url(../images/backdrops/whiteboard_error_loading_image.png); diff --git a/src/main/resources/scss/debris/_window-treatments.scss b/src/main/resources/scss/debris/_window-treatments.scss index 2ca9466e57..b23c526476 100644 --- a/src/main/resources/scss/debris/_window-treatments.scss +++ b/src/main/resources/scss/debris/_window-treatments.scss @@ -1,21 +1,21 @@ +@mixin reset-window-border-radius($radius) { + &,iframe,.x-window-body { border-radius: $radius; } -@mixin reset-window-border-radius($radius){ - &,iframe,.x-window-body{ border-radius: $radius; } .nti-window-header { &,.header-body { border-radius: $radius $radius 0 0; - .controls {border-radius: 0 $radius 0 0;} + .controls { border-radius: 0 $radius 0 0; } } } .nti-window-footer { border-radius: 0 0 $radius $radius; } } - .nti-window { @include reset-window-border-radius(5px); + background-color: #fcfcfc; - box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.1); + box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.1); border: 1px solid var(--border-grey); overflow: hidden; position: fixed !important; @@ -34,14 +34,16 @@ .nti-window-header { cursor: move; background: transparent; - border-bottom: 1px solid #ffffff; - box-shadow: inset 0px -1px 0px 0px #F6F5F5; + border-bottom: 1px solid #fff; + box-shadow: inset 0 -1px 0 0 #f6f5f5; .header-body { position: relative; overflow: hidden; + span { @include menu-label-text-treatment; + padding: 8px 10px; //float: left; display: block; @@ -63,32 +65,38 @@ height: 100%; float: right; padding: 0; + &.has-tools { padding-left: 11px; position: relative; - &::after{ + + &::after { content: ' '; position: absolute; overflow: hidden; - top: 4px; left: 0; + top: 4px; + left: 0; + @include sprite($window-control-divider); } } img.tool { - &:hover{ opacity: 1; } + &:hover { opacity: 1; } + opacity: 0.5; margin: 8px 11px 8px 0; float: right; cursor: pointer; - &.close { @include sprite($window-control-close); } + &.minimize { @include sprite($window-control-minimize); } + &.popout { @include sprite($window-control-maximize); } @@ -98,9 +106,9 @@ } .nti-window-footer { - background: #ffffff; + background: #fff; border-color: #e7e7e7; - border-width: 0px; + border-width: 0; border-top-width: 1px !important; padding: 10px; } @@ -117,7 +125,6 @@ } } - .buttons { margin: 10px; } @@ -149,7 +156,7 @@ padding-top: 30px; } - &.closable .close{ + &.closable .close { display: block; } @@ -215,7 +222,7 @@ left: 0; right: 0; background-color: #f0f0f0; - box-shadow: 0 0 5px 0 rgba(0,0,0,0.35); + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.35); clip: rect(300px, auto, 310px, auto); border-radius: 350em / 4em; } @@ -262,13 +269,12 @@ &:hover { background-color: white; - box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.5); + box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, 0.5); } &.declinde, &.caution { color: var(--primary-red); } - } &.accept { @@ -278,21 +284,23 @@ &.decline, &.caution { background-color: var(--primary-red); } - } } &.error .message-container { - @include icon($modal-red-sign, $left: 10px); + @include icon($modal-red-sign, $left: 10px); } &::after { content: ''; position: fixed; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; background-color: rgba(0, 0, 0, 0); z-index: -1; + @include experimental(transition, all 0.35s 0 ease-out); } } @@ -303,10 +311,10 @@ } } -.iframe-window, .confirm-window{ +.iframe-window, .confirm-window { position: fixed !important; - .iframe{ + .iframe { width: auto; &.confirm { @@ -327,17 +335,16 @@ } } - .badge-window { .badge-preview { min-height: 170px; - .img{ + .img { width: 128px; height: 128px; } - .wrap{ + .wrap { width: 631px; min-height: 148px; font-size: 1.1em; @@ -363,6 +370,7 @@ text-decoration: none; color: var(--primary-blue); overflow: hidden; + @include ellipse; } @@ -390,7 +398,7 @@ left: 0; right: 0; height: 8px; - box-shadow: 0 3px 8px -3px rgba(0,0,0,0.25); + box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.25); } .btn { @@ -433,7 +441,7 @@ overflow-y: auto; } - div.nti-window-header{ + div.nti-window-header { background-color: #fffefe; display: block; @@ -448,7 +456,6 @@ } .object-window { - overflow-y: hidden; .window-loading { @@ -470,34 +477,35 @@ @include loadingSpinner($top: 0, $left: 0); } } - } - .window-header{ + .window-header { position: relative; height: 44px; border-bottom: 1px solid #ededed; font-size: 0.75em; - .title{ + .title { color: var(--primary-grey); margin-left: 15px; line-height: 44px; max-width: 675px; overflow: hidden; white-space: nowrap; + @include ellipse; } - .close{ + .close { @include icon($note-window-x, $side: after, $position: absolute); + top: 10px; right: 10px; cursor: pointer; width: 24px; height: 24px; - &:hover{ + &:hover { @include icon($note-window-x_hover, $side: after, $position: absolute); } } @@ -522,6 +530,7 @@ top: 13px; width: 24px; height: 24px; + @include sprite($note-window-x); &:hover { @@ -536,6 +545,7 @@ font-weight: 300; font-size: 1.5em; text-transform: none; + @include ellipse(); } } @@ -561,10 +571,12 @@ &::after { content: ''; position: fixed; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; z-index: -1; - background-color: rgba(0,0,0,0.5); + background-color: rgba(0, 0, 0, 0.5); } } diff --git a/src/main/resources/scss/layout/_main-layout.scss b/src/main/resources/scss/layout/_main-layout.scss index 4b876a9f15..e225e550de 100644 --- a/src/main/resources/scss/layout/_main-layout.scss +++ b/src/main/resources/scss/layout/_main-layout.scss @@ -47,8 +47,6 @@ html.x-viewport { } } - - body.x-body { min-height: calc(100vh - #{$header-height}); height: auto !important; @@ -72,18 +70,19 @@ body.x-body { #view { @include hardware-accelerate(); - min-height: 100%; - width: 1024px; - margin: 0 auto; - - &.fullwidth { - width: 100%; - margin: 0; - } - - &.height-locked { - overflow: hidden; - } + + min-height: 100%; + width: 1024px; + margin: 0 auto; + + &.fullwidth { + width: 100%; + margin: 0; + } + + &.height-locked { + overflow: hidden; + } } body.white-shade-mask .body-shade-mask { @@ -92,8 +91,10 @@ body.white-shade-mask .body-shade-mask { .body-shade-mask { position: fixed; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; z-index: -1; background-color: rgba(0, 0, 0, 0.3); } @@ -103,7 +104,8 @@ body.white-shade-mask .body-shade-mask { .main-message-bar { position: fixed; - top: 0; left: 0; + top: 0; + left: 0; right: 0; height: $msg-bar-height; z-index: 999; @@ -113,7 +115,8 @@ body.white-shade-mask .body-shade-mask { .main-navigation { position: fixed; - top: 0; left: 0; + top: 0; + left: 0; right: 0; height: $header-height; z-index: 152; @@ -129,11 +132,10 @@ body.white-shade-mask .body-shade-mask { } } - &::after{ + &::after { content: ''; display: block; position: absolute; - bottom: 0; left: 0; right: 0; @@ -145,11 +147,9 @@ body.white-shade-mask .body-shade-mask { content: ''; display: block; position: absolute; - bottom: 0; left: 0; right: 0; - z-index: 1; height: 10px; overflow: hidden; @@ -163,8 +163,10 @@ body.white-shade-mask .body-shade-mask { .prompt-layer { position: fixed; - top: 0; bottom: 0; - left: 0; right: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 201; overflow: auto; @@ -183,11 +185,12 @@ body.media-viewer-open .window-container { } } - .window-container { position: fixed; - top: $header-height; bottom: 0; - left: 0; right: 0; + top: $header-height; + bottom: 0; + left: 0; + right: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 200; overflow: auto; @@ -198,7 +201,6 @@ body.media-viewer-open .window-container { } &.full-screen { - html.x-viewport.msg-bar-open & { top: 0; } @@ -220,21 +222,22 @@ body.media-viewer-open .window-container { margin: 20px auto; background-color: white; - .window-header{ + .window-header { .title { - span{ + span { color: var(--primary-blue); - &:after { - content: ' / '; - color: var(--tertiary-grey); + &::after { + content: ' / '; + color: var(--tertiary-grey); } - &:last-of-type:after { - content: ''; + &:last-of-type::after { + content: ''; } + &:last-of-type { - color: var(--tertiary-grey); + color: var(--tertiary-grey); } } } diff --git a/src/main/resources/scss/legacy.scss b/src/main/resources/scss/legacy.scss index 266c4bc25b..7b13b64980 100644 --- a/src/main/resources/scss/legacy.scss +++ b/src/main/resources/scss/legacy.scss @@ -1,14 +1,11 @@ $accessibility_mode: false; - @import "base/fonts", "utils/variables", "utils/animate", "layout/main-layout"; - @import "nti-override.css"; - @import "debris/reader", @@ -54,7 +51,6 @@ $accessibility_mode: false; "debris/context", "debris/nti-select", - "debris/contact-search", "debris/contacts", "debris/oobe-contacts", diff --git a/src/main/resources/scss/nti-override.scss b/src/main/resources/scss/nti-override.scss index ca5eedf4d8..f7a4f443ee 100644 --- a/src/main/resources/scss/nti-override.scss +++ b/src/main/resources/scss/nti-override.scss @@ -1,7 +1,6 @@ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic); @import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700); @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic); - @import "base/fonts"; @import "utils/variables", @@ -16,36 +15,36 @@ display: inline; } -.x-ie10, .x-ie{ +.x-ie10, .x-ie { li > p.par { display: inline; } } .x-gecko .mathjax.math.tex2jax_process { - font-size: 101%; + font-size: 101%; } .x-ie .mathjax.math.tex2jax_process { - font-size: 101%; + font-size: 101%; } .x-webkit .mathjax.math.tex2jax_process { - font-size: 101%; + font-size: 101%; } .x-webkit.x-mac .mathjax.math.tex2jax_process { - font-size: 101%; + font-size: 101%; } -#NTIContent .itemize, .enumerate{ +#NTIContent .itemize, .enumerate { z-index: 4; } -body.x-body {margin:0;} +body.x-body { margin: 0; } + #NTIContent { -webkit-font-smoothing: antialiased; - padding-bottom: 10em; &, * { @@ -61,7 +60,7 @@ body.x-body {margin:0;} line-height: normal; } - .overlayed *{ + .overlayed * { display: none; } @@ -71,7 +70,7 @@ body.x-body {margin:0;} background-color: #f0f0f0; padding-top: 16px; padding-bottom: 16px; - font-family: Monaco, "Courier New", Courier, fixed; + font-family: Monaco, "Courier New", Courier, monospace; padding-left: 4ex; overflow: scroll; word-wrap: normal; @@ -93,13 +92,13 @@ body.x-body {margin:0;} } &.code .ln { color: grey; } /* line numbers */ - &.code, code { background-color: #eeeeee } - &.code .comment, code .comment { color: #5C6576 } - &.code .keyword, code .keyword { color: #3B0D06; font-weight: bold } - &.code .literal.string, code .literal.string { color: #0C5404 } - &.code .name.builtin, code .name.builtin { color: #352B84 } - &.code .deleted, code .deleted { background-color: #DEB0A1} - &.code .inserted, code .inserted { background-color: #A3D289} + &.code, code { background-color: #eee; } + &.code .comment, code .comment { color: #5c6576; } + &.code .keyword, code .keyword { color: #3b0d06; font-weight: bold; } + &.code .literal.string, code .literal.string { color: #0c5404; } + &.code .name.builtin, code .name.builtin { color: #352b84; } + &.code .deleted, code .deleted { background-color: #deb0a1; } + &.code .inserted, code .inserted { background-color: #a3d289; } } sup { @@ -124,8 +123,8 @@ body.x-body {margin:0;} white-space: nowrap; .divider { - font-size: 140%; - vertical-align: -4%; + font-size: 140%; + vertical-align: -4%; } } @@ -152,11 +151,11 @@ body.x-body {margin:0;} .algorithm-function { text-decoration: overline; - background-color: #F0F0F0; + background-color: #f0f0f0; padding-top: 0.5em; padding-bottom: 0.5em; padding-left: 4ex; - font-family: times; + font-family: serif; line-height: normal; } @@ -166,11 +165,11 @@ body.x-body {margin:0;} .minipage { display: inline-block; - margin-top: .5em; - margin-right: .25em; - margin-bottom: .5em; - margin-left: .25em; - vertical-align: middle; + margin-top: 0.5em; + margin-right: 0.25em; + margin-bottom: 0.5em; + margin-left: 0.25em; + vertical-align: middle; } .caption { @@ -184,10 +183,12 @@ body.x-body {margin:0;} overflow: hidden; //Magic non-standard CSS: + /* stylelint-disable */ /* autoprefixer: off */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; + /* stylelint-enable*/ } } @@ -259,6 +260,7 @@ body.x-body {margin:0;} repeat: no-repeat; position: center 10px; } + height: 360px; } } @@ -267,7 +269,7 @@ body.x-body {margin:0;} -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 1px); - transform: translate3d(0,0,1px); + transform: translate3d(0, 0, 1px); -webkit-perspective: 1000px; perspective: 1000px; } @@ -275,19 +277,22 @@ body.x-body {margin:0;} .injected-related-items { font-family: var(--body-font-family); margin: 15px 0 0 0; - font-size: 14px; + .related { color: #84b93d; - a::after{ + + a::after { content: ', '; } + a.c10::after, a:last-of-type::after { content: ' '; } - a{display: none;} + a { display: none; } + a.c1, a.c2, a.c3, @@ -303,11 +308,12 @@ body.x-body {margin:0;} } cursor: pointer; + &.showall { white-space: normal; cursor: auto; - .related a{display: inline;} - .more {display: none;} + .related a { display: inline; } + .more { display: none; } } } @@ -319,8 +325,8 @@ body.x-body {margin:0;} div.section-problems, div.challenge-problems, div.review-problems, - div.exercises{ - &::before{ + div.exercises { + &::before { background: none; } @@ -348,7 +354,7 @@ body.x-body {margin:0;} .concept, .warning, .game, - .sidebar{ + .sidebar { padding: 1em; background-image: none; background-color: rgba(235, 235, 235, 0.3); @@ -366,18 +372,18 @@ body.x-body {margin:0;} margin: 1rem 0; } - object[type$=ntisequence] { display: block; padding: 12px 15px; - & > button.audio-clip:first-child {margin-top: 5px;float: left;} + & > button.audio-clip:first-child { margin-top: 5px; float: left; } } object[type$=ntisequenceitem] { display: none; position: static; padding-right: 25px; + &.active { display: inline-block; } @@ -388,9 +394,8 @@ body.x-body {margin:0;} margin-left: 30px; } - div { - &.mathjax{ + &.mathjax { &.answer, &.response { clear: both; @@ -401,14 +406,14 @@ body.x-body {margin:0;} } .result { - padding: 1.2em; + padding: 1.2em; &.correct { - background-color: #77BB4E; + background-color: #77bb4e; } &.incorrect { - background-color: #DD8888; + background-color: #d88; } } @@ -427,20 +432,21 @@ body.x-body {margin:0;} line-height: 2.2em; blockquote.ntiblockquote { - margin: 0px; + margin: 0; + p { font-size: 18px; font-style: italic; line-height: 1.67; color: var(--secondary-grey); border-left: 3px solid var(--secondary-grey); - margin: 20px 0px; - padding: 0px 20px; + margin: 20px 0; + padding: 0 20px; } } &.no-padding { - margin-top:0; + margin-top: 0; } .chapter.title, @@ -453,7 +459,7 @@ body.x-body {margin:0;} margin-top: 2em; margin-bottom: 0.5em; - span.ref{ + span.ref { display: block; width: 65px; text-align: right; @@ -493,6 +499,7 @@ body.x-body {margin:0;} .subsubparagraph { &.title { font-weight: bold; + font-size: 14px; } } @@ -500,114 +507,109 @@ body.x-body {margin:0;} font-size: 1.8em; } - .paragraph.title, - .subparagraph.title, - .subsubparagraph.title { - font-size: 14px; - } - .bibitem > p.par { - display: inline; + display: inline; } - .placeholder {display: none;} - - } - - .mdseries {font-weight: 600;} - .bfseries {font-weight: bold;} - .tiny {font-size: x-small;} - .scriptsize {font-size: smaller;} - .footnotesize {font-size: small;} - .small {font-size: small;} - .normalsize {font-size: 100%;} - .large {font-size: 120%; line-height: 1.3em;} - .xlarge {font-size: 130%; line-height: 1.4em;} - .xxlarge {font-size: 140%; line-height: 1.5em;} - .huge {font-size: 150%; line-height: 1.6em;} - .xhuge {font-size: 160%; line-height: 1.7em;} - .raise15 {margin-bottom: 10px;} - .raise14 {margin-bottom: 10px;} - .raise13 {margin-bottom: 10px;} - .raise12 {margin-bottom: 10px;} - .raise11 {margin-bottom: 10px;} - .raise10 {margin-bottom: 10px;} - .raise9 {margin-bottom: 9px;} - .raise8 {margin-bottom: 8px;} - .raise7 {margin-bottom: 7px;} - .raise6 {margin-bottom: 6px;} - .raise5 {margin-bottom: 5px;} - .raise4 {margin-bottom: 4px;} - .raise3 {margin-bottom: 3px;} - .raise2 {margin-bottom: 2px;} - .raise1 {margin-bottom: 1px;} - .raise0 {margin-bottom: 0px;} - .lower0 {margin-bottom: -0px;} - .lower1 {margin-bottom: -1px;} - .lower2 {margin-bottom: -2px;} - .lower3 {margin-bottom: -3px;} - .lower4 {margin-bottom: -4px;} - .lower5 {margin-bottom: -5px;} - .lower6 {margin-bottom: -6px;} - .lower7 {margin-bottom: -7px;} - .lower8 {margin-bottom: -8px;} - .lower10 {margin-bottom: -10px;} - .lower11 {margin-bottom: -11px;} - .lower12 {margin-bottom: -12px;} - .lower13 {margin-bottom: -13px;} - .lower14 {margin-bottom: -14px;} - .lower15 {margin-bottom: -15px;} - .lower16 {margin-bottom: -16px;} - .lower17 {margin-bottom: -17px;} - .lower18 {margin-bottom: -18px;} - .lower19 {margin-bottom: -19px;} - .lower20 {margin-bottom: -20px;} - .lower21 {margin-bottom: -21px;} - .lower22 {margin-bottom: -22px;} - .lower23 {margin-bottom: -23px;} - .lower24 {margin-bottom: -24px;} - .lower25 {margin-bottom: -25px;} - .lower26 {margin-bottom: -26px;} - .lower27 {margin-bottom: -27px;} - .lower28 {margin-bottom: -28px;} - .lower29 {margin-bottom: -29px;} - .lower30 {margin-bottom: -20px;} - .lower20 {margin-bottom: -20px;} + .placeholder { display: none; } + } + + .mdseries { font-weight: 600; } + .bfseries { font-weight: bold; } + .tiny { font-size: x-small; } + .scriptsize { font-size: smaller; } + .footnotesize { font-size: small; } + .small { font-size: small; } + .normalsize { font-size: 100%; } + .large { font-size: 120%; line-height: 1.3em; } + .xlarge { font-size: 130%; line-height: 1.4em; } + .xxlarge { font-size: 140%; line-height: 1.5em; } + .huge { font-size: 150%; line-height: 1.6em; } + .xhuge { font-size: 160%; line-height: 1.7em; } + .raise15 { margin-bottom: 10px; } + .raise14 { margin-bottom: 10px; } + .raise13 { margin-bottom: 10px; } + .raise12 { margin-bottom: 10px; } + .raise11 { margin-bottom: 10px; } + .raise10 { margin-bottom: 10px; } + .raise9 { margin-bottom: 9px; } + .raise8 { margin-bottom: 8px; } + .raise7 { margin-bottom: 7px; } + .raise6 { margin-bottom: 6px; } + .raise5 { margin-bottom: 5px; } + .raise4 { margin-bottom: 4px; } + .raise3 { margin-bottom: 3px; } + .raise2 { margin-bottom: 2px; } + .raise1 { margin-bottom: 1px; } + .raise0 { margin-bottom: 0; } + .lower0 { margin-bottom: 0; } + .lower1 { margin-bottom: -1px; } + .lower2 { margin-bottom: -2px; } + .lower3 { margin-bottom: -3px; } + .lower4 { margin-bottom: -4px; } + .lower5 { margin-bottom: -5px; } + .lower6 { margin-bottom: -6px; } + .lower7 { margin-bottom: -7px; } + .lower8 { margin-bottom: -8px; } + .lower10 { margin-bottom: -10px; } + .lower11 { margin-bottom: -11px; } + .lower12 { margin-bottom: -12px; } + .lower13 { margin-bottom: -13px; } + .lower14 { margin-bottom: -14px; } + .lower15 { margin-bottom: -15px; } + .lower16 { margin-bottom: -16px; } + .lower17 { margin-bottom: -17px; } + .lower18 { margin-bottom: -18px; } + .lower19 { margin-bottom: -19px; } + .lower20 { margin-bottom: -20px; } + .lower21 { margin-bottom: -21px; } + .lower22 { margin-bottom: -22px; } + .lower23 { margin-bottom: -23px; } + .lower24 { margin-bottom: -24px; } + .lower25 { margin-bottom: -25px; } + .lower26 { margin-bottom: -26px; } + .lower27 { margin-bottom: -27px; } + .lower28 { margin-bottom: -28px; } + .lower29 { margin-bottom: -29px; } + .lower30 { margin-bottom: -20px; } .subfloat { display: inline-table; padding: 1em 3em 1em 3em; - text-align: center + text-align: center; } - .rightpic, .leftpic {margin: 1.5em;} + .rightpic, .leftpic { margin: 1.5em; } .putright { position: absolute; right: 0; padding: 0; margin: 0 1em; + * { margin: 0; padding: 0; } } - .align-center {text-align: center;} - .align-left {text-align: left;} - .align-right{text-align: right;} - .align-bottom {vertical-align:top;} + .align-center { text-align: center; } + .align-left { text-align: left; } + .align-right { text-align: right; } + .align-bottom { vertical-align: top; } .bigskip { margin: 0; padding: 0; margin-bottom: 24pt; } + .medskip { margin: 0; padding: 0; margin-bottom: 12pt; } + .smallskip { margin: 0; padding: 0; @@ -639,7 +641,6 @@ body.x-body {margin:0;} position: absolute; } } - } .x-gecko .course-info-panel li { diff --git a/src/main/resources/scss/utils/_animate.scss b/src/main/resources/scss/utils/_animate.scss index 816dde8b32..30cb7950b6 100644 --- a/src/main/resources/scss/utils/_animate.scss +++ b/src/main/resources/scss/utils/_animate.scss @@ -3,7 +3,9 @@ @mixin animate($name: fadeIn, $duration: 1s, $delay: 0.2s, $function: ease, $mode: both, $iteration:null) { @if $iteration==null { - } @else { + } + + @else { @include experimental(animation-iteration-count, $iteration); @include experimental(animation-direction, normal); } @@ -34,12 +36,15 @@ @-webkit-keyframes #{$animation-name} { @content; } + @-moz-keyframes #{$animation-name} { @content; } + @-ms-keyframes #{$animation-name} { @content; } + @keyframes #{$animation-name} { @content; } @@ -51,7 +56,7 @@ } @include keyframes(loadingellipse) { - 25% {width: 0; } + 25% { width: 0; } 50% { width: 0.466667em; } 75% { width: 0.933333em; } 100% { width: 1.4em; } @@ -63,10 +68,10 @@ } @include keyframes(pulsate) { - 0% { opacity: 0.50;} - 33% {opacity: 1.0;} - 66% {opacity: 0.50;} - 100% {opacity: 1.0;} + 0% { opacity: 0.5; } + 33% { opacity: 1; } + 66% { opacity: 0.5; } + 100% { opacity: 1; } } @include keyframes(pulse) { @@ -76,104 +81,235 @@ } @include keyframes(pulseIn) { - 0% { @include experimental(transform, scale(2.5)); opacity: 0; } - 20% { @include experimental(transform, scale(2)); opacity: 0; } - 100% { @include experimental(transform, scale(1.0)); opacity: 1; } -} + 0% { + @include experimental(transform, scale(2.5)); + + opacity: 0; + } + + 20% { + @include experimental(transform, scale(2)); + + opacity: 0; + } + 100% { + @include experimental(transform, scale(1)); + + opacity: 1; + } +} @include keyframes(pulseOut) { - 0% { @include experimental(transform, scale(0.3)); opacity: 1; } - 80% { @include experimental(transform, scale(1)); opacity: 0; } - 100% { @include experimental(transform, scale(1.5)); opacity: 0; } + 0% { + @include experimental(transform, scale(0.3)); + + opacity: 1; + } + + 80% { + @include experimental(transform, scale(1)); + + opacity: 0; + } + + 100% { + @include experimental(transform, scale(1.5)); + + opacity: 0; + } } @include keyframes(fadeZoomIn) { - 0% {opacity: 0; @include experimental(transform, scale(1.1)); } - 100% {opacity: 1; @include experimental(transform, scale(1));} + 0% { + opacity: 0; + + @include experimental(transform, scale(1.1)); + } + + 100% { + opacity: 1; + + @include experimental(transform, scale(1)); + } } +@include keyframes(fadeIn) { + 0% { opacity: 0; } + 100% { opacity: 1; } +} -@include keyframes(fadeIn) { 0% {opacity: 0;} 100% {opacity: 1;} } -@include keyframes(fadeOut) { 0% {opacity: 1;} 100% {opacity: 0;} } +@include keyframes(fadeOut) { + 0% { opacity: 1; } + 100% { opacity: 0; } +} @include keyframes(bounce) { - 0% {opacity:0;@include experimental(transform, translateY(0));} - 50%{opacity:1;@include experimental(transform, translateY(0));} - 80%, 100% {@include experimental(transform, translateY(0));} - 40% {@include experimental(transform, translateY(6px));} - 60% {@include experimental(transform, translateY(3px));} -} + 0% { + opacity: 0; + + @include experimental(transform, translateY(0)); + } + 50% { + opacity: 1; + + @include experimental(transform, translateY(0)); + } + 80%, 100% { @include experimental(transform, translateY(0)); } + 40% { @include experimental(transform, translateY(6px)); } + 60% { @include experimental(transform, translateY(3px)); } +} @include keyframes(bounceInRight) { - 0% { opacity: 0; @include experimental(transform, translateX(2000px)); } - 60% { opacity: 1; @include experimental(transform, translateX(-30px)); } + 0% { + opacity: 0; + + @include experimental(transform, translateX(2000px)); + } + + 60% { + opacity: 1; + + @include experimental(transform, translateX(-30px)); + } 80% { @include experimental(transform, translateX(10px)); } 100% { @include experimental(transform, translateX(0)); } } @include keyframes(fadeInDown) { - 0% { opacity: 0; @include experimental(transform, translateY(-20px)); } - 100% { opacity: 1; @include experimental(transform, translateY(0)); } + 0% { + opacity: 0; + + @include experimental(transform, translateY(-20px)); + } + + 100% { + opacity: 1; + + @include experimental(transform, translateY(0)); + } } @include keyframes(fadeInUp) { - 0% {opacity: 0;@include experimental(transform, translateY(20px));} - 100% {opacity: 1;@include experimental(transform, translateY(0));} + 0% { + opacity: 0; + + @include experimental(transform, translateY(20px)); + } + + 100% { + opacity: 1; + + @include experimental(transform, translateY(0)); + } } @include keyframes(fadeInLeftBig) { - 0% { opacity: 0; @include experimental(transform, translateX(-2000px)); } - 100% { opacity: 1; @include experimental(transform, translateX(0)); } + 0% { + opacity: 0; + + @include experimental(transform, translateX(-2000px)); + } + + 100% { + opacity: 1; + + @include experimental(transform, translateX(0)); + } } @include keyframes(fadeInLeft) { - 0% { opacity: 0; @include experimental(transform, translateX(-20px)); } - 100% { opacity: 1; @include experimental(transform, translateX(0)); } + 0% { + opacity: 0; + + @include experimental(transform, translateX(-20px)); + } + + 100% { + opacity: 1; + + @include experimental(transform, translateX(0)); + } } @include keyframes(fadeInRight) { - 0% { opacity: 0; @include experimental(transform, translateX(20px)); } - 100% { opacity: 1; @include experimental(transform, translateX(0)); } + 0% { + opacity: 0; + + @include experimental(transform, translateX(20px)); + } + + 100% { + opacity: 1; + + @include experimental(transform, translateX(0)); + } } @include keyframes(fadeOutRight) { - 0% { opacity: 1; @include experimental(transform, translateX(0)); } - 100% { opacity: 0; @include experimental(transform, translateX(20px)); } + 0% { + opacity: 1; + + @include experimental(transform, translateX(0)); + } + + 100% { + opacity: 0; + + @include experimental(transform, translateX(20px)); + } } @include keyframes(fadeOutDown) { - 0% { opacity: 1; @include experimental(transform, translateY(0)); } - 100% { opacity: 0; @include experimental(transform, translateY(20px)); } + 0% { + opacity: 1; + + @include experimental(transform, translateY(0)); + } + + 100% { + opacity: 0; + + @include experimental(transform, translateY(20px)); + } } @include keyframes(shake) { - 0%, 100% {@include experimental(transform, translateX(0));} - 10%, 30%, 50%, 70%, 90% {@include experimental(transform, translateX(-10px));} - 20%, 40%, 60%, 80% {@include experimental(transform, translateX(10px));} + 0%, 100% { @include experimental(transform, translateX(0)); } + 10%, 30%, 50%, 70%, 90% { @include experimental(transform, translateX(-10px)); } + 20%, 40%, 60%, 80% { @include experimental(transform, translateX(10px)); } } @include keyframes(rollIn) { - 0% { opacity: 0; @include experimental(transform, translateX(-100%) rotate(-120deg)); } - 100% { opacity: 1; @include experimental(transform, translateX(0px) rotate(0deg)); } -} + 0% { + opacity: 0; + + @include experimental(transform, translateX(-100%) rotate(-120deg)); + } + + 100% { + opacity: 1; + @include experimental(transform, translateX(0) rotate(0deg)); + } +} @include keyframes(FullScreenSlideInRight) { 0% { @include experimental(transform, translate3d(100%, 0, 0)); } 100% { @include experimental(transform, translateX(0)); } } + @include keyframes(FullScreenSlideOutRight) { 0% { @include experimental(transform, translateX(0)); } 100% { @include experimental(transform, translateX(100%)); } } - @include keyframes(FullScreenSlideInLeft) { 0% { @include experimental(transform, translateX(-100%)); } 100% { @include experimental(transform, translateX(0)); } } + @include keyframes(FullScreenSlideOutLeft) { 0% { @include experimental(transform, translateX(0)); } 100% { @include experimental(transform, translateX(-100%)); } diff --git a/src/main/resources/scss/utils/_common-mixins.scss b/src/main/resources/scss/utils/_common-mixins.scss index 7282e4056a..c440d9848b 100644 --- a/src/main/resources/scss/utils/_common-mixins.scss +++ b/src/main/resources/scss/utils/_common-mixins.scss @@ -9,14 +9,13 @@ } @mixin icon-font() { - font-family: 'icomoon'; + font-family: 'icomoon', serif; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; - -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -45,11 +44,12 @@ filter: url(#blur-effect);//moz filter: blur(add = 0, direction = 0, strength = 10);//IE body:not(.x-safari) { + filter: blur(8px); -webkit-filter: blur(8px); } } -@mixin loadingSpinner($top:8px, $left: 10px){ +@mixin loadingSpinner($top:8px, $left: 10px) { display: block; content: ' '; background: { @@ -58,6 +58,7 @@ position: center center; repeat: no-repeat; } + width: 24px; height: 24px; position: absolute; @@ -73,11 +74,12 @@ display: inline-block; overflow: hidden; vertical-align: bottom; + @include animate($name: loadingellipse, $duration: 0.75s, $delay: $animation-delay, $function: linear, $iteration:infinite); } } -@mixin presence-style{ +@mixin presence-style { width: 7px; height: 7px; border-radius: 90px; @@ -86,17 +88,19 @@ &.Online,&.online,&.available { background: var(--primary-green); } - &.idle {} - &.away{ + // &.idle {} + + &.away { background: #ebcd25; } + &.DnD,&.dnd { background: var(--primary-red); } } -@mixin presence-style-sudo($x:0,$y:0, $xSide:'left', $ySide:'top', $side:'after'){ - &::#{$side}{ +@mixin presence-style-sudo($x:0,$y:0, $xSide:'left', $ySide:'top', $side:'after') { + &::#{$side} { width: 7px; height: 7px; border-radius: 90px; @@ -109,40 +113,42 @@ } &.Online,&.available { - &::#{$side}{ + &::#{$side} { background: var(--primary-green); } } - &.idle {} - &.away{ - &::#{$side}{ + // &.idle {} + + &.away { + &::#{$side} { background: #ebcd25; } } + &.DnD,&.dnd { - &::#{$side}{ + &::#{$side} { background: var(--primary-red); } } } -@mixin accessibility-option($style, $non-accessible, $accessible){ +@mixin accessibility-option($style, $non-accessible, $accessible) { @if $accessibility_mode { #{$style}: $accessible; - } @else { + } + + @else { #{$style}: $non-accessible; } } - @mixin icon($name, - $top: 0, - $left: 0, - $right: auto, - $side: 'after', - $position:relative - ) -{ +$top: 0, +$left: 0, +$right: auto, +$side: 'after', +$position:relative +) { @if $position != none { position: $position; } @@ -153,21 +159,22 @@ top: $top; left: $left; right: $right; + @include sprite($name); @if $position != none { position: absolute; - } @else { + } + + @else { display: inline-block; position: relative; margin-right: 0.5em; } } - } - -@mixin ellipse{ +@mixin ellipse { white-space: nowrap; text-overflow: ellipsis; } @@ -193,12 +200,10 @@ user-select: none; } - @mixin allow-select { user-select: text; } - @mixin text-content { &, * { @include text-pre-wrap; @@ -211,18 +216,19 @@ @include text-pre-wrap; } - p{ - margin:0; + p { + margin: 0; + &:empty::before { content: ' '; } } - em, em strong{ + em, em strong { font-style: italic !important; } - strong, strong em{ + strong, strong em { font-weight: bold !important; } @@ -238,44 +244,49 @@ cursor: pointer; } - .whiteboard-wrapper{ + .whiteboard-wrapper { display: inline-block; position: relative; overflow: hidden; cursor: pointer; - padding: 0px; + padding: 0; margin: 5px 2px; border: 1px solid var(--tertiary-grey-alt); - box-shadow: 2px 3px 1px 0 rgba(0,0,0,0.13); + box-shadow: 2px 3px 1px 0 rgba(0, 0, 0, 0.13); &:hover { - .fill {display: block;} + .fill { display: block; } } .fill { display: none; - position:absolute; - top: 0; left: 0; right: 0; bottom: 0; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; box-shadow: inset 0 0 0 3px white; background: rgba(63, 179, 246, 0.05); } - .centerer{ - position:absolute; + + .centerer { + position: absolute; top: 50%; left: 50%; + &, * { word-break: normal; word-wrap: normal; white-space: nowrap; } - .edit{ + .edit { font: normal 600 11px/15px var(--body-font-family) !important; position: relative; top: -15px; left: -50%; - color: #ffffff; - background: rgba(0,0,0,0.6); + color: #fff; + background: rgba(0, 0, 0, 0.6); padding: 5px 15px 5px 30px; border-radius: 90px; @@ -284,12 +295,12 @@ position: absolute; top: 5px; left: 12px; + @include sprite($image-edit-14); } } } } - } @mixin highlight-colors($onParentSelector: true, $selector:'', $nibselector:null) { @@ -299,13 +310,14 @@ ('green',var(--highlight-colors-green-menu),var(--highlight-colors-green-hover)), ('blue',var(--highlight-colors-blue-menu),var(--highlight-colors-blue-hover)) ); + @each $item in $highlight-colors { - $name: nth($item,1); - $menu_color: nth($item,2); - $hover_color: nth($item,3); - $highlight_color: rgba($hover_color,.65); + $name: nth($item, 1); + $menu_color: nth($item, 2); + $hover_color: nth($item, 3); + $highlight_color: rgba($hover_color, 0.65); - $prefix: if($onParentSelector,'&',''); + $prefix: if($onParentSelector, '&', ''); $withColor: "#{$prefix}.#{$name} #{$selector}"; $withOutColor: "#{$prefix} #{$selector}"; @@ -316,12 +328,14 @@ // color: $menu_color; background-color: $highlight_color; transition: all 0.2s; + &.highlight-mouse-over { - background-color:$hover_color; + background-color: $hover_color; transition: all 0.2s; - box-shadow: 0 0 4px rgba(0,0,0,.4); + box-shadow: 0 0 4px rgba(0, 0, 0, 0.4); } - @if($nibselector) { + + @if ($nibselector) { #{$nibselector} { border-top-color: $highlight_color; } @@ -336,87 +350,82 @@ //@include experimental(perspective, 1000); } -@mixin fixIEScrollbarGulf(){ +@mixin fixIEScrollbarGulf() { .x-ie & { margin-right: -15px !important; } } -@mixin scrollbar($track:white,$nib:rgba(0,0,0,0.5),$margin:0){ +@mixin scrollbar($track:white,$nib:rgba(0,0,0,0.5),$margin:0) { .detected-scrollbars &::-webkit-scrollbar, .detected-scrollbars &::-webkit-scrollbar-track { - width: 8px; height: 8px; + width: 8px; + height: 8px; background: $track; z-index: 0; margin: $margin; } + .detected-scrollbars &::-webkit-scrollbar-thumb { background: $nib; border: 1px solid $track; border-radius: 10px; - } - scrollbar-face-color: rgba($nib,1); - scrollbar-highlight-color: rgba($nib,1); - scrollbar-3dlight-color: rgba($nib,1); - scrollbar-darkshadow-color: rgba($nib,1); - scrollbar-shadow-color: rgba($nib,1); - scrollbar-arrow-color: rgba($nib,1); + scrollbar-face-color: rgba($nib, 1); + scrollbar-highlight-color: rgba($nib, 1); + // scrollbar-3dlight-color: rgba($nib, 1); + scrollbar-darkshadow-color: rgba($nib, 1); + scrollbar-shadow-color: rgba($nib, 1); + scrollbar-arrow-color: rgba($nib, 1); @if $track == transparent { $track: #fff; } + scrollbar-track-color: $track; } - -@mixin fade-mask(){ +@mixin fade-mask() { position: absolute; top: 0; left: 0; bottom: 0; right: 0; - - background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 78%, #ffffff 100%); + background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 78%, #fff 100%); } - -@mixin placeholder-style(){ +@mixin placeholder-style() { font-style: italic !important; color: var(--tertiary-grey); } - -@mixin clearfix_left($dist:0px) { +@mixin clearfix_left($dist:0) { clear: both; padding-left: $dist !important; } - -@mixin bottom-etch( $dark: #ebebeb, $light: var(--quad-grey) ){ - box-shadow: inset 0px -1px 0px 0px $dark; +@mixin bottom-etch( $dark: #ebebeb, $light: var(--quad-grey) ) { + box-shadow: inset 0 -1px 0 0 $dark; border: 1px solid $light; border-width: 0; border-bottom-width: 1px; } - -@mixin top-etch( $dark: #ebebeb, $light: var(--quad-grey) ){ - box-shadow: inset 0px 1px 0px 0px $light; +@mixin top-etch( $dark: #ebebeb, $light: var(--quad-grey) ) { + box-shadow: inset 0 1px 0 0 $light; border-top: 1px solid $dark !important; } - -@mixin side-panel-view-title{ +@mixin side-panel-view-title { .view-title { color: var(--tertiary-grey); - font:{size: 30px; style: italic; weight: 300;} + font: { size: 30px; style: italic; weight: 300; } + padding: 20px 18px 15px; } } - @mixin text-box-style { - background: #ffffff; + background: #fff; padding: 5px; color: var(--secondary-grey); height: 30px; @@ -433,6 +442,7 @@ &.error { @include experimental(transition, $value); + border-color: red; background-color: #ffc0c0; } @@ -443,30 +453,29 @@ } } - @mixin divider { .divider { position: relative; color: var(--secondary-grey); - background-color: #F1F1F1; + background-color: #f1f1f1; font: { size: 10px; weight: bold; } + text-transform: uppercase; line-height: 29px; padding-left: 22px; } } - @mixin like-and-favorite { .favorite, .like { cursor: pointer; float: right; } - .like{ + .like { color: var(--primary-blue); margin: 8px; padding: 0 0 0 20px; @@ -479,26 +488,31 @@ font-size: 10px; font-style: italic; font-weight: 600; + @include icon($like,$top:1px, $left:3px); - &:hover, &.on{ - &:after{ + + &:hover, &.on { + &::after { @include sprite($like_active); } } } - .favorite{ + + .favorite { margin: -1px 10px 0 0; width: 18px; height: 24px; + @include icon($bookmark,$left: 3px); + &:hover, &.on { - &:after{ + &::after { @include sprite($bookmark_active); } } } - .favorite-spacer{ + .favorite-spacer { float: right; margin: -1px 10px 0 0; width: 18px; @@ -506,25 +520,23 @@ } } - @mixin menu-label-text-treatment { color: var(--secondary-grey); font-size: 10px; font-weight: 600; overflow: hidden; text-transform: uppercase; + @include ellipse; } - @mixin system-link-def { color: var(--secondary-grey); text-decoration: underline; cursor: pointer; } - -@mixin content-link-def{ +@mixin content-link-def { color: var(--secondary-grey); @include accessibility-option(text-decoration, none, underline); @@ -533,9 +545,9 @@ line-height: 1.5em; } - @mixin text-pre-wrap { @include experimental-value(white-space, pre-wrap); + word-wrap: break-word; // IE word-break: break-word; // WEBKIT } @@ -550,7 +562,7 @@ p { margin: 0; - &:empty::before{ + &:empty::before { content: ' '; } } @@ -563,7 +575,7 @@ font-style: italic !important; } - .body-divider .whiteboard-thumbnail{ + .body-divider .whiteboard-thumbnail { width: 240px !important; clear: both; } @@ -587,15 +599,18 @@ padding: 0 12px 0 25px; margin-left: 20px; margin-top: 4px; - border: 1px solid #D0D0D0; + border: 1px solid #d0d0d0; border-radius: 4px; - opacity: .75; + opacity: 0.75; position: relative; + &:hover { - opacity: 1; + opacity: 1; } - &::after{ + + &::after { @include sprite($add-contact); + position: absolute; content: ' '; top: 5px; @@ -605,20 +620,24 @@ } @mixin data-view { - background: #ffffff; + background: #fff; font: 11px Arial, Helvetica, sans-serif; + .item-wrap { float: left; margin: 4px; margin-right: 0; padding: 5px; overflow: hidden; + @include ellipse; span { display: block; overflow: hidden; + @include ellipse; + text-align: center; width: 86px; // for ie to ensure that the text is centered } @@ -628,7 +647,7 @@ padding: 3px; padding-bottom: 0; - img{ + img { height: 80px; width: 80px; } @@ -640,23 +659,22 @@ } } - .x-item-over{ - border:1px solid #dddddd; + .x-item-over { + border: 1px solid #ddd; background: #efefef $data-view-over-bg repeat-x left top; padding: 4px; } - .x-item-selected{ + .x-item-selected { background: #eff5fb $data-view-selected-bg repeat-x right bottom; - border:1px solid #99bbe8; + border: 1px solid #99bbe8; padding: 4px; .item { background: transparent; } } } - -@mixin arrow($pointFrom:bottom,$width:7px,$height:4px,$color:var(--primary-grey)){ +@mixin arrow($pointFrom:bottom,$width:7px,$height:4px,$color:var(--primary-grey)) { //In Internet Explorer, The"border-style: dashed" will never be // rendered unless "(width * 5) >= border-width" is true. // Since "width" is set to "0", the "dashed-border" remains @@ -669,7 +687,6 @@ display: inline-block; // Use font-size to control the size of the arrow. font-size: $width; - height: 0; line-height: 0; width: 0; @@ -678,11 +695,11 @@ border-#{$pointFrom}-color: $color; } -@mixin grayscale{ +@mixin grayscale { filter: url("data:image/svg+xml;utf8,#grayscale"); // Firefox 10+ filter: gray; // IE6-9 -webkit-filter: grayscale(100%); // Chrome 19+ & Safari 6+ - -webkit-transition: all .6s ease; // Fade to color for Chrome and Safari + -webkit-transition: all 0.6s ease; // Fade to color for Chrome and Safari -webkit-backface-visibility: hidden; // Fix for transition flickering &:hover { @@ -691,7 +708,6 @@ } } - .x-component-nti-tool-action { margin: 0 0 0 20px; white-space: nowrap; @@ -699,21 +715,24 @@ cursor: pointer; &.disabled { cursor: default; } - &:first-of-type{ margin: 0; } + &:first-of-type { margin: 0; } .icon { float: left; position: relative; width: 25px; height: 20px; - &::after{ + + &::after { content: ''; - left: 0; top: 1px; + left: 0; + top: 1px; position: absolute; overflow: hidden; } } - .label{ + + .label { margin-left: 25px; white-space: nowrap; font: normal bold 10px/20px var(--body-font-family); @@ -722,8 +741,8 @@ } &:hover,&.over { - &:not(.disabled){ - .label{ color: var(--secondary-grey); } + &:not(.disabled) { + .label { color: var(--secondary-grey); } } } } @@ -738,10 +757,10 @@ @mixin flex($values) { -webkit-box-flex: $values; - -moz-box-flex: $values; - -webkit-flex: $values; - -ms-flex: $values; - flex: $values; + -moz-box-flex: $values; + -webkit-flex: $values; + -ms-flex: $values; + flex: $values; } @mixin order($val) { diff --git a/src/main/resources/scss/utils/_variables.scss b/src/main/resources/scss/utils/_variables.scss index 41c8b66f14..55bb7c6d86 100644 --- a/src/main/resources/scss/utils/_variables.scss +++ b/src/main/resources/scss/utils/_variables.scss @@ -16,4 +16,4 @@ $icon-briefcase: "\e60c"; @import "common-mixins"; -// colors & fonts come from variables.css \ No newline at end of file +// colors & fonts come from variables.css diff --git a/src/server/lib/api.js b/src/server/lib/api.js index 220f6eae47..1e9e6ac14f 100644 --- a/src/server/lib/api.js +++ b/src/server/lib/api.js @@ -1,6 +1,5 @@ /*eslint strict:0, import/no-commonjs:0, import/order:0*/ 'use strict'; -const urlParser = require('url'); const path = require('path'); // const logger = require('./logger'); @@ -32,7 +31,7 @@ exports = module.exports = { }, postMessageQueryParams (req, res, next) { - const parts = urlParser.parse(req.url); + const parts = new URL(req.url, global.location.origin); const pathParts = parts.pathname.split('/'); res.render('post-message', {