diff --git a/docs/ui-guide/index.html b/docs/ui-guide/index.html deleted file mode 100644 index ba2daca312..0000000000 --- a/docs/ui-guide/index.html +++ /dev/null @@ -1,1638 +0,0 @@ - - - - - Superdesk Docs - - - - - -
- - - - - - diff --git a/docs/ui-guide/index.js b/docs/ui-guide/index.js deleted file mode 100644 index 6dac0b2397..0000000000 --- a/docs/ui-guide/index.js +++ /dev/null @@ -1,165 +0,0 @@ -/** - * This file is part of Superdesk. - * - * Copyright 2013, 2014 Sourcefabric z.u. and contributors. - * - * For the full copyright and license information, please see the - * AUTHORS and LICENSE files distributed with this source code, or - * at https://www.sourcefabric.org/superdesk/license - */ - -import './index.scss'; - -import 'jquery-ui/jquery-ui'; -import 'jquery-jcrop'; -import 'jquery-gridster'; -import 'moment-timezone'; -import 'lodash'; -import 'bootstrap'; -import 'angular'; -import 'angular-bootstrap-npm'; -import 'angular-resource'; -import 'angular-route'; -import 'angular-gettext'; -import 'angular-mocks'; -import 'angular-animate'; -import 'angular-embedly'; -import 'angular-embed'; -import 'angular-contenteditable'; -import 'angular-vs-repeat'; -import 'ng-file-upload'; -import 'exif-js'; -import 'raven-js'; -import 'rangy'; -import 'rangy-saverestore'; -import 'ment.io'; - -import 'core/keyboard'; -import 'core/auth'; -import 'core/datetime'; -import 'core/directives'; -import 'core/ui'; -import 'core/services'; -import 'core/superdesk'; - -import './dist/templates-cache-docs.generated'; - -var app = angular.module('superdesk.docs', [ - 'ngRoute', - 'ngResource', - 'ui.bootstrap', - - 'superdesk.core.datetime', - 'superdesk.core.ui', - 'superdesk.core.services.modal', - - 'superdesk.core.keyboard', - 'superdesk.core.directives.autofocus', - 'superdesk.core.directives.throttle', - 'superdesk.core.directives.sort', - 'superdesk.core.links', - 'superdesk.core.directives.check', - 'superdesk.core.directives.confirm', - 'superdesk.core.directives.select', - 'superdesk.core.directives.permissions', - 'superdesk.core.avatar', - 'superdesk.core.directives.dragdrop', - 'superdesk.core.directives.typeahead', - 'superdesk.core.directives.slider', - 'superdesk.core.directives.searchList' -]); - -MainDocsView.$inject = ['$location', '$anchorScroll', 'asset']; -function MainDocsView($location, $anchorScroll) { - return { - templateUrl: 'main.html', - link: function(scope, elem, attrs) { - scope.scrollTo = function(id) { - $location.hash(id); - $anchorScroll(); - }; - - //Modals - scope.modalActive = false; - - scope.openModal = function() { - scope.modalActive = true; - }; - - scope.closeModal = function() { - scope.modalActive = false; - }; - - //Select boxes - scope.opts = ['Serbia', 'Czech Republic', 'Germany', 'Australia']; - - //Typeahead - scope.taTerms = ['Serbia', 'Czech Republic', 'Germany', 'Australia', 'Canada', 'Russia', 'Italy', 'Egypt', 'China']; - scope.taSelected = null; - scope.taItems = []; - - scope.taSearch = function(term) { - scope.taItems = _.filter(scope.taTerms, function(t) { - return t.toLowerCase().indexOf(term.toLowerCase()) !== -1; - }); - return scope.taItems; - }; - - scope.taSelect = function(term) { - scope.taSelected = term; - }; - - //datepicker - scope.dateNow = moment().utc().format(); - - //timepicker - scope.timeNow = moment().utc().format('HH:mm:ss'); - } - }; -} - -app.directive('sdDocs', MainDocsView); -app.directive('prettyprint', function() { - return { - restrict: 'C', - link: function postLink(scope, element, attrs) { - - //remove leading whitespaces - var str = element[0].innerHTML; - var pos = 0; var sum = 0; - while (str.charCodeAt(pos) === 32) { - sum = sum + 1; - pos = pos + 1; - } - var pattern = '\\s{' + sum + '}'; - var spaces = new RegExp(pattern, 'g'); - element[0].innerHTML = str.replace(spaces, '\n'); - - //remove ng-non-bindable from code - element.find('[ng-non-bindable=""]').each(function(i, val) { - $(val).removeAttr('ng-non-bindable'); - }); - - var langExtension = attrs['class'].match(/\blang(?:uage)?-([\w.]+)(?!\S)/); - if (langExtension) { - langExtension = langExtension[1]; - } - element.html(window.prettyPrintOne(_.escape(element.html()), langExtension, true)); - } - - }; -}); - -/* globals __SUPERDESK_CONFIG__: true */ -angular.module('superdesk.config').constant('config', __SUPERDESK_CONFIG__); - -var body = angular.element('body'); -body.ready(function () { - angular.bootstrap(body, [ - 'superdesk.docs', - 'superdesk.templates-cache', - 'superdesk.config' - ]); -}); - -export default app; diff --git a/docs/ui-guide/index.scss b/docs/ui-guide/index.scss deleted file mode 100644 index f0d45429f8..0000000000 --- a/docs/ui-guide/index.scss +++ /dev/null @@ -1,311 +0,0 @@ -@import '~app.scss'; -@import '~mixins.scss'; -@import '~variables.scss'; - -.com { color: #93a1a1; } -.lit { color: #195f91; } -.pun, .opn, .clo { color: #93a1a1; } -.fun { color: #dc322f; } -.str, .atv { color: #D14; } -.kwd, .linenums .tag { color: #1e347b; } -.typ, .atn, .dec, .var { color: teal; } -.pln { color: #48484c; } - -.prettyprint { - padding: 8px; - background-color: #f7f7f9; - border: 1px solid #e1e1e8; -} -.prettyprint.linenums { - -webkit-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; - -moz-box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; - box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0; -} - -/* Specify class=linenums on a pre to get line numbering */ -ol.linenums { - margin: 0 0 0 33px; /* IE indents via margin-left */ -} -ol.linenums li { - padding-left: 12px; - color: #bebec5; - line-height: 18px; - text-shadow: 0 1px 0 #fff; -} -ol.linenums li .pln:first-child { - // width: 0; - display: inline-block; -} -ol.linenums li:last-child { - display: none; -} - -#documentation { - code { - padding: 0px 4px; - margin: 0 2px; - white-space: nowrap; - border: 1px solid #e7dab2; - background: #f3eedf; - color: #2b230b; - border-radius: 2px; - } - .badge { - padding: 3px 7px; - border-radius: 2px; - background: #4285f4; - color: #fff; - font-weight: bold; - } - .docs-header { - text-shadow: 0 1px 0 #fff; - border-bottom: 1px solid #e0e0e0; - background-color: #f3f3f3; - background-image: -moz-linear-gradient(#f9f9f9, #f3f3f3); - background-image: -webkit-linear-gradient(#f9f9f9, #f3f3f3); - background-image: linear-gradient(#f9f9f9, #f3f3f3); - background-repeat: repeat-x; - height: 45px; - position: fixed; - left: 0; right: 0; top: 0; - z-index: 10; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - box-shadow: 0 0 4px 0 #d0d0d0; - h1 { - font-size: 16px; - font-weight: 400; - color: #787878; - float:left; - line-height: 30px; - margin: 8px 0 0 10px; - span{ - color:#009360; - font-weight: 600; - } - } - nav { - margin-left: 100px; - height: 45px; - line-height: 45px; - float: left; - a { - margin-right: 20px; - font-size: 13px; - font-weight: 600; - color: #444; - text-decoration: none; - text-shadow: 1px 1px 1px #fff; - &.active { - font-weight: 700; - } - &:hover { - color: #888; - } - } - } - } - .docs-content-left { - position: fixed; - left: 0; bottom: 0; top: 45px; - width: 250px; - border-right: 1px solid #e5e5e5; - z-index: 9; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - background: #fff; - h1 { - padding: 5px 15px; - border-bottom: 1px solid #e5e5e5; - font-size: 13px; - color:#989898; - text-transform: uppercase; - } - } - .docs-content-main { - position: fixed; - bottom: 0; right: 0; top: 45px; left:250px; - z-index: 8; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - overflow: hidden; - background: #fff; - &.classic-page { - bottom: 0; right: 0; top: 45px; left:0; - } - } - .classic-page .docs-content-scroller { - max-width: 900px; - margin: 20px auto; - } - .docs-topic-list { - li { - a { - padding: 10px 15px; - border-bottom: 1px solid #e5e5e5; - color : #666; - font-size: 13px; - display: block; - cursor: pointer; - &:hover { - background: #fcf8e9; - text-decoration: none; - } - } - } - } - .docs-content-scroller { - position: absolute; - bottom: 0; right: 0; top: 0; left:0; - padding: 20px; - z-index: 8; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - overflow: hidden; - overflow-y: auto; - } - pre { - margin: 5px 0; - } - .docs-main-list { - > li { - margin-bottom: 30px; - p { - font-size: 14px; - code { - font-size: 13px; - } - } - } - .link-holder { - margin-bottom: 20px; - display: block; - height: 1px; - } - .docs-title { - font-weight: 700; - padding-bottom: 10px; - margin-bottom: 20px; - border-bottom: 1px solid #d0d0d0; - font-size: 24px; - line-height: 30px; - color:#444; - } - .docs-subtitle { - font-weight: 600; - padding-bottom: 8px; - margin-bottom: 15px; - margin-top: 30px; - border-bottom: 1px solid #d0d0d0; - font-size: 18px; - line-height: 25px; - color:#333; - } - } - .docs-preview { - margin: 15px 0; - .preview-area{ - border: 1px solid #ccc; - border-bottom: 0; - border-radius: 5px 5px 0 0; - -moz-border-radius: 5px 5px 0 0; - -webkit-border-radius: 5px 5px 0 0; - background: #fff; - padding: 10px; - } - pre { - margin-top: 0; - border-radius: 5px 5px 5px 5px; - -moz-border-radius: 5px 5px 5px 5px ; - -webkit-border-radius: 5px 5px 5px 5px ; - border: 1px solid #d0d0d0; - padding: 10px 0; - background: #f8f8f8; - } - .preview-area + pre { - border-radius: 0 0 5px 5px; - -moz-border-radius: 0 0 5px 5px ; - -webkit-border-radius: 0 0 5px 5px ; - } - } - .description-list { - display: flex; - flex-wrap: wrap; - li { - width: 300px; - max-width: 25%; - flex: 0 0 auto; - padding: 0 15px 15px 0; - @include border-box(); - img { - margin-bottom: 10px; - @include border-radius(3px); - max-width: 100%; - } - p { - padding: 0 2px 7px 2px; - line-height: 22px; - } - } - } - .simple-list { - li { - line-height: 22px; - } - } - .docs-navbar { - padding: 10px 20px !important; - min-height: 28px; - } - .avatar-docs { - .avatar-types { - .preview-area { - > div { - margin-bottom: 12px; - @include clearfix(); - > figure { - margin-right: 10px; - } - > span { - vertical-align: sub; - } - } - } - } - } - .iconFont-list { - display: flex; - flex-wrap: wrap; - li { - width: 240px; - max-width: 25%; - flex: 0 0 auto; - padding: 10px 0; - margin: 0 40px 30px 20px; - @include border-box(); - @include box-shadow(inset 0 -1px #e7e7e7); - span { - font-size: 16px; - } - i { - vertical-align: text-bottom; - margin-right: 12px; - } - } - } - form { - fieldset { - .field { - > .inline-label { - &:first-child { - margin-left: 0px; - } - } - } - } - } -} diff --git a/docs/ui-guide/superdesk.md b/docs/ui-guide/superdesk.md deleted file mode 100644 index c81528e349..0000000000 --- a/docs/ui-guide/superdesk.md +++ /dev/null @@ -1,84 +0,0 @@ -# Superdesk lib -This documentation is targeted at superdesk developers and developers in general who want to use superdesk as part of their project. It describes steps how to write your own superdesk app plus the key concepts. -Term `superdesk` here will refer to the core lib of the framework, located in `app/scripts/superdesk`, which will be released as a standalone library in the future. - -### How to write an app using superdesk -Every app is an angular module, with some config blocks that register app components and thus make them available to other apps and the framework. -```js -var app = angular.module('myApp', ['superdesk']); -``` - -There are 2 components an app can provide at the moment: -- dashboard `widgets` -- `activities` - -#### Widgets -Widget is a component that can be rendered on user dashboard. - -```js -app.config(['superdeskProvider', function(superdeskProvider) { - superdeskProvider.widget('myWidget', { - label: 'MyWidget', // string - multiple: true, // boolean - can user have more such widgets at a time (with different config) - icon: 'info', // string - `icon-` class - thumbnail: 'scripts/my-app/images/thumbnail.png', // url for thumbnail image - template: 'scripts/my-app/views/widget.html', // url for widget template - description: 'My Widget long description', // string - configuration: {max: 5}, // Object - default config for widget - configurationTemplate: 'scripts/my-app/views/config.html', // url for config template - max_sizex: 2, // integer - max horizontal size (2 of 4x4 dashboard), - max_sizey: 2, // integer - max vertical size - sizex: 1, // integer - default horizontal size - sizey: 1, // integer - default vertical size - }); -}]); -``` - -#### Activity -Activity can be displayed in a main menu, or be triggered from other apps when needed. You can also override existing activities for given action. - -##### Register Main menu activity -```js -app.config(['superdeskProvider', function(superdeskProvider) { - superdeskProvider.activity('myActivity', { - label: gettext('My App Dashboard'), - category: superdeskProvider.MENU_MAIN - }); -}]); -``` - -##### Register activity for certain action -To specify what your activity can do, you can define intent filters: - -```js -app.config(['superdeskProvider', function(superdeskProvider) { - superdeskProvider.activity('mySendActivity', { - label: gettext('Send'), - filters: [ - {action: 'send', type: 'picture'} - ] - }); -}]); -``` - -Each filter has `action` and data `type` which is used to pick the appropriate activity. - -#### Intent -When you want to start an `activity` out of your app, you have to create an `intent` for it. There you specify `action` you want to perform with data and superdesk will resolve it to an `activity` which can handle it. In case there are multiple `activities` for the task user will be presented with a dialog where he can choose one. - -```js -app.controller(function($scope, superdesk) { - $scope.send = function(item) { - superdesk.intent('send', item); - }; -}); -``` - -## Superdesk API -@ todo generate docs for: -- `superdesk` component registry -- `data` rest api adapter -- `keyboard` keyboard bindings manager -- `notify` notification service -- `storage` local storage adapter -- `translate` gettext adapter diff --git a/package.json b/package.json index 7990814473..d53e3c4215 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,6 @@ "dependencies": { "angular": "1.6.3", "angular-animate": "1.6.3", - "angular-bootstrap-npm": "jusopi/angular-bootstrap-npm#0.13.1", "angular-contenteditable": "0.0.2", "angular-dynamic-locale": "0.1.32", "angular-embed": "superdesk/angular-embed#b2b4a69", @@ -106,7 +105,8 @@ "sass-loader": "4.1.1", "style-loader": "0.13.2", "webpack": "1.14.0", - "webpack-dev-server": "1.14.1" + "webpack-dev-server": "1.14.1", + "superdesk-ui-framework": "superdesk/superdesk-ui-framework" }, "devDependencies": { "dgeni-alive": "gbbr/dgeni-alive#superdesk", diff --git a/scripts/apps/archive/index.js b/scripts/apps/archive/index.js index 5bd539de10..fd797f1a6e 100644 --- a/scripts/apps/archive/index.js +++ b/scripts/apps/archive/index.js @@ -84,7 +84,7 @@ angular.module('superdesk.apps.archive', [ .activity('upload.media', { label: gettext('Upload media'), modal: true, - cssClass: 'upload-media modal-responsive', + cssClass: 'upload-media modal--z-index-fix modal--fill', controller: ctrl.UploadController, templateUrl: 'scripts/apps/archive/views/upload.html', filters: [ diff --git a/scripts/apps/archive/views/archived-kill.html b/scripts/apps/archive/views/archived-kill.html index d7cf149550..71e839fa40 100644 --- a/scripts/apps/archive/views/archived-kill.html +++ b/scripts/apps/archive/views/archived-kill.html @@ -1,7 +1,7 @@ -
-
+
+
-
+
@@ -9,8 +9,8 @@
-
+
-
\ No newline at end of file +
diff --git a/scripts/apps/archive/views/export.html b/scripts/apps/archive/views/export.html index 3e7b509315..e078bf648a 100644 --- a/scripts/apps/archive/views/export.html +++ b/scripts/apps/archive/views/export.html @@ -1,10 +1,10 @@
-
- -

Export

+
+ +

Export

-
+
Post on 'Enter'
- - + +
diff --git a/scripts/apps/authoring/index.js b/scripts/apps/authoring/index.js index 6f7659aa90..a77705bd70 100644 --- a/scripts/apps/authoring/index.js +++ b/scripts/apps/authoring/index.js @@ -5,7 +5,6 @@ import './packages/packages.scss'; import './styles/authoring.scss'; import './styles/multiedit.scss'; import './styles/themes.scss'; -import './styles/unused.scss'; import './versioning/history/history.scss'; import './versioning/versions/versions.scss'; import './widgets/widgets-article.scss'; diff --git a/scripts/apps/authoring/metadata/metadata.scss b/scripts/apps/authoring/metadata/metadata.scss index afb35a549c..f71d416327 100644 --- a/scripts/apps/authoring/metadata/metadata.scss +++ b/scripts/apps/authoring/metadata/metadata.scss @@ -154,9 +154,6 @@ select { width: 120px; } - .sd-checkbox { - vertical-align: middle; - } } .ednote { @include clearfix(); @@ -171,8 +168,3 @@ } -button[disabled] { - background-color: $inputDisabledBackground; - border-color: #ddd; - cursor: not-allowed; -} diff --git a/scripts/apps/authoring/metadata/views/metadata-dropdown.html b/scripts/apps/authoring/metadata/views/metadata-dropdown.html index 5c4aec3220..3355c08893 100644 --- a/scripts/apps/authoring/metadata/views/metadata-dropdown.html +++ b/scripts/apps/authoring/metadata/views/metadata-dropdown.html @@ -1,4 +1,4 @@ -
+
-
    +
    • {{ label }}
      • diff --git a/scripts/apps/authoring/metadata/views/metadata-tags.html b/scripts/apps/authoring/metadata/views/metadata-tags.html index 0a0b8a8d33..264919cf41 100644 --- a/scripts/apps/authoring/metadata/views/metadata-tags.html +++ b/scripts/apps/authoring/metadata/views/metadata-tags.html @@ -1,6 +1,6 @@
      - +
      diff --git a/scripts/apps/authoring/metadata/views/metadata-terms.html b/scripts/apps/authoring/metadata/views/metadata-terms.html index 039a934513..d494505084 100644 --- a/scripts/apps/authoring/metadata/views/metadata-terms.html +++ b/scripts/apps/authoring/metadata/views/metadata-terms.html @@ -9,7 +9,7 @@
      • @@ -29,7 +29,8 @@
        • - +
        diff --git a/scripts/apps/authoring/multiedit/views/multiedit.html b/scripts/apps/authoring/multiedit/views/multiedit.html index ed218a03c9..3382ee10aa 100644 --- a/scripts/apps/authoring/multiedit/views/multiedit.html +++ b/scripts/apps/authoring/multiedit/views/multiedit.html @@ -13,7 +13,7 @@

        Multiedit

            -
          • +
          diff --git a/scripts/apps/authoring/multiedit/views/sd-multiedit-article.html b/scripts/apps/authoring/multiedit/views/sd-multiedit-article.html index 4fcfb0f96b..bf5cc4857e 100644 --- a/scripts/apps/authoring/multiedit/views/sd-multiedit-article.html +++ b/scripts/apps/authoring/multiedit/views/sd-multiedit-article.html @@ -1,12 +1,12 @@
          - - diff --git a/scripts/apps/authoring/styles/authoring.scss b/scripts/apps/authoring/styles/authoring.scss index b736dba7cf..a5e742e69a 100644 --- a/scripts/apps/authoring/styles/authoring.scss +++ b/scripts/apps/authoring/styles/authoring.scss @@ -122,7 +122,7 @@ } .dropdown__menu { padding: 10px; - top: -19px; + top: 0px; text-align: center; .avatar { display: inline-block; @@ -576,10 +576,6 @@ height: 13px; color: $grayLight; } - .dropdown__toggle { - line-height: 13px; - height: auto; - } .update-info { padding-left: 0; } @@ -603,12 +599,10 @@ textarea.ed-note { color: #d25932; } - -.dropdown { + .dropdown { width: 100%; line-height: 0; .dropdown__toggle { - @include box-sizing(border-box); @include transition(all .3s); padding: 0; .dropdown__caret { @@ -634,8 +628,7 @@ border-color: $sd-blue; } } - .dropdown__menu { - width: 100%; + .dropdown__menu { .place-dropdown { padding-left: 16px; @include text-semibold(); @@ -928,7 +921,7 @@ } button { flex-grow: 1; - min-width: 0; + min-width: 0 !important; font-weight: 500; text-overflow: ellipsis; overflow: hidden; diff --git a/scripts/apps/authoring/styles/themes.scss b/scripts/apps/authoring/styles/themes.scss index 2042bcc10e..153973caae 100644 --- a/scripts/apps/authoring/styles/themes.scss +++ b/scripts/apps/authoring/styles/themes.scss @@ -278,48 +278,51 @@ body, html { .full-preview { display: inline-block; } - .dateline { - display: flex; - input { - text-transform: uppercase; - } - input, select, option { - color: #333 !important; - font-size: 14px; - font-weight: 400 !important; + .dateline { + display: flex; + input { + text-transform: uppercase; + } + input, select, option { + color: #333 !important; + font-size: 14px; + font-weight: 400 !important; padding: 0; } - select { - width: 20%; - } - .dateline-city { - display: flex; - font-size: 14px; - line-height: 27px; - padding-right: 20px; - } - .dateline-date { - width: 100%; + select { + width: 20%; + } + .dateline-city { + display: flex; + font-size: 14px; + line-height: 27px; + padding-right: 20px; + } + .dateline-date { + width: 100%; } } + .dropdown { + display: block; + } } //labels .field { label { - @include text-normal(); - background: rgba(0, 0, 0, 0.4); - @include border-radius(2px); - color: #fff; - display: inline-block; - padding: 1px 8px 0; - font-size: 11px; - line-height: 16px; - height: 15px; - @include transition(all ease 0.2s); - opacity: 0.4; - text-transform: uppercase; - font-style: normal; - letter-spacing: 0.1em; + @include text-normal(); + background: rgba(0, 0, 0, 0.4); + @include border-radius(2px); + color: #fff; + display: inline-block; + padding: 1px 8px 0; + font-size: 11px; + line-height: 16px; + height: 15px; + @include transition(all ease 0.2s); + opacity: 0.4; + text-transform: uppercase; + font-style: normal; + letter-spacing: 0.1em; } &.active { label { @@ -357,7 +360,7 @@ body, html { -webkit-appearance: menulist-button; } .text-editor:focus, .headline:focus, .abstract:focus, input:focus, select:focus, .sms-switch:focus { - //.box-shadow(none) !important; + //.box-shadow(none) !important; border-width: 1px !important; border-color: rgba(94, 169, 200, 0.3) !important; border-bottom-color: rgba(94, 169, 200, 1) !important; @@ -365,7 +368,7 @@ body, html { } &.preview { .text-editor { - border-color: #fff !important; + border-color: #fff !important; } } // character and word counting @@ -435,15 +438,15 @@ body, html { min-height: 24px; } &::-webkit-input-placeholder { - color: #ccc; + color: #ccc; } &::-moz-placeholder { - color: #ccc; - opacity: 1; + color: #ccc; + opacity: 1; } &:focus { - &::-webkit-input-placeholder { color:transparent; } - &::-moz-placeholder { color:transparent; } + &::-webkit-input-placeholder { color:transparent; } + &::-moz-placeholder { color:transparent; } } } .image-caption { @@ -451,15 +454,15 @@ body, html { text-transform: none; line-height: 140%; &::-webkit-input-placeholder { - color: #ccc; + color: #ccc; } &::-moz-placeholder { - color: #ccc; - opacity: 1; + color: #ccc; + opacity: 1; } &:focus { - &::-webkit-input-placeholder { color:transparent; } - &::-moz-placeholder { color:transparent; } + &::-webkit-input-placeholder { color:transparent; } + &::-moz-placeholder { color:transparent; } } } #body_footer { @@ -476,8 +479,8 @@ body, html { line-height: 120% !important; @include text-semibold(); .text-editor { - min-height: 33px; - padding: 6px 0; + min-height: 33px; + padding: 6px 0; } } .abstract, .abstract p, .abstract div { @@ -490,7 +493,7 @@ body, html { } } .body { - clear: left; + clear: left; } } @@ -583,11 +586,11 @@ body, html { } .headline { font-size:28px; - .text-editor { - font-size:28px; + .text-editor { + font-size:28px; + } } } - } } .dark-theme { @@ -698,7 +701,7 @@ body, html { } } - .sderror { + .sderror { color: $dark-khaki-theme-bg !important; } } @@ -716,7 +719,7 @@ body, html { } } - .sderror { + .sderror { color: $dark-turquoise-theme-bg !important; } } @@ -734,7 +737,7 @@ body, html { } } - .sderror { + .sderror { color: $pale-yellow-theme-bg !important; } } diff --git a/scripts/apps/authoring/styles/unused.scss b/scripts/apps/authoring/styles/unused.scss deleted file mode 100644 index 12055ff28c..0000000000 --- a/scripts/apps/authoring/styles/unused.scss +++ /dev/null @@ -1,868 +0,0 @@ - -/* -[draggable] { - -moz-user-select: none; - -khtml-user-select: none; - -webkit-user-select: none; - user-select: none; -} - - -.sf-searchbox { - position:relative; - input { - padding: 4px 30px; - height: 28px; - background: url("~images/search-icon.png") no-repeat 5px center; - margin:0; - width:100%; - @include box-sizing(border-box); - background-color:#fff; - @include box-shadow(inset 0px 5px 5px -5px rgba(230,230,230,1.0)); - @include border-radius(3px); - &:focus + a { - display:block !important; - } - } - a { - position:absolute; - top:8px; - right:7px; - @include opacity(35); - line-height:13px; - display:none; - } - -} - -.tabconfig-dropdown { - width:250px; - .tabconfig { - margin-bottom:5px; - color: #383838; - &:hover { - background: none !important; - } - input[type="checkbox"] { - margin:3px 0 0; - vertical-align:top; - } - - [class^="small-icon-"], [class*="small-icon-"] { - margin-left:10px; - margin-right:5px; - } - - .switch { - display:inline-block; - width:50px; - height:16px; - background: #e8e8e8; - position:relative; - border:1px solid #a0a0a0; - float:right; - cursor:pointer; - .switch-inner { - position:absolute; - left:25px; - width:23px; - top:2px; - height:12px; - background:#0088cc; - } - &.switched-left { - .switch-inner { - left:2px !important; - } - } - input[type="checkbox"] { - display:none; - } - &.switch-disabled { - background: #f0f0f0; - border:1px solid #ccc; - .switch-inner { - background:#999999; - } - } - } - - } - -} - -.hidden-tab-container { - display:none !important; -} - -button:focus { - outline:0 !important; -} - -.switch-article-view { - position:fixed; - left:0; - top:170px; - z-index:9; - margin-left: 1px; - .switch-view-tabs { - background:#e5e5e5; - @include box-shadow (inset -5px 0px 8px -5px #999); - list-style-type:none; - margin:0; - border:1px solid #d2d2d2; - border-right:0; - @include border-top-left-radius(4px); - @include border-bottom-left-radius(4px); - li { - width:45px; - height:33px; - background-image: url("~images/switch-view-tabs.png"); - - border-bottom:1px solid #d2d2d2; - &[target-view="desktop"] { - background-position:0px 0px; - } - &[target-view="tablet"] { - background-position:0px -33px; - } - &[target-view="mobile"] { - background-position:0px -66px; - } - &[target-view="print"] { - background-position:0px -99px; - } - &:first-child { - @include border-top-left-radius(4px); - } - &:last-child { - border-bottom:0; - @include border-bottom-left-radius(4px); - } - &:hover { - background-color:#fff; - cursor:pointer; - } - &.active-view { - background-color:#fff; - } - } - } - -} -*/ - - - - -/* ALOHA */ -/* -.editor-toolbar-placeholder { - position:fixed; - z-index:100; - top:$subnav-height + $topspace; - left:0; - right:0; - height:$editor-toolbar; - @include box-sizing(border-box); - background: rgba(245,245,245,0.90); - border-bottom: 1px solid #d5d5d5; - .toolbar { - top:auto !important; - position: relative !important; - margin: 0 auto; - width: 566px; - .btn-toolbar { - margin:7px auto 0; - } - .btn { - padding: 3px 10px; - &.disabled { - @include opacity(100); - } - } - } -} - -.aloha-ui-toolbar { - top:0 !important; - left:0 !important; - display:none !important; -} - -.aloha-sidebar-bar { - display:none !important; -} - -*/ - - -/* ZEN MODE */ - -/* -.zen-buttons { - display:none; -} - -.zen-mode { - background: #fff; - .navbar-fixed-top { - display:none; - } - #main-container { - background:#fff; - .subnav { - display:none; - } - .editor-toolbar-placeholder { - top:0; - .navbar-fixed-top { - display: block; - } - .toolbar .btn { - padding: 4px 10px; - background: none !important; - border: 0; - @include box-shadow(none); - &.active { - background:#fff !important; - } - } - } - .tablist { - display:none; - } - .tabpane { - display:none; - } - .scratchpad { - display:none !important; - } - .main-article-container { - border:0; - padding-top:20px; - } - .zen-buttons { - position: fixed; - display: block; - right: 5px; - top: 5px; - z-index: 100; - .zen-close { - border:0; - background:none; - @include box-shadow(none); - margin-top:3px; - } - } - - .switch-article-view { - top:3px; - left: 3px !important; - z-index:100; - .switch-view-tabs { - border:0; - @include border-radius(0px); - li { - border:0; - @include border-radius(0px); - float:left; - @include opacity(10); - &:hover { - background-color:#fff; - @include opacity(30); - } - &.active-view { - background-color:transparent; - @include opacity(100); - } - } - } - } - - } - -} -*/ - -/* tabs */ - -/* INFO TAB - &.subject-data { - .data { - overflow: visible !important; - } - min-height: 18px; - height: auto !important; - .subject-container { - clear: both; - > ul { - text-align: left; - > li { - display: inline-block; - background: #e0e0e0; - @include border-radius(3px); - margin: 8px 8px 0 0; - padding: 3px 8px; - &:hover { - background: #d0d0d0; - cursor: pointer; - } - } - } - } - } - - .urgency-data { - width: 200px; - .urgency-slider { - float: left; - margin-top: 2px; - } - .urgency-large { - width: 23px; - height: 22px; - float: right; - display: inline-block; - background: url(~images/urgency-icons-large.png) no-repeat 0 0; - &.urgency-1 { - background-position: 0 0; - } - &.urgency-2 { - background-position: 0 -22px; - } - &.urgency-3 { - background-position: 0 -44px; - } - &.urgency-4 { - background-position: 0 -66px; - } - - &.urgency-5 { - background-position: 0 -88px; - } - } - } - - - -.confirmation-label { - display:block; - position:absolute; - right:0; - top:12px; - font-weight:normal; - @include border-radius(3px); - color:#fff; - padding:2px 4px; - line-height:13px; - font-size:11px; -} - - - // -static tabpane header with search, and dropdowns - // -currently used for - // > ingest tab, - // > article archive tab - -.generic-tabpane-header { - position:absolute; - left:$tabcontent-padding; - right:$tabcontent-padding+2; - top:$tabcontent-padding; - height:72px; - z-index:50; - border-bottom:1px solid #d6d6d6; - .tabpane-header-nav { - width:100%; - @include box-sizing(border-box); - margin:15px 0; - } - .tabpane-header-label { - color:#7d7d7d; - font-size:13px; - } -} - -.generic-tabpane-header-small { - position:absolute; - left:$tabcontent-padding; - right:$tabcontent-padding+2; - top:$tabcontent-padding; - height:48px; - z-index:50; - .tabpane-header-nav { - width:100%; - @include box-sizing(border-box); - margin:15px 0; - } - .tabpane-header-label { - color:#7d7d7d; - font-size:13px; - } -} - -// feed list -.generic-feed { - margin:0; - list-style-type:none; - position:absolute; - bottom:$tabcontent-padding + 30px; //because of scratchpad - left:$tabcontent-padding; - right:0; - top:87px; - padding-right:$tabcontent-padding; - overflow:auto; - z-index:49; - > li { - border-top:1px solid #d6d6d6; - padding: 10px 0; - position:relative; - &:first-child { - border-top:0; - } - h5 a { - color:#007fb3; - font-size:14px; - line-height:20px; - font-weight:normal; - display: block; - margin:2px 0 4px; - max-height: 40px; - overflow: hidden; - text-overflow: ellipsis; - } - .h5:after { - display:none; - } - .feed-text { - color: #000; - font-size: 13px; - line-height: 20px; - max-height: 80px; - height:auto; - overflow: hidden; - text-overflow: ellipsis; - } - .feed-info { - color:#7d7d7d; - font-style:italic; - font-size:12px; - margin-top:4px; - i.feed-icon { - width:16px; - height:16px; - margin-right:5px; - display:inline-block; - vertical-align:middle; - } - .feed-source { - padding-right:6px; - border-right: 1px solid #cacaca; - margin-right:5px; - display:inline-block; - vertical-align:middle; - line-height:16px; - } - time { - display:inline-block; - vertical-align:middle; - line-height:16px; - color: #949494; - } - } - .dropdown { - margin-top: -20px; - height: 22px; - display: none; - } - &:hover { - .dropdown { - display: block; - } - } - &.confirmed { - h5 a { - border-color: #37b300; - padding-right: 65px; - } - h5:after { - @include confirmation-label; - background-color: #37b300 !important; - content:"Confirmed"; - - } - } - &.unconfirmed { - h5 a { - border-color: #cf0000; - padding-right: 75px; - } - h5:after { - @include confirmation-label; - background-color: #cf0000 !important; - content:"Unconfirmed"; - } - } - } -} - - - -// ARTICLE ARCHIVE TAB -.article-archive-header { - @include generic-tabpane-header(); - .tabpane-header-label { - padding-top: 3px; - margin-right: 3px; - } - .sf-datepicker { - padding-top: 4px; - } -} -.article-archive { - @include generic-feed(); - > li { - &.pinned { - background: #fff; - border: 1px solid #c8c8c8; - @include border-radius(3px); - padding: 10px; - @include box-shadow(1px 1px 4px -1px #ccc); - margin-top: 10px; - .unpin-article { - position: absolute; - top: 10px; - right: 10px; - @include opacity(30); - display: none; - &:hover { - @include opacity(60); - cursor: pointer; - } - } - &:hover { - .unpin-article { - display: block; - } - } - .feed-info { - margin-top:0px; - } - .feed-text { - max-height: 40px; - } - } - &.disabled { - @include opacity(40); - cursor: default !important; - } - - } - .feed-info { - time { - font-size: 11px; - } - } -} - -.archive-list-view { - display: block; -} -.archive-single-view { - display: none; - header { - @include generic-tabpane-header-small(); - } - article { - margin:0; - position:absolute; - bottom:$tabcontent-padding + 30px; //because of scratchpad - left:$tabcontent-padding; - right:0; - top:$tabcontent-padding + 48px; - padding: 0 7px; - padding-right:$tabcontent-padding; - overflow:auto; - z-index:49; - .archive-article-info { - font-style: italic !important; - font-size: 12px; - time { - color:#949494; - } - .author { - font-family: Georgia,serif; - color: #333; - } - } - h2 { - font-family: Georgia,serif; - font-size: 22px; - line-height: 26px; - font-weight: normal; - color: #333; - margin-top: 10px; - } - h6 { - font-size:16px; - font-weight: normal; - line-height: 23px; - text-transform: none; - color: #333; - margin: 10px 0; - } - p { - font-size: 13px; - line-height: 20px; - } - } -} - - - -// INGEST TAB - -.ingest-header { - @include generic-tabpane-header(); -} -.ingest-feed { - @include generic-feed(); - li h5 a { - border-left: 5px solid #ccc; - padding-left: 7px; - } -} - -// MEDIA TAB -.media-tab { - overflow: auto; - position: absolute; - left: 15px; - right: 2px; - margin-right: 2px; - padding-right: 10px; - top: 55px; - bottom: 45px; - padding-top: 4px; - - .media-items { - list-style-type: none; - padding: 0; - margin:0; - border-top: 1px solid #dcdcdc; - padding-top: 14px; - clear: both; - position: relative; - margin-bottom: 15px; - - &:before { - font-size: 11px; - color: #666; - position: absolute; - top: -10px; - padding-right: 5px; - background: $tabpane-background; - text-transform: uppercase; - } - - &.media-images:before { - content: "Images"; - } - &.media-videos:before { - content: "Videos"; - } - &.media-sounds:before { - content: "Sounds"; - } - &.media-files:before { - content: "Files"; - } - - li[class*="media-"] { - position: relative; - background: #fff; - border: 1px solid #c8c8c8; - padding: 7px; - min-height: 50px; - margin-bottom: 10px; - @include box-shadow(0 3px 5px -3px #aaa); - @include border-radius(4px); - - .dropdown { - display: none; - width: 20px; - position: absolute; - top:4px; - right: 7px; - .dropdown__toggle { - padding: 1px 5px; - } - } - &:hover { - .dropdown { display: block; } - } - - &.media-image, &.media-video { - figure { - border: 1px solid #9d9d9d; - padding: 1px; - float: left; - margin-right: 10px; - img { - width: 62px; - max-width: 62px; - } - } - - .media-description { - padding-left: 75px; - line-height: 15px; - font-size: 12px; - &:before { - color: #666; - text-transform: uppercase; - font-size: 9px; - display: block; - } - &.approved:before { - content: "Approved"; - } - &.unapproved:before { - content: "Unapproved"; - } - .size-info { - display: block; - height: 15px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - } - } - - &.media-sound { - min-height: 27px; - background: #fff url(~images/media-player-icon.png) no-repeat 7px 7px; - - .media-description { - padding-left: 45px; - padding-right: 20px; - line-height: 15px; - font-size: 12px; - } - } - - &.media-file { - min-height: auto; - - .media-description { - padding-left: 5px; - padding-right: 20px; - line-height: 15px; - font-size: 12px; - } - } - - - } - - } - -} - -// SWITCHES TAB -.switches-tab { - overflow: auto; - position: absolute; - left: 15px; - right: 2px; - margin-right: 2px; - padding-right: 10px; - top: 15px; - bottom: 45px; - padding-top: 4px; -} - - -// INTER/INTRA DESK NOTIFICATION TAB - -.notification-tab { - - - .notification-write-box { - position: absolute; - bottom: 0px; - left: 0px; - right: 0px; - padding: 10px 10px 40px; - @include box-shadow(0px -6px 5px -3px #dfdfdf); - border-top: 1px solid #fff; - background: $tabpane-background; - .notification-writer { - border: 2px solid #00afd0 !important; - @include border-radius(5px) !important; - line-height: 18px; - padding: 5px 10px; - @include box-sizing(border-box); - height: 30px; - resize: none; - color: #787878; - overflow: hidden; - &.important { - border-color:#d01d1d !important; - } - } - .button-area { - margin: 10px 0 5px 0; - display: none; - } - .notification-important { - width: 16px; - height: 16px; - padding: 2px; - @include box-sizing(border-box); - position: absolute; - right: 15px; - top: 11px; - @include opacity(70); - display: none; - &:hover { - @include opacity(90); - cursor: pointer; - } - } - } - - &.typing-active { - .notification-list-box { - bottom:163px; - } - .notification-write-box { - .notification-writer { - height: 70px; - overflow: auto; - } - .button-area { - display: block; - } - .notification-important { - display: block; - } - } - } - -} - -.temptabcont p { - font-size: 14px; - margin-right: 20px; - line-height: 22px; - margin-top: 10px; - border-top: 1px solid #ddd; - padding-top: 10px; -} - - -*/ diff --git a/scripts/apps/authoring/suggest/styles.scss b/scripts/apps/authoring/suggest/styles.scss index bafb913186..adb4831d59 100644 --- a/scripts/apps/authoring/suggest/styles.scss +++ b/scripts/apps/authoring/suggest/styles.scss @@ -11,7 +11,7 @@ sd-suggest { z-index: 100; background: #fff; position: absolute; - top: 47px; + top: 0px; left: -$panel-width; height: 100%; padding: 48px 0 0; diff --git a/scripts/apps/authoring/versioning/history/views/publish_queue.html b/scripts/apps/authoring/versioning/history/views/publish_queue.html index e3fdd5e4a9..1c39e6b535 100644 --- a/scripts/apps/authoring/versioning/history/views/publish_queue.html +++ b/scripts/apps/authoring/versioning/history/views/publish_queue.html @@ -24,11 +24,11 @@
        -
        -
        +
        +

        Item sent to Subscriber

        -
        +
        {{transmitted_item }}
        diff --git a/scripts/apps/authoring/versioning/versions/views/versions.html b/scripts/apps/authoring/versioning/versions/views/versions.html index 8570b1cc6a..f95d4a1a6d 100644 --- a/scripts/apps/authoring/versioning/versions/views/versions.html +++ b/scripts/apps/authoring/versioning/versions/views/versions.html @@ -13,7 +13,7 @@
        {{ :: version.headline || ('Unti
        {{ :: 'version' | translate }}: {{ version._current_version }}
        {{ :: version.state | translate }}
        - diff --git a/scripts/apps/authoring/views/article-edit.html b/scripts/apps/authoring/views/article-edit.html index eb5b212677..92b4ae7b31 100644 --- a/scripts/apps/authoring/views/article-edit.html +++ b/scripts/apps/authoring/views/article-edit.html @@ -228,7 +228,7 @@
        - diff --git a/scripts/apps/authoring/views/authoring-topbar.html b/scripts/apps/authoring/views/authoring-topbar.html index 291b2d2f21..aed5491a5f 100644 --- a/scripts/apps/authoring/views/authoring-topbar.html +++ b/scripts/apps/authoring/views/authoring-topbar.html @@ -16,7 +16,7 @@
        {{ item.lock_user | username }}
        -
        @@ -152,10 +152,9 @@
      • -
          +
          @@ -165,9 +164,8 @@
          -
            +
            @@ -184,55 +182,50 @@
              -
            • +
            • Mark item for
            • - -
                +
                • - -
                    +
                      -
                    • +
                    • Translations
                    • -
                        +
                          -
                        • +
                        • Spell Checker
                          • -
                        • - - - Run automatically - +
                        • + + Run automatically
                        • -
                        +
                        -
                        +
                        diff --git a/scripts/apps/authoring/views/confirm-media-associated.html b/scripts/apps/authoring/views/confirm-media-associated.html index e21c6f6957..554f641aa2 100644 --- a/scripts/apps/authoring/views/confirm-media-associated.html +++ b/scripts/apps/authoring/views/confirm-media-associated.html @@ -1,9 +1,9 @@ -
                        -
                        -

                        Do you want to add an image to this update?

                        +
                        +
                        +

                        Do you want to add an image to this update?

                        -
                        +
                        @@ -13,7 +13,7 @@

                        Do you want to add an image to this update?

                        -
                        +
                        diff --git a/scripts/apps/authoring/views/dashboard-articles.html b/scripts/apps/authoring/views/dashboard-articles.html index 3bdd306bcd..a08c6424fa 100644 --- a/scripts/apps/authoring/views/dashboard-articles.html +++ b/scripts/apps/authoring/views/dashboard-articles.html @@ -1,19 +1,17 @@
                        -
                        -

                        Currently working on

                        -
                        - -
                        +
                        + +

                        Currently working on

                        -
                        +
                        - +
                        - +
                        diff --git a/scripts/apps/authoring/views/dashboard.html b/scripts/apps/authoring/views/dashboard.html index 243e75cf20..0c4da0aabc 100644 --- a/scripts/apps/authoring/views/dashboard.html +++ b/scripts/apps/authoring/views/dashboard.html @@ -2,8 +2,8 @@

                        Currently working on:

                        -
                        - +
                        +
                          diff --git a/scripts/apps/authoring/views/full-preview.html b/scripts/apps/authoring/views/full-preview.html index 5221c64586..d80492811f 100644 --- a/scripts/apps/authoring/views/full-preview.html +++ b/scripts/apps/authoring/views/full-preview.html @@ -1,5 +1,5 @@ -
                          -
                          +
                          +
                          @@ -9,7 +9,7 @@
                          -
                          +
                          diff --git a/scripts/apps/authoring/views/item-association.html b/scripts/apps/authoring/views/item-association.html index cc778ec0d1..01f831139b 100644 --- a/scripts/apps/authoring/views/item-association.html +++ b/scripts/apps/authoring/views/item-association.html @@ -2,7 +2,7 @@ ng-class="{'item-association--preview': related, 'item-association--loading': loading}" ng-click="editable && isMediaEditable() && !related && upload()">
                          -
                          diff --git a/scripts/apps/authoring/views/opened-articles.html b/scripts/apps/authoring/views/opened-articles.html index 07b324fcfa..2aedcfa307 100644 --- a/scripts/apps/authoring/views/opened-articles.html +++ b/scripts/apps/authoring/views/opened-articles.html @@ -1,6 +1,6 @@
                          - +
                          • @@ -9,7 +9,7 @@ Untitled - +
                          diff --git a/scripts/apps/authoring/views/preview-formatted.html b/scripts/apps/authoring/views/preview-formatted.html index 17ba51502b..b566ffc371 100644 --- a/scripts/apps/authoring/views/preview-formatted.html +++ b/scripts/apps/authoring/views/preview-formatted.html @@ -1,25 +1,32 @@
                          + class="modal--large"> -
                          - -

                          Preview Formatted Story

                          +
                          + +

                          Preview Formatted Story

                          -
                          +
                          -
                          - - - +
                          +
                          + + +
                          +
                          -
                          - +
                          +
                          + +
                          +
                          + +
                          -
                          +
                          \ No newline at end of file diff --git a/scripts/apps/authoring/views/sd-highlight-create.html b/scripts/apps/authoring/views/sd-highlight-create.html index 8aae3dd1d9..3bb6b2df67 100644 --- a/scripts/apps/authoring/views/sd-highlight-create.html +++ b/scripts/apps/authoring/views/sd-highlight-create.html @@ -1,5 +1,5 @@
                          • diff --git a/scripts/apps/authoring/views/send-item.html b/scripts/apps/authoring/views/send-item.html index f29f56a44e..dab476a41f 100644 --- a/scripts/apps/authoring/views/send-item.html +++ b/scripts/apps/authoring/views/send-item.html @@ -22,7 +22,7 @@ class="panel-header {{currentUserAction === vm.userActions.externalsource_to ? 'panel-header-active' : ''}}" ng-show="!canSendItem() && !canPublishItem() && currentUserAction === vm.userActions.externalsource_to" translate>Fetch To -
                          +
                          @@ -50,7 +50,7 @@
                          • @@ -64,7 +64,7 @@
                            • @@ -85,7 +85,7 @@
                              • -
                              • -
                              • -
                              • -
                              • -
                            @@ -26,12 +26,12 @@
                            {{:: filterCondition.name }}
                          -
                          -
                          -

                          Edit Filter Condition "{{ origFilterCondition.name }}"

                          -

                          Add New Filter Condition

                          +
                          +
                          +

                          Edit Filter Condition "{{ origFilterCondition.name }}"

                          +

                          Add New Filter Condition

                          -
                          +
                          @@ -72,7 +72,7 @@

                          Add New Filter Condition

                          -
                          +
                          diff --git a/scripts/apps/content-filters/views/manage-filters.html b/scripts/apps/content-filters/views/manage-filters.html index 7a717cd421..32738eb9bc 100644 --- a/scripts/apps/content-filters/views/manage-filters.html +++ b/scripts/apps/content-filters/views/manage-filters.html @@ -3,8 +3,8 @@

                          Content Filters

                          -
                          @@ -27,12 +27,12 @@
                          {{ filter.name }}
                          -
                          -
                          -

                          Edit Content Filter "{{:: origContentFilter.name }}"

                          -

                          Add New Content Filter

                          +
                          +
                          +

                          Edit Content Filter "{{:: origContentFilter.name }}"

                          +

                          Add New Content Filter

                          -
                          +
                          @@ -123,7 +123,7 @@

                          Add New Content Filter

                          -
                          +
                          diff --git a/scripts/apps/content-filters/views/production-test.html b/scripts/apps/content-filters/views/production-test.html index 4333640f83..ab1c4262b4 100644 --- a/scripts/apps/content-filters/views/production-test.html +++ b/scripts/apps/content-filters/views/production-test.html @@ -1,12 +1,12 @@
                          -
                          -
                          -

                          Filter Test Results

                          +
                          +
                          +

                          Filter Test Results

                          -
                          +
                          -
                          +
                          diff --git a/scripts/apps/dashboard/directives/Widget.js b/scripts/apps/dashboard/directives/Widget.js index a1e851fbcf..9c88bf54c4 100644 --- a/scripts/apps/dashboard/directives/Widget.js +++ b/scripts/apps/dashboard/directives/Widget.js @@ -1,6 +1,6 @@ import {ConfigController} from 'apps/dashboard/controllers'; -Widget.$inject = ['$modal', 'asset']; +Widget.$inject = ['asset', '$modal']; /** * sdWidget give appropriate template to data assgined to it @@ -11,7 +11,7 @@ Widget.$inject = ['$modal', 'asset']; * Params: * @scope {Object} widget */ -export function Widget($modal, asset) { +export function Widget(asset, $modal) { return { templateUrl: asset.templateUrl('apps/dashboard/views/widget.html'), restrict: 'A', @@ -23,7 +23,8 @@ export function Widget($modal, asset) { $modal.open({ templateUrl: 'scripts/apps/dashboard/views/configuration.html', controller: ConfigController, - scope: scope + scope: scope, + size: scope.widget.classes }); }; } diff --git a/scripts/apps/dashboard/styles/dashboard.scss b/scripts/apps/dashboard/styles/dashboard.scss index 125e620c4d..de13a2f788 100644 --- a/scripts/apps/dashboard/styles/dashboard.scss +++ b/scripts/apps/dashboard/styles/dashboard.scss @@ -435,11 +435,11 @@ Add new widget modal .widget-list { list-style-type: none; margin: 0; - padding: 0px 30px; + padding: 0px; display: flex; flex-flow: row wrap; li { - width: 197px; + width: calc(#{50%} - #{40px}); margin: 20px; padding: 0; @include box-shadow (0 1px 4px 0 rgba(0,0,0,0.2)); @@ -544,7 +544,8 @@ Add new widget modal display: flex; .thumbnail-box { position: relative; - width: 400px; + // width: 350px; + width: calc(#{60%} - #{30px}); margin-right: 30px; @include box-shadow (0 1px 4px 0 rgba(0,0,0,0.2)); @include border-radius (2px); @@ -584,7 +585,8 @@ Add new widget modal display: flex; flex-flow: row wrap; align-items: flex-start; - width: 330px; + // width: 220px; + width: calc(#{40%}); .title { font-size: 30px; line-height: 110%; @@ -595,6 +597,7 @@ Add new widget modal .description { font-size: 14px; width: 100%; + margin-bottom: 20px; } button { align-self: flex-end; diff --git a/scripts/apps/dashboard/views/configuration.html b/scripts/apps/dashboard/views/configuration.html index ca25da3aef..5fb9e9b0d2 100644 --- a/scripts/apps/dashboard/views/configuration.html +++ b/scripts/apps/dashboard/views/configuration.html @@ -1,11 +1,11 @@ -
                          - -

                          {{ widget.label|translate }} {{ 'Configuration'|translate }}

                          +
                          + +

                          {{ widget.label|translate }} {{ 'Configuration'|translate }}

                          -
                          +
                          -
                          +
                          -
                          +
                          diff --git a/scripts/apps/dashboard/views/workspace.html b/scripts/apps/dashboard/views/workspace.html index 551388d950..1def6645f1 100644 --- a/scripts/apps/dashboard/views/workspace.html +++ b/scripts/apps/dashboard/views/workspace.html @@ -1,19 +1,21 @@

                          Dashboard {{ dashboard.current.name | translate}}

                          -
                          - - - +
                          + +
                          -
                          -
                          @@ -54,55 +56,45 @@

                          Dashboard {{ dashboard.current

                          -
                          -
                          -
                          -
                          -
                          -
                          -

                          Add new widget

                          - -
                          - -
                          -
                          -
                          -
                          -
                            -
                          • -
                            -
                            {{ :: widget.label | translate}}
                            -
                            • -
                          -
                          -
                          - -
                          -
                          - -
                          -
                          -
                          - -
                          -
                          -
                          {{ :: dashboard.selectedWidget.label | translate }}
                          -
                          {{ :: dashboard.selectedWidget.description | translate }}
                          - -
                          -
                          -
                          +
                          +
                          + +

                          Add new widget

                          +
                          -
                          - -
                          +
                          +
                          +
                          +
                          +
                            +
                          • +
                            +
                            {{ :: widget.label | translate}}
                            +
                            • +
                          +
                          +
                          + +
                          +
                          -
                          -
                          +
                          +
                          + +
                          +
                          +
                          + +
                          +
                          +
                          {{ :: dashboard.selectedWidget.label | translate }}
                          +
                          {{ :: dashboard.selectedWidget.description | translate }}
                          +
                          -
                          +
                          +
                          diff --git a/scripts/apps/dashboard/workspace-tasks/views/task-preview.html b/scripts/apps/dashboard/workspace-tasks/views/task-preview.html index d21bd17cf1..3efe5f952d 100644 --- a/scripts/apps/dashboard/workspace-tasks/views/task-preview.html +++ b/scripts/apps/dashboard/workspace-tasks/views/task-preview.html @@ -8,8 +8,8 @@
                          - - + +
                          @@ -38,13 +39,13 @@
                          -
                          +
                          -
                          -

                          Create New Task

                          +
                          +

                          Create New Task

                          -
                          +
                          -
                          -
                          - - -
                          -
                          -
                          -
                          -
                          - -
                          - -
                          -
                          -
                          - -
                          - -
                          -
                          -
                          - -
                          -
                          -
                          -
                          - -
                          - -
                          -
                          -
                          - -
                          - -
                          -
                          -
                          - - {{ message }} - Character limit exceeded, desk can not be created/updated. - {{ _errorMessage }} +
                          +
                          + +
                          + +
                          + +
                          -
                          - - +
                          + +
                          - -
                          +
                          + + +
                          +
                          +
                          +
                          +
                          + +
                          + +
                          +
                          +
                          + +
                          + +
                          +
                          +
                          + +
                          +
                          +
                          +
                          + +
                          + +
                          +
                          +
                          + +
                          + +
                          +
                          +
                          + + {{ message}} + Character limit exceeded, desk can not be created/updated. + {{ _errorMessage}} + +
                          + + +
                          -
                          -
                          - -
                          +
                          +
                          +
                          Work stages
                          -
                            @@ -126,7 +120,7 @@

                            Edit "{{desk.edit.name}}" Desk

                          • - {{ stage.name }} + {{ stage.name}} @@ -161,14 +155,14 @@

                            Edit "{{desk.edit.name}}" Desk

                            ng-disabled="!enableSave() || saving" translate>Save
                            -

                            {{ message }}

                            -

                            Stage with name "{{ editStage.name }}"" already exists.

                            +

                            {{ message}}

                            +

                            Stage with name "{{ editStage.name}}"" already exists.

                            Character limit exceeded, stage can not be created/updated.

                            There was a problem, stage not created/updated.

                          -
                          +
                          Stage Details
                          @@ -186,7 +180,7 @@

                          Edit "{{desk.edit.name}}" Desk

                          - {{ selected.description }} + {{ selected.description}}
                          @@ -194,15 +188,15 @@

                          Edit "{{desk.edit.name}}" Desk

                          - {{ selected.incoming_macro }} + {{ selected.incoming_macro}}
                          - {{ selected.onstage_macro }} + {{ selected.onstage_macro}}
                          - {{ selected.outgoing_macro }} + {{ selected.outgoing_macro}}
                          @@ -267,60 +261,58 @@

                          Edit "{{desk.edit.name}}" Desk

                          -
                          - - -
                          +
                          +
                          + +
                          -
                          -
                          -
                          -
                          -

                          {{ message }}

                          -
                          -
                            -
                          • - -
                            -
                            {{:: user.display_name}}
                            -
                            • -
                          -
                          +
                          +
                          +
                          +

                          {{ message}}

                          +
                          +
                            +
                          • + +
                            +
                            {{:: user.display_name}}
                            +
                            • +
                          - {{ _errorMessage }} -
                          -
                          - -
                          + {{ _errorMessage}} +
                          + +
                          + +
                          +
                          -
                            -
                          • -
                            {{:: macro.name }}
                            -
                            - {{:: macro.access_type }}{{:: macro.action_type }} -
                            -
                            • -
                          +
                            +
                          • +
                            {{:: macro.name}}
                            +
                            + {{:: macro.access_type}}{{:: macro.action_type}} +
                            +
                            • +
                          -
                          +
                          -
                          -
                          diff --git a/scripts/apps/desks/views/desk-select.html b/scripts/apps/desks/views/desk-select.html index 4da37a68fb..b41d1cabb8 100644 --- a/scripts/apps/desks/views/desk-select.html +++ b/scripts/apps/desks/views/desk-select.html @@ -1,4 +1,4 @@ -
                          +
                            • diff --git a/scripts/apps/desks/views/desk.html b/scripts/apps/desks/views/desk.html index 3a104238be..dc1c078d0f 100644 --- a/scripts/apps/desks/views/desk.html +++ b/scripts/apps/desks/views/desk.html @@ -2,7 +2,7 @@
                            {{ desk.name }}
                            -
                            +
                              • diff --git a/scripts/apps/desks/views/settings.html b/scripts/apps/desks/views/settings.html index 526f04019a..58f3308bdd 100644 --- a/scripts/apps/desks/views/settings.html +++ b/scripts/apps/desks/views/settings.html @@ -3,8 +3,8 @@

                              Desk management

                              -
                              @@ -20,7 +20,7 @@

                              Desk management

                              • Actions
                                • -
                              • +
                                • diff --git a/scripts/apps/desks/views/user-role-items.html b/scripts/apps/desks/views/user-role-items.html index d8a4deabf0..1e2535b42e 100644 --- a/scripts/apps/desks/views/user-role-items.html +++ b/scripts/apps/desks/views/user-role-items.html @@ -17,11 +17,11 @@
                            diff --git a/scripts/apps/users/views/user-privileges.html b/scripts/apps/users/views/user-privileges.html index 2153ee5248..922b84985a 100644 --- a/scripts/apps/users/views/user-privileges.html +++ b/scripts/apps/users/views/user-privileges.html @@ -2,9 +2,9 @@
                            - +
                            diff --git a/scripts/apps/vocabularies/views/vocabulary-config-modal.html b/scripts/apps/vocabularies/views/vocabulary-config-modal.html index 928c251d94..60e6d2c8cb 100644 --- a/scripts/apps/vocabularies/views/vocabulary-config-modal.html +++ b/scripts/apps/vocabularies/views/vocabulary-config-modal.html @@ -1,28 +1,29 @@ -
                            -
                            +
                            +
                            -

                            Edit Vocabulary: {{ :: vocabulary.display_name | translate}}

                            -
                            -
                            -
                            - -
                            -
                            - +

                            Edit Vocabulary: {{ :: vocabulary.display_name | translate}}

                            +
                            +
                            +
                            +
                            + +
                            +
                            + +
                            +
                            -
                            -
                            -
                            +
                            @@ -51,14 +52,14 @@

                            Edit Vocabulary: {{ :: vocabulary.display_name | tran

                            {{ errorMessage }}

                            -
                            +
                            - - - +
                            diff --git a/scripts/apps/workspace/content/views/profile-settings.html b/scripts/apps/workspace/content/views/profile-settings.html index 715d2ce04b..6c6cfb54f4 100644 --- a/scripts/apps/workspace/content/views/profile-settings.html +++ b/scripts/apps/workspace/content/views/profile-settings.html @@ -4,13 +4,13 @@

                            Content Profiles

                            -
                            - {{:: 'Show active only'| translate}} + {{:: 'Show active only'| translate}}
                            @@ -19,20 +19,20 @@

                            Content Profiles

                            ng-repeat="type in ctrl.items | orderBy: 'label' track by type._id" ng-class="{inactive: !type.enabled}" ng-show="!active_only || (active_only && type.enabled)"> -
                            -
                            - -
                              -
                            • Actions
                              • -
                            • -
                              • -
                              • -
                            -
                            -
                            {{ type.label }}
                            -
                            +
                            +
                            + +
                              +
                            • Actions
                              • +
                            • +
                              • +
                              • +
                            +
                            +
                            {{ type.label }}
                            +
                              @@ -55,11 +55,11 @@

                              Updated

                            -
                            -
                            -

                            Add New Content Profile V

                            +
                            +
                            +

                            Add New Content Profile

                            -
                            +
                            @@ -73,18 +73,18 @@

                            Add New Content Profile V

                            -
                            +
                            -
                            -
                            -

                            {{ :: 'Editing' | translate }} "{{ editing.form.label }}"

                            +
                            +
                            +

                            {{ :: 'Editing' | translate }} "{{ editing.form.label }}"

                            -
                            +
                            @@ -114,7 +114,7 @@

                            {{ :: 'Editing' | translate }} "{{ editing.form.label }}"

                            -
                            +
                            diff --git a/scripts/apps/workspace/content/views/sd-content-create.html b/scripts/apps/workspace/content/views/sd-content-create.html index 187de5b5d1..c539c53b32 100644 --- a/scripts/apps/workspace/content/views/sd-content-create.html +++ b/scripts/apps/workspace/content/views/sd-content-create.html @@ -4,26 +4,26 @@
                            • -
                          • +
                          • Recent templates
                            @@ -31,30 +31,30 @@
                          • - + No recent templates.
                            • -
                          • +
                            • diff --git a/scripts/apps/workspace/views/edit-workspace-modal.html b/scripts/apps/workspace/views/edit-workspace-modal.html index 52c461a04b..cacd12e193 100644 --- a/scripts/apps/workspace/views/edit-workspace-modal.html +++ b/scripts/apps/workspace/views/edit-workspace-modal.html @@ -1,10 +1,10 @@
                            -
                            -

                            Create new Workspace

                            -

                            Rename Workspace

                            +
                            +

                            Create new Workspace

                            +

                            Rename Workspace

                            -
                            +
                            @@ -15,7 +15,7 @@

                            Rename Workspace

                            -
                            +
                            diff --git a/scripts/core/activity/views/activity-chooser.html b/scripts/core/activity/views/activity-chooser.html index 1961904867..11d15a5fd7 100644 --- a/scripts/core/activity/views/activity-chooser.html +++ b/scripts/core/activity/views/activity-chooser.html @@ -6,6 +6,6 @@
                          - +
                          \ No newline at end of file diff --git a/scripts/core/activity/views/activity-item.html b/scripts/core/activity/views/activity-item.html index 5a26b24276..9c33b8b2fe 100644 --- a/scripts/core/activity/views/activity-item.html +++ b/scripts/core/activity/views/activity-item.html @@ -5,7 +5,7 @@ {{ :: activity.label | translate }} -
                        • +
                        • - {{ :: activity.label | translate }} - + {{ :: activity.label | translate }}
                            diff --git a/scripts/core/activity/views/activity-modal.html b/scripts/core/activity/views/activity-modal.html index b1a1fea688..da0937d4c5 100644 --- a/scripts/core/activity/views/activity-modal.html +++ b/scripts/core/activity/views/activity-modal.html @@ -1,6 +1,6 @@ -
                            -
                            -
                            +
                            +
                            -
                            \ No newline at end of file +
                            +
                            \ No newline at end of file diff --git a/scripts/core/auth/login-modal.html b/scripts/core/auth/login-modal.html index f9b89600ae..ae36792497 100644 --- a/scripts/core/auth/login-modal.html +++ b/scripts/core/auth/login-modal.html @@ -15,7 +15,7 @@
                            - -

                            Welcome to Superdesk

                            +

                            Welcome to Superdesk

                          -
                          +

                          Before you start using your new newsroom, please tell us a little about yourself:

                          - -
                          - -
                          -
                          - - -
                          -
                          - - -
                          -
                          - - -
                          -
                          - - -
                          -
                          - - -
                          - -
                          - - -
                          - - -
                          - + +
                          +
                          +
                          +
                          + + +
                          +
                          + + +
                          +
                          + + +
                          +
                          + + +
                          +
                          + + +
                          + +
                          + + +
                          + + +
                          +

                          We will send occasional updates on Superdesk developments to the email address you have provided. Your data will be kept secure and it won't be used for any other purpose. You may opt-out of receiving further email communications at any time.

                          @@ -51,4 +51,7 @@

                          Welcome to Superdesk

                          The Superdesk project is developed and maintained on GitHub by Sourcefabric.

                          +
                          + +
                          diff --git a/scripts/core/editor2/styles/editor.scss b/scripts/core/editor2/styles/editor.scss index 41ba6b278d..7bc5c16624 100644 --- a/scripts/core/editor2/styles/editor.scss +++ b/scripts/core/editor2/styles/editor.scss @@ -117,6 +117,9 @@ } .add-content__actions span { transform: scale(1); + &:hover { + z-index: 1; // for sd-tooltip + } } } &__plus-btn { @@ -173,7 +176,7 @@ } &__input { // leave place for action buttons on the sides - margin-right: 80px; + margin-right: 100px; } // action buttons &__actions { diff --git a/scripts/core/editor2/views/add-content.html b/scripts/core/editor2/views/add-content.html index aa13ab601e..6fb90bde61 100644 --- a/scripts/core/editor2/views/add-content.html +++ b/scripts/core/editor2/views/add-content.html @@ -6,18 +6,18 @@
                          + sd-tooltip="{{ :: 'add an embed' | translate }}" + flow="right"> + sd-tooltip="{{ :: 'add a picture' | translate }}" + flow="right"> diff --git a/scripts/core/editor2/views/add-embed.html b/scripts/core/editor2/views/add-embed.html index 45462a3782..03cc4c1cc6 100644 --- a/scripts/core/editor2/views/add-embed.html +++ b/scripts/core/editor2/views/add-embed.html @@ -12,7 +12,7 @@
                          {{:: 'loading' | translate }} ...
                          diff --git a/scripts/core/editor2/views/block-text.html b/scripts/core/editor2/views/block-text.html index 6eb9b06589..c2a7e5d692 100644 --- a/scripts/core/editor2/views/block-text.html +++ b/scripts/core/editor2/views/block-text.html @@ -22,7 +22,7 @@
                            • -
                          • +
                          diff --git a/scripts/core/index.js b/scripts/core/index.js index d225a68c18..dbccde3710 100644 --- a/scripts/core/index.js +++ b/scripts/core/index.js @@ -40,7 +40,7 @@ let core = angular.module('superdesk.core', [ 'ngResource', 'ngFileUpload', - 'ui.bootstrap', + 'superdesk-ui', 'superdesk.core.activity', 'superdesk.core.analytics', diff --git a/scripts/core/keyboard/views/keyboard-modal.html b/scripts/core/keyboard/views/keyboard-modal.html index 97ba7396fd..1621835b88 100644 --- a/scripts/core/keyboard/views/keyboard-modal.html +++ b/scripts/core/keyboard/views/keyboard-modal.html @@ -1,8 +1,8 @@ -
                          -
                          -

                          Keyboard Shortcuts

                          +
                          +
                          +

                          Keyboard Shortcuts

                          -
                          +

                          {{group}}

                            @@ -14,4 +14,7 @@

                            {{group}}


                          +
                          +

                           

                          +
                          \ No newline at end of file diff --git a/scripts/core/menu/styles/menu.scss b/scripts/core/menu/styles/menu.scss index c26c622f46..bcb23c9784 100644 --- a/scripts/core/menu/styles/menu.scss +++ b/scripts/core/menu/styles/menu.scss @@ -122,7 +122,7 @@ &.navbtn, button { @include box-shadow(none); border: none; - width: auto; + width: auto; .name { display: block; float: left; diff --git a/scripts/core/menu/views/about.html b/scripts/core/menu/views/about.html index fc8d48673c..6b338ba0bc 100644 --- a/scripts/core/menu/views/about.html +++ b/scripts/core/menu/views/about.html @@ -1,12 +1,12 @@ -
                          -
                          - +
                          +
                          +
                          - +
                          -
                          +

                          Superdesk {{ :: version }}

                          @@ -31,7 +31,7 @@
                          Superdesk client rev.
                          -
                          - +
                          +
                          diff --git a/scripts/core/menu/views/menu.html b/scripts/core/menu/views/menu.html index 4316e09044..4692d3886e 100644 --- a/scripts/core/menu/views/menu.html +++ b/scripts/core/menu/views/menu.html @@ -2,7 +2,7 @@                           diff --git a/scripts/core/services/index.js b/scripts/core/services/index.js index d59d1a812d..9d073dfa55 100644 --- a/scripts/core/services/index.js +++ b/scripts/core/services/index.js @@ -30,7 +30,6 @@ angular.module('superdesk.core.services', [ 'superdesk.core.services.entity', 'superdesk.core.services.permissions', 'superdesk.core.services.storage', - 'superdesk.core.services.pageTitle', + 'superdesk.core.services.pageTitle' ]) - .service('serverConfig', ServerConfigService) - ; + .service('serverConfig', ServerConfigService); diff --git a/scripts/core/services/modalService.js b/scripts/core/services/modalService.js index 04f8622d8d..3718ff06a3 100644 --- a/scripts/core/services/modalService.js +++ b/scripts/core/services/modalService.js @@ -1,4 +1,4 @@ -export default angular.module('superdesk.core.services.modal', ['ui.bootstrap', 'superdesk.core.services.asset']) +export default angular.module('superdesk.core.services.modal', ['superdesk-ui', 'superdesk.core.services.asset']) .service('modal', ['$q', '$modal', '$sce', 'asset', function($q, $modal, $sce, asset) { this.confirm = function( bodyText, @@ -40,54 +40,4 @@ export default angular.module('superdesk.core.services.modal', ['ui.bootstrap', return delay.promise; }; - }]) - .directive('sdModal', ['$document', function($document) { - return { - template: '', - transclude: true, - scope: {model: '=', close: '&'}, - link: function modalLinkFunction(scope, element, attrs, ctrl, transcludeFn) { - let modalElem; - - scope.$watch('model', (model) => { - if (model && !modalElem) { - transcludeFn((clone, modalScope) => { - modalElem = angular.element('
                          ') - .append(angular.element('
                          ') - .append(angular.element('
                          ') - .append(clone) - ) - ); - modalElem.addClass(element.attr('class')); - modalElem.appendTo($document.find('body')); - modalElem.modal('show'); - modalElem.on('hidden.bs.modal', () => { - modalElem.off(); - modalElem.remove(); - modalScope.$destroy(); - modalElem = null; - - // reset model if needed - if (scope.model) { - scope.$applyAsync(() => { - scope.close(); - }); - } - }); - }); - } else if (!model) { - hideIfActive(); - } - }); - - scope.$on('$destroy', hideIfActive); - - // hide modal if is active - function hideIfActive() { - if (modalElem) { - modalElem.modal('hide'); - } - } - } - }; - }]); + }]); \ No newline at end of file diff --git a/scripts/core/ui/ui.js b/scripts/core/ui/ui.js index fd8eb5e24f..b8350f72b8 100644 --- a/scripts/core/ui/ui.js +++ b/scripts/core/ui/ui.js @@ -71,142 +71,11 @@ function NewlineToElement() { }; } -/** - * Handle all wizards used in UI - * - */ -WizardHandlerFactory.$inject = []; -function WizardHandlerFactory() { - var service = {}; - var wizards = {}; - - service.defaultName = 'defaultWizard'; - - service.addWizard = function(name, wizard) { - wizards[name] = wizard; - }; - - service.removeWizard = function(name) { - delete wizards[name]; - }; - - service.wizard = function(name) { - var nameToUse = name || service.defaultName; - - return wizards[nameToUse]; - }; - - return service; -} - -WizardDirective.$inject = []; -function WizardDirective() { - return { - templateUrl: 'scripts/core/ui/views/wizard.html', - scope: { - currentStep: '=', - finish: '&', - name: '@' - }, - transclude: true, - controller: ['$scope', '$element', 'WizardHandler', function($scope, element, WizardHandler) { - WizardHandler.addWizard($scope.name || WizardHandler.defaultName, this); - $scope.$on('$destroy', () => { - WizardHandler.removeWizard($scope.name || WizardHandler.defaultName); - }); - - $scope.selectedStep = null; - $scope.steps = []; - - var stopWatch; - - this.addStep = function(step) { - $scope.steps.push(step); - if (!stopWatch) { - stopWatch = $scope.$watch('currentStep', (stepCode) => { - if (stepCode && ($scope.selectedStep && $scope.selectedStep.code !== stepCode - || !$scope.selectedStep)) { - $scope.goTo(_.find($scope.steps, {code: stepCode})); - } - }); - } - }; - - function unselectAll() { - _.each($scope.steps, (step) => { - step.selected = false; - }); - $scope.selectedStep = null; - } - - $scope.goTo = function(step) { - unselectAll(); - $scope.selectedStep = step; - if (!_.isUndefined($scope.currentStep)) { - $scope.currentStep = step.code; - } - step.selected = true; - }; - - this.goTo = function(step) { - var stepTo; - - if (_.isNumber(step)) { - stepTo = $scope.steps[step]; - } else { - stepTo = _.find($scope.steps, {code: step}); - } - $scope.goTo(stepTo); - }; - - this.next = function() { - var index = _.indexOf($scope.steps, $scope.selectedStep); - - if (index === $scope.steps.length - 1) { - this.finish(); - } else { - $scope.goTo($scope.steps[index + 1]); - } - }; - - this.previous = function() { - var index = _.indexOf($scope.steps, $scope.selectedStep); - - $scope.goTo($scope.steps[index - 1]); - }; - - this.finish = function() { - if ($scope.finish) { - $scope.finish(); - } - }; - }] - }; -} - -WizardStepDirective.$inject = []; -function WizardStepDirective() { - return { - templateUrl: 'scripts/core/ui/views/wizardStep.html', - scope: { - title: '@', - code: '@', - disabled: '=', - hide: '=' - }, - transclude: true, - require: '^sdWizard', - link: function($scope, element, attrs, wizard) { - wizard.addStep($scope); - } - }; -} - CreateButtonDirective.$inject = []; function CreateButtonDirective() { return { restrict: 'C', - template: '' + template: '' }; } @@ -256,173 +125,6 @@ function AutoexpandDirective() { }; } -DropdownPositionDirective.$inject = ['$document']; -function DropdownPositionDirective($document) { - return { - link: function(scope, element) { - var tolerance = 300, - isRightOriented = null, - isInlineOriented = null, - menu = null, workspace = null; - - element.bind('click mouseover', () => { - if (menu === null) { - checkOrientation(); - } - - if (workspace === null) { - checkWorkspace(); - } - - if (closeToBottom() && !isInlineOriented) { - element.addClass('dropdown--dropup'); - } else if (!isInlineOriented) { - element.removeClass('dropdown--dropup'); - } - - if (closeToLeft()) { - menu.removeClass('pull-right'); - } else { - menu.addClass('pull-right'); - } - - checkRightOrientation(); - checkInlineOrientation(); - }); - - function checkOrientation() { - menu = element.children('.dropdown__menu'); - isRightOriented = menu.hasClass('pull-right'); - isInlineOriented = element.hasClass('dropdown--dropright') || element.hasClass('dropdown--dropleft'); - } - - const checkInlineOrientation = () => { - var isCloseToLeft = closeToLeft(), - isCloseToRight = closeToRight(); - - if (isInlineOriented) { - if (isCloseToLeft && !isCloseToRight) { - element.removeClass('dropdown--dropleft').addClass('dropdown--dropright'); - } else if (isCloseToRight && !isCloseToLeft) { - element.removeClass('dropdown--dropright').addClass('dropdown--dropleft'); - } else { - element.removeClass('dropdown--dropright dropdown--dropleft').addClass('dropdown--noarrow'); - } - } - }; - - const checkRightOrientation = () => { - let isCloseToRight = closeToRight(); - - if (isRightOriented) { - if (isCloseToRight) { - menu.addClass('pull-right'); - } else { - menu.removeClass('pull-right'); - } - } - }; - - // In authoring or modal, make dropdown's relative to theirs edge - function checkWorkspace() { - workspace = element.closest('.modal-content').length ? - element.closest('.modal-content') : - element.closest('#authoring-container'); - } - - function closeToBottom() { - var docHeight = $document.height(); - - return element.offset().top > docHeight - tolerance; - } - - function closeToLeft() { - var leftEdge = workspace.length ? - element.offset().left - workspace.offset().left : - element.offset().left; - - return leftEdge < tolerance; - } - - function closeToRight() { - var docWidth = $document.width(), - elemPosition = element.offset().left + element.find('.dropdown__menu').width(); - - return docWidth - elemPosition < tolerance; - } - } - }; -} - -/** - * Detect and set position for dropdown - * elements which are appended to body - */ -DropdownPositionAbsoluteDirective.$inject = ['$position', '$timeout']; -function DropdownPositionAbsoluteDirective($position, $timeout) { - return { - require: 'dropdown', - link: function(scope, elem, attrs, dropdown) { - var icon = elem.find('[class*="icon-"]'); - // ported from bootstrap 0.13.1 - - const TOP_MENU_BAR = 48, SUB_MENU_BAR = 48, LEFT_BAR_WIDTH = 48; - - const ACTION_MENU_FROM_TOP = TOP_MENU_BAR + SUB_MENU_BAR; - - scope.$watch(dropdown.isOpen, (isOpen) => { - if (isOpen) { - var pos = $position.positionElements(icon, dropdown.dropdownMenu, 'bottom-right', true), - windowHeight = window.innerHeight - SUB_MENU_BAR; - - var css = { - top: pos.top + 'px', - display: isOpen ? 'block' : 'none', - opacity: '1', - left: 'auto', - right: Math.max(5, window.innerWidth - pos.left) - }; - - scope.$evalAsync(() => { - // Hide it to avoid flickering - dropdown.dropdownMenu.css({opacity: '0', left: 'auto'}); - }); - - $timeout(() => { - scope.$applyAsync(() => { - /* - * Calculate if there is enough space for showing after the icon - * if not, show it above the icon - */ - var dropdownHeight = dropdown.dropdownMenu.outerHeight(), - dropdownWidth = dropdown.dropdownMenu.outerWidth(); - - if (windowHeight - pos.top < dropdownHeight) { - if (pos.top - ACTION_MENU_FROM_TOP < dropdownHeight) { - css.top = ACTION_MENU_FROM_TOP + 'px'; - css.right = css.right + 15; // 15 to prevent menu from stick to icon - } else { - css.top = pos.top - dropdownHeight - icon.outerHeight() - 15; - // Subtracting 15 so the dropdown is not stick to the icon - } - } - - /* - * Calculate if there is enough space for opening on left side of icon, - * if not, move it to the right side - */ - if (pos.left - LEFT_BAR_WIDTH < dropdownWidth) { - css.right -= dropdownWidth; - } - dropdown.dropdownMenu.css(css); - }); - }, 150, false); - } - }); - } - }; -} - DropdownFocus.$inject = ['Keys']; function DropdownFocus(Keys) { return { @@ -1497,9 +1199,6 @@ export default angular.module('superdesk.core.ui', [ .directive('sdShadow', ShadowDirective) .directive('sdToggleBox', ToggleBoxDirective) .filter('nl2el', NewlineToElement) - .factory('WizardHandler', WizardHandlerFactory) - .directive('sdWizard', WizardDirective) - .directive('sdWizardStep', WizardStepDirective) .directive('sdCreateBtn', CreateButtonDirective) .directive('sdAutofocus', AutofocusDirective) .directive('sdAutoexpand', AutoexpandDirective) @@ -1513,8 +1212,6 @@ export default angular.module('superdesk.core.ui', [ .directive('sdTimepicker', TimepickerDirective) .service('popupService', PopupService) .filter('leadingZero', LeadingZeroFilter) - .directive('sdDropdownPosition', DropdownPositionDirective) - .directive('sdDropdownPositionAbsolute', DropdownPositionAbsoluteDirective) .directive('sdDropdownFocus', DropdownFocus) .directive('sdWeekdayPicker', WeekdayPickerDirective) .directive('sdSplitterWidget', splitterWidget) diff --git a/scripts/core/ui/views/datepicker-wrapper.html b/scripts/core/ui/views/datepicker-wrapper.html index ca6b5c0279..7cd79e73bb 100644 --- a/scripts/core/ui/views/datepicker-wrapper.html +++ b/scripts/core/ui/views/datepicker-wrapper.html @@ -11,6 +11,6 @@
                          - - + +
                          diff --git a/scripts/core/ui/views/sd-multi-select.html b/scripts/core/ui/views/sd-multi-select.html index 773fd3a243..e702855029 100644 --- a/scripts/core/ui/views/sd-multi-select.html +++ b/scripts/core/ui/views/sd-multi-select.html @@ -1,7 +1,7 @@
                            diff --git a/scripts/core/ui/views/sd-timepicker-popup.html b/scripts/core/ui/views/sd-timepicker-popup.html index 4779a4d3fb..2ecd15c08f 100644 --- a/scripts/core/ui/views/sd-timepicker-popup.html +++ b/scripts/core/ui/views/sd-timepicker-popup.html @@ -23,7 +23,7 @@
                          • {{m | leadingZero}}
                          - - + +
                          \ No newline at end of file diff --git a/scripts/core/ui/views/wizard.html b/scripts/core/ui/views/wizard.html index fd5b44efcb..7c06b17656 100644 --- a/scripts/core/ui/views/wizard.html +++ b/scripts/core/ui/views/wizard.html @@ -1,6 +1,8 @@ -
                            -
                          • - -
                            • -
                          -
                          \ No newline at end of file +
                          +
                            +
                          • + +
                            • +
                          +
                          +
                          \ No newline at end of file diff --git a/scripts/core/upload/styles/upload.scss b/scripts/core/upload/styles/upload.scss index bc64f2f89b..6026c2aec3 100644 --- a/scripts/core/upload/styles/upload.scss +++ b/scripts/core/upload/styles/upload.scss @@ -27,7 +27,7 @@ user avatar uploader position: relative; } .sidebar { - width: 229px; + width: 200px; ul { li { border-bottom: 1px solid #eee; @@ -127,9 +127,11 @@ user avatar uploader height: 100%; @include box-sizing(border-box); border: 2px dashed #e0e0e0; + display: flex; + flex-direction: column; + justify-content: center; .text { text-align: center; - margin-top: 140px; color: #ccc; font-size: 30px; @include text-light(); @@ -208,7 +210,7 @@ user avatar uploader width:120px; height: 120px; overflow: hidden; - margin: 0 15px 30px 35px; + margin: 0 15px 30px 15px; } .preview-large-4-3-small { width:300px; @@ -256,7 +258,7 @@ user avatar uploader width:60px; height: 60px; overflow: hidden; - margin: 0 45px 30px 65px; + margin: 0 45px 30px 45px; @include border-radius(30px); } } @@ -287,11 +289,11 @@ media uploader */ .upload-media { - .modal-body { + .modal__body { display: flex; flex-direction:column; overflow: hidden !important; - padding: 0; + padding: 0 !important; } .drag-area { //start screen on modal show position: absolute; @@ -324,9 +326,9 @@ media uploader .upload-manual { position: absolute; top: 50%; left: 50%; - width: 200px; + width: 240px; margin-top: 20px; - margin-left: -100px; + margin-left: -120px; text-align: center; .or-label { margin-bottom: 20px; @@ -563,7 +565,7 @@ media uploader position: relative; } .optional-drag { - width: 120px; + width: 130px; margin: 0 auto; background: #ececec; padding: 5px 10px; @@ -599,7 +601,7 @@ edit image modal } display: flex; flex-direction: column; - padding: 0; + padding: 0 !important; overflow-y: hidden !important; &-top { display: flex; diff --git a/scripts/core/views/confirmation-modal.html b/scripts/core/views/confirmation-modal.html index 550ce5bfc6..0efe3af975 100644 --- a/scripts/core/views/confirmation-modal.html +++ b/scripts/core/views/confirmation-modal.html @@ -1,9 +1,9 @@ -
                          +

                          -
                          -
                          +
                          +
                          + + - -
                          \ No newline at end of file diff --git a/scripts/index.js b/scripts/index.js index 672ed63801..1a76b54611 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,4 +1,6 @@ + import 'app.scss'; // styles +import 'superdesk-ui-framework/dist/superdesk-ui-framework.min.css'; import 'vendor'; import 'core'; import 'templates-cache.generated'; // generated by grunt 'ngtemplates' task diff --git a/scripts/vendor.js b/scripts/vendor.js index 202974328f..15336a9ac3 100644 --- a/scripts/vendor.js +++ b/scripts/vendor.js @@ -4,7 +4,6 @@ import 'jquery-gridster'; import 'lodash'; import 'bootstrap'; import 'angular'; -import 'angular-bootstrap-npm'; import 'angular-resource'; import 'angular-route'; import 'angular-gettext'; @@ -20,3 +19,4 @@ import 'raven-js'; import 'rangy'; import 'rangy-saverestore'; import 'ment.io'; +import 'superdesk-ui-framework/dist/superdesk-ui-framework'; \ No newline at end of file diff --git a/spec/authoring_spec.js b/spec/authoring_spec.js index a5f49ac256..6ab56a6b97 100644 --- a/spec/authoring_spec.js +++ b/spec/authoring_spec.js @@ -257,7 +257,7 @@ describe('authoring', () => { expect(transmissionDetails.count()).toBe(1); transmissionDetails.get(0).click(); - expect(element(by.className('modal-body')).getText()).toMatch(/Kids Helpline*/); + expect(element(by.className('modal__body')).getText()).toMatch(/Kids Helpline*/); element(by.css('[ng-click="hideFormattedItem()"]')).click(); monitoring.filterAction('takesPackage'); authoring.close(); diff --git a/spec/helpers/authoring.js b/spec/helpers/authoring.js index 2af001a674..92b30d13b1 100644 --- a/spec/helpers/authoring.js +++ b/spec/helpers/authoring.js @@ -101,9 +101,9 @@ function Authoring() { }; this.confirmSendTo = function() { - element.all(by.className('modal-content')).count().then((closeModal) => { + element.all(by.className('modal__content')).count().then((closeModal) => { if (closeModal) { - element(by.className('modal-content')).all(by.css('[ng-click="ok()"]')).click(); + element(by.className('modal__content')).all(by.css('[ng-click="ok()"]')).click(); } }); }; @@ -160,7 +160,7 @@ function Authoring() { }; this.createTextItem = function() { - return element(by.css('[class="dropdown__toggle sd-create-btn dropdown-toggle"]')) + return element(by.css('[class="navbtn dropdown__toggle sd-create-btn dropdown-toggle"]')) .click() .then(() => element(by.id('create_text_article')).click()); }; @@ -226,7 +226,7 @@ function Authoring() { this.publish_button.click(); if (!skipConfirm) { - var modal = element(by.className('modal-dialog')); + var modal = element(by.className('modal__dialog')); modal.isPresent().then((click) => { if (click) { @@ -249,7 +249,7 @@ function Authoring() { this.sendAndPublishBtn.click(); if (!skipConfirm) { - var modal = element(by.className('modal-dialog')); + var modal = element(by.className('modal__dialog')); modal.isPresent().then((click) => { if (click) { @@ -281,7 +281,7 @@ function Authoring() { this.publish_button.click(); if (!skipConfirm) { - var modal = element(by.className('modal-dialog')); + var modal = element(by.className('modal__dialog')); modal.isPresent().then((click) => { if (click) { @@ -693,7 +693,7 @@ function Authoring() { }; this.saveRelatedItemConfiguration = function() { - element(by.className('modal-footer')) + element(by.className('modal__footer')) .element(by.buttonText('Save')).click(); }; diff --git a/spec/helpers/dashboard.js b/spec/helpers/dashboard.js index b313452963..4cb55b6efa 100644 --- a/spec/helpers/dashboard.js +++ b/spec/helpers/dashboard.js @@ -17,7 +17,7 @@ function Dashboard() { * Open the dashboard setting. The dashboard page should be already opened. */ this.showDashboardSettings = function() { - element.all(by.className('svg-icon-plus')).first().click(); + element.all(by.className('icon-plus-large')).first().click(); }; /** diff --git a/spec/helpers/highlights.js b/spec/helpers/highlights.js index 1d28e0e29c..d34a65d2ad 100644 --- a/spec/helpers/highlights.js +++ b/spec/helpers/highlights.js @@ -165,7 +165,7 @@ function Highlights() { }; this.selectDesk = function(elem, name) { - elem.all(by.className('right-submenu')).all(by.partialButtonText(name)).click(); + elem.all(by.className('dropdown__menu--submenu-left')).all(by.partialButtonText(name)).click(); }; this.createHighlightsPackage = function(highlight) { @@ -179,14 +179,14 @@ function Highlights() { }; this.exportHighlightsConfirm = function() { - var btn = element(by.className('modal-footer')).element(by.buttonText('OK')); + var btn = element(by.className('modal__footer')).element(by.buttonText('OK')); wait(btn, 500); btn.click(); }; this.saveTextHighlightsConfirm = function() { - var btn = element(by.className('modal-footer')).element(by.buttonText('Save')); + var btn = element(by.className('modal__footer')).element(by.buttonText('Save')); wait(btn, 500); btn.click(); diff --git a/spec/helpers/monitoring.js b/spec/helpers/monitoring.js index 8eb920b010..caa70ca2dd 100644 --- a/spec/helpers/monitoring.js +++ b/spec/helpers/monitoring.js @@ -47,7 +47,7 @@ function Monitoring() { * create_preformatted_article and create_package */ this.createItemAction = function(action) { - element(by.className('svg-icon-plus')).click(); + element(by.className('icon-plus-large')).click(); element(by.id(action)).click(); browser.sleep(500); }; diff --git a/spec/helpers/templates.js b/spec/helpers/templates.js index 0d636eb21d..21e78e5166 100644 --- a/spec/helpers/templates.js +++ b/spec/helpers/templates.js @@ -64,7 +64,7 @@ function Templates() { * @returns {ElementFinder} desk selection element **/ this.getDeskElement = function(deskName) { - return element.all(by.css('[ng-click="toggleDesk(desk)"]')) + return element.all(by.css('[ng-click="onDeskToggle(desk)"]')) .filter((elem, index) => elem.getText().then((text) => text.toUpperCase() === deskName.toUpperCase())) .first() .element(by.xpath('..')) diff --git a/spec/ingest_provider_spec.js b/spec/ingest_provider_spec.js index ff5764e925..a0707fd286 100644 --- a/spec/ingest_provider_spec.js +++ b/spec/ingest_provider_spec.js @@ -76,7 +76,7 @@ describe('ingest_provider', () => { browser.wait(() => element(by.id('ingest-settings')).isDisplayed(), 1000).then(() => { expect(element(by.id('ingest-settings')).isDisplayed()).toBe(true); - expect(element(by.css('.modal-dialog')).element(by.id('provider-name')).isDisplayed()).toBe(true); + expect(element(by.css('.modal__dialog')).element(by.id('provider-name')).isDisplayed()).toBe(true); }); }); }); diff --git a/spec/master_desk_spec.js b/spec/master_desk_spec.js index 76a1eeb73a..a4a2dee22d 100644 --- a/spec/master_desk_spec.js +++ b/spec/master_desk_spec.js @@ -49,7 +49,7 @@ describe('master_desk', () => { masterDesks.switchToTab('content'); masterDesks.editDesk(0); browser.sleep(200); - expect(element(by.className('modal-content')).isDisplayed()).toBe(true); + expect(element(by.className('modal__content')).isDisplayed()).toBe(true); }); xit('show tasks view', () => { @@ -74,7 +74,7 @@ describe('master_desk', () => { masterDesks.switchToTab('tasks'); masterDesks.editDesk(0); browser.sleep(200); - expect(element(by.className('modal-content')).isDisplayed()).toBe(true); + expect(element(by.className('modal__content')).isDisplayed()).toBe(true); }); it('show user role view all users', () => { @@ -115,13 +115,13 @@ describe('master_desk', () => { masterDesks.switchToTab('users'); masterDesks.editDesk(0); browser.sleep(200); - expect(element(by.className('modal-content')).isDisplayed()).toBe(true); + expect(element(by.className('modal__content')).isDisplayed()).toBe(true); }); it('user role view - edit user', () => { masterDesks.switchToTab('users'); masterDesks.editUser(0, 1, 0); browser.sleep(200); - expect(element(by.className('modal-content')).isDisplayed()).toBe(true); + expect(element(by.className('modal__content')).isDisplayed()).toBe(true); }); }); diff --git a/spec/search_spec.js b/spec/search_spec.js index 83998787a3..fb06f84fa4 100644 --- a/spec/search_spec.js +++ b/spec/search_spec.js @@ -84,7 +84,7 @@ describe('search', () => { globalSearch.goButton.click(); expect(globalSearch.getItems().count()).toBe(1); expect(element.all(by.repeater('parameter in tags.selectedParameters')).count()).toBe(1); - element(by.css('.icon-close-small.icon-white')).click(); + element(by.css('.icon-close-small.icon--white')).click(); expect(globalSearch.getItems().count()).toBe(14); // can search by original creator @@ -297,7 +297,7 @@ describe('search', () => { expect(globalSearch.getItem(0).element(by.className('state-scheduled')).isDisplayed()).toBe(true); expect(globalSearch.getItem(0).element(by.className('state-scheduled')).getText()).toEqual('SCHEDULED'); expect(element.all(by.repeater('key in keys')).count()).toBe(1); - element(by.css('.icon-close-small.icon-white')).click(); + element(by.css('.icon-close-small.icon--white')).click(); expect(globalSearch.getItems().count()).toBe(15); }); diff --git a/spec/send_spec.js b/spec/send_spec.js index 31ed60b03c..fe4973d53c 100644 --- a/spec/send_spec.js +++ b/spec/send_spec.js @@ -35,7 +35,7 @@ describe('send', () => { workspace.editItem(1); authoring.writeText('mispeled word'); authoring.sendTo('Sports Desk'); - expect(element(by.className('modal-content')).isDisplayed()).toBe(true); + expect(element(by.className('modal__content')).isDisplayed()).toBe(true); }); it('can submit item to a desk although there are spelling mistakes', () => { @@ -58,7 +58,7 @@ describe('send', () => { workspace.editItem(1); authoring.writeText('mispeled word'); authoring.sendTo('Sports Desk'); - element(by.className('modal-content')).all(by.css('[ng-click="cancel()"]')).click(); + element(by.className('modal__content')).all(by.css('[ng-click="cancel()"]')).click(); expect(element(by.className('authoring-embedded')).isDisplayed()).toBe(true); }); diff --git a/spec/templates_spec.js b/spec/templates_spec.js index e10db49fd3..794d71ef11 100644 --- a/spec/templates_spec.js +++ b/spec/templates_spec.js @@ -58,8 +58,10 @@ describe('templates', () => { templates.edit('New Template'); expect(templates.getTemplateNameElement().getAttribute('value')).toEqual('new template'); expect(templates.getTemplateType().getAttribute('value')).toEqual('string:create'); - expect(templates.getDeskElement('Politic Desk').getAttribute('checked')).toEqual('true'); - expect(templates.getDeskElement('Sports Desk').getAttribute('checked')).toEqual('true'); + expect(templates.getDeskElement('Politic Desk').element(by.className('sd-checkbox')) + .getAttribute('checked')).toEqual('true'); + expect(templates.getDeskElement('Sports Desk').element(by.className('sd-checkbox')) + .getAttribute('checked')).toEqual('true'); expect(templates.getAutomaticItemCreationElement().getAttribute('checked')).toEqual('true'); expect(templates.getWeekDayElement('Tuesday').getAttribute('class')).toContain('active'); expect(templates.getTimeElement().getAttribute('value')).toEqual('10:30'); diff --git a/spec/users_spec.js b/spec/users_spec.js index 310f4f72ea..9b67983fb7 100644 --- a/spec/users_spec.js +++ b/spec/users_spec.js @@ -87,7 +87,7 @@ describe('users', () => { }); }); - element(by.css('.modal-dialog')).waitReady().then((elem) => { + element(by.css('.modal__dialog')).waitReady().then((elem) => { browser.wait(() => elem.element(by.binding('bodyText')) .getText() .then((text) => { diff --git a/styles/sass/app.scss b/styles/sass/app.scss index 471b799182..440caa9760 100644 --- a/styles/sass/app.scss +++ b/styles/sass/app.scss @@ -6,7 +6,6 @@ // Core variables and mixins @import 'variables'; // Modify this for custom colors, font-sizes, etc -@import 'sd-icon-font'; @import 'mixins'; // CSS Reset @@ -22,9 +21,6 @@ @import 'tables'; // Dropdowns -@import 'dropdowns/basic-dropdown'; -@import 'dropdowns/nested-dropdown'; -@import 'dropdowns/navigation-dropdown'; @import 'dropdowns/input-dropdown'; // Components: common @@ -36,9 +32,7 @@ @import 'avatars'; // Components: Buttons & Alerts -@import 'buttons'; @import 'buttons/toggle-buttons'; -@import 'buttons/basic-buttons'; @import 'button-groups'; @import 'alerts'; // Note: alerts share common CSS with buttons and thus have styles in buttons.scss diff --git a/styles/sass/buttons.scss b/styles/sass/buttons.scss deleted file mode 100644 index b433ea0260..0000000000 --- a/styles/sass/buttons.scss +++ /dev/null @@ -1,270 +0,0 @@ -// Sub-Navigation buttons -// -------------------------------------------------- -.subnav { - .button-stack .btn { - padding: 8px 20px; - height: 28px; - } -} - -.navbtn { - float: left; - padding: 0 10px; - background: transparent; - color:#333; - height: $subnav-height; - width:48px; - display: block; - text-align: center; - line-height:$subnav-height; - text-decoration: none !important; - border:0; - border-left: 1px solid rgba(0,0,0,0.1); - box-sizing: border-box; - &.navbtn-info { - background: $sd-blue; - border-left: 1px solid lighten($sd-blue, 10%); - color: #fff; - &.disabled { - background: #898989; - } - } - - &:hover { - background: rgba(255,255,255,0.5); - &.navbtn-info { - background: lighten($sd-blue, 5%); - } - } - - i { - vertical-align: middle; - } - - &.disabled { - background: #e1e1e1; - &:hover { - background: #e1e1e1; - cursor: default; - } - .arrow { - display: none; - } - } - &.active { - background: #62b0d0; - cursor: pointer; - } - &.large { - width: auto; - padding: 0 20px; - span { - text-transform: uppercase; - color: #fff; - } - span + i { - margin-left: 10px; - } - } - a { - display: block !important; - height: 25px !important; - line-height: 25px !important; - } - &--with-text { - width:auto; - transition: all 0.2s; - .title { - text-transform: uppercase; - } - - i + .title { - margin-left: 10px; - } - &.navbtn-hover { - .title { - display: none; - } - &:hover { - .title { - display: inline; - } - } - } - } - &--highlighted { - background-color: $sd-highlight; - transition: all 0.3s; - padding: 0 0 0 9px; - &:hover { - background-color: darken($sd-highlight, 10%); - } - } - &--btn-rearrange { - width: auto; - border-right: solid thin #eee; - } -} -.navbtn--highlighted { - &.active, - &.active:hover { - background-color: #2c2c2c; - } -} - -.sd-create-btn { - width: 48px; - height: 48px; - line-height: 48px; - padding: 0 !important; - overflow: hidden; - position: relative; - background: $white; - i { - position: absolute; - z-index: 1; - display: block; - top: 50%; margin-top: -5px; - left: 50%; margin-left: -5px; - } - .circle { - @include border-box(); - display: inline-block; - text-align: center; - width: 26px; - height: 26px; - margin: 0; - padding: 0; - margin-top: 11px; - border-radius: 50%; - background-color: #5ea9c8; - color: #FFFFFF; - position: relative; - @include transition(all 60ms ease-in); - } - &:hover { - .circle { - width: 34px; - height: 34px; - margin-top: 7px; - margin-left: 0; - } - } - &:active { - .circle { - width: 68px; - height: 68px; - margin: -10px 0 0 -10px; - @include transition(all 30ms ease-in); - } - } -} - -.toggle-list { - @include box-sizing(border-box); - padding: 11px 7px 11px 17px; - border: 0; - ul { - @include clearfix(); - text-align: left; - - li { - float: left; - @include border-box(); - padding-right: 10px; - a { - display: block; - @include border-radius(2px); - @include box-sizing(border-box); - padding: 0 10px; - color: #4f4f4f; - text-decoration: none; - text-transform: uppercase; - font-size: 11px; - background: #fff !important; - border: 1px solid #d7d7d7; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - &:hover { - background: $white - } - b { - margin-left: 5px; - font-size: 14px; - color: #949494; - @include text-light(); - } - } - &.active a { - background: #505050 !important; - border-color: #505050 !important; - border-top: 0 !important; - color: #fff !important; - @include box-shadow(inset 0 2px 0px darken(#505050, 10%) !important); - &:hover { - background: #505050 !important; - } - } - } - } - - &:hover { - background: none; - } -} - -// Radio styled buttons -// -------------------------------------------------- - -$checkBtnColor: #546E7A; -$checkBtnColorActive: #78909C; - -.btn__check { - position: relative; - color: #fff; - padding: 10px 15px; - background: $checkBtnColor; - border: none; - font-size: 13px; - @include border-radius(3px); - &:hover { - cursor: pointer; - background: lighten($checkBtnColor, 5%); - } - &.active, &:active { - background: $checkBtnColorActive; - @include box-shadow (inset 0 3px 0 0 rgba(0,0,0,0.2)); - &:after { - content: ""; - width: 42px; - position: absolute; - background: url(~images/checkmark-big-full.png) no-repeat; - background-size: 42px; - background-position: 0 -2px; - top: 0; bottom: 0; - right: 8px; - @include opacity(16); - } - } - &.active { - cursor: default; - } - &:active { - background: darken($checkBtnColorActive, 5%); - @include box-shadow (inset 0 3px 0 0 rgba(0,0,0,0.2)); - &:after { - @include opacity(10); - } - } - - &.active:disabled { - opacity: 0.4; - } - &:disabled { - opacity: 0.4; - color:rgba(255,255,255,0.7); - &:not(.active) { background: $checkBtnColor !important; } - &:hover { cursor: default; } - } -} diff --git a/styles/sass/buttons/_basic-buttons.scss b/styles/sass/buttons/_basic-buttons.scss deleted file mode 100644 index 6211015e1e..0000000000 --- a/styles/sass/buttons/_basic-buttons.scss +++ /dev/null @@ -1,187 +0,0 @@ -// BUTTON STYLES -// ------------- -/* new button colors */ - -$btnDefaultColor: rgba(50,50,50,0.25); -$btnInfoColor: $sd-blue; -$btnGreenColor: #169f70; -$btnSuccessColor: #53a93f; -$btnDangerColor: #c83929; -$btnInverseColor: #141414; -$btnCustomColor: #666; -$btnPublishColor: #01579B; -$btnPublishPlusColor: #623b7a; -$btnLightGray: $grayLight; - -//mixin -@mixin buttonStates($background: $btnDefaultColor, $color: $sd-text) { - color: $color; - background-color: $background; - &:hover, &:focus { - background-color: darken($background, 15%); - @include box-shadow(0 1px 2px 0 rgba(0,0,0,0.30)); - text-decoration: none; - color: $color; - } - &:focus { - outline:none !important; - } - &--active, &:active { - background-color: $background; - @include box-shadow(inset 0 1px 2px rgba(0,0,0,.4)); - } - &--disabled, &[disabled], &--disabled:hover, &[disabled]:hover, &--disabled:focus, &[disabled]:focus, &--disabled:active, &[disabled]:active { - cursor: default; - @include opacity(20); - @include box-shadow(none); - background-color: $background; - } -} - - -// Base styles -// -------------------------------------------------- - -// Core -.btn { - display: inline-block; - padding: 8px 20px; - height: 28px; - line-height: 12px; - margin-bottom: 0; // For input.btn - font-size: 12px; - text-transform: uppercase; - text-decoration: none; - text-align: center; - vertical-align: middle; - @include border-radius(2px); - cursor: pointer; - border: 0; - outline:none !important; - @include box-sizing(border-box); - @include transition(all .2s ease-in-out); - [class^="icon-"], [class*=" icon-"]{ - margin-top: -4px; - margin-right: 3px; - vertical-align: middle; - } - - //other states - @include buttonStates(); -} - -.btn--primary { - @include buttonStates($btnInfoColor, $white); -} -.btn--green { - @include buttonStates($btnGreenColor, $white); -} -.btn--success { - @include buttonStates($btnSuccessColor, $white); -} -.btn--danger { - @include buttonStates($btnDangerColor, $white); -} -.btn--inverse { - @include buttonStates($btnInverseColor, $white); -} -.btn--custom { - @include buttonStates($btnCustomColor, $white); - white-space: nowrap; -} -.btn--publish { - @include buttonStates($btnPublishColor, $white); - white-space: nowrap; -} -.btn--publish-plus { - @include buttonStates($btnPublishPlusColor, $white); - white-space: nowrap; -} -.btn--light-gray { - @include buttonStates($btnLightGray, $white); - white-space: nowrap; -} - -.btn--light { - background-color: transparent; - &:hover, &:focus { - background-color: rgba(152,152,152,0.15); - @include box-shadow(none); - } - &.btn--active, &:active { - background-color: rgba(152,152,152,0.3); - @include box-shadow(none); - } - &.btn--disabled, &[disabled], &.btn--disabled:hover, &[disabled]:hover, &.btn--disabled:focus, &[disabled]:focus, &.btn--disabled:active, &[disabled]:active { - background: transparent; - } -} - -.btn--circle { - width: 22px; height: 22px; - padding: 0; - border-radius: 50%; - [class^="icon-"] { margin: 0; } -} - -button { - outline:none !important; - &:focus { - outline:none !important; - } -} - -// Focus state for keyboard and accessibility -.btn:focus { - @include tab-focus(); -} - -// Button Sizes -// -------------------------------------------------- - - -.btn--full { - width: 100%; -} - -.btn--large { - padding: 13px 30px; - font-size: 14px; - line-height: 14px; - @include border-radius(5px); - height: 40px; -} -.btn--large [class^="icon-"] { - margin-top: 1px; -} - -.btn--medium { - padding: 12px 25px; - @include border-radius(3px); - height: 32px; -} - -.btn--small { - padding: 8px 9px; - font-size: 11px; - line-height: 11px; -} -.btn--small [class^="icon-"] { - margin-top: -1px; -} - -.btn--mini { - padding: 4px 6px; - font-size: 11px; - line-height: 11px !important; - height: 20px; -} - -.btn--pull-right { - margin-left:10px; - float: right; -} - -.btn--pull-left { - float: left; -} diff --git a/styles/sass/buttons/_toggle-buttons.scss b/styles/sass/buttons/_toggle-buttons.scss index 60cf484bcf..c61c1254ef 100644 --- a/styles/sass/buttons/_toggle-buttons.scss +++ b/styles/sass/buttons/_toggle-buttons.scss @@ -91,4 +91,59 @@ $toggleButtonBorderColor: #c6c6c6; transform: rotate(0); } } +} + +// Radio styled buttons +// -------------------------------------------------- + +$checkBtnColor: #546E7A; +$checkBtnColorActive: #78909C; + +.btn__check { + position: relative; + color: #fff; + padding: 10px 15px; + background: $checkBtnColor; + border: none; + font-size: 13px; + @include border-radius(3px); + &:hover { + cursor: pointer; + background: lighten($checkBtnColor, 5%); + } + &.active, &:active { + background: $checkBtnColorActive; + @include box-shadow (inset 0 3px 0 0 rgba(0,0,0,0.2)); + &:after { + content: ""; + width: 42px; + position: absolute; + background: url(~images/checkmark-big-full.png) no-repeat; + background-size: 42px; + background-position: 0 -2px; + top: 0; bottom: 0; + right: 8px; + @include opacity(16); + } + } + &.active { + cursor: default; + } + &:active { + background: darken($checkBtnColorActive, 5%); + @include box-shadow (inset 0 3px 0 0 rgba(0,0,0,0.2)); + &:after { + @include opacity(10); + } + } + + &.active:disabled { + opacity: 0.4; + } + &:disabled { + opacity: 0.4; + color:rgba(255,255,255,0.7); + &:not(.active) { background: $checkBtnColor !important; } + &:hover { cursor: default; } + } } \ No newline at end of file diff --git a/styles/sass/dropdowns/_basic-dropdown.scss b/styles/sass/dropdowns/_basic-dropdown.scss deleted file mode 100644 index 795f9502c1..0000000000 --- a/styles/sass/dropdowns/_basic-dropdown.scss +++ /dev/null @@ -1,575 +0,0 @@ -// DROPDOWN MENUS -// -------------- - -// Use the .menu class on any
                        • element within the topbar or ul.tabs and you'll get some superfancy dropdowns -.dropdown { - position: relative; - a { - color: $dropdownLinkColor; - } - a:hover { - text-decoration: none; - } - button { - -webkit-appearance: none; - border: 0; - } -} - -.dropdown__toggle { - background: transparent; - i { vertical-align: sub; } -} - -// Triggers dropdown on a hover -.dropdown.dropdown--hover:hover { - .dropdown__menu { display: block; } -} - -.dropdown__toggle:active, -.dropdown.open .dropdown__toggle { - outline: 0; -} - -.dropdown__toggle .dropdown__submenu-icon { - position: absolute; - top: 50%; - right: 2px; - margin-top: -8px; - opacity: 0.4; -} - -.dropdown__toggle--with-opacity > i { - opacity: 0.3; -} -.dropdown__toggle--with-opacity:hover > i { - opacity: 1; -} - - -// Dropdown arrow/caret -// -------------------- -.caret { - display: inline-block; - width: 0; - height: 0; - vertical-align: middle; - margin-top: -2px; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid $black; - @include opacity(30); - content: ""; - &.caret--white, - &.white { - border-top-color: $white; - } -} -.dropdown__caret { - display: inline-block; - width: 0; - height: 0; - vertical-align: middle; - margin-top: -2px; - margin-left: 4px; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid $black; - @include opacity(30); - content: ""; - &.dropdown__caret--white, - &.white { - border-top-color: $white; - } -} - - -.dropdown:hover .dropdown__caret, -.dropdown.open .dropdown__caret { - @include opacity(100); -} - -// The dropdown menu (ul) -// ---------------------- -.dropdown__menu { - position: absolute; - top: 100%; - left: 0; - z-index: $zindexDropdown; - float: left; - display: none; // none by default, but block on "open" of the menu - min-width: 180px; - padding: 10px 0; - margin: 13px 0 0 0; // override default ul - list-style: none; - background-color: $dropdownBackground; - border: none; - box-shadow: 0 2px 10px rgba(0,0,0,.4),0 3px 1px -2px rgba(0,0,0,.1); - @include border-radius(2px); - text-align: left; - box-sizing: border-box; - - // Links within the dropdown menu - button { - width: 100%; - text-align: left; - } - a, button { - display: block; - padding: 3px 15px; - clear: both; - font-weight: normal; - line-height: $baseLineHeight; - white-space: nowrap; - } - - li { - > a, > button { - color: $dropdownLinkColor; - background: none; - padding: 6px 16px; - margin-bottom: 2px; - > i[class^="icon-"], i[class*=" icon-"] { - margin-right: 14px; - margin-top: -3px; - min-width: 19px; - vertical-align: middle; - } - i.icon-round { - min-width: 16px; - } - &.disabled, &[disabled] { - @include opacity(50); - } - } - > a, > button { - &:hover, &:focus { - background: $dropdownLinkBackgroundHover; - text-decoration: none; - cursor: pointer; - } - &.disabled:hover, &[disabled]:hover { - background: none; - cursor: default; - } - } - .preferred-desk { - background-color: #59b3bc; - } - } - &.dropdown__menu--plain { - li { - padding: 5px 7px; - &:hover { - background: $dropdownLinkBackgroundHover; - cursor: pointer; - } - } - } - &:before { - width:23px; - height:16px; - display: block; - z-index: 9999; - position: absolute; - top:-16px; - left:10px; - background: url(~images/dropdown-arrow-top.png) no-repeat; - content: " "; - } -} -// Button variation for menu items with active state (.menu-item--active) -.dropdown__menu { - .menu-item--active { - button, button:hover { - background-color: lighten($sd-blue, 10%); - color: white; - [class^="icon-"], [class*=" icon-"], - [class^="filetype-icon-"], [class*=" filetype-icon-"] { - color: white; - } - } - button:hover { - background-color: $sd-blue; - } - } -} - -.dropdown__menu-label { - text-transform: uppercase; - font-size: 11px; - color: $grayLight; - font-weight: 500; - padding-left: 16px; - .dropdown__menu-close { - position: absolute; - top: 10px; right: 10px; - padding: 0; margin: 0; - border: 0; width: auto; - @include opacity(50); - background-color: transparent; - i { margin-right: 0; } - &:hover, &:focus { - background-color: transparent; - @include opacity(100); - } - } -} -.dropdown__menu-header { - font-weight: 300; - font-size: 15px; - color: $grayLight; - padding-left: 16px; -} - -.dropdown__menu-footer { - padding: 10px; - margin-top: 6px; - border-top: 1px solid #e5e5e5; -} - -.dropdown__menu-info { - color: $grayLight; - font-style: italic; -} -.dropdown__menu-item { - padding: 0; - &--left-10 { - padding-left: 10px; - } -} - -.dropdown__menu--padded-l10 { - > li { - padding-left: 10px; - } - .dropdown__menu-item { - padding: 0; - } -} - -// Aligns the dropdown menu to right -.dropdown__menu--right { - right: 0; - left: auto; -} - -.dropdown__menu { - .menu-item--active { - button, button:hover { - background-color: lighten($sd-blue, 10%); - color: white; - [class^="icon-"], [class*=" icon-"], - [class^="filetype-icon-"], [class*=" filetype-icon-"] { - color: white; - } - } - button:hover { - background-color: $sd-blue; - } - } -} - -// Dividers (basically an hr) within the dropdown -.dropdown__divider { - @include nav-divider(); -} - - -// Open state for the dropdown -// --------------------------- -.dropdown.open { - .dropdown__menu { - display: block; - &.dropdown__menu--scrollable { - max-height: 350px; - overflow: auto; - overflow-x: hidden; - } - } -} - -//Right aligned dropdowns -.pull-right .dropdown__menu, .pull-right.dropdown__menu { - left: auto; - right: 0; - &:before { - left: auto; - right:10px; - } -} - - -.dropdown--dropup { - // Reverse the caret - .dropdown__caret { - border-top: 0; - border-bottom: 4px solid $black; - content: "\2191"; - } - // Different positioning for bottom up menu - .dropdown__menu { - top: auto; - bottom: 100%; - margin-bottom: 0; - &:before { - top: auto; - bottom:-16px; - background: url('~images/dropdown-arrow-bottom.png') no-repeat; - } - } -} - -.dropdown--dropleft { - display: inline-block; - vertical-align: middle; - .dropdown__menu { - top: -23px; - left: auto; - right: calc(100% + 15px); - &:before { - width: 15px; - height: 22px; - display: block; - z-index: 100; - position: absolute; - right: -15px; - left: auto; - top: 10px; - background: url('~images/dropdown-arrow-side.png') no-repeat; - @include rotate(180deg); - content: " "; - } - } -} - -.dropdown--dropright { - display: inline-block; - vertical-align: middle; - .dropdown__menu { - top: -23px; - left: calc(100% + 15px); - &:before { - width: 15px; - height: 22px; - display: block; - z-index: 100; - position: absolute; - left: -15px; - top: 10px; - background: url('~images/dropdown-arrow-side.png') no-repeat; - content: " "; - } - } -} - -// CLassic dropdown with no arrow -// ------------------------------------------------- -.dropdown--noarrow { - display: inline-block; - .dropdown__menu { - margin: 0; - max-height: 250px; - overflow: auto; - } - .dropdown__menu:before { - display: none; - } - .dropdown { - .dropdown__toggle { - display: block; - padding: 3px 15px; - clear: both; - font-weight: normal; - line-height: 18px; - white-space: nowrap; - } - } - &.open li > .dropdown .dropdown__toggle { - display: block; - padding: 5px 7px; - margin: 0; - clear: both; - font-weight: normal; - line-height: 18px; - white-space: nowrap; - } -} - -.dropdown--noarrow.dropdown--no-scroll { - .dropdown__menu { - max-height: none; - overflow: visible; - } -} - -// CLassic scrollable dropdown -// ------------------------------------------------- - -// .dropdown.dropdown--scrollable { -// .dropdown__menu { -// max-height: 250px; -// overflow: auto; -// } -// } - -// Classic dropdown with bigger width -// ------------------------------------------------- -.dropdown--bigger { - .dropdown__menu { - min-width: 238px; - } -} -.dropdown--bigger-500 { - .dropdown__menu { - min-width: 300px; - } -} - -// Activity dropdown -// ------------------------------------------------- -.dropdown--more-activity { - .dropdown__menu { - min-width: 0; - padding: 5px; - @include border-radius(0px); - border:0; - z-index: 1; - margin-top: -1px; - &:before { - display: none; - } - li { - display: inline-block; - vertical-align: middle; - a { - padding: 0; - i { - margin-right: 0; - } - span { - display: none; - } - } - } - } -} - -// Dark dropdowns -// ------------------------------------------------- -.dropdown.dropdown--dark { - .dropdown__toggle { - text-align: left; - background: #4f4f4f; - padding: 10px 15px; - border-radius: 2px; - color: #fff; - .dropdown__caret { - border-top-color: $white; - } - } -} - -// Multiedit dropdown -// ------------------------------------------------- - -.dropdown__menu--multiedit { - max-height: 400px; - overflow-y: auto; - overflow-x: hidden; - li { - margin-bottom: 4px; - } - li button { - width: 300px; - padding-right: 30px; - overflow: hidden; - text-overflow: ellipsis; - position: relative; - border-radius: 0; - i { - position: absolute; - right: -5px; - top: 9px; - } - &.disabled, &.disabled:hover { - background: #f0f0f0; - i { - @include opacity(20); - } - } - } - li .msg { - padding: 0 20px; - } -} - -// compare-versions dropdown -// ------------------------------------------------- - -.dropdown__menu--compare-versions { - max-height: 400px; - overflow-y: auto; - overflow-x: hidden; - li { - margin-bottom: 2px; - line-height: 14px !important; - .dropdown.open li .dropdown .dropdown__toggle:hover { - display: none; - } - } - li button { - width: 300px; - padding-right: 30px; - overflow: hidden; - text-overflow: ellipsis; - position: relative; - border-radius: 0; - line-height: 14px !important; - box-shadow: 0px 1px 1px 0 rgba(0, 0, 0, 0.15); - i { - position: absolute; - right: -5px; - top: 9px; - } - &.disabled, &.disabled:hover { - background: #f0f0f0; - i { - @include opacity(20); - } - } - .headline { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - font-size: 11px; - font-weight: 500; - width: 240px; - display: inline-block; - } - .desk-details { - display: block; - font-size: 10px; - } - em { - font-size: 10px; - font-weight: 500; - color: #888; - float: left; - padding-right: 10px; - } - } - li .msg { - padding: 0 20px; - } -} - - - -// .subscriber-products { -// .dropdown.dropdown--bigger { -// .dropdown__menu { -// min-width: 500px; -// } -// } -// } diff --git a/styles/sass/dropdowns/_input-dropdown.scss b/styles/sass/dropdowns/_input-dropdown.scss index 982897b40a..ca697f6f30 100644 --- a/styles/sass/dropdowns/_input-dropdown.scss +++ b/styles/sass/dropdowns/_input-dropdown.scss @@ -1,23 +1,23 @@ // Dropdown integrated in input field // ------------------------------------------------- -.dropdown.dropdown--input-addon { - position: absolute; - right: 12px; - margin-top: -1px; - > .dropdown__toggle { - height: 22px; - line-height: 0; - padding: 2px 6px; - box-shadow: none; - margin-bottom: 2px; - background-color: transparent; - @include box-shadow(none !important); - .dropdown__caret { - padding: 0px; - margin-left: 0; - } - } - &.open > .dropdown__toggle { - background-color: transparent; - } -} \ No newline at end of file +// .dropdown.dropdown--input-addon { +// position: absolute; +// right: 12px; +// margin-top: -1px; +// > .dropdown__toggle { +// height: 22px; +// line-height: 0; +// padding: 2px 6px; +// box-shadow: none; +// margin-bottom: 2px; +// background-color: transparent; +// @include box-shadow(none !important); +// .dropdown__caret { +// padding: 0px; +// margin-left: 0; +// } +// } +// &.open > .dropdown__toggle { +// background-color: transparent; +// } +// } \ No newline at end of file diff --git a/styles/sass/dropdowns/_navigation-dropdown.scss b/styles/sass/dropdowns/_navigation-dropdown.scss index 8bbc813d1a..3d7c3c976d 100644 --- a/styles/sass/dropdowns/_navigation-dropdown.scss +++ b/styles/sass/dropdowns/_navigation-dropdown.scss @@ -1,7 +1,7 @@ //navigation big dropdown .dropdown.dropdown--big, .navbtn.dropdown { - .dropdown__toggle { + & > .dropdown__toggle { padding: 0 15px; display: block; color:$sd-text; @@ -20,7 +20,7 @@ } } &.open { - .dropdown__toggle { + & > .dropdown__toggle { background: #fff; color:$sd-text; box-shadow:-3px 0px 1px -2px #999,3px 0px 1px -2px #999; diff --git a/styles/sass/dropdowns/_nested-dropdown.scss b/styles/sass/dropdowns/_nested-dropdown.scss deleted file mode 100644 index 4ac23278e2..0000000000 --- a/styles/sass/dropdowns/_nested-dropdown.scss +++ /dev/null @@ -1,57 +0,0 @@ -// Nested dropdowns -// ------------------------------------------------- -.dropdown { - &.open { - li .dropdown { - float: none; - .dropdown__toggle { - margin: 0; - min-width: 170px; - padding: 6px 10px 6px 16px; - line-height: 19px; - border-radius: 3px; - height: auto; - font-size: 13px; - text-align: left; - @include box-shadow(none); - i { - margin-right: 10px; - } - &:hover { - background: $sd-hover; - cursor: default; - } - } - &:not(.open) .dropdown__menu { - display: none; - } - > .dropdown__menu { - left: 100%; - right: auto; - top: 0; - min-width: 160px; - z-index: 10; - &.right-submenu { - left: auto; - right: 100%; - } - &.upward { - top: auto; - bottom: -10px; - } - &.pull-right { - left: auto; - right: 0; - } - } - &.dropdown--dropup > .dropdown__menu { - top: auto; - } - &:hover { - > .dropdown__menu { - display: block; - } - } - } - } -} \ No newline at end of file diff --git a/styles/sass/dropdowns/_other_dropdown.scss b/styles/sass/dropdowns/_other_dropdown.scss index d112bd45e5..dae7057375 100644 --- a/styles/sass/dropdowns/_other_dropdown.scss +++ b/styles/sass/dropdowns/_other_dropdown.scss @@ -1,53 +1,53 @@ -.sd-widget.metadata { - .dropdown { - margin-right: -5px; - .dropdown__toggle { - display: inline-block; - max-width: 100%; - min-width: 40px; - @include border-box(); - height: 28px; - margin-top: -5px; - border-radius: 2px; - border: 1px solid #f8f8f8; - padding: 4px 10px; - overflow: hidden; - text-overflow: ellipsis; - &:hover { - cursor: pointer; - } - } - .dropdown__menu { - &:before { - display: none; - } - margin: 0; - margin-top: -5px; - @include border-box(); - @include border-radius(0); - max-width: $tabpane-width - 40px; - button { - overflow: hidden; - text-overflow: ellipsis; - } - } - } - &.small { - .dropdown { - .dropdown__toggle { - width: 40px; - } - .dropdown__menu { - width: 70px; - min-width: 0; - } - } - } +// .sd-widget.metadata { +// .dropdown { +// margin-right: -5px; +// .dropdown__toggle { +// display: inline-block; +// max-width: 100%; +// min-width: 40px; +// @include border-box(); +// height: 28px; +// margin-top: -5px; +// border-radius: 2px; +// border: 1px solid #f8f8f8; +// padding: 4px 10px; +// overflow: hidden; +// text-overflow: ellipsis; +// &:hover { +// cursor: pointer; +// } +// } +// .dropdown__menu { +// &:before { +// display: none; +// } +// margin: 0; +// margin-top: -5px; +// @include border-box(); +// @include border-radius(0); +// max-width: $tabpane-width - 40px; +// button { +// overflow: hidden; +// text-overflow: ellipsis; +// } +// } +// } +// &.small { +// .dropdown { +// .dropdown__toggle { +// width: 40px; +// } +// .dropdown__menu { +// width: 70px; +// min-width: 0; +// } +// } +// } - .dropdown-nested { - position: absolute; - right: 0px; - margin-top: 0px; - } -} +// .dropdown-nested { +// position: absolute; +// right: 0px; +// margin-top: 0px; +// } +// } diff --git a/styles/sass/forms.scss b/styles/sass/forms.scss index cc770f9409..406ef3c370 100644 --- a/styles/sass/forms.scss +++ b/styles/sass/forms.scss @@ -77,7 +77,7 @@ select, .uneditable-input { display: inline-block; width: 210px; - height: $baseLineHeight; + min-height: $baseLineHeight; padding: 4px; margin-bottom: 9px; font-size: $baseFontSize; @@ -175,6 +175,15 @@ input[type="hidden"] { display: none; } +// legend +.legend { + padding: 0; + color: $grayLight; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + padding: 0 0 10px 0; +} // CHECKBOXES & RADIOS @@ -449,8 +458,7 @@ select:focus:required:invalid, background-color: $grayLighter; border: 1px solid #ccc; } - .add-on, - .btn { + .add-on { @include border-radius(3px 0 0 3px); position: relative; z-index: 5; @@ -477,8 +485,7 @@ select:focus:required:invalid, border-left-color: #eee; border-right-color: #ccc; } - .add-on, - .btn { + .add-on { padding-bottom: 3px !important; margin-left: -4px; @include border-radius(0 3px 3px 0); @@ -633,24 +640,6 @@ form, ng-form { color: $grayLight; text-transform: uppercase; height: 18px; - - input[type="checkbox"], - input[type="radio"], - .sd-checkbox, - .sd-toggle { - float: left; - margin-right: 10px; - } - - &.right { - input[type="checkbox"], - input[type="radio"], - .sd-checkbox, - .sd-toggle { - float: right; - margin-left: 10px; - } - } &.inline-label { color: #333; text-transform: none; @@ -772,10 +761,6 @@ form.flat, .form-flat { } } } - .sd-toggle, .sd-checkbox { - float: right; - margin-top: 5px; - } &.password { .info-value { -webkit-text-security: disc; @@ -994,6 +979,7 @@ input, textarea, .dropdown__toggle { background-color: transparent; padding: 0; height:24px; + font-size: $baseFontSize; &:hover { border-color: rgba(0,0,0,0.3) !important; background-color: transparent !important; diff --git a/styles/sass/layouts.scss b/styles/sass/layouts.scss index dcfdc6ebda..0a2147f701 100644 --- a/styles/sass/layouts.scss +++ b/styles/sass/layouts.scss @@ -265,14 +265,13 @@ a:hover { z-index: 2; @include box-shadow(inset 2px 0 3px -1px #d8d8d8); > header { - padding: 0 20px; position: relative; .btn { margin-top: 10px; } .close-preview { position: absolute; - top: 14px; right: 14px; + top: 14px; right: 8px; @include opacity(60); background: none; border: 0; @@ -289,9 +288,13 @@ a:hover { } .action-menu { position: absolute; - top: 0; + top: 1px; right: 0; width: 50px; + height: 44px; + .dropdown { + display: block; + } } } img { @@ -426,10 +429,7 @@ $slide-pane-width: 400px; @include border-box(); button { - width: 100%; - height: auto; margin-bottom: 15px; - padding: 12px 15px; } .btn-list li { padding-bottom: 0; } diff --git a/styles/sass/media-archive.scss b/styles/sass/media-archive.scss index de5804855e..a9dbc25add 100644 --- a/styles/sass/media-archive.scss +++ b/styles/sass/media-archive.scss @@ -751,6 +751,7 @@ $rightfield-width:60px; display: flex; white-space: nowrap; overflow: hidden; + flex-shrink: 0; } .state-label, .profile-label { margin-top: 2px; diff --git a/styles/sass/modals.scss b/styles/sass/modals.scss index 1a281f12e4..895930a206 100644 --- a/styles/sass/modals.scss +++ b/styles/sass/modals.scss @@ -1,584 +1,324 @@ -// MODALS -// ------ +// // MODALS +// // ------ -// Recalculate z-index where appropriate -.modal-open { - .dropdown__menu { z-index: $zindexDropdown + $zindexModal; } - .dropdown.open { *z-index: $zindexDropdown + $zindexModal; } - .popover { z-index: $zindexPopover + $zindexModal; } - .tooltip { z-index: $zindexTooltip + $zindexModal; } +// Modal fixes +.modal__wrapper { + display: flex; + flex-direction: column; + overflow-y: auto; } - -$modal-base-width : 460px; -$modal-large-width : 660px; -$modal-big-width : 820px; -$modal-huge-width : 1051px; - -$modal-border-radius: 4px; - -$modal-header-height : $nav-height; -$modal-footer-height : 58px; -$modal-subnav-height : $nav-height; - - - -// Background -.modal-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: $zindexModalBackdrop; - background-color: $black; - // Fade for backdrop - &.fade { opacity: 0; } +.modal--nested-fix { + .modal__content { + > div, > div > div, > div > div > div, > div > div > div > div { + display: flex; + flex-direction: column; + overflow-y: auto; + } + .modal__header, + .modal__footer { + display: block; + } + } } - -.modal-backdrop, -.modal-backdrop.fade.in { - @include opacity(30); +// fix for modal call from another modal +.modal--z-index-fix { + z-index: 1051 !important; } -body:not(:-moz-handler-blocked) .modal{ - &.moz-scroll-fix{ - .modal-dialog{ - /* height: 100%; */ - } +// SPLIT POPUP (left sidebar) +// > used for upload avatar task +$split-modal-sidebar : 200px; +.split-popup { + //min-height: 270px; + height: 400px; + max-height: 400px; + .sidebar { + position: absolute; + top:0; left: 0; bottom: 0; + width: $split-modal-sidebar; + border-right: 1px solid #ddd; + } + .main { + position: absolute; + top:0; right: 0; bottom: 0; + left: $split-modal-sidebar; } } -// Base modal -.modal { - position: fixed; - left: 40px; right: 40px; top: 40px; bottom:40px; - align-items: flex-start; - flex-direction: column; - overflow: hidden; - z-index: $zindexModal; - display: none; - &.in { - display: flex !important; - } - &.fade{ - transition: none; - -webkit-transition: none; +// Scheme create/edit modal +.add-scheme-modal { + .modal__dialog { + max-width: 840px !important; + width: 100%; } - &.wrapped, .wrapped { - .modal-content { - flex-direction: row; - align-items: initial; - flex: 0 1 auto; - width: 480px; - } - .modal-wrapper { + .modal__body { + > * { display: flex; - flex: 1 0 auto; flex-direction: column; - width: 100%; - max-height: calc(100vh - 95px); + overflow-y: auto; } } - .modal-dialog { - width: $modal-base-width + 20px; - display: flex; - max-height: 100%; - flex: 0 1 auto; - justify-content: center; - margin: 0 auto; + .modal__body-header { + flex-shrink: 0; } - .modal-content { - display: flex; - align-items: flex-start; - flex-direction: column; - flex: 0 0 $modal-base-width + 20px; - margin: 10px; - @include border-radius($modal-border-radius); - @include box-shadow(0 0 8px 2px rgba(0, 0, 0, 0.3)); - .modal-header, .modal-footer { - flex: 0 0 auto; - width: 100%; - @include border-box(); - } - .modal-body { - flex: 0 1 auto; - width: 100%; - @include border-box(); - overflow-y: auto; - } + .modal__body-content { + padding: 0 !important; + //min-height: 300px !important; } - .modal-strech { - width: 100%; + .nav-tabs { + background: $white; } - &.child-shadow { - .modal-content { - @include box-shadow(0 0 0 0 rgb(0, 0, 0)); - > * { - @include box-shadow(0 0 8px 2px rgba(0, 0, 0, 0.3)); + .pills-list { + li { + cursor: pointer; + margin-top: 10px; + min-height: 38px; + &.highlight { + background-color: rgba(94, 169, 200, 0.1); } } + &.with-action li { + padding-right: 35px; + } } -} -.modal-header { - background-color: $white; - padding: 9px 15px; - border-bottom: 1px solid #e4e4e4; - @include box-sizing(border-box); - min-height: $modal-header-height; - @include border-radius($modal-border-radius $modal-border-radius 0 0); - // Close icon - .close { - margin-top: 2px; - border: 0; - background: 0; - } - h3 { - font-size: 18px; - font-weight: 100; + .field { + clear: both; + float: none; + label { + display: inline-block; + } } - - .alert { - margin: 5px 0 0; - padding: 5px; + .summary { + margin-top: 20px; + > label { + margin-bottom: 10px; + } + .list-item { + display: block; + } + .title { + font-size: 11px; + text-transform: none; + color: $sd-text; + min-width: 0; + @include text-bold(); + } + .field { + font-size: 11px; + } } - &--padding-20 { - padding: 10px 20px; + .action-tab { + .field { margin-bottom: 10px; } + label { min-width: 90px; } } -} -.modal--about { - h4 { - font-size: 16px; + .btn-group { + .btn { margin-right: 5px; } } - .date-released { - color: #767676; - margin-bottom: 24px; + .add { + position: absolute; + padding: 0; + margin-left: 10px; + height: 22px; + width: 22px; + @include border-radius(50%); + line-height: 20px; + i { margin: 0; } + } + + .term-editor { + width: 400px; + .main-list { + overflow: visible; + } } } -.modal-header--about { - background-color: $superdesk-green; - padding: 15px 15px 20px 20px; - i { - color: white; - } - .modal-header__sd-logo { - background: url(~images/superdesk-logo_white.svg) no-repeat 0 0; - width: 154px; - height: 48px; - text-indent: 100%; - white-space: nowrap; - overflow: hidden; - float: left; - } -} +// Split view for modals +// > used in routing schemes +.split-view { + display: flex; -// Body (where all modal content resises) -.modal-body { - background: $sd-background; - overflow-y: auto; - //max-height: 400px; - padding: 20px; - position: relative; - &.modal-body-white { - background: $white; - } - .nav-tabs { - position: absolute; - left: 0; right: 0; top: 0; - border-bottom: 1px solid #e4e4e4; - height: $modal-subnav-height; - line-height: $modal-subnav-height - 20; - padding: 0px 20px; - @include box-sizing(border-box); - background: $white; - } - .tab-content { - margin-top: $modal-subnav-height; + .sidebar, .main { + overflow-x: hidden; + overflow-y: auto; } - .modal-screen { - position: absolute; - left: 0; right: 0; top: 0; bottom: 0; - overflow-y: auto; - overflow-x: hidden; + .sidebar { + width: 250px; + max-width: 250px; + flex: 0 0 auto; padding: 20px; + & + .main { + border-left: 1px solid #e0e0e0; + } } -} -// Remove bottom margin if need be -.modal-form { - margin-bottom: 0; -} - -// Footer (for actions) -.modal-footer { - background-color: $white; - padding: 14px 15px 15px; - margin-bottom: 0; - text-align: right; // right align buttons - border-top: 1px solid #e4e4e4; - @include border-radius(0 0 $modal-border-radius $modal-border-radius); - @include clearfix(); // clear it in case folks use .pull-* classes on buttons - - // Properly space out buttons - .btn + .btn { - margin-left: 5px; - margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs + .main { + flex: 1 1 auto; } - // but override that for button groups - .btn-group .btn + .btn { - margin-left: -1px; + .main + .main { + //left: 50%; right: 0; + border-left: 1px solid #e0e0e0; + } + .content { + padding: 2rem; } } - -.modal { - &.modal-strech { - .modal-dialog { - height: 100%; - } - .modal-body { - .tab-content { - position: absolute; - left: 0; right: 0; bottom: 0; - top: $modal-subnav-height; - margin: 0; - padding: 20px; - overflow: auto; - display: block; - width: auto; - } - } - } - &.modal-static { - .modal-dialog { - height: auto; - .modal-body { - height: 400px; - max-height: 400px; - .tab-content { - position: absolute; - left: 0; right: 0; bottom: 0; - top: $modal-subnav-height; - margin: 0; - padding: 20px; - overflow: auto; - display: block; - width: auto; +// article fullscreen preview modal +.modal--preview-article { + .scroll-shadow { + position: absolute; + top: 47px; + width: 100vw; + } + .modal__header { + padding: 0.9rem 1.5rem !important; + .btn-group { + button { + cursor: pointer; + background: 0 0; + border: 0; + margin-top: 2px; + -webkit-appearance: none; + [class^="icon-"], [class*=" icon-"] { + width: 24px; + height: 24px; + font-size: 24px; + line-height: 24px; + color: #bfbfbf; + &:hover { + color: $gray; + } } } + label { + line-height: 18px; + display: inline-block; + } } - } - &.modal-body-grey { - .modal-body { - background: $sd-background; + .btn { + margin-right: 12px; + } + &--no-border { + border: 0 !important; } } - &.modal-large { - .modal-dialog { - max-width: $modal-large-width + 20px; - width: 100%; + .preview-content { + width: 100%; + max-width: 540px; + margin: 0 auto; + display: flex; + flex-direction: column; + .metadata { + margin: 30px 0 40px; + display: flex; + flex-direction: column; + > div { + min-height: 24px; + overflow: hidden; + margin-bottom: 10px; + } + .preview-label { + float: left; + min-width: 100px; + vertical-align: top; + } + .preview-data { + float: left; + max-width: 440px; + span { + font-size: 12px; + color: #000; + background-color: #f5f5f5; + margin-right: 3px; + margin-bottom: 3px; + padding: 3px 6px; + border-radius: 2px; + display: inline-block; + } + } } - .modal-content { - flex: 0 0 100%; + .headline { + min-height: 33px; + font-size: 28px; + line-height: 120%; + font-weight: 500; + padding: 0; + margin: 0 0 30px; } - } - &.modal-big { - .modal-dialog { - max-width: $modal-big-width + 20px; - width: 100%; + .byline { + font-size: 16px; + font-weight: 500; + margin: 0 0 30px; } - .modal-content { - flex: 0 0 100%; + .association { + margin-bottom: 40px; + p { + font-style: italic; + } } - } - &.modal-huge { - .modal-dialog { - max-width: $modal-huge-width + 20px; - width: 100%; + .body { + margin-bottom: 30px; } - .modal-content { - flex: 0 0 100%; + p { + font-size: 16px; + line-height: 150%; + font-weight: 300; + margin: 0 0 16px; } - } - &.modal-responsive { - .modal-dialog { - width: 100%; - height: 100%; - .modal-content { - flex: 0 1 100%; - -moz-box-flex: 0 0 100%; - .modal-body { - max-height: none; - flex: 1 1 auto; - } - } + figure { + margin-bottom: 20px; } - } - &.with-subnav { - .modal-dialog { - height: 100%; - .modal-body { - } + figcaption { + color: $grayLight; + padding: 4px 0; } - } - &.add-vocabulary-popup { - .modal-content { - flex: 0 0 100%; + img { + max-width: 100%; } - } - - // Preview article dialog - &.modal--fullscreen { - top: 0; - bottom: 0; - left: 0; - right: 0; - .modal-dialog { - width: 100%; - height: 100%; - .modal-content { - flex: 0 0 100%; - margin: 0; - @include border-radius(0); - .scroll-shadow { - position: absolute; - top: 47px; - width: 100vw; + &.hide-images { + .association { + p { + padding: 10px; + border: 1px solid black; } - .modal-header { - @include border-radius(0); - .btn-group { - button { - cursor: pointer; - background: 0 0; - border: 0; - margin-top: 2px; - -webkit-appearance: none; - [class^="icon-"], [class*=" icon-"] { - width: 24px; - height: 24px; - font-size: 24px; - line-height: 24px; - color: #bfbfbf; - &:hover { - color: $gray; - } - } - } - label { - line-height: 18px; - } - } - .btn { - margin-right: 12px; - } - &--no-border { - border: 0; - } - } - .modal-body { - max-height: none; - flex: 1 1 auto; - // styles for preview content - .preview-content { - width: 100%; - max-width: 540px; - margin: 0 auto; - display: flex; - flex-direction: column; - .metadata { - margin: 30px 0 40px; - display: flex; - flex-direction: column; - > div { - min-height: 24px; - overflow: hidden; - margin-bottom: 10px; - } - .preview-label { - float: left; - min-width: 100px; - vertical-align: top; - } - .preview-data { - float: left; - max-width: 440px; - span { - font-size: 12px; - color: #000; - background-color: #f5f5f5; - margin-right: 3px; - margin-bottom: 3px; - padding: 3px 6px; - border-radius: 2px; - display: inline-block; - } - } - } - .headline { - min-height: 33px; - font-size: 28px; - line-height: 120%; - font-weight: 500; - padding: 0; - margin: 0 0 30px; - } - .byline { - font-size: 16px; - font-weight: 500; - margin: 0 0 30px; - } - .association { - margin-bottom: 40px; - p { - font-style: italic; - } - } - .body { - margin-bottom: 30px; - } - p { - font-size: 16px; - line-height: 150%; - font-weight: 300; - margin: 0 0 16px; - } - figure { - margin-bottom: 20px; - } - figcaption { - color: $grayLight; - padding: 4px 0; - } - img { - max-width: 100%; - } - &.hide-images { - .association { - p { - padding: 10px; - border: 1px solid black; - } - i { - vertical-align: middle; - margin-right: 10px; - } - } - figure { - display: none !important; - } - } - } - &--white { - background: white; - } - } - .modal-footer { - @include border-radius(0); + i { + vertical-align: middle; + margin-right: 10px; } } + figure { + display: none !important; + } } } - label { - display: inline-block; - min-width: 75px; - font-size: 11px; - line-height: 26px; - margin: 0; - color: #747474; - text-transform: uppercase; - font-weight: 500; - margin-right: 5px; - - .sd-checkbox { margin-top: 4px; } - } - .field-info { - margin-left: 20px; - color: #afafaf; - } - // fix for calling a modal from another modal - &.modal--double { - z-index: 1060; - &+.modal-backdrop { - z-index: 1055; - } - } -} - - -.mini-modal { - padding: 20px; - border: 1px solid #9ecbde; - @include border-box(); - @include box-shadow(0 0 2px 0 #bbb); - background: #fff; - width: 300px; - margin-left: -150px; - &.inline { - position: relative; - width: auto; - margin-left: auto; - } - .title { - font-size: 11px; - @include text-semibold(); - color: $black; - text-transform: uppercase; - } - .close { - position: absolute; - right: 12px; - top: 8px; - } - .content { - margin: 15px 0; - .field { - margin-bottom: 10px; - } - } - .footer { - text-align: right; - } } - - -// SPLIT POPUP (left sidebar) -// > used for upload avatar task -$split-modal-sidebar : 230px; -.split-popup { - .sidebar { - position: absolute; - top:0; left: 0; bottom: 0; - width: $split-modal-sidebar; - border-right: 1px solid #ddd; +// about modal +.modal--about { + h4 { + font-size: 16px; } - .main { - position: absolute; - top:0; right: 0; bottom: 0; - left: $split-modal-sidebar; + .date-released { + color: #767676; + margin-bottom: 24px; } } -.activity-choose-modal { - @include border-radius(0px); - width: 300px; - margin-left: -150px; - margin-top: -100px; - background: none; - @include box-shadow(none); - border: 0; - .list-group { - margin-bottom: 10px; - .list-group-item { - border-color: #c0c0c0; - &:hover, &.active { - background: #e0e0e0; - } - } +.modal__header--about { + background-color: $superdesk-green; + padding: 15px 15px 20px 20px !important; + i { + color: white; } - .btn { - @include box-shadow(inset 0 1px 0 #707070); + .modal__header-sd-logo { + background: url(~images/superdesk-logo_white.svg) no-repeat 0 0; + width: 154px; + height: 48px; + text-indent: 100%; + white-space: nowrap; + overflow: hidden; + float: left; } } @@ -589,45 +329,4 @@ $split-modal-sidebar : 230px; // .animate-slide-in__from-right { animation: appearFromRight2 0.6s ease-out 0s 1; -} - -// Split view for modals -// > used in routing schemes -.split-view { - position: absolute; - right: 0; - left: 0; - top: 70px; - bottom: 0px; - - .sidebar, .main { - position: absolute; - @include border-box(); - top: 0; bottom: 10px; - left: 0; right: 50%; - padding: 10px 20px; - overflow-x: hidden; - overflow-y: auto; - } - - .sidebar { - right: 70%; - & + .main { - left: 30%; right: 0; - border-left: 1px solid #e0e0e0; - } - } - - .main + .main { - left: 50%; right: 0; - border-left: 1px solid #e0e0e0; - - } -} - -.action-panel { - margin: 5px 0 15px 0; - overflow: hidden; - padding: 12px; - @include shadow-box; } \ No newline at end of file diff --git a/styles/sass/navs.scss b/styles/sass/navs.scss index d4a002b3e4..a53b27992d 100644 --- a/styles/sass/navs.scss +++ b/styles/sass/navs.scss @@ -127,7 +127,7 @@ .nav-tabs > li:first-child > a, .nav-tabs > li:first-child > button { - margin-left: 0; + //margin-left: 0; } // PILLS @@ -351,9 +351,8 @@ &--padded { padding: 10px 20px; } - &--archive { - top:$nav-height*2; - z-index: 1000; + + .subnav { + z-index: 999; } } .subnav__page-title, @@ -430,10 +429,6 @@ .subnav__button-stack { position: relative; max-width: 100%; - & > .btn { - padding: 8px 20px; - height: 28px; - } &--square-buttons { height:48px; margin: 0 0 0 16px; @@ -518,6 +513,16 @@ } .shortcut { - text-style: italic; + font-style: italic; opacity: 0.5; } + +.navbtn--text-only { + padding: 0 20px; + width: auto; + font-size: 15px; + line-height: 48px; + &:hover { + background: hsla(0,0%,100%,.8); + } +} \ No newline at end of file diff --git a/styles/sass/sd-icon-font.scss b/styles/sass/sd-icon-font.scss deleted file mode 100644 index 71affff7cd..0000000000 --- a/styles/sass/sd-icon-font.scss +++ /dev/null @@ -1,489 +0,0 @@ -// ICON FONT -// Glyphs and icons for buttons, nav, and more -// ------------------------------------------- - -// All icons receive the styles of the tag with a base class -// of .i and are then given a unique class to add width, height, -// and font specification. Your resulting HTML will look like -// . - -// For the white version of the icons, just add the .white class: -// - -@font-face { - font-family: 'sd_icons'; - src:url('../../fonts/sd_icons.eot?-r9v51w'); - src:url('../../fonts/sd_icons.eot?#iefix-r9v51w') format('embedded-opentype'), - url('../../fonts/sd_icons.woff?-r9v51w') format('woff'), - url('../../fonts/sd_icons.ttf?-r9v51w') format('truetype'), - url('../../fonts/sd_icons.svg?-r9v51w#sd_icons') format('svg'); - font-weight: normal; - font-style: normal; -} - -[class^="icon-"], -[class*=" icon-"] { - display: inline-block; - width: 16px; - height: 16px; - line-height: 16px; - font-family: 'sd_icons'; - font-size: 16px; - color: $grayDark; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -@mixin border-radius($radius: 5px) { - border-radius: $radius; -} - -.icon-white { - color: $white; -} -[class*="icon-"].blue { - color: $sd-blue; -} -[class*="icon-"].red { - color: $red; -} -[class*="icon-"].gray { - color:$grayDark; -} -[class*="icon-"].white { - color: $white; -} - -.icon-round { - @include border-radius(50%); - background-color: $sd-blue; -} - -// Icons definition -.icon-photo:before { - content: "\e600"; -} -.icon-video:before { - content: "\e601"; -} -.icon-map-marker:before { - content: "\e602"; -} -.icon-slideshow:before { - content: "\e603"; -} -.icon-text:before { - content: "\e604"; -} -.icon-file:before { - content: "\e605"; -} -.icon-calendar:before { - content: "\e606"; -} -.icon-composite:before { - content: "\e607"; -} -.icon-audio:before { - content: "\e608"; -} -.icon-stream:before { - content: "\e609"; -} -.icon-ingest:before { - content: "\e60a"; -} -.icon-archive:before { - content: "\e60b"; -} -.icon-time:before { - content: "\e60c"; -} -.icon-pin:before { - content: "\e60d"; -} -.icon-expand:before { - content: "\e60e"; -} -.icon-ascending:before { - content: "\e60f"; -} -.icon-descending { - transform: rotate(180deg); -} -.icon-descending:before { - content: "\e60f"; -} -.icon-th:before { - content: "\e610"; -} -.icon-th-list:before { - content: "\e611"; -} -/*.icon-kanban:before { - content: "\e611"; - transform: rotate(90deg); -}*/ -.icon-pencil:before { - content: "\e612"; -} -.icon-lock:before { - content: "\e613"; -} -.icon-retweet:before { - content: "\e614"; -} -.icon-unspike:before { - content: "\e615"; -} -.icon-fullscreen:before { - content: "\e616"; -} -.icon-fetch-as:before { - content: "\e617"; -} -.icon-search:before { - content: "\e618"; -} -.icon-star:before { - content: "\e619"; -} -.icon-star-empty:before { - content: "\e61a"; -} -.icon-multi-star:before { - content: "\e61b"; -} -.icon-th-large:before { - content: "\e61c"; -} -.icon-ok:before { - content: "\e61d"; -} -.icon-zoom-in:before { - content: "\e61e"; -} -.icon-zoom-out:before { - content: "\e61f"; -} -.icon-signal:before { - content: "\e620"; -} -.icon-filter-large:before { - content: "\e621"; -} -.icon-trash:before { - content: "\e622"; -} -.icon-user:before { - content: "\e623"; -} -.icon-download:before { - content: "\e624"; -} -.icon-upload:before { - content: "\e625"; -} -.icon-repeat:before { - content: "\e626"; -} -.icon-refresh:before { - content: "\e627"; -} -.icon-list-alt:before { - content: "\e628"; -} -.icon-plus-large:before { - content: "\e629"; -} -.icon-picture:before { - content: "\e62a"; -} -.icon-question-sign:before { - content: "\e62b"; -} -.icon-info-sign:before { - content: "\e62c"; -} -.icon-plus-sign:before { - content: "\e62d"; -} -.icon-minus-sign:before { - content: "\e62e"; -} -.icon-remove-sign:before { - content: "\e62f"; -} -.icon-share-alt:before { - content: "\e630"; -} -.icon-exclamation-sign:before { - content: "\e631"; -} -.icon-eye-open:before { - content: "\e632"; -} -.icon-copy:before { - content: "\e633"; -} -.icon-comment:before { - content: "\e634"; -} -.icon-warning-sign:before { - content: "\e635"; -} -.icon-adjust:before { - content: "\e636"; -} -.icon-folder-close:before { - content: "\e637"; -} -.icon-folder-open:before { - content: "\e638"; -} -.icon-download-alt:before { - content: "\e639"; -} -.icon-tasks:before { - content: "\e63a"; -} -.icon-globe:before { - content: "\e63b"; -} -.icon-link:before { - content: "\e63c"; -} -.icon-expand-thin:before { - content: "\e63d"; -} -.icon-assign:before { - content: "\e63e"; -} -.icon-dots:before { - content: "\e63f"; -} -.icon-dots-vertical:before { - content: "\e63f"; -} -.icon-dots-vertical { - transform: rotate(90deg); -} -.icon-backward-thin:before { - content: "\e640"; -} -.icon-forward-thin:before { - content: "\e641"; -} -.icon-chevron-left-thin:before { - content: "\e642"; -} -.icon-chevron-right-thin:before { - content: "\e643"; -} -.icon-switches:before { - content: "\e644"; -} -.icon-plus-small:before { - content: "\e645"; -} -.icon-minus-small:before { - content: "\e646"; -} -.icon-close-small:before { - content: "\e647"; -} -.icon-post:before { - content: "\e648"; -} -.icon-external:before { - content: "\e649"; -} -.icon-chevron-up-thin:before { - content: "\e64a"; -} -.icon-chevron-down-thin:before { - content: "\e64b"; -} -.icon-pick:before { - content: "\e64c"; -} -.icon-revert:before { - content: "\e64d"; -} -.icon-package-plus:before { - content: "\e64e"; -} -.icon-list-plus:before { - content: "\e64f"; -} -.icon-envelope:before { - content: "\e650"; -} -.icon-heart:before { - content: "\e651"; -} -.icon-home:before { - content: "\e652"; -} -.icon-print:before { - content: "\e653"; -} -.icon-font:before { - content: "\e654"; -} -.icon-bold:before { - content: "\e655"; -} -.icon-italic:before { - content: "\e656"; -} -.icon-underline:before { - content: "\e657"; -} -.icon-striketrough:before { - content: "\e658"; -} -.icon-align-left:before { - content: "\e659"; -} -.icon-align-center:before { - content: "\e65a"; -} -.icon-align-right:before { - content: "\e65b"; -} -.icon-align-justify:before { - content: "\e65c"; -} -.icon-unordered-list:before { - content: "\e65d"; -} -.icon-indent-left:before { - content: "\e65e"; -} -.icon-indent-right:before { - content: "\e65f"; -} -.icon-ban-circle:before { - content: "\e660"; -} -.icon-bell:before { - content: "\e661"; -} -.icon-random:before { - content: "\e662"; -} -.icon-settings:before { - content: "\e663"; -} -.icon-package-create:before { - content: "\e664"; -} -.icon-list-menu:before { - content: "\e665"; -} -.icon-new-doc:before { - content: "\e666"; -} -.icon-edit-line:before { - content: "\e667"; -} -.icon-calendar-list:before { - content: "\e668"; -} -.icon-collapse:before { - content: "\e669"; -} -.icon-broadcast:before { - content: "\e66a"; -} -.icon-broadcast-create:before { - content: "\e66b"; -} -.icon-kill:before { - content: "\e66c"; -} -.icon-graphic:before { - content: "\e66d"; -} -.icon-close-thick:before { - content: "\e66e"; -} -.icon-move:before { - content: "\e66f"; -} -.icon-takes-package:before { - content: "\e670"; -} -.icon-highlight-package:before { - content: "\e671"; -} -.icon-preview-mode:before { - content: "\e672"; -} -.icon-unlocked:before { - content: "\e673"; -} -.icon-code:before { - content: "\e674"; -} -.icon-cut:before { - content: "\e675"; -} -.icon-paste:before { - content: "\e676"; -} -.icon-arrow-left:before { - content: "\e677"; -} -.icon-arrow-right:before { - content: "\e678"; -} -.icon-info-large:before { - content: "\e679"; -} -.icon-help-large:before { - content: "\e67a"; -} -.icon-attachment:before { - content: "\e67b"; -} -.icon-attachment-large:before { - content: "\e67c"; -} -.icon-table:before { - content: "\e67d"; -} -.icon-ordered-list:before { - content: "\e67e"; -} -.icon-heading-1:before { - content: "\e67f"; -} -.icon-heading-2:before { - content: "\e680"; -} -.icon-heading-3:before { - content: "\e681"; -} -.icon-heading-4:before { - content: "\e682"; -} -.icon-heading-5:before { - content: "\e683"; -} -.icon-heading-6:before { - content: "\e684"; -} -.icon-quote:before { - content: "\e685"; -} - - diff --git a/styles/sass/sf-additional.scss b/styles/sass/sf-additional.scss index 2e357c0db5..2ac5b47e56 100644 --- a/styles/sass/sf-additional.scss +++ b/styles/sass/sf-additional.scss @@ -375,6 +375,75 @@ .filter-type { padding: 0 10px; } + // compare-versions dropdown + // ------------------------------------------------- + + &--compare-versions { + max-height: 400px; + overflow-y: auto; + overflow-x: hidden; + li { + margin-bottom: 2px; + line-height: 14px !important; + .dropdown.open li .dropdown .dropdown__toggle:hover { + display: none; + } + button { + width: 300px; + padding-right: 30px; + overflow: hidden; + text-overflow: ellipsis; + position: relative; + border-radius: 0; + line-height: 14px !important; + box-shadow: 0px 1px 1px 0 rgba(0, 0, 0, 0.15); + i { + position: absolute; + right: -5px; + top: 9px; + } + &.disabled, &.disabled:hover { + background: #f0f0f0; + i { + @include opacity(20); + } + } + .headline { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 11px; + font-weight: 500; + width: 240px; + display: inline-block; + } + .desk-details { + display: block; + font-size: 10px; + } + em { + font-size: 10px; + font-weight: 500; + color: #888; + float: left; + padding-right: 10px; + } + } + .msg { + padding: 0 20px; + } + } + } + .fieldset { + button { + text-align: center; + width: auto; + min-width: 50px; + clear: none; + margin-right: 10px; + float: right; + } + } } .online-users { @@ -391,99 +460,6 @@ } } -// Checkox custom -// --------------------------------------------- -$checkButtonTextColor: #5a5a5a; -$checkButtonBorderColor: #c6c6c6; - - -.sd-checkbox { - width: 17px; - height: 15px; - display: inline-block; - background: url("~images/sf-checkbox.png") no-repeat 0 0; - vertical-align: top; - margin-right: 5px; - @include transition(all 0.2s ease-out); - &:hover { - background-position: 0 -15px; - cursor: pointer; - } - &.checked, &[checked="checked"] { - background-position: 0 -30px !important; - &:hover { - background-position: 0 -30px !important; - } - } - &--button-style { - width: auto; - box-sizing: border-box; - height: 26px; - padding: 4px 12px; - background: transparent; - color: $checkButtonTextColor; - border: 1px solid $checkButtonBorderColor; - transition: color 0.3s, background 0.3s; - border-radius: 2px; - @include transition(all 0.2s ease-out); - &:hover { - color: darken($checkButtonTextColor, 30%); - border-color: darken($checkButtonBorderColor, 30%); - @include box-shadow(0 1px 4px rgba(0,0,0,0.20)); - } - &.checked, &[checked="checked"] { - background-color: darken($sd-blue, 11%); - border-color: darken($sd-blue, 11%); - border-top-color: darken($sd-blue, 30%); - @include box-shadow(inset 0 2px 0 rgba(0,0,0,0.20)); - color: $white; - &:hover { - color: $white; - border-color: darken($sd-blue, 16%); - background-color: darken($sd-blue, 16%); - @include box-shadow(inset 0 2px 0 rgba(0,0,0,0.20)); - } - } - } -} - - - -// Toggle input -// --------------------------------------------- - -.sd-toggle { - display:inline-block; - width:40px; - height:18px; - background: #e0e0e0; - position:relative; - cursor:pointer; - margin-right: 5px; - @include border-radius(9px); - overflow: hidden; - @include box-shadow(inset 0 1px 0 0 rgba(0,0,0,0.15)); - .inner { - position:absolute; - left:2px; - width:14px; - top:2px; - height:14px; - background:$white; - @include border-radius(8px); - @include box-shadow(0 1px 0 0 rgba(0,0,0,0.2)); - @include transition( all 0.3s ease); - } - &.checked { - background: $sd-blue; - .inner { - left:24px; - } - } - input[type="checkbox"] { - display:none; - } -} // Datepicker - wrapper for angular ui datepicker // --------------------------------------------- @@ -565,6 +541,22 @@ $checkButtonBorderColor: #c6c6c6; &:hover { @include box-shadow(none); } + height: 28px; + } + .btn--mini { + padding: 4px 6px; + font-size: 11px; + line-height: 11px!important; + height: 20px; + } + table { + width: 100%; + border-collapse: collapse; + border: 0; + td, th { + padding: 1px; + border: 0; + } } .datepicker-additional { margin-bottom: 5px; @@ -624,7 +616,7 @@ $checkButtonBorderColor: #c6c6c6; padding-top: 5px; } td { - padding: 0 2px; + padding: 0 2px; .btn { width: 100% !important; min-width: 28px !important; @@ -673,9 +665,21 @@ $checkButtonBorderColor: #c6c6c6; margin-bottom: 5px; table { width: 100%; + border-collapse: collapse; + border: 0; + td, th { + padding: 1px; + } } .btn { width: 100%; + letter-spacing: 0; + } + .btn--mini { + padding: 4px 6px; + font-size: 11px; + line-height: 11px!important; + height: 20px; } } .timepicker-core { @@ -1092,6 +1096,11 @@ $checkButtonBorderColor: #c6c6c6; background: none; border: 0; @include opacity(60); + &.btn { + &:hover { + box-shadow: none; + } + } } } header .sortbar { @@ -1721,16 +1730,34 @@ header .sortbar { // --------------------------------------------- .draggable-list { > li { - background: #fff url(~images/draggable-bg.png) repeat-y left 3px top 3px; - padding: 12px 14px 12px 25px; + background-color: #fff; + padding: 18px 14px 19px 25px; margin-bottom: 10px; cursor: move; @include box-shadow (0 1px 4px 0 rgba(0,0,0,0.2)); + position: relative; &.placeholder { background: none; @include box-shadow(none); border: 2px dashed #ebebeb; } + &:after { + content: ""; + width: 10px; + top: 0; + bottom: 0; + left: 2px; + background: transparent url(~images/draggable-bg.png) repeat-y left 3px top 3px; + opacity: 0.2; + position: absolute; + display: block; + } + &:hover { + @include box-shadow (0 1px 4px 0 rgba(0,0,0,0.4)); + &:after { + opacity: 0.8; + } + } } } @@ -1740,7 +1767,7 @@ header .sortbar { margin-left: 5px; > li { word-spacing: 2px; - line-height: 10px; + line-height: 0px; } .sort-item { &.active {