diff --git a/package.json b/package.json index c6954874b4..0babc77046 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,9 @@ "eslint-plugin-react": "3.0.0", "exists-file": "1.0.2", "expect": "1.13.4", - "extract-text-webpack-plugin": "2.0.0-rc.3", + "extract-text-webpack-plugin": "2.1.0", "file-loader": "0.8.5", + "glob": "7.1.1", "html-webpack-plugin": "2.17.0", "istanbul-instrumenter-loader": "2.0.0", "karma": "1.5.0", diff --git a/prod-webpack.config.js b/prod-webpack.config.js index 5e238fd16e..713c080e56 100644 --- a/prod-webpack.config.js +++ b/prod-webpack.config.js @@ -4,7 +4,7 @@ var LoaderOptionsPlugin = require("webpack/lib/LoaderOptionsPlugin"); var ParallelUglifyPlugin = require("webpack-parallel-uglify-plugin"); var DefinePlugin = require("webpack/lib/DefinePlugin"); var NormalModuleReplacementPlugin = require("webpack/lib/NormalModuleReplacementPlugin"); - +const extractThemesPlugin = require('./themes.js').extractThemesPlugin; var assign = require('object-assign'); assign(webpackConfig.entry, require('./examples.js')); @@ -30,7 +30,8 @@ webpackConfig.plugins = [ compress: {warnings: false}, mangle: true } - }) + }), + extractThemesPlugin ]; webpackConfig.devtool = undefined; diff --git a/themes.js b/themes.js new file mode 100644 index 0000000000..ac04f327c1 --- /dev/null +++ b/themes.js @@ -0,0 +1,23 @@ +const ExtractTextPlugin = require('extract-text-webpack-plugin'); +var path = require("path"); +const glob = require('glob'); +const extractThemesPlugin = new ExtractTextPlugin({ + filename: '[name].css', + disable: process.env.NODE_ENV === "development" +}); + + +const themeEntries = () => { + const globPath = path.join(__dirname, "web", "client", "themes", "*"); + var files = glob.sync(globPath); + return files.reduce((res, curr) => { + var finalRes = res || {}; + finalRes["themes/" + path.basename(curr, path.extname(curr))] = `${curr}/theme.less`; + return finalRes; + }, {}); + +}(); +module.exports = { + themeEntries, + extractThemesPlugin +}; diff --git a/web/client/actions/__tests__/theme-test.js b/web/client/actions/__tests__/theme-test.js new file mode 100644 index 0000000000..0a350ac8e4 --- /dev/null +++ b/web/client/actions/__tests__/theme-test.js @@ -0,0 +1,26 @@ +/** + * Copyright 2017, GeoSolutions Sas. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ + +var expect = require('expect'); +var { + THEME_SELECTED, + selectTheme +} = require('../theme'); + +describe('Test theme related actions', () => { + it('test theme selection action', () => { + let theme = {id: "newtheme"}; + let e = selectTheme(theme); + + expect(e).toExist(); + expect(e.type).toBe(THEME_SELECTED); + expect(e.theme).toExist(); + expect(e.theme).toBe(theme); + + }); +}); diff --git a/web/client/actions/theme.js b/web/client/actions/theme.js new file mode 100644 index 0000000000..75a0c755fc --- /dev/null +++ b/web/client/actions/theme.js @@ -0,0 +1,20 @@ +/** + * Copyright 2017, GeoSolutions Sas. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ +const THEME_SELECTED = 'THEME_SELECTED'; + + +function selectTheme(theme) { + return { + type: THEME_SELECTED, + theme + }; +} +module.exports = { + THEME_SELECTED, + selectTheme +}; diff --git a/web/client/components/TOC/DefaultLayer.jsx b/web/client/components/TOC/DefaultLayer.jsx index 22e85ea6fa..5270fab7ec 100644 --- a/web/client/components/TOC/DefaultLayer.jsx +++ b/web/client/components/TOC/DefaultLayer.jsx @@ -145,7 +145,7 @@ var DefaultLayer = React.createClass({ + style={{"float": "right", cursor: "pointer"}}/> ); } if (this.props.activateLegendTool) { diff --git a/web/client/components/TOC/fragments/SettingsModal.jsx b/web/client/components/TOC/fragments/SettingsModal.jsx index 28c80fdd3f..f5c6ecc3ce 100644 --- a/web/client/components/TOC/fragments/SettingsModal.jsx +++ b/web/client/components/TOC/fragments/SettingsModal.jsx @@ -66,8 +66,7 @@ const SettingsModal = React.createClass({ position: "absolute", // overflow: "auto", top: "100px", - left: "calc(50% - 150px)", - backgroundColor: "white" + left: "calc(50% - 150px)" }, panelClassName: "toolbar-panel", includeCloseButton: true, diff --git a/web/client/components/TOC/fragments/VisibilityCheck.jsx b/web/client/components/TOC/fragments/VisibilityCheck.jsx index 6dd4a2ef08..bb6db3520a 100644 --- a/web/client/components/TOC/fragments/VisibilityCheck.jsx +++ b/web/client/components/TOC/fragments/VisibilityCheck.jsx @@ -23,7 +23,7 @@ const VisibilityCheck = React.createClass({ }, getDefaultProps() { return { - style: {left: "-3px"}, + style: {}, checkType: "glyph", glyphChecked: "eye-open", tooltip: "toc.toggleLayerVisibility", diff --git a/web/client/components/TOC/fragments/css/grouptitle.css b/web/client/components/TOC/fragments/css/grouptitle.css index a3951fc413..89dca3d2e0 100644 --- a/web/client/components/TOC/fragments/css/grouptitle.css +++ b/web/client/components/TOC/fragments/css/grouptitle.css @@ -5,7 +5,4 @@ } .toc-default-group .visibility-check{ float: left; - margin-right: 2px; - margin-top: 5px; - margin-left: 2px; } diff --git a/web/client/components/TOC/fragments/css/visibilitycheck.css b/web/client/components/TOC/fragments/css/visibilitycheck.css index b5fa9623c4..a01a1ace2e 100644 --- a/web/client/components/TOC/fragments/css/visibilitycheck.css +++ b/web/client/components/TOC/fragments/css/visibilitycheck.css @@ -8,9 +8,6 @@ input[type="checkbox"].visibility-check,input[type="radio"].visibility-check { .visibility-check.glyphicon { float: left; overflow: hidden; - margin-left: 5px; - margin-right: 5px; - margin-top: 5px; } button.clayer_removal_button.btn.btn-default { border: transparent; diff --git a/web/client/components/TOC/fragments/settings/WMSStyle.jsx b/web/client/components/TOC/fragments/settings/WMSStyle.jsx index 237528e6e4..2018f584b6 100644 --- a/web/client/components/TOC/fragments/settings/WMSStyle.jsx +++ b/web/client/components/TOC/fragments/settings/WMSStyle.jsx @@ -78,7 +78,7 @@ const WMSStyle = React.createClass({
{this.renderLegend()} {this.renderError()} - +
); }, diff --git a/web/client/components/data/featuregrid/featuregrid.css b/web/client/components/data/featuregrid/featuregrid.css index 8482c1a4d8..94fb5bb410 100644 --- a/web/client/components/data/featuregrid/featuregrid.css +++ b/web/client/components/data/featuregrid/featuregrid.css @@ -1,20 +1,6 @@ -.ag-fresh .ag-header, .ag-fresh .ag-tool-panel-container { - background: #078AA3; - color: white; - font-family: Raleway; -} -.ag-fresh .ag-tool-panel-container .ag-list-selection{ - color: black; -} .ag-fresh .ag-paging-button { - color: #078aa3; - background-color: #ffffff; - border: #078aa3 1px solid; padding: 5px; } -.ag-fresh .ag-paging-page-summary-panel { - color: #078aa3; -} .featuregrid-tools { position: absolute; right: 0; diff --git a/web/client/components/data/identify/css/identify.css b/web/client/components/data/identify/css/identify.css index 419f1175f3..20d8784bd7 100644 --- a/web/client/components/data/identify/css/identify.css +++ b/web/client/components/data/identify/css/identify.css @@ -17,7 +17,6 @@ } #mapstore-getfeatureinfo .swipeable-view .panel-heading { - background-color: white; border: none; height: 60px; padding: 0; diff --git a/web/client/components/data/query/queryform.css b/web/client/components/data/query/queryform.css index 583adf5451..c09382a4d4 100644 --- a/web/client/components/data/query/queryform.css +++ b/web/client/components/data/query/queryform.css @@ -14,10 +14,6 @@ float: left; } -#mapstore-drawermenu #toc-query-container { - background-color: #f7f7f7; -} - /*****************************/ /* END - TOC *****************/ /*****************************/ @@ -41,35 +37,16 @@ border: none; } -#mapstore-drawermenu #query-form-panel .glyphicon { - font-size: 22px; -} - #query-form-panel .btn-default { background-color: transparent; border-radius: 0; - color: #078aa3; - border-color: #078aa3; -} - -#query-form-panel .btn-default:hover { - background-color: #dedede; } #query-form-panel input.form-control { height: 32px; - border: 1px solid #dedede; -} - -#query-form-panel button:disabled { - color: #ffffff; - background-color: #abc8cd; - border-color: transparent; } #query-form-panel button:disabled { - color: #ffffff; - background-color: #abc8cd; border-color: transparent; } @@ -88,32 +65,17 @@ } #query-form-panel .filter-buttons { - background-color: #f7f7f7; border: none; margin-left: 4px; } -#query-form-panel .filter-buttons:hover { - background-color: #dedede; -} - #query-form-panel .remove-filter-button { - height: 32px; - width: 32px; padding: 0; margin: 2px; border: none; float: right; } -#mapstore-drawermenu #query-form-panel .remove-filter-button .glyphicon { - font-size: 32px; -} - -#mapstore-drawermenu #query-form-panel .remove-filter-button span { - line-height: 32px; -} - #query-form-panel .close { display: none; } @@ -123,7 +85,6 @@ } #query-form-panel input { - border: 1px solid #dedede; border-radius: 4px; padding: 0 4px 0 8px; } @@ -143,17 +104,13 @@ #query-form-panel .query-toolbar { padding: 0; - height: 50px; - /*border-bottom: 2px dotted #dedede;*/ overflow: hidden; - background-color: #ffffff; } #query-form-panel #query-toolbar-title { float: left; font-size: 20px; margin: 11px 11px 11px 20px; - color: #078aa3; } #query-form-panel .queryFormToolbar { @@ -170,30 +127,16 @@ /* BODY QUERY ****************/ /*****************************/ -#query-form-panel .querypanel { - background-color: #f7f7f7; -} - #query-form-panel .querypanel .panel-heading { border: none; - color: #333333; text-decoration: underline; padding-left: 11px; background-color: transparent; font-weight: bold; } -#query-form-panel .querypanel .panel-heading span { - font-size: 14px; -} - -#query-form-panel .querypanel .panel-heading .panel-title:hover { - color: #777777; -} - #query-form-panel .query-content > .container-fluid { margin: 4px 0 4px 0; - border-top: 1px dashed #dedede; } #query-form-panel .filter-field-row > div { @@ -225,16 +168,9 @@ #query-form-panel .querypanel > .query-filter-container { margin: 0 30px 20px 20px; background-color: transparent; - border-bottom: 1px solid #dedede; padding-bottom: 10px; } -#mapstore-drawermenu #query-form-panel .querypanel > .query-filter-container { - margin-right: 60px; - margin-left: 10px; -} - -/* nested groups */ #query-form-panel .panel .panel .panel { margin-left: 10px; } @@ -243,23 +179,9 @@ -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); - background-color: #ffffff; margin-bottom: 20px; } -#query-form-panel .panel .panel .filter-group-panel button { - background-color: #ffffff; -} - -#query-form-panel .panel .panel .filter-group-panel button:hover { - background-color: #dedede; -} -/* end - nested groups */ - -#query-form-panel hr { - border-top: 1px dashed #dedede; -} - #query-form-panel h5 { font-family: Georgia, serif; font-style: italic; @@ -286,7 +208,6 @@ /*****************************/ #query-form-panel div.details-panel { - background-color: #ffffff; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); @@ -302,7 +223,6 @@ #query-form-panel .details-panel .detail-title span { text-decoration: none; - line-height: 32px; font-weight: normal; } @@ -310,17 +230,12 @@ float: right; border: none; margin-top: 8px; - background-color: #ffffff; } #query-form-panel .details-panel button.remove-filter-button { margin-top: 0; } -#query-form-panel .details-panel button.remove-filter-button:hover { - background-color: #dedede; -} - #query-form-panel .details-panel button.remove-filter-button span { cursor: pointer; } diff --git a/web/client/components/help/help.css b/web/client/components/help/help.css index cb3f132d47..83cc05e13e 100644 --- a/web/client/components/help/help.css +++ b/web/client/components/help/help.css @@ -50,8 +50,6 @@ #helpbadge-scaleBox { left: 0 !important; - background-color: #078aa3; - color: #ffffff; } #mapstore-navbar #helpbadge-search-help { @@ -59,6 +57,4 @@ left: -10px; bottom: -8px; z-index: 1; - background-color: #078aa3; - color: #ffffff; } diff --git a/web/client/components/manager/users/GroupCard.jsx b/web/client/components/manager/users/GroupCard.jsx index 642d6ec54b..b97f2e8e84 100644 --- a/web/client/components/manager/users/GroupCard.jsx +++ b/web/client/components/manager/users/GroupCard.jsx @@ -28,7 +28,6 @@ const GroupCard = React.createClass({ getDefaultProps() { return { style: { - background: "#F7F4ED", position: "relative", backgroundSize: "cover", backgroundPosition: "center", @@ -41,8 +40,8 @@ const GroupCard = React.createClass({ return (
{this.props.group.enabled ? - : - } + : + }
); }, renderAvatar() { diff --git a/web/client/components/manager/users/UserCard.jsx b/web/client/components/manager/users/UserCard.jsx index 51cb62fbb3..dc2cafb4fa 100644 --- a/web/client/components/manager/users/UserCard.jsx +++ b/web/client/components/manager/users/UserCard.jsx @@ -28,7 +28,6 @@ const UserCard = React.createClass({ getDefaultProps() { return { style: { - background: "#F7F4ED", position: "relative", backgroundSize: "cover", backgroundPosition: "center", @@ -43,8 +42,8 @@ const UserCard = React.createClass({ return (
{this.props.user.enabled ? - : - } + : + }
); }, renderGroups() { diff --git a/web/client/components/manager/users/style/userdialog.css b/web/client/components/manager/users/style/userdialog.css index 152d2c6295..1d865b9123 100644 --- a/web/client/components/manager/users/style/userdialog.css +++ b/web/client/components/manager/users/style/userdialog.css @@ -1,5 +1,4 @@ .user-edit-dialog, .group-edit-dialog{ - background: white; z-index: 1000; } diff --git a/web/client/components/map/leaflet/ScaleBar.jsx b/web/client/components/map/leaflet/ScaleBar.jsx index c8f656f713..a94515c40d 100644 --- a/web/client/components/map/leaflet/ScaleBar.jsx +++ b/web/client/components/map/leaflet/ScaleBar.jsx @@ -32,12 +32,6 @@ var ScaleBar = React.createClass({ this.scalebar = L.control.scale(this.props); if (this.props.map) { this.scalebar.addTo(this.props.map); - let scaleDom = document.getElementsByClassName('leaflet-control-scale-line').item(0); - if (scaleDom) { - scaleDom.style.backgroundColor = 'rgba(7, 138, 163, 1)'; - scaleDom.style.color = 'white'; - scaleDom.style.borderColor = 'black'; - } } }, render() { diff --git a/web/client/components/map/openlayers/ScaleBar.jsx b/web/client/components/map/openlayers/ScaleBar.jsx index 2898197f34..0b1dd8ccf3 100644 --- a/web/client/components/map/openlayers/ScaleBar.jsx +++ b/web/client/components/map/openlayers/ScaleBar.jsx @@ -28,12 +28,6 @@ var ScaleBar = React.createClass({ this.scalebar = new ol.control.ScaleLine(this.props); if (this.props.map) { this.props.map.addControl(this.scalebar); - let scaleDom = document.getElementsByClassName('ol-scale-line').item(0); - if (scaleDom) { - scaleDom.style.backgroundColor = 'rgba(7, 138, 163, 1)'; - scaleDom.style.color = 'white'; - scaleDom.style.borderColor = 'black'; - } } }, render() { diff --git a/web/client/components/mapcontrols/Snapshot/SnapshotPanel.jsx b/web/client/components/mapcontrols/Snapshot/SnapshotPanel.jsx index da315031d3..c8e26e49a2 100644 --- a/web/client/components/mapcontrols/Snapshot/SnapshotPanel.jsx +++ b/web/client/components/mapcontrols/Snapshot/SnapshotPanel.jsx @@ -111,7 +111,7 @@ let SnapshotPanel = React.createClass({ renderButton(enabled) { return (); }, renderError() { diff --git a/web/client/components/mapcontrols/search/SearchBar.jsx b/web/client/components/mapcontrols/search/SearchBar.jsx index 0e44937526..5549700136 100644 --- a/web/client/components/mapcontrols/search/SearchBar.jsx +++ b/web/client/components/mapcontrols/search/SearchBar.jsx @@ -121,13 +121,13 @@ let SearchBar = React.createClass({ if (this.props.loading) { addonAfter = [, addonAfter]; } if (this.props.error) { let tooltip = {this.props.error && this.props.error.message || null}; - addonAfter.push(); + addonAfter.push(); } return {addonAfter}; }, diff --git a/web/client/components/mapcontrols/search/searchbar.css b/web/client/components/mapcontrols/search/searchbar.css index 46aa6f1e15..1cb9b7c488 100644 --- a/web/client/components/mapcontrols/search/searchbar.css +++ b/web/client/components/mapcontrols/search/searchbar.css @@ -13,14 +13,14 @@ box-shadow: 2px 2px 4px #A7A7A7; border-radius: 4px; } -.searchclear { +/*.searchclear { top:0; bottom:0; height:14px; margin:auto; font-size:14px; cursor:pointer; -} +}*/ .search-result-list{ position: absolute; top: 50px; diff --git a/web/client/components/misc/style/gridcard.css b/web/client/components/misc/style/gridcard.css index ff332ce6c4..e699cc7e52 100644 --- a/web/client/components/misc/style/gridcard.css +++ b/web/client/components/misc/style/gridcard.css @@ -27,13 +27,3 @@ .gridcard-tools .spinner div:before{ background-color: white } - -.gridcard-button { - height: 30px; - width: 30px; -} -.gridcard-button span.glyphicon { - font-size: 30px; - margin-top: -6px; - margin-left: -12px; -} diff --git a/web/client/components/tutorial/style/tutorial.css b/web/client/components/tutorial/style/tutorial.css index 49524017d4..ff64927841 100644 --- a/web/client/components/tutorial/style/tutorial.css +++ b/web/client/components/tutorial/style/tutorial.css @@ -10,14 +10,6 @@ box-shadow: 0 0 0 9999px rgba(0,0,0,.75), 0 0 15px rgba(0,0,0,.75); } -.joyride-tooltip__button--primary { - background-color: #078aa3; -} - -.joyride-tooltip__button--primary:active, .joyride-tooltip__button--primary:focus, .joyride-tooltip__button--primary:hover { - background-color: #078aa3; -} - .joyride-tooltip__button--secondary{ color: #888; } diff --git a/web/client/examples/api/index.html b/web/client/examples/api/index.html index 85cd2dcf28..caaf95398b 100644 --- a/web/client/examples/api/index.html +++ b/web/client/examples/api/index.html @@ -8,10 +8,7 @@ - - - - + diff --git a/web/client/examples/plugins/assets/css/plugins.css b/web/client/examples/plugins/assets/css/plugins.css index 2332f90ebe..182ee734db 100644 --- a/web/client/examples/plugins/assets/css/plugins.css +++ b/web/client/examples/plugins/assets/css/plugins.css @@ -10,7 +10,7 @@ html, body, #container, #map { } #plugins-list button { display: inline-block; - margin-right: 10px; + margin: 2px 10px 0 0; } #plugins-list li .form-group:nth-child(2) { display: inline-block; diff --git a/web/client/examples/plugins/index.html b/web/client/examples/plugins/index.html index a22f49c5b0..a7a4f58f35 100644 --- a/web/client/examples/plugins/index.html +++ b/web/client/examples/plugins/index.html @@ -8,10 +8,7 @@ - - - - + diff --git a/web/client/index.html b/web/client/index.html index afa7e4987b..ed9a207944 100644 --- a/web/client/index.html +++ b/web/client/index.html @@ -9,10 +9,7 @@ - - - - + diff --git a/web/client/localConfig.json b/web/client/localConfig.json index d5f9bd6201..a793b97950 100644 --- a/web/client/localConfig.json +++ b/web/client/localConfig.json @@ -284,7 +284,7 @@ "className": "navbar shadow navbar-home" } }, "ManagerMenu", "Login", "Language", "Attribution"], - "maps": ["Header", "Fork", "MapSearch", "HomeDescription", "MapType", "CreateNewMap", "Maps", "Examples", "Footer"], + "maps": ["Header", "Fork", "MapSearch", "HomeDescription", "MapType", "ThemeSwitcher", "CreateNewMap", "Maps", "Examples", "Footer"], "manager": ["Header", "Redirect", "Manager", "Home", "UserManager", "GroupManager", "Footer"] } } diff --git a/web/client/plugins/ThemeSwitcher.jsx b/web/client/plugins/ThemeSwitcher.jsx new file mode 100644 index 0000000000..833f2cf3c4 --- /dev/null +++ b/web/client/plugins/ThemeSwitcher.jsx @@ -0,0 +1,70 @@ +/** + * Copyright 2017, GeoSolutions Sas. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ +const React = require('react'); +const {connect} = require('react-redux'); +const Message = require('../components/I18N/Message'); +const {FormGroup, FormControl, Label} = require('react-bootstrap'); +const {selectTheme} = require('../actions/theme'); +const ThemeSwitcher = React.createClass({ + propTypes: { + themes: React.PropTypes.array, + selectedTheme: React.PropTypes.object, + defaultSelectedTheme: React.PropTypes.string, + onThemeSelected: React.PropTypes.func + }, + getDefaultProps() { + return { + onThemeSelected: () => {}, + themes: [{ + id: "default" + }, { + id: "console" + }, { + id: "wasabi" + }, { + id: "dark" + }, { + id: "geosolutions" + }], + defaultSelectedTheme: "default" + }; + }, + + onChangeTheme(themeId) { + let theme = this.props.themes.reduce((prev, curr) => curr.id === themeId ? curr : prev); + let link = document.getElementById('theme_stylesheet'); + if (link) { + let basePath = link.href && link.href.substring(0, link.href.lastIndexOf("/")); + link.setAttribute('href', basePath + "/" + theme.id + ".css"); + } + this.props.onThemeSelected(theme); + }, + render() { + return ( + + this.onChangeTheme(e.target.value)}> + {this.props.themes.map( (t) => )} + + ); + } +}); + +const ThemeSwitcherPlugin = connect((s) => ({ + selectedTheme: s && s.theme && s.theme.selectedTheme +}), { + onThemeSelected: selectTheme +})(ThemeSwitcher); + +module.exports = { + ThemeSwitcherPlugin: ThemeSwitcherPlugin, + reducers: { + theme: require('../reducers/theme') + } +}; diff --git a/web/client/plugins/drawer/Menu.jsx b/web/client/plugins/drawer/Menu.jsx index 41c94cec0f..aa8356e615 100644 --- a/web/client/plugins/drawer/Menu.jsx +++ b/web/client/plugins/drawer/Menu.jsx @@ -67,14 +67,14 @@ var Menu = React.createClass({ renderContent() { const header = this.props.single ? (
- +
{this.renderButtons()}
) : (
{this.props.title} - +
); return (
{header} diff --git a/web/client/plugins/drawer/drawer.css b/web/client/plugins/drawer/drawer.css index 21ac55ef0d..190d2f5713 100644 --- a/web/client/plugins/drawer/drawer.css +++ b/web/client/plugins/drawer/drawer.css @@ -45,11 +45,6 @@ margin-top: 10px; } - -#mapstore-drawermenu .nav-menu { - background: rgba(255,255,255,1); -} - #mapstore-drawermenu .panel { border: none; box-shadow: none; @@ -65,7 +60,6 @@ div.nav-menu { .nav-menu .navHeader { height: 50px; - background-color: rgba(255, 255, 255, 0.75); } .nav-menu > .nav-content .navHeader .title{ font-size: 16px; @@ -75,7 +69,6 @@ div.nav-menu { } .nav-content .section { margin-bottom: 2px; - background-color: rgba(255, 255, 255, 0.5); } .nav-content .section .sectionHeader{ padding: 5px; @@ -102,7 +95,6 @@ div.nav-menu { transition: max-height .3s ease; box-shadow: inset 0px 0px 10px rgba(0,0,0,.5); - background: rgba(255,255,255,.4); padding: 5px; } diff --git a/web/client/plugins/manager/GroupManager.jsx b/web/client/plugins/manager/GroupManager.jsx index 2fc2efc9a1..9ff4c7df8a 100644 --- a/web/client/plugins/manager/GroupManager.jsx +++ b/web/client/plugins/manager/GroupManager.jsx @@ -65,7 +65,7 @@ const GroupManager = React.createClass({

diff --git a/web/client/plugins/manager/Manager.jsx b/web/client/plugins/manager/Manager.jsx index 0132f471cc..1762adabd3 100644 --- a/web/client/plugins/manager/Manager.jsx +++ b/web/client/plugins/manager/Manager.jsx @@ -50,7 +50,7 @@ const Manager = React.createClass({ this.context.router.push("/manager/" + tool.id); }}> {this.renderToolIcon(tool)} - {tool.msgId ? : tool.title || tool.id} +  {tool.msgId ? : tool.title || tool.id} )); }, renderPlugin() { diff --git a/web/client/plugins/manager/UserManager.jsx b/web/client/plugins/manager/UserManager.jsx index 9a1f1d7cce..bf1a89a29a 100644 --- a/web/client/plugins/manager/UserManager.jsx +++ b/web/client/plugins/manager/UserManager.jsx @@ -64,7 +64,7 @@ const UserManager = React.createClass({ limit={this.props.limit} />

- +
diff --git a/web/client/plugins/manager/style/manager.css b/web/client/plugins/manager/style/manager.css index 4eb489f12e..0a3f26a540 100644 --- a/web/client/plugins/manager/style/manager.css +++ b/web/client/plugins/manager/style/manager.css @@ -6,7 +6,6 @@ } .Manager-Container .Manager-Tools-Nav .glyphicon { - font-size: 25px; vertical-align: middle; } diff --git a/web/client/plugins/maploading/maploading.css b/web/client/plugins/maploading/maploading.css index 73efdb78f4..3db48831bd 100644 --- a/web/client/plugins/maploading/maploading.css +++ b/web/client/plugins/maploading/maploading.css @@ -30,19 +30,9 @@ box-shadow: none; } - -.ms2-loading { - background-color: #078aa3 !important; - border-bottom: 2px solid #5C9FB4 !important; -} - .ms2-loading .circle-wrapper { width: 30px; height: 30px; margin-left: 10px !important; margin-top: 10px !important; } - -.ms2-loading .circle-wrapper .circle:before { - background-color: white !important; -} diff --git a/web/client/plugins/omnibar/omnibar.css b/web/client/plugins/omnibar/omnibar.css index 5d70ae61a6..255f690705 100644 --- a/web/client/plugins/omnibar/omnibar.css +++ b/web/client/plugins/omnibar/omnibar.css @@ -39,12 +39,6 @@ padding-top: 0; } -.navbar-dx .dropdown-header { - background-color: #286090; - color: white; -} - - @media (min-width: 1200px) { .navbar-dx .search-wrap { width: 500px; diff --git a/web/client/plugins/print/print.css b/web/client/plugins/print/print.css index 9fba4d368b..08a55f313e 100644 --- a/web/client/plugins/print/print.css +++ b/web/client/plugins/print/print.css @@ -152,7 +152,6 @@ #mapstore-print-panel .panel-body { padding: 10px; - border: solid 1px #078AA3; } #mapstore-print-panel .form-control { diff --git a/web/client/product/assets/css/maps.css b/web/client/product/assets/css/maps.css index 5ed60de014..6807b7179c 100644 --- a/web/client/product/assets/css/maps.css +++ b/web/client/product/assets/css/maps.css @@ -22,8 +22,7 @@ #mapstore-navbar #mapstore-langselector { float: right; - margin-top: 10px; - margin-bottom: 5px; + margin-top: 8px; margin-right: 10px; width: auto; } diff --git a/web/client/product/components/home/MailingLists.jsx b/web/client/product/components/home/MailingLists.jsx index e429a2b994..406b04c92c 100644 --- a/web/client/product/components/home/MailingLists.jsx +++ b/web/client/product/components/home/MailingLists.jsx @@ -27,7 +27,7 @@ var MailingLists = React.createClass({ - +
@@ -56,7 +56,7 @@ var MailingLists = React.createClass({
- +
@@ -85,7 +85,7 @@ var MailingLists = React.createClass({
- +
diff --git a/web/client/product/plugins.js b/web/client/product/plugins.js index 9dfc8bd3eb..f2bcb7bf4a 100644 --- a/web/client/product/plugins.js +++ b/web/client/product/plugins.js @@ -61,7 +61,8 @@ module.exports = { CreateNewMapPlugin: require('../plugins/CreateNewMap'), QueryPanelPlugin: require('../plugins/QueryPanel'), FeatureGridPlugin: require('../plugins/FeatureGrid'), - TutorialPlugin: require('../plugins/Tutorial') + TutorialPlugin: require('../plugins/Tutorial'), + ThemeSwitchePluginr: require('../plugins/ThemeSwitcher') }, requires: { ReactSwipe: require('react-swipeable-views').default, diff --git a/web/client/reducers/__tests__/theme-test.js b/web/client/reducers/__tests__/theme-test.js new file mode 100644 index 0000000000..750bb8a01d --- /dev/null +++ b/web/client/reducers/__tests__/theme-test.js @@ -0,0 +1,22 @@ + +/** + * Copyright 2017, GeoSolutions Sas. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ +const expect = require('expect'); + +const theme = require('../theme'); +const {selectTheme} = require('../../actions/theme'); + + +describe('Test the theme reducer', () => { + it('should maange the THEME_SELECTED action', () => { + var state = theme({}, selectTheme({id: "default"})); + expect(state.selectedTheme).toExist(); + expect(state.selectedTheme.id).toBe("default"); + }); + +}); diff --git a/web/client/reducers/theme.js b/web/client/reducers/theme.js new file mode 100644 index 0000000000..6d128e7d7c --- /dev/null +++ b/web/client/reducers/theme.js @@ -0,0 +1,23 @@ +/** + * Copyright 2016, GeoSolutions Sas. + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ + +const {THEME_SELECTED} = require('../actions/theme'); +const assign = require('object-assign'); + +function controls(state = {}, action) { + switch (action.type) { + case THEME_SELECTED: + return assign({}, state, { + selectedTheme: action.theme + }); + default: + return state; + } +} + +module.exports = controls; diff --git a/web/client/themes/console/theme.less b/web/client/themes/console/theme.less new file mode 100644 index 0000000000..4a3542f16c --- /dev/null +++ b/web/client/themes/console/theme.less @@ -0,0 +1,5 @@ +@import "../default/icons.less"; +@import "../default/bootstrap-theme/bootstrap.less"; +@import "../default/mapstore2-theme/mapstore2.less"; +@import "../default/variables.less"; +@import "variables.less"; diff --git a/web/client/themes/console/variables.less b/web/client/themes/console/variables.less new file mode 100644 index 0000000000..76dfe45884 --- /dev/null +++ b/web/client/themes/console/variables.less @@ -0,0 +1,23 @@ + +/* base color */ +@ms2-text-color: #f2f2f2; +@ms2-body-bg: #0a0b30; + +/* disabled color */ +@ms2-disabled-color: #aaaaaa; +@ms2-disabled-bg: #eeeeee; + +/* brand color */ +@ms2-primary-color: #ffffff; +@ms2-primary-bg: #E95420; +@ms2-info-bg: #7e64a5; +@ms2-success-bg: #8ae234; +@ms2-warning-bg: #ffd700; +@ms2-danger-bg: #bb384b; + +/* btn disabled */ +@ms2-btn-disabled-color: #aaaaaa; +@ms2-btn-disabled-bg: #eeeeee; + +/* font */ +@ms2-font-family-sans-serif: Menlo, Monaco, Consolas, "Courier New", monospace;; diff --git a/web/client/themes/dark/theme.less b/web/client/themes/dark/theme.less new file mode 100644 index 0000000000..4a3542f16c --- /dev/null +++ b/web/client/themes/dark/theme.less @@ -0,0 +1,5 @@ +@import "../default/icons.less"; +@import "../default/bootstrap-theme/bootstrap.less"; +@import "../default/mapstore2-theme/mapstore2.less"; +@import "../default/variables.less"; +@import "variables.less"; diff --git a/web/client/themes/dark/variables.less b/web/client/themes/dark/variables.less new file mode 100644 index 0000000000..8f27772e8c --- /dev/null +++ b/web/client/themes/dark/variables.less @@ -0,0 +1,20 @@ + +/* base color */ +@ms2-text-color: #b29600; +@ms2-body-bg: #111111; + +/* disabled color */ +@ms2-disabled-color: #aaaaaa; +@ms2-disabled-bg: #555555; + +/* brand color */ +@ms2-primary-color: #333333; +@ms2-primary-bg: #998100; +@ms2-info-bg: #7e64a5; +@ms2-success-bg: #4abdac; +@ms2-warning-bg: #ffd700; +@ms2-danger-bg: #bb384b; + +/* btn disabled */ +@ms2-btn-disabled-color: #aaaaaa; +@ms2-btn-disabled-bg: #555555; diff --git a/web/client/themes/default/bootstrap-theme/.csscomb.json b/web/client/themes/default/bootstrap-theme/.csscomb.json new file mode 100644 index 0000000000..40695a4782 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/.csscomb.json @@ -0,0 +1,304 @@ +{ + "always-semicolon": true, + "block-indent": 2, + "color-case": "lower", + "color-shorthand": true, + "element-case": "lower", + "eof-newline": true, + "leading-zero": false, + "remove-empty-rulesets": true, + "space-after-colon": 1, + "space-after-combinator": 1, + "space-before-selector-delimiter": 0, + "space-between-declarations": "\n", + "space-after-opening-brace": "\n", + "space-before-closing-brace": "\n", + "space-before-colon": 0, + "space-before-combinator": 1, + "space-before-opening-brace": 1, + "strip-spaces": true, + "unitless-zero": true, + "vendor-prefix-align": true, + "sort-order": [ + [ + "position", + "top", + "right", + "bottom", + "left", + "z-index", + "display", + "float", + "width", + "min-width", + "max-width", + "height", + "min-height", + "max-height", + "-webkit-box-sizing", + "-moz-box-sizing", + "box-sizing", + "-webkit-appearance", + "padding", + "padding-top", + "padding-right", + "padding-bottom", + "padding-left", + "margin", + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + "overflow", + "overflow-x", + "overflow-y", + "-webkit-overflow-scrolling", + "-ms-overflow-x", + "-ms-overflow-y", + "-ms-overflow-style", + "clip", + "clear", + "font", + "font-family", + "font-size", + "font-style", + "font-weight", + "font-variant", + "font-size-adjust", + "font-stretch", + "font-effect", + "font-emphasize", + "font-emphasize-position", + "font-emphasize-style", + "font-smooth", + "-webkit-hyphens", + "-moz-hyphens", + "hyphens", + "line-height", + "color", + "text-align", + "-webkit-text-align-last", + "-moz-text-align-last", + "-ms-text-align-last", + "text-align-last", + "text-emphasis", + "text-emphasis-color", + "text-emphasis-style", + "text-emphasis-position", + "text-decoration", + "text-indent", + "text-justify", + "text-outline", + "-ms-text-overflow", + "text-overflow", + "text-overflow-ellipsis", + "text-overflow-mode", + "text-shadow", + "text-transform", + "text-wrap", + "-webkit-text-size-adjust", + "-ms-text-size-adjust", + "letter-spacing", + "-ms-word-break", + "word-break", + "word-spacing", + "-ms-word-wrap", + "word-wrap", + "-moz-tab-size", + "-o-tab-size", + "tab-size", + "white-space", + "vertical-align", + "list-style", + "list-style-position", + "list-style-type", + "list-style-image", + "pointer-events", + "-ms-touch-action", + "touch-action", + "cursor", + "visibility", + "zoom", + "flex-direction", + "flex-order", + "flex-pack", + "flex-align", + "table-layout", + "empty-cells", + "caption-side", + "border-spacing", + "border-collapse", + "content", + "quotes", + "counter-reset", + "counter-increment", + "resize", + "-webkit-user-select", + "-moz-user-select", + "-ms-user-select", + "-o-user-select", + "user-select", + "nav-index", + "nav-up", + "nav-right", + "nav-down", + "nav-left", + "background", + "background-color", + "background-image", + "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient", + "filter:progid:DXImageTransform.Microsoft.gradient", + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader", + "filter", + "background-repeat", + "background-attachment", + "background-position", + "background-position-x", + "background-position-y", + "-webkit-background-clip", + "-moz-background-clip", + "background-clip", + "background-origin", + "-webkit-background-size", + "-moz-background-size", + "-o-background-size", + "background-size", + "border", + "border-color", + "border-style", + "border-width", + "border-top", + "border-top-color", + "border-top-style", + "border-top-width", + "border-right", + "border-right-color", + "border-right-style", + "border-right-width", + "border-bottom", + "border-bottom-color", + "border-bottom-style", + "border-bottom-width", + "border-left", + "border-left-color", + "border-left-style", + "border-left-width", + "border-radius", + "border-top-left-radius", + "border-top-right-radius", + "border-bottom-right-radius", + "border-bottom-left-radius", + "-webkit-border-image", + "-moz-border-image", + "-o-border-image", + "border-image", + "-webkit-border-image-source", + "-moz-border-image-source", + "-o-border-image-source", + "border-image-source", + "-webkit-border-image-slice", + "-moz-border-image-slice", + "-o-border-image-slice", + "border-image-slice", + "-webkit-border-image-width", + "-moz-border-image-width", + "-o-border-image-width", + "border-image-width", + "-webkit-border-image-outset", + "-moz-border-image-outset", + "-o-border-image-outset", + "border-image-outset", + "-webkit-border-image-repeat", + "-moz-border-image-repeat", + "-o-border-image-repeat", + "border-image-repeat", + "outline", + "outline-width", + "outline-style", + "outline-color", + "outline-offset", + "-webkit-box-shadow", + "-moz-box-shadow", + "box-shadow", + "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity", + "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha", + "opacity", + "-ms-interpolation-mode", + "-webkit-transition", + "-moz-transition", + "-ms-transition", + "-o-transition", + "transition", + "-webkit-transition-delay", + "-moz-transition-delay", + "-ms-transition-delay", + "-o-transition-delay", + "transition-delay", + "-webkit-transition-timing-function", + "-moz-transition-timing-function", + "-ms-transition-timing-function", + "-o-transition-timing-function", + "transition-timing-function", + "-webkit-transition-duration", + "-moz-transition-duration", + "-ms-transition-duration", + "-o-transition-duration", + "transition-duration", + "-webkit-transition-property", + "-moz-transition-property", + "-ms-transition-property", + "-o-transition-property", + "transition-property", + "-webkit-transform", + "-moz-transform", + "-ms-transform", + "-o-transform", + "transform", + "-webkit-transform-origin", + "-moz-transform-origin", + "-ms-transform-origin", + "-o-transform-origin", + "transform-origin", + "-webkit-animation", + "-moz-animation", + "-ms-animation", + "-o-animation", + "animation", + "-webkit-animation-name", + "-moz-animation-name", + "-ms-animation-name", + "-o-animation-name", + "animation-name", + "-webkit-animation-duration", + "-moz-animation-duration", + "-ms-animation-duration", + "-o-animation-duration", + "animation-duration", + "-webkit-animation-play-state", + "-moz-animation-play-state", + "-ms-animation-play-state", + "-o-animation-play-state", + "animation-play-state", + "-webkit-animation-timing-function", + "-moz-animation-timing-function", + "-ms-animation-timing-function", + "-o-animation-timing-function", + "animation-timing-function", + "-webkit-animation-delay", + "-moz-animation-delay", + "-ms-animation-delay", + "-o-animation-delay", + "animation-delay", + "-webkit-animation-iteration-count", + "-moz-animation-iteration-count", + "-ms-animation-iteration-count", + "-o-animation-iteration-count", + "animation-iteration-count", + "-webkit-animation-direction", + "-moz-animation-direction", + "-ms-animation-direction", + "-o-animation-direction", + "animation-direction" + ] + ] +} diff --git a/web/client/themes/default/bootstrap-theme/.csslintrc b/web/client/themes/default/bootstrap-theme/.csslintrc new file mode 100644 index 0000000000..005b86236c --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/.csslintrc @@ -0,0 +1,19 @@ +{ + "adjoining-classes": false, + "box-sizing": false, + "box-model": false, + "compatible-vendor-prefixes": false, + "floats": false, + "font-sizes": false, + "gradients": false, + "important": false, + "known-properties": false, + "outline-none": false, + "qualified-headings": false, + "regex-selectors": false, + "shorthand": false, + "text-indent": false, + "unique-headings": false, + "universal-selector": false, + "unqualified-attributes": false +} diff --git a/web/client/themes/default/bootstrap-theme/alerts.less b/web/client/themes/default/bootstrap-theme/alerts.less new file mode 100644 index 0000000000..c4199db927 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/alerts.less @@ -0,0 +1,73 @@ +// +// Alerts +// -------------------------------------------------- + + +// Base styles +// ------------------------- + +.alert { + padding: @alert-padding; + margin-bottom: @line-height-computed; + border: 1px solid transparent; + border-radius: @alert-border-radius; + + // Headings for larger alerts + h4 { + margin-top: 0; + // Specified for the h4 to prevent conflicts of changing @headings-color + color: inherit; + } + + // Provide class for links that match alerts + .alert-link { + font-weight: @alert-link-font-weight; + } + + // Improve alignment and spacing of inner content + > p, + > ul { + margin-bottom: 0; + } + + > p + p { + margin-top: 5px; + } +} + +// Dismissible alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0. +.alert-dismissible { + padding-right: (@alert-padding + 20); + + // Adjust close link position + .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; + } +} + +// Alternate styles +// +// Generate contextual modifier classes for colorizing the alert. + +.alert-success { + .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); +} + +.alert-info { + .alert-variant(@alert-info-bg; @alert-info-border; @alert-info-text); +} + +.alert-warning { + .alert-variant(@alert-warning-bg; @alert-warning-border; @alert-warning-text); +} + +.alert-danger { + .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text); +} diff --git a/web/client/themes/default/bootstrap-theme/badges.less b/web/client/themes/default/bootstrap-theme/badges.less new file mode 100644 index 0000000000..6ee16dca41 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/badges.less @@ -0,0 +1,66 @@ +// +// Badges +// -------------------------------------------------- + + +// Base class +.badge { + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: @font-size-small; + font-weight: @badge-font-weight; + color: @badge-color; + line-height: @badge-line-height; + vertical-align: middle; + white-space: nowrap; + text-align: center; + background-color: @badge-bg; + border-radius: @badge-border-radius; + + // Empty badges collapse automatically (not available in IE8) + &:empty { + display: none; + } + + // Quick fix for badges in buttons + .btn & { + position: relative; + top: -1px; + } + + .btn-xs &, + .btn-group-xs > .btn & { + top: 0; + padding: 1px 5px; + } + + // Hover state, but only for links + a& { + &:hover, + &:focus { + color: @badge-link-hover-color; + text-decoration: none; + cursor: pointer; + } + } + + // Account for badges in navs + .list-group-item.active > &, + .nav-pills > .active > a > & { + color: @badge-active-color; + background-color: @badge-active-bg; + } + + .list-group-item > & { + float: right; + } + + .list-group-item > & + & { + margin-right: 5px; + } + + .nav-pills > li > a > & { + margin-left: 3px; + } +} diff --git a/web/client/themes/default/bootstrap-theme/bootstrap.less b/web/client/themes/default/bootstrap-theme/bootstrap.less new file mode 100644 index 0000000000..94a1a0dc87 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/bootstrap.less @@ -0,0 +1,56 @@ +/*! + * Bootstrap v3.3.7 (http://getbootstrap.com) + * Copyright 2011-2016 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +// Core variables and mixins +@import "variables.less"; +@import "mixins.less"; + +// Reset and dependencies +@import "normalize.less"; +@import "print.less"; +// @import "glyphicons.less"; + +// Core CSS +@import "scaffolding.less"; +@import "type.less"; +@import "code.less"; +@import "grid.less"; +@import "tables.less"; +@import "forms.less"; +@import "buttons.less"; + +// Components +@import "component-animations.less"; +@import "dropdowns.less"; +@import "button-groups.less"; +@import "input-groups.less"; +@import "navs.less"; +@import "navbar.less"; +@import "breadcrumbs.less"; +@import "pagination.less"; +@import "pager.less"; +@import "labels.less"; +@import "badges.less"; +@import "jumbotron.less"; +@import "thumbnails.less"; +@import "alerts.less"; +@import "progress-bars.less"; +@import "media.less"; +@import "list-group.less"; +@import "panels.less"; +@import "responsive-embed.less"; +@import "wells.less"; +@import "close.less"; + +// Components w/ JavaScript +@import "modals.less"; +@import "tooltip.less"; +@import "popovers.less"; +@import "carousel.less"; + +// Utility classes +@import "utilities.less"; +@import "responsive-utilities.less"; diff --git a/web/client/themes/default/bootstrap-theme/breadcrumbs.less b/web/client/themes/default/bootstrap-theme/breadcrumbs.less new file mode 100644 index 0000000000..cb01d503fb --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/breadcrumbs.less @@ -0,0 +1,26 @@ +// +// Breadcrumbs +// -------------------------------------------------- + + +.breadcrumb { + padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal; + margin-bottom: @line-height-computed; + list-style: none; + background-color: @breadcrumb-bg; + border-radius: @border-radius-base; + + > li { + display: inline-block; + + + li:before { + content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space + padding: 0 5px; + color: @breadcrumb-color; + } + } + + > .active { + color: @breadcrumb-active-color; + } +} diff --git a/web/client/themes/default/bootstrap-theme/button-groups.less b/web/client/themes/default/bootstrap-theme/button-groups.less new file mode 100644 index 0000000000..d3ccd12d03 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/button-groups.less @@ -0,0 +1,244 @@ +// +// Button groups +// -------------------------------------------------- + +// Make the div behave like a button +.btn-group, +.btn-group-vertical { + position: relative; + display: inline-block; + vertical-align: middle; // match .btn alignment given font-size hack above + > .btn { + position: relative; + float: left; + // Bring the "active" button to the front + &:hover, + &:focus, + &:active, + &.active { + z-index: 2; + } + } +} + +// Prevent double borders when buttons are next to each other +.btn-group { + .btn + .btn, + .btn + .btn-group, + .btn-group + .btn, + .btn-group + .btn-group { + margin-left: -1px; + } +} + +// Optional: Group multiple button groups together for a toolbar +.btn-toolbar { + margin-left: -5px; // Offset the first child's margin + &:extend(.clearfix all); + + .btn, + .btn-group, + .input-group { + float: left; + } + > .btn, + > .btn-group, + > .input-group { + margin-left: 5px; + } +} + +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { + border-radius: 0; +} + +// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match +.btn-group > .btn:first-child { + margin-left: 0; + &:not(:last-child):not(.dropdown-toggle) { + .border-right-radius(0); + } +} +// Need .dropdown-toggle since :last-child doesn't apply, given that a .dropdown-menu is used immediately after it +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + .border-left-radius(0); +} + +// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) +.btn-group > .btn-group { + float: left; +} +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group > .btn-group:first-child:not(:last-child) { + > .btn:last-child, + > .dropdown-toggle { + .border-right-radius(0); + } +} +.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { + .border-left-radius(0); +} + +// On active and open, don't show outline +.btn-group .dropdown-toggle:active, +.btn-group.open .dropdown-toggle { + outline: 0; +} + + +// Sizing +// +// Remix the default button sizing classes into new ones for easier manipulation. + +.btn-group-xs > .btn { &:extend(.btn-xs); } +.btn-group-sm > .btn { &:extend(.btn-sm); } +.btn-group-lg > .btn { &:extend(.btn-lg); } + + +// Split button dropdowns +// ---------------------- + +// Give the line between buttons some depth +.btn-group > .btn + .dropdown-toggle { + padding-left: 8px; + padding-right: 8px; +} +.btn-group > .btn-lg + .dropdown-toggle { + padding-left: 12px; + padding-right: 12px; +} + +// The clickable button for toggling the menu +// Remove the gradient and set the same inset shadow as the :active state +.btn-group.open .dropdown-toggle { + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + + // Show no shadow for `.btn-link` since it has no other button styles. + &.btn-link { + .box-shadow(none); + } +} + + +// Reposition the caret +.btn .caret { + margin-left: 0; +} +// Carets in other button sizes +.btn-lg .caret { + border-width: @caret-width-large @caret-width-large 0; + border-bottom-width: 0; +} +// Upside down carets for .dropup +.dropup .btn-lg .caret { + border-width: 0 @caret-width-large @caret-width-large; +} + + +// Vertical button groups +// ---------------------- + +.btn-group-vertical { + > .btn, + > .btn-group, + > .btn-group > .btn { + display: block; + float: none; + /*width: 100%; + max-width: 100%;*/ /* new ms2 */ + } + + // Clear floats so dropdown menus can be properly placed + > .btn-group { + &:extend(.clearfix all); + > .btn { + float: none; + } + } + + > .btn + .btn, + > .btn + .btn-group, + > .btn-group + .btn, + > .btn-group + .btn-group { + margin-top: -1px; + margin-left: 0; + } +} + +.btn-group-vertical > .btn { + &:not(:first-child):not(:last-child) { + border-radius: 0; + } + &:first-child:not(:last-child) { + .border-top-radius(@btn-border-radius-base); + .border-bottom-radius(0); + } + &:last-child:not(:first-child) { + .border-top-radius(0); + .border-bottom-radius(@btn-border-radius-base); + } +} +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group-vertical > .btn-group:first-child:not(:last-child) { + > .btn:last-child, + > .dropdown-toggle { + .border-bottom-radius(0); + } +} +.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { + .border-top-radius(0); +} + + +// Justified button groups +// ---------------------- + +.btn-group-justified { + display: table; + width: 100%; + table-layout: fixed; + border-collapse: separate; + > .btn, + > .btn-group { + float: none; + display: table-cell; + width: 1%; + } + > .btn-group .btn { + width: 100%; + } + + > .btn-group .dropdown-menu { + left: auto; + } +} + + +// Checkbox and radio options +// +// In order to support the browser's form validation feedback, powered by the +// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use +// `display: none;` or `visibility: hidden;` as that also hides the popover. +// Simply visually hiding the inputs via `opacity` would leave them clickable in +// certain cases which is prevented by using `clip` and `pointer-events`. +// This way, we ensure a DOM element is visible to position the popover from. +// +// See https://github.com/twbs/bootstrap/pull/12794 and +// https://github.com/twbs/bootstrap/pull/14559 for more information. + +[data-toggle="buttons"] { + > .btn, + > .btn-group > .btn { + input[type="radio"], + input[type="checkbox"] { + position: absolute; + clip: rect(0,0,0,0); + pointer-events: none; + } + } +} diff --git a/web/client/themes/default/bootstrap-theme/buttons.less b/web/client/themes/default/bootstrap-theme/buttons.less new file mode 100644 index 0000000000..be8f20897b --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/buttons.less @@ -0,0 +1,166 @@ +// +// Buttons +// -------------------------------------------------- + + +// Base styles +// -------------------------------------------------- + +.btn { + display: inline-block; + margin-bottom: 0; // For input.btn + font-weight: @btn-font-weight; + text-align: center; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid transparent; + white-space: nowrap; + .button-size(@padding-base-vertical; @padding-base-horizontal; @font-size-base; @line-height-base; @btn-border-radius-base); + .user-select(none); + + &, + &:active, + &.active { + &:focus, + &.focus { + .tab-focus(); + } + } + + &:hover, + &:focus, + &.focus { + color: @btn-default-color; + text-decoration: none; + } + + &:active, + &.active { + outline: 0; + background-image: none; + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + cursor: @cursor-disabled; + /*.opacity(.65);*/ + .box-shadow(none); + } + + a& { + &.disabled, + fieldset[disabled] & { + pointer-events: none; // Future-proof disabling of clicks on `` elements + } + } +} + + +// Alternate buttons +// -------------------------------------------------- + +.btn-default { + .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); +} +.btn-primary { + .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); +} +// Success appears as green +.btn-success { + .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); +} +// Info appears as blue-green +.btn-info { + .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); +} +// Warning appears as orange +.btn-warning { + .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); +} +// Danger and error appear as red +.btn-danger { + .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); +} + + +// Link buttons +// ------------------------- + +// Make a button look and behave like a link +.btn-link { + color: @link-color; + font-weight: normal; + border-radius: 0; + + &, + &:active, + &.active, + &[disabled], + fieldset[disabled] & { + background-color: transparent; + .box-shadow(none); + } + &, + &:hover, + &:focus, + &:active { + border-color: transparent; + } + &:hover, + &:focus { + color: @link-hover-color; + text-decoration: @link-hover-decoration; + background-color: transparent; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: @btn-link-disabled-color; + text-decoration: none; + } + } +} + + +// Button Sizes +// -------------------------------------------------- + +.btn-lg { + // line-height: ensure even-numbered height of button next to large input + .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @btn-border-radius-large); +} +.btn-sm { + // line-height: ensure proper height of button next to small input + .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small); +} +.btn-xs { + .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @btn-border-radius-small); +} + + +// Block button +// -------------------------------------------------- + +.btn-block { + display: block; + width: 100%; +} + +// Vertically space out multiple block buttons +.btn-block + .btn-block { + margin-top: 5px; +} + +// Specificity overrides +input[type="submit"], +input[type="reset"], +input[type="button"] { + &.btn-block { + width: 100%; + } +} diff --git a/web/client/themes/default/bootstrap-theme/carousel.less b/web/client/themes/default/bootstrap-theme/carousel.less new file mode 100644 index 0000000000..252011e9e2 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/carousel.less @@ -0,0 +1,270 @@ +// +// Carousel +// -------------------------------------------------- + + +// Wrapper for the slide container and indicators +.carousel { + position: relative; +} + +.carousel-inner { + position: relative; + overflow: hidden; + width: 100%; + + > .item { + display: none; + position: relative; + .transition(.6s ease-in-out left); + + // Account for jankitude on images + > img, + > a > img { + &:extend(.img-responsive); + line-height: 1; + } + + // WebKit CSS3 transforms for supported devices + @media all and (transform-3d), (-webkit-transform-3d) { + .transition-transform(~'0.6s ease-in-out'); + .backface-visibility(~'hidden'); + .perspective(1000px); + + &.next, + &.active.right { + .translate3d(100%, 0, 0); + left: 0; + } + &.prev, + &.active.left { + .translate3d(-100%, 0, 0); + left: 0; + } + &.next.left, + &.prev.right, + &.active { + .translate3d(0, 0, 0); + left: 0; + } + } + } + + > .active, + > .next, + > .prev { + display: block; + } + + > .active { + left: 0; + } + + > .next, + > .prev { + position: absolute; + top: 0; + width: 100%; + } + + > .next { + left: 100%; + } + > .prev { + left: -100%; + } + > .next.left, + > .prev.right { + left: 0; + } + + > .active.left { + left: -100%; + } + > .active.right { + left: 100%; + } + +} + +// Left/right controls for nav +// --------------------------- + +.carousel-control { + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: @carousel-control-width; + .opacity(@carousel-control-opacity); + font-size: @carousel-control-font-size; + color: @carousel-control-color; + text-align: center; + text-shadow: @carousel-text-shadow; + background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug + // We can't have this transition here because WebKit cancels the carousel + // animation if you trip this while in the middle of another animation. + + // Set gradients for backgrounds + &.left { + #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); + } + &.right { + left: auto; + right: 0; + #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); + } + + // Hover/focus state + &:hover, + &:focus { + outline: 0; + color: @carousel-control-color; + text-decoration: none; + .opacity(.9); + } + + // Toggles + .icon-prev, + .icon-next, + .glyphicon-chevron-left, + .glyphicon-chevron-right { + position: absolute; + top: 50%; + margin-top: -10px; + z-index: 5; + display: inline-block; + } + .icon-prev, + .glyphicon-chevron-left { + left: 50%; + margin-left: -10px; + } + .icon-next, + .glyphicon-chevron-right { + right: 50%; + margin-right: -10px; + } + .icon-prev, + .icon-next { + width: 20px; + height: 20px; + line-height: 1; + font-family: serif; + } + + + .icon-prev { + &:before { + content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) + } + } + .icon-next { + &:before { + content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A) + } + } +} + +// Optional indicator pips +// +// Add an unordered list with the following class and add a list item for each +// slide your carousel holds. + +.carousel-indicators { + position: absolute; + bottom: 10px; + left: 50%; + z-index: 15; + width: 60%; + margin-left: -30%; + padding-left: 0; + list-style: none; + text-align: center; + + li { + display: inline-block; + width: 10px; + height: 10px; + margin: 1px; + text-indent: -999px; + border: 1px solid @carousel-indicator-border-color; + border-radius: 10px; + cursor: pointer; + + // IE8-9 hack for event handling + // + // Internet Explorer 8-9 does not support clicks on elements without a set + // `background-color`. We cannot use `filter` since that's not viewed as a + // background color by the browser. Thus, a hack is needed. + // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer + // + // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we + // set alpha transparency for the best results possible. + background-color: #000 \9; // IE8 + background-color: rgba(0,0,0,0); // IE9 + } + .active { + margin: 0; + width: 12px; + height: 12px; + background-color: @carousel-indicator-active-bg; + } +} + +// Optional captions +// ----------------------------- +// Hidden by default for smaller viewports +.carousel-caption { + position: absolute; + left: 15%; + right: 15%; + bottom: 20px; + z-index: 10; + padding-top: 20px; + padding-bottom: 20px; + color: @carousel-caption-color; + text-align: center; + text-shadow: @carousel-text-shadow; + & .btn { + text-shadow: none; // No shadow for button elements in carousel-caption + } +} + + +// Scale up controls for tablets and up +@media screen and (min-width: @screen-sm-min) { + + // Scale up the controls a smidge + .carousel-control { + .glyphicon-chevron-left, + .glyphicon-chevron-right, + .icon-prev, + .icon-next { + width: (@carousel-control-font-size * 1.5); + height: (@carousel-control-font-size * 1.5); + margin-top: (@carousel-control-font-size / -2); + font-size: (@carousel-control-font-size * 1.5); + } + .glyphicon-chevron-left, + .icon-prev { + margin-left: (@carousel-control-font-size / -2); + } + .glyphicon-chevron-right, + .icon-next { + margin-right: (@carousel-control-font-size / -2); + } + } + + // Show and left align the captions + .carousel-caption { + left: 20%; + right: 20%; + padding-bottom: 30px; + } + + // Move up the indicators + .carousel-indicators { + bottom: 20px; + } +} diff --git a/web/client/themes/default/bootstrap-theme/close.less b/web/client/themes/default/bootstrap-theme/close.less new file mode 100644 index 0000000000..6d5bfe087a --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/close.less @@ -0,0 +1,34 @@ +// +// Close icons +// -------------------------------------------------- + + +.close { + float: right; + font-size: (@font-size-base * 1.5); + font-weight: @close-font-weight; + line-height: 1; + color: @close-color; + text-shadow: @close-text-shadow; + .opacity(.2); + + &:hover, + &:focus { + color: @close-color; + text-decoration: none; + cursor: pointer; + .opacity(.5); + } + + // Additional properties for button version + // iOS requires the button element instead of an anchor tag. + // If you want the anchor version, it requires `href="#"`. + // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + button& { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + } +} diff --git a/web/client/themes/default/bootstrap-theme/code.less b/web/client/themes/default/bootstrap-theme/code.less new file mode 100644 index 0000000000..a08b4d48c4 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/code.less @@ -0,0 +1,69 @@ +// +// Code (inline and block) +// -------------------------------------------------- + + +// Inline and block code styles +code, +kbd, +pre, +samp { + font-family: @font-family-monospace; +} + +// Inline code +code { + padding: 2px 4px; + font-size: 90%; + color: @code-color; + background-color: @code-bg; + border-radius: @border-radius-base; +} + +// User input typically entered via keyboard +kbd { + padding: 2px 4px; + font-size: 90%; + color: @kbd-color; + background-color: @kbd-bg; + border-radius: @border-radius-small; + box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); + + kbd { + padding: 0; + font-size: 100%; + font-weight: bold; + box-shadow: none; + } +} + +// Blocks of code +pre { + display: block; + padding: ((@line-height-computed - 1) / 2); + margin: 0 0 (@line-height-computed / 2); + font-size: (@font-size-base - 1); // 14px to 13px + line-height: @line-height-base; + word-break: break-all; + word-wrap: break-word; + color: @pre-color; + background-color: @pre-bg; + border: 1px solid @pre-border-color; + border-radius: @border-radius-base; + + // Account for some code outputs that place code tags in pre tags + code { + padding: 0; + font-size: inherit; + color: inherit; + white-space: pre-wrap; + background-color: transparent; + border-radius: 0; + } +} + +// Enable scrollable blocks of code +.pre-scrollable { + max-height: @pre-scrollable-max-height; + overflow-y: scroll; +} diff --git a/web/client/themes/default/bootstrap-theme/component-animations.less b/web/client/themes/default/bootstrap-theme/component-animations.less new file mode 100644 index 0000000000..0bcee910ac --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/component-animations.less @@ -0,0 +1,33 @@ +// +// Component animations +// -------------------------------------------------- + +// Heads up! +// +// We don't use the `.opacity()` mixin here since it causes a bug with text +// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552. + +.fade { + opacity: 0; + .transition(opacity .15s linear); + &.in { + opacity: 1; + } +} + +.collapse { + display: none; + + &.in { display: block; } + tr&.in { display: table-row; } + tbody&.in { display: table-row-group; } +} + +.collapsing { + position: relative; + height: 0; + overflow: hidden; + .transition-property(~"height, visibility"); + .transition-duration(.35s); + .transition-timing-function(ease); +} diff --git a/web/client/themes/default/bootstrap-theme/dropdowns.less b/web/client/themes/default/bootstrap-theme/dropdowns.less new file mode 100644 index 0000000000..f6876c1a9b --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/dropdowns.less @@ -0,0 +1,216 @@ +// +// Dropdown menus +// -------------------------------------------------- + + +// Dropdown arrow/caret +.caret { + display: inline-block; + width: 0; + height: 0; + margin-left: 2px; + vertical-align: middle; + border-top: @caret-width-base dashed; + border-top: @caret-width-base solid ~"\9"; // IE8 + border-right: @caret-width-base solid transparent; + border-left: @caret-width-base solid transparent; +} + +// The dropdown wrapper (div) +.dropup, +.dropdown { + position: relative; +} + +// Prevent the focus on the dropdown toggle when closing dropdowns +.dropdown-toggle:focus { + outline: 0; +} + +// The dropdown menu (ul) +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: @zindex-dropdown; + display: none; // none by default, but block on "open" of the menu + float: left; + min-width: 160px; + padding: 5px 0; + margin: 2px 0 0; // override default ul + list-style: none; + font-size: @font-size-base; + text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer) + background-color: @dropdown-bg; + border: 1px solid @dropdown-fallback-border; // IE8 fallback + border: 1px solid @dropdown-border; + border-radius: @border-radius-base; + .box-shadow(0 6px 12px rgba(0,0,0,.175)); + background-clip: padding-box; + + // Aligns the dropdown menu to right + // + // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]` + &.pull-right { + right: 0; + left: auto; + } + + // Dividers (basically an hr) within the dropdown + .divider { + .nav-divider(@dropdown-divider-bg); + } + + // Links within the dropdown menu + > li > a { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: @line-height-base; + color: @dropdown-link-color; + white-space: nowrap; // prevent links from randomly breaking onto new lines + } +} + +// Hover/Focus state +.dropdown-menu > li > a { + &:hover, + &:focus { + text-decoration: none; + color: @dropdown-link-hover-color; + background-color: @dropdown-link-hover-bg; + } +} + +// Active state +.dropdown-menu > .active > a { + &, + &:hover, + &:focus { + color: @dropdown-link-active-color; + text-decoration: none; + outline: 0; + background-color: @dropdown-link-active-bg; + } +} + +// Disabled state +// +// Gray out text and ensure the hover/focus state remains gray + +.dropdown-menu > .disabled > a { + &, + &:hover, + &:focus { + color: @dropdown-link-disabled-color; + } + + // Nuke hover/focus effects + &:hover, + &:focus { + text-decoration: none; + background-color: transparent; + background-image: none; // Remove CSS gradient + .reset-filter(); + cursor: @cursor-disabled; + } +} + +// Open state for the dropdown +.open { + // Show the menu + > .dropdown-menu { + display: block; + } + + // Remove the outline when :focus is triggered + > a { + outline: 0; + } +} + +// Menu positioning +// +// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown +// menu with the parent. +.dropdown-menu-right { + left: auto; // Reset the default from `.dropdown-menu` + right: 0; +} +// With v3, we enabled auto-flipping if you have a dropdown within a right +// aligned nav component. To enable the undoing of that, we provide an override +// to restore the default dropdown menu alignment. +// +// This is only for left-aligning a dropdown menu within a `.navbar-right` or +// `.pull-right` nav component. +.dropdown-menu-left { + left: 0; + right: auto; +} + +// Dropdown section headers +.dropdown-header { + display: block; + padding: 3px 20px; + font-size: @font-size-small; + line-height: @line-height-base; + color: @dropdown-header-color; + white-space: nowrap; // as with > li > a +} + +// Backdrop to catch body clicks on mobile, etc. +.dropdown-backdrop { + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: (@zindex-dropdown - 10); +} + +// Right aligned dropdowns +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} + +// Allow for dropdowns to go bottom up (aka, dropup-menu) +// +// Just add .dropup after the standard .dropdown class and you're set, bro. +// TODO: abstract this so that the navbar fixed styles are not placed here? + +.dropup, +.navbar-fixed-bottom .dropdown { + // Reverse the caret + .caret { + border-top: 0; + border-bottom: @caret-width-base dashed; + border-bottom: @caret-width-base solid ~"\9"; // IE8 + content: ""; + } + // Different positioning for bottom up menu + .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 2px; + } +} + + +// Component alignment +// +// Reiterate per navbar.less and the modified component alignment there. + +@media (min-width: @grid-float-breakpoint) { + .navbar-right { + .dropdown-menu { + .dropdown-menu-right(); + } + // Necessary for overrides of the default right aligned menu. + // Will remove come v4 in all likelihood. + .dropdown-menu-left { + .dropdown-menu-left(); + } + } +} diff --git a/web/client/themes/default/bootstrap-theme/forms.less b/web/client/themes/default/bootstrap-theme/forms.less new file mode 100644 index 0000000000..9377d3846b --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/forms.less @@ -0,0 +1,613 @@ +// +// Forms +// -------------------------------------------------- + + +// Normalize non-controls +// +// Restyle and baseline non-control form elements. + +fieldset { + padding: 0; + margin: 0; + border: 0; + // Chrome and Firefox set a `min-width: min-content;` on fieldsets, + // so we reset that to ensure it behaves more like a standard block element. + // See https://github.com/twbs/bootstrap/issues/12359. + min-width: 0; +} + +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: @line-height-computed; + font-size: (@font-size-base * 1.5); + line-height: inherit; + color: @legend-color; + border: 0; + border-bottom: 1px solid @legend-border-color; +} + +label { + display: inline-block; + max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141) + margin-bottom: 5px; + font-weight: bold; +} + + +// Normalize form controls +// +// While most of our form styles require extra classes, some basic normalization +// is required to ensure optimum display with or without those classes to better +// address browser inconsistencies. + +// Override content-box in Normalize (* isn't specific enough) +input[type="search"] { + .box-sizing(border-box); +} + +// Position radios and checkboxes better +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; // IE8-9 + line-height: normal; +} + +input[type="file"] { + display: block; +} + +// Make range inputs behave like textual form controls +input[type="range"] { + display: block; + width: 100%; +} + +// Make multiple select elements height not fixed +select[multiple], +select[size] { + height: auto; +} + +// Focus for file, radio, and checkbox +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + .tab-focus(); +} + +// Adjust output element +output { + display: block; + padding-top: (@padding-base-vertical + 1); + font-size: @font-size-base; + line-height: @line-height-base; + color: @input-color; +} + + +// Common form controls +// +// Shared size and type resets for form controls. Apply `.form-control` to any +// of the following form controls: +// +// select +// textarea +// input[type="text"] +// input[type="password"] +// input[type="datetime"] +// input[type="datetime-local"] +// input[type="date"] +// input[type="month"] +// input[type="time"] +// input[type="week"] +// input[type="number"] +// input[type="email"] +// input[type="url"] +// input[type="search"] +// input[type="tel"] +// input[type="color"] + +.form-control { + display: block; + width: 100%; + height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) + padding: @padding-base-vertical @padding-base-horizontal; + font-size: @font-size-base; + line-height: @line-height-base; + color: @input-color; + background-color: @input-bg; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid @input-border; + border-radius: @input-border-radius; // Note: This has no effect on s in CSS. + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); + + // Customize the `:focus` state to imitate native WebKit styles. + .form-control-focus(); + + // Placeholder + .placeholder(); + + // Unstyle the caret on `` +// element gets special love because it's special, and that's a fact! +.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { + height: @input-height; + padding: @padding-vertical @padding-horizontal; + font-size: @font-size; + line-height: @line-height; + border-radius: @border-radius; + + select& { + height: @input-height; + line-height: @input-height; + } + + textarea&, + select[multiple]& { + height: auto; + } +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/gradients.less b/web/client/themes/default/bootstrap-theme/mixins/gradients.less new file mode 100644 index 0000000000..0b88a89cc5 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/gradients.less @@ -0,0 +1,59 @@ +// Gradients + +#gradient { + + // Horizontal gradient, from left to right + // + // Creates two color stops, start and end, by specifying a color and position for each color stop. + // Color stops are not available in IE9 and below. + .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { + background-image: -webkit-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ + background-image: -o-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // Opera 12 + background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + background-repeat: repeat-x; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down + } + + // Vertical gradient, from top to bottom + // + // Creates two color stops, start and end, by specifying a color and position for each color stop. + // Color stops are not available in IE9 and below. + .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { + background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ + background-image: -o-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Opera 12 + background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + background-repeat: repeat-x; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down + } + + .directional(@start-color: #555; @end-color: #333; @deg: 45deg) { + background-repeat: repeat-x; + background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+ + background-image: -o-linear-gradient(@deg, @start-color, @end-color); // Opera 12 + background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ + } + .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { + background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); + background-image: -o-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); + background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color); + background-repeat: no-repeat; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback + } + .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { + background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); + background-image: -o-linear-gradient(@start-color, @mid-color @color-stop, @end-color); + background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color); + background-repeat: no-repeat; + filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback + } + .radial(@inner-color: #555; @outer-color: #333) { + background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color); + background-image: radial-gradient(circle, @inner-color, @outer-color); + background-repeat: no-repeat; + } + .striped(@color: rgba(255,255,255,.15); @angle: 45deg) { + background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); + background-image: -o-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); + background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); + } +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/grid-framework.less b/web/client/themes/default/bootstrap-theme/mixins/grid-framework.less new file mode 100644 index 0000000000..8c23eed24e --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/grid-framework.less @@ -0,0 +1,91 @@ +// Framework grid generation +// +// Used only by Bootstrap to generate the correct number of grid classes given +// any value of `@grid-columns`. + +.make-grid-columns() { + // Common styles for all sizes of grid columns, widths 1-12 + .col(@index) { // initial + @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; + .col((@index + 1), @item); + } + .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo + @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; + .col((@index + 1), ~"@{list}, @{item}"); + } + .col(@index, @list) when (@index > @grid-columns) { // terminal + @{list} { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: ceil((@grid-gutter-width / 2)); + padding-right: floor((@grid-gutter-width / 2)); + } + } + .col(1); // kickstart it +} + +.float-grid-columns(@class) { + .col(@index) { // initial + @item: ~".col-@{class}-@{index}"; + .col((@index + 1), @item); + } + .col(@index, @list) when (@index =< @grid-columns) { // general + @item: ~".col-@{class}-@{index}"; + .col((@index + 1), ~"@{list}, @{item}"); + } + .col(@index, @list) when (@index > @grid-columns) { // terminal + @{list} { + float: left; + } + } + .col(1); // kickstart it +} + +.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) { + .col-@{class}-@{index} { + width: percentage((@index / @grid-columns)); + } +} +.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) { + .col-@{class}-push-@{index} { + left: percentage((@index / @grid-columns)); + } +} +.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) { + .col-@{class}-push-0 { + left: auto; + } +} +.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) { + .col-@{class}-pull-@{index} { + right: percentage((@index / @grid-columns)); + } +} +.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) { + .col-@{class}-pull-0 { + right: auto; + } +} +.calc-grid-column(@index, @class, @type) when (@type = offset) { + .col-@{class}-offset-@{index} { + margin-left: percentage((@index / @grid-columns)); + } +} + +// Basic looping in LESS +.loop-grid-columns(@index, @class, @type) when (@index >= 0) { + .calc-grid-column(@index, @class, @type); + // next iteration + .loop-grid-columns((@index - 1), @class, @type); +} + +// Create grid for specific class +.make-grid(@class) { + .float-grid-columns(@class); + .loop-grid-columns(@grid-columns, @class, width); + .loop-grid-columns(@grid-columns, @class, pull); + .loop-grid-columns(@grid-columns, @class, push); + .loop-grid-columns(@grid-columns, @class, offset); +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/grid.less b/web/client/themes/default/bootstrap-theme/mixins/grid.less new file mode 100644 index 0000000000..df496d0b3c --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/grid.less @@ -0,0 +1,122 @@ +// Grid system +// +// Generate semantic grid columns with these mixins. + +// Centered container element +.container-fixed(@gutter: @grid-gutter-width) { + margin-right: auto; + margin-left: auto; + padding-left: floor((@gutter / 2)); + padding-right: ceil((@gutter / 2)); + &:extend(.clearfix all); +} + +// Creates a wrapper for a series of columns +.make-row(@gutter: @grid-gutter-width) { + margin-left: ceil((@gutter / -2)); + margin-right: floor((@gutter / -2)); + &:extend(.clearfix all); +} + +// Generate the extra small columns +.make-xs-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + float: left; + width: percentage((@columns / @grid-columns)); + min-height: 1px; + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); +} +.make-xs-column-offset(@columns) { + margin-left: percentage((@columns / @grid-columns)); +} +.make-xs-column-push(@columns) { + left: percentage((@columns / @grid-columns)); +} +.make-xs-column-pull(@columns) { + right: percentage((@columns / @grid-columns)); +} + +// Generate the small columns +.make-sm-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + min-height: 1px; + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + @media (min-width: @screen-sm-min) { + float: left; + width: percentage((@columns / @grid-columns)); + } +} +.make-sm-column-offset(@columns) { + @media (min-width: @screen-sm-min) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-sm-column-push(@columns) { + @media (min-width: @screen-sm-min) { + left: percentage((@columns / @grid-columns)); + } +} +.make-sm-column-pull(@columns) { + @media (min-width: @screen-sm-min) { + right: percentage((@columns / @grid-columns)); + } +} + +// Generate the medium columns +.make-md-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + min-height: 1px; + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + @media (min-width: @screen-md-min) { + float: left; + width: percentage((@columns / @grid-columns)); + } +} +.make-md-column-offset(@columns) { + @media (min-width: @screen-md-min) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-md-column-push(@columns) { + @media (min-width: @screen-md-min) { + left: percentage((@columns / @grid-columns)); + } +} +.make-md-column-pull(@columns) { + @media (min-width: @screen-md-min) { + right: percentage((@columns / @grid-columns)); + } +} + +// Generate the large columns +.make-lg-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + min-height: 1px; + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + @media (min-width: @screen-lg-min) { + float: left; + width: percentage((@columns / @grid-columns)); + } +} +.make-lg-column-offset(@columns) { + @media (min-width: @screen-lg-min) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-lg-column-push(@columns) { + @media (min-width: @screen-lg-min) { + left: percentage((@columns / @grid-columns)); + } +} +.make-lg-column-pull(@columns) { + @media (min-width: @screen-lg-min) { + right: percentage((@columns / @grid-columns)); + } +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/hide-text.less b/web/client/themes/default/bootstrap-theme/mixins/hide-text.less new file mode 100644 index 0000000000..2bb84a3b44 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/hide-text.less @@ -0,0 +1,21 @@ +// CSS image replacement +// +// Heads up! v3 launched with only `.hide-text()`, but per our pattern for +// mixins being reused as classes with the same name, this doesn't hold up. As +// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`. +// +// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 + +// Deprecated as of v3.0.1 (has been removed in v4) +.hide-text() { + font: ~"0/0" a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + +// New mixin to use as of v3.0.1 +.text-hide() { + .hide-text(); +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/image.less b/web/client/themes/default/bootstrap-theme/mixins/image.less new file mode 100644 index 0000000000..f233cb3e19 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/image.less @@ -0,0 +1,33 @@ +// Image Mixins +// - Responsive image +// - Retina image + + +// Responsive image +// +// Keep images from scaling beyond the width of their parents. +.img-responsive(@display: block) { + display: @display; + max-width: 100%; // Part 1: Set a maximum relative to the parent + height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching +} + + +// Retina image +// +// Short retina mixin for setting background-image and -size. Note that the +// spelling of `min--moz-device-pixel-ratio` is intentional. +.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { + background-image: url("@{file-1x}"); + + @media + only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and ( min--moz-device-pixel-ratio: 2), + only screen and ( -o-min-device-pixel-ratio: 2/1), + only screen and ( min-device-pixel-ratio: 2), + only screen and ( min-resolution: 192dpi), + only screen and ( min-resolution: 2dppx) { + background-image: url("@{file-2x}"); + background-size: @width-1x @height-1x; + } +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/labels.less b/web/client/themes/default/bootstrap-theme/mixins/labels.less new file mode 100644 index 0000000000..9f7a67ee3d --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/labels.less @@ -0,0 +1,12 @@ +// Labels + +.label-variant(@color) { + background-color: @color; + + &[href] { + &:hover, + &:focus { + background-color: darken(@color, 10%); + } + } +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/list-group.less b/web/client/themes/default/bootstrap-theme/mixins/list-group.less new file mode 100644 index 0000000000..03aa19069d --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/list-group.less @@ -0,0 +1,30 @@ +// List Groups + +.list-group-item-variant(@state; @background; @color) { + .list-group-item-@{state} { + color: @color; + background-color: @background; + + a&, + button& { + color: @color; + + .list-group-item-heading { + color: inherit; + } + + &:hover, + &:focus { + color: @color; + background-color: darken(@background, 5%); + } + &.active, + &.active:hover, + &.active:focus { + color: #fff; + background-color: @color; + border-color: @color; + } + } + } +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/nav-divider.less b/web/client/themes/default/bootstrap-theme/mixins/nav-divider.less new file mode 100644 index 0000000000..feb1e9ed0d --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/nav-divider.less @@ -0,0 +1,10 @@ +// Horizontal dividers +// +// Dividers (basically an hr) within dropdowns and nav lists + +.nav-divider(@color: #e5e5e5) { + height: 1px; + margin: ((@line-height-computed / 2) - 1) 0; + overflow: hidden; + background-color: @color; +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/nav-vertical-align.less b/web/client/themes/default/bootstrap-theme/mixins/nav-vertical-align.less new file mode 100644 index 0000000000..d458c78613 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/nav-vertical-align.less @@ -0,0 +1,9 @@ +// Navbar vertical align +// +// Vertically center elements in the navbar. +// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin. + +.navbar-vertical-align(@element-height) { + margin-top: ((@navbar-height - @element-height) / 2); + margin-bottom: ((@navbar-height - @element-height) / 2); +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/opacity.less b/web/client/themes/default/bootstrap-theme/mixins/opacity.less new file mode 100644 index 0000000000..33ed25ce67 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/opacity.less @@ -0,0 +1,8 @@ +// Opacity + +.opacity(@opacity) { + opacity: @opacity; + // IE8 filter + @opacity-ie: (@opacity * 100); + filter: ~"alpha(opacity=@{opacity-ie})"; +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/pagination.less b/web/client/themes/default/bootstrap-theme/mixins/pagination.less new file mode 100644 index 0000000000..618804f2de --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/pagination.less @@ -0,0 +1,24 @@ +// Pagination + +.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { + > li { + > a, + > span { + padding: @padding-vertical @padding-horizontal; + font-size: @font-size; + line-height: @line-height; + } + &:first-child { + > a, + > span { + .border-left-radius(@border-radius); + } + } + &:last-child { + > a, + > span { + .border-right-radius(@border-radius); + } + } + } +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/panels.less b/web/client/themes/default/bootstrap-theme/mixins/panels.less new file mode 100644 index 0000000000..49ee10d4ad --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/panels.less @@ -0,0 +1,24 @@ +// Panels + +.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) { + border-color: @border; + + & > .panel-heading { + color: @heading-text-color; + background-color: @heading-bg-color; + border-color: @heading-border; + + + .panel-collapse > .panel-body { + border-top-color: @border; + } + .badge { + color: @heading-bg-color; + background-color: @heading-text-color; + } + } + & > .panel-footer { + + .panel-collapse > .panel-body { + border-bottom-color: @border; + } + } +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/progress-bar.less b/web/client/themes/default/bootstrap-theme/mixins/progress-bar.less new file mode 100644 index 0000000000..f07996a34d --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/progress-bar.less @@ -0,0 +1,10 @@ +// Progress bars + +.progress-bar-variant(@color) { + background-color: @color; + + // Deprecated parent class requirement as of v3.2.0 + .progress-striped & { + #gradient > .striped(); + } +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/reset-filter.less b/web/client/themes/default/bootstrap-theme/mixins/reset-filter.less new file mode 100644 index 0000000000..68cdb5e186 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/reset-filter.less @@ -0,0 +1,8 @@ +// Reset filters for IE +// +// When you need to remove a gradient background, do not forget to use this to reset +// the IE filter for IE9 and below. + +.reset-filter() { + filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/reset-text.less b/web/client/themes/default/bootstrap-theme/mixins/reset-text.less new file mode 100644 index 0000000000..58dd4d19b4 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/reset-text.less @@ -0,0 +1,18 @@ +.reset-text() { + font-family: @font-family-base; + // We deliberately do NOT reset font-size. + font-style: normal; + font-weight: normal; + letter-spacing: normal; + line-break: auto; + line-height: @line-height-base; + text-align: left; // Fallback for where `start` is not supported + text-align: start; + text-decoration: none; + text-shadow: none; + text-transform: none; + white-space: normal; + word-break: normal; + word-spacing: normal; + word-wrap: normal; +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/resize.less b/web/client/themes/default/bootstrap-theme/mixins/resize.less new file mode 100644 index 0000000000..3acd3afdba --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/resize.less @@ -0,0 +1,6 @@ +// Resize anything + +.resizable(@direction) { + resize: @direction; // Options: horizontal, vertical, both + overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible` +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/responsive-visibility.less b/web/client/themes/default/bootstrap-theme/mixins/responsive-visibility.less new file mode 100644 index 0000000000..ecf1e979fd --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/responsive-visibility.less @@ -0,0 +1,15 @@ +// Responsive utilities + +// +// More easily include all the states for responsive-utilities.less. +.responsive-visibility() { + display: block !important; + table& { display: table !important; } + tr& { display: table-row !important; } + th&, + td& { display: table-cell !important; } +} + +.responsive-invisibility() { + display: none !important; +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/size.less b/web/client/themes/default/bootstrap-theme/mixins/size.less new file mode 100644 index 0000000000..a8be650896 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/size.less @@ -0,0 +1,10 @@ +// Sizing shortcuts + +.size(@width; @height) { + width: @width; + height: @height; +} + +.square(@size) { + .size(@size; @size); +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/tab-focus.less b/web/client/themes/default/bootstrap-theme/mixins/tab-focus.less new file mode 100644 index 0000000000..d12d23629f --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/tab-focus.less @@ -0,0 +1,9 @@ +// WebKit-style focus + +.tab-focus() { + // WebKit-specific. Other browsers will keep their default outline style. + // (Initially tried to also force default via `outline: initial`, + // but that seems to erroneously remove the outline in Firefox altogether.) + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/table-row.less b/web/client/themes/default/bootstrap-theme/mixins/table-row.less new file mode 100644 index 0000000000..0f287f1a8b --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/table-row.less @@ -0,0 +1,28 @@ +// Tables + +.table-row-variant(@state; @background) { + // Exact selectors below required to override `.table-striped` and prevent + // inheritance to nested tables. + .table > thead > tr, + .table > tbody > tr, + .table > tfoot > tr { + > td.@{state}, + > th.@{state}, + &.@{state} > td, + &.@{state} > th { + background-color: @background; + } + } + + // Hover states for `.table-hover` + // Note: this is not available for cells or rows within `thead` or `tfoot`. + .table-hover > tbody > tr { + > td.@{state}:hover, + > th.@{state}:hover, + &.@{state}:hover > td, + &:hover > .@{state}, + &.@{state}:hover > th { + background-color: darken(@background, 5%); + } + } +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/text-emphasis.less b/web/client/themes/default/bootstrap-theme/mixins/text-emphasis.less new file mode 100644 index 0000000000..9e8a77a698 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/text-emphasis.less @@ -0,0 +1,9 @@ +// Typography + +.text-emphasis-variant(@color) { + color: @color; + a&:hover, + a&:focus { + color: darken(@color, 10%); + } +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/text-overflow.less b/web/client/themes/default/bootstrap-theme/mixins/text-overflow.less new file mode 100644 index 0000000000..c11ad2fb74 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/text-overflow.less @@ -0,0 +1,8 @@ +// Text overflow +// Requires inline-block or block for proper styling + +.text-overflow() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/web/client/themes/default/bootstrap-theme/mixins/vendor-prefixes.less b/web/client/themes/default/bootstrap-theme/mixins/vendor-prefixes.less new file mode 100644 index 0000000000..2b5e74b99e --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/mixins/vendor-prefixes.less @@ -0,0 +1,227 @@ +// Vendor Prefixes +// +// All vendor mixins are deprecated as of v3.2.0 due to the introduction of +// Autoprefixer in our Gruntfile. They have been removed in v4. + +// - Animations +// - Backface visibility +// - Box shadow +// - Box sizing +// - Content columns +// - Hyphens +// - Placeholder text +// - Transformations +// - Transitions +// - User Select + + +// Animations +.animation(@animation) { + -webkit-animation: @animation; + -o-animation: @animation; + animation: @animation; +} +.animation-name(@name) { + -webkit-animation-name: @name; + animation-name: @name; +} +.animation-duration(@duration) { + -webkit-animation-duration: @duration; + animation-duration: @duration; +} +.animation-timing-function(@timing-function) { + -webkit-animation-timing-function: @timing-function; + animation-timing-function: @timing-function; +} +.animation-delay(@delay) { + -webkit-animation-delay: @delay; + animation-delay: @delay; +} +.animation-iteration-count(@iteration-count) { + -webkit-animation-iteration-count: @iteration-count; + animation-iteration-count: @iteration-count; +} +.animation-direction(@direction) { + -webkit-animation-direction: @direction; + animation-direction: @direction; +} +.animation-fill-mode(@fill-mode) { + -webkit-animation-fill-mode: @fill-mode; + animation-fill-mode: @fill-mode; +} + +// Backface visibility +// Prevent browsers from flickering when using CSS 3D transforms. +// Default value is `visible`, but can be changed to `hidden` + +.backface-visibility(@visibility) { + -webkit-backface-visibility: @visibility; + -moz-backface-visibility: @visibility; + backface-visibility: @visibility; +} + +// Drop shadows +// +// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's +// supported browsers that have box shadow capabilities now support it. + +.box-shadow(@shadow) { + -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1 + box-shadow: @shadow; +} + +// Box sizing +.box-sizing(@boxmodel) { + -webkit-box-sizing: @boxmodel; + -moz-box-sizing: @boxmodel; + box-sizing: @boxmodel; +} + +// CSS3 Content Columns +.content-columns(@column-count; @column-gap: @grid-gutter-width) { + -webkit-column-count: @column-count; + -moz-column-count: @column-count; + column-count: @column-count; + -webkit-column-gap: @column-gap; + -moz-column-gap: @column-gap; + column-gap: @column-gap; +} + +// Optional hyphenation +.hyphens(@mode: auto) { + word-wrap: break-word; + -webkit-hyphens: @mode; + -moz-hyphens: @mode; + -ms-hyphens: @mode; // IE10+ + -o-hyphens: @mode; + hyphens: @mode; +} + +// Placeholder text +.placeholder(@color: @input-color-placeholder) { + // Firefox + &::-moz-placeholder { + color: @color; + opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526 + } + &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ + &::-webkit-input-placeholder { color: @color; } // Safari and Chrome +} + +// Transformations +.scale(@ratio) { + -webkit-transform: scale(@ratio); + -ms-transform: scale(@ratio); // IE9 only + -o-transform: scale(@ratio); + transform: scale(@ratio); +} +.scale(@ratioX; @ratioY) { + -webkit-transform: scale(@ratioX, @ratioY); + -ms-transform: scale(@ratioX, @ratioY); // IE9 only + -o-transform: scale(@ratioX, @ratioY); + transform: scale(@ratioX, @ratioY); +} +.scaleX(@ratio) { + -webkit-transform: scaleX(@ratio); + -ms-transform: scaleX(@ratio); // IE9 only + -o-transform: scaleX(@ratio); + transform: scaleX(@ratio); +} +.scaleY(@ratio) { + -webkit-transform: scaleY(@ratio); + -ms-transform: scaleY(@ratio); // IE9 only + -o-transform: scaleY(@ratio); + transform: scaleY(@ratio); +} +.skew(@x; @y) { + -webkit-transform: skewX(@x) skewY(@y); + -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ + -o-transform: skewX(@x) skewY(@y); + transform: skewX(@x) skewY(@y); +} +.translate(@x; @y) { + -webkit-transform: translate(@x, @y); + -ms-transform: translate(@x, @y); // IE9 only + -o-transform: translate(@x, @y); + transform: translate(@x, @y); +} +.translate3d(@x; @y; @z) { + -webkit-transform: translate3d(@x, @y, @z); + transform: translate3d(@x, @y, @z); +} +.rotate(@degrees) { + -webkit-transform: rotate(@degrees); + -ms-transform: rotate(@degrees); // IE9 only + -o-transform: rotate(@degrees); + transform: rotate(@degrees); +} +.rotateX(@degrees) { + -webkit-transform: rotateX(@degrees); + -ms-transform: rotateX(@degrees); // IE9 only + -o-transform: rotateX(@degrees); + transform: rotateX(@degrees); +} +.rotateY(@degrees) { + -webkit-transform: rotateY(@degrees); + -ms-transform: rotateY(@degrees); // IE9 only + -o-transform: rotateY(@degrees); + transform: rotateY(@degrees); +} +.perspective(@perspective) { + -webkit-perspective: @perspective; + -moz-perspective: @perspective; + perspective: @perspective; +} +.perspective-origin(@perspective) { + -webkit-perspective-origin: @perspective; + -moz-perspective-origin: @perspective; + perspective-origin: @perspective; +} +.transform-origin(@origin) { + -webkit-transform-origin: @origin; + -moz-transform-origin: @origin; + -ms-transform-origin: @origin; // IE9 only + transform-origin: @origin; +} + + +// Transitions + +.transition(@transition) { + -webkit-transition: @transition; + -o-transition: @transition; + transition: @transition; +} +.transition-property(@transition-property) { + -webkit-transition-property: @transition-property; + transition-property: @transition-property; +} +.transition-delay(@transition-delay) { + -webkit-transition-delay: @transition-delay; + transition-delay: @transition-delay; +} +.transition-duration(@transition-duration) { + -webkit-transition-duration: @transition-duration; + transition-duration: @transition-duration; +} +.transition-timing-function(@timing-function) { + -webkit-transition-timing-function: @timing-function; + transition-timing-function: @timing-function; +} +.transition-transform(@transition) { + -webkit-transition: -webkit-transform @transition; + -moz-transition: -moz-transform @transition; + -o-transition: -o-transform @transition; + transition: transform @transition; +} + + +// User select +// For selecting text on the page + +.user-select(@select) { + -webkit-user-select: @select; + -moz-user-select: @select; + -ms-user-select: @select; // IE10+ + user-select: @select; +} diff --git a/web/client/themes/default/bootstrap-theme/modals.less b/web/client/themes/default/bootstrap-theme/modals.less new file mode 100644 index 0000000000..8f01a72737 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/modals.less @@ -0,0 +1,152 @@ +// +// Modals +// -------------------------------------------------- + +// .modal-open - body class for killing the scroll +// .modal - container to scroll within +// .modal-dialog - positioning shell for the actual modal +// .modal-content - actual modal w/ bg and corners and shit + +// Kill the scroll on the body +.modal-open { + overflow: hidden; +} + +// Container that the modal scrolls within +.modal { + display: none; + overflow: hidden; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: @zindex-modal; + -webkit-overflow-scrolling: touch; + + // Prevent Chrome on Windows from adding a focus outline. For details, see + // https://github.com/twbs/bootstrap/pull/10951. + outline: 0; + + // When fading in the modal, animate it to slide down + &.fade .modal-dialog { + .translate(0, -25%); + .transition-transform(~"0.3s ease-out"); + } + &.in .modal-dialog { .translate(0, 0) } +} +.modal-open .modal { + overflow-x: hidden; + overflow-y: auto; +} + +// Shell div to position the modal with bottom padding +.modal-dialog { + position: relative; + width: auto; + margin: 10px; +} + +// Actual modal +.modal-content { + position: relative; + background-color: @modal-content-bg; + border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc) + border: 1px solid @modal-content-border-color; + border-radius: @border-radius-large; + .box-shadow(0 3px 9px rgba(0,0,0,.5)); + background-clip: padding-box; + // Remove focus outline from opened modal + outline: 0; +} + +// Modal background +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: @zindex-modal-background; + background-color: @modal-backdrop-bg; + // Fade for backdrop + &.fade { .opacity(0); } + &.in { .opacity(@modal-backdrop-opacity); } +} + +// Modal header +// Top section of the modal w/ title and dismiss +.modal-header { + padding: @modal-title-padding; + border-bottom: 1px solid @modal-header-border-color; + color: @modal-header-color; /* new ms2 */ + background-color: @modal-header-bg; /* new ms2 */ + &:extend(.clearfix all); +} +// Close icon +.modal-header .close { + margin-top: -2px; +} + +// Title text within header +.modal-title { + margin: 0; + line-height: @modal-title-line-height; +} + +// Modal body +// Where all modal content resides (sibling of .modal-header and .modal-footer) +.modal-body { + position: relative; + padding: @modal-inner-padding; +} + +// Footer (for actions) +.modal-footer { + padding: @modal-inner-padding; + text-align: right; // right align buttons + border-top: 1px solid @modal-footer-border-color; + &:extend(.clearfix all); // 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 + } + // but override that for button groups + .btn-group .btn + .btn { + margin-left: -1px; + } + // and override it for block buttons as well + .btn-block + .btn-block { + margin-left: 0; + } +} + +// Measure scrollbar width for padding body during modal show/hide +.modal-scrollbar-measure { + position: absolute; + top: -9999px; + width: 50px; + height: 50px; + overflow: scroll; +} + +// Scale up the modal +@media (min-width: @screen-sm-min) { + // Automatically set modal's width for larger viewports + .modal-dialog { + width: @modal-md; + margin: 30px auto; + } + .modal-content { + .box-shadow(0 5px 15px rgba(0,0,0,.5)); + } + + // Modal sizes + .modal-sm { width: @modal-sm; } +} + +@media (min-width: @screen-md-min) { + .modal-lg { width: @modal-lg; } +} diff --git a/web/client/themes/default/bootstrap-theme/navbar.less b/web/client/themes/default/bootstrap-theme/navbar.less new file mode 100644 index 0000000000..6d751bb9ce --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/navbar.less @@ -0,0 +1,660 @@ +// +// Navbars +// -------------------------------------------------- + + +// Wrapper and base class +// +// Provide a static navbar from which we expand to create full-width, fixed, and +// other navbar variations. + +.navbar { + position: relative; + min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) + margin-bottom: @navbar-margin-bottom; + border: 1px solid transparent; + + // Prevent floats from breaking the navbar + &:extend(.clearfix all); + + @media (min-width: @grid-float-breakpoint) { + border-radius: @navbar-border-radius; + } +} + + +// Navbar heading +// +// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy +// styling of responsive aspects. + +.navbar-header { + &:extend(.clearfix all); + + @media (min-width: @grid-float-breakpoint) { + float: left; + } +} + + +// Navbar collapse (body) +// +// Group your navbar content into this for easy collapsing and expanding across +// various device sizes. By default, this content is collapsed when <768px, but +// will expand past that for a horizontal display. +// +// To start (on mobile devices) the navbar links, forms, and buttons are stacked +// vertically and include a `max-height` to overflow in case you have too much +// content for the user's viewport. + +.navbar-collapse { + overflow-x: visible; + padding-right: @navbar-padding-horizontal; + padding-left: @navbar-padding-horizontal; + border-top: 1px solid transparent; + box-shadow: inset 0 1px 0 rgba(255,255,255,.1); + &:extend(.clearfix all); + -webkit-overflow-scrolling: touch; + + &.in { + overflow-y: auto; + } + + @media (min-width: @grid-float-breakpoint) { + width: auto; + border-top: 0; + box-shadow: none; + + &.collapse { + display: block !important; + height: auto !important; + padding-bottom: 0; // Override default setting + overflow: visible !important; + } + + &.in { + overflow-y: visible; + } + + // Undo the collapse side padding for navbars with containers to ensure + // alignment of right-aligned contents. + .navbar-fixed-top &, + .navbar-static-top &, + .navbar-fixed-bottom & { + padding-left: 0; + padding-right: 0; + } + } +} + +.navbar-fixed-top, +.navbar-fixed-bottom { + .navbar-collapse { + max-height: @navbar-collapse-max-height; + + @media (max-device-width: @screen-xs-min) and (orientation: landscape) { + max-height: 200px; + } + } +} + + +// Both navbar header and collapse +// +// When a container is present, change the behavior of the header and collapse. + +.container, +.container-fluid { + > .navbar-header, + > .navbar-collapse { + margin-right: -@navbar-padding-horizontal; + margin-left: -@navbar-padding-horizontal; + + @media (min-width: @grid-float-breakpoint) { + margin-right: 0; + margin-left: 0; + } + } +} + + +// +// Navbar alignment options +// +// Display the navbar across the entirety of the page or fixed it to the top or +// bottom of the page. + +// Static top (unfixed, but 100% wide) navbar +.navbar-static-top { + z-index: @zindex-navbar; + border-width: 0 0 1px; + + @media (min-width: @grid-float-breakpoint) { + border-radius: 0; + } +} + +// Fix the top/bottom navbars when screen real estate supports it +.navbar-fixed-top, +.navbar-fixed-bottom { + position: fixed; + right: 0; + left: 0; + z-index: @zindex-navbar-fixed; + + // Undo the rounded corners + @media (min-width: @grid-float-breakpoint) { + border-radius: 0; + } +} +.navbar-fixed-top { + top: 0; + border-width: 0 0 1px; +} +.navbar-fixed-bottom { + bottom: 0; + margin-bottom: 0; // override .navbar defaults + border-width: 1px 0 0; +} + + +// Brand/project name + +.navbar-brand { + float: left; + padding: @navbar-padding-vertical @navbar-padding-horizontal; + font-size: @font-size-large; + line-height: @line-height-computed; + height: @navbar-height; + + &:hover, + &:focus { + text-decoration: none; + } + + > img { + display: block; + } + + @media (min-width: @grid-float-breakpoint) { + .navbar > .container &, + .navbar > .container-fluid & { + margin-left: -@navbar-padding-horizontal; + } + } +} + + +// Navbar toggle +// +// Custom button for toggling the `.navbar-collapse`, powered by the collapse +// JavaScript plugin. + +.navbar-toggle { + position: relative; + float: right; + margin-right: @navbar-padding-horizontal; + padding: 9px 10px; + .navbar-vertical-align(34px); + background-color: transparent; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid transparent; + border-radius: @border-radius-base; + + // We remove the `outline` here, but later compensate by attaching `:hover` + // styles to `:focus`. + &:focus { + outline: 0; + } + + // Bars + .icon-bar { + display: block; + width: 22px; + height: 2px; + border-radius: 1px; + } + .icon-bar + .icon-bar { + margin-top: 4px; + } + + @media (min-width: @grid-float-breakpoint) { + display: none; + } +} + + +// Navbar nav links +// +// Builds on top of the `.nav` components with its own modifier class to make +// the nav the full height of the horizontal nav (above 768px). + +.navbar-nav { + margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal; + + > li > a { + padding-top: 10px; + padding-bottom: 10px; + line-height: @line-height-computed; + } + + @media (max-width: @grid-float-breakpoint-max) { + // Dropdowns get custom display when collapsed + .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + box-shadow: none; + > li > a, + .dropdown-header { + padding: 5px 15px 5px 25px; + } + > li > a { + line-height: @line-height-computed; + &:hover, + &:focus { + background-image: none; + } + } + } + } + + // Uncollapse the nav + @media (min-width: @grid-float-breakpoint) { + float: left; + margin: 0; + + > li { + float: left; + > a { + padding-top: @navbar-padding-vertical; + padding-bottom: @navbar-padding-vertical; + } + } + } +} + + +// Navbar form +// +// Extension of the `.form-inline` with some extra flavor for optimum display in +// our navbars. + +.navbar-form { + margin-left: -@navbar-padding-horizontal; + margin-right: -@navbar-padding-horizontal; + padding: 10px @navbar-padding-horizontal; + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); + .box-shadow(@shadow); + + // Mixin behavior for optimum display + .form-inline(); + + .form-group { + @media (max-width: @grid-float-breakpoint-max) { + margin-bottom: 5px; + + &:last-child { + margin-bottom: 0; + } + } + } + + // Vertically center in expanded, horizontal navbar + .navbar-vertical-align(@input-height-base); + + // Undo 100% width for pull classes + @media (min-width: @grid-float-breakpoint) { + width: auto; + border: 0; + margin-left: 0; + margin-right: 0; + padding-top: 0; + padding-bottom: 0; + .box-shadow(none); + } +} + + +// Dropdown menus + +// Menu position and menu carets +.navbar-nav > li > .dropdown-menu { + margin-top: 0; + .border-top-radius(0); +} +// Menu position and menu caret support for dropups via extra dropup class +.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { + margin-bottom: 0; + .border-top-radius(@navbar-border-radius); + .border-bottom-radius(0); +} + + +// Buttons in navbars +// +// Vertically center a button within a navbar (when *not* in a form). + +.navbar-btn { + .navbar-vertical-align(@input-height-base); + + &.btn-sm { + .navbar-vertical-align(@input-height-small); + } + &.btn-xs { + .navbar-vertical-align(22); + } +} + + +// Text in navbars +// +// Add a class to make any element properly align itself vertically within the navbars. + +.navbar-text { + .navbar-vertical-align(@line-height-computed); + + @media (min-width: @grid-float-breakpoint) { + float: left; + margin-left: @navbar-padding-horizontal; + margin-right: @navbar-padding-horizontal; + } +} + + +// Component alignment +// +// Repurpose the pull utilities as their own navbar utilities to avoid specificity +// issues with parents and chaining. Only do this when the navbar is uncollapsed +// though so that navbar contents properly stack and align in mobile. +// +// Declared after the navbar components to ensure more specificity on the margins. + +@media (min-width: @grid-float-breakpoint) { + .navbar-left { .pull-left(); } + .navbar-right { + .pull-right(); + margin-right: -@navbar-padding-horizontal; + + ~ .navbar-right { + margin-right: 0; + } + } +} + + +// Alternate navbars +// -------------------------------------------------- + +// Default navbar +.navbar-default { + background-color: @navbar-default-bg; + border-color: @navbar-default-border; + + .navbar-brand { + color: @navbar-default-brand-color; + &:hover, + &:focus { + color: @navbar-default-brand-hover-color; + background-color: @navbar-default-brand-hover-bg; + } + } + + .navbar-text { + color: @navbar-default-color; + } + + .navbar-nav { + > li > a { + color: @navbar-default-link-color; + + &:hover, + &:focus { + color: @navbar-default-link-hover-color; + background-color: @navbar-default-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: @navbar-default-link-active-color; + background-color: @navbar-default-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: @navbar-default-link-disabled-color; + background-color: @navbar-default-link-disabled-bg; + } + } + } + + .navbar-toggle { + border-color: @navbar-default-toggle-border-color; + &:hover, + &:focus { + background-color: @navbar-default-toggle-hover-bg; + } + .icon-bar { + background-color: @navbar-default-toggle-icon-bar-bg; + } + } + + .navbar-collapse, + .navbar-form { + border-color: @navbar-default-border; + } + + // Dropdown menu items + .navbar-nav { + // Remove background color from open dropdown + > .open > a { + &, + &:hover, + &:focus { + background-color: @navbar-default-link-active-bg; + color: @navbar-default-link-active-color; + } + } + + @media (max-width: @grid-float-breakpoint-max) { + // Dropdowns get custom display when collapsed + .open .dropdown-menu { + > li > a { + color: @navbar-default-link-color; + &:hover, + &:focus { + color: @navbar-default-link-hover-color; + background-color: @navbar-default-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: @navbar-default-link-active-color; + background-color: @navbar-default-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: @navbar-default-link-disabled-color; + background-color: @navbar-default-link-disabled-bg; + } + } + } + } + } + + + // Links in navbars + // + // Add a class to ensure links outside the navbar nav are colored correctly. + + .navbar-link { + color: @navbar-default-link-color; + &:hover { + color: @navbar-default-link-hover-color; + } + } + + .btn-link { + color: @navbar-default-link-color; + &:hover, + &:focus { + color: @navbar-default-link-hover-color; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: @navbar-default-link-disabled-color; + } + } + } +} + +// Inverse navbar + +.navbar-inverse { + background-color: @navbar-inverse-bg; + border-color: @navbar-inverse-border; + + .navbar-brand { + color: @navbar-inverse-brand-color; + &:hover, + &:focus { + color: @navbar-inverse-brand-hover-color; + background-color: @navbar-inverse-brand-hover-bg; + } + } + + .navbar-text { + color: @navbar-inverse-color; + } + + .navbar-nav { + > li > a { + color: @navbar-inverse-link-color; + + &:hover, + &:focus { + color: @navbar-inverse-link-hover-color; + background-color: @navbar-inverse-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: @navbar-inverse-link-active-color; + background-color: @navbar-inverse-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: @navbar-inverse-link-disabled-color; + background-color: @navbar-inverse-link-disabled-bg; + } + } + } + + // Darken the responsive nav toggle + .navbar-toggle { + border-color: @navbar-inverse-toggle-border-color; + &:hover, + &:focus { + background-color: @navbar-inverse-toggle-hover-bg; + } + .icon-bar { + background-color: @navbar-inverse-toggle-icon-bar-bg; + } + } + + .navbar-collapse, + .navbar-form { + border-color: darken(@navbar-inverse-bg, 7%); + } + + // Dropdowns + .navbar-nav { + > .open > a { + &, + &:hover, + &:focus { + background-color: @navbar-inverse-link-active-bg; + color: @navbar-inverse-link-active-color; + } + } + + @media (max-width: @grid-float-breakpoint-max) { + // Dropdowns get custom display + .open .dropdown-menu { + > .dropdown-header { + border-color: @navbar-inverse-border; + } + .divider { + background-color: @navbar-inverse-border; + } + > li > a { + color: @navbar-inverse-link-color; + &:hover, + &:focus { + color: @navbar-inverse-link-hover-color; + background-color: @navbar-inverse-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: @navbar-inverse-link-active-color; + background-color: @navbar-inverse-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: @navbar-inverse-link-disabled-color; + background-color: @navbar-inverse-link-disabled-bg; + } + } + } + } + } + + .navbar-link { + color: @navbar-inverse-link-color; + &:hover { + color: @navbar-inverse-link-hover-color; + } + } + + .btn-link { + color: @navbar-inverse-link-color; + &:hover, + &:focus { + color: @navbar-inverse-link-hover-color; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: @navbar-inverse-link-disabled-color; + } + } + } +} diff --git a/web/client/themes/default/bootstrap-theme/navs.less b/web/client/themes/default/bootstrap-theme/navs.less new file mode 100644 index 0000000000..a3d11b1362 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/navs.less @@ -0,0 +1,242 @@ +// +// Navs +// -------------------------------------------------- + + +// Base class +// -------------------------------------------------- + +.nav { + margin-bottom: 0; + padding-left: 0; // Override default ul/ol + list-style: none; + &:extend(.clearfix all); + + > li { + position: relative; + display: block; + + > a { + position: relative; + display: block; + padding: @nav-link-padding; + &:hover, + &:focus { + text-decoration: none; + background-color: @nav-link-hover-bg; + } + } + + // Disabled state sets text to gray and nukes hover/tab effects + &.disabled > a { + color: @nav-disabled-link-color; + + &:hover, + &:focus { + color: @nav-disabled-link-hover-color; + text-decoration: none; + background-color: transparent; + cursor: @cursor-disabled; + } + } + } + + // Open dropdowns + .open > a { + &, + &:hover, + &:focus { + background-color: @nav-link-hover-bg; + border-color: @link-color; + } + } + + // Nav dividers (deprecated with v3.0.1) + // + // This should have been removed in v3 with the dropping of `.nav-list`, but + // we missed it. We don't currently support this anywhere, but in the interest + // of maintaining backward compatibility in case you use it, it's deprecated. + .nav-divider { + .nav-divider(); + } + + // Prevent IE8 from misplacing imgs + // + // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 + > li > a > img { + max-width: none; + } +} + + +// Tabs +// ------------------------- + +// Give the tabs something to sit on +.nav-tabs { + border-bottom: 1px solid @nav-tabs-border-color; + > li { + float: left; + // Make the list-items overlay the bottom border + margin-bottom: -1px; + + // Actual tabs (as links) + > a { + margin-right: 2px; + line-height: @line-height-base; + border: 1px solid transparent; + border-radius: @border-radius-base @border-radius-base 0 0; + &:hover { + border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color; + } + } + + // Active state, and its :hover to override normal :hover + &.active > a { + &, + &:hover, + &:focus { + color: @nav-tabs-active-link-hover-color; + background-color: @nav-tabs-active-link-hover-bg; + border: 1px solid @nav-tabs-active-link-hover-border-color; + border-bottom-color: transparent; + cursor: default; + } + } + } + // pulling this in mainly for less shorthand + &.nav-justified { + .nav-justified(); + .nav-tabs-justified(); + } +} + + +// Pills +// ------------------------- +.nav-pills { + > li { + float: left; + + // Links rendered as pills + > a { + border-radius: @nav-pills-border-radius; + } + + li { + margin-left: 2px; + } + + // Active state + &.active > a { + &, + &:hover, + &:focus { + color: @nav-pills-active-link-hover-color; + background-color: @nav-pills-active-link-hover-bg; + } + } + } +} + + +// Stacked pills +.nav-stacked { + > li { + float: none; + + li { + margin-top: 2px; + margin-left: 0; // no need for this gap between nav items + } + } +} + + +// Nav variations +// -------------------------------------------------- + +// Justified nav links +// ------------------------- + +.nav-justified { + width: 100%; + + > li { + float: none; + > a { + text-align: center; + margin-bottom: 5px; + } + } + + > .dropdown .dropdown-menu { + top: auto; + left: auto; + } + + @media (min-width: @screen-sm-min) { + > li { + display: table-cell; + width: 1%; + > a { + margin-bottom: 0; + } + } + } +} + +// Move borders to anchors instead of bottom of list +// +// Mixin for adding on top the shared `.nav-justified` styles for our tabs +.nav-tabs-justified { + border-bottom: 0; + + > li > a { + // Override margin from .nav-tabs + margin-right: 0; + border-radius: @border-radius-base; + } + + > .active > a, + > .active > a:hover, + > .active > a:focus { + border: 1px solid @nav-tabs-justified-link-border-color; + } + + @media (min-width: @screen-sm-min) { + > li > a { + border-bottom: 1px solid @nav-tabs-justified-link-border-color; + border-radius: @border-radius-base @border-radius-base 0 0; + } + > .active > a, + > .active > a:hover, + > .active > a:focus { + border-bottom-color: @nav-tabs-justified-active-link-border-color; + } + } +} + + +// Tabbable tabs +// ------------------------- + +// Hide tabbable panes to start, show them when `.active` +.tab-content { + > .tab-pane { + display: none; + } + > .active { + display: block; + } +} + + +// Dropdowns +// ------------------------- + +// Specific dropdowns +.nav-tabs .dropdown-menu { + // make dropdown border overlap tab border + margin-top: -1px; + // Remove the top rounded corners here since there is a hard edge above the menu + .border-top-radius(0); +} diff --git a/web/client/themes/default/bootstrap-theme/normalize.less b/web/client/themes/default/bootstrap-theme/normalize.less new file mode 100644 index 0000000000..9dddf73ad2 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/normalize.less @@ -0,0 +1,424 @@ +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ + +// +// 1. Set default font family to sans-serif. +// 2. Prevent iOS and IE text size adjust after device orientation change, +// without disabling user zoom. +// + +html { + font-family: sans-serif; // 1 + -ms-text-size-adjust: 100%; // 2 + -webkit-text-size-adjust: 100%; // 2 +} + +// +// Remove default margin. +// + +body { + margin: 0; +} + +// HTML5 display definitions +// ========================================================================== + +// +// Correct `block` display not defined for any HTML5 element in IE 8/9. +// Correct `block` display not defined for `details` or `summary` in IE 10/11 +// and Firefox. +// Correct `block` display not defined for `main` in IE 11. +// + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +menu, +nav, +section, +summary { + display: block; +} + +// +// 1. Correct `inline-block` display not defined in IE 8/9. +// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. +// + +audio, +canvas, +progress, +video { + display: inline-block; // 1 + vertical-align: baseline; // 2 +} + +// +// Prevent modern browsers from displaying `audio` without controls. +// Remove excess height in iOS 5 devices. +// + +audio:not([controls]) { + display: none; + height: 0; +} + +// +// Address `[hidden]` styling not present in IE 8/9/10. +// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. +// + +[hidden], +template { + display: none; +} + +// Links +// ========================================================================== + +// +// Remove the gray background color from active links in IE 10. +// + +a { + background-color: transparent; +} + +// +// Improve readability of focused elements when they are also in an +// active/hover state. +// + +a:active, +a:hover { + outline: 0; +} + +// Text-level semantics +// ========================================================================== + +// +// Address styling not present in IE 8/9/10/11, Safari, and Chrome. +// + +abbr[title] { + border-bottom: 1px dotted; +} + +// +// Address style set to `bolder` in Firefox 4+, Safari, and Chrome. +// + +b, +strong { + font-weight: bold; +} + +// +// Address styling not present in Safari and Chrome. +// + +dfn { + font-style: italic; +} + +// +// Address variable `h1` font-size and margin within `section` and `article` +// contexts in Firefox 4+, Safari, and Chrome. +// + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +// +// Address styling not present in IE 8/9. +// + +mark { + background: #ff0; + color: #000; +} + +// +// Address inconsistent and variable font size in all browsers. +// + +small { + font-size: 80%; +} + +// +// Prevent `sub` and `sup` affecting `line-height` in all browsers. +// + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +// Embedded content +// ========================================================================== + +// +// Remove border when inside `a` element in IE 8/9/10. +// + +img { + border: 0; +} + +// +// Correct overflow not hidden in IE 9/10/11. +// + +svg:not(:root) { + overflow: hidden; +} + +// Grouping content +// ========================================================================== + +// +// Address margin not present in IE 8/9 and Safari. +// + +figure { + margin: 1em 40px; +} + +// +// Address differences between Firefox and other browsers. +// + +hr { + box-sizing: content-box; + height: 0; +} + +// +// Contain overflow in all browsers. +// + +pre { + overflow: auto; +} + +// +// Address odd `em`-unit font size rendering in all browsers. +// + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +// Forms +// ========================================================================== + +// +// Known limitation: by default, Chrome and Safari on OS X allow very limited +// styling of `select`, unless a `border` property is set. +// + +// +// 1. Correct color not being inherited. +// Known issue: affects color of disabled elements. +// 2. Correct font properties not being inherited. +// 3. Address margins set differently in Firefox 4+, Safari, and Chrome. +// + +button, +input, +optgroup, +select, +textarea { + color: inherit; // 1 + font: inherit; // 2 + margin: 0; // 3 +} + +// +// Address `overflow` set to `hidden` in IE 8/9/10/11. +// + +button { + overflow: visible; +} + +// +// Address inconsistent `text-transform` inheritance for `button` and `select`. +// All other form control elements do not inherit `text-transform` values. +// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. +// Correct `select` style inheritance in Firefox. +// + +button, +select { + text-transform: none; +} + +// +// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` +// and `video` controls. +// 2. Correct inability to style clickable `input` types in iOS. +// 3. Improve usability and consistency of cursor style between image-type +// `input` and others. +// + +button, +html input[type="button"], // 1 +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; // 2 + cursor: pointer; // 3 +} + +// +// Re-set default cursor for disabled elements. +// + +button[disabled], +html input[disabled] { + cursor: default; +} + +// +// Remove inner padding and border in Firefox 4+. +// + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +// +// Address Firefox 4+ setting `line-height` on `input` using `!important` in +// the UA stylesheet. +// + +input { + line-height: normal; +} + +// +// It's recommended that you don't attempt to style these elements. +// Firefox's implementation doesn't respect box-sizing, padding, or width. +// +// 1. Address box sizing set to `content-box` in IE 8/9/10. +// 2. Remove excess padding in IE 8/9/10. +// + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; // 1 + padding: 0; // 2 +} + +// +// Fix the cursor style for Chrome's increment/decrement buttons. For certain +// `font-size` values of the `input`, it causes the cursor style of the +// decrement button to change from `default` to `text`. +// + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +// +// 1. Address `appearance` set to `searchfield` in Safari and Chrome. +// 2. Address `box-sizing` set to `border-box` in Safari and Chrome. +// + +input[type="search"] { + -webkit-appearance: textfield; // 1 + box-sizing: content-box; //2 +} + +// +// Remove inner padding and search cancel button in Safari and Chrome on OS X. +// Safari (but not Chrome) clips the cancel button when the search input has +// padding (and `textfield` appearance). +// + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +// +// Define consistent border, margin, and padding. +// + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +// +// 1. Correct `color` not being inherited in IE 8/9/10/11. +// 2. Remove padding so people aren't caught out if they zero out fieldsets. +// + +legend { + border: 0; // 1 + padding: 0; // 2 +} + +// +// Remove default vertical scrollbar in IE 8/9/10/11. +// + +textarea { + overflow: auto; +} + +// +// Don't inherit the `font-weight` (applied by a rule above). +// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. +// + +optgroup { + font-weight: bold; +} + +// Tables +// ========================================================================== + +// +// Remove most spacing between table cells. +// + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/web/client/themes/default/bootstrap-theme/pager.less b/web/client/themes/default/bootstrap-theme/pager.less new file mode 100644 index 0000000000..41abaaadc5 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/pager.less @@ -0,0 +1,54 @@ +// +// Pager pagination +// -------------------------------------------------- + + +.pager { + padding-left: 0; + margin: @line-height-computed 0; + list-style: none; + text-align: center; + &:extend(.clearfix all); + li { + display: inline; + > a, + > span { + display: inline-block; + padding: 5px 14px; + background-color: @pager-bg; + border: 1px solid @pager-border; + border-radius: @pager-border-radius; + } + + > a:hover, + > a:focus { + text-decoration: none; + background-color: @pager-hover-bg; + } + } + + .next { + > a, + > span { + float: right; + } + } + + .previous { + > a, + > span { + float: left; + } + } + + .disabled { + > a, + > a:hover, + > a:focus, + > span { + color: @pager-disabled-color; + background-color: @pager-bg; + cursor: @cursor-disabled; + } + } +} diff --git a/web/client/themes/default/bootstrap-theme/pagination.less b/web/client/themes/default/bootstrap-theme/pagination.less new file mode 100644 index 0000000000..31f77aae4e --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/pagination.less @@ -0,0 +1,89 @@ +// +// Pagination (multiple pages) +// -------------------------------------------------- +.pagination { + display: inline-block; + padding-left: 0; + margin: @line-height-computed 0; + border-radius: @border-radius-base; + + > li { + display: inline; // Remove list-style and block-level defaults + > a, + > span { + position: relative; + float: left; // Collapse white-space + padding: @padding-base-vertical @padding-base-horizontal; + line-height: @line-height-base; + text-decoration: none; + color: @pagination-color; + background-color: @pagination-bg; + border: 1px solid @pagination-border; + margin-left: -1px; + } + &:first-child { + > a, + > span { + margin-left: 0; + .border-left-radius(@border-radius-base); + } + } + &:last-child { + > a, + > span { + .border-right-radius(@border-radius-base); + } + } + } + + > li > a, + > li > span { + &:hover, + &:focus { + z-index: 2; + color: @pagination-hover-color; + background-color: @pagination-hover-bg; + border-color: @pagination-hover-border; + } + } + + > .active > a, + > .active > span { + &, + &:hover, + &:focus { + z-index: 3; + color: @pagination-active-color; + background-color: @pagination-active-bg; + border-color: @pagination-active-border; + cursor: default; + } + } + + > .disabled { + > span, + > span:hover, + > span:focus, + > a, + > a:hover, + > a:focus { + color: @pagination-disabled-color; + background-color: @pagination-disabled-bg; + border-color: @pagination-disabled-border; + cursor: @cursor-disabled; + } + } +} + +// Sizing +// -------------------------------------------------- + +// Large +.pagination-lg { + .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); +} + +// Small +.pagination-sm { + .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); +} diff --git a/web/client/themes/default/bootstrap-theme/panels.less b/web/client/themes/default/bootstrap-theme/panels.less new file mode 100644 index 0000000000..65aa3a83f3 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/panels.less @@ -0,0 +1,271 @@ +// +// Panels +// -------------------------------------------------- + + +// Base class +.panel { + margin-bottom: @line-height-computed; + background-color: @panel-bg; + border: 1px solid transparent; + border-radius: @panel-border-radius; + .box-shadow(0 1px 1px rgba(0,0,0,.05)); +} + +// Panel contents +.panel-body { + padding: @panel-body-padding; + &:extend(.clearfix all); +} + +// Optional heading +.panel-heading { + padding: @panel-heading-padding; + border-bottom: 1px solid transparent; + .border-top-radius((@panel-border-radius - 1)); + + > .dropdown .dropdown-toggle { + color: inherit; + } +} + +// Within heading, strip any `h*` tag of its default margins for spacing. +.panel-title { + margin-top: 0; + margin-bottom: 0; + font-size: ceil((@font-size-base * 1.125)); + color: inherit; + + > a, + > small, + > .small, + > small > a, + > .small > a { + color: inherit; + } +} + +// Optional footer (stays gray in every modifier class) +.panel-footer { + padding: @panel-footer-padding; + background-color: @panel-footer-bg; + border-top: 1px solid @panel-inner-border; + .border-bottom-radius((@panel-border-radius - 1)); +} + + +// List groups in panels +// +// By default, space out list group content from panel headings to account for +// any kind of custom content between the two. + +.panel { + > .list-group, + > .panel-collapse > .list-group { + margin-bottom: 0; + + .list-group-item { + border-width: 1px 0; + border-radius: 0; + } + + // Add border top radius for first one + &:first-child { + .list-group-item:first-child { + border-top: 0; + .border-top-radius((@panel-border-radius - 1)); + } + } + + // Add border bottom radius for last one + &:last-child { + .list-group-item:last-child { + border-bottom: 0; + .border-bottom-radius((@panel-border-radius - 1)); + } + } + } + > .panel-heading + .panel-collapse > .list-group { + .list-group-item:first-child { + .border-top-radius(0); + } + } +} +// Collapse space between when there's no additional content. +.panel-heading + .list-group { + .list-group-item:first-child { + border-top-width: 0; + } +} +.list-group + .panel-footer { + border-top-width: 0; +} + +// Tables in panels +// +// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and +// watch it go full width. + +.panel { + > .table, + > .table-responsive > .table, + > .panel-collapse > .table { + margin-bottom: 0; + + caption { + padding-left: @panel-body-padding; + padding-right: @panel-body-padding; + } + } + // Add border top radius for first one + > .table:first-child, + > .table-responsive:first-child > .table:first-child { + .border-top-radius((@panel-border-radius - 1)); + + > thead:first-child, + > tbody:first-child { + > tr:first-child { + border-top-left-radius: (@panel-border-radius - 1); + border-top-right-radius: (@panel-border-radius - 1); + + td:first-child, + th:first-child { + border-top-left-radius: (@panel-border-radius - 1); + } + td:last-child, + th:last-child { + border-top-right-radius: (@panel-border-radius - 1); + } + } + } + } + // Add border bottom radius for last one + > .table:last-child, + > .table-responsive:last-child > .table:last-child { + .border-bottom-radius((@panel-border-radius - 1)); + + > tbody:last-child, + > tfoot:last-child { + > tr:last-child { + border-bottom-left-radius: (@panel-border-radius - 1); + border-bottom-right-radius: (@panel-border-radius - 1); + + td:first-child, + th:first-child { + border-bottom-left-radius: (@panel-border-radius - 1); + } + td:last-child, + th:last-child { + border-bottom-right-radius: (@panel-border-radius - 1); + } + } + } + } + > .panel-body + .table, + > .panel-body + .table-responsive, + > .table + .panel-body, + > .table-responsive + .panel-body { + border-top: 1px solid @table-border-color; + } + > .table > tbody:first-child > tr:first-child th, + > .table > tbody:first-child > tr:first-child td { + border-top: 0; + } + > .table-bordered, + > .table-responsive > .table-bordered { + border: 0; + > thead, + > tbody, + > tfoot { + > tr { + > th:first-child, + > td:first-child { + border-left: 0; + } + > th:last-child, + > td:last-child { + border-right: 0; + } + } + } + > thead, + > tbody { + > tr:first-child { + > td, + > th { + border-bottom: 0; + } + } + } + > tbody, + > tfoot { + > tr:last-child { + > td, + > th { + border-bottom: 0; + } + } + } + } + > .table-responsive { + border: 0; + margin-bottom: 0; + } +} + + +// Collapsible panels (aka, accordion) +// +// Wrap a series of panels in `.panel-group` to turn them into an accordion with +// the help of our collapse JavaScript plugin. + +.panel-group { + margin-bottom: @line-height-computed; + + // Tighten up margin so it's only between panels + .panel { + margin-bottom: 0; + border-radius: @panel-border-radius; + + + .panel { + margin-top: 5px; + } + } + + .panel-heading { + border-bottom: 0; + + + .panel-collapse > .panel-body, + + .panel-collapse > .list-group { + border-top: 1px solid @panel-inner-border; + } + } + + .panel-footer { + border-top: 0; + + .panel-collapse .panel-body { + border-bottom: 1px solid @panel-inner-border; + } + } +} + + +// Contextual variations +.panel-default { + .panel-variant(@panel-default-border; @panel-default-text; @panel-default-heading-bg; @panel-default-border); +} +.panel-primary { + .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border); +} +.panel-success { + .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border); +} +.panel-info { + .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border); +} +.panel-warning { + .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border); +} +.panel-danger { + .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border); +} diff --git a/web/client/themes/default/bootstrap-theme/popovers.less b/web/client/themes/default/bootstrap-theme/popovers.less new file mode 100644 index 0000000000..3a62a6455a --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/popovers.less @@ -0,0 +1,131 @@ +// +// Popovers +// -------------------------------------------------- + + +.popover { + position: absolute; + top: 0; + left: 0; + z-index: @zindex-popover; + display: none; + max-width: @popover-max-width; + padding: 1px; + // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element. + // So reset our font and text properties to avoid inheriting weird values. + .reset-text(); + font-size: @font-size-base; + + background-color: @popover-bg; + background-clip: padding-box; + border: 1px solid @popover-fallback-border-color; + border: 1px solid @popover-border-color; + border-radius: @border-radius-large; + .box-shadow(0 5px 10px rgba(0,0,0,.2)); + + // Offset the popover to account for the popover arrow + &.top { margin-top: -@popover-arrow-width; } + &.right { margin-left: @popover-arrow-width; } + &.bottom { margin-top: @popover-arrow-width; } + &.left { margin-left: -@popover-arrow-width; } +} + +.popover-title { + margin: 0; // reset heading margin + padding: 8px 14px; + font-size: @font-size-base; + background-color: @popover-title-bg; + border-bottom: 1px solid darken(@popover-title-bg, 5%); + border-radius: (@border-radius-large - 1) (@border-radius-large - 1) 0 0; +} + +.popover-content { + padding: 9px 14px; +} + +// Arrows +// +// .arrow is outer, .arrow:after is inner + +.popover > .arrow { + &, + &:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + } +} +.popover > .arrow { + border-width: @popover-arrow-outer-width; +} +.popover > .arrow:after { + border-width: @popover-arrow-width; + content: ""; +} + +.popover { + &.top > .arrow { + left: 50%; + margin-left: -@popover-arrow-outer-width; + border-bottom-width: 0; + border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback + border-top-color: @popover-arrow-outer-color; + bottom: -@popover-arrow-outer-width; + &:after { + content: " "; + bottom: 1px; + margin-left: -@popover-arrow-width; + border-bottom-width: 0; + border-top-color: @popover-arrow-color; + } + } + &.right > .arrow { + top: 50%; + left: -@popover-arrow-outer-width; + margin-top: -@popover-arrow-outer-width; + border-left-width: 0; + border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback + border-right-color: @popover-arrow-outer-color; + &:after { + content: " "; + left: 1px; + bottom: -@popover-arrow-width; + border-left-width: 0; + border-right-color: @popover-arrow-color; + } + } + &.bottom > .arrow { + left: 50%; + margin-left: -@popover-arrow-outer-width; + border-top-width: 0; + border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback + border-bottom-color: @popover-arrow-outer-color; + top: -@popover-arrow-outer-width; + &:after { + content: " "; + top: 1px; + margin-left: -@popover-arrow-width; + border-top-width: 0; + border-bottom-color: @popover-arrow-color; + } + } + + &.left > .arrow { + top: 50%; + right: -@popover-arrow-outer-width; + margin-top: -@popover-arrow-outer-width; + border-right-width: 0; + border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback + border-left-color: @popover-arrow-outer-color; + &:after { + content: " "; + right: 1px; + border-right-width: 0; + border-left-color: @popover-arrow-color; + bottom: -@popover-arrow-width; + } + } +} diff --git a/web/client/themes/default/bootstrap-theme/print.less b/web/client/themes/default/bootstrap-theme/print.less new file mode 100644 index 0000000000..66e54ab489 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/print.less @@ -0,0 +1,101 @@ +/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */ + +// ========================================================================== +// Print styles. +// Inlined to avoid the additional HTTP request: h5bp.com/r +// ========================================================================== + +@media print { + *, + *:before, + *:after { + background: transparent !important; + color: #000 !important; // Black prints faster: h5bp.com/s + box-shadow: none !important; + text-shadow: none !important; + } + + a, + a:visited { + text-decoration: underline; + } + + a[href]:after { + content: " (" attr(href) ")"; + } + + abbr[title]:after { + content: " (" attr(title) ")"; + } + + // Don't show links that are fragment identifiers, + // or use the `javascript:` pseudo protocol + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; + } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; + } + + thead { + display: table-header-group; // h5bp.com/t + } + + tr, + img { + page-break-inside: avoid; + } + + img { + max-width: 100% !important; + } + + p, + h2, + h3 { + orphans: 3; + widows: 3; + } + + h2, + h3 { + page-break-after: avoid; + } + + // Bootstrap specific changes start + + // Bootstrap components + .navbar { + display: none; + } + .btn, + .dropup > .btn { + > .caret { + border-top-color: #000 !important; + } + } + .label { + border: 1px solid #000; + } + + .table { + border-collapse: collapse !important; + + td, + th { + background-color: #fff !important; + } + } + .table-bordered { + th, + td { + border: 1px solid #ddd !important; + } + } + + // Bootstrap specific changes end +} diff --git a/web/client/themes/default/bootstrap-theme/progress-bars.less b/web/client/themes/default/bootstrap-theme/progress-bars.less new file mode 100644 index 0000000000..8868a1feef --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/progress-bars.less @@ -0,0 +1,87 @@ +// +// Progress bars +// -------------------------------------------------- + + +// Bar animations +// ------------------------- + +// WebKit +@-webkit-keyframes progress-bar-stripes { + from { background-position: 40px 0; } + to { background-position: 0 0; } +} + +// Spec and IE10+ +@keyframes progress-bar-stripes { + from { background-position: 40px 0; } + to { background-position: 0 0; } +} + + +// Bar itself +// ------------------------- + +// Outer container +.progress { + overflow: hidden; + height: @line-height-computed; + margin-bottom: @line-height-computed; + background-color: @progress-bg; + border-radius: @progress-border-radius; + .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); +} + +// Bar of progress +.progress-bar { + float: left; + width: 0%; + height: 100%; + font-size: @font-size-small; + line-height: @line-height-computed; + color: @progress-bar-color; + text-align: center; + background-color: @progress-bar-bg; + .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); + .transition(width .6s ease); +} + +// Striped bars +// +// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the +// `.progress-bar-striped` class, which you just add to an existing +// `.progress-bar`. +.progress-striped .progress-bar, +.progress-bar-striped { + #gradient > .striped(); + background-size: 40px 40px; +} + +// Call animation for the active one +// +// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the +// `.progress-bar.active` approach. +.progress.active .progress-bar, +.progress-bar.active { + .animation(progress-bar-stripes 2s linear infinite); +} + + +// Variations +// ------------------------- + +.progress-bar-success { + .progress-bar-variant(@progress-bar-success-bg); +} + +.progress-bar-info { + .progress-bar-variant(@progress-bar-info-bg); +} + +.progress-bar-warning { + .progress-bar-variant(@progress-bar-warning-bg); +} + +.progress-bar-danger { + .progress-bar-variant(@progress-bar-danger-bg); +} diff --git a/web/client/themes/default/bootstrap-theme/responsive-embed.less b/web/client/themes/default/bootstrap-theme/responsive-embed.less new file mode 100644 index 0000000000..080a5118fe --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/responsive-embed.less @@ -0,0 +1,35 @@ +// Embeds responsive +// +// Credit: Nicolas Gallagher and SUIT CSS. + +.embed-responsive { + position: relative; + display: block; + height: 0; + padding: 0; + overflow: hidden; + + .embed-responsive-item, + iframe, + embed, + object, + video { + position: absolute; + top: 0; + left: 0; + bottom: 0; + height: 100%; + width: 100%; + border: 0; + } +} + +// Modifier class for 16:9 aspect ratio +.embed-responsive-16by9 { + padding-bottom: 56.25%; +} + +// Modifier class for 4:3 aspect ratio +.embed-responsive-4by3 { + padding-bottom: 75%; +} diff --git a/web/client/themes/default/bootstrap-theme/responsive-utilities.less b/web/client/themes/default/bootstrap-theme/responsive-utilities.less new file mode 100644 index 0000000000..b1db31d7bf --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/responsive-utilities.less @@ -0,0 +1,194 @@ +// +// Responsive: Utility classes +// -------------------------------------------------- + + +// IE10 in Windows (Phone) 8 +// +// Support for responsive views via media queries is kind of borked in IE10, for +// Surface/desktop in split view and for Windows Phone 8. This particular fix +// must be accompanied by a snippet of JavaScript to sniff the user agent and +// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at +// our Getting Started page for more information on this bug. +// +// For more information, see the following: +// +// Issue: https://github.com/twbs/bootstrap/issues/10497 +// Docs: http://getbootstrap.com/getting-started/#support-ie10-width +// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ +// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ + +@-ms-viewport { + width: device-width; +} + + +// Visibility utilities +// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0 +.visible-xs, +.visible-sm, +.visible-md, +.visible-lg { + .responsive-invisibility(); +} + +.visible-xs-block, +.visible-xs-inline, +.visible-xs-inline-block, +.visible-sm-block, +.visible-sm-inline, +.visible-sm-inline-block, +.visible-md-block, +.visible-md-inline, +.visible-md-inline-block, +.visible-lg-block, +.visible-lg-inline, +.visible-lg-inline-block { + display: none !important; +} + +.visible-xs { + @media (max-width: @screen-xs-max) { + .responsive-visibility(); + } +} +.visible-xs-block { + @media (max-width: @screen-xs-max) { + display: block !important; + } +} +.visible-xs-inline { + @media (max-width: @screen-xs-max) { + display: inline !important; + } +} +.visible-xs-inline-block { + @media (max-width: @screen-xs-max) { + display: inline-block !important; + } +} + +.visible-sm { + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + .responsive-visibility(); + } +} +.visible-sm-block { + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + display: block !important; + } +} +.visible-sm-inline { + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + display: inline !important; + } +} +.visible-sm-inline-block { + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + display: inline-block !important; + } +} + +.visible-md { + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + .responsive-visibility(); + } +} +.visible-md-block { + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + display: block !important; + } +} +.visible-md-inline { + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + display: inline !important; + } +} +.visible-md-inline-block { + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + display: inline-block !important; + } +} + +.visible-lg { + @media (min-width: @screen-lg-min) { + .responsive-visibility(); + } +} +.visible-lg-block { + @media (min-width: @screen-lg-min) { + display: block !important; + } +} +.visible-lg-inline { + @media (min-width: @screen-lg-min) { + display: inline !important; + } +} +.visible-lg-inline-block { + @media (min-width: @screen-lg-min) { + display: inline-block !important; + } +} + +.hidden-xs { + @media (max-width: @screen-xs-max) { + .responsive-invisibility(); + } +} +.hidden-sm { + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { + .responsive-invisibility(); + } +} +.hidden-md { + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { + .responsive-invisibility(); + } +} +.hidden-lg { + @media (min-width: @screen-lg-min) { + .responsive-invisibility(); + } +} + + +// Print utilities +// +// Media queries are placed on the inside to be mixin-friendly. + +// Note: Deprecated .visible-print as of v3.2.0 +.visible-print { + .responsive-invisibility(); + + @media print { + .responsive-visibility(); + } +} +.visible-print-block { + display: none !important; + + @media print { + display: block !important; + } +} +.visible-print-inline { + display: none !important; + + @media print { + display: inline !important; + } +} +.visible-print-inline-block { + display: none !important; + + @media print { + display: inline-block !important; + } +} + +.hidden-print { + @media print { + .responsive-invisibility(); + } +} diff --git a/web/client/themes/default/bootstrap-theme/scaffolding.less b/web/client/themes/default/bootstrap-theme/scaffolding.less new file mode 100644 index 0000000000..64a29c6a5e --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/scaffolding.less @@ -0,0 +1,161 @@ +// +// Scaffolding +// -------------------------------------------------- + + +// Reset the box-sizing +// +// Heads up! This reset may cause conflicts with some third-party widgets. +// For recommendations on resolving such conflicts, see +// http://getbootstrap.com/getting-started/#third-box-sizing +* { + .box-sizing(border-box); +} +*:before, +*:after { + .box-sizing(border-box); +} + + +// Body reset + +html { + font-size: 10px; + -webkit-tap-highlight-color: rgba(0,0,0,0); +} + +body { + font-family: @font-family-base; + font-size: @font-size-base; + line-height: @line-height-base; + color: @text-color; + background-color: @body-bg; +} + +// Reset fonts for relevant elements +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + + +// Links + +a { + color: @link-color; + text-decoration: none; + + &:hover, + &:focus { + color: @link-hover-color; + text-decoration: @link-hover-decoration; + } + + &:focus { + .tab-focus(); + } +} + + +// Figures +// +// We reset this here because previously Normalize had no `figure` margins. This +// ensures we don't break anyone's use of the element. + +figure { + margin: 0; +} + + +// Images + +img { + vertical-align: middle; +} + +// Responsive images (ensure images don't scale beyond their parents) +.img-responsive { + .img-responsive(); +} + +// Rounded corners +.img-rounded { + border-radius: @border-radius-large; +} + +// Image thumbnails +// +// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`. +.img-thumbnail { + padding: @thumbnail-padding; + line-height: @line-height-base; + background-color: @thumbnail-bg; + border: 1px solid @thumbnail-border; + border-radius: @thumbnail-border-radius; + .transition(all .2s ease-in-out); + + // Keep them at most 100% wide + .img-responsive(inline-block); +} + +// Perfect circle +.img-circle { + border-radius: 50%; // set radius in percents +} + + +// Horizontal rules + +hr { + margin-top: @line-height-computed; + margin-bottom: @line-height-computed; + border: 0; + border-top: 1px solid @hr-border; +} + + +// Only display content to screen readers +// +// See: http://a11yproject.com/posts/how-to-hide-content + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0,0,0,0); + border: 0; +} + +// Use in conjunction with .sr-only to only display content when it's focused. +// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 +// Credit: HTML5 Boilerplate + +.sr-only-focusable { + &:active, + &:focus { + position: static; + width: auto; + height: auto; + margin: 0; + overflow: visible; + clip: auto; + } +} + + +// iOS "clickable elements" fix for role="button" +// +// Fixes "clickability" issue (and more generally, the firing of events such as focus as well) +// for traditionally non-focusable elements with role="button" +// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + +[role="button"] { + cursor: pointer; +} diff --git a/web/client/themes/default/bootstrap-theme/tables.less b/web/client/themes/default/bootstrap-theme/tables.less new file mode 100644 index 0000000000..2242c03686 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/tables.less @@ -0,0 +1,234 @@ +// +// Tables +// -------------------------------------------------- + + +table { + background-color: @table-bg; +} +caption { + padding-top: @table-cell-padding; + padding-bottom: @table-cell-padding; + color: @text-muted; + text-align: left; +} +th { + text-align: left; +} + + +// Baseline styles + +.table { + width: 100%; + max-width: 100%; + margin-bottom: @line-height-computed; + // Cells + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: @table-cell-padding; + line-height: @line-height-base; + vertical-align: top; + border-top: 1px solid @table-border-color; + } + } + } + // Bottom align for column headings + > thead > tr > th { + vertical-align: bottom; + border-bottom: 2px solid @table-border-color; + } + // Remove top border from thead by default + > caption + thead, + > colgroup + thead, + > thead:first-child { + > tr:first-child { + > th, + > td { + border-top: 0; + } + } + } + // Account for multiple tbody instances + > tbody + tbody { + border-top: 2px solid @table-border-color; + } + + // Nesting + .table { + background-color: @body-bg; + } +} + + +// Condensed table w/ half padding + +.table-condensed { + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + padding: @table-condensed-cell-padding; + } + } + } +} + + +// Bordered version +// +// Add borders all around the table and between all the columns. + +.table-bordered { + border: 1px solid @table-border-color; + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + border: 1px solid @table-border-color; + } + } + } + > thead > tr { + > th, + > td { + border-bottom-width: 2px; + } + } +} + + +// Zebra-striping +// +// Default zebra-stripe styles (alternating gray and transparent backgrounds) + +.table-striped { + > tbody > tr:nth-of-type(odd) { + background-color: @table-bg-accent; + } +} + + +// Hover effect +// +// Placed here since it has to come after the potential zebra striping + +.table-hover { + > tbody > tr:hover { + background-color: @table-bg-hover; + } +} + + +// Table cell sizing +// +// Reset default table behavior + +table col[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623) + float: none; + display: table-column; +} +table { + td, + th { + &[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623) + float: none; + display: table-cell; + } + } +} + + +// Table backgrounds +// +// Exact selectors below required to override `.table-striped` and prevent +// inheritance to nested tables. + +// Generate the contextual variants +.table-row-variant(active; @table-bg-active); +.table-row-variant(success; @state-success-bg); +.table-row-variant(info; @state-info-bg); +.table-row-variant(warning; @state-warning-bg); +.table-row-variant(danger; @state-danger-bg); + + +// Responsive tables +// +// Wrap your tables in `.table-responsive` and we'll make them mobile friendly +// by enabling horizontal scrolling. Only applies <768px. Everything above that +// will display normally. + +.table-responsive { + overflow-x: auto; + min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837) + + @media screen and (max-width: @screen-xs-max) { + width: 100%; + margin-bottom: (@line-height-computed * 0.75); + overflow-y: hidden; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: 1px solid @table-border-color; + + // Tighten up spacing + > .table { + margin-bottom: 0; + + // Ensure the content doesn't wrap + > thead, + > tbody, + > tfoot { + > tr { + > th, + > td { + white-space: nowrap; + } + } + } + } + + // Special overrides for the bordered tables + > .table-bordered { + border: 0; + + // Nuke the appropriate borders so that the parent can handle them + > thead, + > tbody, + > tfoot { + > tr { + > th:first-child, + > td:first-child { + border-left: 0; + } + > th:last-child, + > td:last-child { + border-right: 0; + } + } + } + + // Only nuke the last row's bottom-border in `tbody` and `tfoot` since + // chances are there will be only one `tr` in a `thead` and that would + // remove the border altogether. + > tbody, + > tfoot { + > tr:last-child { + > th, + > td { + border-bottom: 0; + } + } + } + + } + } +} diff --git a/web/client/themes/default/bootstrap-theme/theme.less b/web/client/themes/default/bootstrap-theme/theme.less new file mode 100644 index 0000000000..fb6174427b --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/theme.less @@ -0,0 +1,291 @@ +/*! + * Bootstrap v3.3.7 (http://getbootstrap.com) + * Copyright 2011-2016 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + */ + +// +// Load core variables and mixins +// -------------------------------------------------- + +@import "variables.less"; +@import "mixins.less"; + + +// +// Buttons +// -------------------------------------------------- + +// Common styles +.btn-default, +.btn-primary, +.btn-success, +.btn-info, +.btn-warning, +.btn-danger { + text-shadow: 0 -1px 0 rgba(0,0,0,.2); + @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); + .box-shadow(@shadow); + + // Reset the shadow + &:active, + &.active { + .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + .box-shadow(none); + } + + .badge { + text-shadow: none; + } +} + +// Mixin for generating new styles +.btn-styles(@btn-color: #555) { + #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%)); + .reset-filter(); // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620 + background-repeat: repeat-x; + border-color: darken(@btn-color, 14%); + + &:hover, + &:focus { + background-color: darken(@btn-color, 12%); + background-position: 0 -15px; + } + + &:active, + &.active { + background-color: darken(@btn-color, 12%); + border-color: darken(@btn-color, 14%); + } + + &.disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &.focus, + &:active, + &.active { + background-color: darken(@btn-color, 12%); + background-image: none; + } + } +} + +// Common styles +.btn { + // Remove the gradient for the pressed/active state + &:active, + &.active { + background-image: none; + } +} + +// Apply the mixin to the buttons +.btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; } +.btn-primary { .btn-styles(@btn-primary-bg); } +.btn-success { .btn-styles(@btn-success-bg); } +.btn-info { .btn-styles(@btn-info-bg); } +.btn-warning { .btn-styles(@btn-warning-bg); } +.btn-danger { .btn-styles(@btn-danger-bg); } + + +// +// Images +// -------------------------------------------------- + +.thumbnail, +.img-thumbnail { + .box-shadow(0 1px 2px rgba(0,0,0,.075)); +} + + +// +// Dropdowns +// -------------------------------------------------- + +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus { + #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%)); + background-color: darken(@dropdown-link-hover-bg, 5%); +} +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%)); + background-color: darken(@dropdown-link-active-bg, 5%); +} + + +// +// Navbar +// -------------------------------------------------- + +// Default navbar +.navbar-default { + #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg); + .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered + border-radius: @navbar-border-radius; + @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); + .box-shadow(@shadow); + + .navbar-nav > .open > a, + .navbar-nav > .active > a { + #gradient > .vertical(@start-color: darken(@navbar-default-link-active-bg, 5%); @end-color: darken(@navbar-default-link-active-bg, 2%)); + .box-shadow(inset 0 3px 9px rgba(0,0,0,.075)); + } +} +.navbar-brand, +.navbar-nav > li > a { + text-shadow: 0 1px 0 rgba(255,255,255,.25); +} + +// Inverted navbar +.navbar-inverse { + #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg); + .reset-filter(); // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered; see https://github.com/twbs/bootstrap/issues/10257 + border-radius: @navbar-border-radius; + .navbar-nav > .open > a, + .navbar-nav > .active > a { + #gradient > .vertical(@start-color: @navbar-inverse-link-active-bg; @end-color: lighten(@navbar-inverse-link-active-bg, 2.5%)); + .box-shadow(inset 0 3px 9px rgba(0,0,0,.25)); + } + + .navbar-brand, + .navbar-nav > li > a { + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + } +} + +// Undo rounded corners in static and fixed navbars +.navbar-static-top, +.navbar-fixed-top, +.navbar-fixed-bottom { + border-radius: 0; +} + +// Fix active state of dropdown items in collapsed mode +@media (max-width: @grid-float-breakpoint-max) { + .navbar .navbar-nav .open .dropdown-menu > .active > a { + &, + &:hover, + &:focus { + color: #fff; + #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%)); + } + } +} + + +// +// Alerts +// -------------------------------------------------- + +// Common styles +.alert { + text-shadow: 0 1px 0 rgba(255,255,255,.2); + @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05); + .box-shadow(@shadow); +} + +// Mixin for generating new styles +.alert-styles(@color) { + #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%)); + border-color: darken(@color, 15%); +} + +// Apply the mixin to the alerts +.alert-success { .alert-styles(@alert-success-bg); } +.alert-info { .alert-styles(@alert-info-bg); } +.alert-warning { .alert-styles(@alert-warning-bg); } +.alert-danger { .alert-styles(@alert-danger-bg); } + + +// +// Progress bars +// -------------------------------------------------- + +// Give the progress background some depth +.progress { + #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg) +} + +// Mixin for generating new styles +.progress-bar-styles(@color) { + #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%)); +} + +// Apply the mixin to the progress bars +.progress-bar { .progress-bar-styles(@progress-bar-bg); } +.progress-bar-success { .progress-bar-styles(@progress-bar-success-bg); } +.progress-bar-info { .progress-bar-styles(@progress-bar-info-bg); } +.progress-bar-warning { .progress-bar-styles(@progress-bar-warning-bg); } +.progress-bar-danger { .progress-bar-styles(@progress-bar-danger-bg); } + +// Reset the striped class because our mixins don't do multiple gradients and +// the above custom styles override the new `.progress-bar-striped` in v3.2.0. +.progress-bar-striped { + #gradient > .striped(); +} + + +// +// List groups +// -------------------------------------------------- + +.list-group { + border-radius: @border-radius-base; + .box-shadow(0 1px 2px rgba(0,0,0,.075)); +} +.list-group-item.active, +.list-group-item.active:hover, +.list-group-item.active:focus { + text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%); + #gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%)); + border-color: darken(@list-group-active-border, 7.5%); + + .badge { + text-shadow: none; + } +} + + +// +// Panels +// -------------------------------------------------- + +// Common styles +.panel { + .box-shadow(0 1px 2px rgba(0,0,0,.05)); +} + +// Mixin for generating new styles +.panel-heading-styles(@color) { + #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%)); +} + +// Apply the mixin to the panel headings only +.panel-default > .panel-heading { .panel-heading-styles(@panel-default-heading-bg); } +.panel-primary > .panel-heading { .panel-heading-styles(@panel-primary-heading-bg); } +.panel-success > .panel-heading { .panel-heading-styles(@panel-success-heading-bg); } +.panel-info > .panel-heading { .panel-heading-styles(@panel-info-heading-bg); } +.panel-warning > .panel-heading { .panel-heading-styles(@panel-warning-heading-bg); } +.panel-danger > .panel-heading { .panel-heading-styles(@panel-danger-heading-bg); } + + +// +// Wells +// -------------------------------------------------- + +.well { + #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg); + border-color: darken(@well-bg, 10%); + @shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); + .box-shadow(@shadow); +} diff --git a/web/client/themes/default/bootstrap-theme/thumbnails.less b/web/client/themes/default/bootstrap-theme/thumbnails.less new file mode 100644 index 0000000000..0713e67d00 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/thumbnails.less @@ -0,0 +1,36 @@ +// +// Thumbnails +// -------------------------------------------------- + + +// Mixin and adjust the regular image class +.thumbnail { + display: block; + padding: @thumbnail-padding; + margin-bottom: @line-height-computed; + line-height: @line-height-base; + background-color: @thumbnail-bg; + border: 1px solid @thumbnail-border; + border-radius: @thumbnail-border-radius; + .transition(border .2s ease-in-out); + + > img, + a > img { + &:extend(.img-responsive); + margin-left: auto; + margin-right: auto; + } + + // Add a hover state for linked versions only + a&:hover, + a&:focus, + a&.active { + border-color: @link-color; + } + + // Image captions + .caption { + padding: @thumbnail-caption-padding; + color: @thumbnail-caption-color; + } +} diff --git a/web/client/themes/default/bootstrap-theme/tooltip.less b/web/client/themes/default/bootstrap-theme/tooltip.less new file mode 100644 index 0000000000..b48d63e07a --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/tooltip.less @@ -0,0 +1,101 @@ +// +// Tooltips +// -------------------------------------------------- + + +// Base class +.tooltip { + position: absolute; + z-index: @zindex-tooltip; + display: block; + // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element. + // So reset our font and text properties to avoid inheriting weird values. + .reset-text(); + font-size: @font-size-small; + + .opacity(0); + + &.in { .opacity(@tooltip-opacity); } + &.top { margin-top: -3px; padding: @tooltip-arrow-width 0; } + &.right { margin-left: 3px; padding: 0 @tooltip-arrow-width; } + &.bottom { margin-top: 3px; padding: @tooltip-arrow-width 0; } + &.left { margin-left: -3px; padding: 0 @tooltip-arrow-width; } +} + +// Wrapper for the tooltip content +.tooltip-inner { + max-width: @tooltip-max-width; + padding: 3px 8px; + color: @tooltip-color; + text-align: center; + background-color: @tooltip-bg; + border-radius: @border-radius-base; +} + +// Arrows +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1 +.tooltip { + &.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } + &.top-left .tooltip-arrow { + bottom: 0; + right: @tooltip-arrow-width; + margin-bottom: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } + &.top-right .tooltip-arrow { + bottom: 0; + left: @tooltip-arrow-width; + margin-bottom: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width 0; + border-top-color: @tooltip-arrow-color; + } + &.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0; + border-right-color: @tooltip-arrow-color; + } + &.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -@tooltip-arrow-width; + border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width; + border-left-color: @tooltip-arrow-color; + } + &.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -@tooltip-arrow-width; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; + } + &.bottom-left .tooltip-arrow { + top: 0; + right: @tooltip-arrow-width; + margin-top: -@tooltip-arrow-width; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; + } + &.bottom-right .tooltip-arrow { + top: 0; + left: @tooltip-arrow-width; + margin-top: -@tooltip-arrow-width; + border-width: 0 @tooltip-arrow-width @tooltip-arrow-width; + border-bottom-color: @tooltip-arrow-color; + } +} diff --git a/web/client/themes/default/bootstrap-theme/type.less b/web/client/themes/default/bootstrap-theme/type.less new file mode 100644 index 0000000000..0d4fee4848 --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/type.less @@ -0,0 +1,302 @@ +// +// Typography +// -------------------------------------------------- + + +// Headings +// ------------------------- + +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + font-family: @headings-font-family; + font-weight: @headings-font-weight; + line-height: @headings-line-height; + color: @headings-color; + + small, + .small { + font-weight: normal; + line-height: 1; + color: @headings-small-color; + } +} + +h1, .h1, +h2, .h2, +h3, .h3 { + margin-top: @line-height-computed; + margin-bottom: (@line-height-computed / 2); + + small, + .small { + font-size: 65%; + } +} +h4, .h4, +h5, .h5, +h6, .h6 { + margin-top: (@line-height-computed / 2); + margin-bottom: (@line-height-computed / 2); + + small, + .small { + font-size: 75%; + } +} + +h1, .h1 { font-size: @font-size-h1; } +h2, .h2 { font-size: @font-size-h2; } +h3, .h3 { font-size: @font-size-h3; } +h4, .h4 { font-size: @font-size-h4; } +h5, .h5 { font-size: @font-size-h5; } +h6, .h6 { font-size: @font-size-h6; } + + +// Body text +// ------------------------- + +p { + margin: 0 0 (@line-height-computed / 2); +} + +.lead { + margin-bottom: @line-height-computed; + font-size: floor((@font-size-base * 1.15)); + font-weight: 300; + line-height: 1.4; + + @media (min-width: @screen-sm-min) { + font-size: (@font-size-base * 1.5); + } +} + + +// Emphasis & misc +// ------------------------- + +// Ex: (12px small font / 14px base font) * 100% = about 85% +small, +.small { + font-size: floor((100% * @font-size-small / @font-size-base)); +} + +mark, +.mark { + background-color: @state-warning-bg; + padding: .2em; +} + +// Alignment +.text-left { text-align: left; } +.text-right { text-align: right; } +.text-center { text-align: center; } +.text-justify { text-align: justify; } +.text-nowrap { white-space: nowrap; } + +// Transformation +.text-lowercase { text-transform: lowercase; } +.text-uppercase { text-transform: uppercase; } +.text-capitalize { text-transform: capitalize; } + +// Contextual colors +.text-muted { + color: @text-muted; +} +.text-primary { + .text-emphasis-variant(@brand-primary); +} +.text-success { + .text-emphasis-variant(@state-success-text); +} +.text-info { + .text-emphasis-variant(@state-info-text); +} +.text-warning { + .text-emphasis-variant(@state-warning-text); +} +.text-danger { + .text-emphasis-variant(@state-danger-text); +} + +// Contextual backgrounds +// For now we'll leave these alongside the text classes until v4 when we can +// safely shift things around (per SemVer rules). +.bg-primary { + // Given the contrast here, this is the only class to have its color inverted + // automatically. + color: #fff; + .bg-variant(@brand-primary); +} +.bg-success { + .bg-variant(@state-success-bg); +} +.bg-info { + .bg-variant(@state-info-bg); +} +.bg-warning { + .bg-variant(@state-warning-bg); +} +.bg-danger { + .bg-variant(@state-danger-bg); +} + + +// Page header +// ------------------------- + +.page-header { + padding-bottom: ((@line-height-computed / 2) - 1); + margin: (@line-height-computed * 2) 0 @line-height-computed; + border-bottom: 1px solid @page-header-border-color; +} + + +// Lists +// ------------------------- + +// Unordered and Ordered lists +ul, +ol { + margin-top: 0; + margin-bottom: (@line-height-computed / 2); + ul, + ol { + margin-bottom: 0; + } +} + +// List options + +// Unstyled keeps list items block level, just removes default browser padding and list-style +.list-unstyled { + padding-left: 0; + list-style: none; +} + +// Inline turns list items into inline-block +.list-inline { + .list-unstyled(); + margin-left: -5px; + + > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + } +} + +// Description Lists +dl { + margin-top: 0; // Remove browser default + margin-bottom: @line-height-computed; +} +dt, +dd { + line-height: @line-height-base; +} +dt { + font-weight: bold; +} +dd { + margin-left: 0; // Undo browser default +} + +// Horizontal description lists +// +// Defaults to being stacked without any of the below styles applied, until the +// grid breakpoint is reached (default of ~768px). + +.dl-horizontal { + dd { + &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present + } + + @media (min-width: @dl-horizontal-breakpoint) { + dt { + float: left; + width: (@dl-horizontal-offset - 20); + clear: left; + text-align: right; + .text-overflow(); + } + dd { + margin-left: @dl-horizontal-offset; + } + } +} + + +// Misc +// ------------------------- + +// Abbreviations and acronyms +abbr[title], +// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted @abbr-border-color; +} +.initialism { + font-size: 90%; + .text-uppercase(); +} + +// Blockquotes +blockquote { + padding: (@line-height-computed / 2) @line-height-computed; + margin: 0 0 @line-height-computed; + font-size: @blockquote-font-size; + border-left: 5px solid @blockquote-border-color; + + p, + ul, + ol { + &:last-child { + margin-bottom: 0; + } + } + + // Note: Deprecated small and .small as of v3.1.0 + // Context: https://github.com/twbs/bootstrap/issues/11660 + footer, + small, + .small { + display: block; + font-size: 80%; // back to default font-size + line-height: @line-height-base; + color: @blockquote-small-color; + + &:before { + content: '\2014 \00A0'; // em dash, nbsp + } + } +} + +// Opposite alignment of blockquote +// +// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0. +.blockquote-reverse, +blockquote.pull-right { + padding-right: 15px; + padding-left: 0; + border-right: 5px solid @blockquote-border-color; + border-left: 0; + text-align: right; + + // Account for citation + footer, + small, + .small { + &:before { content: ''; } + &:after { + content: '\00A0 \2014'; // nbsp, em dash + } + } +} + +// Addresses +address { + margin-bottom: @line-height-computed; + font-style: normal; + line-height: @line-height-base; +} diff --git a/web/client/themes/default/bootstrap-theme/utilities.less b/web/client/themes/default/bootstrap-theme/utilities.less new file mode 100644 index 0000000000..7a8ca27a8f --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/utilities.less @@ -0,0 +1,55 @@ +// +// Utility classes +// -------------------------------------------------- + + +// Floats +// ------------------------- + +.clearfix { + .clearfix(); +} +.center-block { + .center-block(); +} +.pull-right { + float: right !important; +} +.pull-left { + float: left !important; +} + + +// Toggling content +// ------------------------- + +// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 +.hide { + display: none !important; +} +.show { + display: block !important; +} +.invisible { + visibility: hidden; +} +.text-hide { + .text-hide(); +} + + +// Hide from screenreaders and browsers +// +// Credit: HTML5 Boilerplate + +.hidden { + display: none !important; +} + + +// For Affix plugin +// ------------------------- + +.affix { + position: fixed; +} diff --git a/web/client/themes/default/bootstrap-theme/variables-default.less b/web/client/themes/default/bootstrap-theme/variables-default.less new file mode 100644 index 0000000000..03b54980ae --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/variables-default.less @@ -0,0 +1,869 @@ +// +// Variables +// -------------------------------------------------- + + +//== Colors +// +//## Gray and brand colors for use across Bootstrap. + +@gray-base: #000; +@gray-darker: lighten(@gray-base, 13.5%); // #222 +@gray-dark: lighten(@gray-base, 20%); // #333 +@gray: lighten(@gray-base, 33.5%); // #555 +@gray-light: lighten(@gray-base, 46.7%); // #777 +@gray-lighter: lighten(@gray-base, 93.5%); // #eee + +@brand-primary: darken(#428bca, 6.5%); // #337ab7 +@brand-success: #5cb85c; +@brand-info: #5bc0de; +@brand-warning: #f0ad4e; +@brand-danger: #d9534f; + + +//== Scaffolding +// +//## Settings for some of the most global styles. + +//** Background color for ``. +@body-bg: #fff; +//** Global text color on ``. +@text-color: @gray-dark; + +//** Global textual link color. +@link-color: @brand-primary; +//** Link hover color set via `darken()` function. +@link-hover-color: darken(@link-color, 15%); +//** Link hover decoration. +@link-hover-decoration: underline; + + +//== Typography +// +//## Font, line-height, and color for body text, headings, and more. + +@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; +@font-family-serif: Georgia, "Times New Roman", Times, serif; +//** Default monospace fonts for ``, ``, and `
`.
+@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
+@font-family-base:        @font-family-sans-serif;
+
+@font-size-base:          14px;
+@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
+@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
+
+@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
+@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
+@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
+@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
+@font-size-h5:            @font-size-base;
+@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
+
+//** Unit-less `line-height` for use in components like buttons.
+@line-height-base:        1.428571429; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
+
+//** By default, this inherits from the ``.
+@headings-font-family:    inherit;
+@headings-font-weight:    500;
+@headings-line-height:    1.1;
+@headings-color:          inherit;
+
+
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+//** Load fonts from this directory.
+@icon-font-path:          "../fonts/";
+//** File name for all font files.
+@icon-font-name:          "glyphicons-halflings-regular";
+//** Element ID within SVG icon file.
+@icon-font-svg-id:        "glyphicons_halflingsregular";
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+@padding-base-vertical:     6px;
+@padding-base-horizontal:   12px;
+
+@padding-large-vertical:    10px;
+@padding-large-horizontal:  16px;
+
+@padding-small-vertical:    5px;
+@padding-small-horizontal:  10px;
+
+@padding-xs-vertical:       1px;
+@padding-xs-horizontal:     5px;
+
+@line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
+@line-height-small:         1.5;
+
+@border-radius-base:        4px;
+@border-radius-large:       6px;
+@border-radius-small:       3px;
+
+//** Global color for active items (e.g., navs or dropdowns).
+@component-active-color:    #fff;
+//** Global background color for active items (e.g., navs or dropdowns).
+@component-active-bg:       @brand-primary;
+
+//** Width of the `border` for generating carets that indicate dropdowns.
+@caret-width-base:          4px;
+//** Carets increase slightly in size for larger components.
+@caret-width-large:         5px;
+
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for `
`s and ``s. +@table-cell-padding: 8px; +//** Padding for cells in `.table-condensed`. +@table-condensed-cell-padding: 5px; + +//** Default background color used for all tables. +@table-bg: transparent; +//** Background color used for `.table-striped`. +@table-bg-accent: #f9f9f9; +//** Background color used for `.table-hover`. +@table-bg-hover: #f5f5f5; +@table-bg-active: @table-bg-hover; + +//** Border color for table and cell borders. +@table-border-color: #ddd; + + +//== Buttons +// +//## For each of Bootstrap's buttons, define text, background and border color. + +@btn-font-weight: normal; + +@btn-default-color: #333; +@btn-default-bg: #fff; +@btn-default-border: #ccc; + +@btn-primary-color: #fff; +@btn-primary-bg: @brand-primary; +@btn-primary-border: darken(@btn-primary-bg, 5%); + +@btn-success-color: #fff; +@btn-success-bg: @brand-success; +@btn-success-border: darken(@btn-success-bg, 5%); + +@btn-info-color: #fff; +@btn-info-bg: @brand-info; +@btn-info-border: darken(@btn-info-bg, 5%); + +@btn-warning-color: #fff; +@btn-warning-bg: @brand-warning; +@btn-warning-border: darken(@btn-warning-bg, 5%); + +@btn-danger-color: #fff; +@btn-danger-bg: @brand-danger; +@btn-danger-border: darken(@btn-danger-bg, 5%); + +@btn-link-disabled-color: @gray-light; + +// Allows for customizing button radius independently from global border radius +@btn-border-radius-base: @border-radius-base; +@btn-border-radius-large: @border-radius-large; +@btn-border-radius-small: @border-radius-small; + + +//== Forms +// +//## + +//** `` background color +@input-bg: #fff; +//** `` background color +@input-bg-disabled: @gray-lighter; + +//** Text color for ``s +@input-color: @gray; +//** `` border color +@input-border: #ccc; + +// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4 +//** Default `.form-control` border radius +// This has no effect on ``s in CSS. +@input-border-radius: @border-radius-base; +//** Large `.form-control` border radius +@input-border-radius-large: @border-radius-large; +//** Small `.form-control` border radius +@input-border-radius-small: @border-radius-small; + +//** Border color for inputs on focus +@input-border-focus: #66afe9; + +//** Placeholder text color +@input-color-placeholder: #999; + +//** Default `.form-control` height +@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); +//** Large `.form-control` height +@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); +//** Small `.form-control` height +@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); + +//** `.form-group` margin +@form-group-margin-bottom: 15px; + +@legend-color: @gray-dark; +@legend-border-color: #e5e5e5; + +//** Background color for textual input addons +@input-group-addon-bg: @gray-lighter; +//** Border color for textual input addons +@input-group-addon-border-color: @input-border; + +//** Disabled cursor for form controls and buttons. +@cursor-disabled: not-allowed; + + +//== Dropdowns +// +//## Dropdown menu container and contents. + +//** Background for the dropdown menu. +@dropdown-bg: #fff; +//** Dropdown menu `border-color`. +@dropdown-border: rgba(0,0,0,.15); +//** Dropdown menu `border-color` **for IE8**. +@dropdown-fallback-border: #ccc; +//** Divider color for between dropdown items. +@dropdown-divider-bg: #e5e5e5; + +//** Dropdown link text color. +@dropdown-link-color: @gray-dark; +//** Hover color for dropdown links. +@dropdown-link-hover-color: darken(@gray-dark, 5%); +//** Hover background for dropdown links. +@dropdown-link-hover-bg: #f5f5f5; + +//** Active dropdown menu item text color. +@dropdown-link-active-color: @component-active-color; +//** Active dropdown menu item background color. +@dropdown-link-active-bg: @component-active-bg; + +//** Disabled dropdown menu item background color. +@dropdown-link-disabled-color: @gray-light; + +//** Text color for headers within dropdown menus. +@dropdown-header-color: @gray-light; + +//** Deprecated `@dropdown-caret-color` as of v3.1.0 +@dropdown-caret-color: #000; + + +//-- Z-index master list +// +// Warning: Avoid customizing these values. They're used for a bird's eye view +// of components dependent on the z-axis and are designed to all work together. +// +// Note: These variables are not generated into the Customizer. + +@zindex-navbar: 1000; +@zindex-dropdown: 1000; +@zindex-popover: 1060; +@zindex-tooltip: 1070; +@zindex-navbar-fixed: 1030; +@zindex-modal-background: 1040; +@zindex-modal: 1050; + + +//== Media queries breakpoints +// +//## Define the breakpoints at which your layout will change, adapting to different screen sizes. + +// Extra small screen / phone +//** Deprecated `@screen-xs` as of v3.0.1 +@screen-xs: 480px; +//** Deprecated `@screen-xs-min` as of v3.2.0 +@screen-xs-min: @screen-xs; +//** Deprecated `@screen-phone` as of v3.0.1 +@screen-phone: @screen-xs-min; + +// Small screen / tablet +//** Deprecated `@screen-sm` as of v3.0.1 +@screen-sm: 768px; +@screen-sm-min: @screen-sm; +//** Deprecated `@screen-tablet` as of v3.0.1 +@screen-tablet: @screen-sm-min; + +// Medium screen / desktop +//** Deprecated `@screen-md` as of v3.0.1 +@screen-md: 992px; +@screen-md-min: @screen-md; +//** Deprecated `@screen-desktop` as of v3.0.1 +@screen-desktop: @screen-md-min; + +// Large screen / wide desktop +//** Deprecated `@screen-lg` as of v3.0.1 +@screen-lg: 1200px; +@screen-lg-min: @screen-lg; +//** Deprecated `@screen-lg-desktop` as of v3.0.1 +@screen-lg-desktop: @screen-lg-min; + +// So media queries don't overlap when required, provide a maximum +@screen-xs-max: (@screen-sm-min - 1); +@screen-sm-max: (@screen-md-min - 1); +@screen-md-max: (@screen-lg-min - 1); + + +//== Grid system +// +//## Define your custom responsive grid. + +//** Number of columns in the grid. +@grid-columns: 12; +//** Padding between columns. Gets divided in half for the left and right. +@grid-gutter-width: 30px; +// Navbar collapse +//** Point at which the navbar becomes uncollapsed. +@grid-float-breakpoint: @screen-sm-min; +//** Point at which the navbar begins collapsing. +@grid-float-breakpoint-max: (@grid-float-breakpoint - 1); + + +//== Container sizes +// +//## Define the maximum width of `.container` for different screen sizes. + +// Small screen / tablet +@container-tablet: (720px + @grid-gutter-width); +//** For `@screen-sm-min` and up. +@container-sm: @container-tablet; + +// Medium screen / desktop +@container-desktop: (940px + @grid-gutter-width); +//** For `@screen-md-min` and up. +@container-md: @container-desktop; + +// Large screen / wide desktop +@container-large-desktop: (1140px + @grid-gutter-width); +//** For `@screen-lg-min` and up. +@container-lg: @container-large-desktop; + + +//== Navbar +// +//## + +// Basics of a navbar +@navbar-height: 50px; +@navbar-margin-bottom: @line-height-computed; +@navbar-border-radius: @border-radius-base; +@navbar-padding-horizontal: floor((@grid-gutter-width / 2)); +@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); +@navbar-collapse-max-height: 340px; + +@navbar-default-color: #777; +@navbar-default-bg: #f8f8f8; +@navbar-default-border: darken(@navbar-default-bg, 6.5%); + +// Navbar links +@navbar-default-link-color: #777; +@navbar-default-link-hover-color: #333; +@navbar-default-link-hover-bg: transparent; +@navbar-default-link-active-color: #555; +@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); +@navbar-default-link-disabled-color: #ccc; +@navbar-default-link-disabled-bg: transparent; + +// Navbar brand label +@navbar-default-brand-color: @navbar-default-link-color; +@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%); +@navbar-default-brand-hover-bg: transparent; + +// Navbar toggle +@navbar-default-toggle-hover-bg: #ddd; +@navbar-default-toggle-icon-bar-bg: #888; +@navbar-default-toggle-border-color: #ddd; + + +//=== Inverted navbar +// Reset inverted navbar basics +@navbar-inverse-color: lighten(@gray-light, 15%); +@navbar-inverse-bg: #222; +@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); + +// Inverted navbar links +@navbar-inverse-link-color: lighten(@gray-light, 15%); +@navbar-inverse-link-hover-color: #fff; +@navbar-inverse-link-hover-bg: transparent; +@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; +@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%); +@navbar-inverse-link-disabled-color: #444; +@navbar-inverse-link-disabled-bg: transparent; + +// Inverted navbar brand label +@navbar-inverse-brand-color: @navbar-inverse-link-color; +@navbar-inverse-brand-hover-color: #fff; +@navbar-inverse-brand-hover-bg: transparent; + +// Inverted navbar toggle +@navbar-inverse-toggle-hover-bg: #333; +@navbar-inverse-toggle-icon-bar-bg: #fff; +@navbar-inverse-toggle-border-color: #333; + + +//== Navs +// +//## + +//=== Shared nav styles +@nav-link-padding: 10px 15px; +@nav-link-hover-bg: @gray-lighter; + +@nav-disabled-link-color: @gray-light; +@nav-disabled-link-hover-color: @gray-light; + +//== Tabs +@nav-tabs-border-color: #ddd; + +@nav-tabs-link-hover-border-color: @gray-lighter; + +@nav-tabs-active-link-hover-bg: @body-bg; +@nav-tabs-active-link-hover-color: @gray; +@nav-tabs-active-link-hover-border-color: #ddd; + +@nav-tabs-justified-link-border-color: #ddd; +@nav-tabs-justified-active-link-border-color: @body-bg; + +//== Pills +@nav-pills-border-radius: @border-radius-base; +@nav-pills-active-link-hover-bg: @component-active-bg; +@nav-pills-active-link-hover-color: @component-active-color; + + +//== Pagination +// +//## + +@pagination-color: @link-color; +@pagination-bg: #fff; +@pagination-border: #ddd; + +@pagination-hover-color: @link-hover-color; +@pagination-hover-bg: @gray-lighter; +@pagination-hover-border: #ddd; + +@pagination-active-color: #fff; +@pagination-active-bg: @brand-primary; +@pagination-active-border: @brand-primary; + +@pagination-disabled-color: @gray-light; +@pagination-disabled-bg: #fff; +@pagination-disabled-border: #ddd; + + +//== Pager +// +//## + +@pager-bg: @pagination-bg; +@pager-border: @pagination-border; +@pager-border-radius: 15px; + +@pager-hover-bg: @pagination-hover-bg; + +@pager-active-bg: @pagination-active-bg; +@pager-active-color: @pagination-active-color; + +@pager-disabled-color: @pagination-disabled-color; + + +//== Jumbotron +// +//## + +@jumbotron-padding: 30px; +@jumbotron-color: inherit; +@jumbotron-bg: @gray-lighter; +@jumbotron-heading-color: inherit; +@jumbotron-font-size: ceil((@font-size-base * 1.5)); +@jumbotron-heading-font-size: ceil((@font-size-base * 4.5)); + + +//== Form states and alerts +// +//## Define colors for form feedback states and, by default, alerts. + +@state-success-text: #3c763d; +@state-success-bg: #dff0d8; +@state-success-border: darken(spin(@state-success-bg, -10), 5%); + +@state-info-text: #31708f; +@state-info-bg: #d9edf7; +@state-info-border: darken(spin(@state-info-bg, -10), 7%); + +@state-warning-text: #8a6d3b; +@state-warning-bg: #fcf8e3; +@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); + +@state-danger-text: #a94442; +@state-danger-bg: #f2dede; +@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); + + +//== Tooltips +// +//## + +//** Tooltip max width +@tooltip-max-width: 200px; +//** Tooltip text color +@tooltip-color: #fff; +//** Tooltip background color +@tooltip-bg: #000; +@tooltip-opacity: .9; + +//** Tooltip arrow width +@tooltip-arrow-width: 5px; +//** Tooltip arrow color +@tooltip-arrow-color: @tooltip-bg; + + +//== Popovers +// +//## + +//** Popover body background color +@popover-bg: #fff; +//** Popover maximum width +@popover-max-width: 276px; +//** Popover border color +@popover-border-color: rgba(0,0,0,.2); +//** Popover fallback border color +@popover-fallback-border-color: #ccc; + +//** Popover title background color +@popover-title-bg: darken(@popover-bg, 3%); + +//** Popover arrow width +@popover-arrow-width: 10px; +//** Popover arrow color +@popover-arrow-color: @popover-bg; + +//** Popover outer arrow width +@popover-arrow-outer-width: (@popover-arrow-width + 1); +//** Popover outer arrow color +@popover-arrow-outer-color: fadein(@popover-border-color, 5%); +//** Popover outer arrow fallback color +@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%); + + +//== Labels +// +//## + +//** Default label background color +@label-default-bg: @gray-light; +//** Primary label background color +@label-primary-bg: @brand-primary; +//** Success label background color +@label-success-bg: @brand-success; +//** Info label background color +@label-info-bg: @brand-info; +//** Warning label background color +@label-warning-bg: @brand-warning; +//** Danger label background color +@label-danger-bg: @brand-danger; + +//** Default label text color +@label-color: #fff; +//** Default text color of a linked label +@label-link-hover-color: #fff; + + +//== Modals +// +//## + +//** Padding applied to the modal body +@modal-inner-padding: 15px; + +//** Padding applied to the modal title +@modal-title-padding: 15px; +//** Modal title line-height +@modal-title-line-height: @line-height-base; + +//** Background color of modal content area +@modal-content-bg: #fff; +//** Modal content border color +@modal-content-border-color: rgba(0,0,0,.2); +//** Modal content border color **for IE8** +@modal-content-fallback-border-color: #999; + +//** Modal backdrop background color +@modal-backdrop-bg: #000; +//** Modal backdrop opacity +@modal-backdrop-opacity: .5; +//** Modal header border color +@modal-header-border-color: #e5e5e5; +//** Modal footer border color +@modal-footer-border-color: @modal-header-border-color; + +@modal-lg: 900px; +@modal-md: 600px; +@modal-sm: 300px; + + +//== Alerts +// +//## Define alert colors, border radius, and padding. + +@alert-padding: 15px; +@alert-border-radius: @border-radius-base; +@alert-link-font-weight: bold; + +@alert-success-bg: @state-success-bg; +@alert-success-text: @state-success-text; +@alert-success-border: @state-success-border; + +@alert-info-bg: @state-info-bg; +@alert-info-text: @state-info-text; +@alert-info-border: @state-info-border; + +@alert-warning-bg: @state-warning-bg; +@alert-warning-text: @state-warning-text; +@alert-warning-border: @state-warning-border; + +@alert-danger-bg: @state-danger-bg; +@alert-danger-text: @state-danger-text; +@alert-danger-border: @state-danger-border; + + +//== Progress bars +// +//## + +//** Background color of the whole progress component +@progress-bg: #f5f5f5; +//** Progress bar text color +@progress-bar-color: #fff; +//** Variable for setting rounded corners on progress bar. +@progress-border-radius: @border-radius-base; + +//** Default progress bar color +@progress-bar-bg: @brand-primary; +//** Success progress bar color +@progress-bar-success-bg: @brand-success; +//** Warning progress bar color +@progress-bar-warning-bg: @brand-warning; +//** Danger progress bar color +@progress-bar-danger-bg: @brand-danger; +//** Info progress bar color +@progress-bar-info-bg: @brand-info; + + +//== List group +// +//## + +//** Background color on `.list-group-item` +@list-group-bg: #fff; +//** `.list-group-item` border color +@list-group-border: #ddd; +//** List group border radius +@list-group-border-radius: @border-radius-base; + +//** Background color of single list items on hover +@list-group-hover-bg: #f5f5f5; +//** Text color of active list items +@list-group-active-color: @component-active-color; +//** Background color of active list items +@list-group-active-bg: @component-active-bg; +//** Border color of active list elements +@list-group-active-border: @list-group-active-bg; +//** Text color for content within active list items +@list-group-active-text-color: lighten(@list-group-active-bg, 40%); + +//** Text color of disabled list items +@list-group-disabled-color: @gray-light; +//** Background color of disabled list items +@list-group-disabled-bg: @gray-lighter; +//** Text color for content within disabled list items +@list-group-disabled-text-color: @list-group-disabled-color; + +@list-group-link-color: #555; +@list-group-link-hover-color: @list-group-link-color; +@list-group-link-heading-color: #333; + + +//== Panels +// +//## + +@panel-bg: #fff; +@panel-body-padding: 15px; +@panel-heading-padding: 10px 15px; +@panel-footer-padding: @panel-heading-padding; +@panel-border-radius: @border-radius-base; + +//** Border color for elements within panels +@panel-inner-border: #ddd; +@panel-footer-bg: #f5f5f5; + +@panel-default-text: @gray-dark; +@panel-default-border: #ddd; +@panel-default-heading-bg: #f5f5f5; + +@panel-primary-text: #fff; +@panel-primary-border: @brand-primary; +@panel-primary-heading-bg: @brand-primary; + +@panel-success-text: @state-success-text; +@panel-success-border: @state-success-border; +@panel-success-heading-bg: @state-success-bg; + +@panel-info-text: @state-info-text; +@panel-info-border: @state-info-border; +@panel-info-heading-bg: @state-info-bg; + +@panel-warning-text: @state-warning-text; +@panel-warning-border: @state-warning-border; +@panel-warning-heading-bg: @state-warning-bg; + +@panel-danger-text: @state-danger-text; +@panel-danger-border: @state-danger-border; +@panel-danger-heading-bg: @state-danger-bg; + + +//== Thumbnails +// +//## + +//** Padding around the thumbnail image +@thumbnail-padding: 4px; +//** Thumbnail background color +@thumbnail-bg: @body-bg; +//** Thumbnail border color +@thumbnail-border: #ddd; +//** Thumbnail border radius +@thumbnail-border-radius: @border-radius-base; + +//** Custom text color for thumbnail captions +@thumbnail-caption-color: @text-color; +//** Padding around the thumbnail caption +@thumbnail-caption-padding: 9px; + + +//== Wells +// +//## + +@well-bg: #f5f5f5; +@well-border: darken(@well-bg, 7%); + + +//== Badges +// +//## + +@badge-color: #fff; +//** Linked badge text color on hover +@badge-link-hover-color: #fff; +@badge-bg: @gray-light; + +//** Badge text color in active nav link +@badge-active-color: @link-color; +//** Badge background color in active nav link +@badge-active-bg: #fff; + +@badge-font-weight: bold; +@badge-line-height: 1; +@badge-border-radius: 10px; + + +//== Breadcrumbs +// +//## + +@breadcrumb-padding-vertical: 8px; +@breadcrumb-padding-horizontal: 15px; +//** Breadcrumb background color +@breadcrumb-bg: #f5f5f5; +//** Breadcrumb text color +@breadcrumb-color: #ccc; +//** Text color of current page in the breadcrumb +@breadcrumb-active-color: @gray-light; +//** Textual separator for between breadcrumb elements +@breadcrumb-separator: "/"; + + +//== Carousel +// +//## + +@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); + +@carousel-control-color: #fff; +@carousel-control-width: 15%; +@carousel-control-opacity: .5; +@carousel-control-font-size: 20px; + +@carousel-indicator-active-bg: #fff; +@carousel-indicator-border-color: #fff; + +@carousel-caption-color: #fff; + + +//== Close +// +//## + +@close-font-weight: bold; +@close-color: #000; +@close-text-shadow: 0 1px 0 #fff; + + +//== Code +// +//## + +@code-color: #c7254e; +@code-bg: #f9f2f4; + +@kbd-color: #fff; +@kbd-bg: #333; + +@pre-bg: #f5f5f5; +@pre-color: @gray-dark; +@pre-border-color: #ccc; +@pre-scrollable-max-height: 340px; + + +//== Type +// +//## + +//** Horizontal offset for forms and lists. +@component-offset-horizontal: 180px; +//** Text muted color +@text-muted: @gray-light; +//** Abbreviations and acronyms border color +@abbr-border-color: @gray-light; +//** Headings small color +@headings-small-color: @gray-light; +//** Blockquote small color +@blockquote-small-color: @gray-light; +//** Blockquote font size +@blockquote-font-size: (@font-size-base * 1.25); +//** Blockquote border color +@blockquote-border-color: @gray-lighter; +//** Page header border color +@page-header-border-color: @gray-lighter; +//** Width of horizontal description list titles +@dl-horizontal-offset: @component-offset-horizontal; +//** Point at which .dl-horizontal becomes horizontal +@dl-horizontal-breakpoint: @grid-float-breakpoint; +//** Horizontal line color. +@hr-border: @gray-lighter; diff --git a/web/client/themes/default/bootstrap-theme/variables.less b/web/client/themes/default/bootstrap-theme/variables.less new file mode 100644 index 0000000000..3d72f9205f --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/variables.less @@ -0,0 +1,866 @@ +// +// Variables +// -------------------------------------------------- + + +//== Colors +// + +@brand-primary: @ms2-primary-bg; +@brand-success: @ms2-success-bg; +@brand-info: @ms2-info-bg; +@brand-warning: @ms2-warning-bg; +@brand-danger: @ms2-danger-bg; + + +//== Scaffolding +// +//## Settings for some of the most global styles. + +//** Background color for ``. +@body-bg: @ms2-body-bg; +//** Global text color on ``. +@text-color: @ms2-text-color; + +//** Global textual link color. +@link-color: @brand-primary; +//** Link hover color set via `darken()` function. +@link-hover-color: darken(@link-color, 15%); +//** Link hover decoration. +@link-hover-decoration: underline; + + +//== Typography +// +//## Font, line-height, and color for body text, headings, and more. + +@font-family-sans-serif: @ms2-font-family-sans-serif; +@font-family-serif: @ms2-font-family-serif; +//** Default monospace fonts for ``, ``, and `
`.
+@font-family-monospace:   @ms2-font-family-monospace;
+@font-family-base:        @font-family-sans-serif;
+
+@font-size-base:          @ms2-font-size-base;
+@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
+@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
+
+@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
+@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
+@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
+@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
+@font-size-h5:            @font-size-base;
+@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px
+
+//** Unit-less `line-height` for use in components like buttons.
+@line-height-base:        1.428571429; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
+
+//** By default, this inherits from the ``.
+@headings-font-family:    inherit;
+@headings-font-weight:    500;
+@headings-line-height:    1.1;
+@headings-color:          inherit;
+
+
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+//** Load fonts from this directory.
+@icon-font-path:          "../fonts/";
+//** File name for all font files.
+@icon-font-name:          "glyphicons-halflings-regular";
+//** Element ID within SVG icon file.
+@icon-font-svg-id:        "glyphicons_halflingsregular";
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+@padding-base-vertical:     6px;
+@padding-base-horizontal:   12px;
+
+@padding-large-vertical:    10px;
+@padding-large-horizontal:  16px;
+
+@padding-small-vertical:    5px;
+@padding-small-horizontal:  10px;
+
+@padding-xs-vertical:       1px;
+@padding-xs-horizontal:     5px;
+
+@line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
+@line-height-small:         1.5;
+
+@border-radius-base:        @ms2-radius-base;
+@border-radius-large:       @ms2-radius-large;
+@border-radius-small:       @ms2-radius-small;
+
+//** Global color for active items (e.g., navs or dropdowns).
+@component-active-color:    @ms2-body-bg;
+//** Global background color for active items (e.g., navs or dropdowns).
+@component-active-bg:       @brand-primary;
+
+//** Width of the `border` for generating carets that indicate dropdowns.
+@caret-width-base:          4px;
+//** Carets increase slightly in size for larger components.
+@caret-width-large:         5px;
+
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for `
`s and ``s. +@table-cell-padding: 8px; +//** Padding for cells in `.table-condensed`. +@table-condensed-cell-padding: 5px; + +//** Default background color used for all tables. +@table-bg: transparent; +//** Background color used for `.table-striped`. +@table-bg-accent: darken(@ms2-body-bg, 4%); +//** Background color used for `.table-hover`. +@table-bg-hover: darken(@ms2-body-bg, 2%); +@table-bg-active: @table-bg-hover; + +//** Border color for table and cell borders. +@table-border-color: darken(@ms2-body-bg, 2%); + + +//== Buttons +// +//## For each of Bootstrap's buttons, define text, background and border color. + +@btn-font-weight: normal; + +@btn-disabled-color: @ms2-btn-disabled-color; +@btn-disabled-bg: @ms2-btn-disabled-bg; + +@btn-default-color: @ms2-default-bg; +@btn-default-bg: @ms2-body-bg; +@btn-default-border: @ms2-default-border; + +@btn-primary-color: @ms2-primary-color; +@btn-primary-bg: @brand-primary; +@btn-primary-border: @ms2-primary-border; + +@btn-success-color: @ms2-primary-color; +@btn-success-bg: @brand-success; +@btn-success-border: @ms2-success-border; + +@btn-info-color: @ms2-primary-color; +@btn-info-bg: @brand-info; +@btn-info-border: @ms2-info-border; + +@btn-warning-color: @ms2-primary-color; +@btn-warning-bg: @brand-warning; +@btn-warning-border: @ms2-warning-border; + +@btn-danger-color: @ms2-primary-color; +@btn-danger-bg: @brand-danger; +@btn-danger-border: @ms2-danger-border; + +@btn-link-disabled-color: @ms2-disabled-color; + +// Allows for customizing button radius independently from global border radius +@btn-border-radius-base: @border-radius-base; +@btn-border-radius-large: @border-radius-large; +@btn-border-radius-small: @border-radius-small; + + +//== Forms +// +//## + +//** `` background color +@input-bg: @ms2-body-bg; +//** `` background color +@input-bg-disabled: @ms2-disabled-bg; + +//** Text color for ``s +@input-color: @ms2-text-color; +//** `` border color +@input-border: lighten(@ms2-body-bg, 10%); + +// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4 +//** Default `.form-control` border radius +// This has no effect on ``s in CSS. +@input-border-radius: @border-radius-base; +//** Large `.form-control` border radius +@input-border-radius-large: @border-radius-large; +//** Small `.form-control` border radius +@input-border-radius-small: @border-radius-small; + +//** Border color for inputs on focus +@input-border-focus: lighten(@brand-primary, 18%); + +//** Placeholder text color +@input-color-placeholder: @ms2-placeholder-color; + +//** Default `.form-control` height +@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); +//** Large `.form-control` height +@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); +//** Small `.form-control` height +@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); + +//** `.form-group` margin +@form-group-margin-bottom: 15px; + +@legend-color: @ms2-text-color; +@legend-border-color: darken(@ms2-body-bg, 5%); + +//** Background color for textual input addons +@input-group-addon-bg: darken(@ms2-body-bg, 5%); +//** Border color for textual input addons +@input-group-addon-border-color: darken(@ms2-body-bg, 5%); + +//** Disabled cursor for form controls and buttons. +@cursor-disabled: default; // not-allowed; + + +//== Dropdowns +// +//## Dropdown menu container and contents. + +//** Background for the dropdown menu. +@dropdown-bg: @ms2-body-bg; +//** Dropdown menu `border-color`. +@dropdown-border: rgba(0,0,0,.15); +//** Dropdown menu `border-color` **for IE8**. +@dropdown-fallback-border: darken(@ms2-body-bg, 18%); +//** Divider color for between dropdown items. +@dropdown-divider-bg: darken(@ms2-body-bg, 12%); + +//** Dropdown link text color. +@dropdown-link-color: @ms2-primary-bg; +//** Hover color for dropdown links. +@dropdown-link-hover-color: darken(@dropdown-link-color, 5%); +//** Hover background for dropdown links. +@dropdown-link-hover-bg: darken(@ms2-body-bg, 5%); + +//** Active dropdown menu item text color. +@dropdown-link-active-color: @component-active-color; +//** Active dropdown menu item background color. +@dropdown-link-active-bg: @component-active-bg; + +//** Disabled dropdown menu item background color. +@dropdown-link-disabled-color: @ms2-disabled-bg; + +//** Text color for headers within dropdown menus. +@dropdown-header-color: @ms2-text-color; + +//** Deprecated `@dropdown-caret-color` as of v3.1.0 +@dropdown-caret-color: @ms2-text-color; + + +//-- Z-index master list +// +// Warning: Avoid customizing these values. They're used for a bird's eye view +// of components dependent on the z-axis and are designed to all work together. +// +// Note: These variables are not generated into the Customizer. + +@zindex-navbar: 1000; +@zindex-dropdown: 1000; +@zindex-popover: 1060; +@zindex-tooltip: 1070; +@zindex-navbar-fixed: 1030; +@zindex-modal-background: 1040; +@zindex-modal: 1050; + + +//== Media queries breakpoints +// +//## Define the breakpoints at which your layout will change, adapting to different screen sizes. + +// Extra small screen / phone +//** Deprecated `@screen-xs` as of v3.0.1 +@screen-xs: 480px; +//** Deprecated `@screen-xs-min` as of v3.2.0 +@screen-xs-min: @screen-xs; +//** Deprecated `@screen-phone` as of v3.0.1 +@screen-phone: @screen-xs-min; + +// Small screen / tablet +//** Deprecated `@screen-sm` as of v3.0.1 +@screen-sm: 768px; +@screen-sm-min: @screen-sm; +//** Deprecated `@screen-tablet` as of v3.0.1 +@screen-tablet: @screen-sm-min; + +// Medium screen / desktop +//** Deprecated `@screen-md` as of v3.0.1 +@screen-md: 992px; +@screen-md-min: @screen-md; +//** Deprecated `@screen-desktop` as of v3.0.1 +@screen-desktop: @screen-md-min; + +// Large screen / wide desktop +//** Deprecated `@screen-lg` as of v3.0.1 +@screen-lg: 1200px; +@screen-lg-min: @screen-lg; +//** Deprecated `@screen-lg-desktop` as of v3.0.1 +@screen-lg-desktop: @screen-lg-min; + +// So media queries don't overlap when required, provide a maximum +@screen-xs-max: (@screen-sm-min - 1); +@screen-sm-max: (@screen-md-min - 1); +@screen-md-max: (@screen-lg-min - 1); + + +//== Grid system +// +//## Define your custom responsive grid. + +//** Number of columns in the grid. +@grid-columns: 12; +//** Padding between columns. Gets divided in half for the left and right. +@grid-gutter-width: 30px; +// Navbar collapse +//** Point at which the navbar becomes uncollapsed. +@grid-float-breakpoint: @screen-sm-min; +//** Point at which the navbar begins collapsing. +@grid-float-breakpoint-max: (@grid-float-breakpoint - 1); + + +//== Container sizes +// +//## Define the maximum width of `.container` for different screen sizes. + +// Small screen / tablet +@container-tablet: (720px + @grid-gutter-width); +//** For `@screen-sm-min` and up. +@container-sm: @container-tablet; + +// Medium screen / desktop +@container-desktop: (940px + @grid-gutter-width); +//** For `@screen-md-min` and up. +@container-md: @container-desktop; + +// Large screen / wide desktop +@container-large-desktop: (1140px + @grid-gutter-width); +//** For `@screen-lg-min` and up. +@container-lg: @container-large-desktop; + + +//== Navbar +// +//## + +// Basics of a navbar +@navbar-height: 50px; +@navbar-margin-bottom: @line-height-computed; +@navbar-border-radius: @border-radius-base; +@navbar-padding-horizontal: floor((@grid-gutter-width / 2)); +@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); +@navbar-collapse-max-height: 340px; + +@navbar-default-color: lighten(@ms2-text-color, 5%); +@navbar-default-bg: darken(@ms2-body-bg, 2%); +@navbar-default-border: darken(@navbar-default-bg, 6.5%); + +// Navbar links +@navbar-default-link-color: lighten(@ms2-text-color, 6%); +@navbar-default-link-hover-color: @ms2-text-color; +@navbar-default-link-hover-bg: transparent; +@navbar-default-link-active-color: lighten(@ms2-text-color, 3%); +@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); +@navbar-default-link-disabled-color: @ms2-disabled-color; +@navbar-default-link-disabled-bg: transparent; + +// Navbar brand label +@navbar-default-brand-color: @navbar-default-link-color; +@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%); +@navbar-default-brand-hover-bg: transparent; + +// Navbar toggle +@navbar-default-toggle-hover-bg: darken(@ms2-body-bg, 8%); +@navbar-default-toggle-icon-bar-bg: darken(@ms2-body-bg, 25%); +@navbar-default-toggle-border-color: darken(@ms2-body-bg, 8%); + + +//=== Inverted navbar +// Reset inverted navbar basics +@navbar-inverse-color: @navbar-default-toggle-icon-bar-bg; +@navbar-inverse-bg: @ms2-text-color; +@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); + +// Inverted navbar links +@navbar-inverse-link-color: @navbar-default-toggle-icon-bar-bg; +@navbar-inverse-link-hover-color: @ms2-body-bg; +@navbar-inverse-link-hover-bg: transparent; +@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; +@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%); +@navbar-inverse-link-disabled-color: lighten(@ms2-text-color, 5%); +@navbar-inverse-link-disabled-bg: transparent; + +// Inverted navbar brand label +@navbar-inverse-brand-color: @navbar-inverse-link-color; +@navbar-inverse-brand-hover-color: @ms2-body-bg; +@navbar-inverse-brand-hover-bg: transparent; + +// Inverted navbar toggle +@navbar-inverse-toggle-hover-bg: @ms2-text-color; +@navbar-inverse-toggle-icon-bar-bg: @ms2-body-bg; +@navbar-inverse-toggle-border-color: @ms2-text-color; + + +//== Navs +// +//## + +//=== Shared nav styles +@nav-link-padding: 10px 15px; +@nav-link-hover-bg: @ms2-body-bg; + +@nav-disabled-link-color: @ms2-disabled-color; +@nav-disabled-link-hover-color: @ms2-disabled-color; + +//== Tabs +@nav-tabs-border-color: darken(@ms2-body-bg, 8%); + +@nav-tabs-link-hover-border-color: @ms2-body-bg; + +@nav-tabs-active-link-hover-bg: @body-bg; +@nav-tabs-active-link-hover-color: lighten(@ms2-text-color, 5%); +@nav-tabs-active-link-hover-border-color: darken(@ms2-body-bg, 8%); + +@nav-tabs-justified-link-border-color: darken(@ms2-body-bg, 8%); +@nav-tabs-justified-active-link-border-color: @body-bg; + +//== Pills +@nav-pills-border-radius: @border-radius-base; +@nav-pills-active-link-hover-bg: @component-active-bg; +@nav-pills-active-link-hover-color: @component-active-color; + + +//== Pagination +// +//## + +@pagination-color: @link-color; +@pagination-bg: @ms2-body-bg; +@pagination-border: darken(@ms2-body-bg, 5%); + +@pagination-hover-color: @link-hover-color; +@pagination-hover-bg: darken(@ms2-body-bg, 8%); +@pagination-hover-border: darken(@ms2-body-bg, 12%); + +@pagination-active-color: @ms2-primary-color; +@pagination-active-bg: @brand-primary; +@pagination-active-border: @brand-primary; + +@pagination-disabled-color: darken(@ms2-body-bg, 20%); +@pagination-disabled-bg: @ms2-body-bg; +@pagination-disabled-border: darken(@ms2-body-bg, 5%); + + +//== Pager +// +//## + +@pager-bg: @pagination-bg; +@pager-border: @pagination-border; +@pager-border-radius: 15px; + +@pager-hover-bg: @pagination-hover-bg; + +@pager-active-bg: @pagination-active-bg; +@pager-active-color: @pagination-active-color; + +@pager-disabled-color: @pagination-disabled-color; + + +//== Jumbotron +// +//## + +@jumbotron-padding: 30px; +@jumbotron-color: inherit; +@jumbotron-bg: darken(@ms2-body-bg, 8%); +@jumbotron-heading-color: inherit; +@jumbotron-font-size: ceil((@font-size-base * 1.5)); +@jumbotron-heading-font-size: ceil((@font-size-base * 4.5)); + + +//== Form states and alerts +// +//## Define colors for form feedback states and, by default, alerts. + +@state-success-text: desaturate(darken(@brand-success, 20%), 5%); +@state-success-bg: mix(@ms2-body-bg, lighten(@brand-success, 45%), 90%); +@state-success-border: darken(spin(@state-success-bg, -10), 5%); + +@state-info-text: desaturate(darken(@brand-info, 20%), 5%); +@state-info-bg: mix(@ms2-body-bg, lighten(@brand-info, 45%), 90%); +@state-info-border: darken(spin(@state-info-bg, -10), 7%); + +@state-warning-text: desaturate(darken(@brand-warning, 20%), 5%); +@state-warning-bg: mix(@ms2-body-bg, lighten(@brand-warning, 45%), 90%); +@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); + +@state-danger-text: desaturate(darken(@brand-danger, 20%), 5%); +@state-danger-bg: mix(@ms2-body-bg, lighten(@brand-danger, 45%), 90%); +@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); + + +//== Tooltips +// +//## + +//** Tooltip max width +@tooltip-max-width: 200px; +//** Tooltip text color +@tooltip-color: @ms2-tooltip-color; +//** Tooltip background color +@tooltip-bg: @ms2-tooltip-bg; +@tooltip-opacity: .9; + +//** Tooltip arrow width +@tooltip-arrow-width: 5px; +//** Tooltip arrow color +@tooltip-arrow-color: @tooltip-bg; + + +//== Popovers +// +//## + +//** Popover body background color +@popover-bg: @ms2-body-bg; +//** Popover maximum width +@popover-max-width: 276px; +//** Popover border color +@popover-border-color: rgba(0,0,0,.2); +//** Popover fallback border color +@popover-fallback-border-color: darken(@ms2-body-bg, 20%); + +//** Popover title background color +@popover-title-bg: darken(@popover-bg, 3%); + +//** Popover arrow width +@popover-arrow-width: 10px; +//** Popover arrow color +@popover-arrow-color: @popover-bg; + +//** Popover outer arrow width +@popover-arrow-outer-width: (@popover-arrow-width + 1); +//** Popover outer arrow color +@popover-arrow-outer-color: fadein(@popover-border-color, 5%); +//** Popover outer arrow fallback color +@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%); + + +//== Labels +// +//## + +//** Default label background color +@label-default-bg: @ms2-default-bg; +//** Primary label background color +@label-primary-bg: @brand-primary; +//** Success label background color +@label-success-bg: @brand-success; +//** Info label background color +@label-info-bg: @brand-info; +//** Warning label background color +@label-warning-bg: @brand-warning; +//** Danger label background color +@label-danger-bg: @brand-danger; + +//** Default label text color +@label-color: @ms2-primary-color; +//** Default text color of a linked label +@label-link-hover-color: @ms2-primary-color; + + +//== Modals +// +//## + +//** Padding applied to the modal body +@modal-inner-padding: 15px; + +//** Padding applied to the modal title +@modal-title-padding: 15px; +//** Modal title line-height +@modal-title-line-height: @line-height-base; + +//** Background color of modal content area +@modal-content-bg: @ms2-body-bg; +//** Modal content border color +@modal-content-border-color: rgba(0,0,0,.2); +//** Modal content border color **for IE8** +@modal-content-fallback-border-color: lighten(@ms2-body-bg, 5%); + +//** Modal backdrop background color +@modal-backdrop-bg: @ms2-body-bg; +//** Modal backdrop opacity +@modal-backdrop-opacity: .5; +//** Modal header border color +@modal-header-border-color: lighten(@ms2-body-bg, 5%); +@modal-header-color: @ms2-primary-color; /* new ms2 */ +@modal-header-bg: @ms2-primary-bg; /* new ms2 */ +//** Modal footer border color +@modal-footer-border-color: @modal-header-border-color; + +@modal-lg: 900px; +@modal-md: 290px; +@modal-sm: 290px; + + +//== Alerts +// +//## Define alert colors, border radius, and padding. + +@alert-padding: 15px; +@alert-border-radius: @border-radius-base; +@alert-link-font-weight: bold; + +@alert-success-bg: @state-success-bg; +@alert-success-text: @state-success-text; +@alert-success-border: @state-success-border; + +@alert-info-bg: @state-info-bg; +@alert-info-text: @state-info-text; +@alert-info-border: @state-info-border; + +@alert-warning-bg: @state-warning-bg; +@alert-warning-text: @state-warning-text; +@alert-warning-border: @state-warning-border; + +@alert-danger-bg: @state-danger-bg; +@alert-danger-text: @state-danger-text; +@alert-danger-border: @state-danger-border; + + +//== Progress bars +// +//## + +//** Background color of the whole progress component +@progress-bg: lighten(@ms2-body-bg, 2%); +//** Progress bar text color +@progress-bar-color: @ms2-text-color; +//** Variable for setting rounded corners on progress bar. +@progress-border-radius: @border-radius-base; + +//** Default progress bar color +@progress-bar-bg: @brand-primary; +//** Success progress bar color +@progress-bar-success-bg: @brand-success; +//** Warning progress bar color +@progress-bar-warning-bg: @brand-warning; +//** Danger progress bar color +@progress-bar-danger-bg: @brand-danger; +//** Info progress bar color +@progress-bar-info-bg: @brand-info; + + +//== List group +// +//## + +//** Background color on `.list-group-item` +@list-group-bg: @ms2-body-bg; +//** `.list-group-item` border color +@list-group-border: darken(@ms2-body-bg, 20%); +//** List group border radius +@list-group-border-radius: @border-radius-base; + +//** Background color of single list items on hover +@list-group-hover-bg: darken(@ms2-body-bg, 5%); +//** Text color of active list items +@list-group-active-color: @component-active-color; +//** Background color of active list items +@list-group-active-bg: @component-active-bg; +//** Border color of active list elements +@list-group-active-border: @list-group-active-bg; +//** Text color for content within active list items +@list-group-active-text-color: lighten(@list-group-active-bg, 40%); + +//** Text color of disabled list items +@list-group-disabled-color: @ms2-disabled-color; +//** Background color of disabled list items +@list-group-disabled-bg: @ms2-disabled-bg; +//** Text color for content within disabled list items +@list-group-disabled-text-color: @list-group-disabled-color; + +@list-group-link-color: lighten(@ms2-text-color, 5%); +@list-group-link-hover-color: @list-group-link-color; +@list-group-link-heading-color: @ms2-text-color; + + +//== Panels +// +//## + +@panel-bg: @ms2-body-bg; +@panel-body-padding: 15px; +@panel-heading-padding: 10px 15px; +@panel-footer-padding: @panel-heading-padding; +@panel-border-radius: @border-radius-base; + +//** Border color for elements within panels +@panel-inner-border: @ms2-body-bg; +@panel-footer-bg: @ms2-body-bg; + +@panel-default-text: @ms2-text-color; +@panel-default-border: darken(@ms2-body-bg, 5%); +@panel-default-heading-bg: @ms2-body-bg; + +@panel-primary-text: @ms2-primary-color; +@panel-primary-border: @brand-primary; +@panel-primary-heading-bg: @brand-primary; + +@panel-success-text: @state-success-text; +@panel-success-border: @state-success-border; +@panel-success-heading-bg: @state-success-bg; + +@panel-info-text: @state-info-text; +@panel-info-border: @state-info-border; +@panel-info-heading-bg: @state-info-bg; + +@panel-warning-text: @state-warning-text; +@panel-warning-border: @state-warning-border; +@panel-warning-heading-bg: @state-warning-bg; + +@panel-danger-text: @state-danger-text; +@panel-danger-border: @state-danger-border; +@panel-danger-heading-bg: @state-danger-bg; + + +//== Thumbnails +// +//## + +//** Padding around the thumbnail image +@thumbnail-padding: 4px; +//** Thumbnail background color +@thumbnail-bg: @body-bg; +//** Thumbnail border color +@thumbnail-border: darken(@body-bg, 1%); +//** Thumbnail border radius +@thumbnail-border-radius: @border-radius-base; + +//** Custom text color for thumbnail captions +@thumbnail-caption-color: @text-color; +//** Padding around the thumbnail caption +@thumbnail-caption-padding: 9px; + + +//== Wells +// +//## + +@well-bg: @ms2-body-bg; +@well-border: darken(@well-bg, 7%); + + +//== Badgess +// +//## + +@badge-color: @ms2-primary-color; +//** Linked badge text color on hover +@badge-link-hover-color: @ms2-primary-color; +@badge-bg: darken(@ms2-body-bg, 20%); + +//** Badge text color in active nav link +@badge-active-color: @link-color; +//** Badge background color in active nav link +@badge-active-bg: @ms2-body-bg; + +@badge-font-weight: bold; +@badge-line-height: 1; +@badge-border-radius: 10px; + + +//== Breadcrumbs +// +//## + +@breadcrumb-padding-vertical: 8px; +@breadcrumb-padding-horizontal: 15px; +//** Breadcrumb background color +@breadcrumb-bg: darken(@ms2-body-bg, 5%); +//** Breadcrumb text color +@breadcrumb-color: lighten(@ms2-text-color, 5%); +//** Text color of current page in the breadcrumb +@breadcrumb-active-color: lighten(@ms2-text-color, 10%); +//** Textual separator for between breadcrumb elements +@breadcrumb-separator: "/"; + + +//== Carousel +// +//## + +@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); + +@carousel-control-color: @ms2-info-bg; +@carousel-control-width: 15%; +@carousel-control-opacity: .5; +@carousel-control-font-size: 20px; + +@carousel-indicator-active-bg: @ms2-info-bg; +@carousel-indicator-border-color: @ms2-body-bg; + +@carousel-caption-color: #fff; + + +//== Close +// +//## + +@close-font-weight: bold; +@close-color: @ms2-primary-color; +@close-text-shadow: 0 1px 0 @ms2-primary-bg; + + +//== Code +// +//## + +@code-color: @ms2-code-color; +@code-bg: @ms2-body-bg; + +@kbd-color: @ms2-body-bg; +@kbd-bg: @ms2-text-color; + +@pre-bg: @ms2-body-bg; +@pre-color: darken(@ms2-text-color, 10%); +@pre-border-color: darken(@ms2-body-bg, 5%); +@pre-scrollable-max-height: 340px; + + +//== Type +// +//## + +//** Horizontal offset for forms and lists. +@component-offset-horizontal: 180px; +//** Text muted color +@text-muted: @ms2-disabled-color; +//** Abbreviations and acronyms border color +@abbr-border-color: lighten(@ms2-text-color, 10%); +//** Headings small color +@headings-small-color: lighten(@ms2-text-color, 10%); +//** Blockquote small color +@blockquote-small-color: lighten(@ms2-text-color, 10%); +//** Blockquote font size +@blockquote-font-size: (@font-size-base * 1.25); +//** Blockquote border color +@blockquote-border-color: @ms2-body-bg; +//** Page header border color +@page-header-border-color: @ms2-body-bg; +//** Width of horizontal description list titles +@dl-horizontal-offset: @component-offset-horizontal; +//** Point at which .dl-horizontal becomes horizontal +@dl-horizontal-breakpoint: @grid-float-breakpoint; +//** Horizontal line color. +@hr-border: darken(@ms2-body-bg, 10%); diff --git a/web/client/themes/default/bootstrap-theme/wells.less b/web/client/themes/default/bootstrap-theme/wells.less new file mode 100644 index 0000000000..15d072b0cd --- /dev/null +++ b/web/client/themes/default/bootstrap-theme/wells.less @@ -0,0 +1,29 @@ +// +// Wells +// -------------------------------------------------- + + +// Base class +.well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + background-color: @well-bg; + border: 1px solid @well-border; + border-radius: @border-radius-base; + .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); + blockquote { + border-color: #ddd; + border-color: rgba(0,0,0,.15); + } +} + +// Sizes +.well-lg { + padding: 24px; + border-radius: @border-radius-large; +} +.well-sm { + padding: 9px; + border-radius: @border-radius-small; +} diff --git a/web/client/themes/default/icons.less b/web/client/themes/default/icons.less new file mode 100644 index 0000000000..2452ef45a2 --- /dev/null +++ b/web/client/themes/default/icons.less @@ -0,0 +1,717 @@ +@charset "UTF-8"; + +@font-face { + font-family: "mapstore2"; + src:url("../default/icons/icons.eot"); + src:url("../default/icons/icons.eot?#iefix") format("embedded-opentype"), + url("../default/icons/icons.woff") format("woff"), + url("../default/icons/icons.ttf") format("truetype"), + url("../default/icons/icons.svg#mapstore2") format("svg"); + font-weight: normal; + font-style: normal; +} + +[data-icon]:before { + font-family: "mapstore2" !important; + content: attr(data-icon); + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + speak: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +[class^="glyphicon-"]:before, +[class*=" glyphicon-"]:before { + font-family: "mapstore2" !important; + font-style: normal !important; + font-weight: normal !important; + font-variant: normal !important; + text-transform: none !important; + speak: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.glyphicon-1-bearing:before { + content: "\006c"; +} +.glyphicon-1-bring-down:before { + content: "\006e"; +} +.glyphicon-1-bring-up:before { + content: "\006d"; +} +.glyphicon-1-close:before { + content: "\0055"; +} +.glyphicon-1-compass:before { + content: "\005c"; +} +.glyphicon-1-compass-alt:before { + content: "\005b"; +} +.glyphicon-1-drag:before { + content: "\0070"; +} +.glyphicon-1-group:before { + content: "\0045"; +} +.glyphicon-1-group-add:before { + content: "\0047"; +} +.glyphicon-1-group-cancel:before { + content: "\0048"; +} +.glyphicon-1-group-mod:before { + content: "\0046"; +} +.glyphicon-1-layer:before { + content: "\004e"; +} +.glyphicon-1-line:before { + content: "\004f"; +} +.glyphicon-1-map:before { + content: "\0049"; +} +.glyphicon-1-mark:before { + content: "\0050"; +} +.glyphicon-1-mark-alt:before { + content: "\0051"; +} +.glyphicon-1-measure-area:before { + content: "\0071"; +} +.glyphicon-1-measure-lenght:before { + content: "\0072"; +} +.glyphicon-1-measure-path:before { + content: "\0073"; +} +.glyphicon-menu-hamburger:before { + content: "\0052"; +} +.glyphicon-1-menu-manage:before { + content: "\0053"; +} +.glyphicon-option-horizontal:before { + content: "\e234"; +} +.glyphicon-1-pdf:before { + content: "\004a"; +} +.glyphicon-1-point:before { + content: "\0074"; +} +.glyphicon-1-poligon:before { + content: "\0075"; +} +.glyphicon-1-position-1:before { + content: "\0054"; +} +.glyphicon-1-screen-backward:before { + content: "\0059"; +} +.glyphicon-1-screen-forward:before { + content: "\005a"; +} +.glyphicon-1-social-fb:before { + content: "\0056"; +} +.glyphicon-1-social-tw:before { + content: "\0057"; +} +.glyphicon-1-stilo:before { + content: "\0058"; +} +.glyphicon-1-time-user:before { + content: "\0041"; +} +.glyphicon-1-user-add:before { + content: "\0042"; +} +.glyphicon-1-user-cancel:before { + content: "\0043"; +} +.glyphicon-1-user-mod:before { + content: "\0044"; +} +.glyphicon-1-ruler-alt-2:before { + content: "\0063"; +} +.glyphicon-1-ruler:before { + content: "\005f"; +} +.glyphicon-1-ruler-alt:before { + content: "\0060"; +} +.glyphicon-1-set-squadre:before { + content: "\0061"; +} +.glyphicon-1-compass-arrow:before { + content: "\005d"; +} +.glyphicon-1-raster:before { + content: "\005e"; +} +.glyphicon-1-vector:before { + content: "\007c"; +} +.glyphicon-1-vector-alt:before { + content: "\007d"; +} +.glyphicon-1-circle:before { + content: "\0068"; +} +.glyphicon-1-polygon:before { + content: "\0069"; +} +.glyphicon-1-line:before { + content: "\0067"; +} +.glyphicon-1-point:before { + content: "\0076"; +} +.glyphicon-1-circle-dashed:before { + content: "\0065"; +} +.glyphicon-1-polygon-dashed:before { + content: "\0066"; +} +.glyphicon-1-line-dashed:before { + content: "\006b"; +} +.glyphicon-1-point-dashed:before { + content: "\007b"; +} +.glyphicon-1-circle-add:before { + content: "\0077"; +} +.glyphicon-1-polygon-add:before { + content: "\0078"; +} +.glyphicon-1-line-add:before { + content: "\0079"; +} +.glyphicon-1-point-add:before { + content: "\007a"; +} +.glyphicon-align-center:before { + content: "\e053"; +} +.glyphicon-align-justify:before { + content: "\e055"; +} +.glyphicon-align-left:before { + content: "\e052"; +} +.glyphicon-align-right:before { + content: "\e054"; +} +.glyphicon-asterisk:before { + content: "\002a"; +} +.glyphicon-arrow-down:before { + content: "\e094"; +} +.glyphicon-arrow-left:before { + content: "\e091"; +} +.glyphicon-arrow-right:before { + content: "\e092"; +} +.glyphicon-arrow-up:before { + content: "\e093"; +} +.glyphicon-backward:before { + content: "\e071"; +} +.glyphicon-ban-circle:before { + content: "\e090"; +} +.glyphicon-barcode:before { + content: "\e040"; +} +.glyphicon-bold:before { + content: "\e048"; +} +.glyphicon-camera:before { + content: "\e046"; +} +.glyphicon-chevron-down:before { + content: "\e259"; +} +.glyphicon-chevron-left:before { + content: "\e257"; +} +.glyphicon-chevron-right:before { + content: "\e258"; +} +.glyphicon-chevron-up:before { + content: "\e260"; +} +.glyphicon-circle-arrow-down:before { + content: "\e134"; +} +.glyphicon-circle-arrow-left:before { + content: "\e132"; +} +.glyphicon-circle-arrow-right:before { + content: "\e131"; +} +.glyphicon-circle-arrow-up:before { + content: "\e133"; +} +.glyphicon-cloud:before { + content: "\2601"; +} +.glyphicon-cloud-download:before { + content: "\e197"; +} +.glyphicon-cloud-upload:before { + content: "\e198"; +} +.glyphicon-cog:before { + content: "\e019"; +} +.glyphicon-collapse-down:before { + content: "\e159"; +} +.glyphicon-collapse-up:before { + content: "\e160"; +} +.glyphicon-comment:before { + content: "\e111"; +} +.glyphicon-dashboard:before { + content: "\e141"; +} +.glyphicon-download:before { + content: "\e026"; +} +.glyphicon-download-alt:before { + content: "\e166"; +} +.glyphicon-edit:before { + content: "\e065"; +} +.glyphicon-envelope:before { + content: "\2709"; +} +.glyphicon-export:before { + content: "\e170"; +} +.glyphicon-fast-backward:before { + content: "\e070"; +} +.glyphicon-fast-forward:before { + content: "\e076"; +} +.glyphicon-file:before { + content: "\e022"; +} +.glyphicon-filter:before { + content: "\e138"; +} +.glyphicon-flag:before { + content: "\e034"; +} +.glyphicon-flash:before { + content: "\e162"; +} +.glyphicon-floppy-open:before { + content: "\e176"; +} +.glyphicon-floppy-remove:before { + content: "\e174"; +} +.glyphicon-floppy-save:before { + content: "\e175"; +} +.glyphicon-floppy-saved:before { + content: "\e173"; +} +.glyphicon-font:before { + content: "\e047"; +} +.glyphicon-forward:before { + content: "\e075"; +} +.glyphicon-1-full-screen:before { + content: "\e140"; +} +.glyphicon-globe:before { + content: "\e135"; +} +.glyphicon-hand-down:before { + content: "\e130"; +} +.glyphicon-hand-left:before { + content: "\e128"; +} +.glyphicon-hand-right:before { + content: "\e127"; +} +.glyphicon-hand-up:before { + content: "\e129"; +} +.glyphicon-hdd:before { + content: "\e121"; +} +.glyphicon-heart:before { + content: "\e005"; +} +.glyphicon-home:before { + content: "\e021"; +} +.glyphicon-import:before { + content: "\e169"; +} +.glyphicon-inbox:before { + content: "\e028"; +} +.glyphicon-info-sign:before { + content: "\e086"; +} +.glyphicon-italic:before { + content: "\e049"; +} +.glyphicon-leaf:before { + content: "\e103"; +} +.glyphicon-link:before { + content: "\e144"; +} +.glyphicon-list:before { + content: "\e012"; +} +.glyphicon-log-in:before { + content: "\e161"; +} +.glyphicon-log-out:before { + content: "\e163"; +} +.glyphicon-magnet:before { + content: "\e112"; +} +.glyphicon-map-marker:before { + content: "\e062"; +} +.glyphicon-minus:before { + content: "\2212"; +} +.glyphicon-minus-sign:before { + content: "\e082"; +} +.glyphicon-move:before { + content: "\e068"; +} +.glyphicon-new-window:before { + content: "\e164"; +} +.glyphicon-off:before { + content: "\e017"; +} +.glyphicon-ok:before { + content: "\e013"; +} +.glyphicon-ok-circle:before { + content: "\e089"; +} +.glyphicon-ok-sign:before { + content: "\e084"; +} +.glyphicon-open:before { + content: "\e167"; +} +.glyphicon-paperclip:before { + content: "\e142"; +} +.glyphicon-pause:before { + content: "\e073"; +} +.glyphicon-pencil:before { + content: "\270f"; +} +.glyphicon-phone:before { + content: "\e145"; +} +.glyphicon-picture:before { + content: "\e060"; +} +.glyphicon-plane:before { + content: "\e171"; +} +.glyphicon-play:before { + content: "\e072"; +} +.glyphicon-play-circle:before { + content: "\e029"; +} +.glyphicon-plus:before { + content: "\002b"; +} +.glyphicon-plus-sign:before { + content: "\e081"; +} +.glyphicon-print:before { + content: "\e045"; +} +.glyphicon-pushpin:before { + content: "\e146"; +} +.glyphicon-qrcode:before { + content: "\e039"; +} +.glyphicon-question-sign:before { + content: "\e085"; +} +.glyphicon-random:before { + content: "\e110"; +} +.glyphicon-record:before { + content: "\e165"; +} +.glyphicon-refresh:before { + content: "\e031"; +} +.glyphicon-remove:before { + content: "\e014"; +} +.glyphicon-remove-circle:before { + content: "\e088"; +} +.glyphicon-remove-sign:before { + content: "\e083"; +} +.glyphicon-repeat:before { + content: "\e030"; +} +.glyphicon-resize-full:before { + content: "\e096"; +} +.glyphicon-resize-horizontal:before { + content: "\e120"; +} +.glyphicon-resize-small:before { + content: "\e097"; +} +.glyphicon-resize-vertical:before { + content: "\e119"; +} +.glyphicon-retweet:before { + content: "\e115"; +} +.glyphicon-road:before { + content: "\e024"; +} +.glyphicon-save:before { + content: "\e166"; +} +.glyphicon-screenshot:before { + content: "\e087"; +} +.glyphicon-search:before { + content: "\e003"; +} +.glyphicon-send:before { + content: "\e171"; +} +.glyphicon-share:before { + content: "\004c"; +} +.glyphicon-share-alt:before { + content: "\004b"; +} +.glyphicon-shopping-cart:before { + content: "\e116"; +} +.glyphicon-signal:before { + content: "\e018"; +} +.glyphicon-sort:before { + content: "\e150"; +} +.glyphicon-sort-by-alphabet:before { + content: "\e151"; +} +.glyphicon-sort-by-alphabet-alt:before { + content: "\e152"; +} +.glyphicon-sort-by-attributes:before { + content: "\e155"; +} +.glyphicon-sort-by-attributes-alt:before { + content: "\e156"; +} +.glyphicon-star:before { + content: "\e006"; +} +.glyphicon-star-empty:before { + content: "\e007"; +} +.glyphicon-stats:before { + content: "\e185"; +} +.glyphicon-step-backward:before { + content: "\e069"; +} +.glyphicon-step-forward:before { + content: "\e077"; +} +.glyphicon-stop:before { + content: "\e074"; +} +.glyphicon-tag:before { + content: "\e041"; +} +.glyphicon-tags:before { + content: "\e042"; +} +.glyphicon-tasks:before { + content: "\e137"; +} +.glyphicon-text-height:before { + content: "\e050"; +} +.glyphicon-text-width:before { + content: "\e051"; +} +.glyphicon-th-list:before { + content: "\e012"; +} +.glyphicon-thumbs-down:before { + content: "\e126"; +} +.glyphicon-thumbs-up:before { + content: "\e125"; +} +.glyphicon-time:before { + content: "\e023"; +} +.glyphicon-tint:before { + content: "\e064"; +} +.glyphicon-transfer:before { + content: "\e178"; +} +.glyphicon-unchecked:before { + content: "\e157"; +} +.glyphicon-upload:before { + content: "\e027"; +} +.glyphicon-usd:before { + content: "\e148"; +} +.glyphicon-user:before { + content: "\e008"; +} +.glyphicon-warning-sign:before { + content: "\e107"; +} +.glyphicon-wrench:before { + content: "\e136"; +} +.glyphicon-zoom-in:before { + content: "\e015"; +} +.glyphicon-zoom-out:before { + content: "\e016"; +} +.glyphicon-trash:before { + content: "\e020"; +} +.glyphicon-saved:before { + content: "\e168"; +} +.glyphicon-1-catalog:before { + content: "\006a"; +} +.glyphicon-exclamation-sign:before { + content: "\e101"; +} +.glyphicon-expand:before { + content: "\e158"; +} +.glyphicon-lock:before { + content: "\e033"; +} +.glyphicon-list-alt:before { + content: "\e032"; +} +.glyphicon-check:before { + content: "\e067"; +} +.glyphicon-floppy-disk:before { + content: "\e172"; +} +.glyphicon-1-max-size:before { + content: "\004d"; +} +.glyphicon-adjust:before { + content: "\e063"; +} +.glyphicon-calendar:before { + content: "\e109"; +} +.glyphicon-folder-close:before { + content: "\e117"; +} +.glyphicon-folder-open:before { + content: "\e118"; +} +.glyphicon-text-background:before { + content: "\e243"; +} +.glyphicon-scissors:before { + content: "\e226"; +} +.glyphicon-text-colour:before { + content: "\e242"; +} +.glyphicon-paste:before { + content: "\e206"; +} +.glyphicon-level-up:before { + content: "\e204"; +} +.glyphicon-hourglass:before { + content: "\e231b"; +} +.glyphicon-duplicate:before { + content: "\e224"; +} +.glyphicon-copy:before { + content: "\e205"; +} +.glyphicon-compressed:before { + content: "\e181"; +} +.glyphicon-bookmark:before { + content: "\e044"; +} +.glyphicon-book:before { + content: "\e043"; +} +.glyphicon-alert:before { + content: "\e209"; +} +.glyphicon-th:before { + content: "\e011"; +} +.glyphicon-th-large:before { + content: "\e010"; +} +.glyphicon-eye-open:before { + content: "\e105"; +} +.glyphicon-eye-close:before { + content: "\e106"; +} diff --git a/web/client/themes/default/icons/icons.eot b/web/client/themes/default/icons/icons.eot new file mode 100644 index 0000000000..4e4cf60a2f Binary files /dev/null and b/web/client/themes/default/icons/icons.eot differ diff --git a/web/client/themes/default/icons/icons.svg b/web/client/themes/default/icons/icons.svg new file mode 100644 index 0000000000..675394f78b --- /dev/null +++ b/web/client/themes/default/icons/icons.svg @@ -0,0 +1,1126 @@ + + + + +Created by FontForge 20161013 at Sun Mar 12 16:48:47 2017 + By stefano,,, + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/client/themes/default/icons/icons.ttf b/web/client/themes/default/icons/icons.ttf new file mode 100644 index 0000000000..5ae93b406c Binary files /dev/null and b/web/client/themes/default/icons/icons.ttf differ diff --git a/web/client/themes/default/icons/icons.woff b/web/client/themes/default/icons/icons.woff new file mode 100644 index 0000000000..e675b2d825 Binary files /dev/null and b/web/client/themes/default/icons/icons.woff differ diff --git a/web/client/themes/default/img/toggle.png b/web/client/themes/default/img/toggle.png new file mode 100644 index 0000000000..ce0edd8ff8 Binary files /dev/null and b/web/client/themes/default/img/toggle.png differ diff --git a/web/client/themes/default/img/toggle.svg b/web/client/themes/default/img/toggle.svg new file mode 100644 index 0000000000..75138bd163 --- /dev/null +++ b/web/client/themes/default/img/toggle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/client/themes/default/mapstore2-theme/button.less b/web/client/themes/default/mapstore2-theme/button.less new file mode 100644 index 0000000000..7ace7ab0f3 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/button.less @@ -0,0 +1,19 @@ +/* square button */ + +button:focus { + outline: 0 !important; +} + +.no-border { + border: none; +} + +.square-button { + height: @ms2-square-btn-side; + width: @ms2-square-btn-side; + padding: 0; +} + +.square-button .glyphicon { + font-size: @ms2-square-btn-icon-size; +} diff --git a/web/client/themes/default/mapstore2-theme/draggable.less b/web/client/themes/default/mapstore2-theme/draggable.less new file mode 100644 index 0000000000..610db9a102 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/draggable.less @@ -0,0 +1,8 @@ + +.react-draggable { + background-color: @ms2-body-bg !important; +} + +.react-draggable .draggable-header { + cursor: move; +} diff --git a/web/client/themes/default/mapstore2-theme/drawer-menu.less b/web/client/themes/default/mapstore2-theme/drawer-menu.less new file mode 100644 index 0000000000..bfbedbc7c6 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/drawer-menu.less @@ -0,0 +1,50 @@ + +/* drawer menu */ +.nav-menu { + background-color: @ms2-body-bg; +} + +#mapstore-drawermenu .navHeader > .glyphicon-1-close { + float: left; + display: block; + height: @ms2-square-btn-side; + width: @ms2-square-btn-side; + padding: @ms2-square-btn-padding/2 0 0 @ms2-square-btn-padding; + font-size: @ms2-square-btn-icon-size; +} + +#mapstore-drawermenu #mapstore-layers .toc-default-layer .glyphicon { + color: @ms2-primary-bg; +} + +#mapstore-drawermenu #mapstore-layers .toc-group-title { + background-color: @ms2-body-bg; + padding: 8px 4px 8px 4px; +} + +#mapstore-drawermenu #mapstore-layers .toc-group-title .glyphicon, +#mapstore-drawermenu #mapstore-layers .glyphicon-eye-open, +#mapstore-drawermenu #mapstore-layers .glyphicon-eye-close, { + color: @ms2-primary-bg; + font-size: @ms2-square-btn-icon-size-md; +} + +#mapstore-drawermenu #mapstore-layers .toc-default-group > .toc-layer-tool.visibility-check { + text-align: center; + display: block; + padding: 8px 4px 8px 4px; + margin: 0 4px 0 4px; +} + +#mapstore-drawermenu #mapstore-layers .group-expanded, +.group-collapsed { + padding: 5px 0 10px 0; + border-bottom: 1px solid darken(@ms2-body-bg, 5%); +} + + +.toc-layer-tool { + margin: 0 !important; + text-align: center; + font-size: @ms2-square-btn-icon-size-md; +} diff --git a/web/client/themes/default/mapstore2-theme/dropdown-menu.less b/web/client/themes/default/mapstore2-theme/dropdown-menu.less new file mode 100644 index 0000000000..6c5f7e2f02 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/dropdown-menu.less @@ -0,0 +1,37 @@ + +/* dropdown-menu */ +.dropdown-menu .dropdown-header { + background-color: @ms2-primary-bg; + color: @ms2-primary-color; + padding: 15px; + font-weight: bold; +} + +.dropdown-menu .glyphicon { + font-size: @ms2-square-btn-icon-size-md * 1.2; + margin-right: 12px; + color: @ms2-primary-bg; +} + +.navbar-dx .dropdown-menu .dropdown-header, +.navbar-home .dropdown-menu .dropdown-header { + background-color: @ms2-primary-bg; +} + +.navbar-dx .dropdown-menu, +.navbar-home .dropdown-menu { + text-transform: uppercase; + padding: 0; +} + +.navbar-dx .dropdown-menu li, +.navbar-home .dropdown-menu li { + border-bottom: 1px solid darken(@ms2-body-bg, 2%); +} + +.navbar-dx .dropdown-menu li a, +.navbar-home .dropdown-menu li a { + max-height: @ms2-square-btn-side; + color: @ms2-text-color; + padding: 15px; +} diff --git a/web/client/themes/default/mapstore2-theme/dropzone.less b/web/client/themes/default/mapstore2-theme/dropzone.less new file mode 100644 index 0000000000..606d017ea1 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/dropzone.less @@ -0,0 +1,83 @@ + +/* dropzone image*/ +.dropzone.alert.alert-info { + cursor: pointer; +} + +.dropzone-thumbnail-container .alert { + overflow: hidden; + position: relative; + height: 180px; + margin: 0; + padding: 0; + border-color: lighten(@ms2-body-bg, 5%); +} + +.dropzone-thumbnail-container div.dropzone-content-image-added { + transition: all 0.2s ease-in; +} + +.dropzone .dropzone-content-image-added { + visibility: hidden; + padding-top: 40px; + color: @ms2-body-bg; + text-shadow: rgba(0,0,0,.7) 2px 2px 2px; + vertical-align: middle; + top: 0; + left: 0; + width: 100%; + height: 100%; + text-align: center; + position: absolute; + width: 100%; +} + +.dropzone:hover .dropzone-content-image-added { + visibility: visible; + transition: all 0.2s ease-in; + z-index: 2; + background: rgba(0,0,0,.7); + font-size: large; +} + +.dropzone .dropzone-content-image { + padding-top: 40px; + transition: all 0.2s ease-in; + font-size: normal; + text-align: center; +} + +.dropzone:hover .dropzone-content-image { + transition: all 0.2s ease-in; + font-size: large; +} + +.dropzone-thumbnail-container img { + width: 100%; + height: auto; +} + +.dropzone-remove { + top: 0; + right: 0; + z-index: 5; + position: absolute; + font-size: x-large; +} + +.dropzone:hover .dropzone-remove span { + color: @ms2-body-bg; +} + +.dropzone-remove span { + color: transparent; +} + +.dropzone-remove span:hover { + color: @ms2-danger-bg !important; +} + +.dropzone-errorBox { + margin-bottom: 10px; + padding: 15px; +} diff --git a/web/client/themes/default/mapstore2-theme/feature-grid.less b/web/client/themes/default/mapstore2-theme/feature-grid.less new file mode 100644 index 0000000000..54083bef76 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/feature-grid.less @@ -0,0 +1,38 @@ + +/* feauture grid */ +.ag-fresh .ag-header, +.ag-fresh .ag-tool-panel-container { + background: @ms2-primary-bg !important; + color: @ms2-primary-color; + font-family: @ms2-font-family-sans-serif; +} + +.ag-fresh .ag-tool-panel-container .ag-list-selection { + color: #000000; +} + +.ag-fresh .ag-paging-button { + color: @ms2-primary-bg; + background-color: @ms2-body-bg; + border: @ms2-primary-bg 1px solid; +} + +.ag-fresh .ag-paging-page-summary-panel { + color: @ms2-primary-bg; +} + +.ag-fresh .ag-paging-panel { + background-color: @ms2-body-bg; +} + +.ag-fresh .ag-body { + background-color: @ms2-body-bg !important; +} + +.ag-fresh .ag-body .ag-row-even { + background-color: @ms2-body-bg !important; +} + +.ag-fresh .ag-body .ag-row-odd { + background-color: darken(@ms2-body-bg,5%) !important; +} diff --git a/web/client/themes/default/mapstore2-theme/gridcard.less b/web/client/themes/default/mapstore2-theme/gridcard.less new file mode 100644 index 0000000000..af105ffe83 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/gridcard.less @@ -0,0 +1,23 @@ + +/* gridcard */ +.gridcard-tools { + height: @ms2-grid-btn-side !important; +} + +.gridcard-button { + height: @ms2-grid-btn-side; + width: @ms2-grid-btn-side; + padding: 0 @ms2-grid-btn-padding 0 @ms2-grid-btn-padding; +} + +.gridcard-button .glyphicon { + font-size: @ms2-grid-btn-icon-size; +} + +.gridcard-title { + color: @ms2-primary-color; +} + +.map-thumb-description { + color: #000000; +} diff --git a/web/client/themes/default/mapstore2-theme/help.less b/web/client/themes/default/mapstore2-theme/help.less new file mode 100644 index 0000000000..8f14061392 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/help.less @@ -0,0 +1,10 @@ +/* help badge */ +#helpbadge-scaleBox { + background-color: @ms2-primary-color; + color: @ms2-primary-bg; +} + +#mapstore-navbar #helpbadge-search-help { + background-color: @ms2-primary-color; + color: @ms2-primary-bg; +} diff --git a/web/client/themes/default/mapstore2-theme/home.less b/web/client/themes/default/mapstore2-theme/home.less new file mode 100644 index 0000000000..545fddf0c9 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/home.less @@ -0,0 +1,14 @@ +/* home */ + +#mapstore-navbar #mapstore-langselector { + margin-top: floor((@ms2-square-btn-side - 30) / 2) !important; +} + +.pagination-toolbar { + border-top: thin solid darken(@ms2-body-bg, 10%) !important; +} + +.ms-footer { + border-top: solid 1px @ms2-primary-bg !important; + color: @ms2-primary-bg !important; +} diff --git a/web/client/themes/default/mapstore2-theme/loading.less b/web/client/themes/default/mapstore2-theme/loading.less new file mode 100644 index 0000000000..064f6018b9 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/loading.less @@ -0,0 +1,14 @@ +/* loading circle */ +.ms2-loading { + background-color: @ms2-primary-bg !important; + border: 2px solid @ms2-primary-bg !important; +} + +.ms2-loading .circle-wrapper .circle:before { + background-color: @ms2-primary-color !important; +} + +div#mapstore-globalspinner { + width: @ms2-square-btn-side !important; + height: @ms2-square-btn-side !important; +} diff --git a/web/client/themes/default/mapstore2-theme/login-page.less b/web/client/themes/default/mapstore2-theme/login-page.less new file mode 100644 index 0000000000..de733842fe --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/login-page.less @@ -0,0 +1,24 @@ + +/* login page */ +.group-thumb, +.user-thumb { + background-color: darken(@ms2-body-bg, 4%); +} + +.user-status { + width: @ms2-grid-btn-side + @ms2-grid-btn-padding * 2; + text-align: center; +} + +.user-status .glyphicon { + font-size: @ms2-grid-btn-icon-size; + padding: 0 0 @ms2-grid-btn-padding 0; +} + +.user-status .glyphicon-ok-sign { + color: @ms2-success-bg; +} + +.user-status .glyphicon-minus-sign { + color: @ms2-danger-bg; +} diff --git a/web/client/themes/default/mapstore2-theme/map-controls.less b/web/client/themes/default/mapstore2-theme/map-controls.less new file mode 100644 index 0000000000..4315c658c5 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/map-controls.less @@ -0,0 +1,87 @@ +/* minimap style */ +.leaflet-control-minimap { + border: solid @ms2-primary-bg 4px !important; +} + +.leaflet-control-minimap a { + background-color: @ms2-primary-bg !important; +} + +.leaflet-control-minimap-toggle-display { + background-image: url("../img/toggle.svg") !important; +} + +.leaflet-oldie .leaflet-control-minimap-toggle-display { + background-image: url("../img/toggle.png") !important; +} + +.ol-custom-overviewmap button { + background-color: @ms2-primary-bg !important; +} + +.ol-custom-overviewmap .ol-control button:focus, +.ol-custom-overviewmap button:hover { + background-color: @ms2-primary-bg !important; +} + +.ol-custom-overviewmap:not(.ol-collapsed) { + background: @ms2-primary-bg !important; + border-radius: 3px !important; +} + +.ol-custom-overviewmap .ol-overviewmap-map { + height: 133px !important; +} + +.ol-custom-overviewmap { + margin-bottom: 3px; +} + +/* scale box */ +#mapstore-scalebox select { + background-color: #fff; + color: #222; + border: none; +} + +#mapstore-scalebox option { + background-color: #fff; + color: #222; +} + +/* scale bar */ +.leaflet-control-scale-line { + background-color: @ms2-primary-bg; + color: @ms2-primary-color; + border: 2px solid #000; + border-top: 0; +} + +.ol-scale-line { + background-color: @ms2-primary-bg !important; + color: @ms2-primary-color !important; +} + +div.ol-scale-line.ol-unselectable { + border: 2px solid #000; + border-top: none; + line-height: 1.0; + border-radius: 0; + bottom: 5px; + left: auto; + right: 57px; + padding: 2px 5px 1px; + white-space: nowrap; + overflow: hidden; + -moz-box-sizing: content-box; + box-sizing: content-box; + font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; +} + +div.ol-scale-line-inner { + border: 0; + border-top: 0; + font-size: 11px; + text-align: left; + margin: 0; +} diff --git a/web/client/themes/default/mapstore2-theme/map-toolbar.less b/web/client/themes/default/mapstore2-theme/map-toolbar.less new file mode 100644 index 0000000000..f8f843b864 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/map-toolbar.less @@ -0,0 +1,4 @@ + +.mapToolbar { + box-shadow: -1px 1px 5px 1px rgba(94,94,94,1); +} diff --git a/web/client/themes/default/mapstore2-theme/mapstore2.less b/web/client/themes/default/mapstore2-theme/mapstore2.less new file mode 100644 index 0000000000..aea75b760c --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/mapstore2.less @@ -0,0 +1,20 @@ + +@import "button.less"; +@import "draggable.less"; +@import "drawer-menu.less"; +@import "dropdown-menu.less"; +@import "dropzone.less"; +@import "feature-grid.less"; +@import "gridcard.less"; +@import "help.less"; +@import "home.less"; +@import "loading.less"; +@import "login-page.less"; +@import "map-controls.less"; +@import "map-toolbar.less"; +@import "measure.less"; +@import "print.less"; +@import "query-panel.less"; +@import "search.less"; +@import "select.less"; +@import "tutorial.less"; diff --git a/web/client/themes/default/mapstore2-theme/measure.less b/web/client/themes/default/mapstore2-theme/measure.less new file mode 100644 index 0000000000..a54b5a06aa --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/measure.less @@ -0,0 +1,17 @@ +/* measure panel */ +#measure-result-panel .option-text { + font-size: 14px; + text-transform: uppercase; + vertical-align: middle; +} + +#measure-result-panel .option-icon { + font-size: 32px; + text-transform: uppercase; + vertical-align: middle; +} + +#measure-result-panel .glyphicon { + margin-left: 0; + margin-top: 0; +} diff --git a/web/client/themes/default/mapstore2-theme/print.less b/web/client/themes/default/mapstore2-theme/print.less new file mode 100644 index 0000000000..c603c87b33 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/print.less @@ -0,0 +1,4 @@ + +#mapstore-print-panel .panel-body { + border: solid 1px @ms2-primary-bg; +} diff --git a/web/client/themes/default/mapstore2-theme/query-panel.less b/web/client/themes/default/mapstore2-theme/query-panel.less new file mode 100644 index 0000000000..9362e33d58 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/query-panel.less @@ -0,0 +1,53 @@ + +/* query panel */ +#mapstore-drawermenu #toc-query-container { + background-color: darken(@ms2-body-bg, 2%); +} + +#query-form-panel .querypanel { + background-color: darken(@ms2-body-bg, 2%); +} + +#query-form-panel .query-toolbar { + height: @ms2-square-btn-side; + background-color: @ms2-body-bg; +} + +#query-form-panel button:disabled { + color: @ms2-btn-disabled-color; + background-color: @ms2-btn-disabled-bg !important; + border: 1px dashed rgba(0, 0, 0, 0); +} + +#mapstore-drawermenu #query-form-panel .querypanel > .query-filter-container { + margin-left: 10px; + margin-right: @ms2-square-btn-side + 10; +} + +#query-form-panel .query-content > .container-fluid { + border-top: 1px dashed darken(@ms2-body-bg, 10%); +} + +#mapstore-drawermenu #query-form-panel .remove-filter-button .glyphicon { + font-size: @ms2-square-btn-icon-size-sm; +} + +#mapstore-drawermenu #query-form-panel .remove-filter-button span { + line-height: @ms2-square-btn-icon-size-sm; +} + +#query-form-panel .querypanel > .query-filter-container { + border-bottom: 1px solid darken(@ms2-body-bg, 10%); +} + +#query-form-panel .panel .panel .filter-group-panel { + background-color: @ms2-body-bg; +} + +#query-form-panel div.details-panel { + background-color: @ms2-body-bg; +} + +#query-form-panel .queryFormToolbar { + margin: (@ms2-square-btn-side - 26) / 2 !important; +} diff --git a/web/client/themes/default/mapstore2-theme/search.less b/web/client/themes/default/mapstore2-theme/search.less new file mode 100644 index 0000000000..1d770f49f4 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/search.less @@ -0,0 +1,131 @@ + +/* search */ +#mapstore-navbar .navbar-dx .MapSearchBar .input-group { + width: 500px; +} + +div.MapSearchBar .form-control:focus { + box-shadow: none; +} + +div.MapSearchBar .input-group-addon { + height: @ms2-square-btn-side; + width: @ms2-square-btn-side; + color: @ms2-primary-bg; + background-color: @ms2-body-bg; + border: 0; + border-radius: 0; + font-size: @ms2-square-btn-icon-size; +} + +.navbar-dx .MapSearchBar .input-group, +.navbar-dx.shadow { + -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); +} + +.MapSearchBar input { + height: @ms2-square-btn-side; + box-shadow: none; + -webkit-box-shadow: none; + border: none; +} + +.MapSearchBar input:focus { + border: none; +} + +.MapSearchBar .input-group-addon .searchclear, +.MapSearchBar .input-group-addon .searcherror { + font-size: @ms2-square-btn-icon-size-md; +} + +.MapSearchBar .input-group-addon .searchclear { + cursor: pointer; +} + +.MapSearchBar .input-group-addon .searcherror { + color: @ms2-danger-bg; + margin-left: 4px; +} + +#mapstore-navbar .navbar-dx .search-result-list { + top: @ms2-square-btn-side + @ms2-square-btn-padding; +} + +@media (max-width: 768px ) { + #mapstore-navbar .search-toggle { + display: inline-block; + } + + #mapstore-navbar .MapSearchBar { + width: 400px; + top: @ms2-square-btn-side; + left: auto; + } + + #mapstore-navbar .search-result-list { + top: @ms2-square-btn-side + @ms2-square-btn-padding; + left: auto; + width: 400px; + } +} + +@media (max-width: 768px ) { + #mapstore-navbar .search-toggle { + display: inline-block; + } + + #mapstore-navbar .navbar-dx .MapSearchBar { + position: fixed; + left: 1px; + right: 1px; + top: @ms2-square-btn-side; + width: auto; + } + + #mapstore-navbar .navbar-dx .MapSearchBar .input-group { + width: 100%; + } + + #mapstore-navbar .navbar-dx .search-result-list { + position: fixed; + left: 15px; + right: 15px; + top: 105px; + width: 95%; + } +} + +@media (min-width: 992px) { + #mapstore-navbar .MapSearchBar { + width: 500px; + right: auto; + } + + #mapstore-navbar .search-result-list { + width: 500px; + right: auto; + } +} + +@media (min-width: 1200px) { + #mapstore-navbar .MapSearchBar { + width: 500px; + position: absolute; + } + + #mapstore-navbar .search-result-list { + width: 500px; + right: auto; + } +} + +#mapstore-navbar .form-group { + margin-bottom: 0; +} + +#mapstore-navbar .search-result-list { + background-color: @ms2-body-bg; +} diff --git a/web/client/themes/default/mapstore2-theme/select.less b/web/client/themes/default/mapstore2-theme/select.less new file mode 100644 index 0000000000..5fdce36ba4 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/select.less @@ -0,0 +1,82 @@ + +/* rw select input */ +.rw-widget { + color: @ms2-text-color !important; + background-color: @ms2-body-bg !important; + border: 1px solid darken(@ms2-body-bg, 5%) !important; +} + +.rw-widget.rw-state-focus, +.rw-widget.rw-state-focus:hover { + color: @ms2-primary-bg !important; + background-color: transparent !important; + border-color: lighten(@ms2-primary-bg, 18%) !important; + box-shadow: 0 0 8px fade(lighten(@ms2-primary-bg, 18%),30%) !important; + -webkit-box-shadow: 0 0 8px fade(lighten(@ms2-primary-bg, 18%), 30%) !important; +} + +.rw-list-option.rw-state-focus { + color: @ms2-body-bg !important; + background-color: @ms2-primary-bg !important; + border: none !important; +} + +.rw-input, +.rw-placeholder { + color: lighten(@ms2-text-color, 2%) !important; + background-color: @ms2-body-bg !important; +} + +.rw-filter-input { + border-color: @ms2-primary-bg !important; +} + +.rw-list-option:hover { + color: @ms2-body-bg !important; + background-color: @ms2-primary-bg !important; + border: none !important; +} + +.rw-i { + color: @ms2-text-color !important; +} + +.rw-select { + border: none !important; +} + +/* Select select input */ +.Select-placeholder { + background-color: @ms2-body-bg; + border: 1px solid darken(@ms2-body-bg, 5%); + color: lighten(@ms2-text-color, 2%) !important; +} + +.Select-control { + border: none !important; +} + +.Select-arrow { + border-color: lighten(@ms2-text-color, 2%) transparent transparent !important; +} + +.Select-option { + background-color: @ms2-body-bg !important; + color: @ms2-text-color !important; +} + +.Select-option:hover { + background-color: @ms2-primary-bg !important; + color: @ms2-body-bg !important; +} + +.Select-menu-outer { + background-color: @ms2-body-bg !important; + border: 1px solid darken(@ms2-body-bg, 5%) !important; +} + +.is-focused:not(.is-open) > .Select-control { + border-color: lighten(@ms2-primary-bg, 18%) !important; + box-shadow: 0 0 8px fade(lighten(@ms2-primary-bg, 18%),30%) !important; + -webkit-box-shadow: 0 0 8px fade(lighten(@ms2-primary-bg, 18%), 30%) !important; +} diff --git a/web/client/themes/default/mapstore2-theme/tutorial.less b/web/client/themes/default/mapstore2-theme/tutorial.less new file mode 100644 index 0000000000..38f0d3f9d3 --- /dev/null +++ b/web/client/themes/default/mapstore2-theme/tutorial.less @@ -0,0 +1,12 @@ +/* tutorial */ +.joyride-tooltip__button--primary { + background-color: @ms2-primary-bg !important; + color: @ms2-primary-color !important; +} + +.joyride-tooltip__button--primary:active, +.joyride-tooltip__button--primary:focus, +.joyride-tooltip__button--primary:hover { + background-color: @ms2-primary-bg !important; + color: @ms2-primary-color !important; +} diff --git a/web/client/themes/default/theme.less b/web/client/themes/default/theme.less new file mode 100644 index 0000000000..ee91afa991 --- /dev/null +++ b/web/client/themes/default/theme.less @@ -0,0 +1,5 @@ +// For LESS file includes, +@import "icons.less"; +@import "bootstrap-theme/bootstrap.less"; +@import "mapstore2-theme/mapstore2.less"; +@import "variables.less"; diff --git a/web/client/themes/default/variables.less b/web/client/themes/default/variables.less new file mode 100644 index 0000000000..e943676f36 --- /dev/null +++ b/web/client/themes/default/variables.less @@ -0,0 +1,71 @@ + +/* base color */ +@ms2-text-color: #333333; +@ms2-code-color: #c7254e; +@ms2-placeholder-color: #999999; +@ms2-body-bg: #ffffff; + +/* disabled color */ +@ms2-disabled-color: #333333; +@ms2-disabled-bg: #eeeeee; + +/* brand color */ +@ms2-primary-color: #ffffff; +@ms2-primary-bg: #078aa3; +@ms2-default-bg: @ms2-primary-bg; +@ms2-info-bg: #5a9aab; +@ms2-success-bg: #398439; +@ms2-warning-bg: #ebbc35; +@ms2-danger-bg: #bb4940; + +/* border btn */ +@ms2-primary-border: darken(@ms2-primary-bg, 5%); +@ms2-default-border: @ms2-default-bg; +@ms2-info-border: darken(@ms2-info-bg, 5%); +@ms2-success-border: darken(@ms2-success-bg, 5%); +@ms2-warning-border: darken(@ms2-warning-bg, 5%); +@ms2-danger-border: darken(@ms2-danger-bg, 5%); + +/* btn disabled */ +@ms2-btn-disabled-color: #ffffff; +@ms2-btn-disabled-bg: #5C9FB4; + +/* tooltip */ +@ms2-tooltip-color: #ffffff; +@ms2-tooltip-bg: #444444; + +/* font */ +@ms2-font-size-base: 14px; +@ms2-font-family-sans-serif: 'Raleway', sans-serif; +@ms2-font-family-serif: Georgia, "Times New Roman", Times, serif; +@ms2-font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; + +/* radius */ +@ms2-radius-base: 0; // 4px; +@ms2-radius-large: @ms2-radius-base; // 6px; +@ms2-radius-small: @ms2-radius-base; // 3px; + +/* grid btn */ +@ms2-grid-btn-icon-size: 18px; +@ms2-grid-btn-padding: 6px; +@ms2-grid-btn-side: @ms2-grid-btn-padding * 2 + @ms2-grid-btn-icon-size; + +/* square btn */ +@ms2-square-btn-margin-ratio: 2; +@ms2-square-btn-resize-ratio: 1.5; +@ms2-square-btn-icon-size: 26px; +@ms2-square-btn-padding: floor(@ms2-square-btn-icon-size / @ms2-square-btn-margin-ratio); +@ms2-square-btn-side: @ms2-square-btn-padding * 2 + @ms2-square-btn-icon-size; + +@ms2-square-btn-icon-size-md: floor(@ms2-square-btn-icon-size / @ms2-square-btn-resize-ratio); + +@ms2-square-btn-icon-size-sm: floor(@ms2-square-btn-icon-size-md / @ms2-square-btn-resize-ratio); +/* +@icon-size-md: floor(@icon-size / @icon-resize-ratio); +@padding-left-square-md: floor(@icon-size-md / @icon-margin-ratio); +@square-btn-medium-size: @padding-left-square-md * 2 + @icon-size-md; + +@icon-size-sm: floor(@icon-size-md / @icon-resize-ratio); +@padding-left-square-sm: floor(@icon-size-sm / @icon-margin-ratio); +@square-btn-small-size: @padding-left-square-sm * 2 + @icon-size-sm; +*/ diff --git a/web/client/themes/geosolutions/theme.less b/web/client/themes/geosolutions/theme.less new file mode 100644 index 0000000000..4a3542f16c --- /dev/null +++ b/web/client/themes/geosolutions/theme.less @@ -0,0 +1,5 @@ +@import "../default/icons.less"; +@import "../default/bootstrap-theme/bootstrap.less"; +@import "../default/mapstore2-theme/mapstore2.less"; +@import "../default/variables.less"; +@import "variables.less"; diff --git a/web/client/themes/geosolutions/variables.less b/web/client/themes/geosolutions/variables.less new file mode 100644 index 0000000000..27cb82e2da --- /dev/null +++ b/web/client/themes/geosolutions/variables.less @@ -0,0 +1,20 @@ + +/* base color */ +@ms2-text-color: #333333; +@ms2-body-bg: #ffffff; + +/* disabled color */ +@ms2-disabled-color: #aaaaaa; +@ms2-disabled-bg: #eeeeee; + +/* brand color */ +@ms2-primary-color: #ffffff; +@ms2-primary-bg: #3ca9d6; +@ms2-info-bg: #55ba58; +@ms2-success-bg: #8ae234; +@ms2-warning-bg: #ffd700; +@ms2-danger-bg: #bb384b; + +/* btn disabled */ +@ms2-btn-disabled-color: #aaaaaa; +@ms2-btn-disabled-bg: #eeeeee; diff --git a/web/client/themes/wasabi/theme.less b/web/client/themes/wasabi/theme.less new file mode 100644 index 0000000000..4a3542f16c --- /dev/null +++ b/web/client/themes/wasabi/theme.less @@ -0,0 +1,5 @@ +@import "../default/icons.less"; +@import "../default/bootstrap-theme/bootstrap.less"; +@import "../default/mapstore2-theme/mapstore2.less"; +@import "../default/variables.less"; +@import "variables.less"; diff --git a/web/client/themes/wasabi/variables.less b/web/client/themes/wasabi/variables.less new file mode 100644 index 0000000000..10f01482e4 --- /dev/null +++ b/web/client/themes/wasabi/variables.less @@ -0,0 +1,20 @@ + +/* base color */ +@ms2-text-color: #e99e9e; +@ms2-body-bg: #333333; + +/* disabled color */ +@ms2-disabled-color: #aaaaaa; +@ms2-disabled-bg: #eeeeee; + +/* brand color */ +@ms2-primary-color: #333333; +@ms2-primary-bg: #8ae234; +@ms2-info-bg: #8ae234; +@ms2-success-bg: #4abdac; +@ms2-warning-bg: #ffd700; +@ms2-danger-bg: #bb384b; + +/* btn disabled */ +@ms2-btn-disabled-color: #aaaaaa; +@ms2-btn-disabled-bg: #eeeeee; diff --git a/web/client/translations/data.de-DE b/web/client/translations/data.de-DE index cc933496af..38ffd70ce0 100644 --- a/web/client/translations/data.de-DE +++ b/web/client/translations/data.de-DE @@ -122,6 +122,7 @@ "deleteMapMessage": "Möchtest du wirklich diese Karte löschen?", "editMapMetadata":"Bearbeite die Eigenschaften der Karte", "mapTypes_combo": "Wähle einen Karten-Viewer: ", + "theme_combo": "Thema wählen:", "maps_title": "Karten", "locales_combo": "Sprache:" }, diff --git a/web/client/translations/data.en-US b/web/client/translations/data.en-US index af2ae9aaf4..38e4b093f4 100644 --- a/web/client/translations/data.en-US +++ b/web/client/translations/data.en-US @@ -122,6 +122,7 @@ "deleteMapMessage": "Do you really want to delete this map?", "editMapMetadata":"Edit Map Properties", "mapTypes_combo": "Select Map Viewer: ", + "theme_combo": "Select Theme:", "maps_title": "Maps", "locales_combo": "Language:" }, diff --git a/web/client/translations/data.fr-FR b/web/client/translations/data.fr-FR index fb5948483d..f60e80f9e3 100644 --- a/web/client/translations/data.fr-FR +++ b/web/client/translations/data.fr-FR @@ -123,6 +123,7 @@ "deleteMapMessage": "Voulez-vous supprimer cette carte?", "editMapMetadata":"Modifier les propriétés de la carte", "mapTypes_combo": "Selectionner le viewer de carte: ", + "theme_combo": "Sélectionne un thème:", "maps_title": "Cartes", "locales_combo": "Langue:" }, diff --git a/web/client/translations/data.it-IT b/web/client/translations/data.it-IT index b8f2350e65..6015884853 100644 --- a/web/client/translations/data.it-IT +++ b/web/client/translations/data.it-IT @@ -122,6 +122,7 @@ "deleteMapMessage": "Vuoi eliminare questa mappa?", "editMapMetadata":"Modifica Proprietà", "mapTypes_combo": "Seleziona il visualizzatore di mappa:", + "theme_combo": "Seleziona Tema:", "maps_title": "Mappe", "locales_combo": "Lingua:" }, diff --git a/webpack.config.js b/webpack.config.js index aa71fc6ab0..bcdc5d7b87 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,13 +3,20 @@ var DefinePlugin = require("webpack/lib/DefinePlugin"); var LoaderOptionsPlugin = require("webpack/lib/LoaderOptionsPlugin"); var NormalModuleReplacementPlugin = require("webpack/lib/NormalModuleReplacementPlugin"); var NoEmitOnErrorsPlugin = require("webpack/lib/NoEmitOnErrorsPlugin"); - +const assign = require('object-assign'); +const themeEntries = require('./themes.js').themeEntries; +const extractThemesPlugin = require('./themes.js').extractThemesPlugin; module.exports = { - entry: { + entry: assign({ 'webpack-dev-server': 'webpack-dev-server/client?http://0.0.0.0:8081', // WebpackDevServer host and port 'webpack': 'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors "mapstore2": path.join(__dirname, "web", "client", "product", "app") - }, + }, themeEntries + /* { + "themes/default": path.join(__dirname, "web", "client", "themes", "default", "theme.less"), + "themes/dark": path.join(__dirname, "web", "client", "themes", "dark", "theme.less") + }*/ + ), output: { path: path.join(__dirname, "web", "client", "dist"), publicPath: "/dist/", @@ -27,7 +34,8 @@ module.exports = { new NormalModuleReplacementPlugin(/cesium$/, path.join(__dirname, "web", "client", "libs", "cesium")), new NormalModuleReplacementPlugin(/openlayers$/, path.join(__dirname, "web", "client", "libs", "openlayers")), new NormalModuleReplacementPlugin(/proj4$/, path.join(__dirname, "web", "client", "libs", "proj4")), - new NoEmitOnErrorsPlugin() + new NoEmitOnErrorsPlugin(), + extractThemesPlugin ], resolve: { extensions: [".js", ".jsx"] @@ -45,6 +53,7 @@ module.exports = { }, { test: /\.less$/, + exclude: /themes\/.+\.less$/, use: [{ loader: 'style-loader' }, { @@ -53,6 +62,13 @@ module.exports = { loader: 'less-loader' }] }, + { + test: /themes\/.+\.less$/, + use: extractThemesPlugin.extract({ + fallback: 'style-loader', + use: ['css-loader', 'less-loader'] + }) + }, { test: /\.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, use: [{