diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..2f31c7bcb --- /dev/null +++ b/.gitignore @@ -0,0 +1,25 @@ +# See https://help.github.com/ignore-files/ for more about ignoring files. + +# dependencies +/node_modules + +# development env files +/.idea +yarn.lock + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/config-overrides.js b/config-overrides.js new file mode 100644 index 000000000..e95637fa4 --- /dev/null +++ b/config-overrides.js @@ -0,0 +1,18 @@ +const path = require('path'); +const rewireLess = require('react-app-rewire-less'); +const rewireReactHotLoader = require('react-app-rewire-hot-loader'); + + +module.exports = function override(config, env) { + config.resolve.modules = [ + path.join(__dirname, 'src') + ].concat(config.resolve.modules); + + config = rewireReactHotLoader(config, env); + + config = rewireLess.withLoaderOptions({ + modifyVars: {}, + })(config, env); + + return config; +}; diff --git a/package.json b/package.json new file mode 100644 index 000000000..899cc4743 --- /dev/null +++ b/package.json @@ -0,0 +1,58 @@ +{ + "name": "flexile", + "version": "0.0.0", + "private": true, + "dependencies": { + "antd": "^3.7.3", + "antd-theme-webpack-plugin": "^1.1.6", + "axios": "^0.18.0", + "draftjs-to-html": "^0.8.4", + "firebase": "^5.2.0", + "less": "2.7.3", + "less-loader": "^4.1.0", + "less-vars-to-js": "^1.2.1", + "moment": "^2.22.2", + "nprogress": "^0.2.0", + "react": "^16.4.1", + "react-app-rewire-hot-loader": "^1.0.1", + "react-big-calendar": "^0.19.2", + "react-bootstrap-sweetalert": "^4.4.1", + "react-ckeditor-component": "^1.0.7", + "react-color": "^2.14.1", + "react-custom-scrollbars": "^4.2.1", + "react-dnd": "^5.0.0", + "react-dnd-html5-backend": "^5.0.1", + "react-dom": "^16.4.1", + "react-draft-wysiwyg": "^1.12.13", + "react-google-maps": "^9.4.5", + "react-hot-loader": "^4.3.3", + "react-intl": "^2.4.0", + "react-notifications": "^1.4.3", + "react-placeholder": "^3.0.1", + "react-redux": "^5.0.7", + "react-router-dom": "^4.3.1", + "react-router-redux": "^5.0.0-alpha.9", + "react-scripts": "1.1.4", + "react-simple-maps": "^0.12.1", + "react-slick": "^0.23.1", + "react-sortable-hoc": "^0.8.3", + "react-star-rating-component": "^1.4.1", + "recharts": "^1.0.1", + "redux": "^4.0.0", + "redux-saga": "^0.16.0", + "slick-carousel": "^1.8.1", + "victory": "^0.27.2" + }, + "scripts": { + "start": "react-app-rewired start", + "build": "react-app-rewired build", + "test": "react-app-rewired --env=jsdom" + }, + "devDependencies": { + "add": "^2.0.6", + "babel-plugin-import": "^1.8.0", + "react-app-rewire-less": "^2.1.2", + "react-app-rewired": "^1.5.2", + "yarn": "^1.7.0" + } +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 000000000..e8ee41cd2 --- /dev/null +++ b/public/index.html @@ -0,0 +1,21 @@ + + + + + + Redux Todos Example + + +
+ + + \ No newline at end of file diff --git a/src/actions/index.js b/src/actions/index.js new file mode 100644 index 000000000..d10bb7a9e --- /dev/null +++ b/src/actions/index.js @@ -0,0 +1,22 @@ +let nextTodoId = 0 +export const addTodo = text => ({ + type: 'ADD_TODO', + id: nextTodoId++, + text +}) + +export const setVisibilityFilter = filter => ({ + type: 'SET_VISIBILITY_FILTER', + filter +}) + +export const toggleTodo = id => ({ + type: 'TOGGLE_TODO', + id +}) + +export const VisibilityFilters = { + SHOW_ALL: 'SHOW_ALL', + SHOW_COMPLETED: 'SHOW_COMPLETED', + SHOW_ACTIVE: 'SHOW_ACTIVE' +} diff --git a/src/actions/index.spec.js b/src/actions/index.spec.js new file mode 100644 index 000000000..37596590e --- /dev/null +++ b/src/actions/index.spec.js @@ -0,0 +1,25 @@ +import * as actions from './index' + +describe('todo actions', () => { + it('addTodo should create ADD_TODO action', () => { + expect(actions.addTodo('Use Redux')).toEqual({ + type: 'ADD_TODO', + id: 0, + text: 'Use Redux' + }) + }) + + it('setVisibilityFilter should create SET_VISIBILITY_FILTER action', () => { + expect(actions.setVisibilityFilter('active')).toEqual({ + type: 'SET_VISIBILITY_FILTER', + filter: 'active' + }) + }) + + it('toggleTodo should create TOGGLE_TODO action', () => { + expect(actions.toggleTodo(1)).toEqual({ + type: 'TOGGLE_TODO', + id: 1 + }) + }) +}) diff --git a/src/assets/images/dashboard/trending-down.png b/src/assets/images/dashboard/trending-down.png new file mode 100644 index 000000000..3f92b907d Binary files /dev/null and b/src/assets/images/dashboard/trending-down.png differ diff --git a/src/assets/images/dashboard/trending-up.png b/src/assets/images/dashboard/trending-up.png new file mode 100644 index 000000000..3f9b23264 Binary files /dev/null and b/src/assets/images/dashboard/trending-up.png differ diff --git a/src/assets/images/logo-white.png b/src/assets/images/logo-white.png new file mode 100644 index 000000000..5b64a6232 Binary files /dev/null and b/src/assets/images/logo-white.png differ diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png new file mode 100644 index 000000000..f0d5e39d8 Binary files /dev/null and b/src/assets/images/logo.png differ diff --git a/src/assets/images/marker.png b/src/assets/images/marker.png new file mode 100644 index 000000000..36a188f5b Binary files /dev/null and b/src/assets/images/marker.png differ diff --git a/src/assets/images/pentagon.png b/src/assets/images/pentagon.png new file mode 100644 index 000000000..d449700c1 Binary files /dev/null and b/src/assets/images/pentagon.png differ diff --git a/src/assets/images/pentagon_1.png b/src/assets/images/pentagon_1.png new file mode 100644 index 000000000..30ec14c25 Binary files /dev/null and b/src/assets/images/pentagon_1.png differ diff --git a/src/assets/images/placeholder.jpg b/src/assets/images/placeholder.jpg new file mode 100644 index 000000000..20c26ef1d Binary files /dev/null and b/src/assets/images/placeholder.jpg differ diff --git a/src/assets/vendors/flag/sprite-flags-24x24.css b/src/assets/vendors/flag/sprite-flags-24x24.css new file mode 100644 index 000000000..f13969bb4 --- /dev/null +++ b/src/assets/vendors/flag/sprite-flags-24x24.css @@ -0,0 +1,1032 @@ +.flag { + display: inline-block; + background-repeat: no-repeat; +} + +.flag.flag-24 { + display: inline-block; + width: 24px; + height: 24px; + background-image: url('sprite-flags-24x24.png'); + background-repeat: no-repeat; +} + +.flag.flag-24.flag-abkhazia { + background-position: -0px -0px; +} + +.flag.flag-24.flag-basque-country { + background-position: -24px -0px; +} + +.flag.flag-24.flag-british-antarctic-territory { + background-position: -48px -0px; +} + +.flag.flag-24.flag-commonwealth { + background-position: -72px -0px; +} + +.flag.flag-24.flag-england { + background-position: -96px -0px; +} + +.flag.flag-24.flag-gosquared { + background-position: -120px -0px; +} + +.flag.flag-24.flag-kosovo { + background-position: -144px -0px; +} + +.flag.flag-24.flag-mars { + background-position: -168px -0px; +} + +.flag.flag-24.flag-nagorno-karabakh { + background-position: -192px -0px; +} + +.flag.flag-24.flag-nato { + background-position: -216px -0px; +} + +.flag.flag-24.flag-northern-cyprus { + background-position: -240px -0px; +} + +.flag.flag-24.flag-olympics { + background-position: -264px -0px; +} + +.flag.flag-24.flag-red-cross { + background-position: -288px -0px; +} + +.flag.flag-24.flag-scotland { + background-position: -312px -0px; +} + +.flag.flag-24.flag-somaliland { + background-position: -336px -0px; +} + +.flag.flag-24.flag-south-ossetia { + background-position: -360px -0px; +} + +.flag.flag-24.flag-united-nations { + background-position: -384px -0px; +} + +.flag.flag-24.flag-unknown { + background-position: -0px -24px; +} + +.flag.flag-24.flag-wales { + background-position: -24px -24px; +} + +.flag.flag-24.flag-ad { + background-position: -48px -24px; +} + +.flag.flag-24.flag-ae { + background-position: -72px -24px; +} + +.flag.flag-24.flag-af { + background-position: -96px -24px; +} + +.flag.flag-24.flag-ag { + background-position: -120px -24px; +} + +.flag.flag-24.flag-ai { + background-position: -144px -24px; +} + +.flag.flag-24.flag-al { + background-position: -168px -24px; +} + +.flag.flag-24.flag-am { + background-position: -192px -24px; +} + +.flag.flag-24.flag-an { + background-position: -216px -24px; +} + +.flag.flag-24.flag-ao { + background-position: -240px -24px; +} + +.flag.flag-24.flag-aq { + background-position: -264px -24px; +} + +.flag.flag-24.flag-ar { + background-position: -288px -24px; +} + +.flag.flag-24.flag-as { + background-position: -312px -24px; +} + +.flag.flag-24.flag-at { + background-position: -336px -24px; +} + +.flag.flag-24.flag-au { + background-position: -360px -24px; +} + +.flag.flag-24.flag-aw { + background-position: -384px -24px; +} + +.flag.flag-24.flag-ax { + background-position: -0px -48px; +} + +.flag.flag-24.flag-az { + background-position: -24px -48px; +} + +.flag.flag-24.flag-ba { + background-position: -48px -48px; +} + +.flag.flag-24.flag-bb { + background-position: -72px -48px; +} + +.flag.flag-24.flag-bd { + background-position: -96px -48px; +} + +.flag.flag-24.flag-be { + background-position: -120px -48px; +} + +.flag.flag-24.flag-bf { + background-position: -144px -48px; +} + +.flag.flag-24.flag-bg { + background-position: -168px -48px; +} + +.flag.flag-24.flag-bh { + background-position: -192px -48px; +} + +.flag.flag-24.flag-bi { + background-position: -216px -48px; +} + +.flag.flag-24.flag-bj { + background-position: -240px -48px; +} + +.flag.flag-24.flag-bl { + background-position: -264px -48px; +} + +.flag.flag-24.flag-bm { + background-position: -288px -48px; +} + +.flag.flag-24.flag-bn { + background-position: -312px -48px; +} + +.flag.flag-24.flag-bo { + background-position: -336px -48px; +} + +.flag.flag-24.flag-br { + background-position: -360px -48px; +} + +.flag.flag-24.flag-bs { + background-position: -384px -48px; +} + +.flag.flag-24.flag-bt { + background-position: -0px -72px; +} + +.flag.flag-24.flag-bw { + background-position: -24px -72px; +} + +.flag.flag-24.flag-by { + background-position: -48px -72px; +} + +.flag.flag-24.flag-bz { + background-position: -72px -72px; +} + +.flag.flag-24.flag-ca { + background-position: -96px -72px; +} + +.flag.flag-24.flag-cc { + background-position: -120px -72px; +} + +.flag.flag-24.flag-cd { + background-position: -144px -72px; +} + +.flag.flag-24.flag-cf { + background-position: -168px -72px; +} + +.flag.flag-24.flag-cg { + background-position: -192px -72px; +} + +.flag.flag-24.flag-ch { + background-position: -216px -72px; +} + +.flag.flag-24.flag-ci { + background-position: -240px -72px; +} + +.flag.flag-24.flag-ck { + background-position: -264px -72px; +} + +.flag.flag-24.flag-cl { + background-position: -288px -72px; +} + +.flag.flag-24.flag-cm { + background-position: -312px -72px; +} + +.flag.flag-24.flag-cn { + background-position: -336px -72px; +} + +.flag.flag-24.flag-co { + background-position: -360px -72px; +} + +.flag.flag-24.flag-cr { + background-position: -384px -72px; +} + +.flag.flag-24.flag-cu { + background-position: -0px -96px; +} + +.flag.flag-24.flag-cv { + background-position: -24px -96px; +} + +.flag.flag-24.flag-cw { + background-position: -48px -96px; +} + +.flag.flag-24.flag-cx { + background-position: -72px -96px; +} + +.flag.flag-24.flag-cy { + background-position: -96px -96px; +} + +.flag.flag-24.flag-cz { + background-position: -120px -96px; +} + +.flag.flag-24.flag-de { + background-position: -144px -96px; +} + +.flag.flag-24.flag-dj { + background-position: -168px -96px; +} + +.flag.flag-24.flag-dk { + background-position: -192px -96px; +} + +.flag.flag-24.flag-dm { + background-position: -216px -96px; +} + +.flag.flag-24.flag-do { + background-position: -240px -96px; +} + +.flag.flag-24.flag-dz { + background-position: -264px -96px; +} + +.flag.flag-24.flag-ec { + background-position: -288px -96px; +} + +.flag.flag-24.flag-ee { + background-position: -312px -96px; +} + +.flag.flag-24.flag-eg { + background-position: -336px -96px; +} + +.flag.flag-24.flag-eh { + background-position: -360px -96px; +} + +.flag.flag-24.flag-er { + background-position: -384px -96px; +} + +.flag.flag-24.flag-es { + background-position: -0px -120px; +} + +.flag.flag-24.flag-et { + background-position: -24px -120px; +} + +.flag.flag-24.flag-eu { + background-position: -48px -120px; +} + +.flag.flag-24.flag-fi { + background-position: -72px -120px; +} + +.flag.flag-24.flag-fj { + background-position: -96px -120px; +} + +.flag.flag-24.flag-fk { + background-position: -120px -120px; +} + +.flag.flag-24.flag-fm { + background-position: -144px -120px; +} + +.flag.flag-24.flag-fo { + background-position: -168px -120px; +} + +.flag.flag-24.flag-fr { + background-position: -192px -120px; +} + +.flag.flag-24.flag-ga { + background-position: -216px -120px; +} + +.flag.flag-24.flag-gb { + background-position: -240px -120px; +} + +.flag.flag-24.flag-gd { + background-position: -264px -120px; +} + +.flag.flag-24.flag-ge { + background-position: -288px -120px; +} + +.flag.flag-24.flag-gg { + background-position: -312px -120px; +} + +.flag.flag-24.flag-gh { + background-position: -336px -120px; +} + +.flag.flag-24.flag-gi { + background-position: -360px -120px; +} + +.flag.flag-24.flag-gl { + background-position: -384px -120px; +} + +.flag.flag-24.flag-gm { + background-position: -0px -144px; +} + +.flag.flag-24.flag-gn { + background-position: -24px -144px; +} + +.flag.flag-24.flag-gq { + background-position: -48px -144px; +} + +.flag.flag-24.flag-gr { + background-position: -72px -144px; +} + +.flag.flag-24.flag-gs { + background-position: -96px -144px; +} + +.flag.flag-24.flag-gt { + background-position: -120px -144px; +} + +.flag.flag-24.flag-gu { + background-position: -144px -144px; +} + +.flag.flag-24.flag-gw { + background-position: -168px -144px; +} + +.flag.flag-24.flag-gy { + background-position: -192px -144px; +} + +.flag.flag-24.flag-hk { + background-position: -216px -144px; +} + +.flag.flag-24.flag-hn { + background-position: -240px -144px; +} + +.flag.flag-24.flag-hr { + background-position: -264px -144px; +} + +.flag.flag-24.flag-ht { + background-position: -288px -144px; +} + +.flag.flag-24.flag-hu { + background-position: -312px -144px; +} + +.flag.flag-24.flag-ic { + background-position: -336px -144px; +} + +.flag.flag-24.flag-id { + background-position: -360px -144px; +} + +.flag.flag-24.flag-ie { + background-position: -384px -144px; +} + +.flag.flag-24.flag-il { + background-position: -0px -168px; +} + +.flag.flag-24.flag-im { + background-position: -24px -168px; +} + +.flag.flag-24.flag-in { + background-position: -48px -168px; +} + +.flag.flag-24.flag-iq { + background-position: -72px -168px; +} + +.flag.flag-24.flag-ir { + background-position: -96px -168px; +} + +.flag.flag-24.flag-is { + background-position: -120px -168px; +} + +.flag.flag-24.flag-it { + background-position: -144px -168px; +} + +.flag.flag-24.flag-je { + background-position: -168px -168px; +} + +.flag.flag-24.flag-jm { + background-position: -192px -168px; +} + +.flag.flag-24.flag-jo { + background-position: -216px -168px; +} + +.flag.flag-24.flag-jp { + background-position: -240px -168px; +} + +.flag.flag-24.flag-ke { + background-position: -264px -168px; +} + +.flag.flag-24.flag-kg { + background-position: -288px -168px; +} + +.flag.flag-24.flag-kh { + background-position: -312px -168px; +} + +.flag.flag-24.flag-ki { + background-position: -336px -168px; +} + +.flag.flag-24.flag-km { + background-position: -360px -168px; +} + +.flag.flag-24.flag-kn { + background-position: -384px -168px; +} + +.flag.flag-24.flag-kp { + background-position: -0px -192px; +} + +.flag.flag-24.flag-kr { + background-position: -24px -192px; +} + +.flag.flag-24.flag-kw { + background-position: -48px -192px; +} + +.flag.flag-24.flag-ky { + background-position: -72px -192px; +} + +.flag.flag-24.flag-kz { + background-position: -96px -192px; +} + +.flag.flag-24.flag-la { + background-position: -120px -192px; +} + +.flag.flag-24.flag-lb { + background-position: -144px -192px; +} + +.flag.flag-24.flag-lc { + background-position: -168px -192px; +} + +.flag.flag-24.flag-li { + background-position: -192px -192px; +} + +.flag.flag-24.flag-lk { + background-position: -216px -192px; +} + +.flag.flag-24.flag-lr { + background-position: -240px -192px; +} + +.flag.flag-24.flag-ls { + background-position: -264px -192px; +} + +.flag.flag-24.flag-lt { + background-position: -288px -192px; +} + +.flag.flag-24.flag-lu { + background-position: -312px -192px; +} + +.flag.flag-24.flag-lv { + background-position: -336px -192px; +} + +.flag.flag-24.flag-ly { + background-position: -360px -192px; +} + +.flag.flag-24.flag-ma { + background-position: -384px -192px; +} + +.flag.flag-24.flag-mc { + background-position: -0px -216px; +} + +.flag.flag-24.flag-md { + background-position: -24px -216px; +} + +.flag.flag-24.flag-me { + background-position: -48px -216px; +} + +.flag.flag-24.flag-mf { + background-position: -72px -216px; +} + +.flag.flag-24.flag-mg { + background-position: -96px -216px; +} + +.flag.flag-24.flag-mh { + background-position: -120px -216px; +} + +.flag.flag-24.flag-mk { + background-position: -144px -216px; +} + +.flag.flag-24.flag-ml { + background-position: -168px -216px; +} + +.flag.flag-24.flag-mm { + background-position: -192px -216px; +} + +.flag.flag-24.flag-mn { + background-position: -216px -216px; +} + +.flag.flag-24.flag-mo { + background-position: -240px -216px; +} + +.flag.flag-24.flag-mp { + background-position: -264px -216px; +} + +.flag.flag-24.flag-mq { + background-position: -288px -216px; +} + +.flag.flag-24.flag-mr { + background-position: -312px -216px; +} + +.flag.flag-24.flag-ms { + background-position: -336px -216px; +} + +.flag.flag-24.flag-mt { + background-position: -360px -216px; +} + +.flag.flag-24.flag-mu { + background-position: -384px -216px; +} + +.flag.flag-24.flag-mv { + background-position: -0px -240px; +} + +.flag.flag-24.flag-mw { + background-position: -24px -240px; +} + +.flag.flag-24.flag-mx { + background-position: -48px -240px; +} + +.flag.flag-24.flag-my { + background-position: -72px -240px; +} + +.flag.flag-24.flag-mz { + background-position: -96px -240px; +} + +.flag.flag-24.flag-na { + background-position: -120px -240px; +} + +.flag.flag-24.flag-nc { + background-position: -144px -240px; +} + +.flag.flag-24.flag-ne { + background-position: -168px -240px; +} + +.flag.flag-24.flag-nf { + background-position: -192px -240px; +} + +.flag.flag-24.flag-ng { + background-position: -216px -240px; +} + +.flag.flag-24.flag-ni { + background-position: -240px -240px; +} + +.flag.flag-24.flag-nl { + background-position: -264px -240px; +} + +.flag.flag-24.flag-no { + background-position: -288px -240px; +} + +.flag.flag-24.flag-np { + background-position: -312px -240px; +} + +.flag.flag-24.flag-nr { + background-position: -336px -240px; +} + +.flag.flag-24.flag-nu { + background-position: -360px -240px; +} + +.flag.flag-24.flag-nz { + background-position: -384px -240px; +} + +.flag.flag-24.flag-om { + background-position: -0px -264px; +} + +.flag.flag-24.flag-pa { + background-position: -24px -264px; +} + +.flag.flag-24.flag-pe { + background-position: -48px -264px; +} + +.flag.flag-24.flag-pf { + background-position: -72px -264px; +} + +.flag.flag-24.flag-pg { + background-position: -96px -264px; +} + +.flag.flag-24.flag-ph { + background-position: -120px -264px; +} + +.flag.flag-24.flag-pirate-black { + background-position: -144px -264px; +} + +.flag.flag-24.flag-pirate-white { + background-position: -168px -264px; +} + +.flag.flag-24.flag-pk { + background-position: -192px -264px; +} + +.flag.flag-24.flag-pl { + background-position: -216px -264px; +} + +.flag.flag-24.flag-pn { + background-position: -240px -264px; +} + +.flag.flag-24.flag-pr { + background-position: -264px -264px; +} + +.flag.flag-24.flag-ps { + background-position: -288px -264px; +} + +.flag.flag-24.flag-pt { + background-position: -312px -264px; +} + +.flag.flag-24.flag-pw { + background-position: -336px -264px; +} + +.flag.flag-24.flag-py { + background-position: -360px -264px; +} + +.flag.flag-24.flag-qa { + background-position: -384px -264px; +} + +.flag.flag-24.flag-ro { + background-position: -0px -288px; +} + +.flag.flag-24.flag-rs { + background-position: -24px -288px; +} + +.flag.flag-24.flag-ru { + background-position: -48px -288px; +} + +.flag.flag-24.flag-rw { + background-position: -72px -288px; +} + +.flag.flag-24.flag-sa { + background-position: -96px -288px; +} + +.flag.flag-24.flag-sb { + background-position: -120px -288px; +} + +.flag.flag-24.flag-sc { + background-position: -144px -288px; +} + +.flag.flag-24.flag-sd { + background-position: -168px -288px; +} + +.flag.flag-24.flag-se { + background-position: -192px -288px; +} + +.flag.flag-24.flag-sg { + background-position: -216px -288px; +} + +.flag.flag-24.flag-sh { + background-position: -240px -288px; +} + +.flag.flag-24.flag-si { + background-position: -264px -288px; +} + +.flag.flag-24.flag-sk { + background-position: -288px -288px; +} + +.flag.flag-24.flag-sl { + background-position: -312px -288px; +} + +.flag.flag-24.flag-sm { + background-position: -336px -288px; +} + +.flag.flag-24.flag-sn { + background-position: -360px -288px; +} + +.flag.flag-24.flag-so { + background-position: -384px -288px; +} + +.flag.flag-24.flag-sr { + background-position: -0px -312px; +} + +.flag.flag-24.flag-ss { + background-position: -24px -312px; +} + +.flag.flag-24.flag-st { + background-position: -48px -312px; +} + +.flag.flag-24.flag-sv { + background-position: -72px -312px; +} + +.flag.flag-24.flag-sy { + background-position: -96px -312px; +} + +.flag.flag-24.flag-sz { + background-position: -120px -312px; +} + +.flag.flag-24.flag-tc { + background-position: -144px -312px; +} + +.flag.flag-24.flag-td { + background-position: -168px -312px; +} + +.flag.flag-24.flag-tf { + background-position: -192px -312px; +} + +.flag.flag-24.flag-tg { + background-position: -216px -312px; +} + +.flag.flag-24.flag-th { + background-position: -240px -312px; +} + +.flag.flag-24.flag-tj { + background-position: -264px -312px; +} + +.flag.flag-24.flag-tk { + background-position: -288px -312px; +} + +.flag.flag-24.flag-tl { + background-position: -312px -312px; +} + +.flag.flag-24.flag-tm { + background-position: -336px -312px; +} + +.flag.flag-24.flag-tn { + background-position: -360px -312px; +} + +.flag.flag-24.flag-to { + background-position: -384px -312px; +} + +.flag.flag-24.flag-tr { + background-position: -0px -336px; +} + +.flag.flag-24.flag-tt { + background-position: -24px -336px; +} + +.flag.flag-24.flag-tv { + background-position: -48px -336px; +} + +.flag.flag-24.flag-tw { + background-position: -72px -336px; +} + +.flag.flag-24.flag-tz { + background-position: -96px -336px; +} + +.flag.flag-24.flag-ua { + background-position: -120px -336px; +} + +.flag.flag-24.flag-ug { + background-position: -144px -336px; +} + +.flag.flag-24.flag-us { + background-position: -168px -336px; +} + +.flag.flag-24.flag-uy { + background-position: -192px -336px; +} + +.flag.flag-24.flag-uz { + background-position: -216px -336px; +} + +.flag.flag-24.flag-va { + background-position: -240px -336px; +} + +.flag.flag-24.flag-vc { + background-position: -264px -336px; +} + +.flag.flag-24.flag-ve { + background-position: -288px -336px; +} + +.flag.flag-24.flag-vg { + background-position: -312px -336px; +} + +.flag.flag-24.flag-vi { + background-position: -336px -336px; +} + +.flag.flag-24.flag-vn { + background-position: -360px -336px; +} + +.flag.flag-24.flag-vu { + background-position: -384px -336px; +} diff --git a/src/assets/vendors/flag/sprite-flags-24x24.png b/src/assets/vendors/flag/sprite-flags-24x24.png new file mode 100644 index 000000000..02b9347d6 Binary files /dev/null and b/src/assets/vendors/flag/sprite-flags-24x24.png differ diff --git a/src/assets/vendors/gaxon/fonts/gaxon-ant.eot b/src/assets/vendors/gaxon/fonts/gaxon-ant.eot new file mode 100644 index 000000000..42add27f5 Binary files /dev/null and b/src/assets/vendors/gaxon/fonts/gaxon-ant.eot differ diff --git a/src/assets/vendors/gaxon/fonts/gaxon-ant.svg b/src/assets/vendors/gaxon/fonts/gaxon-ant.svg new file mode 100644 index 000000000..eb2ba1425 --- /dev/null +++ b/src/assets/vendors/gaxon/fonts/gaxon-ant.svg @@ -0,0 +1,199 @@ + + + +Generated by Fontastic.me + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/vendors/gaxon/fonts/gaxon-ant.ttf b/src/assets/vendors/gaxon/fonts/gaxon-ant.ttf new file mode 100644 index 000000000..1ce553191 Binary files /dev/null and b/src/assets/vendors/gaxon/fonts/gaxon-ant.ttf differ diff --git a/src/assets/vendors/gaxon/fonts/gaxon-ant.woff b/src/assets/vendors/gaxon/fonts/gaxon-ant.woff new file mode 100644 index 000000000..de421a8a5 Binary files /dev/null and b/src/assets/vendors/gaxon/fonts/gaxon-ant.woff differ diff --git a/src/assets/vendors/gaxon/icons-reference.html b/src/assets/vendors/gaxon/icons-reference.html new file mode 100644 index 000000000..63f0d24a2 --- /dev/null +++ b/src/assets/vendors/gaxon/icons-reference.html @@ -0,0 +1,1552 @@ + + + + + + + Font Reference - G-axon font + + + + + +
+

G-axon font

+

This font was created withFontastic

+

CSS mapping

+ +

Character mapping

+ +
+ + + diff --git a/src/assets/vendors/gaxon/styles.css b/src/assets/vendors/gaxon/styles.css new file mode 100644 index 000000000..1299d0064 --- /dev/null +++ b/src/assets/vendors/gaxon/styles.css @@ -0,0 +1,607 @@ +@charset "UTF-8"; + +@font-face { + font-family: "gaxon-ant"; + src:url("fonts/gaxon-ant.eot"); + src:url("fonts/gaxon-ant.eot?#iefix") format("embedded-opentype"), + url("fonts/gaxon-ant.woff") format("woff"), + url("fonts/gaxon-ant.ttf") format("truetype"), + url("fonts/gaxon-ant.svg#gaxon-ant") format("svg"); + font-weight: normal; + font-style: normal; + +} + +[data-icon]:before { + font-family: "gaxon-ant" !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^="icon-"]:before, +[class*=" icon-"]:before { + font-family: "gaxon-ant" !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; +} + +.icon-error-500:before { + content: "\62"; +} +.icon-add:before { + content: "\63"; +} +.icon-affix:before { + content: "\64"; +} +.icon-alert:before { + content: "\65"; +} +.icon-alert-new:before { + content: "\66"; +} +.icon-all-contacts:before { + content: "\67"; +} +.icon-anchor:before { + content: "\68"; +} +.icon-apps:before { + content: "\69"; +} +.icon-area-chart:before { + content: "\6a"; +} +.icon-chart-area:before { + content: "\6b"; +} +.icon-arrow-left:before { + content: "\6c"; +} +.icon-arrow-right:before { + content: "\6d"; +} +.icon-attachment:before { + content: "\6e"; +} +.icon-auth-screen:before { + content: "\6f"; +} +.icon-autocomplete:before { + content: "\70"; +} +.icon-avatar:before { + content: "\71"; +} +.icon-backtop:before { + content: "\72"; +} +.icon-badge:before { + content: "\73"; +} +.icon-chart-bar:before { + content: "\74"; +} +.icon-calendar-basic:before { + content: "\75"; +} +.icon-birthday:before { + content: "\76"; +} +.icon-breadcrumb:before { + content: "\77"; +} +.icon-button:before { + content: "\78"; +} +.icon-calendar:before { + content: "\79"; +} +.icon-callout:before { + content: "\7a"; +} +.icon-card:before { + content: "\41"; +} +.icon-cards-list-view:before { + content: "\42"; +} +.icon-carousel:before { + content: "\43"; +} +.icon-cascader:before { + content: "\44"; +} +.icon-charvlet-down:before { + content: "\45"; +} +.icon-charvlet-left:before { + content: "\46"; +} +.icon-charvlet-right:before { + content: "\47"; +} +.icon-charvlet-up:before { + content: "\48"; +} +.icon-chat:before { + content: "\49"; +} +.icon-chat-bubble:before { + content: "\4a"; +} +.icon-check:before { + content: "\4b"; +} +.icon-check-circle-o:before { + content: "\4c"; +} +.icon-check-cricle:before { + content: "\4d"; +} +.icon-check-square:before { + content: "\4e"; +} +.icon-check-square-o:before { + content: "\4f"; +} +.icon-circle:before { + content: "\50"; +} +.icon-circle-o:before { + content: "\51"; +} +.icon-ckeditor:before { + content: "\52"; +} +.icon-collapse:before { + content: "\53"; +} +.icon-compose:before { + content: "\54"; +} +.icon-chart-composed:before { + content: "\55"; +} +.icon-contacts:before { + content: "\56"; +} +.icon-copy:before { + content: "\57"; +} +.icon-crm:before { + content: "\58"; +} +.icon-calendar-culture:before { + content: "\59"; +} +.icon-custom-view:before { + content: "\5a"; +} +.icon-dasbhoard:before { + content: "\30"; +} +.icon-data-display:before { + content: "\31"; +} +.icon-data-entry:before { + content: "\32"; +} +.icon-datepicker:before { + content: "\33"; +} +.icon-timeline-default:before { + content: "\34"; +} +.icon-divider:before { + content: "\35"; +} +.icon-down:before { + content: "\36"; +} +.icon-draft:before { + content: "\37"; +} +.icon-drag-and-drop:before { + content: "\38"; +} +.icon-dropdown:before { + content: "\39"; +} +.icon-edit:before { + content: "\21"; +} +.icon-editor:before { + content: "\22"; +} +.icon-ellipse-h:before { + content: "\23"; +} +.icon-ellipse-v:before { + content: "\24"; +} +.icon-email:before { + content: "\25"; +} +.icon-error:before { + content: "\26"; +} +.icon-exclamation:before { + content: "\27"; +} +.icon-expand:before { + content: "\28"; +} +.icon-feedback:before { + content: "\29"; +} +.icon-filter:before { + content: "\2a"; +} +.icon-filter-circle:before { + content: "\2b"; +} +.icon-folder:before { + content: "\2c"; +} +.icon-folder-o:before { + content: "\2d"; +} +.icon-font:before { + content: "\2e"; +} +.icon-forgot-password:before { + content: "\2f"; +} +.icon-forward:before { + content: "\3a"; +} +.icon-forward-o:before { + content: "\3b"; +} +.icon-frequent:before { + content: "\3c"; +} +.icon-map-geo-location:before { + content: "\3d"; +} +.icon-map-google:before { + content: "\3e"; +} +.icon-growth:before { + content: "\3f"; +} +.icon-hotel-booking:before { + content: "\40"; +} +.icon-icon:before { + content: "\5b"; +} +.icon-important:before { + content: "\5d"; +} +.icon-important-o:before { + content: "\5e"; +} +.icon-inbox:before { + content: "\5f"; +} +.icon-input:before { + content: "\60"; +} +.icon-inputnumber:before { + content: "\7b"; +} +.icon-keyboard:before { + content: "\7c"; +} +.icon-like:before { + content: "\7d"; +} +.icon-chart-line:before { + content: "\7e"; +} +.icon-list-select-o:before { + content: "\5c"; +} +.icon-localeprovider:before { + content: "\e000"; +} +.icon-location:before { + content: "\e001"; +} +.icon-lock-screen:before { + content: "\e002"; +} +.icon-map-clustering:before { + content: "\e003"; +} +.icon-map-directions:before { + content: "\e004"; +} +.icon-map-drawing:before { + content: "\e005"; +} +.icon-map-event-listener:before { + content: "\e006"; +} +.icon-map-km-layer:before { + content: "\e007"; +} +.icon-map-overlay:before { + content: "\e008"; +} +.icon-map-popup-info:before { + content: "\e009"; +} +.icon-map-street-view:before { + content: "\e00a"; +} +.icon-map-traffic-layer:before { + content: "\e00b"; +} +.icon-mention:before { + content: "\e00c"; +} +.icon-menu:before { + content: "\e00d"; +} +.icon-menu-fold:before { + content: "\e00e"; +} +.icon-menu-unfold:before { + content: "\e00f"; +} +.icon-message:before { + content: "\e010"; +} +.icon-modal:before { + content: "\e011"; +} +.icon-navigation:before { + content: "\e012"; +} +.icon-notification:before { + content: "\e013"; +} +.icon-notification-new:before { + content: "\e014"; +} +.icon-pagination:before { + content: "\e015"; +} +.icon-picker:before { + content: "\e016"; +} +.icon-chart-pie:before { + content: "\e017"; +} +.icon-plain-list-divider:before { + content: "\e018"; +} +.icon-plain-list-view:before { + content: "\e019"; +} +.icon-popconfirm:before { + content: "\e01a"; +} +.icon-popover:before { + content: "\e01b"; +} +.icon-calendar-popup:before { + content: "\e01c"; +} +.icon-pricing-table:before { + content: "\e01d"; +} +.icon-product-grid:before { + content: "\e01e"; +} +.icon-product-list:before { + content: "\e01f"; +} +.icon-profile:before { + content: "\e020"; +} +.icon-progress:before { + content: "\e021"; +} +.icon-quote-backward:before { + content: "\e022"; +} +.icon-quote-forward:before { + content: "\e023"; +} +.icon-chart-radar:before { + content: "\e024"; +} +.icon-chart-radial:before { + content: "\e025"; +} +.icon-radiobutton:before { + content: "\e026"; +} +.icon-calendar-rendering:before { + content: "\e027"; +} +.icon-reply:before { + content: "\e028"; +} +.icon-reply-o:before { + content: "\e029"; +} +.icon-reset-password:before { + content: "\e02a"; +} +.icon-chart-scatter:before { + content: "\e02b"; +} +.icon-schedule:before { + content: "\e02c"; +} +.icon-search:before { + content: "\e02d"; +} +.icon-select:before { + content: "\e02e"; +} +.icon-calendar-selectable:before { + content: "\e02f"; +} +.icon-sent:before { + content: "\e030"; +} +.icon-setting:before { + content: "\e031"; +} +.icon-shopping-cart:before { + content: "\e032"; +} +.icon-signin:before { + content: "\e033"; +} +.icon-signup:before { + content: "\e034"; +} +.icon-map-simple:before { + content: "\e035"; +} +.icon-slider:before { + content: "\e036"; +} +.icon-spam:before { + content: "\e037"; +} +.icon-spin:before { + content: "\e038"; +} +.icon-star:before { + content: "\e039"; +} +.icon-star-half:before { + content: "\e03a"; +} +.icon-star-o:before { + content: "\e03b"; +} +.icon-steps:before { + content: "\e03c"; +} +.icon-map-styled:before { + content: "\e03d"; +} +.icon-sweet-alert:before { + content: "\e03e"; +} +.icon-switch:before { + content: "\e03f"; +} +.icon-tab:before { + content: "\e040"; +} +.icon-table:before { + content: "\e041"; +} +.icon-table-data:before { + content: "\e042"; +} +.icon-table-general:before { + content: "\e043"; +} +.icon-tag:before { + content: "\e044"; +} +.icon-tag-o:before { + content: "\e045"; +} +.icon-testimonial:before { + content: "\e046"; +} +.icon-thumb-up:before { + content: "\e047"; +} +.icon-ticket-new:before { + content: "\e048"; +} +.icon-tickets:before { + content: "\e049"; +} +.icon-timeline:before { + content: "\e04a"; +} +.icon-timeline-left-align:before { + content: "\e04b"; +} +.icon-timeline-new:before { + content: "\e04c"; +} +.icon-timeline-with-icons:before { + content: "\e04d"; +} +.icon-timepicker:before { + content: "\e04e"; +} +.icon-tooltip:before { + content: "\e04f"; +} +.icon-transfer:before { + content: "\e050"; +} +.icon-translation:before { + content: "\e051"; +} +.icon-trash:before { + content: "\e052"; +} +.icon-tree:before { + content: "\e053"; +} +.icon-chart-tree:before { + content: "\e054"; +} +.icon-treeselect:before { + content: "\e055"; +} +.icon-uncheck-squire:before { + content: "\e056"; +} +.icon-uncheck-squire-o:before { + content: "\e057"; +} +.icon-upload:before { + content: "\e058"; +} +.icon-user:before { + content: "\e059"; +} +.icon-user-o:before { + content: "\e05a"; +} +.icon-view:before { + content: "\e05b"; +} +.icon-view-o:before { + content: "\e05c"; +} +.icon-widgets:before { + content: "\e05d"; +} +.icon-wysiwyg:before { + content: "\e05e"; +} +.icon-error-404:before { + content: "\61"; +} diff --git a/src/assets/vendors/react-notification/fonts/notification.eot b/src/assets/vendors/react-notification/fonts/notification.eot new file mode 100644 index 000000000..fe9292fbc Binary files /dev/null and b/src/assets/vendors/react-notification/fonts/notification.eot differ diff --git a/src/assets/vendors/react-notification/fonts/notification.svg b/src/assets/vendors/react-notification/fonts/notification.svg new file mode 100644 index 000000000..46d2fa905 --- /dev/null +++ b/src/assets/vendors/react-notification/fonts/notification.svg @@ -0,0 +1,20 @@ + + + + Generated by IcoMoon + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/vendors/react-notification/fonts/notification.ttf b/src/assets/vendors/react-notification/fonts/notification.ttf new file mode 100644 index 000000000..aa241dded Binary files /dev/null and b/src/assets/vendors/react-notification/fonts/notification.ttf differ diff --git a/src/assets/vendors/react-notification/fonts/notification.woff b/src/assets/vendors/react-notification/fonts/notification.woff new file mode 100644 index 000000000..1cb7a50b4 Binary files /dev/null and b/src/assets/vendors/react-notification/fonts/notification.woff differ diff --git a/src/assets/vendors/react-notification/react-notifications.css b/src/assets/vendors/react-notification/react-notifications.css new file mode 100644 index 000000000..625cbb557 --- /dev/null +++ b/src/assets/vendors/react-notification/react-notifications.css @@ -0,0 +1,122 @@ +@charset "UTF-8"; +@font-face { + font-family: Notification; + src: url(fonts/notification.eot?s3g3t9); + src: url(fonts/notification.eot?#iefixs3g3t9) format("embedded-opentype"), url(fonts/notification.woff?s3g3t9) format("woff"), url(fonts/notification.ttf?s3g3t9) format("truetype"), url(fonts/notification.svg?s3g3t9#notification) format("svg"); + font-weight: 400; + font-style: normal +} + +.notification-container { + position: fixed; + top: 0; + right: 0; + z-index: 999999; + width: 320px; + padding: 0 15px; + max-height: calc(100% - 30px); + overflow-x: hidden; + overflow-y: auto +} + +.notification, .notification-container { + -webkit-box-sizing: border-box; + box-sizing: border-box +} + +.notification { + padding: 15px 15px 15px 58px; + border-radius: 2px; + color: #fff; + background-color: #ccc; + -webkit-box-shadow: 0 0 12px #999; + box-shadow: 0 0 12px #999; + cursor: pointer; + font-size: 1em; + line-height: 1.2em; + position: relative; + opacity: .9; + margin-top: 15px +} + +.notification .title { + font-size: 1em; + line-height: 1.2em; + font-weight: 700; + margin: 0 0 5px +} + +.notification:focus, .notification:hover { + opacity: 1 +} + +.notification-enter { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0) +} + +.notification-enter.notification-enter-active { + -webkit-transition: all .4s; + transition: all .4s +} + +.notification-enter.notification-enter-active, .notification-leave { + visibility: visible; + -webkit-transform: translateZ(0); + transform: translateZ(0) +} + +.notification-leave.notification-leave-active { + visibility: hidden; + -webkit-transform: translate3d(100%, 0, 0); + transform: translate3d(100%, 0, 0); + -webkit-transition: all .4s; + transition: all .4s +} + +.notification:before { + position: absolute; + top: 50%; + left: 15px; + margin-top: -14px; + display: block; + font-family: Notification; + width: 28px; + height: 28px; + font-size: 28px; + text-align: center; + line-height: 28px +} + +.notification-info { + background-color: #2f96b4 +} + +.notification-info:before { + content: "" +} + +.notification-success { + background-color: #51a351 +} + +.notification-success:before { + content: "" +} + +.notification-warning { + background-color: #f89406 +} + +.notification-warning:before { + content: "" +} + +.notification-error { + background-color: #bd362f +} + +.notification-error:before { + content: "" +} \ No newline at end of file diff --git a/src/assets/vendors/style.js b/src/assets/vendors/style.js new file mode 100644 index 000000000..56a2a3013 --- /dev/null +++ b/src/assets/vendors/style.js @@ -0,0 +1,4 @@ +import "assets/vendors/flag/sprite-flags-24x24.css"; +import "assets/vendors/gaxon/styles.css"; +import "react-notifications/lib/notifications.css"; +import "react-big-calendar/lib/css/react-big-calendar.css"; diff --git a/src/components/App.js b/src/components/App.js new file mode 100644 index 000000000..f2703f0f9 --- /dev/null +++ b/src/components/App.js @@ -0,0 +1,12 @@ +import React from 'react' +import ClassTreeView from './ClassTreeView' +import PropertyEditor from './PropertyEditor' + +const App = () => ( +
+ + +
+) + +export default App diff --git a/src/components/ClassTreeView.js b/src/components/ClassTreeView.js new file mode 100644 index 000000000..080ceb447 --- /dev/null +++ b/src/components/ClassTreeView.js @@ -0,0 +1,127 @@ +import React from "react"; +import {Card, Input, Tree} from "antd"; + +const TreeNode = Tree.TreeNode; +const Search = Input.Search; + +const x = 3; +const y = 2; +const z = 1; +const gData = []; + +const generateData = (_level, _preKey, _tns) => { + const preKey = _preKey || '0'; + const tns = _tns || gData; + + const children = []; + for (let i = 0; i < x; i++) { + const key = `${preKey}-${i}`; + tns.push({title: key, key}); + if (i < y) { + children.push(key); + } + } + if (_level < 0) { + return tns; + } + const level = _level - 1; + children.forEach((key, index) => { + tns[index].children = []; + return generateData(level, key, tns[index].children); + }); +}; +generateData(z); + +const dataList = []; +const generateList = (data) => { + for (let i = 0; i < data.length; i++) { + const node = data[i]; + const key = node.key; + dataList.push({key, title: key}); + if (node.children) { + generateList(node.children, node.key); + } + } +}; +generateList(gData); + +const getParentKey = (key, tree) => { + let parentKey; + for (let i = 0; i < tree.length; i++) { + const node = tree[i]; + if (node.children) { + if (node.children.some(item => item.key === key)) { + parentKey = node.key; + } else if (getParentKey(key, node.children)) { + parentKey = getParentKey(key, node.children); + } + } + } + return parentKey; +}; + +class ClassTreeView extends React.Component { + state = { + expandedKeys: [], + searchValue: '', + autoExpandParent: true, + }; + onExpand = (expandedKeys) => { + this.setState({ + expandedKeys, + autoExpandParent: false, + }); + }; + onChange = (e) => { + const value = e.target.value; + const expandedKeys = dataList.map((item) => { + if (item.key.indexOf(value) > -1) { + return getParentKey(item.key, gData); + } + return null; + }).filter((item, i, self) => item && self.indexOf(item) === i); + this.setState({ + expandedKeys, + searchValue: value, + autoExpandParent: false, + }); + }; + + render() { + const {searchValue, expandedKeys, autoExpandParent} = this.state; + const loop = data => data.map((item) => { + const index = item.key.indexOf(searchValue); + const beforeStr = item.key.substr(0, index); + const afterStr = item.key.substr(index + searchValue.length); + const title = index > -1 ? ( + + {beforeStr} + {searchValue} + {afterStr} + + ) : {item.key}; + if (item.children) { + return ( + + {loop(item.children)} + + ); + } + return ; + }); + return ( + + + + {loop(gData)} + + + ); + } +} + +export default ClassTreeView; diff --git a/src/components/PropertyEditor.js b/src/components/PropertyEditor.js new file mode 100644 index 000000000..0ff92eaac --- /dev/null +++ b/src/components/PropertyEditor.js @@ -0,0 +1,58 @@ +import React from "react"; +import {Card, Divider, Icon, Table} from "antd"; + +const columns = [{ + title: 'Name', + dataIndex: 'name', + key: 'name', + render: text => {text}, +}, { + title: 'Age', + dataIndex: 'age', + key: 'age', +}, { + title: 'Address', + dataIndex: 'address', + key: 'address', +}, { + title: 'Action', + key: 'action', + render: (text, record) => ( + + Action 一 {record.name} + + Delete + + + More actions + + + ), +}]; + +const data = [{ + key: '1', + name: 'John Brown', + age: 32, + address: 'New York No. 1 Lake Park', +}, { + key: '2', + name: 'Jim Green', + age: 42, + address: 'London No. 1 Lake Park', +}, { + key: '3', + name: 'Joe Black', + age: 32, + address: 'Sidney No. 1 Lake Park', +}]; + +const PropertyEditor = () => { + return ( + + + + ); +}; + +export default PropertyEditor; diff --git a/src/index.js b/src/index.js new file mode 100644 index 000000000..28f1ce1fa --- /dev/null +++ b/src/index.js @@ -0,0 +1,21 @@ +import React from 'react' +import { render } from 'react-dom' +import { createStore } from 'redux' +import { Provider } from 'react-redux' +import App from './components/App' +import rootReducer from './reducers' + +import {ConnectedRouter} from "react-router-redux"; +import {Route, Switch} from "react-router-dom"; + +import "assets/vendors/style"; +import "styles/flexile.less"; + +const store = createStore(rootReducer) + +render( + + + , + document.getElementById('root') +) diff --git a/src/reducers/index.js b/src/reducers/index.js new file mode 100644 index 000000000..54b8f0fc8 --- /dev/null +++ b/src/reducers/index.js @@ -0,0 +1,8 @@ +import { combineReducers } from 'redux' +import todos from './todos' +import visibilityFilter from './visibilityFilter' + +export default combineReducers({ + todos, + visibilityFilter +}) diff --git a/src/reducers/todos.js b/src/reducers/todos.js new file mode 100644 index 000000000..fc6ed32d8 --- /dev/null +++ b/src/reducers/todos.js @@ -0,0 +1,23 @@ +const todos = (state = [], action) => { + switch (action.type) { + case 'ADD_TODO': + return [ + ...state, + { + id: action.id, + text: action.text, + completed: false + } + ] + case 'TOGGLE_TODO': + return state.map(todo => + (todo.id === action.id) + ? {...todo, completed: !todo.completed} + : todo + ) + default: + return state + } +} + +export default todos diff --git a/src/reducers/todos.spec.js b/src/reducers/todos.spec.js new file mode 100644 index 000000000..88eca35d7 --- /dev/null +++ b/src/reducers/todos.spec.js @@ -0,0 +1,111 @@ +import todos from './todos' + +describe('todos reducer', () => { + it('should handle initial state', () => { + expect( + todos(undefined, {}) + ).toEqual([]) + }) + + it('should handle ADD_TODO', () => { + expect( + todos([], { + type: 'ADD_TODO', + text: 'Run the tests', + id: 0 + }) + ).toEqual([ + { + text: 'Run the tests', + completed: false, + id: 0 + } + ]) + + expect( + todos([ + { + text: 'Run the tests', + completed: false, + id: 0 + } + ], { + type: 'ADD_TODO', + text: 'Use Redux', + id: 1 + }) + ).toEqual([ + { + text: 'Run the tests', + completed: false, + id: 0 + }, { + text: 'Use Redux', + completed: false, + id: 1 + } + ]) + + expect( + todos([ + { + text: 'Run the tests', + completed: false, + id: 0 + }, { + text: 'Use Redux', + completed: false, + id: 1 + } + ], { + type: 'ADD_TODO', + text: 'Fix the tests', + id: 2 + }) + ).toEqual([ + { + text: 'Run the tests', + completed: false, + id: 0 + }, { + text: 'Use Redux', + completed: false, + id: 1 + }, { + text: 'Fix the tests', + completed: false, + id: 2 + } + ]) + }) + + it('should handle TOGGLE_TODO', () => { + expect( + todos([ + { + text: 'Run the tests', + completed: false, + id: 1 + }, { + text: 'Use Redux', + completed: false, + id: 0 + } + ], { + type: 'TOGGLE_TODO', + id: 1 + }) + ).toEqual([ + { + text: 'Run the tests', + completed: true, + id: 1 + }, { + text: 'Use Redux', + completed: false, + id: 0 + } + ]) + }) + +}) diff --git a/src/reducers/visibilityFilter.js b/src/reducers/visibilityFilter.js new file mode 100644 index 000000000..1500d4f9c --- /dev/null +++ b/src/reducers/visibilityFilter.js @@ -0,0 +1,12 @@ +import { VisibilityFilters } from '../actions' + +const visibilityFilter = (state = VisibilityFilters.SHOW_ALL, action) => { + switch (action.type) { + case 'SET_VISIBILITY_FILTER': + return action.filter + default: + return state + } +} + +export default visibilityFilter diff --git a/src/styles/apps/apps.less b/src/styles/apps/apps.less new file mode 100644 index 000000000..82dd87214 --- /dev/null +++ b/src/styles/apps/apps.less @@ -0,0 +1,434 @@ +/* Apps Style */ +.@{class-prefix}-app-module { + position: relative; + .flex-display(flex, row, wrap); + margin: -@layout-main-content-padding -@layout-main-content-padding 0; + flex: 1; +} + +.@{class-prefix}-module-side { + position: relative; + z-index: 2; + .flex-display(flex, column, nowrap); + .flex(0, 1, @app-sidebar-width); + min-width: @app-sidebar-width; + + @media screen and (max-width: @screen-md-max) { + min-width: @sidebar-width - 20px; + background-color: @white-color; + } +} + +.@{class-prefix}-module-side-header { + padding: 10px; + min-height: @layout-header-height + 7px; + border-bottom: @border-style-base @border-width-base @border-color; + .flex-display(flex, column, nowrap); + .justify-content(center); + .align-items(center); + background-color: lighten(@grey-2, 0.5%); + color: darken(@grey-8, 2%); + + @media screen and (max-width: @screen-md-max) { + min-height: @layout-header-height; + } +} + +.@{class-prefix}-module-logo { + .flex-display(flex, row, wrap); + font-size: 20px; + + & i { + font-size: 28px; + line-height: 18px; + } +} + +.@{class-prefix}-module-user-info, +.@{class-prefix}-module-side-content { + .flex-display(flex, column, nowrap); + .flex-only(1); +} + +.@{class-prefix}-module-user-detail { + font-size: 12px; +} + +.@{class-prefix}-module-add-task { + .flex-display(flex, row, wrap); + padding: 24px; + + & .ant-btn { + margin-bottom: 0; + } +} + +.@{class-prefix}-module-nav { + list-style: none; + padding-left: 0; + margin-bottom: 0; + .flex-display(flex, column, nowrap); + .justify-content(center); + + & li { + .flex-display(flex, column, nowrap); + } + + & li a { + padding: 12px 29px; + color: lighten(@black-color, 60%); + .flex-display(flex, row, wrap); + .align-items(center); + text-decoration: none; + + &:hover, + &:focus { + color: @black-color; + } + + &.active { + color: @primary-color; + } + } + + & li i { + margin-right: 16px; + font-size: 16px; + } + + & li span { + display: inline-block; + vertical-align: middle; + } + + & li.@{class-prefix}-module-nav-label { + padding: 12px 29px; + } +} + +.@{class-prefix}-module-box { + position: relative; + z-index: 2; + .flex-display(flex, column, nowrap); + .flex(1, 1, auto); + max-width: calc(100%~"-"@app-sidebar-width + 1px); + + @media screen and (max-width: @screen-md-max) { + max-width: 100%; + } +} + +.@{class-prefix}-module-box-header { + padding: 10px 26px; + min-height: 79px; + .flex-display(flex, column, nowrap); + .justify-content(center); + background-color: @white-color; + border-bottom: @border-style-base @border-width-base @border-color; + + @media screen and (max-width: @screen-md-max) { + position: relative; + min-height: 58px; + padding: 5px 26px 5px 110px; + } + + & .@{class-prefix}-drawer-btn { + @media screen and (max-width: @screen-md-max) { + position: absolute; + left: 0; + top: 0; + z-index: 1; + border-right: @border-style-base @border-width-base @border-color; + height: 58px; + width: 98px; + .flex-display(flex, column, nowrap); + .justify-content(center); + .align-items(center); + .border-radius(0); + font-size: 22px; + text-align: center; + } + } +} + +.@{class-prefix}-module-box-header-inner { + .flex-display(flex, row, wrap); + .align-items(center); + .justify-content(space-between); +} + +.@{class-prefix}-module-box-header-right { + .flex-display(flex, row, wrap); + .align-items(center); + margin-left: auto; +} + +.@{class-prefix}-module-box-content { + background-color: @white-color; + .flex-display(flex, column, nowrap); + .flex(1); +} + +.@{class-prefix}-module-box-topbar { + padding: 8px 12px; + min-height: 65px; + .flex-display(flex, row, wrap); + .align-items(center); + border-bottom: @border-style-base @border-width-base @border-color; + + & label.ant-checkbox-wrapper { + margin-right: 10px; + } + + & .ant-dropdown-trigger { + cursor: pointer; + margin-right: 10px; + + & .icon:before { + position: relative; + top: 3px; + } + } + + &-todo { + padding-left: 28px; + } + + @media screen and (max-width: @screen-md-max) { + min-height: 58px; + padding-left: 28px; + padding-right: 28px; + } +} + +.@{class-prefix}-module-list-icon { + .flex-display(flex, row, wrap); + .align-items(center); + padding-right: 10px; + + & .@{class-prefix}-bar-icon { + & .@{class-prefix}-icon-menu:before { + top: 3px; + position: relative; + } + } +} + +.@{class-prefix}-toolbar-separator { + border-left: @border-style-base @border-width-base @border-color; + height: 100%; + width: 1px; + margin: 0 12px; +} + +.@{class-prefix}-module-list { + .flex-display(flex, column, nowrap); + .justify-content(center); +} + +.@{class-prefix}-module-list-item { + .flex-display(flex, row, wrap); + .align-items(center); + padding: 15px 28px; + z-index: 5; + position: relative; + cursor: pointer; + + &:not(:last-child) { + border-bottom: @border-style-base @border-width-base @border-color; + } + + &.@{class-prefix}-mail-cell { + padding-left: 12px; + .align-items(start); + + @media screen and (max-width: @screen-md-max) { + padding-right: 28px; + padding-left: 28px; + } + } + + @media screen and (max-width: @screen-xs-max) { + padding-bottom: 10px; + padding-top: 10px; + } +} + +.@{class-prefix}-module-detail-header { + margin-bottom: 10px; + + @media screen and (max-width: @screen-xs-max) { + margin-bottom: 0; + } +} + +.@{class-prefix}-module-list-info { + .flex-display(flex, row, nowrap); + .justify-content(space-between); + .flex(1); + max-width: calc(100% ~"-" 140px); + + @media screen and (max-width: @screen-xs-max) { + max-width: calc(100% ~"-" 100px); + } +} + +.@{class-prefix}-module-todo-content { + position: relative; + .flex(1); + + & .@{class-prefix}-subject { + margin-bottom: 5px; + } +} + +.@{class-prefix}-module-todo-right { + margin-left: 8px; +} + +.@{class-prefix}-module-sidenav { + background-color: @white-color; + border-right: @border-style-base @border-width-base @border-color; + position: relative; + z-index: 9; + + & .@{class-prefix}-chat-sidenav-main { + max-width: 300px; + min-width: 300px; + width: 90%; + } +} + +.@{class-prefix}-module-date { + max-width: 160px; +} + +.@{class-prefix}-module-detail-item { + padding: 10px 28px; +} + +.@{class-prefix}-task-title { + font-size: @h3-font-size; + + @media screen and (max-width: @screen-md-max) { + font-size: @h4-font-size; + } +} + +.@{class-prefix}-chat-todo-avatar { + margin-right: 15px; +} + +.@{class-prefix}-module-side-scroll { + height: calc(100vh ~"-" 201px) !important; + + .framed-layout & { + height: calc(100vh~"-"201px + 2 * @framed-layout-base) !important; + } + + @media screen and (max-width: @screen-md-max) { + height: calc(100vh ~"-" @layout-header-height) !important; + + .framed-layout & { + height: calc(100vh ~"-" @layout-header-height) !important; + } + } + + & > div:first-child { + overflow-y: scroll !important; + } +} + +.@{class-prefix}-module-content-scroll { + height: calc(100vh ~"-" 266px) !important; + + .framed-layout & { + height: calc(100vh~"-"266px + 2 * @framed-layout-base) !important; + } + + @media screen and (max-width: @screen-md-max) { + height: calc(100vh ~"-" 238px) !important; + + .framed-layout & { + height: calc(100vh ~"-" 238px) !important; + } + } + + & > div:first-child { + overflow-y: scroll !important; + } +} + +.@{class-prefix}-todo-detail-content-scroll { + height: calc(100vh ~"-" 319px) !important; + + .framed-layout & { + height: calc(100vh~"-"319px + 2 * @framed-layout-base) !important; + } + + @media screen and (max-width: @screen-md-max) { + height: calc(100vh ~"-" 291px) !important; + + .framed-layout & { + height: calc(100vh ~"-" 291px) !important; + } + } + + & > div:first-child { + overflow-y: scroll !important; + } +} + +.@{class-prefix}-loader-view { + .flex-display(flex, column, nowrap); + .justify-content(center); + .align-items(center); + .flex(1); + + & .ant-spin { + margin: 0; + } + + .@{class-prefix}-app-module & { + height: calc(100vh ~"-" 266px) !important; + + .framed-layout & { + height: calc(100vh~"-"266px + 2 * @framed-layout-base) !important; + } + + @media screen and (max-width: @screen-md-max) { + height: calc(100vh ~"-" 238px) !important; + + .framed-layout & { + height: calc(100vh ~"-" 238px) !important; + } + } + } + + .@{class-prefix}-chat-module & { + height: calc(100vh ~"-" 122px) !important; + + .framed-layout & { + height: calc(100vh~"-"122px + 2 * @framed-layout-base) !important; + } + + @media screen and (max-width: @screen-md-max) { + .framed-layout & { + height: calc(100vh ~"-" 122px) !important; + } + } + } +} + +.@{class-prefix}-module-default { + .flex-display(flex, column, nowrap); + .justify-content(center); + .align-items(center); + height: 100%; + padding: 15px; +} + +.@{class-prefix}-no-content-found { + .flex-only(1); + font-size: @font-size-lg; +} diff --git a/src/styles/apps/calendar.less b/src/styles/apps/calendar.less new file mode 100644 index 000000000..c399d6e72 --- /dev/null +++ b/src/styles/apps/calendar.less @@ -0,0 +1,108 @@ +/* Calendar Apps Style */ +.@{class-prefix}-rbc-calendar { + overflow: hidden; + padding-bottom: @gx-card-margin-base; + .flex-display(flex, column, nowrap); +} + +.rbc-calendar { + .@{class-prefix}-rbc-calendar & { + .flex-display(flex, column, nowrap); + .flex(1); + height: 100%; + } +} + +.rbc-event { + background-color: @primary-color; +} + +.rbc-event.rbc-selected { + background-color: @primary-7; +} + +.rbc-slot-selection { + background-color: @primary-3; +} + +.rbc-toolbar button:active, +.rbc-toolbar button.rbc-active { + color: @white-color; + background-image: none; + .box-shadow(none); + background-color: @primary-4; + border-color: @primary-color; +} + +.rbc-toolbar button:active:hover, +.rbc-toolbar button.rbc-active:hover, +.rbc-toolbar button:active:focus, +.rbc-toolbar button.rbc-active:focus, +.rbc-toolbar button:focus, +.rbc-toolbar button:hover { + color: @white-color; + background-color: @primary-4; + border-color: @primary-color; +} + +.rbc-month-row { + min-height: 100px; +} + +.rbc-event { + min-height: 50px; +} + +.rbc-btn-group { + & button { + cursor: pointer; + } +} + +@media screen and (max-width: 867px) { + .rbc-toolbar { + .flex-display(flex, column, nowrap); + .align-items(flex-start); + } + + .rbc-toolbar .rbc-toolbar-label { + margin: 8px 0; + } +} + +@media screen and (max-width: 467px) { + .rbc-toolbar { + font-size: 12px; + } + + .rbc-toolbar button { + padding: 5px 10px; + } +} + +/* Calendar Components Style */ +.@{class-prefix}-com-calendar { + & .ant-fullcalendar-header { + & .ant-select { + margin-left: 8px; + margin-bottom: 8px; + } + } + + @media screen and (max-width: 349px) { + margin: 0 -20px; + } +} + +.@{class-prefix}-com-calendar-card { + border: @border-style-base @border-width-base @border-color; + max-width: 300px; + .border-radius(@border-radius-sm); + + .@{class-prefix}-com-calendar { + @media screen and (max-width: 349px) { + margin: 0; + } + } +} + diff --git a/src/styles/apps/chat.less b/src/styles/apps/chat.less new file mode 100644 index 000000000..0d0f55642 --- /dev/null +++ b/src/styles/apps/chat.less @@ -0,0 +1,396 @@ +/*Chat Apps Styles*/ +.@{class-prefix}-chat-module { + position: relative; + + &-box { + .flex-display(flex, row, nowrap); + .flex(1); + background-color: @grey-2; + position: relative; + width: 100%; + } +} + +.@{class-prefix}-chat-sidenav { + .flex-display(flex, column, nowrap); + .flex(0, 1, @app-chat-sidebar-width); + min-width: @app-chat-sidebar-width; + border-right: @border-style-base @border-width-base @border-color; +} + +.@{class-prefix}-chat-sidenav-header { + .flex-display(flex, column, nowrap); + padding: 25px 20px 12px; + background-color: lighten(@grey-2, 0.5%); + border-bottom: @border-style-base @border-width-base @border-color; +} + +.@{class-prefix}-chat-user-hd { + .flex-display(flex, row, nowrap); + margin-bottom: 25px; +} + +.@{class-prefix}-chat-search-wrapper { + .flex-display(flex, column, nowrap); + margin-bottom: 0; +} + +.@{class-prefix}-chat-avatar { + min-width: 50px; + + .@{class-prefix}-chat-user-row & { + padding: 0 5px; + min-width: 10px; + } + + .@{class-prefix}-chat-user-hd & { + cursor: pointer; + } +} + +.@{class-prefix}-chat-sidenav-scroll { + height: calc(100vh ~"-" 295px) !important; + + .framed-layout & { + height: calc(100vh~"-"295px + 2 * @framed-layout-base) !important; + } + + @media screen and (max-width: @screen-md-max) { + height: calc(100vh ~"-" 175px) !important; + + .framed-layout & { + height: calc(100vh ~"-" 175px) !important; + } + } + + & > div:first-child { + overflow-y: scroll !important; + } +} + +.@{class-prefix}-chat-sidenav-scroll-tab-1, +.@{class-prefix}-chat-sidenav-scroll-tab-2 { + height: calc(100vh ~"-" 320px) !important; + + .framed-layout & { + height: calc(100vh~"-"320px + 2 * @framed-layout-base) !important; + } + + @media screen and (max-width: @screen-md-max) { + height: calc(100vh ~"-" 198px) !important; + + .framed-layout & { + height: calc(100vh ~"-" 198px) !important; + } + } + + & > div:first-child { + overflow-y: scroll !important; + } +} + +.@{class-prefix}-chat-list-scroll { + height: calc(100vh ~"-" 268px) !important; + + .framed-layout & { + height: calc(100vh~"-"268px + 2 * @framed-layout-base) !important; + } + + @media screen and (max-width: @screen-lg-max) { + height: calc(100vh ~"-" 242px) !important; + + .framed-layout & { + height: calc(100vh~"-"242px + 2 * @framed-layout-base) !important; + } + } + + @media screen and (max-width: @screen-md-max) { + .framed-layout & { + height: calc(100vh ~"-" 242px) !important; + } + } + + & > div:first-child { + overflow-y: scroll !important; + } +} + +.@{class-prefix}-chat-sidenav-content { + background-color: @white-color; +} + +.@{class-prefix}-chat-sidenav-title { + padding: 10px 16px; + font-size: @font-size-base; + color: @info-color; + .flex-display(flex, column, nowrap); + .justify-content(center); + + @media screen and (max-width: @screen-lg-max) { + font-size: 16px; + } + + @media screen and (max-width: @screen-sm-max) { + font-size: 15px; + } +} + +.@{class-prefix}-chat-tabs-header { + background-color: lighten(@grey-2, 0.5%) !important; +} + +.@{class-prefix}-chat-user { + .flex-display(flex, column, nowrap); + + &.@{class-prefix}-chat-user-center { + .justify-content(center); + .align-items(center); + + & .@{class-prefix}-chat-avatar { + margin-left: auto; + } + } + + &-item { + padding: 16px; + .flex-display(flex, column, nowrap); + .justify-content(center); + cursor: pointer; + max-height: 96px; + + &:not(:last-child) { + border-bottom: @border-style-base @border-width-base @border-color; + } + + &.active, + &:hover { + background-color: @primary-1; + } + } + + &-row { + margin: 0 -5px; + .flex-display(flex, row, wrap); + .align-items(center); + } +} + +.@{class-prefix}-chat-info { + max-width: calc(100% ~"-" 80px); + padding: 0 5px; + .flex-only(1); + + & p { + margin-bottom: 0; + } + + & .h4 { + display: block; + margin-bottom: 3px; + } + + &-des { + color: @grey-8; + font-size: 13px; + } +} + +.@{class-prefix}-chat-contact-col { + max-width: calc(100% ~"-" 50px); + padding: 0 5px; + .flex-only(1); + + & p { + margin-bottom: 0; + } + + & .h4 { + display: block; + margin-bottom: 3px; + } +} + +.@{class-prefix}-chat-date { + padding: 0 5px; + text-align: right; +} + +.@{class-prefix}-fs-80 { + font-size: 80px !important; + line-height: 80px !important; + + .@{class-prefix}-comment-box & { + text-align: center; + margin-bottom: 12px; + } + + @media screen and (max-width: @screen-xs-max) { + font-size: 60px !important; + line-height: 60px !important; + } +} + +.@{class-prefix}-comment-box { + .flex-display(flex, column, nowrap); + .justify-content(center); + .align-items(center); + .flex(1); + height: calc(100vh ~"-" 122px) !important; + + .framed-layout & { + height: calc(100vh~"-"122px + 2 * @framed-layout-base) !important; + + @media screen and (max-width: @screen-md-max) { + height: calc(100vh ~"-" 122px) !important; + } + } +} + +.@{class-prefix}-chat-box { + .flex-display(flex, column, nowrap); + .flex(1); + max-width: 100%; + position: relative; + z-index: 2; +} + +.@{class-prefix}-chat-main { + .flex-display(flex, column, nowrap); +} + +.@{class-prefix}-chat-main-header { + .flex-display(flex, row, wrap); + .align-items(center); + border-bottom: @border-style-base @border-width-base @border-color; + padding: 16px; + background-color: @white-color; + width: 100%; + + @media screen and (max-width: @screen-lg-max) { + padding: 8px 16px; + } + + @media screen and (max-width: @screen-md-max) { + padding: 8px 30px; + } +} + +.@{class-prefix}-chat-main-header-info { + .flex-display(flex, row, wrap); + .align-items(center); + margin-right: auto; +} + +.@{class-prefix}-chat-contact-name { + font-size: 20px; + font-weight: 500; + + @media screen and (max-width: @screen-lg-max) { + font-size: 16px; + } + + @media screen and (max-width: @screen-sm-max) { + font-size: 15px; + } +} + +.@{class-prefix}-chat-main-footer { + .flex-display(flex, column, nowrap); + border-top: @border-style-base @border-width-base @border-color; + padding: 6px 16px; + background-color: @white-color; + width: 100%; + + & .@{class-prefix}-form-group { + margin-bottom: 0; + } +} + +.@{class-prefix}-chat-item { + .flex-display(flex, row, nowrap); + padding: 16px; + + @media screen and (max-width: @screen-md-max) { + padding: 16px 30px; + } + + & .@{class-prefix}-bubble { + padding: 8px 12px; + background-color: @white-color; + .border-radius(20px 20px 20px 0px); + position: relative; + margin-left: 16px; + max-width: 600px; + border: @border-style-base @border-width-base @grey-5; + + @media screen and (max-width: @screen-xs-max) { + width: calc(100% ~"-" 60px); + } + } + + &.@{class-prefix}-flex-row-reverse { + & .@{class-prefix}-bubble { + margin-right: 16px; + margin-left: 0; + background-color: @primary-1; + .border-radius(20px 20px 0 20px); + } + } + + & .ant-avatar { + display: block; + } +} + +.@{class-prefix}-chat-btn { + font-size: 38px !important; + margin-right: 20px; +} + +textarea.@{class-prefix}-chat-textarea { + height: 40px; + .box-shadow(none); + .border-radius(0); +} + +.@{class-prefix}-chat-sent { + min-width: 40px; + line-height: 40px; + font-size: @font-size-lg + 2px; + text-align: center; + cursor: pointer; +} + +.@{class-prefix}-last-message-time { + font-size: 11px; + color: @grey-6; +} + +@media screen and (max-width: @screen-lg-max) { + .@{class-prefix}-chat-main-header { + & .@{class-prefix}-size-60 { + height: 50px !important; + width: 50px !important; + line-height: 50px; + } + + & button { + margin-bottom: 0; + } + } + + .@{class-prefix}-chat-main-header-info { + & .@{class-prefix}-status-pos { + max-width: 50px; + } + } +} + +@media screen and (max-width: @screen-xs-max) { + .@{class-prefix}-module-default { + h1 { + font-size: 17px; + } + } +} + diff --git a/src/styles/apps/contact.less b/src/styles/apps/contact.less new file mode 100644 index 000000000..12d4b2c78 --- /dev/null +++ b/src/styles/apps/contact.less @@ -0,0 +1,100 @@ +/*Contact Apps Styles*/ + +.@{class-prefix}-contact-item { + .align-items(center); + .flex-display(flex, row, wrap); + padding: 8px 12px; + + &:not(:last-child) { + border-bottom: @border-style-base @border-width-base @border-color; + } + + @media screen and (max-width: @screen-md-max) { + padding-right: 28px; + padding-left: 28px; + } +} + +.@{class-prefix}-dragndrop-item { + padding: @dragndrop-paddding-tb @dragndrop-paddding-lr; + + & .@{class-prefix}-draggable-icon { + margin-left: -@dragndrop-paddding-lr; + } +} + +.@{class-prefix}-contact-list-info { + padding-left: 10px; + + @media screen and (max-width: @screen-xs-max) { + max-width: 100%; + width: 100%; + padding-top: 10px; + } +} + +.@{class-prefix}-module-contact-content { + .flex-only(1); +} + +.@{class-prefix}-module-contact-right { + margin-left: 8px; +} + +.@{class-prefix}-contact-name { + font-size: 15px; +} + +.@{class-prefix}-draggable-icon { + cursor: all-scroll; + color: @grey-7; + + &:hover, + &:focus, + &:active { + cursor: all-scroll; + color: @grey-9; + } +} + +.@{class-prefix}-module-side-nav { + padding: 20px 0; +} + +.@{class-prefix}-modal-box-row { + .flex-display(flex, row, wrap); + + & .@{class-prefix}-modal-box-avatar { + .flex-order(2); + margin-left: 16px; + + & .ant-avatar { + width: @size-120; + height: @size-120; + } + + @media screen and (max-width: @screen-xs-max) { + .flex-order(1); + margin-left: 0; + margin-bottom: 16px; + text-align: center; + } + } + + & .@{class-prefix}-modal-box-form-item { + .flex-order(1); + .flex-only(1); + + @media screen and (max-width: @screen-xs-max) { + .flex-order(2); + } + } + + @media screen and (max-width: @screen-xs-max) { + .flex-display(flex, column, nowrap); + } +} + +.@{class-prefix}-dragndrop-actions { + .flex-display(flex, row, wrap); +} diff --git a/src/styles/apps/index.less b/src/styles/apps/index.less new file mode 100644 index 000000000..0721d4da3 --- /dev/null +++ b/src/styles/apps/index.less @@ -0,0 +1,5 @@ +@import "apps"; +@import "mail"; +@import "chat"; +@import "contact"; +@import 'calendar'; diff --git a/src/styles/apps/mail.less b/src/styles/apps/mail.less new file mode 100644 index 000000000..4dec5870c --- /dev/null +++ b/src/styles/apps/mail.less @@ -0,0 +1,138 @@ +/*Mails Apps Styles*/ +.@{class-prefix}-module-box-row { + .flex-display(flex, row, wrap); + width: 100%; +} + +.@{class-prefix}-module-box-column, +.@{class-prefix}-module-list-content { + .flex-display(flex, column, nowrap); + width: 100%; + .flex-only(1); +} + +.@{class-prefix}-mail-list-info { + .flex-display(flex, column, nowrap); + padding-left: 10px; + max-width: calc(100% ~"-" 150px); + + @media screen and (max-width: @screen-xs-max) { + max-width: 100%; + margin-top: 10px; + } +} + +.@{class-prefix}-mail-user-info { + .flex-display(flex, row, wrap); + .align-items(center); + margin-left: 10px; + + & .@{class-prefix}-avatar { + margin-right: 10px; + } + + & .@{class-prefix}-badge { + margin-bottom: 0; + } +} + +.@{class-prefix}-mail-user-des { + .flex-display(flex, row, wrap); + .align-items(center); + + & .@{class-prefix}-time, + & .@{class-prefix}-icon-btn { + margin-left: auto; + } +} + +.@{class-prefix}-mail-detail-inner { + padding: 24px; + + @media screen and (max-width: @screen-md-max) { + padding-right: 28px; + padding-left: 28px; + } +} + +.@{class-prefix}-mail-header { + .flex-display(flex, row, wrap); + .align-items(center); + + @media screen and (max-width: (@screen-xs-max - 77px)) { + display: block; + .align-items(flex-start); + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + } +} + +.@{class-prefix}-mail-header-content { + .flex-display(flex, column, nowrap); + + & .@{class-prefix}-subject { + margin-bottom: 5px; + } +} + +.@{class-prefix}-show-detail { + cursor: pointer; +} + +.@{class-prefix}-module-list-content { + & .@{class-prefix}-subject { + .gx-text-truncate; + } + + & .@{class-prefix}-message { + .flex-display(flex, column, nowrap); + color: darken(@grey-5, 10%); + font-size: 13px; + + p { + margin-bottom: 8px; + } + } +} + +.@{class-prefix}-size { + margin: 5px 0; +} + +.@{class-prefix}-sender-name { + margin-right: 0; + font-weight: @font-weight-medium; + font-size: 15px; +} + +.@{class-prefix}-mail-header-actions { + .justify-content(flex-end); + min-width: 100px; + .flex-display(flex, row, wrap); + + & .icon-btn:not(:last-child) { + margin-right: 3px; + } + + @media screen and (max-width: (@screen-xs-max - 77px)) { + .justify-content(flex-start); + min-width: 10px; + } +} + +@media screen and (max-width: @screen-xs-max) { + .@{class-prefix}-mail-list { + .flex(1, 1, auto); + max-width: 100%; + border-right: 0 none; + } + + .@{class-prefix}-mail-detail { + .flex(1, 1, auto); + max-width: 100%; + } +} diff --git a/src/styles/base/base.less b/src/styles/base/base.less new file mode 100644 index 000000000..0bd27efef --- /dev/null +++ b/src/styles/base/base.less @@ -0,0 +1,1188 @@ +/*Base Styles*/ +body { + overflow: hidden; + .transition(all 0.3s ease-out); + width: 100% !important; + position: relative; + + &.framed-layout { + padding: @framed-layout-base; + background-color: @primary-color; + + @media screen and (max-width: @screen-md-max) { + padding: 0; + } + } + + &.boxed-layout { + background-color: @primary-color; + max-width: @screen-xl-min + 80px; + margin: 0 auto; + .box-shadow(@gx-card-shadow); + } +} + +#root { + height: 100vh; + + .framed-layout & { + height: calc(100vh~"-"2 * @framed-layout-base); + overflow: hidden; + .box-shadow(@gx-card-shadow); + .border-radius(12px); + + @media screen and (max-width: @screen-md-max) { + height: 100vh; + .box-shadow(none) !important; + .border-radius(0) !important; + } + } +} + +.@{class-prefix}-pointer { + cursor: pointer; +} + +a { + color: @primary-color; +} + +a:hover, +a:focus { + color: @primary-7; +} + +a:focus { + text-decoration: none; +} + +ol, ul, dl { + padding-left: 30px; + margin-bottom: 10px; +} + +img { + max-width: 100%; +} + +.@{class-prefix}-w-25 { + width: 25% !important; +} + +.@{class-prefix}-w-50 { + width: 50% !important; +} + +.@{class-prefix}-w-75 { + width: 75% !important; +} + +.@{class-prefix}-w-100 { + width: 100% !important; +} + +.@{class-prefix}-h-25 { + height: 25% !important; +} + +.@{class-prefix}-h-50 { + height: 50% !important; +} + +.@{class-prefix}-h-75 { + height: 75% !important; +} + +.@{class-prefix}-h-100 { + height: 100% !important; +} + +.@{class-prefix}-mw-100 { + max-width: 100% !important; +} + +.@{class-prefix}-mh-100 { + max-height: 100% !important; +} + +.@{class-prefix}-minw50 { + min-width: 50px; +} + +.@{class-prefix}-border { + border: @border-style-base @border-width-base @border-color; +} + +.@{class-prefix}-border-2 { + border: @border-style-base 2px @border-color; +} + +.@{class-prefix}-border-top { + border-top: @border-style-base @border-width-base @border-color; +} + +.@{class-prefix}-border-bottom { + border-bottom: @border-style-base @border-width-base @border-color; +} + +.@{class-prefix}-border-0 { + border: 0 none !important; +} + +.@{class-prefix}-page-heading { + margin-bottom: @gx-card-margin-base; +} + +.@{class-prefix}-page-title { + font-size: @h2-font-size; + margin-bottom: 0; +} + +.@{class-prefix}-size-120 { + height: @size-120 !important; + width: @size-120 !important; + line-height: @size-120 !important; +} + +.@{class-prefix}-size-100 { + height: @size-100 !important; + width: @size-100 !important; + line-height: @size-100 !important; +} + +.@{class-prefix}-size-80 { + height: @size-80 !important; + width: @size-80 !important; + line-height: @size-80 !important; +} + +.@{class-prefix}-size-60 { + height: @size-60 !important; + width: @size-60 !important; + line-height: @size-60 !important; +} + +.@{class-prefix}-size-50 { + height: @size-50 !important; + width: @size-50 !important; + line-height: @size-50 !important; +} + +.@{class-prefix}-size-40 { + height: @size-40 !important; + width: @size-40 !important; + line-height: @size-40 !important; +} + +.@{class-prefix}-size-30 { + height: @size-30 !important; + width: @size-30 !important; + line-height: @size-30 !important; +} + +.@{class-prefix}-size-24 { + height: @size-20 + 4px !important; + width: @size-20 + 4px !important; + line-height: @size-20 + 4px !important; +} + +.@{class-prefix}-size-20 { + height: @size-20 !important; + width: @size-20 !important; + line-height: @size-20 !important; +} + +.@{class-prefix}-rounded-circle { + .border-radius(@border-radius-circle) !important; +} + +.@{class-prefix}-img-fluid, +.@{class-prefix}-img-thumbnail { + max-width: 100%; + height: auto; +} + +.@{class-prefix}-img-fluid-full { + width: 100%; +} + +/*Social Style*/ +.@{class-prefix}-social-link { + list-style: none; + padding-left: 0; + .flex-display(flex, row, wrap); + .align-items(center); + margin: 0 -5px 10px; + + & li { + padding: 0 5px; + margin-bottom: 5px; + line-height: 1; + } + + & li a, + & li i { + cursor: pointer; + width: @size-30; + height: @size-30; + line-height: @size-30; + font-size: @font-size-lg; + text-align: center; + color: @primary-color; + border: @border-style-base @border-width-base @primary-color; + border-radius: @border-radius-circle; + } + + & li.active a, + & li.active i, + & li a:hover, + & li i:hover, + & li a:focus, + & li i:focus { + color: @white-color; + background: @primary-color; + } + + .@{class-prefix}-card-social & { + margin-bottom: 0; + .justify-content(space-around); + } +} + +/*Display Classes*/ +.@{class-prefix}-d-flex { + display: flex !important; +} + +.@{class-prefix}-d-none { + display: none !important; +} + +.@{class-prefix}-d-inline-block { + display: inline-block !important; +} + +.@{class-prefix}-d-block { + display: block !important; +} + +.@{class-prefix}-d-inline-flex { + display: inline-flex !important; +} + +.@{class-prefix}-flex-1 { + .flex(1); +} + +@media screen and (min-width: @screen-sm-min) { + .@{class-prefix}-d-sm-none { + display: none !important; + } + + .@{class-prefix}-d-sm-inline-block { + display: inline-block !important; + } + + .@{class-prefix}-d-sm-block { + display: block !important; + } + + .@{class-prefix}-d-sm-flex { + display: flex !important; + } + + .@{class-prefix}-d-sm-inline-flex { + display: inline-flex !important; + } +} + +@media screen and (min-width: @screen-md-min) { + .@{class-prefix}-d-md-none { + display: none !important; + } + + .@{class-prefix}-d-md-inline-block { + display: inline-block !important; + } + + .@{class-prefix}-d-md-block { + display: block !important; + } + + .@{class-prefix}-d-md-flex { + display: flex !important; + } + + .@{class-prefix}-d-md-inline-flex { + display: inline-flex !important; + } +} + +@media screen and (min-width: @screen-lg-min) { + .@{class-prefix}-d-lg-none { + display: none !important; + } + + .@{class-prefix}-d-lg-inline-block { + display: inline-block !important; + } + + .@{class-prefix}-d-lg-block { + display: block !important; + } + + .@{class-prefix}-d-lg-flex { + display: flex !important; + } + + .@{class-prefix}-d-lg-inline-flex { + display: inline-flex !important; + } +} + +@media screen and (min-width: @screen-xl-min) { + .@{class-prefix}-d-xl-none { + display: none !important; + } + + .@{class-prefix}-d-xl-inline-block { + display: inline-block !important; + } + + .@{class-prefix}-d-xl-block { + display: block !important; + } + + .@{class-prefix}-d-xl-flex { + display: flex !important; + } + + .@{class-prefix}-d-xl-inline-flex { + display: inline-flex !important; + } +} + +/*Display Flex Classes*/ +.@{class-prefix}-flex-row { + .flex-display(flex, row, wrap) !important; +} + +.@{class-prefix}-flex-column { + .flex-display(flex, column, nowrap) !important; +} + +.@{class-prefix}-flex-nowrap { + flex-wrap: nowrap !important; +} + +.@{class-prefix}-flex-row-reverse { + flex-direction: row-reverse !important; +} + +.@{class-prefix}-flex-column-reverse { + flex-direction: column-reverse !important; +} + +.@{class-prefix}-justify-content-start { + .justify-content(flex-start) !important; +} + +.@{class-prefix}-justify-content-end { + .justify-content(flex-end) !important; +} + +.@{class-prefix}-justify-content-center { + .justify-content(center) !important; +} + +.@{class-prefix}-justify-content-between { + .justify-content(space-between) !important; +} + +.@{class-prefix}-justify-content-around { + .justify-content(space-around) !important; +} + +.@{class-prefix}-align-items-start { + .align-items(flex-start) !important; +} + +.@{class-prefix}-align-items-end { + .align-items(flex-end) !important; +} + +.@{class-prefix}-align-items-center { + .align-items(center) !important; +} + +.@{class-prefix}-align-items-stretch { + .align-items(stretch) !important; +} + +.@{class-prefix}-align-content-start { + .align-content(flex-start) !important; +} + +.@{class-prefix}-align-content-end { + .align-content(flex-end) !important; +} + +.@{class-prefix}-align-content-center { + .align-content(center) !important; +} + +.@{class-prefix}-align-content-between { + .align-content(space-between) !important; +} + +.@{class-prefix}-align-content-around { + .align-content(space-around) !important; +} + +.@{class-prefix}-align-content-stretch { + .align-content(stretch) !important; +} + +.@{class-prefix}-align-self-auto { + .align-self(auto) !important; +} + +.@{class-prefix}-align-self-start { + .align-self(flex-start) !important; +} + +.@{class-prefix}-align-self-end { + .align-self(flex-end) !important; +} + +.@{class-prefix}-align-self-center { + .align-self(center) !important; +} + +.@{class-prefix}-align-self-baseline { + .align-self(baseline) !important; +} + +.@{class-prefix}-align-self-stretch { + .align-self(stretch) !important; +} + +@media (min-width: @screen-sm-min) { + .@{class-prefix}-flex-sm-row { + flex-direction: row !important; + } + + .@{class-prefix}-flex-sm-column { + flex-direction: column !important; + } + + .@{class-prefix}-flex-sm-row-reverse { + flex-direction: row-reverse !important; + } + + .@{class-prefix}-flex-sm-column-reverse { + flex-direction: column-reverse !important; + } + + .@{class-prefix}-flex-sm-wrap { + flex-wrap: wrap !important; + } + + .@{class-prefix}-flex-sm-nowrap { + flex-wrap: nowrap !important; + } + + .@{class-prefix}-flex-sm-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + + .@{class-prefix}-justify-content-sm-start { + justify-content: flex-start !important; + } + + .@{class-prefix}-justify-content-sm-end { + justify-content: flex-end !important; + } + + .@{class-prefix}-justify-content-sm-center { + justify-content: center !important; + } + + .@{class-prefix}-justify-content-sm-between { + justify-content: space-between !important; + } + + .@{class-prefix}-justify-content-sm-around { + justify-content: space-around !important; + } + + .@{class-prefix}-align-items-sm-start { + align-items: flex-start !important; + } + + .@{class-prefix}-align-items-sm-end { + align-items: flex-end !important; + } + + .@{class-prefix}-align-items-sm-center { + align-items: center !important; + } + + .@{class-prefix}-align-items-sm-baseline { + align-items: baseline !important; + } + + .@{class-prefix}-align-items-sm-stretch { + align-items: stretch !important; + } + + .@{class-prefix}-align-content-sm-start { + align-content: flex-start !important; + } + + .@{class-prefix}-align-content-sm-end { + align-content: flex-end !important; + } + + .@{class-prefix}-align-content-sm-center { + align-content: center !important; + } + + .@{class-prefix}-align-content-sm-between { + align-content: space-between !important; + } + + .@{class-prefix}-align-content-sm-around { + align-content: space-around !important; + } + + .@{class-prefix}-align-content-sm-stretch { + align-content: stretch !important; + } + + .@{class-prefix}-align-self-sm-auto { + align-self: auto !important; + } + + .@{class-prefix}-align-self-sm-start { + align-self: flex-start !important; + } + + .@{class-prefix}-align-self-sm-end { + align-self: flex-end !important; + } + + .@{class-prefix}-align-self-sm-center { + align-self: center !important; + } + + .@{class-prefix}-align-self-sm-baseline { + align-self: baseline !important; + } + + .@{class-prefix}-align-self-sm-stretch { + align-self: stretch !important; + } +} + +@media (min-width: @screen-md-min) { + .@{class-prefix}-flex-md-row { + flex-direction: row !important; + } + + .@{class-prefix}-flex-md-column { + flex-direction: column !important; + } + + .@{class-prefix}-flex-md-row-reverse { + flex-direction: row-reverse !important; + } + + .@{class-prefix}-flex-md-column-reverse { + flex-direction: column-reverse !important; + } + + .@{class-prefix}-flex-md-wrap { + flex-wrap: wrap !important; + } + + .@{class-prefix}-flex-md-nowrap { + flex-wrap: nowrap !important; + } + + .@{class-prefix}-flex-md-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + + .@{class-prefix}-justify-content-md-start { + justify-content: flex-start !important; + } + + .@{class-prefix}-justify-content-md-end { + justify-content: flex-end !important; + } + + .@{class-prefix}-justify-content-md-center { + justify-content: center !important; + } + + .@{class-prefix}-justify-content-md-between { + justify-content: space-between !important; + } + + .@{class-prefix}-justify-content-md-around { + justify-content: space-around !important; + } + + .@{class-prefix}-align-items-md-start { + align-items: flex-start !important; + } + + .@{class-prefix}-align-items-md-end { + align-items: flex-end !important; + } + + .@{class-prefix}-align-items-md-center { + align-items: center !important; + } + + .@{class-prefix}-align-items-md-baseline { + align-items: baseline !important; + } + + .@{class-prefix}-align-items-md-stretch { + align-items: stretch !important; + } + + .@{class-prefix}-align-content-md-start { + align-content: flex-start !important; + } + + .@{class-prefix}-align-content-md-end { + align-content: flex-end !important; + } + + .@{class-prefix}-align-content-md-center { + align-content: center !important; + } + + .@{class-prefix}-align-content-md-between { + align-content: space-between !important; + } + + .@{class-prefix}-align-content-md-around { + align-content: space-around !important; + } + + .@{class-prefix}-align-content-md-stretch { + align-content: stretch !important; + } + + .@{class-prefix}-align-self-md-auto { + align-self: auto !important; + } + + .@{class-prefix}-align-self-md-start { + align-self: flex-start !important; + } + + .@{class-prefix}-align-self-md-end { + align-self: flex-end !important; + } + + .@{class-prefix}-align-self-md-center { + align-self: center !important; + } + + .@{class-prefix}-align-self-md-baseline { + align-self: baseline !important; + } + + .@{class-prefix}-align-self-md-stretch { + align-self: stretch !important; + } +} + +@media (min-width: @screen-lg-min) { + .@{class-prefix}-flex-lg-row { + flex-direction: row !important; + } + + .@{class-prefix}-flex-lg-column { + flex-direction: column !important; + } + + .@{class-prefix}-flex-lg-row-reverse { + flex-direction: row-reverse !important; + } + + .@{class-prefix}-flex-lg-column-reverse { + flex-direction: column-reverse !important; + } + + .@{class-prefix}-flex-lg-wrap { + flex-wrap: wrap !important; + } + + .@{class-prefix}-flex-lg-nowrap { + flex-wrap: nowrap !important; + } + + .@{class-prefix}-flex-lg-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + + .@{class-prefix}-justify-content-lg-start { + justify-content: flex-start !important; + } + + .@{class-prefix}-justify-content-lg-end { + justify-content: flex-end !important; + } + + .@{class-prefix}-justify-content-lg-center { + justify-content: center !important; + } + + .@{class-prefix}-justify-content-lg-between { + justify-content: space-between !important; + } + + .@{class-prefix}-justify-content-lg-around { + justify-content: space-around !important; + } + + .@{class-prefix}-align-items-lg-start { + align-items: flex-start !important; + } + + .@{class-prefix}-align-items-lg-end { + align-items: flex-end !important; + } + + .@{class-prefix}-align-items-lg-center { + align-items: center !important; + } + + .@{class-prefix}-align-items-lg-baseline { + align-items: baseline !important; + } + + .@{class-prefix}-align-items-lg-stretch { + align-items: stretch !important; + } + + .@{class-prefix}-align-content-lg-start { + align-content: flex-start !important; + } + + .@{class-prefix}-align-content-lg-end { + align-content: flex-end !important; + } + + .@{class-prefix}-align-content-lg-center { + align-content: center !important; + } + + .@{class-prefix}-align-content-lg-between { + align-content: space-between !important; + } + + .@{class-prefix}-align-content-lg-around { + align-content: space-around !important; + } + + .@{class-prefix}-align-content-lg-stretch { + align-content: stretch !important; + } + + .@{class-prefix}-align-self-lg-auto { + align-self: auto !important; + } + + .@{class-prefix}-align-self-lg-start { + align-self: flex-start !important; + } + + .@{class-prefix}-align-self-lg-end { + align-self: flex-end !important; + } + + .@{class-prefix}-align-self-lg-center { + align-self: center !important; + } + + .@{class-prefix}-align-self-lg-baseline { + align-self: baseline !important; + } + + .@{class-prefix}-align-self-lg-stretch { + align-self: stretch !important; + } +} + +@media (min-width: @screen-xl-min) { + .@{class-prefix}-flex-xl-row { + flex-direction: row !important; + } + + .@{class-prefix}-flex-xl-column { + flex-direction: column !important; + } + + .@{class-prefix}-flex-xl-row-reverse { + flex-direction: row-reverse !important; + } + + .@{class-prefix}-flex-xl-column-reverse { + flex-direction: column-reverse !important; + } + + .@{class-prefix}-flex-xl-wrap { + flex-wrap: wrap !important; + } + + .@{class-prefix}-flex-xl-nowrap { + flex-wrap: nowrap !important; + } + + .@{class-prefix}-flex-xl-wrap-reverse { + flex-wrap: wrap-reverse !important; + } + + .@{class-prefix}-justify-content-xl-start { + justify-content: flex-start !important; + } + + .@{class-prefix}-justify-content-xl-end { + justify-content: flex-end !important; + } + + .@{class-prefix}-justify-content-xl-center { + justify-content: center !important; + } + + .justify-content-xl-between { + justify-content: space-between !important; + } + + .@{class-prefix}-justify-content-xl-around { + justify-content: space-around !important; + } + + .@{class-prefix}-align-items-xl-start { + align-items: flex-start !important; + } + + .@{class-prefix}-align-items-xl-end { + align-items: flex-end !important; + } + + .@{class-prefix}-align-items-xl-center { + align-items: center !important; + } + + .@{class-prefix}-align-items-xl-baseline { + align-items: baseline !important; + } + + .@{class-prefix}-align-items-xl-stretch { + align-items: stretch !important; + } + + .@{class-prefix}-align-content-xl-start { + align-content: flex-start !important; + } + + .@{class-prefix}-align-content-xl-end { + align-content: flex-end !important; + } + + .@{class-prefix}-align-content-xl-center { + align-content: center !important; + } + + .@{class-prefix}-align-content-xl-between { + align-content: space-between !important; + } + + .@{class-prefix}-align-content-xl-around { + align-content: space-around !important; + } + + .@{class-prefix}-align-content-xl-stretch { + align-content: stretch !important; + } + + .@{class-prefix}-align-self-xl-auto { + align-self: auto !important; + } + + .@{class-prefix}-align-self-xl-start { + align-self: flex-start !important; + } + + .@{class-prefix}-align-self-xl-end { + align-self: flex-end !important; + } + + .@{class-prefix}-align-self-xl-center { + align-self: center !important; + } + + .@{class-prefix}-align-self-xl-baseline { + align-self: baseline !important; + } + + .@{class-prefix}-align-self-xl-stretch { + align-self: stretch !important; + } +} + +.@{class-prefix}-float-left { + float: left !important; +} + +.@{class-prefix}-float-right { + float: right !important; +} + +.@{class-prefix}-float-none { + float: none !important; +} + +@media (min-width: @screen-sm-min) { + .@{class-prefix}-float-sm-left { + float: left !important; + } + + .@{class-prefix}-float-sm-right { + float: right !important; + } + + .@{class-prefix}-float-sm-none { + float: none !important; + } +} + +@media (min-width: @screen-md-min) { + .@{class-prefix}-float-md-left { + float: left !important; + } + + .@{class-prefix}-float-md-right { + float: right !important; + } + + .@{class-prefix}-float-md-none { + float: none !important; + } +} + +@media (min-width: @screen-lg-min) { + .@{class-prefix}-float-lg-left { + float: left !important; + } + + .@{class-prefix}-float-lg-right { + float: right !important; + } + + .@{class-prefix}-float-lg-none { + float: none !important; + } +} + +@media (min-width: @screen-xl-min) { + .@{class-prefix}-float-xl-left { + float: left !important; + } + + .@{class-prefix}-float-xl-right { + float: right !important; + } + + .@{class-prefix}-float-xl-none { + float: none !important; + } +} + +.@{class-prefix}-position-static { + position: static !important; +} + +.@{class-prefix}-position-relative { + position: relative !important; +} + +.@{class-prefix}-position-absolute { + position: absolute !important; +} + +.@{class-prefix}-position-fixed { + position: fixed !important; +} + +.@{class-prefix}-position-sticky { + position: sticky !important; +} + +.@{class-prefix}-fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} + +.@{class-prefix}-fixed-bottom { + position: fixed; + right: 0; + bottom: 0; + left: 0; + z-index: 1030; +} + +/*Embed Responsive Classes*/ +.@{class-prefix}-embed-responsive { + position: relative; + display: block; + width: 100%; + padding: 0; + overflow: hidden; + + &:before { + display: block; + content: ""; + } + + & .@{class-prefix}-embed-responsive-item, + & iframe, + & embed, + & object, + & video { + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + border: 0; + } +} + +.@{class-prefix}-embed-responsive-21by9 { + &:before { + padding-top: 42.8571428571%; + } +} + +.@{class-prefix}-embed-responsive-16by9 { + &:before { + padding-top: 56.25%; + } +} + +.@{class-prefix}-embed-responsive-4by3 { + &:before { + padding-top: 75%; + } +} + +.@{class-prefix}-embed-responsive-1by1 { + &:before { + padding-top: 100%; + } +} + +/*Media Object Classes*/ +.@{class-prefix}-media { + .flex-display(flex, row, wrap); + .align-items(flex-start); + + &-body { + .flex-only(1); + } +} + +/*Overflow styles*/ +.@{class-prefix}-overflow-auto { + overflow: auto; +} + +.@{class-prefix}-z-index-20 { + position: relative; + z-index: 20; +} + +/*Hr style*/ +hr { + border-color: fade(@grey-2, 20%); + margin: 15px 0; +} + +/*Status style*/ +.@{class-prefix}-status-pos { + position: relative; + + & .@{class-prefix}-status { + display: block; + position: absolute; + left: 0; + top: 2px; + z-index: 1; + width: 12px; + height: 12px; + .border-radius(@border-radius-circle); + + &.@{class-prefix}-small { + width: 8px; + height: 8px; + } + + &.@{class-prefix}-status-rtl { + top: -4px; + left: auto; + right: -4px; + } + + &.@{class-prefix}-online { + background-color: @green-color; + .gx-online-effect; + } + + &.@{class-prefix}-offline { + background-color: @white-color; + border: @border-style-base @border-width-base @green-color; + .gx-online-effect; + } + + &.@{class-prefix}-away { + background-color: @yellow-color; + .gx-away-effect; + } + + &.@{class-prefix}-orange { + background-color: @orange-color; + .gx-orange-effect; + } + } +} + +// Box Shadow +.@{class-prefix}-box-shadow { + .box-shadow(@gx-card-shadow); +} + +.@{class-prefix}-no-box-shadow { + .box-shadow(none); +} + +.@{class-prefix}-border-radius-md { + .border-radius(@border-radius-base); +} + +// Vertical Align +.@{class-prefix}-vertical-align-top { + vertical-align: top; +} diff --git a/src/styles/base/gx-margin-padding.less b/src/styles/base/gx-margin-padding.less new file mode 100644 index 000000000..f59bbc086 --- /dev/null +++ b/src/styles/base/gx-margin-padding.less @@ -0,0 +1,1575 @@ +/*Margin Padding Styles*/ +.@{class-prefix}-mb-30 { + margin-bottom: 30px !important; +} + +.@{class-prefix}-m-0 { + margin: 0 !important; +} + +.@{class-prefix}-mt-0, +.@{class-prefix}-my-0 { + margin-top: 0 !important; +} + +.@{class-prefix}-mr-0, +.@{class-prefix}-mx-0 { + margin-right: 0 !important; +} + +.@{class-prefix}-mb-0, +.@{class-prefix}-my-0 { + margin-bottom: 0 !important; +} + +.@{class-prefix}-ml-0, +.@{class-prefix}-mx-0 { + margin-left: 0 !important; +} + +.@{class-prefix}-m-1 { + margin: 0.25rem !important; +} + +.@{class-prefix}-mt-1, +.@{class-prefix}-my-1 { + margin-top: 0.25rem !important; +} + +.@{class-prefix}-mr-1, +.@{class-prefix}-mx-1 { + margin-right: 0.25rem !important; +} + +.@{class-prefix}-mb-1, +.@{class-prefix}-my-1 { + margin-bottom: 0.25rem !important; +} + +.@{class-prefix}-ml-1, +.@{class-prefix}-mx-1 { + margin-left: 0.25rem !important; +} + +.@{class-prefix}-m-2 { + margin: 0.5rem !important; +} + +.@{class-prefix}-mt-2, +.@{class-prefix}-my-2 { + margin-top: 0.5rem !important; +} + +.@{class-prefix}-mr-2, +.@{class-prefix}-mx-2 { + margin-right: 0.5rem !important; +} + +.@{class-prefix}-mb-2, +.@{class-prefix}-my-2 { + margin-bottom: 0.5rem !important; +} + +.@{class-prefix}-ml-2, +.@{class-prefix}-mx-2 { + margin-left: 0.5rem !important; +} + +.@{class-prefix}-m-3 { + margin: 1rem !important; +} + +.@{class-prefix}-mt-3, +.@{class-prefix}-my-3 { + margin-top: 1rem !important; +} + +.@{class-prefix}-mr-3, +.@{class-prefix}-mx-3 { + margin-right: 1rem !important; +} + +.@{class-prefix}-mb-3, +.@{class-prefix}-my-3 { + margin-bottom: 1rem !important; +} + +.@{class-prefix}-ml-3, +.@{class-prefix}-mx-3 { + margin-left: 1rem !important; +} + +.@{class-prefix}-m-4 { + margin: 1.5rem !important; +} + +.@{class-prefix}-mt-4, +.@{class-prefix}-my-4 { + margin-top: 1.5rem !important; +} + +.@{class-prefix}-mr-4, +.@{class-prefix}-mx-4 { + margin-right: 1.5rem !important; +} + +.@{class-prefix}-mb-4, +.@{class-prefix}-my-4 { + margin-bottom: 1.5rem !important; +} + +.@{class-prefix}-ml-4, +.@{class-prefix}-mx-4 { + margin-left: 1.5rem !important; +} + +.@{class-prefix}-m-5 { + margin: 3rem !important; +} + +.@{class-prefix}-mt-5, +.@{class-prefix}-my-5 { + margin-top: 3rem !important; +} + +.@{class-prefix}-mr-5, +.@{class-prefix}-mx-5 { + margin-right: 3rem !important; +} + +.@{class-prefix}-mb-5, +.@{class-prefix}-my-5 { + margin-bottom: 3rem !important; +} + +.@{class-prefix}-ml-5, +.@{class-prefix}-mx-5 { + margin-left: 3rem !important; +} + +.@{class-prefix}-p-0 { + padding: 0 !important; +} + +.@{class-prefix}-pt-0, +.@{class-prefix}-py-0 { + padding-top: 0 !important; +} + +.@{class-prefix}-pr-0, +.@{class-prefix}-px-0 { + padding-right: 0 !important; +} + +.@{class-prefix}-pb-0, +.@{class-prefix}-py-0 { + padding-bottom: 0 !important; +} + +.@{class-prefix}-pl-0, +.@{class-prefix}-px-0 { + padding-left: 0 !important; +} + +.@{class-prefix}-p-1 { + padding: 0.25rem !important; +} + +.@{class-prefix}-pt-1, +.@{class-prefix}-py-1 { + padding-top: 0.25rem !important; +} + +.@{class-prefix}-pr-1, +.@{class-prefix}-px-1 { + padding-right: 0.25rem !important; +} + +.@{class-prefix}-pb-1, +.@{class-prefix}-py-1 { + padding-bottom: 0.25rem !important; +} + +.@{class-prefix}-pl-1, +.@{class-prefix}-px-1 { + padding-left: 0.25rem !important; +} + +.@{class-prefix}-p-2 { + padding: 0.5rem !important; +} + +.@{class-prefix}-pt-2, +.@{class-prefix}-py-2 { + padding-top: 0.5rem !important; +} + +.@{class-prefix}-pr-2, +.@{class-prefix}-px-2 { + padding-right: 0.5rem !important; +} + +.@{class-prefix}-pb-2, +.@{class-prefix}-py-2 { + padding-bottom: 0.5rem !important; +} + +.@{class-prefix}-pl-2, +.@{class-prefix}-px-2 { + padding-left: 0.5rem !important; +} + +.@{class-prefix}-p-3 { + padding: 1rem !important; +} + +.@{class-prefix}-pt-3, +.@{class-prefix}-py-3 { + padding-top: 1rem !important; +} + +.@{class-prefix}-pr-3, +.@{class-prefix}-px-3 { + padding-right: 1rem !important; +} + +.@{class-prefix}-pb-3, +.@{class-prefix}-py-3 { + padding-bottom: 1rem !important; +} + +.@{class-prefix}-pl-3, +.@{class-prefix}-px-3 { + padding-left: 1rem !important; +} + +.@{class-prefix}-p-4 { + padding: 1.5rem !important; +} + +.@{class-prefix}-pt-4, +.@{class-prefix}-py-4 { + padding-top: 1.5rem !important; +} + +.@{class-prefix}-pr-4, +.@{class-prefix}-px-4 { + padding-right: 1.5rem !important; +} + +.@{class-prefix}-pb-4, +.@{class-prefix}-py-4 { + padding-bottom: 1.5rem !important; +} + +.@{class-prefix}-pl-4, +.@{class-prefix}-px-4 { + padding-left: 1.5rem !important; +} + +.@{class-prefix}-p-5 { + padding: 2rem !important; +} + +.@{class-prefix}-pt-5, +.@{class-prefix}-py-5 { + padding-top: 2rem !important; +} + +.@{class-prefix}-pr-5, +.@{class-prefix}-px-5 { + padding-right: 2rem !important; +} + +.@{class-prefix}-pb-5, +.@{class-prefix}-py-5 { + padding-bottom: 2rem !important; +} + +.@{class-prefix}-pl-5, +.@{class-prefix}-px-5 { + padding-left: 2rem !important; +} + +.@{class-prefix}-m-auto { + margin: auto !important; +} + +.@{class-prefix}-mt-auto, +.@{class-prefix}-my-auto { + margin-top: auto !important; +} + +.@{class-prefix}-mr-auto, +.@{class-prefix}-mx-auto { + margin-right: auto !important; +} + +.@{class-prefix}-mb-auto, +.@{class-prefix}-my-auto { + margin-bottom: auto !important; +} + +.@{class-prefix}-ml-auto, +.@{class-prefix}-mx-auto { + margin-left: auto !important; +} + +@media (min-width: @screen-sm-min) { + .@{class-prefix}-m-sm-0 { + margin: 0 !important; + } + + .@{class-prefix}-mt-sm-0, + .@{class-prefix}-my-sm-0 { + margin-top: 0 !important; + } + + .@{class-prefix}-mr-sm-0, + .@{class-prefix}-mx-sm-0 { + margin-right: 0 !important; + } + + .@{class-prefix}-mb-sm-0, + .@{class-prefix}-my-sm-0 { + margin-bottom: 0 !important; + } + + .@{class-prefix}-ml-sm-0, + .@{class-prefix}-mx-sm-0 { + margin-left: 0 !important; + } + + .@{class-prefix}-m-sm-1 { + margin: 0.25rem !important; + } + + .@{class-prefix}-mt-sm-1, + .@{class-prefix}-my-sm-1 { + margin-top: 0.25rem !important; + } + + .@{class-prefix}-mr-sm-1, + .@{class-prefix}-mx-sm-1 { + margin-right: 0.25rem !important; + } + + .@{class-prefix}-mb-sm-1, + .@{class-prefix}-my-sm-1 { + margin-bottom: 0.25rem !important; + } + + .@{class-prefix}-ml-sm-1, + .@{class-prefix}-mx-sm-1 { + margin-left: 0.25rem !important; + } + + .@{class-prefix}-m-sm-2 { + margin: 0.5rem !important; + } + + .@{class-prefix}-mt-sm-2, + .@{class-prefix}-my-sm-2 { + margin-top: 0.5rem !important; + } + + .@{class-prefix}-mr-sm-2, + .@{class-prefix}-mx-sm-2 { + margin-right: 0.5rem !important; + } + + .@{class-prefix}-mb-sm-2, + .@{class-prefix}-my-sm-2 { + margin-bottom: 0.5rem !important; + } + + .@{class-prefix}-ml-sm-2, + .@{class-prefix}-mx-sm-2 { + margin-left: 0.5rem !important; + } + + .@{class-prefix}-m-sm-3 { + margin: 1rem !important; + } + + .@{class-prefix}-mt-sm-3, + .@{class-prefix}-my-sm-3 { + margin-top: 1rem !important; + } + + .@{class-prefix}-mr-sm-3, + .@{class-prefix}-mx-sm-3 { + margin-right: 1rem !important; + } + + .@{class-prefix}-mb-sm-3, + .@{class-prefix}-my-sm-3 { + margin-bottom: 1rem !important; + } + + .@{class-prefix}-ml-sm-3, + .@{class-prefix}-mx-sm-3 { + margin-left: 1rem !important; + } + + .@{class-prefix}-m-sm-4 { + margin: 1.5rem !important; + } + + .@{class-prefix}-mt-sm-4, + .@{class-prefix}-my-sm-4 { + margin-top: 1.5rem !important; + } + + .@{class-prefix}-mr-sm-4, + .@{class-prefix}-mx-sm-4 { + margin-right: 1.5rem !important; + } + + .@{class-prefix}-mb-sm-4, + .@{class-prefix}-my-sm-4 { + margin-bottom: 1.5rem !important; + } + + .@{class-prefix}-ml-sm-4, + .@{class-prefix}-mx-sm-4 { + margin-left: 1.5rem !important; + } + + .@{class-prefix}-m-sm-5 { + margin: 3rem !important; + } + + .@{class-prefix}-mt-sm-5, + .@{class-prefix}-my-sm-5 { + margin-top: 3rem !important; + } + + .@{class-prefix}-mr-sm-5, + .@{class-prefix}-mx-sm-5 { + margin-right: 3rem !important; + } + + .@{class-prefix}-mb-sm-5, + .@{class-prefix}-my-sm-5 { + margin-bottom: 3rem !important; + } + + .@{class-prefix}-ml-sm-5, + .@{class-prefix}-mx-sm-5 { + margin-left: 3rem !important; + } + + .@{class-prefix}-p-sm-0 { + padding: 0 !important; + } + + .@{class-prefix}-pt-sm-0, + .@{class-prefix}-py-sm-0 { + padding-top: 0 !important; + } + + .@{class-prefix}-pr-sm-0, + .@{class-prefix}-px-sm-0 { + padding-right: 0 !important; + } + + .@{class-prefix}-pb-sm-0, + .@{class-prefix}-py-sm-0 { + padding-bottom: 0 !important; + } + + .@{class-prefix}-pl-sm-0, + .@{class-prefix}-px-sm-0 { + padding-left: 0 !important; + } + + .@{class-prefix}-p-sm-1 { + padding: 0.25rem !important; + } + + .@{class-prefix}-pt-sm-1, + .@{class-prefix}-py-sm-1 { + padding-top: 0.25rem !important; + } + + .@{class-prefix}-pr-sm-1, + .@{class-prefix}-px-sm-1 { + padding-right: 0.25rem !important; + } + + .@{class-prefix}-pb-sm-1, + .@{class-prefix}-py-sm-1 { + padding-bottom: 0.25rem !important; + } + + .@{class-prefix}-pl-sm-1, + .@{class-prefix}-px-sm-1 { + padding-left: 0.25rem !important; + } + + .@{class-prefix}-p-sm-2 { + padding: 0.5rem !important; + } + + .@{class-prefix}-pt-sm-2, + .@{class-prefix}-py-sm-2 { + padding-top: 0.5rem !important; + } + + .@{class-prefix}-pr-sm-2, + .@{class-prefix}-px-sm-2 { + padding-right: 0.5rem !important; + } + + .@{class-prefix}-pb-sm-2, + .@{class-prefix}-py-sm-2 { + padding-bottom: 0.5rem !important; + } + + .@{class-prefix}-pl-sm-2, + .@{class-prefix}-px-sm-2 { + padding-left: 0.5rem !important; + } + + .@{class-prefix}-p-sm-3 { + padding: 1rem !important; + } + + .@{class-prefix}-pt-sm-3, + .@{class-prefix}-py-sm-3 { + padding-top: 1rem !important; + } + + .@{class-prefix}-pr-sm-3, + .@{class-prefix}-px-sm-3 { + padding-right: 1rem !important; + } + + .@{class-prefix}-pb-sm-3, + .@{class-prefix}-py-sm-3 { + padding-bottom: 1rem !important; + } + + .@{class-prefix}-pl-sm-3, + .@{class-prefix}-px-sm-3 { + padding-left: 1rem !important; + } + + .@{class-prefix}-p-sm-4 { + padding: 1.5rem !important; + } + + .@{class-prefix}-pt-sm-4, + .@{class-prefix}-py-sm-4 { + padding-top: 1.5rem !important; + } + + .@{class-prefix}-pr-sm-4, + .@{class-prefix}-px-sm-4 { + padding-right: 1.5rem !important; + } + + .@{class-prefix}-pb-sm-4, + .@{class-prefix}-py-sm-4 { + padding-bottom: 1.5rem !important; + } + + .@{class-prefix}-pl-sm-4, + .@{class-prefix}-px-sm-4 { + padding-left: 1.5rem !important; + } + + .@{class-prefix}-p-sm-5 { + padding: 2rem !important; + } + + .@{class-prefix}-pt-sm-5, + .@{class-prefix}-py-sm-5 { + padding-top: 2rem !important; + } + + .@{class-prefix}-pr-sm-5, + .@{class-prefix}-px-sm-5 { + padding-right: 2rem !important; + } + + .@{class-prefix}-pb-sm-5, + .py-sm-5 { + padding-bottom: 2rem !important; + } + + .@{class-prefix}-pl-sm-5, + .@{class-prefix}-px-sm-5 { + padding-left: 2rem !important; + } + + .@{class-prefix}-m-sm-auto { + margin: auto !important; + } + + .@{class-prefix}-mt-sm-auto, + .@{class-prefix}-my-sm-auto { + margin-top: auto !important; + } + + .@{class-prefix}-mr-sm-auto, + .@{class-prefix}-mx-sm-auto { + margin-right: auto !important; + } + + .@{class-prefix}-mb-sm-auto, + .@{class-prefix}-my-sm-auto { + margin-bottom: auto !important; + } + + .@{class-prefix}-ml-sm-auto, + .@{class-prefix}-mx-sm-auto { + margin-left: auto !important; + } +} + +// Medium screen / desktop - 768 +@media (min-width: @screen-md-min) { + .@{class-prefix}-m-md-0 { + margin: 0 !important; + } + + .@{class-prefix}-mt-md-0, + .@{class-prefix}-my-md-0 { + margin-top: 0 !important; + } + + .@{class-prefix}-mr-md-0, + .@{class-prefix}-mx-md-0 { + margin-right: 0 !important; + } + + .@{class-prefix}-mb-md-0, + .@{class-prefix}-my-md-0 { + margin-bottom: 0 !important; + } + + .@{class-prefix}-ml-md-0, + .@{class-prefix}-mx-md-0 { + margin-left: 0 !important; + } + + .@{class-prefix}-m-md-1 { + margin: 0.25rem !important; + } + + .@{class-prefix}-mt-md-1, + .@{class-prefix}-my-md-1 { + margin-top: 0.25rem !important; + } + + .@{class-prefix}-mr-md-1, + .@{class-prefix}-mx-md-1 { + margin-right: 0.25rem !important; + } + + .@{class-prefix}-mb-md-1, + .@{class-prefix}-my-md-1 { + margin-bottom: 0.25rem !important; + } + + .@{class-prefix}-ml-md-1, + .@{class-prefix}-mx-md-1 { + margin-left: 0.25rem !important; + } + + .@{class-prefix}-m-md-2 { + margin: 0.5rem !important; + } + + .@{class-prefix}-mt-md-2, + .@{class-prefix}-my-md-2 { + margin-top: 0.5rem !important; + } + + .@{class-prefix}-mr-md-2, + .@{class-prefix}-mx-md-2 { + margin-right: 0.5rem !important; + } + + .@{class-prefix}-mb-md-2, + .@{class-prefix}-my-md-2 { + margin-bottom: 0.5rem !important; + } + + .@{class-prefix}-ml-md-2, + .@{class-prefix}-mx-md-2 { + margin-left: 0.5rem !important; + } + + .@{class-prefix}-m-md-3 { + margin: 1rem !important; + } + + .@{class-prefix}-mt-md-3, + .@{class-prefix}-my-md-3 { + margin-top: 1rem !important; + } + + .@{class-prefix}-mr-md-3, + .@{class-prefix}-mx-md-3 { + margin-right: 1rem !important; + } + + .@{class-prefix}-mb-md-3, + .@{class-prefix}-my-md-3 { + margin-bottom: 1rem !important; + } + + .@{class-prefix}-ml-md-3, + .@{class-prefix}-mx-md-3 { + margin-left: 1rem !important; + } + + .@{class-prefix}-m-md-4 { + margin: 1.5rem !important; + } + + .@{class-prefix}-mt-md-4, + .@{class-prefix}-my-md-4 { + margin-top: 1.5rem !important; + } + + .@{class-prefix}-mr-md-4, + .@{class-prefix}-mx-md-4 { + margin-right: 1.5rem !important; + } + + .@{class-prefix}-mb-md-4, + .@{class-prefix}-my-md-4 { + margin-bottom: 1.5rem !important; + } + + .@{class-prefix}-ml-md-4, + .@{class-prefix}-mx-md-4 { + margin-left: 1.5rem !important; + } + + .@{class-prefix}-m-md-5 { + margin: 3rem !important; + } + + .@{class-prefix}-mt-md-5, + .@{class-prefix}-my-md-5 { + margin-top: 3rem !important; + } + + .@{class-prefix}-mr-md-5, + .@{class-prefix}-mx-md-5 { + margin-right: 3rem !important; + } + + .@{class-prefix}-mb-md-5, + .@{class-prefix}-my-md-5 { + margin-bottom: 3rem !important; + } + + .@{class-prefix}-ml-md-5, + .@{class-prefix}-mx-md-5 { + margin-left: 3rem !important; + } + + .@{class-prefix}-p-md-0 { + padding: 0 !important; + } + + .@{class-prefix}-pt-md-0, + .@{class-prefix}-py-md-0 { + padding-top: 0 !important; + } + + .@{class-prefix}-pr-md-0, + .@{class-prefix}-px-md-0 { + padding-right: 0 !important; + } + + .@{class-prefix}-pb-md-0, + .@{class-prefix}-py-md-0 { + padding-bottom: 0 !important; + } + + .@{class-prefix}-pl-md-0, + .@{class-prefix}-px-md-0 { + padding-left: 0 !important; + } + + .@{class-prefix}-p-md-1 { + padding: 0.25rem !important; + } + + .@{class-prefix}-pt-md-1, + .@{class-prefix}-py-md-1 { + padding-top: 0.25rem !important; + } + + .@{class-prefix}-pr-md-1, + .@{class-prefix}-px-md-1 { + padding-right: 0.25rem !important; + } + + .@{class-prefix}-pb-md-1, + .@{class-prefix}-py-md-1 { + padding-bottom: 0.25rem !important; + } + + .@{class-prefix}-pl-md-1, + .@{class-prefix}-px-md-1 { + padding-left: 0.25rem !important; + } + + .@{class-prefix}-p-md-2 { + padding: 0.5rem !important; + } + + .@{class-prefix}-pt-md-2, + .@{class-prefix}-py-md-2 { + padding-top: 0.5rem !important; + } + + .@{class-prefix}-pr-md-2, + .@{class-prefix}-px-md-2 { + padding-right: 0.5rem !important; + } + + .@{class-prefix}-pb-md-2, + .@{class-prefix}-py-md-2 { + padding-bottom: 0.5rem !important; + } + + .@{class-prefix}-pl-md-2, + .@{class-prefix}-px-md-2 { + padding-left: 0.5rem !important; + } + + .@{class-prefix}-p-md-3 { + padding: 1rem !important; + } + + .@{class-prefix}-pt-md-3, + .@{class-prefix}-py-md-3 { + padding-top: 1rem !important; + } + + .@{class-prefix}-pr-md-3, + .@{class-prefix}-px-md-3 { + padding-right: 1rem !important; + } + + .@{class-prefix}-pb-md-3, + .@{class-prefix}-py-md-3 { + padding-bottom: 1rem !important; + } + + .@{class-prefix}-pl-md-3, + .@{class-prefix}-px-md-3 { + padding-left: 1rem !important; + } + + .@{class-prefix}-p-md-4 { + padding: 1.5rem !important; + } + + .@{class-prefix}-pt-md-4, + .@{class-prefix}-py-md-4 { + padding-top: 1.5rem !important; + } + + .@{class-prefix}-pr-md-4, + .@{class-prefix}-px-md-4 { + padding-right: 1.5rem !important; + } + + .@{class-prefix}-pb-md-4, + .@{class-prefix}-py-md-4 { + padding-bottom: 1.5rem !important; + } + + .@{class-prefix}-pl-md-4, + .@{class-prefix}-px-md-4 { + padding-left: 1.5rem !important; + } + + .@{class-prefix}-p-md-5 { + padding: 2rem !important; + } + + .@{class-prefix}-pt-md-5, + .@{class-prefix}-py-md-5 { + padding-top: 2rem !important; + } + + .@{class-prefix}-pr-md-5, + .@{class-prefix}-px-md-5 { + padding-right: 2rem !important; + } + + .@{class-prefix}-pb-md-5, + .@{class-prefix}-py-md-5 { + padding-bottom: 2rem !important; + } + + .@{class-prefix}-pl-md-5, + .@{class-prefix}-px-md-5 { + padding-left: 2rem !important; + } + + .@{class-prefix}-m-md-auto { + margin: auto !important; + } + + .@{class-prefix}-mt-md-auto, + .@{class-prefix}-my-md-auto { + margin-top: auto !important; + } + + .@{class-prefix}-mr-md-auto, + .@{class-prefix}-mx-md-auto { + margin-right: auto !important; + } + + .@{class-prefix}-mb-md-auto, + .@{class-prefix}-my-md-auto { + margin-bottom: auto !important; + } + + .@{class-prefix}-ml-md-auto, + .@{class-prefix}-mx-md-auto { + margin-left: auto !important; + } +} + +// Large screen / wide desktop - 992 +@media (min-width: @screen-lg-min) { + .@{class-prefix}-m-lg-0 { + margin: 0 !important; + } + + .@{class-prefix}-mt-lg-0, + .@{class-prefix}-my-lg-0 { + margin-top: 0 !important; + } + + .@{class-prefix}-mr-lg-0, + .@{class-prefix}-mx-lg-0 { + margin-right: 0 !important; + } + + .@{class-prefix}-mb-lg-0, + .@{class-prefix}-my-lg-0 { + margin-bottom: 0 !important; + } + + .@{class-prefix}-ml-lg-0, + .@{class-prefix}-mx-lg-0 { + margin-left: 0 !important; + } + + .@{class-prefix}-m-lg-1 { + margin: 0.25rem !important; + } + + .@{class-prefix}-mt-lg-1, + .my-lg-1 { + margin-top: 0.25rem !important; + } + + .@{class-prefix}-mr-lg-1, + .@{class-prefix}-mx-lg-1 { + margin-right: 0.25rem !important; + } + + .@{class-prefix}-mb-lg-1, + .@{class-prefix}-my-lg-1 { + margin-bottom: 0.25rem !important; + } + + .@{class-prefix}-ml-lg-1, + .@{class-prefix}-mx-lg-1 { + margin-left: 0.25rem !important; + } + + .@{class-prefix}-m-lg-2 { + margin: 0.5rem !important; + } + + .@{class-prefix}-mt-lg-2, + .@{class-prefix}-my-lg-2 { + margin-top: 0.5rem !important; + } + + .@{class-prefix}-mr-lg-2, + .@{class-prefix}-mx-lg-2 { + margin-right: 0.5rem !important; + } + + .@{class-prefix}-mb-lg-2, + .@{class-prefix}-my-lg-2 { + margin-bottom: 0.5rem !important; + } + + .@{class-prefix}-ml-lg-2, + .@{class-prefix}-mx-lg-2 { + margin-left: 0.5rem !important; + } + + .@{class-prefix}-m-lg-3 { + margin: 1rem !important; + } + + .@{class-prefix}-mt-lg-3, + .@{class-prefix}-my-lg-3 { + margin-top: 1rem !important; + } + + .@{class-prefix}-mr-lg-3, + .@{class-prefix}-mx-lg-3 { + margin-right: 1rem !important; + } + + .@{class-prefix}-mb-lg-3, + .@{class-prefix}-my-lg-3 { + margin-bottom: 1rem !important; + } + + .@{class-prefix}-ml-lg-3, + .@{class-prefix}-mx-lg-3 { + margin-left: 1rem !important; + } + + .@{class-prefix}-m-lg-4 { + margin: 1.5rem !important; + } + + .@{class-prefix}-mt-lg-4, + .@{class-prefix}-my-lg-4 { + margin-top: 1.5rem !important; + } + + .@{class-prefix}-mr-lg-4, + .@{class-prefix}-mx-lg-4 { + margin-right: 1.5rem !important; + } + + .@{class-prefix}-mb-lg-4, + .@{class-prefix}-my-lg-4 { + margin-bottom: 1.5rem !important; + } + + .@{class-prefix}-ml-lg-4, + .@{class-prefix}-mx-lg-4 { + margin-left: 1.5rem !important; + } + + .@{class-prefix}-m-lg-5 { + margin: 3rem !important; + } + + .@{class-prefix}-mt-lg-5, + .@{class-prefix}-my-lg-5 { + margin-top: 3rem !important; + } + + .@{class-prefix}-mr-lg-5, + .@{class-prefix}-mx-lg-5 { + margin-right: 3rem !important; + } + + .@{class-prefix}-mb-lg-5, + .@{class-prefix}-my-lg-5 { + margin-bottom: 3rem !important; + } + + .@{class-prefix}-ml-lg-5, + .@{class-prefix}-mx-lg-5 { + margin-left: 3rem !important; + } + + .@{class-prefix}-p-lg-0 { + padding: 0 !important; + } + + .@{class-prefix}-pt-lg-0, + .@{class-prefix}-py-lg-0 { + padding-top: 0 !important; + } + + .@{class-prefix}-pr-lg-0, + .@{class-prefix}-px-lg-0 { + padding-right: 0 !important; + } + + .@{class-prefix}-pb-lg-0, + .@{class-prefix}-py-lg-0 { + padding-bottom: 0 !important; + } + + .@{class-prefix}-pl-lg-0, + .@{class-prefix}-px-lg-0 { + padding-left: 0 !important; + } + + .@{class-prefix}-p-lg-1 { + padding: 0.25rem !important; + } + + .@{class-prefix}-pt-lg-1, + .@{class-prefix}-py-lg-1 { + padding-top: 0.25rem !important; + } + + .@{class-prefix}-pr-lg-1, + .@{class-prefix}-px-lg-1 { + padding-right: 0.25rem !important; + } + + .@{class-prefix}-pb-lg-1, + .@{class-prefix}-py-lg-1 { + padding-bottom: 0.25rem !important; + } + + .@{class-prefix}-pl-lg-1, + .@{class-prefix}-px-lg-1 { + padding-left: 0.25rem !important; + } + + .@{class-prefix}-p-lg-2 { + padding: 0.5rem !important; + } + + .@{class-prefix}-pt-lg-2, + .@{class-prefix}-py-lg-2 { + padding-top: 0.5rem !important; + } + + .@{class-prefix}-pr-lg-2, + .@{class-prefix}-px-lg-2 { + padding-right: 0.5rem !important; + } + + .@{class-prefix}-pb-lg-2, + .@{class-prefix}-py-lg-2 { + padding-bottom: 0.5rem !important; + } + + .@{class-prefix}-pl-lg-2, + .@{class-prefix}-px-lg-2 { + padding-left: 0.5rem !important; + } + + .@{class-prefix}-p-lg-3 { + padding: 1rem !important; + } + + .@{class-prefix}-pt-lg-3, + .@{class-prefix}-py-lg-3 { + padding-top: 1rem !important; + } + + .@{class-prefix}-pr-lg-3, + .@{class-prefix}-px-lg-3 { + padding-right: 1rem !important; + } + + .@{class-prefix}-pb-lg-3, + .@{class-prefix}-py-lg-3 { + padding-bottom: 1rem !important; + } + + .@{class-prefix}-pl-lg-3, + .@{class-prefix}-px-lg-3 { + padding-left: 1rem !important; + } + + .@{class-prefix}-p-lg-4 { + padding: 1.5rem !important; + } + + .@{class-prefix}-pt-lg-4, + .@{class-prefix}-py-lg-4 { + padding-top: 1.5rem !important; + } + + .@{class-prefix}-pr-lg-4, + .@{class-prefix}-px-lg-4 { + padding-right: 1.5rem !important; + } + + .@{class-prefix}-pb-lg-4, + .@{class-prefix}-py-lg-4 { + padding-bottom: 1.5rem !important; + } + + .@{class-prefix}-pl-lg-4, + .@{class-prefix}-px-lg-4 { + padding-left: 1.5rem !important; + } + + .@{class-prefix}-p-lg-5 { + padding: 2rem !important; + } + + .@{class-prefix}-pt-lg-5, + .@{class-prefix}-py-lg-5 { + padding-top: 2rem !important; + } + + .@{class-prefix}-pr-lg-5, + .@{class-prefix}-px-lg-5 { + padding-right: 2rem !important; + } + + .@{class-prefix}-pb-lg-5, + .@{class-prefix}-py-lg-5 { + padding-bottom: 2rem !important; + } + + .@{class-prefix}-pl-lg-5, + .@{class-prefix}-px-lg-5 { + padding-left: 2rem !important; + } + + .@{class-prefix}-m-lg-auto { + margin: auto !important; + } + + .@{class-prefix}-mt-lg-auto, + .@{class-prefix}-my-lg-auto { + margin-top: auto !important; + } + + .@{class-prefix}-mr-lg-auto, + .@{class-prefix}-mx-lg-auto { + margin-right: auto !important; + } + + .@{class-prefix}-mb-lg-auto, + .@{class-prefix}-my-lg-auto { + margin-bottom: auto !important; + } + + .@{class-prefix}-ml-lg-auto, + .@{class-prefix}-mx-lg-auto { + margin-left: auto !important; + } +} + +// Extra large screen / full hd - 1200 +@media (min-width: @screen-xl-min) { + .@{class-prefix}-m-xl-0 { + margin: 0 !important; + } + + .@{class-prefix}-mt-xl-0, + .@{class-prefix}-my-xl-0 { + margin-top: 0 !important; + } + + .@{class-prefix}-mr-xl-0, + .@{class-prefix}-mx-xl-0 { + margin-right: 0 !important; + } + + .@{class-prefix}-mb-xl-0, + .@{class-prefix}-my-xl-0 { + margin-bottom: 0 !important; + } + + .@{class-prefix}-ml-xl-0, + .@{class-prefix}-mx-xl-0 { + margin-left: 0 !important; + } + + .@{class-prefix}-m-xl-1 { + margin: 0.25rem !important; + } + + .@{class-prefix}-mt-xl-1, + .@{class-prefix}-my-xl-1 { + margin-top: 0.25rem !important; + } + + .@{class-prefix}-mr-xl-1, + .@{class-prefix}-mx-xl-1 { + margin-right: 0.25rem !important; + } + + .@{class-prefix}-mb-xl-1, + .@{class-prefix}-my-xl-1 { + margin-bottom: 0.25rem !important; + } + + .@{class-prefix}-ml-xl-1, + .@{class-prefix}-mx-xl-1 { + margin-left: 0.25rem !important; + } + + .@{class-prefix}-m-xl-2 { + margin: 0.5rem !important; + } + + .@{class-prefix}-mt-xl-2, + .@{class-prefix}-my-xl-2 { + margin-top: 0.5rem !important; + } + + .@{class-prefix}-mr-xl-2, + .@{class-prefix}-mx-xl-2 { + margin-right: 0.5rem !important; + } + + .@{class-prefix}-mb-xl-2, + .@{class-prefix}-my-xl-2 { + margin-bottom: 0.5rem !important; + } + + .@{class-prefix}-ml-xl-2, + .@{class-prefix}-mx-xl-2 { + margin-left: 0.5rem !important; + } + + .@{class-prefix}-m-xl-3 { + margin: 1rem !important; + } + + .@{class-prefix}-mt-xl-3, + .@{class-prefix}-my-xl-3 { + margin-top: 1rem !important; + } + + .@{class-prefix}-mr-xl-3, + .@{class-prefix}-mx-xl-3 { + margin-right: 1rem !important; + } + + .@{class-prefix}-mb-xl-3, + .@{class-prefix}-my-xl-3 { + margin-bottom: 1rem !important; + } + + .@{class-prefix}-ml-xl-3, + .@{class-prefix}-mx-xl-3 { + margin-left: 1rem !important; + } + + .@{class-prefix}-m-xl-4 { + margin: 1.5rem !important; + } + + .@{class-prefix}-mt-xl-4, + .@{class-prefix}-my-xl-4 { + margin-top: 1.5rem !important; + } + + .@{class-prefix}-mr-xl-4, + .@{class-prefix}-mx-xl-4 { + margin-right: 1.5rem !important; + } + + .@{class-prefix}-mb-xl-4, + .@{class-prefix}-my-xl-4 { + margin-bottom: 1.5rem !important; + } + + .@{class-prefix}-ml-xl-4, + .@{class-prefix}-mx-xl-4 { + margin-left: 1.5rem !important; + } + + .@{class-prefix}-m-xl-5 { + margin: 3rem !important; + } + + .@{class-prefix}-mt-xl-5, + .@{class-prefix}-my-xl-5 { + margin-top: 3rem !important; + } + + .@{class-prefix}-mr-xl-5, + .@{class-prefix}-mx-xl-5 { + margin-right: 3rem !important; + } + + .@{class-prefix}-mb-xl-5, + .@{class-prefix}-my-xl-5 { + margin-bottom: 3rem !important; + } + + .@{class-prefix}-ml-xl-5, + .@{class-prefix}-mx-xl-5 { + margin-left: 3rem !important; + } + + .@{class-prefix}-p-xl-0 { + padding: 0 !important; + } + + .@{class-prefix}-pt-xl-0, + .@{class-prefix}-py-xl-0 { + padding-top: 0 !important; + } + + .@{class-prefix}-pr-xl-0, + .@{class-prefix}-px-xl-0 { + padding-right: 0 !important; + } + + .@{class-prefix}-pb-xl-0, + .@{class-prefix}-py-xl-0 { + padding-bottom: 0 !important; + } + + .@{class-prefix}-pl-xl-0, + .@{class-prefix}-px-xl-0 { + padding-left: 0 !important; + } + + .@{class-prefix}-p-xl-1 { + padding: 0.25rem !important; + } + + .@{class-prefix}-pt-xl-1, + .@{class-prefix}-py-xl-1 { + padding-top: 0.25rem !important; + } + + .@{class-prefix}-pr-xl-1, + .@{class-prefix}-px-xl-1 { + padding-right: 0.25rem !important; + } + + .@{class-prefix}-pb-xl-1, + .@{class-prefix}-py-xl-1 { + padding-bottom: 0.25rem !important; + } + + .@{class-prefix}-pl-xl-1, + .@{class-prefix}-px-xl-1 { + padding-left: 0.25rem !important; + } + + .@{class-prefix}-p-xl-2 { + padding: 0.5rem !important; + } + + .@{class-prefix}-pt-xl-2, + .@{class-prefix}-py-xl-2 { + padding-top: 0.5rem !important; + } + + .@{class-prefix}-pr-xl-2, + .@{class-prefix}-px-xl-2 { + padding-right: 0.5rem !important; + } + + .@{class-prefix}-pb-xl-2, + .@{class-prefix}-py-xl-2 { + padding-bottom: 0.5rem !important; + } + + .@{class-prefix}-pl-xl-2, + .@{class-prefix}-px-xl-2 { + padding-left: 0.5rem !important; + } + + .@{class-prefix}-p-xl-3 { + padding: 1rem !important; + } + + .@{class-prefix}-pt-xl-3, + .@{class-prefix}-py-xl-3 { + padding-top: 1rem !important; + } + + .@{class-prefix}-pr-xl-3, + .@{class-prefix}-px-xl-3 { + padding-right: 1rem !important; + } + + .@{class-prefix}-pb-xl-3, + .@{class-prefix}-py-xl-3 { + padding-bottom: 1rem !important; + } + + .@{class-prefix}-pl-xl-3, + .@{class-prefix}-px-xl-3 { + padding-left: 1rem !important; + } + + .@{class-prefix}-p-xl-4 { + padding: 1.5rem !important; + } + + .@{class-prefix}-pt-xl-4, + .@{class-prefix}-py-xl-4 { + padding-top: 1.5rem !important; + } + + .@{class-prefix}-pr-xl-4, + .@{class-prefix}-px-xl-4 { + padding-right: 1.5rem !important; + } + + .@{class-prefix}-pb-xl-4, + .@{class-prefix}-py-xl-4 { + padding-bottom: 1.5rem !important; + } + + .@{class-prefix}-pl-xl-4, + .@{class-prefix}-px-xl-4 { + padding-left: 1.5rem !important; + } + + .@{class-prefix}-p-xl-5 { + padding: 2rem !important; + } + + .@{class-prefix}-pt-xl-5, + .@{class-prefix}-py-xl-5 { + padding-top: 2rem !important; + } + + .@{class-prefix}-pr-xl-5, + .@{class-prefix}-px-xl-5 { + padding-right: 2rem !important; + } + + .@{class-prefix}-pb-xl-5, + .@{class-prefix}-py-xl-5 { + padding-bottom: 2rem !important; + } + + .@{class-prefix}-pl-xl-5, + .@{class-prefix}-px-xl-5 { + padding-left: 2rem !important; + } + + .@{class-prefix}-m-xl-auto { + margin: auto !important; + } + + .@{class-prefix}-mt-xl-auto, + .@{class-prefix}-my-xl-auto { + margin-top: auto !important; + } + + .@{class-prefix}-mr-xl-auto, + .@{class-prefix}-mx-xl-auto { + margin-right: auto !important; + } + + .@{class-prefix}-mb-xl-auto, + .@{class-prefix}-my-xl-auto { + margin-bottom: auto !important; + } + + .@{class-prefix}-ml-xl-auto, + .@{class-prefix}-mx-xl-auto { + margin-left: auto !important; + } +} diff --git a/src/styles/base/index.less b/src/styles/base/index.less new file mode 100644 index 000000000..77f12e925 --- /dev/null +++ b/src/styles/base/index.less @@ -0,0 +1,4 @@ +@import 'base'; +@import "row-col"; +@import "gx-margin-padding"; +@import "typography"; diff --git a/src/styles/base/row-col.less b/src/styles/base/row-col.less new file mode 100644 index 000000000..0837450b0 --- /dev/null +++ b/src/styles/base/row-col.less @@ -0,0 +1,41 @@ +// mixins for grid system +// ------------------------ +.gx-make-row() { + margin-left: (@grid-gutter-width / -2); + margin-right: (@grid-gutter-width / -2); +} + +.make-grid-columns() { + .col(@index) { + @item: ~".@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}"; + .col((@index + 1), @item); + } + .col(@index, @list) when (@index =< @grid-columns) { + @item: ~".@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}"; + .col((@index + 1), ~"@{list}, @{item}"); + } + .col(@index, @list) when (@index > @grid-columns) { + @{list} { + // Prevent columns from collapsing when empty + padding-left: (@grid-gutter-width / 2); + padding-right: (@grid-gutter-width / 2); + float: none !important; + } + } + .col(1); +} + +// Grid system +.ant-row { + .gx-make-row(); + .flex-display(flex, row, wrap); +} + +.@{class-prefix}-col { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + padding-left: (@grid-gutter-width / 2); + padding-right: (@grid-gutter-width / 2); +} + diff --git a/src/styles/base/typography.less b/src/styles/base/typography.less new file mode 100644 index 000000000..51926bd67 --- /dev/null +++ b/src/styles/base/typography.less @@ -0,0 +1,205 @@ +/*Typography Styles*/ +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + color: @heading-color; + font-weight: @headings-font-weight; + line-height: @headings-line-height; +} + +h1, .h1 { + font-size: @h1-font-size; + + .framed-layout & { + font-size: @h2-font-size; + + @media screen and (max-width: @screen-sm-max) { + font-size: @h3-font-size; + } + } + + .boxed-layout & { + font-size: @h3-font-size; + + @media screen and (max-width: @screen-sm-max) { + font-size: @h4-font-size; + } + } + + @media screen and (max-width: @screen-sm-max) { + font-size: @h3-font-size; + } + + @media screen and (max-width: @screen-xl-max) { + font-size: @h2-font-size; + } + + @media screen and (min-width: @screen-xxl-min) { + font-size: @h1-font-size + 6px; + + .boxed-layout & { + font-size: @h3-font-size; + } + } +} + +h2, .h2 { + font-size: @h2-font-size; + + @media screen and (max-width: @screen-sm-max) { + font-size: @h3-font-size; + } +} + +h3, .h3 { + font-size: @h3-font-size; + + @media screen and (max-width: @screen-sm-max) { + font-size: @h4-font-size; + } +} + +h4, .h4 { + font-size: @h4-font-size; +} + +h5, .h5 { + font-size: @h5-font-size; +} + +h6, .h6 { + font-size: @h6-font-size; +} + +.@{class-prefix}-h1-lg { + font-size: @h1-font-size + 6px; +} + +.@{class-prefix}-text-strikethrough { + text-decoration: line-through !important; +} + +/*Font size Classes*/ +.@{class-prefix}-fs-xxs { + font-size: @font-size-sm - 4px; +} + +.@{class-prefix}-fs-xs { + font-size: @font-size-sm - 2px; +} + +.@{class-prefix}-fs-sm { + font-size: @font-size-sm; +} + +.@{class-prefix}-fs-md { + font-size: @font-size-base; +} + +.@{class-prefix}-fs-lg { + font-size: @font-size-lg; +} + +.@{class-prefix}-fs-xl { + font-size: @font-size-lg + 4px; +} + +.@{class-prefix}-fs-xxl { + font-size: @font-size-lg + 8px; +} + +// Text Transform class +.@{class-prefix}-text-lowercase { + text-transform: lowercase; +} + +.@{class-prefix}-text-uppercase { + text-transform: uppercase; +} + +.@{class-prefix}-text-capitalize { + text-transform: capitalize; +} + +// Font Weight class +.@{class-prefix}-font-weight-thin { + font-weight: @font-weight-thin; +} + +.@{class-prefix}-font-weight-extra-light { + font-weight: @font-weight-extra-light; +} + +.@{class-prefix}-font-weight-light { + font-weight: @font-weight-light; +} + +.@{class-prefix}-font-weight-normal { + font-weight: @font-weight-normal; +} + +.@{class-prefix}-font-weight-medium { + font-weight: @font-weight-medium; +} + +.@{class-prefix}-font-weight-semi-bold { + font-weight: @font-weight-semi-bold; +} + +.@{class-prefix}-font-weight-bold { + font-weight: @font-weight-medium; +} + +.@{class-prefix}-font-weight-extra-bold { + font-weight: @font-weight-extra-bold; +} + +.@{class-prefix}-font-weight-black { + font-weight: @font-weight-black; +} + +// Font Italic class +.@{class-prefix}-font-italic { + font-style: italic; +} + +// Letter Spacing class +.@{class-prefix}-letter-spacing-base { + letter-spacing: @letter-spacing-base; +} + +.@{class-prefix}-letter-spacing-lg { + letter-spacing: @letter-spacing-lg; +} + +.@{class-prefix}-letter-spacing-xl { + letter-spacing: @letter-spacing-xl; +} + +// Text class +.@{class-prefix}-text-justify { + text-align: justify !important; +} + +.@{class-prefix}-text-nowrap { + white-space: nowrap !important; +} + +.@{class-prefix}-text-left { + text-align: left !important; +} + +.@{class-prefix}-text-right { + text-align: right !important; +} + +.@{class-prefix}-text-center { + text-align: center !important; +} + +// class use for extend +.gx-text-truncate { + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} diff --git a/src/styles/dark-theme.less b/src/styles/dark-theme.less new file mode 100644 index 000000000..03dd6d8f6 --- /dev/null +++ b/src/styles/dark-theme.less @@ -0,0 +1,2253 @@ +//global style variables +@dark-theme-primary-color: #38424B; +@dark-theme-secondary-color: lighten(@dark-theme-primary-color, 10%); +@dark-theme-text-color: #E0E0E0; +@dark-theme-heading-color: lighten(@dark-theme-text-color, 5%); +@dark-theme-sidebar-dark-bg: darken(@dark-theme-primary-color, 2%); +@dark-theme-component-background: #434f5a; +@dark-theme-sidebar-dark-text-color: #a1a1a1; +@dark-theme-sidebar-dark-bg-darken: lighten(@dark-theme-sidebar-dark-bg, 6%); +@dark-theme-sidebar-dark-hover-color: @dark-theme-component-background; +@dark-theme-border-color: #495762; + +/*Base Styles*/ +body.dark-theme { + &.framed-layout, + &.boxed-layout { + background-color: darken(@dark-theme-primary-color, 10%); + } +} + +.dark-theme { + color: @dark-theme-text-color; + background-color: @dark-theme-primary-color; + + & a { + color: darken(@dark-theme-text-color, 10%); + } + + & a:hover, + & a:focus { + color: lighten(@dark-theme-text-color, 3%); + } + + & .@{class-prefix}-social-link { + & li a { + color: @dark-theme-text-color; + } + + & li.active a, + & li a:hover, + & li a:focus { + color: lighten(@dark-theme-text-color, 30%); + } + } + + & h1, & h2, & h3, & h4, & h5, & h6, + & .h1, & .h2, & .h3, & .h4, & .h5, & .h6 { + color: @dark-theme-heading-color; + } + + & .@{class-prefix}-drawer-sidebar-dark .ant-drawer-content { + background-color: @dark-theme-sidebar-dark-bg; + } + + & .ant-drawer-right .ant-drawer-content-wrapper, + & .ant-drawer-right .ant-drawer-content { + background: @dark-theme-primary-color; + } + + & .ant-drawer-close { + color: @dark-theme-text-color; + + &:hover, + &:focus { + color: @white-color; + } + } + + & .ant-layout { + background: @dark-theme-primary-color; + } + + & .ant-layout-header { + background: @dark-theme-primary-color; + color: @dark-theme-text-color; + } + + & .ant-layout-footer { + background: @dark-theme-primary-color; + color: @dark-theme-text-color; + border-top-color: @dark-theme-border-color; + } + + & .@{class-prefix}-nav-header { + background-color: @dark-theme-primary-color; + border-bottom-color: @dark-theme-border-color; + } + + & .ant-menu { + color: @dark-theme-text-color; + background: @dark-theme-sidebar-dark-bg; + } + + & .ant-menu-inline, + & .ant-menu-vertical, + & .ant-menu-vertical-left { + border-right-color: @dark-theme-border-color; + } + + & .ant-menu-dark { + color: @dark-theme-text-color; + background: @dark-theme-sidebar-dark-bg; + + & .ant-menu-submenu-title .ant-menu-submenu-arrow:after, + & .ant-menu-submenu-title .ant-menu-submenu-arrow:before { + background: @white-color; + } + } + + & .ant-menu-dark .ant-menu-sub { + color: @dark-theme-text-color; + background: none; + + & .ant-menu-submenu-title .ant-menu-submenu-arrow:after, + & .ant-menu-submenu-title .ant-menu-submenu-arrow:before { + background: @white-color; + } + } + + & .ant-menu-dark.ant-menu-horizontal { + border-bottom-color: @dark-theme-sidebar-dark-bg; + } + + & .ant-menu-dark.ant-menu-horizontal > .ant-menu-item, + & .ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu { + border-color: @dark-theme-sidebar-dark-bg; + } + + & .ant-menu-horizontal { + border-bottom-color: @dark-theme-border-color; + background: @dark-theme-primary-color; + } + + & .ant-menu-horizontal > .ant-menu-item:hover, + & .ant-menu-horizontal > .ant-menu-submenu:hover, + & .ant-menu-horizontal > .ant-menu-item-active, + & .ant-menu-horizontal > .ant-menu-submenu-active, + & .ant-menu-horizontal > .ant-menu-item-open, + & .ant-menu-horizontal > .ant-menu-submenu-open, + & .ant-menu-horizontal > .ant-menu-item-selected, + & .ant-menu-horizontal > .ant-menu-submenu-selected { + border-bottom-color: @dark-theme-text-color; + color: @dark-theme-text-color; + } + + & .ant-menu-horizontal > .ant-menu-item > a, + & .ant-menu-horizontal > .ant-menu-submenu > a { + color: @dark-theme-text-color; + } + + & .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { + background-color: lighten(@dark-theme-component-background, 5%); + color: @dark-theme-text-color; + } + + & .ant-layout-sider .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { + background-color: fade(@white-color, 12%); + } + + & .ant-menu-submenu > .ant-menu, + & .ant-menu-item:active, + & .ant-menu-submenu-title:active { + background-color: lighten(@dark-theme-component-background, 5%); + color: @dark-theme-text-color; + } + + & .ant-layout-sider .ant-menu-submenu > .ant-menu, + & .ant-layout-sider .ant-menu-item:active, + & .ant-layout-sider .ant-menu-submenu-title:active { + background-color: transparent; + } + + & .ant-menu-item-group-title, + & .ant-menu-item-selected, + & .ant-menu-submenu-selected .ant-menu-submenu-title { + color: @dark-theme-text-color; + } + + & .ant-menu-item:hover, + & .ant-menu-item-active, + & .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, + & .ant-menu-submenu-active, + & .ant-menu-submenu-title:hover { + color: @dark-theme-text-color; + } + + & .ant-menu-item-disabled, + & .ant-menu-submenu-disabled { + color: darken(@dark-theme-text-color, 25%) !important; + } + + & .ant-menu-dark .ant-menu-item-group-title { + color: @dark-theme-text-color; + } + + & .ant-menu-dark .ant-menu-item { + color: @dark-theme-text-color; + } + + & .ant-menu-dark .ant-menu-item > a { + color: @white-color; + } + + & .ant-menu-submenu-horizontal { + & > .ant-menu-submenu-title { + color: @dark-theme-text-color; + } + } + + & .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::before, + & .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::before, + & .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::before, + & .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::before, + & .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow::after, + & .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow::after, + & .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow::after, + & .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow::after { + background: @white-color; + } + + & .ant-menu-vertical .ant-menu-item::after, + & .ant-menu-vertical-left .ant-menu-item::after, + & .ant-menu-vertical-right .ant-menu-item::after, + & .ant-menu-inline .ant-menu-item::after { + border-right-color: darken(@dark-theme-border-color, 30%); + } + + & .ant-layout-sider, + & .@{class-prefix}-layout-sider-dark { + background-color: @dark-theme-sidebar-dark-bg; + color: @dark-theme-sidebar-dark-text-color; + .box-shadow(0px 0 4px rgba(0, 0, 0, 0.35)); + } + + & .@{class-prefix}-task-list-item { + + &:not(:last-child) { + border-bottom-color: @dark-theme-border-color; + } + + &:hover .gx-text-hover { + color: darken(@dark-theme-text-color, 10%); + } + } + + & .@{class-prefix}-card-ticketlist .@{class-prefix}-task-list-item { + + &:hover { + background-color: lighten(@dark-theme-component-background, 5%); + + & .@{class-prefix}-task-item-title { + color: lighten(@dark-theme-text-color, 3%); + } + } + } + + & .@{class-prefix}-card-testimonial-content { + background-color: @dark-theme-primary-color; + + &:before { + border-right-color: @dark-theme-primary-color; + } + } + + & .@{class-prefix}-progress-task-list { + & + .@{class-prefix}-progress-task-list { + border-top-color: @dark-theme-border-color; + } + } + + & .@{class-prefix}-card-ticketlist { + & a { + color: darken(@dark-theme-text-color, 10%); + } + } + + & .@{class-prefix}-overview-description { + border-left-color: @dark-theme-border-color; + + @media screen and (max-width: @screen-sm-max) { + border-top-color: @dark-theme-border-color; + border-bottom-color: @dark-theme-border-color; + } + } + + & .@{class-prefix}-revenu { + + &-total { + border-bottom-color: @dark-theme-border-color; + } + + &-col:not(:last-child) { + border-right-color: @dark-theme-border-color; + } + } + + & .@{class-prefix}-product-item { + background: @dark-theme-component-background; + } + + & .@{class-prefix}-login-content { + background-color: @dark-theme-component-background; + + & .ant-input { + background-color: @grey-6; + + &:focus { + border-color: @dark-theme-primary-color; + } + } + } + + & .@{class-prefix}-app-login-main-content { + background-color: @dark-theme-component-background; + } + + & .@{class-prefix}-app-login-content .ant-input { + background-color: @grey-6; + + &:focus { + border-color: @dark-theme-primary-color; + } + } + + & .@{class-prefix}-app-logo-content { + color: @dark-theme-text-color; + + &:before { + background-color: fade(@dark-theme-primary-color, 70%); + } + + & h1 { + color: @dark-theme-text-color; + } + } + + & .@{class-prefix}-app-social-block { + + & .@{class-prefix}-social-link span { + border-color: @dark-theme-primary-color; + color: @dark-theme-primary-color; + + &:hover, + &:focus { + color: @dark-theme-text-color; + background-color: @dark-theme-primary-color; + } + } + } + + & .@{class-prefix}-avatar-img, + & .@{class-prefix}-avatar, + & .@{class-prefix}-badge-outline { + border-color: @dark-theme-border-color; + } + + & .@{class-prefix}-btn, + & .btn { + color: @btn-default-color; + border-color: @btn-default-border; + } + + & .@{class-prefix}-sub-popover .@{class-prefix}-btn, + & .@{class-prefix}-sub-popover .btn { + &:focus, + &:hover { + background-color: @dark-theme-text-color; + } + } + + & .@{class-prefix}-btn-link { + color: darken(@dark-theme-text-color, 10%); + background-color: transparent; + + &:hover { + color: lighten(@dark-theme-text-color, 3%); + } + } + + & .@{class-prefix}-ant-card-actions > li { + &:not(:last-child) { + border-right-color: @dark-theme-border-color; + } + } + + & .ant-card { + color: @dark-theme-text-color; + background: @dark-theme-component-background; + + &-bordered { + border-color: @dark-theme-border-color; + } + + &-head { + border-color: @dark-theme-border-color; + + &-title { + color: @dark-theme-text-color; + } + } + + &-type-inner .ant-card-head { + background: @dark-theme-component-background; + } + + &-meta-title, + &-meta-description { + color: @dark-theme-text-color; + } + + &-actions { + border-top-color: @dark-theme-border-color; + background: @dark-theme-component-background; + + > li { + color: @dark-theme-text-color; + + &:not(:last-child) { + border-right-color: @dark-theme-border-color; + } + + & > span:hover { + color: lighten(@dark-theme-text-color, 3%); + } + } + } + + &-grid { + box-shadow: 1px 0 0 0 @dark-theme-border-color, 0 1px 0 0 @dark-theme-border-color, 1px 1px 0 0 @dark-theme-border-color, 1px 0 0 0 @dark-theme-border-color inset, 0 1px 0 0 @dark-theme-border-color inset; + + &:hover { + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + } + } + } + + & .@{class-prefix}-card { + background-color: @dark-theme-component-background; + } + + & .@{class-prefix}-card-overview { + background-color: @dark-theme-component-background; + } + + & .@{class-prefix}-card-metrics, + & .@{class-prefix}-card-widget { + .box-shadow(0 1px 4px 0 rgba(0, 0, 0, .15)); + } + + & .@{class-prefix}-icon-views:hover { + background-color: @dark-theme-primary-color; + color: @dark-theme-text-color; + } + + & .@{class-prefix}-search-bar { + + & input[type="search"] { + background: fade(@grey-2, 10%); + + &:focus { + background-color: fade(@grey-2, 30%); + } + } + + & .@{class-prefix}-search-icon { + color: lighten(@grey-6, 10%); + } + } + + & .@{class-prefix}-chat-search-bar { + + & input[type="search"]:focus { + background-color: @dark-theme-component-background; + } + } + + & .@{class-prefix}-user-list { + + &.@{class-prefix}-card-list { + background: @dark-theme-component-background; + } + + & a[class*="gx-meta-"] { + color: @dark-theme-text-color; + } + } + + & .@{class-prefix}-card-strip:not(:last-child) { + border-bottom-color: @dark-theme-border-color; + } + + & .@{class-prefix}-loader-container { + background-color: @grey-6; + } + + & .@{class-prefix}-table { + + & th, + & td { + border-top-color: @dark-theme-border-color; + } + + & thead th { + border-bottom-color: @dark-theme-border-color; + } + + & tbody + tbody { + border-top-color: @dark-theme-border-color; + } + } + + & .@{class-prefix}-table-bordered { + border-color: @dark-theme-border-color; + + & th, + & td { + border-color: @dark-theme-border-color; + } + } + + & .@{class-prefix}-timeline-item:before { + border-left-color: @dark-theme-border-color; + } + + & .@{class-prefix}-timeline-badge { + color: @dark-theme-component-background; + + &:after { + border-color: @dark-theme-border-color; + } + } + + & .@{class-prefix}-timeline-panel { + background-color: @dark-theme-component-background; + border-color: @dark-theme-border-color; + + &:before { + border-color: transparent @dark-theme-border-color; + } + + &:after { + border-color: transparent @dark-theme-component-background; + } + } + + & .@{class-prefix}-timeline-center .@{class-prefix}-timeline-inverted:before { + border-right-color: @dark-theme-border-color; + } + + & .ant-tabs { + color: @dark-theme-text-color; + + &-nav .ant-tabs-tab-active, + &-nav .ant-tabs-tab:hover { + color: darken(@dark-theme-text-color, 10%); + } + + &-ink-bar { + background-color: darken(@dark-theme-text-color, 10%); + } + + &-bar { + border-bottom-color: @dark-theme-border-color; + } + + &-tab-prev, + &-tab-next { + color: @dark-theme-text-color; + + &:hover { + color: @white-color; + } + } + + &-tab-btn-disabled, + &-tab-btn-disabled:hover { + color: darken(@dark-theme-text-color, 40%); + } + + &.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab { + border-color: lighten(@dark-theme-component-background, 8%); + border-bottom-color: @dark-theme-component-background; + background: lighten(@dark-theme-component-background, 2%); + } + + &.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active { + background: @dark-theme-component-background; + border-color: lighten(@dark-theme-component-background, 8%); + border-bottom-color: @dark-theme-component-background; + color: @white-color; + } + + &.ant-tabs-card > .ant-tabs-bar .ant-tabs-tab .anticon-close { + color: @dark-theme-text-color; + + &:hover { + color: @white-color; + } + } + } + + & .ant-checkbox { + &-wrapper { + color: @dark-theme-text-color; + } + + &-disabled + span { + color: darken(@dark-theme-text-color, 30%); + } + + &-checked::after, + &-wrapper:hover .ant-checkbox-inner, + &:hover .ant-checkbox-inner, + &-input:focus + .ant-checkbox-inner { + border-color: lighten(@dark-theme-component-background, 20%); + } + + &-checked .ant-checkbox-inner, + &-indeterminate .ant-checkbox-inner { + background-color: lighten(@dark-theme-component-background, 20%); + border-color: lighten(@dark-theme-component-background, 20%); + } + } + + & .ant-timeline { + color: @dark-theme-text-color; + + &-item-head { + background-color: transparent; + } + + &-item-tail { + border-left-color: lighten(@dark-theme-border-color, 8%); + } + + &-item-head-blue { + border-color: lighten(@dark-theme-border-color, 8%); + color: lighten(@dark-theme-text-color, 3%); + } + } + + & .ant-popover { + &-inner, + &-arrow { + background-color: @dark-theme-component-background; + } + + &-inner { + .box-shadow(0 0 4px rgba(0, 0, 0, 0.28)); + } + + &-inner-content, + &-message { + color: @dark-theme-text-color; + } + + &-title { + border-bottom-color: @dark-theme-border-color; + color: @dark-theme-text-color; + } + } + + & .@{class-prefix}-sub-popover li:not(:last-child), + & .@{class-prefix}-popover-header { + border-bottom-color: @dark-theme-border-color; + } + + & .@{class-prefix}-user-popover li { + &:hover, + &:focus { + background-color: lighten(@dark-theme-component-background, 5%); + } + } + + & .ant-divider { + color: @dark-theme-text-color; + background: @dark-theme-border-color; + + &.ant-divider-with-text, + &.ant-divider-with-text-left, + &.ant-divider-with-text-right { + background: none; + } + } + + & .@{class-prefix}-card-body-border-top .ant-card-body { + border-top-color: @dark-theme-border-color; + } + + & .ant-list { + color: @dark-theme-text-color; + + &-split .ant-list-item, + &-split .ant-list-header, + &-something-after-last-item .ant-spin-container > .ant-list-item:last-child { + border-bottom-color: @dark-theme-border-color; + } + + &-item-meta-description, + &-vertical .ant-list-item-content, + &-item-action > li { + color: @dark-theme-text-color; + } + + &-bordered { + border-color: @dark-theme-border-color; + } + + &-item-action-split { + background-color: @dark-theme-border-color; + } + } + + & .@{class-prefix}-btn-light, + & a.@{class-prefix}-btn-light { + color: @dark-theme-text-color !important; + background-color: @dark-theme-primary-color !important; + border-color: @dark-theme-primary-color !important; + + &:hover, + &:focus { + background-color: darken(@dark-theme-primary-color, 10%) !important; + border-color: darken(@dark-theme-primary-color, 10%) !important; + } + } + + & .ant-table { + color: @dark-theme-text-color; + + &-thead > tr > th { + background: lighten(@dark-theme-component-background, 5%); + color: @dark-theme-text-color; + border-bottom-color: @dark-theme-border-color; + } + + &-tbody > tr > td { + border-bottom-color: @dark-theme-border-color; + } + + &-thead > tr, + &-tbody > tr { + &.@{table-prefix-cls}-row-hover > td, + &:hover > td { + background: lighten(@dark-theme-component-background, 5%); + } + } + + &-tbody > tr.ant-table-row-selected td { + background: lighten(@dark-theme-component-background, 5%); + } + + &-small { + border-color: @dark-theme-border-color; + } + + &-small > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th, + &-small > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th, + &-small > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th, + &-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th, + &-small > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th, + &-small > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th, + &-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th, + &-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th { + background: lighten(@dark-theme-component-background, 5%); + border-bottom-color: @dark-theme-border-color; + } + + &.ant-table-bordered .ant-table-title, + &-bordered .ant-table-header > table, + &-bordered .ant-table-body > table, + &-bordered .ant-table-fixed-left table, + &-bordered .ant-table-fixed-right table, + &.ant-table-bordered .ant-table-footer { + border-color: @dark-theme-border-color; + } + + &-header { + background: lighten(@dark-theme-component-background, 5%); + } + + &-footer { + background: lighten(@dark-theme-component-background, 5%); + + &:before { + background: transparent; + } + } + + &-bordered .ant-table-thead > tr > th, + &-bordered .ant-table-tbody > tr > td { + border-right-color: @dark-theme-border-color; + } + + &-bordered .ant-table-thead > tr:not(:last-child) > th { + border-bottom-color: @dark-theme-border-color; + } + + &-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body { + background: @dark-theme-component-background; + } + + &-fixed-left table, + &-fixed-right table { + background: lighten(@dark-theme-component-background, 5%); + } + + &-thead > tr > th .anticon-filter, + &-thead > tr > th .ant-table-filter-icon { + color: @dark-theme-text-color; + + &:hover { + color: @white-color; + } + } + + &-column-sorter { + color: @dark-theme-text-color; + + &-up:hover .anticon, + &-down:hover .anticon, + &-up.on .anticon-caret-up, + &-down.on .anticon-caret-up, + &-up.on .anticon-caret-down, + &-down.on .anticon-caret-down { + color: @white-color; + } + } + + &-row-expand-icon { + background: none; + } + } + + tr.ant-table-expanded-row, + tr.ant-table-expanded-row:hover { + background: lighten(@dark-theme-component-background, 5%); + } + + & .ant-pagination { + color: @dark-theme-text-color; + + &-item { + background-color: darken(@dark-theme-component-background, 5%); + border-color: @dark-theme-border-color; + + &-active, + &:hover, + &:focus { + border-color: @dark-theme-border-color; + + & a { + color: @dark-theme-text-color; + } + } + } + + &-disabled a, + &-disabled:hover a, + &-disabled:focus a, + &-disabled .ant-pagination-item-link, + &-disabled:hover .ant-pagination-item-link, + &-disabled:focus .ant-pagination-item-link { + color: darken(@dark-theme-text-color, 45%); + } + + &-prev, + &-next, + &-jump-prev, + &-jump-next { + color: @dark-theme-text-color; + } + + &-prev .ant-pagination-item-link, + &-next .ant-pagination-item-link { + background-color: darken(@dark-theme-component-background, 5%); + border-color: @dark-theme-border-color; + } + + &-prev:focus .ant-pagination-item-link, + &-next:focus .ant-pagination-item-link, + &-prev:hover .ant-pagination-item-link, + &-next:hover .ant-pagination-item-link { + border-color: @dark-theme-border-color; + color: @dark-theme-text-color; + } + + &-jump-prev:focus:after, + &-jump-next:focus:after, + &-jump-prev:hover:after, + &-jump-next:hover:after { + color: @dark-theme-text-color; + } + + &-simple .ant-pagination-simple-pager input { + background-color: fade(@grey-2, 10%); + border-color: fade(@grey-2, 10%); + color: @dark-theme-text-color; + + &:hover { + border-color: fade(@grey-2, 30%); + } + } + + &-options-quick-jumper input { + background-color: fade(@grey-2, 10%); + border-color: fade(@grey-2, 10%); + color: @dark-theme-text-color; + + &:hover { + border-color: fade(@grey-2, 10%); + } + + &:focus { + border-color: @dark-theme-border-color; + .box-shadow(0 0 0 1px rgba(0, 0, 0, 0.1)); + } + } + } + + & .ant-badge { + color: @dark-theme-text-color; + + &-status-text { + color: @dark-theme-text-color; + } + + &-count { + .box-shadow(0 0 0 1px rgba(0, 0, 0, .15)); + } + } + + & .ant-cascader { + &-picker { + &:focus .ant-cascader-input { + border-color: @dark-theme-border-color; + .box-shadow(0 0 0 1px rgba(0, 0, 0, 0.1)); + } + } + + &-menus { + background: darken(@dark-theme-component-background, 5%); + } + + &-menu { + border-right-color: @dark-theme-border-color; + } + + &-menu-item:hover { + background: darken(@dark-theme-component-background, 8%); + } + + &-picker, + &-picker-clear { + background-color: transparent; + color: @dark-theme-text-color; + } + + &-picker-arrow, + &-menu-item-expand:after { + color: @dark-theme-text-color; + } + + &-menu-item-active:not(.ant-cascader-menu-item-disabled), + &-menu-item-active:not(.ant-cascader-menu-item-disabled):hover { + background: lighten(@dark-theme-component-background, 5%); + } + } + + & .ant-form { + &-item, + &-item-label label, + &-explain, + &-extra { + color: @dark-theme-text-color; + } + } + + & .ant-input { + background-color: fade(@grey-2, 10%) !important; + border-color: fade(@grey-2, 10%); + color: @dark-theme-text-color; + + &:focus, + &:hover { + border-color: fade(@grey-3, 10%); + .box-shadow(0 0 0 1px rgba(0, 0, 0, 0.1)); + } + + &-number { + background-color: fade(@grey-2, 10%); + border-color: fade(@grey-2, 10%); + color: @dark-theme-text-color; + + &:focus, + &:hover { + border-color: fade(@grey-3, 10%); + .box-shadow(0 0 0 1px rgba(0, 0, 0, 0.1)); + } + } + + &-affix-wrapper:hover .ant-input:not(.ant-input-disabled) { + border-color: @dark-theme-border-color; + } + + &-group-addon { + background-color: fade(@grey-2, 10%); + border-color: fade(@grey-2, 10%); + color: @dark-theme-text-color; + + & .ant-select-open .ant-select-selection, + & .ant-select-focused .ant-select-selection { + color: @dark-theme-text-color; + } + } + + &-search-icon { + color: @dark-theme-text-color; + } + + &-affix-wrapper .ant-input-prefix, + &-affix-wrapper .ant-input-suffix { + color: @dark-theme-text-color; + + & i { + color: @dark-theme-text-color !important; + } + } + } + + & .ant-input.@{class-prefix}-chat-textarea { + background-color: @dark-theme-component-background !important; + border-color: @dark-theme-component-background; + color: @dark-theme-text-color; + + &:focus { + border-color: @dark-theme-border-color; + } + } + + & .ant-modal .ant-input { + background-color: @white-color !important; + border-color: lighten(@dark-theme-border-color, 55%); + color: @grey-8; + + &:focus, + &:hover { + border-color: lighten(@dark-theme-border-color, 50%); + } + } + + & .ant-modal .ant-upload-list-item-info .anticon-paper-clip { + color: @grey-8; + } + + & .ant-mention { + &-wrapper { + color: @dark-theme-text-color; + + &.disabled .ant-mention-editor { + background-color: fade(@grey-4, 10%); + color: @dark-theme-text-color; + } + + &.ant-mention-active:not(.disabled) .ant-mention-editor { + border-color: fade(@grey-3, 10%); + .box-shadow(0 0 0 1px rgba(0, 0, 0, 0.1)); + } + } + + &-wrapper .ant-mention-editor { + background-color: fade(@grey-2, 10%); + border-color: fade(@grey-2, 10%); + color: @dark-theme-text-color; + + &:focus { + border-color: fade(@grey-3, 10%); + .box-shadow(0 0 0 1px rgba(0, 0, 0, 0.1)); + } + } + } + + & .ant-select { + color: @dark-theme-text-color; + + &-selection { + background-color: fade(@grey-2, 10%); + border-color: fade(@grey-2, 10%); + + &:hover { + border-color: fade(@grey-2, 10%); + } + } + + &-arrow { + color: @dark-theme-text-color; + } + + &-focused .ant-select-selection, + &-selection:focus, + &-selection:active { + border-color: fade(@grey-3, 10%); + .box-shadow(0 0 0 1px rgba(0, 0, 0, 0.1)); + } + + &-dropdown { + color: @dark-theme-text-color; + background-color: darken(@dark-theme-component-background, 5%); + } + + &-dropdown-menu-item { + color: @dark-theme-text-color; + + &:hover { + background-color: darken(@dark-theme-component-background, 7%); + } + + &-selected, + &-selected:hover, + &-active { + background-color: darken(@dark-theme-component-background, 8%); + color: @dark-theme-text-color; + } + } + + &-auto-complete.ant-select .ant-input:focus, + &-auto-complete.ant-select .ant-input:hover { + border-color: fade(@grey-2, 10%); + } + + &-dropdown-menu-item-group-title { + color: @dark-theme-text-color; + } + + &-auto-complete.ant-select textarea.ant-input { + background: fade(@grey-2, 10%) !important; + } + + &-tree, + &-tree li .ant-select-tree-node-content-wrapper { + color: @dark-theme-text-color; + } + + &-tree li .ant-select-tree-node-content-wrapper:hover, + &-tree li .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected { + background-color: lighten(@dark-theme-component-background, 5%); + } + + &-tree-dropdown .ant-select-dropdown-search .ant-select-search__field, + &-tree-checkbox-checked .ant-select-tree-checkbox-inner, + &-tree-checkbox-indeterminate .ant-select-tree-checkbox-inner { + border-color: lighten(@dark-theme-component-background, 5%); + background-color: lighten(@dark-theme-component-background, 5%); + } + } + + & .ant-select-show-search .ant-select-selection { + background-color: transparent; + .box-shadow(none); + } + + & .ant-transfer { + &-list-search-action, + &-list-search-action i { + color: @dark-theme-text-color; + } + + &-list { + border-color: lighten(@dark-theme-component-background, 8%); + color: @dark-theme-text-color; + } + + &-list-body-with-search { + background-color: lighten(@dark-theme-component-background, 5%); + } + + &-list-header { + background-color: lighten(@dark-theme-component-background, 5%); + border-color: lighten(@dark-theme-component-background, 8%); + color: @dark-theme-text-color; + } + + &-list-content-item:not(.ant-transfer-list-content-item-disabled):hover { + background-color: lighten(@dark-theme-component-background, 8%); + } + + &-list-footer { + border-top-color: lighten(@dark-theme-component-background, 8%); + background-color: lighten(@dark-theme-component-background, 5%); + } + + &-list-content-item-disabled { + color: darken(@dark-theme-text-color, 40%); + } + } + + & .ant-calendar { + background-color: lighten(@dark-theme-component-background, 5%); + border-color: lighten(@dark-theme-component-background, 5%); + color: @dark-theme-text-color; + + &-today .ant-calendar-date { + border-color: lighten(@dark-theme-component-background, 25%); + color: lighten(@dark-theme-component-background, 25%); + background-color: lighten(@dark-theme-component-background, 15%); + } + + &-selected-date .ant-calendar-date, + &-selected-start-date .ant-calendar-date, + &-selected-end-date .ant-calendar-date, + &-selected-day .ant-calendar-date { + background: lighten(@dark-theme-component-background, 25%); + color: @dark-theme-text-color; + } + + &-month-panel-selected-cell .ant-calendar-month-panel-month:hover, + &-month-panel-selected-cell .ant-calendar-month-panel-month, + &-year-panel-selected-cell .ant-calendar-year-panel-year, + &-year-panel-selected-cell .ant-calendar-year-panel-year:hover, + &-decade-panel-selected-cell .ant-calendar-decade-panel-decade, + &-decade-panel-selected-cell .ant-calendar-decade-panel-decade:hover { + background: lighten(@dark-theme-component-background, 25%); + color: @dark-theme-text-color; + } + + &-month-panel-month:hover, + &-year-panel-year:hover, + &-decade-panel-decade:hover { + background: lighten(@dark-theme-component-background, 15%); + } + + &-input { + color: @dark-theme-text-color; + background-color: lighten(@dark-theme-component-background, 5%); + } + + &-month-panel, + &-year-panel, + &-decade-panel { + background-color: lighten(@dark-theme-component-background, 5%); + } + + &-header, + &-input-wrap, + &-month-panel-header, + &-year-panel-header, + &-decade-panel-header { + border-bottom-color: lighten(@dark-theme-component-background, 8%); + } + + &-footer, + &-range .ant-calendar-body, + &-range .ant-calendar-month-panel-body, + &-range .ant-calendar-year-panel-body { + border-top-color: lighten(@dark-theme-component-background, 8%); + } + + &-picker-icon, + &-picker-icon:after { + color: @dark-theme-text-color; + } + + &-picker:hover .ant-calendar-picker-input:not(.ant-input-disabled) { + border-color: @dark-theme-border-color; + } + + &-header .ant-calendar-prev-century-btn, + &-header .ant-calendar-next-century-btn, + &-header .ant-calendar-prev-decade-btn, + &-header .ant-calendar-next-decade-btn, + &-header .ant-calendar-prev-month-btn, + &-header .ant-calendar-next-month-btn, + &-header .ant-calendar-prev-year-btn, + &-header .ant-calendar-next-year-btn, + &-header .ant-calendar-century-select, + &-header .ant-calendar-decade-select, + &-header .ant-calendar-year-select, + &-header .ant-calendar-month-select { + color: @dark-theme-text-color; + } + + &-month-panel-header .ant-calendar-month-panel-prev-century-btn, + &-month-panel-header .ant-calendar-month-panel-next-century-btn, + &-month-panel-header .ant-calendar-month-panel-prev-decade-btn, + &-month-panel-header .ant-calendar-month-panel-next-decade-btn, + &-month-panel-header .ant-calendar-month-panel-prev-month-btn, + &-month-panel-header .ant-calendar-month-panel-next-month-btn, + &-month-panel-header .ant-calendar-month-panel-prev-year-btn, + &-month-panel-header .ant-calendar-month-panel-next-year-btn, + &-month-panel-header .ant-calendar-month-panel-century-select, + &-month-panel-header .ant-calendar-month-panel-decade-select, + &-month-panel-header .ant-calendar-month-panel-year-select, + &-month-panel-header .ant-calendar-month-panel-month-select { + color: @dark-theme-text-color; + } + + &-year-panel-header .ant-calendar-year-panel-prev-century-btn, + &-year-panel-header .ant-calendar-year-panel-next-century-btn, + &-year-panel-header .ant-calendar-year-panel-prev-decade-btn, + &-year-panel-header .ant-calendar-year-panel-next-decade-btn, + &-year-panel-header .ant-calendar-year-panel-prev-month-btn, + &-year-panel-header .ant-calendar-year-panel-next-month-btn, + &-year-panel-header .ant-calendar-year-panel-prev-year-btn, + &-year-panel-header .ant-calendar-year-panel-next-year-btn, + &-year-panel-header .ant-calendar-year-panel-century-select, + &-year-panel-header .ant-calendar-year-panel-decade-select, + &-year-panel-header .ant-calendar-year-panel-year-select, + &-year-panel-header .ant-calendar-year-panel-month-select { + color: @dark-theme-text-color; + } + + &-decade-panel-header .ant-calendar-decade-panel-prev-century-btn, + &-decade-panel-header .ant-calendar-decade-panel-next-century-btn, + &-decade-panel-header .ant-calendar-decade-panel-prev-decade-btn, + &-decade-panel-header .ant-calendar-decade-panel-next-decade-btn, + &-decade-panel-header .ant-calendar-decade-panel-prev-month-btn, + &-decade-panel-header .ant-calendar-decade-panel-next-month-btn, + &-decade-panel-header .ant-calendar-decade-panel-prev-year-btn, + &-decade-panel-header .ant-calendar-decade-panel-next-year-btn { + color: @dark-theme-text-color; + } + + &-date { + color: @dark-theme-text-color; + + &:hover { + background: lighten(@dark-theme-component-background, 15%); + } + } + + &-last-month-cell .ant-calendar-date, + &-next-month-btn-day .ant-calendar-date, + &-year-panel-last-decade-cell .ant-calendar-year-panel-year, + &-year-panel-next-decade-cell .ant-calendar-year-panel-year, + &-decade-panel-last-century-cell .ant-calendar-decade-panel-decade, + &-decade-panel-next-century-cell .ant-calendar-decade-panel-decade { + color: darken(@dark-theme-text-color, 20%); + } + + &-picker-clear { + color: @dark-theme-text-color; + background: none; + } + + & .ant-calendar-ok-btn { + color: @dark-theme-border-color !important; + background-color: lighten(@dark-theme-component-background, 25%) !important; + border-color: lighten(@dark-theme-component-background, 25%) !important; + + &:hover, + &:focus { + color: @dark-theme-primary-color !important; + background-color: lighten(@dark-theme-component-background, 35%) !important; + border-color: @dark-theme-primary-color !important; + } + } + + &-range .ant-calendar-in-range-cell:before { + background-color: lighten(@dark-theme-component-background, 7%); + } + + &-week-number .ant-calendar-body tr.ant-calendar-active-week { + background: lighten(@dark-theme-component-background, 7%); + } + + &-week-number .ant-calendar-body tr .ant-calendar-selected-day .ant-calendar-date, + &-week-number .ant-calendar-body tr .ant-calendar-selected-day:hover .ant-calendar-date, + &-time .ant-calendar-footer .ant-calendar-time-picker-btn-disabled { + color: @dark-theme-text-color; + } + } + + & .ant-fullcalendar { + color: @dark-theme-text-color; + border-top-color: @dark-theme-border-color; + + &-value { + color: @dark-theme-text-color; + + &:hover { + background: lighten(@dark-theme-component-background, 5%); + } + } + + &-fullscreen .ant-fullcalendar-month, + &-fullscreen .ant-fullcalendar-date { + color: @dark-theme-text-color; + border-top-color: lighten(@dark-theme-component-background, 8%); + } + + &-fullscreen .ant-fullcalendar-month:hover, + &-fullscreen .ant-fullcalendar-date:hover, + &-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-month, + &-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-date { + background: lighten(@dark-theme-component-background, 5%); + color: @dark-theme-text-color; + } + + &-fullscreen .ant-fullcalendar-month-panel-current-cell .ant-fullcalendar-month, + &-fullscreen .ant-fullcalendar-today .ant-fullcalendar-date { + border-top-color: lighten(@dark-theme-component-background, 8%); + } + + &-fullscreen .ant-fullcalendar-last-month-cell .ant-fullcalendar-date, + &-fullscreen .ant-fullcalendar-next-month-btn-day .ant-fullcalendar-date, + &-last-month-cell .ant-fullcalendar-value, + &-next-month-btn-day .ant-fullcalendar-value { + color: darken(@dark-theme-text-color, 20%); + } + + &-selected-day .ant-fullcalendar-value, + &-month-panel-selected-cell .ant-fullcalendar-value { + background: lighten(@dark-theme-component-background, 5%); + color: @dark-theme-text-color; + } + + &-today .ant-fullcalendar-value, + &-month-panel-current-cell .ant-fullcalendar-value { + box-shadow: 0 0 0 1px lighten(@dark-theme-component-background, 25%) inset; + background: lighten(@dark-theme-component-background, 25%); + } + + &-fullscreen .ant-fullcalendar-month-panel-selected-cell .ant-fullcalendar-value, + &-fullscreen .ant-fullcalendar-selected-day .ant-fullcalendar-value { + color: @dark-theme-text-color; + background-color: transparent; + box-shadow: none; + } + } + + & .ant-time { + &-picker-panel, + &-picker-icon, + &-picker-icon:after { + color: @dark-theme-text-color; + } + + &-picker-panel-inner { + background-color: lighten(@dark-theme-component-background, 5%); + .box-shadow(0 2px 8px rgba(0, 0, 0, 0.15)); + } + + &-picker-panel-input-wrap { + border-bottom-color: lighten(@dark-theme-component-background, 8%); + + & .ant-time-picker-panel-input { + background-color: transparent; + } + + & a, + & a:hover, + & a:focus, + & a.ant-time-picker-panel-clear-btn:after { + color: @dark-theme-text-color; + } + } + + &-picker-input { + background-color: fade(@grey-2, 10%); + border-color: fade(@grey-2, 10%); + color: @dark-theme-text-color; + + &:focus, + &:hover { + border-color: fade(@grey-3, 10%); + .box-shadow(0 0 0 1px rgba(0, 0, 0, 0.1)); + } + } + + &-picker-panel-select { + border-left-color: lighten(@dark-theme-component-background, 8%); + + & li:hover { + background: lighten(@dark-theme-component-background, 7%); + } + } + } + + li.ant-time-picker-panel-select-option-selected { + background: lighten(@dark-theme-component-background, 8%); + } + + & .ant-slider { + &-mark-text { + color: darken(@dark-theme-text-color, 40%); + } + + &-mark-text-active { + color: @white-color; + } + + &-track { + background-color: lighten(@dark-theme-component-background, 5%); + } + + &-active { + border-color: lighten(@dark-theme-component-background, 5%); + } + } + + & .ant-radio { + color: @dark-theme-text-color; + + &-wrapper { + color: @dark-theme-text-color; + } + + &-wrapper:hover .ant-radio .ant-radio-inner, + &:hover .ant-radio-inner, + &-focused .ant-radio-inner { + border-color: lighten(@dark-theme-component-background, 20%); + } + + &-checked:after { + border-color: lighten(@dark-theme-component-background, 20%); + } + + &-checked .ant-radio-inner { + border-color: lighten(@dark-theme-component-background, 20%); + } + + &-disabled + span { + color: @dark-theme-text-color; + } + + &-button-wrapper { + color: lighten(@dark-theme-component-background, 20%); + background-color: transparent; + border-color: lighten(@dark-theme-component-background, 20%); + + &:hover, + &:focus { + color: @dark-theme-text-color; + } + + &-checked { + box-shadow: none; + border-color: lighten(@dark-theme-component-background, 50%); + color: lighten(@dark-theme-component-background, 50%); + + &:hover, + &:focus { + color: @dark-theme-text-color; + } + + &:first-child { + border-color: lighten(@dark-theme-component-background, 50%); + color: lighten(@dark-theme-component-background, 50%); + } + } + + &:not(:first-child):before { + background-color: lighten(@dark-theme-component-background, 20%); + } + + &-checked:before { + background-color: lighten(@dark-theme-component-background, 20%) !important; + } + } + } + + & .ant-btn { + background-color: darken(@dark-theme-component-background, 5%); + border-color: darken(@dark-theme-component-background, 5%); + color: @dark-theme-text-color; + + &:hover, + &:focus { + color: @dark-theme-text-color; + background-color: darken(@dark-theme-component-background, 8%); + border-color: darken(@dark-theme-component-background, 8%); + } + + &-primary { + background-color: darken(@dark-theme-component-background, 8%) !important; + border-color: darken(@dark-theme-component-background, 8%) !important; + + &:hover, + &:focus { + background-color: darken(@dark-theme-component-background, 12%) !important; + border-color: darken(@dark-theme-component-background, 12%) !important; + } + + &.disabled, + &:disabled { + background-color: darken(@dark-theme-component-background, 10%) !important; + border-color: darken(@dark-theme-component-background, 10%) !important; + } + + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active { + background-color: darken(@dark-theme-component-background, 5%) !important; + border-color: darken(@dark-theme-component-background, 5%) !important; + } + } + + &-danger { + color: @danger-color; + background-color: transparent; + border-color: @danger-color; + + &:hover, + &:focus { + color: @white-color; + background-color: @danger-color; + border-color: @danger-color; + } + } + } + + & .ant-upload { + color: @dark-theme-text-color; + + &.ant-upload-drag { + background-color: darken(@dark-theme-component-background, 3%); + border-color: darken(@dark-theme-component-background, 3%); + color: @dark-theme-text-color; + + & p.ant-upload-drag-icon .anticon { + color: @dark-theme-text-color; + } + + & p.ant-upload-text, + & p.ant-upload-hint { + color: @dark-theme-text-color; + } + + &:not(.ant-upload-disabled):hover { + border-color: @dark-theme-border-color; + } + } + + &-list-item a, + &-list-item-info .anticon-loading, + &-list-item-info .anticon-paper-clip { + color: @dark-theme-text-color; + } + + &-list-item:hover .ant-upload-list-item-info { + background-color: lighten(@dark-theme-component-background, 5%); + } + + &.ant-upload-select-picture-card { + background-color: darken(@dark-theme-component-background, 3%); + border-color: darken(@dark-theme-component-background, 3%); + + &:hover { + border-color: @dark-theme-border-color; + } + } + } + + & .ant-switch { + color: @white-color; + + &-checked { + background-color: darken(@dark-theme-component-background, 5%); + } + } + + & .@{class-prefix}-bg-grey { + background-color: darken(@grey-5, 25%) !important; + } + + & .ant-breadcrumb { + color: darken(@white-color, 25%); + + &-separator, + & > span:last-child { + color: darken(@white-color, 25%); + } + } + + & .ant-dropdown { + color: @dark-theme-text-color; + + &-menu { + background-color: darken(@dark-theme-component-background, 8%); + } + + &-menu-item, + &-menu-submenu-title { + color: @dark-theme-text-color; + } + + &-menu-item:hover, + &-menu-submenu-title:hover { + background-color: lighten(@dark-theme-component-background, 2%); + } + + &-menu-item .ant-dropdown-menu-submenu-arrow:after, + &-menu-submenu-title .ant-dropdown-menu-submenu-arrow:after { + color: @dark-theme-text-color; + } + + &-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title, + &-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow::after { + color: darken(@dark-theme-text-color, 20%); + } + } + + & .ant-steps-item { + color: @dark-theme-text-color; + + &-finish .ant-steps-item-icon { + background-color: @dark-theme-component-background; + border-color: @dark-theme-text-color; + + & > .ant-steps-icon { + color: @dark-theme-text-color; + } + } + + &-process .ant-steps-item-icon { + background-color: lighten(@dark-theme-component-background, 5%); + border-color: lighten(@dark-theme-component-background, 5%); + + & > .ant-steps-icon { + color: @dark-theme-text-color; + } + } + + &-wait .ant-steps-item-icon { + background-color: @dark-theme-component-background; + border-color: lighten(@dark-theme-component-background, 10%); + + & > .ant-steps-icon { + color: lighten(@dark-theme-component-background, 10%); + } + } + + &-finish > .ant-steps-item-content > .ant-steps-item-description, + &-process > .ant-steps-item-content > .ant-steps-item-description, + &-wait > .ant-steps-item-content > .ant-steps-item-description { + color: darken(@dark-theme-text-color, 20%); + } + + &-finish > .ant-steps-item-content > .ant-steps-item-title, + &-process > .ant-steps-item-content > .ant-steps-item-title, + &-wait > .ant-steps-item-content > .ant-steps-item-title { + color: @dark-theme-text-color; + } + + &-process > .ant-steps-item-content > .ant-steps-item-title:after, + &-wait > .ant-steps-item-content > .ant-steps-item-title:after, + &-process > .ant-steps-item-tail:after, + &-error > .ant-steps-item-content > .ant-steps-item-title:after { + background-color: @dark-theme-border-color; + } + + &-finish > .ant-steps-item-content > .ant-steps-item-title:after, + &-finish > .ant-steps-item-tail:after { + background-color: @dark-theme-text-color; + } + + &-error .ant-steps-item-icon { + background-color: @dark-theme-component-background; + } + + &-finish .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot, + &-finish > .ant-steps-item-tail:after, + &-process .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot { + background: darken(@dark-theme-primary-color, 10%); + } + + &-process > .ant-steps-item-tail:after, + &-wait > .ant-steps-item-tail:after { + background-color: lighten(@dark-theme-component-background, 8%); + } + + &-wait .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot { + background: lighten(@dark-theme-component-background, 8%); + } + } + + & .steps-content { + border-color: @dark-theme-border-color; + background-color: lighten(@dark-theme-component-background, 5%); + } + + & .ant-collapse { + background-color: lighten(@dark-theme-component-background, 5%); + border-color: lighten(@dark-theme-component-background, 10%); + color: @dark-theme-text-color; + + &.@{class-prefix}-collapse-custom { + background-color: transparent; + + & .ant-collapse-item { + background-color: lighten(@dark-theme-component-background, 5%); + } + } + + & > .ant-collapse-item { + border-color: lighten(@dark-theme-component-background, 10%); + } + + & .ant-collapse { + border-color: lighten(@dark-theme-component-background, 22%); + + & > .ant-collapse-item { + border-color: lighten(@dark-theme-component-background, 22%); + } + } + + & > .ant-collapse-item > .ant-collapse-header { + color: @dark-theme-text-color; + } + + &-content { + color: @dark-theme-text-color; + background-color: lighten(@dark-theme-component-background, 12%); + border-top-color: lighten(@dark-theme-component-background, 10%); + } + + & .ant-collapse-item-disabled > .ant-collapse-header, + & .ant-collapse-item-disabled > .ant-collapse-header > .arrow { + color: darken(@dark-theme-text-color, 40%); + } + } + + & .ant-carousel { + color: @dark-theme-text-color; + + & .slick-slide { + background-color: lighten(@dark-theme-component-background, 5%); + } + } + + & .ant-tree { + color: @dark-theme-text-color; + + & li .ant-tree-node-content-wrapper { + color: @dark-theme-text-color; + } + + & li.ant-tree-treenode-disabled > span:not(.ant-tree-switcher), + & li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper, + & li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper span { + color: darken(@dark-theme-text-color, 40%); + } + + & li .ant-tree-node-content-wrapper:hover, + & li .ant-tree-node-content-wrapper.ant-tree-node-selected { + background-color: lighten(@dark-theme-component-background, 5%); + } + + &-checkbox-wrapper:hover .ant-tree-checkbox-inner, + &-checkbox:hover .ant-tree-checkbox-inner, + &-checkbox-input:focus + .ant-tree-checkbox-inner { + border-color: darken(@dark-theme-component-background, 5%); + } + + &-checkbox-checked .ant-tree-checkbox-inner, + &-checkbox-indeterminate .ant-tree-checkbox-inner { + background-color: darken(@dark-theme-component-background, 5%); + border-color: darken(@dark-theme-component-background, 5%) !important; + } + + &.ant-tree-show-line li span.ant-tree-switcher { + background: transparent; + color: @dark-theme-text-color; + } + } + + & .ant-tag { + + &-checkable { + color: @dark-theme-text-color; + } + + &-checkable:not(.ant-tag-checkable-checked):hover { + color: @white-color; + } + } + + & .ant-progress { + &-text, + &-circle .ant-progress-text { + color: @dark-theme-text-color; + } + } + + & .ant-anchor { + &-wrapper { + background-color: transparent; + } + + &-link-active > .ant-anchor-link-title { + color: darken(@dark-theme-text-color, 10%); + } + } + + & .rdw-editor-wrapper { + color: darken(@dark-theme-text-color, 60%); + background-color: @component-background; + + & + textarea { + color: darken(@dark-theme-text-color, 60%); + } + } + + & .@{class-prefix}-contact-item:not(:last-child) { + border-bottom-color: @dark-theme-border-color; + } + + .@{class-prefix}-draggable-icon { + color: @dark-theme-text-color; + + &:hover, + &:focus, + &:active { + color: @white-color; + } + } + + & .sweet-alert, + & .@{class-prefix}-map-content { + color: darken(@dark-theme-text-color, 60%); + + & h1, & h2, & h3, & h4, & h5, & h6, & .h1, & .h2, & .h3, & .h4, & .h5, & .h6 { + color: darken(@dark-theme-text-color, 60%); + } + } + + & .@{class-prefix}-module-side { + + @media screen and (max-width: @screen-md-max) { + background-color: @white-color; + } + } + + & .@{class-prefix}-module-side-header { + border-bottom-color: @dark-theme-border-color; + background-color: @dark-theme-component-background; + color: @dark-theme-text-color; + } + + & .@{class-prefix}-module-nav { + + & li a { + color: @dark-theme-text-color; + } + + & li a:hover, + & li a:focus, + & li a.active { + color: @white-color; + } + } + + & .@{class-prefix}-module-box-header { + background-color: @dark-theme-component-background; + border-bottom-color: @dark-theme-border-color; + + & .@{class-prefix}-drawer-btn { + @media screen and (max-width: @screen-md-max) { + border-right-color: @dark-theme-border-color; + } + } + } + + & .@{class-prefix}-module-box-content { + background-color: @dark-theme-component-background; + } + + & .@{class-prefix}-module-box-topbar, + & .@{class-prefix}-module-list-item:not(:last-child) { + border-bottom-color: @dark-theme-border-color; + } + + & .@{class-prefix}-toolbar-separator { + border-left-color: @dark-theme-border-color; + } + + & .@{class-prefix}-module-sidenav { + background-color: @dark-theme-component-background; + border-right-color: @dark-theme-border-color; + } + + & .rbc-event { + background-color: lighten(@dark-theme-component-background,20%); + } + + & .rbc-event.rbc-selected { + background-color: darken(@dark-theme-component-background, 10%); + } + + & .rbc-slot-selection { + background-color: lighten(@dark-theme-component-background, 10%); + } + + & .rbc-toolbar button { + color: @dark-theme-text-color; + border-color: @dark-theme-text-color; + } + + & .rbc-toolbar button:active, + & .rbc-toolbar button.rbc-active, + & .rbc-toolbar button:active:hover, + & .rbc-toolbar button.rbc-active:hover, + & .rbc-toolbar button:active:focus, + & .rbc-toolbar button.rbc-active:focus, + & .rbc-toolbar button:focus, + & .rbc-toolbar button:hover { + color: @dark-theme-primary-color; + background-color: @dark-theme-text-color; + border-color: @dark-theme-text-color; + } + + & .rbc-month-view, + & .rbc-time-view, + & .rbc-today { + background: @dark-theme-component-background; + } + + & .rbc-date-cell { + & a { + color: @dark-theme-text-color; + } + + & a:hover, + & a:focus { + color: @white-color; + } + } + + & .rbc-off-range-bg { + background: lighten(@dark-theme-component-background, 10%); + + & a { + color: darken(@dark-theme-text-color, 40%); + } + + & a:hover, + & a:focus { + color: @dark-theme-text-color; + } + } + + & .@{class-prefix}-com-calendar-card { + border-color: @dark-theme-border-color; + } + + & .@{class-prefix}-chat-module-box { + background-color: @dark-theme-component-background; + } + + & .@{class-prefix}-chat-sidenav { + border-right-color: @dark-theme-border-color; + } + + & .@{class-prefix}-chat-sidenav-header { + background-color: lighten(@dark-theme-component-background, 5%); + border-bottom-color: @dark-theme-border-color; + } + + & .@{class-prefix}-chat-sidenav-content { + background-color: @dark-theme-component-background; + } + + & .@{class-prefix}-chat-sidenav-title { + color: @dark-theme-text-color; + } + + & .@{class-prefix}-chat-tabs-header { + background-color: lighten(@dark-theme-component-background, 5%) !important; + } + + & .@{class-prefix}-chat-user-item { + &:not(:last-child) { + border-bottom-color: @dark-theme-border-color; + } + + &.active, + &:hover { + background-color: lighten(@dark-theme-component-background, 3%); + } + } + + & .@{class-prefix}-chat-info-des { + color: @dark-theme-text-color; + } + + & .@{class-prefix}-chat-main-header { + border-bottom-color: @dark-theme-border-color; + background-color: @dark-theme-component-background; + } + + & .@{class-prefix}-chat-main-footer { + border-top-color: @dark-theme-border-color; + background-color: @dark-theme-component-background; + } + + & .@{class-prefix}-chat-item { + + & .@{class-prefix}-bubble { + background-color: lighten(@dark-theme-component-background, 2%); + border-color: @dark-theme-border-color; + } + + &.@{class-prefix}-flex-row-reverse .@{class-prefix}-bubble { + background-color: lighten(@dark-theme-component-background, 5%); + } + } + + & .@{class-prefix}-error-code { + color: @dark-theme-text-color; + text-shadow: 10px 6px 8px rgba(255, 117, 117, 0.8); + } + + & .@{class-prefix}-btn-yellow, + & a.@{class-prefix}-btn-yellow { + color: @grey-9 !important; + background-color: @yellow-color !important; + border-color: @yellow-color !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: darken(@yellow-color, 10%) !important; + border-color: darken(@yellow-color, 10%) !important; + } + + &.disabled, + &:disabled { + background-color: @yellow-color !important; + border-color: @yellow-color !important; + } + + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active { + color: @white-color !important; + background-color: darken(@yellow-color, 10%) !important; + border-color: darken(@yellow-color, 10%) !important; + } + } + + & .@{class-prefix}-package { + background-color: @white-color; + color: @grey-8; + } + + & .@{class-prefix}-package-header { + & > .@{class-prefix}-price { + color: @white-color; + } + + &.@{class-prefix}-text-white { + color: @grey-8 !important; + } + } + + & .@{class-prefix}-bg-primary { + background-color: darken(@dark-theme-component-background, 10%) !important; + } + + & a.@{class-prefix}-bg-primary { + &:hover, + &:focus { + background-color: darken(@dark-theme-component-background, 20%) !important; + } + } + + & .@{class-prefix}-bg-primary-light { + background-color: lighten(@dark-theme-component-background, 10%) !important; + } + + & .@{class-prefix}-text-primary { + color: darken(@white-color, 10%) !important; + } + + & a.@{class-prefix}-text-primary { + &:hover, + &:focus { + color: darken(@white-color, 5%) !important; + } + } + + & .@{class-prefix}-border-primary { + border-color: @dark-theme-border-color !important; + } + + & .@{class-prefix}-btn-outline-primary, + & a.@{class-prefix}-btn-outline-primary { + color: @dark-theme-border-color !important; + border-color: @dark-theme-border-color !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: @dark-theme-border-color !important; + border-color: @dark-theme-border-color !important; + } + + &.disabled, + &:disabled { + color: @primary-color !important; + background-color: transparent !important; + } + } + + & .@{class-prefix}-badge-primary { + background-color: darken(@dark-theme-component-background, 15%) !important; + } + + & .@{class-prefix}-badge-primary-light { + background-color: lighten(@dark-theme-component-background, 5%) !important; + } + + & .@{class-prefix}-customizer-item:not(:last-child) { + border-bottom-color: @dark-theme-border-color; + } + + + + + + + + + + + + + + +} + +@media screen and (max-width: @screen-sm-max) { + .dark-theme .@{class-prefix}-table-responsive .ant-table { + border: @dark-theme-border-color; + + &.ant-table-bordered .ant-table-footer { + border-top-color: @dark-theme-border-color; + } + } + + .dark-theme .ant-card-bordered.@{class-prefix}-card-full .@{class-prefix}-table-responsive .ant-table { + border-bottom-color: @dark-theme-border-color; + } + + .dark-theme .@{class-prefix}-timeline-center .@{class-prefix}-timeline-inverted:before { + border-left-color: @dark-theme-border-color; + } +} + +@media screen and (max-width: (@screen-xs-max - 100px)) { + .dark-theme .ant-input-group.ant-input-group-compact { + & .@{class-prefix}-border-lt-xs { + border-left-color: @dark-theme-border-color !important; + } + } +} diff --git a/src/styles/flexile.less b/src/styles/flexile.less new file mode 100644 index 000000000..e40c5f868 --- /dev/null +++ b/src/styles/flexile.less @@ -0,0 +1,2 @@ +@import "variables"; +@import "styles"; diff --git a/src/styles/global/colors-class.less b/src/styles/global/colors-class.less new file mode 100644 index 000000000..9c39f0fe4 --- /dev/null +++ b/src/styles/global/colors-class.less @@ -0,0 +1,1120 @@ +@import "variables"; +@import '../../../node_modules/antd/lib/style/color/colors.less'; + +/* color classes */ + +// BG ColorPicker +.@{class-prefix}-bg-primary { + background-color: @primary-color !important; +} + +a.@{class-prefix}-bg-primary { + &:hover, + &:focus { + background-color: @primary-7 !important; + } +} + +.@{class-prefix}-bg-primary-light { + background-color: @primary-4 !important; +} + +.@{class-prefix}-bg-secondary { + background-color: @secondary-color !important; +} + +a.@{class-prefix}-bg-secondary { + &:hover, + &:focus { + background-color: @red-7 !important; + } +} + +.@{class-prefix}-bg-success { + background-color: @success-color !important; +} + +a.@{class-prefix}-bg-success { + &:hover, + &:focus { + background-color: darken(@success-color, 10%) !important; + } +} + +.@{class-prefix}-bg-info { + background-color: @info-color !important; +} + +a.@{class-prefix}-bg-info { + &:hover, + &:focus { + background-color: darken(@info-color, 10%) !important; + } +} + +.@{class-prefix}-bg-warning { + background-color: @warning-color !important; +} + +a.@{class-prefix}-bg-warning { + &:hover, + &:focus { + background-color: darken(@warning-color, 10%) !important; + } +} + +.@{class-prefix}-bg-danger { + background-color: @danger-color !important; +} + +a.@{class-prefix}-bg-danger { + &:hover, + &:focus { + background-color: darken(@danger-color, 10%) !important; + } +} + +.@{class-prefix}-bg-light { + background-color: @grey-4 !important; +} + +a.@{class-prefix}-bg-light { + &:hover, + &:focus { + background-color: @grey-5 !important; + } +} + +.@{class-prefix}-bg-dark { + background-color: @black-color !important; +} + +a.@{class-prefix}-bg-dark { + &:hover, + &:focus { + background-color: lighten(@black-color, 10%) !important; + } +} + +.@{class-prefix}-bg-white { + background-color: @white-color !important; +} + +.@{class-prefix}-bg-grey { + background-color: darken(@grey-5, 5%) !important; +} + +a.@{class-prefix}-bg-grey { + &:hover, + &:focus { + background-color: darken(@grey-6, 5%) !important; + } +} + +.@{class-prefix}-bg-light-grey { + background-color: @grey-2 !important; +} + +.@{class-prefix}-bg-transparent { + background-color: transparent !important; +} + +.@{class-prefix}-bg-pink { + background-color: @pink-color !important; +} + +a.@{class-prefix}-bg-pink { + &:hover, + &:focus { + background-color: darken(@pink-color, 10%) !important; + } +} + +.@{class-prefix}-bg-green { + background-color: @green-color !important; +} + +.@{class-prefix}-bg-green-light { + background-color: lighten(@green-color, 40%) !important; +} + +a.@{class-prefix}-bg-green { + &:hover, + &:focus { + background-color: darken(@green-color, 10%) !important; + } +} + +.@{class-prefix}-bg-red { + background-color: @red-color !important; +} + +a.@{class-prefix}-bg-red { + &:hover, + &:focus { + background-color: darken(@red-color, 10%) !important; + } +} + +.@{class-prefix}-bg-amber { + background-color: @amber-color !important; +} + +.@{class-prefix}-bg-amber-light { + background-color: lighten(@amber-color, 30%) !important; +} + +a.@{class-prefix}-bg-amber { + &:hover, + &:focus { + background-color: darken(@amber-color, 10%) !important; + } +} + +.@{class-prefix}-bg-blue { + background-color: @blue-color !important; +} + +a.@{class-prefix}-bg-blue { + &:hover, + &:focus { + background-color: darken(@blue-color, 10%) !important; + } +} + +.@{class-prefix}-bg-light-blue { + background-color: lighten(@blue-color, 5%) !important; +} + +.@{class-prefix}-bg-indigo { + background-color: @indigo-color !important; +} + +a.@{class-prefix}-bg-indigo { + &:hover, + &:focus { + background-color: darken(@indigo-color, 10%) !important; + } +} + +.@{class-prefix}-bg-purple { + background-color: @purple-color !important; +} + +a.@{class-prefix}-bg-purple { + &:hover, + &:focus { + background-color: darken(@purple-color, 10%) !important; + } +} + +.@{class-prefix}-bg-orange { + background-color: @orange-color !important; +} + +a.@{class-prefix}-bg-orange { + &:hover, + &:focus { + background-color: darken(@orange-color, 10%) !important; + } +} + +.@{class-prefix}-bg-yellow { + background-color: @yellow-color !important; +} + +a.@{class-prefix}-bg-yellow { + &:hover, + &:focus { + background-color: darken(@yellow-color, 10%) !important; + } +} + +.@{class-prefix}-bg-teal { + background-color: @teal-color !important; +} + +a.@{class-prefix}-bg-teal { + &:hover, + &:focus { + background-color: darken(@teal-color, 10%) !important; + } +} + +.@{class-prefix}-bg-cyan { + background-color: @cyan-color !important; +} + +a.@{class-prefix}-bg-cyan { + &:hover, + &:focus { + background-color: darken(@cyan-color, 10%) !important; + } +} + +// Text ColorPicker +.@{class-prefix}-text-white { + color: @white-color !important; +} + +.@{class-prefix}-text-primary { + color: @primary-color !important; +} + +a.@{class-prefix}-text-primary { + &:hover, + &:focus { + color: @primary-color !important; + } +} + +.@{class-prefix}-text-secondary { + color: @secondary-color !important; +} + +a.@{class-prefix}-text-secondary { + &:hover, + &:focus { + color: @red-7 !important; + } +} + +.@{class-prefix}-text-success { + color: @success-color !important; +} + +a.@{class-prefix}-text-success { + &:hover, + &:focus { + color: darken(@success-color, 5%) !important; + } +} + +.@{class-prefix}-text-info { + color: @info-color !important; +} + +a.@{class-prefix}-text-info { + &:hover, + &:focus { + color: darken(@info-color, 5%) !important; + } +} + +.@{class-prefix}-text-warning { + color: @warning-color !important; +} + +a.@{class-prefix}-text-warning { + &:hover, + &:focus { + color: darken(@warning-color, 5%) !important; + } +} + +.@{class-prefix}-text-danger { + color: @danger-color !important; +} + +a.@{class-prefix}-text-danger { + &:hover, + &:focus { + color: darken(@danger-color, 5%) !important; + } +} + +.@{class-prefix}-text-light { + color: darken(@grey-6, 8%) !important; +} + +a.@{class-prefix}-text-light { + &:hover, + &:focus { + color: darken(@grey-7, 8%) !important; + } +} + +.@{class-prefix}-text-light-grey { + color: @grey-5 !important; +} + +a.@{class-prefix}-text-light-grey { + &:hover, + &:focus { + color: @grey-6 !important; + } +} + +.@{class-prefix}-text-grey { + color: @grey-7 !important; +} + +a.@{class-prefix}-text-grey { + &:hover, + &:focus { + color: @grey-9 !important; + } +} + +.@{class-prefix}-text-dark { + color: @grey-8 !important; +} + +a.@{class-prefix}-text-dark { + &:hover, + &:focus { + color: darken(@grey-8, 5%) !important; + } +} + +.@{class-prefix}-text-pink { + color: @pink-color !important; +} + +a.@{class-prefix}-text-pink { + &:hover, + &:focus { + color: darken(@pink-color, 5%) !important; + } +} + +.@{class-prefix}-text-green { + color: @green-color !important; +} + +a.@{class-prefix}-text-green { + &:hover, + &:focus { + color: darken(@green-color, 5%) !important; + } +} + +.@{class-prefix}-text-red { + color: @red-color !important; +} + +a.@{class-prefix}-text-red { + &:hover, + &:focus { + color: darken(@red-color, 5%) !important; + } +} + +.@{class-prefix}-text-amber { + color: @amber-color !important; +} + +a.@{class-prefix}-text-amber { + &:hover, + &:focus { + color: darken(@amber-color, 5%) !important; + } +} + +.@{class-prefix}-text-blue { + color: @blue-color !important; +} + +a.@{class-prefix}-text-blue { + &:hover, + &:focus { + color: darken(@blue-color, 5%) !important; + } +} + +.@{class-prefix}-text-indigo { + color: @indigo-color !important; +} + +a.@{class-prefix}-text-indigo { + &:hover, + &:focus { + color: darken(@indigo-color, 5%) !important; + } +} + +.@{class-prefix}-text-purple { + color: @purple-color !important; +} + +a.@{class-prefix}-text-purple { + &:hover, + &:focus { + color: darken(@purple-color, 5%) !important; + } +} + +.@{class-prefix}-text-orange { + color: @orange-color !important; +} + +a.@{class-prefix}-text-orange { + &:hover, + &:focus { + color: darken(@orange-color, 5%) !important; + } +} + +.@{class-prefix}-text-yellow { + color: @yellow-color !important; +} + +a.@{class-prefix}-text-yellow { + &:hover, + &:focus { + color: darken(@yellow-color, 5%) !important; + } +} + +.@{class-prefix}-text-teal { + color: @teal-color !important; +} + +a.@{class-prefix}-text-teal { + &:hover, + &:focus { + color: darken(@teal-color, 5%) !important; + } +} + +.@{class-prefix}-text-cyan { + color: @cyan-color !important; +} + +a.@{class-prefix}-text-cyan { + &:hover, + &:focus { + color: darken(@cyan-color, 5%) !important; + } +} + +.@{class-prefix}-text-muted { + color: @grey-7 !important; +} + +// Border ColorPicker +.@{class-prefix}-border-primary { + border-color: @primary-color !important; +} + +.@{class-prefix}-border-secondary { + border-color: @secondary-color !important; +} + +.@{class-prefix}-border-success { + border-color: @success-color !important; +} + +.@{class-prefix}-border-info { + border-color: @info-color !important; +} + +.@{class-prefix}-border-warning { + border-color: @warning-color !important; +} + +.@{class-prefix}-border-danger { + border-color: @danger-color !important; +} + +.@{class-prefix}-border-light { + border-color: @grey-6 !important; +} + +.@{class-prefix}-border-dark { + border-color: @grey-8 !important; +} + +.@{class-prefix}-border-white { + border-color: @white-color !important; +} + +.@{class-prefix}-border-grey { + border-color: @grey-6 !important; +} + +.@{class-prefix}-border-pink { + border-color: @pink-color !important; +} + +.@{class-prefix}-border-green { + border-color: @green-color !important; +} + +.@{class-prefix}-border-red { + border-color: @red-color !important; +} + +.@{class-prefix}-border-amber { + border-color: @amber-color !important; +} + +.@{class-prefix}-border-blue { + border-color: @blue-color !important; +} + +.@{class-prefix}-border-indigo { + border-color: @indigo-color !important; +} + +.@{class-prefix}-border-purple { + border-color: @purple-color !important; +} + +.@{class-prefix}-border-orange { + border-color: @orange-color !important; +} + +.@{class-prefix}-border-yellow { + border-color: @yellow-color !important; +} + +.@{class-prefix}-border-teal { + border-color: @blue-color !important; +} + +.@{class-prefix}-border-cyan { + border-color: @cyan-color !important; +} + +// Button ColorPicker +.@{class-prefix}-btn-primary, +a.@{class-prefix}-btn-primary, +.btn-primary { + color: @white-color !important; + background-color: @primary-color !important; + border-color: @primary-color !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: @primary-7 !important; + border-color: @primary-7 !important; + } + + &.disabled, + &:disabled { + background-color: @primary-color !important; + border-color: @primary-color !important; + } + + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active { + color: @white-color; + background-color: @primary-7 !important; + border-color: @primary-7 !important; + } +} + +.@{class-prefix}-btn-secondary, +a.@{class-prefix}-btn-secondary { + color: @white-color !important; + background-color: @secondary-color !important; + border-color: @secondary-color !important; + + &:hover, + &:focus { + color: @white-color; + background-color: @red-7 !important; + border-color: @red-7 !important; + } + + &.disabled, + &:disabled { + background-color: @secondary-color !important; + border-color: @secondary-color !important; + } + + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active { + color: @white-color; + background-color: @red-7 !important; + border-color: @red-7 !important; + } +} + +.@{class-prefix}-btn-success, +a.@{class-prefix}-btn-success { + color: @white-color !important; + background-color: @success-color !important; + border-color: @success-color !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: darken(@success-color, 10%) !important; + border-color: darken(@success-color, 10%) !important; + } + + &.disabled, + &:disabled { + background-color: @success-color !important; + border-color: @success-color !important; + } + + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active { + color: @white-color !important; + background-color: darken(@success-color, 10%) !important; + border-color: darken(@success-color, 10%) !important; + } +} + +.@{class-prefix}-btn-info, +a.@{class-prefix}-btn-info { + color: @white-color !important; + background-color: @info-color !important; + border-color: @info-color !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: darken(@info-color, 10%) !important; + border-color: darken(@info-color, 10%) !important; + } + + &.disabled, + &:disabled { + background-color: @info-color !important; + border-color: @info-color !important; + } + + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active { + color: @white-color !important; + background-color: darken(@info-color, 10%) !important; + border-color: darken(@info-color, 10%) !important; + } +} + +.@{class-prefix}-btn-warning, +a.@{class-prefix}-btn-warning { + color: @grey-9 !important; + background-color: @warning-color !important; + border-color: @warning-color !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: darken(@warning-color, 10%) !important; + border-color: darken(@warning-color, 10%) !important; + } + + &.disabled, + &:disabled { + background-color: @warning-color !important; + border-color: @warning-color !important; + } + + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active { + color: @white-color !important; + background-color: darken(@warning-color, 10%) !important; + border-color: darken(@warning-color, 10%) !important; + } +} + +.@{class-prefix}-btn-yellow, +a.@{class-prefix}-btn-yellow { + color: @grey-9 !important; + background-color: @yellow-color !important; + border-color: @yellow-color !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: darken(@yellow-color, 10%) !important; + border-color: darken(@yellow-color, 10%) !important; + } + + &.disabled, + &:disabled { + background-color: @yellow-color !important; + border-color: @yellow-color !important; + } + + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active { + color: @white-color !important; + background-color: darken(@yellow-color, 10%) !important; + border-color: darken(@yellow-color, 10%) !important; + } +} + +.@{class-prefix}-btn-danger, +a.@{class-prefix}-btn-danger, +.@{class-prefix}-btn-red, +a.@{class-prefix}-btn-red { + color: @white-color !important; + background-color: @danger-color !important; + border-color: @danger-color !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: darken(@danger-color, 10%) !important; + border-color: darken(@danger-color, 10%) !important; + } + + &.disabled, + &:disabled { + background-color: @danger-color !important; + border-color: @danger-color !important; + } + + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active { + color: @white-color !important; + background-color: darken(@danger-color, 10%) !important; + border-color: darken(@danger-color, 10%) !important; + } +} + +.@{class-prefix}-btn-light, +a.@{class-prefix}-btn-light { + color: @grey-7 !important; + background-color: @grey-4 !important; + border-color: @grey-4 !important; + + &:hover, + &:focus { + color: @grey-7 !important; + background-color: @grey-5 !important; + border-color: @grey-5 !important; + } + + &.disabled, + &:disabled { + background-color: @grey-3 !important; + border-color: @grey-3 !important; + } + + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active { + color: @grey-9 !important; + background-color: @grey-4 !important; + border-color: @grey-4 !important; + } +} + +.@{class-prefix}-btn-dark, +a.@{class-prefix}-btn-dark { + color: @white-color !important; + background-color: @dark-color !important; + border-color: @dark-color !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: darken(@dark-color, 10%) !important; + border-color: darken(@dark-color, 10%) !important; + } + + &.disabled, + &:disabled { + background-color: @dark-color !important; + border-color: @dark-color !important; + } + + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active { + color: @white-color !important; + background-color: darken(@dark-color, 10%) !important; + border-color: darken(@dark-color, 10%) !important; + } +} + +.@{class-prefix}-btn-purple, +a.@{class-prefix}-btn-purple { + color: @white-color !important; + background-color: @purple-color !important; + border-color: @purple-color !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: darken(@purple-color, 10%) !important; + border-color: darken(@purple-color, 10%) !important; + } + + &.disabled, + &:disabled { + background-color: @purple-color !important; + border-color: @purple-color !important; + } + + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active { + color: @white-color !important; + background-color: darken(@purple-color, 10%) !important; + border-color: darken(@purple-color, 10%) !important; + } +} + +.@{class-prefix}-btn-outline-primary, +a.@{class-prefix}-btn-outline-primary { + color: @primary-color !important; + background-color: transparent !important; + border-color: @primary-color !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: @primary-color !important; + border-color: @primary-color !important; + } + + &.disabled, + &:disabled { + color: @primary-color !important; + background-color: transparent !important; + } +} + +.@{class-prefix}-btn-outline-secondary, +a.@{class-prefix}-btn-outline-secondary { + color: @secondary-color !important; + background-color: transparent !important; + border-color: @secondary-color !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: @secondary-color !important; + border-color: @secondary-color !important; + } + + &.disabled, + &:disabled { + color: @secondary-color !important; + background-color: transparent !important; + } +} + +.@{class-prefix}-btn-outline-success, +a.@{class-prefix}-btn-outline-success { + color: @success-color !important; + background-color: transparent !important; + border-color: @success-color !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: @success-color !important; + border-color: @success-color !important; + } + + &.disabled, + &:disabled { + color: @success-color !important; + background-color: transparent !important; + } +} + +.@{class-prefix}-btn-outline-info, +a.@{class-prefix}-btn-outline-info { + color: @info-color !important; + background-color: transparent !important; + border-color: @info-color !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: @info-color !important; + border-color: @info-color !important; + } + + &.disabled, + &:disabled { + color: @info-color !important; + background-color: transparent !important; + } +} + +.@{class-prefix}-btn-outline-warning, +a.@{class-prefix}-btn-outline-warning { + color: @warning-color !important; + background-color: transparent !important; + border-color: @warning-color !important; + + &:hover, + &:focus { + color: @grey-9 !important; + background-color: @warning-color !important; + border-color: @warning-color !important; + } + + &.disabled, + &:disabled { + color: @warning-color !important; + background-color: transparent !important; + } +} + +.@{class-prefix}-btn-outline-danger, +a.@{class-prefix}-btn-outline-danger, +.@{class-prefix}-btn-outline-red, +a.@{class-prefix}-btn-outline-red { + color: @danger-color !important; + background-color: transparent !important; + border-color: @danger-color !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: @danger-color !important; + border-color: @danger-color !important; + } + + &.disabled, + &:disabled { + color: @danger-color !important; + background-color: transparent !important; + } +} + +.@{class-prefix}-btn-outline-light, +a.@{class-prefix}-btn-outline-light { + color: @grey-7 !important; + background-color: transparent !important; + border-color: @grey-5 !important; + + &:hover, + &:focus { + color: @grey-7 !important; + background-color: @grey-5 !important; + border-color: @grey-5 !important; + } + + &.disabled, + &:disabled { + color: @grey-4 !important; + background-color: transparent !important; + } +} + +.@{class-prefix}-btn-outline-dark, +a.@{class-prefix}-btn-outline-dark { + color: @grey-9 !important; + background-color: transparent !important; + border-color: @grey-9 !important; + + &:hover, + &:focus { + color: @white-color !important; + background-color: @grey-9 !important; + border-color: @grey-9 !important; + } + + &.disabled, + &:disabled { + color: @grey-9 !important; + background-color: transparent !important; + } +} + +// Badge ColorPicker +.@{class-prefix}-badge-primary { + background-color: @primary-color !important; +} + +.@{class-prefix}-badge-primary-light { + background-color: @primary-4 !important; +} + +.@{class-prefix}-badge-secondary { + background-color: @secondary-color !important; +} + +.@{class-prefix}-badge-success { + background-color: @success-color !important; +} + +.@{class-prefix}-badge-info { + background-color: @info-color !important; +} + +.@{class-prefix}-bg-warning { + background-color: @warning-color !important; +} + +.@{class-prefix}-badge-danger { + background-color: @danger-color !important; +} + +.@{class-prefix}-badge-light { + background-color: @grey-4 !important; +} + +.@{class-prefix}-badge-dark { + background-color: @black-color !important; +} + +.@{class-prefix}-badge-white { + background-color: @white-color !important; +} + +.@{class-prefix}-badge-grey { + background-color: @grey-6 !important; +} + +.@{class-prefix}-badge-light-grey { + background-color: @grey-5 !important; +} + +.@{class-prefix}-badge-pink { + background-color: @pink-color !important; +} + +.@{class-prefix}-badge-green { + background-color: @green-color !important; +} + +.@{class-prefix}-badge-green-light { + background-color: lighten(@green-color, 40%) !important; +} + +.@{class-prefix}-badge-red { + background-color: @red-color !important; +} + +.@{class-prefix}-badge-amber { + background-color: @amber-color !important; +} + +.@{class-prefix}-badge-amber-light { + background-color: lighten(@amber-color, 30%) !important; +} + +.@{class-prefix}-badge-blue { + background-color: @blue-color !important; +} + +.@{class-prefix}-badge-light-blue { + background-color: lighten(@blue-color, 5%) !important; +} + +.@{class-prefix}-badge-indigo { + background-color: @indigo-color !important; +} + +.@{class-prefix}-badge-purple { + background-color: @purple-color !important; +} + +.@{class-prefix}-badge-orange { + background-color: @orange-color !important; +} + +.@{class-prefix}-badge-yellow { + background-color: @yellow-color !important; +} + +.@{class-prefix}-badge-teal { + background-color: @teal-color !important; +} + +.@{class-prefix}-badge-cyan { + background-color: @cyan-color !important; +} + diff --git a/src/styles/global/custom-animation.less b/src/styles/global/custom-animation.less new file mode 100644 index 000000000..b93fdc4b4 --- /dev/null +++ b/src/styles/global/custom-animation.less @@ -0,0 +1,216 @@ +/* Ripple magic */ +.gx-ripple-effect { + position: relative; + overflow: hidden; + &:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 5px; + height: 5px; + background: fade(@white-color, 50%); + opacity: 0; + .border-radius(100%); + transform: scale(1, 1) translate(-50%); + transform-origin: 50% 50%; + } + + &:hover:after { + animation: ripple 1s ease-out; + } +} + +@keyframes ripple { + 0% { + transform: scale(0, 0); + opacity: 0.5; + } + 20% { + transform: scale(60, 60); + opacity: 0.3; + } + 100% { + opacity: 0; + transform: scale(100, 100); + } +} + +@-webkit-keyframes ripple { + 0% { + transform: scale(0, 0); + opacity: 0.5; + } + 20% { + transform: scale(60, 60); + opacity: 0.3; + } + 100% { + opacity: 0; + transform: scale(100, 100); + } +} + +//Pulse Effect +.gx-pulse-effect { + display: block; + .box-shadow (0 0 0 fade(@danger-color, 40%)); + animation: pulse 2s infinite; +} + +@-webkit-keyframes pulse { + 0% { + -webkit-box-shadow: 0 0 0 0 fade(@danger-color, 40%); + } + 70% { + -webkit-box-shadow: 0 0 0 10px fade(@danger-color, 0%); + } + 100% { + -webkit-box-shadow: 0 0 0 0 fade(@danger-color, 0%); + } +} + +@keyframes pulse { + 0% { + -moz-box-shadow: 0 0 0 0 fade(@danger-color, 40%); + box-shadow: 0 0 0 0 fade(@danger-color, 40%); + } + 70% { + -moz-box-shadow: 0 0 0 10px fade(@danger-color, 0%); + box-shadow: 0 0 0 10px fade(@danger-color, 0%); + } + 100% { + -moz-box-shadow: 0 0 0 0 fade(@danger-color, 0%); + box-shadow: 0 0 0 0 fade(@danger-color, 0%); + } +} + +//Online Effect +.gx-online-effect { + display: block; + .box-shadow(0 0 0 fade(@green-color, 40%)); + animation: online 2s infinite; +} + +@-webkit-keyframes online { + 0% { + -webkit-box-shadow: 0 0 0 0 fade(@green-color, 40%); + } + 70% { + -webkit-box-shadow: 0 0 0 10px fade(@green-color, 0%); + } + 100% { + -webkit-box-shadow: 0 0 0 0 fade(@green-color, 0%); + } +} + +@keyframes online { + 0% { + -moz-box-shadow: 0 0 0 0 fade(@green-color, 40%); + box-shadow: 0 0 0 0 fade(@green-color, 40%); + } + 70% { + -moz-box-shadow: 0 0 0 10px fade(@green-color, 0%); + box-shadow: 0 0 0 10px fade(@green-color, 0%); + } + 100% { + -moz-box-shadow: 0 0 0 0 fade(@green-color, 0%); + box-shadow: 0 0 0 0 fade(@green-color, 0%); + } +} + +//Away Effect +.gx-away-effect { + display: block; + .box-shadow(0 0 0 fade(@yellow-color, 40%)); + animation: away 2s infinite; +} + +@-webkit-keyframes away { + 0% { + -webkit-box-shadow: 0 0 0 0 fade(@yellow-color, 40%); + } + 70% { + -webkit-box-shadow: 0 0 0 10px fade(@yellow-color, 0%); + } + 100% { + -webkit-box-shadow: 0 0 0 0 fade(@yellow-color, 0%); + } +} + +@keyframes away { + 0% { + -moz-box-shadow: 0 0 0 0 fade(@yellow-color, 40%); + box-shadow: 0 0 0 0 fade(@yellow-color, 40%); + } + 70% { + -moz-box-shadow: 0 0 0 10px fade(@yellow-color, 0%); + box-shadow: 0 0 0 10px fade(@yellow-color, 0%); + } + 100% { + -moz-box-shadow: 0 0 0 0 fade(@yellow-color, 0%); + box-shadow: 0 0 0 0 fade(@yellow-color, 0%); + } +} + +//Orange Effect +.gx-orange-effect { + display: block; + .box-shadow(0 0 0 fade(@orange-color, 40%)); + animation: away 2s infinite; +} + +@-webkit-keyframes away { + 0% { + -webkit-box-shadow: 0 0 0 0 fade(@orange-color, 40%); + } + 70% { + -webkit-box-shadow: 0 0 0 10px fade(@orange-color, 0%); + } + 100% { + -webkit-box-shadow: 0 0 0 0 fade(@orange-color, 0%); + } +} + +@keyframes away { + 0% { + -moz-box-shadow: 0 0 0 0 fade(@orange-color, 40%); + box-shadow: 0 0 0 0 fade(@orange-color, 40%); + } + 70% { + -moz-box-shadow: 0 0 0 10px fade(@orange-color, 0%); + box-shadow: 0 0 0 10px fade(@orange-color, 0%); + } + 100% { + -moz-box-shadow: 0 0 0 0 fade(@orange-color, 0%); + box-shadow: 0 0 0 0 fade(@orange-color, 0%); + } +} + +//Rotate infinite +@-webkit-keyframes fxicon-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} + +@keyframes fxicon-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); + } +} + +.fxicon-hc-spin { + -webkit-animation: fxicon-spin 1.5s infinite linear; + animation: fxicon-spin 1.5s infinite linear; +} diff --git a/src/styles/global/index.less b/src/styles/global/index.less new file mode 100644 index 000000000..66096495e --- /dev/null +++ b/src/styles/global/index.less @@ -0,0 +1,23 @@ +@import "variables"; +@import 'mixin'; +@import "colors-class"; +@import "custom-animation"; +/* width */ +::-webkit-scrollbar { + width: 10px; +} + +/* Track */ +::-webkit-scrollbar-track { + background: transparent; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + background: #888; +} + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover { + background: #555; +} diff --git a/src/styles/global/mixin.less b/src/styles/global/mixin.less new file mode 100644 index 000000000..9d6bf8fb2 --- /dev/null +++ b/src/styles/global/mixin.less @@ -0,0 +1,160 @@ +// Box Shadow +.box-shadow(@shadow...) { + -webkit-box-shadow: @shadow; + -moz-box-shadow: @shadow; + box-shadow: @shadow; +} + +// Single side border-radius +.border-radius(@radius...) { + -webkit-border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; +} + +// Single side box-sizing +.box-sizing (@type: border-box) { + -webkit-box-sizing: @type; + -moz-box-sizing: @type; + box-sizing: @type; +} + +// Opacity +.opacity (@opacity: 0.5) { + -webkit-opacity: @opacity; + -moz-opacity: @opacity; + opacity: @opacity; +} + +// Transition +.transition (@transition) { + -webkit-transition: @transition; + -moz-transition: @transition; + -ms-transition: @transition; + -o-transition: @transition; + transition: @transition; +} + +// Rotate +.rotate (@deg) { + -webkit-transform: rotate(@deg); + -moz-transform: rotate(@deg); + -ms-transform: rotate(@deg); + -o-transform: rotate(@deg); + transform: rotate(@deg); +} + +// Scale +.scale (@factor) { + -webkit-transform: scale(@factor); + -moz-transform: scale(@factor); + -ms-transform: scale(@factor); + -o-transform: scale(@factor); + transform: scale(@factor); +} + +// -------------------------------------------------- +// Flexbox LESS mixins +// The spec: http://www.w3.org/TR/css3-flexbox +// -------------------------------------------------- + +// Flexbox display +.flex-display(@display: flex, @direction: row, @wrap: wrap) { + display: ~"-webkit-@{display}"; + display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox + display: ~"-ms-@{display}"; // IE11 + display: @display; + + -webkit-flex-direction: @direction; + -ms-flex-direction: @direction; + flex-direction: @direction; + -webkit-flex-wrap: @wrap; + -ms-flex-wrap: @wrap; + flex-wrap: @wrap; +} + +// Flex Direction and Wrap +.flex-flow(@flow) { + -webkit-flex-flow: @flow; + -ms-flex-flow: @flow; + flex-flow: @flow; +} + +// Display Order +.flex-order(@order: 0) { + -webkit-order: @order; + -ms-order: @order; + order: @order; +} + +// Flex - applies to: flex items +.flex(@flex-grow: 0, @flex-shrink: 1, @flex-basis: auto) { + -webkit-flex: @flex-grow @flex-shrink @flex-basis; + -ms-flex: @flex-grow @flex-shrink @flex-basis; + flex: @flex-grow @flex-shrink @flex-basis; +} + +.flex-only(@flex-only) { + -webkit-flex: @flex-only; + -ms-flex: @flex-only; + flex: @flex-only; +} + +// Axis Alignment +// flex-start | flex-end | center | space-between | space-around +.justify-content(@justify: flex-start) { + -webkit-justify-content: @justify; + -ms-justify-content: @justify; + justify-content: @justify; +} + +// Packing Flex Lines +// flex-start | flex-end | center | space-between | space-around | stretch +.align-content(@align: stretch) { + -webkit-align-content: @align; + -ms-align-content: @align; + align-content: @align; +} + +// Cross-axis Alignment +// flex-start | flex-end | center | baseline | stretch +.align-items(@align: stretch) { + -webkit-align-items: @align; + -ms-align-items: @align; + align-items: @align; +} + +// Cross-axis Alignment +// auto | flex-start | flex-end | center | baseline | stretch +.align-self(@align: auto) { + -webkit-align-self: @align; + -ms-align-self: @align; + align-self: @align; +} + +//Background Image +.background-image(@imgpath, @position:0 0, @repeat: no-repeat) { + background-image: url(@imgpath); + background-position: @position; + background-repeat: @repeat; +} + +//Vertical Gradient +.vertical-gradient (@vstartColor: @orange-6, @vendColor: @red-6) { + background-color: @vstartColor; + background: -webkit-gradient(linear, left top, left bottom, from(@vstartColor), to(@vendColor)); + background: -webkit-linear-gradient(top, @vstartColor, @vendColor); + background: -moz-linear-gradient(top, @vstartColor, @vendColor); + background: -ms-linear-gradient(top, @vstartColor, @vendColor); + background: -o-linear-gradient(top, @vstartColor, @vendColor); +} + +//Horizontal Gradient +.horizontal-gradient (@hstartColor: @orange-6, @hendColor: @red-6) { + background-color: @hstartColor; + background-image: -webkit-gradient(linear, left top, right top, from(@hstartColor), to(@hendColor)); + background-image: -webkit-linear-gradient(left, @hstartColor, @hendColor); + background-image: -moz-linear-gradient(left, @hstartColor, @hendColor); + background-image: -ms-linear-gradient(left, @hstartColor, @hendColor); + background-image: -o-linear-gradient(left, @hstartColor, @hendColor); +} diff --git a/src/styles/global/variables.less b/src/styles/global/variables.less new file mode 100644 index 000000000..ee959643b --- /dev/null +++ b/src/styles/global/variables.less @@ -0,0 +1,207 @@ +@font-family: 'Catamaran', sans-serif; + +@class-prefix: gx; + +// Grey ColorPicker Variables +@grey-2: #fafafa; +@grey-3: #f5f5f5; +@grey-4: #e8e8e8; +@grey-5: #d9d9d9; +@grey-6: #bfbfbf; +@grey-7: #8c8c8c; +@grey-8: #595959; +@grey-9: #262626; + +@info-color: @blue-6; +@success-color: @green-6; +@processing-color: @primary-color; +@error-color: @red-6; +@highlight-color: @red-6; +@warning-color: @orange-6; +@normal-color: #d9d9d9; +@danger-color: #f44336; +@light-color: #e8eaf6; +@dark-color: @grey-9; + +@blue-color: @blue-6; +@indigo-color: #3c1991; +@purple-color: @purple-6; +@pink-color: @pink-6; +@red-color: @red-6; +@orange-color: @orange-6; +@yellow-color: @yellow-6; +@amber-color: @yellow-color; +@green-color: @green-6; +@teal-color: #20c997; +@cyan-color: @cyan-6; +@gold-color: @gold-6; +@lime-color: @lime-6; + +// Background color for `` +@heading-color-dark: fade(#fff, 100%); +@text-color-dark: fade(#fff, 85%); +@text-color-secondary-dark: fade(#fff, 65%); +@font-size-base: 14px; +@font-size-lg: @font-size-base + 2px; +@font-size-sm: 12px; +@line-height-base: 1.5; +@border-radius-base: 4px; +@border-radius-sm: 2px; +@border-radius-lg: 8px; +@border-radius-xxl: 30px; +@border-radius-circle: 50%; + +// Border color +@border-color-base: hsv(0, 0, 85%); // base border outline a component +@border-color-split: hsv(0, 0, 91%); // split border inside a component +@border-width-base: 1px; // width of the border for a component +@border-style-base: solid; // style of a components border +@border-color: @border-color-split; + +// LINK +@link-color: @primary-color; +@link-hover-color: color(~`colorPalette("@{link-color}", 5)`); +@link-active-color: color(~`colorPalette("@{link-color}", 7)`); + +@h1-font-size: 22px; +@h2-font-size: 20px; +@h3-font-size: 18px; +@h4-font-size: 16px; +@h5-font-size: 14px; +@h6-font-size: 12px; + +@headings-font-weight: 400; +@headings-line-height: 1.2; + +@font-weight-thin: 100; +@font-weight-extra-light: 200; +@font-weight-light: 300; +@font-weight-normal: 400; +@font-weight-medium: 500; +@font-weight-semi-bold: 600; +@font-weight-bold: 700; +@font-weight-extra-bold: 800; +@font-weight-black: 900; + +// Sidebar Variables +@sidebar-width: 280px; +@sidebar-mini-drawer-width: 80px; +@sidebar-padding-lr: 30px; + +@sidebar-bg-darken: darken(@sidebar-bg, 3%); +@sidebar-hover-color: @primary-color; + +// Dark Sidebar Variables +@sidebar-dark-bg-darken: lighten(@sidebar-dark-bg, 6%); +@sidebar-dark-hover-color: @white-color; + +// Menu +// --- +@menu-inline-toplevel-item-height: 42px; +@menu-item-height: 42px; +@menu-collapsed-width: 80px; +@menu-bg: @component-background; +@menu-item-color: @text-color; +@menu-highlight-color: @primary-color; +@menu-item-active-bg: @item-active-bg; +@menu-item-group-title-color: #545454; +@menu-highlight-dot-color: @pink-5; + +// dark theme +@menu-dark-color: @text-color-secondary-dark; +@menu-dark-arrow-color: @white-color; +@menu-dark-submenu-bg: @sidebar-dark-bg-darken; +@menu-dark-highlight-color: @white-color; +@menu-dark-item-selected-bg: @sidebar-dark-bg-darken; + +// Layout +@layout-body-background: @body-background; +@layout-header-height: 72px; +@layout-header-padding: 0 30px; +@layout-header-padding-res: 0 20px; +@layout-footer-padding: 14px 30px; +@layout-sider-background: @sidebar-dark-bg; +@layout-trigger-height: 30px; +@layout-trigger-background: #002140; +@layout-trigger-color: @white-color; +@layout-zero-trigger-width: 36px; +@layout-zero-trigger-height: 28px; +@layout-main-content-padding: 30px; + +// Card +// --- +@card-head-color: @heading-color; +@card-head-background: @component-background; +@card-head-padding: 16px; +@card-inner-head-padding: 12px; +@card-padding-base: 24px; +@card-padding-wider: 24px; +@card-actions-background: @background-color-light; +@card-shadow: 0 2px 8px rgba(0, 0, 0, .09); + +@gx-card-padding-base: 24px; +@gx-card-padding-sm: @gx-card-padding-base - 10px; +@gx-card-shadow: 0 0 2px fade(@black-color, 35%); +@gx-card-shadow-lg: 0 0 10px 4px fade(@black-color, 35%); +@gx-card-shadow-md: 0 0 8px 3px fade(@black-color, 20%); +@gx-card-margin-base: 30px; + +// Gutter +@grid-gutter-width: 30px; + +//Sizes Variables +@size-20: 20px; +@size-30: 30px; +@size-40: 40px; +@size-50: 50px; +@size-60: 60px; +@size-80: 80px; +@size-100: 100px; +@size-120: 120px; + +//latter Spacing variables +@letter-spacing-base: 3px; +@letter-spacing-lg: 6px; +@letter-spacing-xl: 8px; + +//CRM Image Location +@image_path: "../../assets/images"; + +// Apps Variables +@app-sidebar-width: 230px; +@app-chat-sidebar-width: 315px; + +// Form +// --- +@label-required-color: @highlight-color; +@label-color: @heading-color; +@form-item-margin-bottom: 20px; +@form-item-trailing-colon: true; +@form-vertical-label-padding: 0 0 8px; +@form-vertical-label-margin: 0; + +// Buttons +@btn-height-base: 32px; +@btn-height-lg: 40px; +@btn-height-sm: 24px; +@btn-font-size-lg: @font-size-lg; +@btn-font-size-sm: @font-size-sm; +@btn-font-size-xs: @font-size-sm - 2px; +@btn-padding-xs: 0 6px; + +// Dragndrop +@dragndrop-paddding-tb: 24px; +@dragndrop-paddding-lr: 16px; + +//Pricing Table +@gx-pricing-table-base: 30px; + +// Customizer +@gx-customizer-width: 370px; +@gx-customizer-base: 20px; + +//Framed Layout +@framed-layout-base: 20px; + + + diff --git a/src/styles/layout/ant-layout.less b/src/styles/layout/ant-layout.less new file mode 100644 index 000000000..fca296918 --- /dev/null +++ b/src/styles/layout/ant-layout.less @@ -0,0 +1,41 @@ +/* Ant Layout Style */ +.ant-layout { + height: 100vh; + position: relative; + background: none; + + & > .ant-layout-content { + overflow-x: hidden; + .flex-display(flex, column, nowrap); + } + + &.ant-layout-has-sider > .ant-layout { + position: relative; + } + .boxed-layout & { + background: @white-color; + } + + .framed-layout & { + background: @white-color; + height: calc(100vh~"-"2 * @framed-layout-base); + + @media screen and (max-width: @screen-md-max) { + height: 100vh; + } + } +} + +.@{class-prefix}-main-content-wrapper { + padding: @layout-main-content-padding @layout-main-content-padding 0; + flex: 1; + //.flex-display(flex, column, nowrap); +} + +.@{class-prefix}-main-content { + .flex-display(flex, column, nowrap); + flex: 1; + height: 100%; +} + + diff --git a/src/styles/layout/customizer.less b/src/styles/layout/customizer.less new file mode 100644 index 000000000..6de08b7e9 --- /dev/null +++ b/src/styles/layout/customizer.less @@ -0,0 +1,77 @@ +/* Customizer Style */ +.@{class-prefix}-customizer { + height: calc(100vh ~"-" 70px) !important; + + &-item { + + &:not(:last-child) { + border-bottom: @border-style-base @border-width-base @border-color; + padding-bottom: @gx-customizer-base; + margin-bottom: @gx-customizer-base; + } + + & .ant-radio-group { + & .ant-radio-button { + display: none; + } + } + } + + &-option { + position: absolute; + right: 0; + top: 150px; + z-index: 99; + } + + @media screen and (max-width: @screen-xs-max) { + width: @gx-customizer-width - 120px !important; + } +} + +.@{class-prefix}-color-option { + margin-bottom: 0; + max-width: @gx-customizer-width - 30px; + padding-left: 0; + + & li { + font-size: 36px; + line-height: 1; + + & a { + width: @size-40; + height: @size-40; + display: block; + position: relative; + .border-radius(@border-radius-circle); + } + + & a:before { + font-family: "gaxon-ant"; + font-size: 20px; + content: "\4b"; + position: absolute; + left: 0; + top: 0; + z-index: 2; + width: @size-40; + height: @size-40; + line-height: @size-40; + text-align: center; + display: none; + color: @white-color; + } + + & a.active:before { + display: block; + } + } + + @media screen and (max-width: @screen-xs-max) { + width: @gx-customizer-width - 150px !important; + } +} + +.@{class-prefix}-cus-customiz { + padding-right: 20px; +} diff --git a/src/styles/layout/drawer.less b/src/styles/layout/drawer.less new file mode 100644 index 000000000..09911107b --- /dev/null +++ b/src/styles/layout/drawer.less @@ -0,0 +1,92 @@ +/* Drawer Style */ +.ant-drawer { + overflow: hidden; + + &-body { + padding: 0; + } + + &-content { + .@{class-prefix}-drawer-sidebar-dark & { + background-color: @sidebar-dark-bg; + } + } + + &-content-wrapper { + width: @sidebar-width !important; + + @media screen and (max-width: @screen-md-max) { + width: @sidebar-width - 20px !important; + } + + .framed-layout & { + top: @framed-layout-base; + bottom: @framed-layout-base; + height: calc(100vh~"-"2 * @framed-layout-base); + .border-radius(11px 0 0 11px); + overflow: hidden; + + @media screen and (max-width: @screen-md-max) { + top: 0; + bottom: 0; + height: 100vh; + .border-radius(0) !important; + } + } + + .ant-drawer-right & { + width: @gx-customizer-width !important; + padding: 15px; + background: @white-color; + + @media screen and (max-width: @screen-md-max) { + width: @gx-customizer-width - 70px !important; + } + + .framed-layout & { + top: @framed-layout-base; + bottom: @framed-layout-base; + height: calc(100vh~"-"2 * @framed-layout-base); + .border-radius(0 11px 11px 0); + overflow: hidden; + + @media screen and (max-width: @screen-md-max) { + top: 0; + bottom: 0; + height: 100vh; + .border-radius(0) !important; + } + } + } + } + + .framed-layout & { + position: absolute; + } + + .boxed-layout & { + position: absolute; + } + + &-left { + .framed-layout & { + left: @framed-layout-base; + } + } + + &-right { + .framed-layout & { + right: @framed-layout-base; + } + } + + &-close { + top: -11px; + + &-x { + width: @size-30 + 5px; + height: @size-30 + 5px; + line-height: @size-30 + 5px; + } + } +} diff --git a/src/styles/layout/footer.less b/src/styles/layout/footer.less new file mode 100644 index 000000000..b2e84ab4a --- /dev/null +++ b/src/styles/layout/footer.less @@ -0,0 +1,4 @@ +/* Footer Style */ +.ant-layout-footer { + border-top: @border-style-base @border-width-base @border-color; +} diff --git a/src/styles/layout/header.less b/src/styles/layout/header.less new file mode 100644 index 000000000..be29e0efd --- /dev/null +++ b/src/styles/layout/header.less @@ -0,0 +1,177 @@ +/* Header Style */ +.ant-layout-header { + .box-shadow(0 0 4px fade(@black-color, 28%)); + .flex-display(flex, row, wrap); + .align-items(center); + .justify-content(space-between); + line-height: 1; + padding: @layout-header-padding; + height: @layout-header-height; + position: relative; + z-index: 10; + color: @header-text-color; + + @media screen and (max-width: @screen-md-max) { + padding: @layout-header-padding-res; + } +} + +.@{class-prefix}-nav-header { + padding: @layout-header-padding; + border-bottom: @border-width-base @border-style-base (fade(@white-color, 50%)); + background-color: @layout-header-background; + + & .ant-menu-horizontal { + margin-bottom: -1px; + border-bottom-color: transparent; + } +} + +.@{class-prefix}-nav-header-below { + .box-shadow(0 1px 2px 1px fade(@black-color, 28%)); + position: relative; + z-index: 999; +} + +.ant-dropdown-menu-item { + .flex-display(); + .align-items(center); +} + +.@{class-prefix}-linebar { + font-size: 20px; +} + +.@{class-prefix}-header-notifications { + list-style: none; + margin: 0; + padding-left: 0; + .flex-display(flex, row, wrap); + .align-items(center); + + & > li { + font-size: 14px; + + &:not(:last-child) { + margin-right: 42px; + + .@{class-prefix}-layout-header-horizontal & { + margin-right: 20px; + } + + @media screen and (max-width: @screen-md-max) { + margin-right: 20px; + } + + @media screen and (max-width: @screen-sm-max) { + margin-right: 16px; + } + } + + &.@{class-prefix}-notify { + margin-right: 22px; + + .@{class-prefix}-layout-header-horizontal & { + margin-right: 20px; + } + + @media screen and (max-width: @screen-md-max) { + margin-right: 16px; + } + } + + &.@{class-prefix}-language { + + & .@{class-prefix}-language-name { + @media screen and (max-width: @screen-xs-max) { + display: none; + } + } + } + + &.@{class-prefix}-notify-search { + @media screen and (max-width: @screen-xs-max) { + display: none !important; + } + } + } +} + +.@{class-prefix}-popover-scroll { + height: 280px !important; + width: 300px !important; + margin: 0 -16px; + + @media screen and (max-width: @screen-xs-max) { + height: 210px !important; + width: 200px !important; + } +} + +.@{class-prefix}-popover-lang-scroll { + height: 220px !important; + width: 160px !important; + margin: 0 -16px; +} + +.ant-popover-placement-bottomRight { + & > .ant-popover-content { + & > .ant-popover-arrow { + right: 10px; + } + } +} + +.@{class-prefix}-popover-header { + .flex-display(flex, row, wrap); + .align-items(center); + .justify-content(space-between); + border-bottom: @border-style-base @border-width-base @border-color; + margin: 0 -16px; + padding: 0 16px 12px; +} + +.@{class-prefix}-sub-popover { + list-style: none; + margin: 0 16px; + padding-left: 0; + + & li { + padding: 20px 0 14px; + + .@{class-prefix}-popover-lang-scroll & { + padding: 5px 0; + } + + &:not(:last-child) { + border-bottom: @border-style-base @border-width-base @border-color; + } + } +} + +.@{class-prefix}-user-nav { + & .ant-avatar.@{class-prefix}-size-50 { + @media screen and (max-width: @screen-md-max) { + height: @size-40 !important; + width: @size-40 !important; + line-height: @size-40 !important; + } + } +} + +.@{class-prefix}-user-popover { + margin: -12px -16px; + padding: 7px 0; + list-style: none; + + & li { + cursor: pointer; + padding: 3px 15px; + width: 150px; + + &:hover, + &:focus { + background-color: @grey-2; + } + } +} diff --git a/src/styles/layout/index.less b/src/styles/layout/index.less new file mode 100644 index 000000000..ef64ed1f1 --- /dev/null +++ b/src/styles/layout/index.less @@ -0,0 +1,7 @@ +@import 'ant-layout'; +@import "header"; +@import "sidebar"; +@import "navbar"; +@import "footer"; +@import "customizer"; +@import "drawer"; diff --git a/src/styles/layout/navbar.less b/src/styles/layout/navbar.less new file mode 100644 index 000000000..2e57daf93 --- /dev/null +++ b/src/styles/layout/navbar.less @@ -0,0 +1,497 @@ +/* Ant Menu Style */ + +// CRM theme +.ant-menu { + color: @menu-item-color; + background: @menu-bg; + + &-horizontal { + background: none; + } + + &-item-group-title { + color: @menu-item-group-title-color; + font-size: @font-size-base; + line-height: @line-height-base; + padding: 10px @sidebar-padding-lr; + + .ant-menu-submenu-popup & { + padding-left: (@sidebar-padding-lr - 10px); + } + + .ant-layout-sider & { + padding-top: (@sidebar-padding-lr + 10px); + } + } + + &-item:active, + &-submenu-title:active { + background: @menu-item-active-bg; + } + &-item .icon { + min-width: 14px; + margin-right: 22px; + + &[class^="icon-"]::before, + &[class*=" icon-"]::before { + position: relative; + top: 2px; + } + } + + &-sub &-item .icon { + font-size: 12px; + } + + &-item > a { + color: @menu-item-color; + &:hover { + color: @menu-highlight-color; + } + } + + &-item-divider { + background-color: @border-color-split; + } + + &-submenu-inline { + .transition(all 0.3s ease-out); + } + + &-submenu-inline&-submenu-open { + + .ant-layout-sider & { + padding: 12px 0; + } + } + + &-item:hover, + &-item-active, + &:not(.ant-menu-inline) &-submenu-open, + &-submenu-active, + &-submenu-title:hover { + color: @menu-highlight-color; + } + + &-horizontal > &-item:hover, + &-horizontal > &-item-active, + &-horizontal > &-submenu &-submenu-title:hover { + background-color: transparent; + } + + &-item-selected { + color: @menu-highlight-color; + > a { + color: @menu-item-color; + } + + > a:hover { + color: @menu-highlight-color; + } + } + + &:not(.ant-menu-horizontal) &-item-selected { + background-color: @menu-item-active-bg; + } + + &-inline, + &-vertical, + &-vertical-left { + border-right: @border-width-base @border-style-base @border-color-split; + } + &-vertical-right { + border-left: @border-width-base @border-style-base @border-color-split; + } + + &-item, + &-submenu-title { + padding: 0 20px; + + .@{class-prefix}-layout-header-horizontal & { + padding: 0 10px; + + @media screen and (max-width: @screen-lg-max) { + padding: 0 6px; + } + } + + .@{iconfont-css-prefix} { + margin-right: 20px; + } + } + + & > &-item-divider { + background-color: @border-color-split; + } + + &-sub { + & > li { + & > a { + position: relative; + } + } + } + + &-submenu { + > .ant-menu { + background-color: @menu-bg; + border-radius: 0; + + &.ant-menu-sub .ant-menu-item { + padding-left: 2*@sidebar-padding-lr - 6px !important; + + .ant-layout-sider & { + padding-left: 2*@sidebar-padding-lr + 6px !important; + } + } + } + + &-popup { + border-radius: 0; + z-index: @zindex-dropdown; + + & .ant-menu-sub { + &.ant-menu .ant-menu-item { + padding-left: @sidebar-padding-lr - 10px !important; + } + } + } + + &-vertical, + &-vertical-left, + &-vertical-right, + &-inline { + .@{menu-prefix-cls}-item:not(:last-child) { + margin-bottom: 0; + } + + > .ant-menu-submenu-title .ant-menu-submenu-arrow { + .@{class-prefix}-app-sidebar & { + position: relative; + top: auto; + right: auto; + } + + .ant-drawer & { + position: relative; + top: auto; + right: auto; + } + + &:before, + &:after { + background-image: linear-gradient(to right, @menu-item-color, @menu-item-color); + } + } + > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow { + &:after, + &:before { + background: linear-gradient(to right, @menu-highlight-color, @menu-highlight-color); + } + } + } + } + + &-vertical &-submenu-selected, + &-vertical-left &-submenu-selected, + &-vertical-right &-submenu-selected { + color: @menu-highlight-color; + > a { + color: @menu-highlight-color; + } + } + + &-horizontal { + border-bottom: @border-width-base @border-style-base @border-color-split; + line-height: 46px; + padding: 0; + + .ant-layout-header & { + border-bottom: 0 none; + line-height: @layout-header-height - 2px; + } + + > .ant-menu-item, + > .ant-menu-submenu { + border-bottom: 2px @border-style-base transparent; + + &:hover, + &-active, + &-open, + &-selected { + border-bottom: 2px @border-style-base @menu-highlight-color; + color: @menu-highlight-color; + } + + > a { + color: @menu-item-color; + &:hover { + color: @menu-highlight-color; + } + &:before { + bottom: -2px; + } + } + } + } + + &-vertical, + &-vertical-left, + &-vertical-right, + &-inline { + .ant-menu-item { + &:not(:last-child) { + margin-bottom: 0; + } + &:after { + border-right: 3px @border-style-base @menu-highlight-color; + } + } + + .ant-menu-item, + .ant-menu-submenu-title { + padding: 0 @sidebar-padding-lr 0 (@sidebar-padding-lr - 10px) !important; + font-size: @font-size-base; + margin-top: 0; + margin-bottom: 0; + text-overflow: inherit; + + .ant-layout-sider & { + padding-left: @sidebar-padding-lr !important; + } + + .ant-drawer & { + padding-left: @sidebar-padding-lr !important; + } + + .icon { + min-width: 14px; + margin-right: 20px; + + &[class^="icon-"]::before, + &[class*=" icon-"]::before { + position: relative; + top: 2px; + } + + & + span { + .ant-layout-sider-collapsed & { + max-width: 0; + display: inline-block; + opacity: 0; + } + } + } + + .@{menu-prefix-cls}-submenu-arrow { + .ant-layout-sider-collapsed & { + display: none; + } + } + + .ant-layout-sider-collapsed & { + padding: 0 (@menu-collapsed-width - 16px) / 2 !important; + } + } + } + + &-inline { + .ant-menu-submenu-title { + padding-right: @sidebar-padding-lr !important; + .flex-display(flex, row, nowrap); + .align-items(center); + .justify-content(space-between); + } + } + + &-inline-collapsed { + width: @menu-collapsed-width; + > .ant-menu-item, + > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item, + > .ant-menu-submenu > .ant-menu-submenu-title { + left: 0; + padding: 0 (@menu-collapsed-width - 16px) / 2 !important; + .@{menu-prefix-cls}-submenu-arrow { + display: none; + } + .icon { + & + span { + max-width: 0; + display: inline-block; + opacity: 0; + } + } + } + &-tooltip { + & .icon { + display: none; + } + + a { + color: @text-color-dark; + } + } + + .ant-menu-item-group-title { + padding-left: 4px; + padding-right: 4px; + display: none; + } + } + + &-item-group-list { + .ant-menu-item, + .ant-menu-submenu-title { + padding: 0 16px 0 28px; + } + } + + &-sub&-inline { + & > .ant-menu-item, + & > .ant-menu-submenu > .ant-menu-submenu-title { + line-height: @menu-item-height; + height: @menu-item-height; + } + + & .ant-menu-item-group-title { + padding: 0 @sidebar-padding-lr; + line-height: @menu-item-height; + height: @menu-item-height; + } + } + + // Disabled state sets text to gray and nukes hover/tab effects + &-item-disabled, + &-submenu-disabled { + color: @disabled-color !important; + > a { + color: @disabled-color !important; + } + > .ant-menu-submenu-title { + color: @disabled-color !important; + } + } + + &-submenu-selected .ant-menu-submenu-title { + color: @menu-highlight-color; + + & .ant-menu-submenu-arrow { + &:after, + &:before { + background: linear-gradient(to right, @menu-highlight-color, @menu-highlight-color); + } + } + } +} + +// dark theme +.ant-menu { + + &-dark, + &-dark &-sub { + color: @menu-dark-color; + background: @menu-dark-bg; + .ant-menu-submenu-title .ant-menu-submenu-arrow { + &:after, + &:before { + background: @menu-dark-arrow-color; + } + } + } + + &-dark &-inline&-sub { + background: none; + box-shadow: none; + } + + &-dark&-horizontal { + border-bottom-color: @menu-dark-bg; + } + + &-dark&-horizontal > &-item, + &-dark&-horizontal > &-submenu { + border-color: @menu-dark-bg; + } + + &-dark &-item .icon { + min-width: 14px; + margin-right: 20px; + + &[class^="icon-"]::before, + &[class*=" icon-"]::before { + position: relative; + top: 2px; + } + } + + &-dark &-item-group-title { + color: @menu-dark-color; + } + + &-dark &-item { + color: @menu-dark-color; + } + + &-dark &-item > a { + color: darken(@menu-dark-color, 20%); + } + + &-dark &-item:hover, + &-dark &-item-active, + &-dark &-submenu-active, + &-dark &-submenu-open, + &-dark &-submenu-selected, + &-dark &-submenu-title:hover { + background-color: fade(@white-color, 12%); + color: @menu-dark-highlight-color; + > a { + color: @menu-dark-highlight-color; + } + > .ant-menu-submenu-title, + > .ant-menu-submenu-title:hover { + > .ant-menu-submenu-arrow { + &:after, + &:before { + background: @menu-dark-highlight-color; + } + } + } + } + + &-dark &-item-selected { + color: @menu-dark-highlight-color; + + > a, + > a:hover { + color: @menu-dark-highlight-color; + } + } + + &&-dark &-item-selected, + &-submenu-popup&-dark &-item-selected { + background-color: fade(@white-color, 09%); + } + + // Disabled state sets text to dark gray and nukes hover/tab effects + &-dark &-item-disabled, + &-dark &-submenu-disabled { + &, + > a { + color: @disabled-color-dark !important; + } + > .ant-menu-submenu-title { + color: @disabled-color-dark !important; + } + } + + &-dark .ant-menu-submenu-selected .ant-menu-submenu-title { + color: @menu-dark-highlight-color; + } +} + +.ant-menu-submenu-horizontal { + & > .ant-menu-submenu-title { + color: @header-text-color; + } +} + diff --git a/src/styles/layout/sidebar.less b/src/styles/layout/sidebar.less new file mode 100644 index 000000000..d7eec51e7 --- /dev/null +++ b/src/styles/layout/sidebar.less @@ -0,0 +1,90 @@ +/* Sidebar Style */ +.@{class-prefix}-app-sidebar { + .transition(all 0.2s ease); +} + +.ant-layout-sider { + background-color: @sidebar-bg; + color: @sidebar-dark-text-color; + flex: 0 0 auto !important; + max-width: none !important; + min-width: 10px !important; + width: @sidebar-width !important; + overflow: hidden; + + @media screen and (max-width: @screen-md-max) { + width: @sidebar-width - 20px !important; + } + + &-collapsed { + width: @sidebar-mini-drawer-width !important; + } + + &.@{class-prefix}-collapsed-sidebar { + width: 0 !important; + min-width: 0 !important; + } +} + +.@{class-prefix}-layout-sider-dark { + background-color: @sidebar-dark-bg; +} + +.@{class-prefix}-layout-sider-header { + padding: 10px @sidebar-padding-lr 10px (2*@sidebar-padding-lr + 10px); + height: @layout-header-height; + .box-shadow(0 0 4px fade(@black-color, 28%)); + position: relative; + z-index: 1; + .flex-display(flex, row, nowrap); + .align-items(center); + + & .@{class-prefix}-site-logo { + display: block; + + .ant-layout-sider-collapsed & { + display: none; + } + } + + & .@{class-prefix}-linebar { + position: absolute; + left: @sidebar-padding-lr - 10px; + z-index: 1; + top: 15px; + .transition(all 0.3s ease-out); + + .ant-layout-sider-collapsed & { + left: 20px; + } + } + + .ant-layout-sider-collapsed & { + padding-left: 20px; + padding-right: 20px; + } + + .@{class-prefix}-drawer-sidebar & { + padding-left: @sidebar-padding-lr; + } + + .@{class-prefix}-drawer-sidebar-dark & { + background-color: fade(@white-color, 10%); + } + + .@{class-prefix}-layout-sider-dark & { + background-color: fade(@white-color, 10%); + } +} + +.@{class-prefix}-layout-sider-scrollbar { + height: calc(100vh ~"-" @layout-header-height) !important; + + .framed-layout & { + height: calc(100vh~"-"@layout-header-height + 2 * @framed-layout-base) !important; + + @media screen and (max-width: @screen-md-max) { + height: calc(100vh ~"-" @layout-header-height) !important; + } + } +} diff --git a/src/styles/pages/callout.less b/src/styles/pages/callout.less new file mode 100644 index 000000000..54e17a195 --- /dev/null +++ b/src/styles/pages/callout.less @@ -0,0 +1,176 @@ +/*Callout Styles*/ +/*Different size images set in Equal block height and width*/ + +.@{class-prefix}-thumb-equal, +.@{class-prefix}-grid-thumb-equal { + position: relative; + padding-bottom: 68%; + height: 0; + width: 100%; + overflow: hidden; +} + +.@{class-prefix}-thumb-cover, +.@{class-prefix}-grid-thumb-cover { + display: block; + position: absolute; + width: 100%; + height: 100%; +} + +.@{class-prefix}-thumb-cover-img, +.@{class-prefix}-grid-thumb-cover img { + height: auto; + max-width: 100%; + min-height: 100%; + object-fit: cover; + width: 100%; +} + +.@{class-prefix}-grid-thumb-equal { + + .@{class-prefix}-product-image & { + padding-bottom: 82%; + } +} + +/*Product listing page styles*/ + +.@{class-prefix}-product-row { + position: relative; + overflow: hidden; + .flex-display(flex, row, wrap); + .align-items(center); + .justify-content(center); + text-align: right; + + &.even { + text-align: left; + } +} + +.@{class-prefix}-product-col { + order: 1; + width: 50%; +} + +.odd .@{class-prefix}-product-thumb { + order: 2; +} + +.@{class-prefix}-product-content { + padding: 20px 55px; + + p { + margin-bottom: 10px; + } +} + +.@{class-prefix}-product-row .@{class-prefix}-grid-thumb-equal { + padding-bottom: 69%; +} + +.@{class-prefix}-product-thumb img { + width: 100%; +} + +.@{class-prefix}-product-content h4 { + margin-bottom: 25px; +} + +@media screen and (max-width: 1230px) { + .@{class-prefix}-product-row .@{class-prefix}-grid-thumb-equal { + padding-bottom: 71%; + } +} + +@media screen and (max-width: @screen-lg-max) { + .@{class-prefix}-product-row { + .flex-display(flex, column, nowrap); + text-align: center; + + &.even { + text-align: center; + } + } + + .@{class-prefix}-product-content h4 { + margin-bottom: 10px; + } + + .@{class-prefix}-product-content { + padding: 20px 35px; + } + + .@{class-prefix}-product-col, + .odd .@{class-prefix}-product-thumb { + order: 1; + width: 100%; + } + + .@{class-prefix}-product-row .@{class-prefix}-grid-thumb-equal { + padding-bottom: 40%; + } +} + +@media screen and (max-width: @screen-md-max) { + .@{class-prefix}-product-row { + .flex-display(flex, row, wrap); + text-align: right; + + &.even { + text-align: left; + } + } + + .@{class-prefix}-grid-thumb-equal { + .@{class-prefix}-product-image & { + padding-bottom: 120%; + } + } + + .@{class-prefix}-product-col, + .odd .@{class-prefix}-product-thumb { + order: 1; + width: 50%; + } + + .odd .@{class-prefix}-product-thumb { + order: 2; + } + + .@{class-prefix}-product-row .@{class-prefix}-grid-thumb-equal { + padding-bottom: 70%; + } +} + +@media screen and (max-width: @screen-sm-max) { + .@{class-prefix}-product-row { + .flex-display(flex, column, nowrap); + text-align: center; + + &.even { + text-align: center; + } + } + + .@{class-prefix}-product-content { + padding: 20px 0; + } + + .@{class-prefix}-product-col, + .odd .@{class-prefix}-product-thumb { + order: 1; + width: 100%; + } + + .@{class-prefix}-product-row .@{class-prefix}-grid-thumb-equal { + padding-bottom: 44%; + } + + .@{class-prefix}-grid-thumb-equal { + .@{class-prefix}-product-image & { + padding-bottom: 44%; + } + } +} diff --git a/src/styles/pages/dashboard.less b/src/styles/pages/dashboard.less new file mode 100644 index 000000000..793244e81 --- /dev/null +++ b/src/styles/pages/dashboard.less @@ -0,0 +1,379 @@ +/*Dashboard Styles*/ +.ant-list-item-meta { + flex-wrap: wrap; +} + +.@{class-prefix}-task-list-item { + position: relative; + + &:not(:last-child) { + border-bottom: @border-style-base @border-width-base @border-color; + padding-bottom: 5px; + margin-bottom: 20px; + + .@{class-prefix}-card-ticketlist & { + border-bottom: 0 none; + padding: 10px @gx-card-padding-base; + margin-bottom: 0; + } + } + + .@{class-prefix}-card-ticketlist & { + padding: 10px @gx-card-padding-base; + + .@{class-prefix}-hover { + display: none; + } + + &:hover { + background-color: darken(@grey-2, 5%); + + .@{class-prefix}-hover { + display: inline-block; + } + + .@{class-prefix}-nonhover { + display: none; + } + + & .@{class-prefix}-task-item-title { + color: @primary-color; + } + } + } + + &:hover { + cursor: pointer; + & .gx-text-hover { + color: @primary-color; + } + } +} + +.@{class-prefix}-dash-h1 { + @media screen and (max-width: @screen-lg-max) { + font-size: @h4-font-size; + } +} + +.@{class-prefix}-task-item-content { + .flex-display(flex, row, nowrap); + .justify-content(space-between); + max-width: calc(100% ~"-" 40px); + + &-left { + max-width: calc(100% ~"-" 100px); + + @media screen and (max-width: @screen-xs-max) { + max-width: 100%; + margin-bottom: 10px; + padding-right: 0; + } + } + + &-right { + min-width: 100px; + padding-right: 10px; + text-align: right; + + @media screen and (max-width: @screen-xs-max) { + text-align: left; + padding-right: 0; + } + + .@{class-prefix}-card-ticketlist & { + padding-top: 8px; + } + } + + @media screen and (max-width: @screen-xs-max) { + flex-direction: column; + } +} + +.@{class-prefix}-card-testimonial { + .flex-display(flex, row, wrap); + .justify-content(space-between); + margin-bottom: 12px; + + &-img { + margin-right: 10px; + margin-bottom: 10px; + } + + &-content { + background-color: @grey-3; + padding: 15px; + position: relative; + margin-left: 10px; + width: calc(100% ~"-" 70px); + .border-radius(@border-radius-sm); + + &:before { + content: ""; + position: absolute; + left: -10px; + top: 10px; + z-index: 1; + width: 0; + height: 0; + border-top: 7px solid transparent; + border-bottom: 7px solid transparent; + border-right: 10px solid @grey-3; + } + + & > :last-child { + margin-bottom: 0; + } + } +} + +.@{class-prefix}-progress-task { + position: relative; + + & :last-child { + margin-bottom: 0; + } + + &-list { + .flex-display(flex, row, wrap); + .align-items(center); + margin-bottom: 15px; + + & + & { + border-top: @border-style-base @border-width-base @border-color; + padding-top: 15px; + } + + & .ant-progress { + margin-bottom: 15px; + } + + &-content { + margin-left: 20px; + margin-bottom: 15px; + } + + @media screen and (max-width: @screen-xs-max) { + margin-bottom: 0; + } + } +} + +.@{class-prefix}-act-task { + position: relative; + + &-cell { + margin-bottom: 20px; + .flex-display(flex, row, nowrap); + .justify-content(space-between); + + @media screen and (max-width: @screen-xs-max) { + margin-bottom: 10px; + } + } + + &-content { + width: calc(100% ~"-" 72px); + + & label.ant-checkbox-wrapper { + & span { + display: block; + overflow: hidden; + } + + & span.ant-checkbox { + float: left; + padding: 6px 5px 0 0; + } + } + } + + &-btn-view { + margin-left: 8px; + width: 65px; + text-align: right; + + @media screen and (max-width: @screen-xs-max) { + margin-left: 0; + margin-top: 10px; + } + } +} + +.@{class-prefix}-card-ticketlist { + & .ant-card-body { + padding-left: 0; + padding-right: 0; + } + + & a { + color: @primary-color; + } +} + +.@{class-prefix}-line-indicator { + list-style: none; + margin: 0; + padding-left: 0; + + & li { + &:not(:last-child) { + margin-bottom: 12px; + } + + & p { + margin-bottom: 0; + } + } + + &-half { + .flex-display(flex, row, wrap); + margin: 0 -12px; + + & li { + width: 50%; + padding: 0 12px; + } + } + + &-col { + width: 25%; + padding-right: 10px; + + @media screen and (max-width: @screen-sm-max) { + width: 100%; + padding-right: 0; + } + } +} + +.@{class-prefix}-line-indi { + height: 3px; + + &-info { + .flex-display(flex, row, nowrap); + .align-items(center); + } +} + +.@{class-prefix}-wel-ema { + position: relative; +} + +.@{class-prefix}-overview-row { + .flex-display(flex, row, wrap); + + @media screen and (max-width: @screen-sm-max) { + flex-direction: column; + } +} + +.@{class-prefix}-overview-description { + width: 25%; + .flex-display(flex, column, nowrap); + margin: -@gx-card-padding-base; + margin-left: 0; + border-left: @border-style-base @border-width-base @border-color; + order: 2; + + @media screen and (max-width: @screen-sm-max) { + order: 1; + width: 100%; + border-left: 0 none !important; + border-top: @border-style-base @border-width-base @border-color; + border-bottom: @border-style-base @border-width-base @border-color; + margin: 15px 0 0; + } +} + +.@{class-prefix}-map-col { + .flex-only(1); + padding: 0 10px; + order: 1; + + @media screen and (max-width: @screen-sm-max) { + order: 2; + padding: 15px 0 0; + } +} + +.@{class-prefix}-revenu { + .flex-only(1); + padding: @card-padding-base - 9px; + .flex-display(flex, column, nowrap); + .justify-content(center); + .align-items(center); + + &-total { + border-bottom: @border-style-base @border-width-base @border-color; + + & h1 { + font-size: @h1-font-size + @h6-font-size; + font-weight: @font-weight-semi-bold; + margin-bottom: 4px; + + @media screen and (max-width: @screen-sm-max) { + font-size: @h1-font-size; + } + } + } + + &-row { + .flex-display(flex, row, wrap); + width: 100%; + } + + &-col { + width: 50%; + padding: 0 (@card-padding-base - 9px); + text-align: center; + + &:not(:last-child) { + border-right: @border-style-base @border-width-base @border-color; + } + } + + & h3 { + font-size: @h1-font-size - 2px; + margin-bottom: 0; + font-weight: @font-weight-medium; + } +} + +.ant-divider-horizontal { + margin: 12px 0; +} + +.@{class-prefix}-visit-col { + order: 1; + + @media screen and (max-width: @screen-lg-max) { + order: 2; + margin-top: 20px; + } +} + +.@{class-prefix}-audi-col { + order: 2; + + @media screen and (max-width: @screen-lg-max) { + order: 1; + } + + @media screen and (max-width: @screen-xs-max) { + margin-top: 20px; + } +} + +@media screen and (max-width: @screen-xs-max) { + .@{class-prefix}-list-item { + & .ant-list-item-content { + flex-direction: column; + } + } +} + + + + diff --git a/src/styles/pages/e-commerce.less b/src/styles/pages/e-commerce.less new file mode 100644 index 000000000..d2983d1a8 --- /dev/null +++ b/src/styles/pages/e-commerce.less @@ -0,0 +1,134 @@ +/*E-commerce Styles*/ + +.@{class-prefix}-product-item { + overflow: hidden; + background: @component-background; + .border-radius(@border-radius-lg + 2px); + margin-bottom: @gx-card-margin-base; + .box-shadow(@gx-card-shadow); +} + +.@{class-prefix}-product-body { + padding: @card-padding-wider; + + & + .@{class-prefix}-product-footer { + padding-top: 0; + } + + & :last-child { + margin-bottom: 0; + } +} + +.@{class-prefix}-product-footer { + padding: @card-padding-wider; + padding-bottom: @card-padding-wider - 9px; +} + +.@{class-prefix}-product-horizontal { + .flex-display(flex, row, wrap); + + & .@{class-prefix}-product-image { + width: 25%; + + @media screen and (max-width: @screen-lg-max) { + width: 33.33333%; + } + + @media screen and (max-width: @screen-md-max) { + width: 25%; + } + + @media screen and (max-width: @screen-sm-max) { + width: 100%; + } + } + + & .@{class-prefix}-product-body { + width: 50%; + + @media screen and (min-width: (@screen-xl-min + 200px)) { + width: 55%; + } + + @media screen and (max-width: @screen-lg-max) { + width: 41.66667%; + } + + @media screen and (max-width: @screen-md-max) { + width: 50%; + } + + @media screen and (max-width: @screen-sm-max) { + width: 100%; + } + + & + .@{class-prefix}-product-footer { + padding-top: @card-padding-wider; + } + } + + & .@{class-prefix}-product-footer { + width: 25%; + text-align: center; + + @media screen and (min-width: (@screen-xl-min + 200px)) { + width: 20%; + } + + & .ant-btn:not(:last-child) { + margin-left: 8px; + margin-right: 8px; + } + + & .ant-btn:last-child { + margin-left: 8px; + margin-right: 8px; + } + + @media screen and (max-width: @screen-sm-max) { + width: 100%; + text-align: left; + } + } + + & .@{class-prefix}-product-image .@{class-prefix}-grid-thumb-equal { + padding-bottom: 80%; + + @media screen and (min-width: (@screen-xl-min + 200px)) { + padding-bottom: 55%; + } + + @media screen and (max-width: @screen-lg-max) { + padding-bottom: 75%; + } + + @media screen and (max-width: @screen-md-max) { + padding-bottom: 88%; + } + + @media screen and (max-width: 849px) { + padding-bottom: 97%; + } + + @media screen and (max-width: @screen-sm-max) { + padding-bottom: 44%; + } + } +} + +.@{class-prefix}-product-vertical { + .flex-display(flex, column, nowrap); + height: calc(100% ~"-" @gx-card-margin-base); + + & .@{class-prefix}-product-body { + .flex-only(1); + } +} + +.@{class-prefix}-product-title { + font-size: @h2-font-size; +} + + + diff --git a/src/styles/pages/editor.less b/src/styles/pages/editor.less new file mode 100644 index 000000000..402210069 --- /dev/null +++ b/src/styles/pages/editor.less @@ -0,0 +1,13 @@ +/*Editor Styles*/ +.rdw-editor-toolbar { + & .rdw-inline-wrapper { + flex-wrap: wrap; + + & .rdw-option-wrapper { + @media screen and (max-width: (@screen-xs-max - 176px)) { + margin-bottom: 8px; + } + } + } +} + diff --git a/src/styles/pages/error.less b/src/styles/pages/error.less new file mode 100644 index 000000000..93486786f --- /dev/null +++ b/src/styles/pages/error.less @@ -0,0 +1,45 @@ +/*Error Styles*/ + +.@{class-prefix}-page-error-container { + position: relative; + height: 100%; + + .flex-display(flex, row, wrap); + .align-items(center); + .justify-content(center); +} + +.@{class-prefix}-page-error-content { + margin: 0 auto; + width: 380px; + max-width: 94%; + + & h2 { + margin-bottom: @size-50; + + @media screen and (max-width: @screen-sm-max) { + margin-bottom: 20px; + } + } +} + +.@{class-prefix}-error-code { + color: @grey-8; + font-size: 160px; + text-align: center; + line-height: 1; + font-weight: @font-weight-medium; + text-shadow: 10px 6px 8px rgba(117, 117, 117, 0.8); + + @media screen and (max-width: @screen-md-max) { + font-size: 130px; + } + + @media screen and (max-width: @screen-sm-max) { + font-size: 100px; + } + + @media screen and (max-width: @screen-xs-max) { + font-size: 80px; + } +} diff --git a/src/styles/pages/index.less b/src/styles/pages/index.less new file mode 100644 index 000000000..a291f830e --- /dev/null +++ b/src/styles/pages/index.less @@ -0,0 +1,8 @@ +@import "callout"; +@import 'e-commerce'; +@import "pricing-tables"; +@import "login"; +@import "dashboard"; +@import "error"; +@import "editor"; +@import "testimonials"; diff --git a/src/styles/pages/login.less b/src/styles/pages/login.less new file mode 100644 index 000000000..53cc3b4be --- /dev/null +++ b/src/styles/pages/login.less @@ -0,0 +1,214 @@ +/*Login Styles*/ + +.@{class-prefix}-login-container { + position: relative; + height: 100%; + padding-bottom: @size-30; + .flex-only(1); + + .flex-display(flex, row, wrap); + .align-items(center); + .justify-content(center); +} + +.@{class-prefix}-login-content { + max-width: 420px; + width: 94%; + margin: auto; + padding: 35px 35px 20px; + background-color: @white-color; + .border-radius(@border-radius-lg); + .box-shadow(@gx-card-shadow); + font-size: 14px; + + & .ant-input { + background-color: @grey-3; + height: auto; + padding: 6px 12px; + + &:focus { + box-shadow: none; + border-color: @primary-color; + } + } + + & .ant-form-item-control-wrapper { + width: 100%; + } + + & .ant-form-item-children { + display: block; + } + + @media screen and (max-width: @screen-xs-max) { + padding: 20px 20px 10px; + } +} + +.@{class-prefix}-login-header { + margin-bottom: 30px; + + @media screen and (max-width: @screen-xs-max) { + margin-bottom: 15px; + } +} + +.@{class-prefix}-app-login-wrap { + height: 100%; + .flex-display(flex, column, nowrap); + .justify-content(center); + overflow-x: hidden; + + @media screen and (max-width: @screen-xs-max) { + padding-top: 20px; + .justify-content(flex-start); + } +} + +.@{class-prefix}-app-login-container { + position: relative; + max-width: 680px; + width: 94%; + margin: 0 auto; + + @media screen and (max-width: @screen-xs-max) { + padding-bottom: 20px ; + } + + & .@{class-prefix}-loader-view { + position: absolute; + left: 0; + right: 0; + text-align: center; + top: 0; + bottom: 0; + z-index: 2; + } +} + +.@{class-prefix}-app-login-main-content { + .flex-display(flex, row, wrap); + background-color: @white-color; + .box-shadow(@gx-card-shadow); + .border-radius(@border-radius-lg + 2px); + font-size: 14px; + overflow: hidden; +} + +.@{class-prefix}-app-login-content { + padding: 35px 35px 20px; + width: 60%; + + & .ant-input { + background-color: @grey-3; + + &:focus { + box-shadow: none; + border-color: @primary-color; + } + } + + & .@{class-prefix}-btn { + padding: 6px 35px !important; + height: auto; + } + + & .ant-form-item-control-wrapper { + width: 100%; + } + + & .ant-form-item-children { + display: block; + } + + @media screen and (max-width: @screen-xs-max) { + width: 100%; + padding: 20px 20px 10px; + } +} + +.@{class-prefix}-app-login-header { + margin-bottom: 30px; + + @media screen and (max-width: @screen-xs-max) { + margin-bottom: 15px; + } +} + +.@{class-prefix}-app-logo-content { + color: @white-color; + padding: 35px 35px 20px; + width: 40%; + position: relative; + overflow: hidden; + .flex-display(flex, column, nowrap); + + & > * { + position: relative; + z-index: 2; + } + + & h1 { + color: @white-color; + } + + @media screen and (max-width: @screen-xs-max) { + width: 100%; + padding: 20px 20px 10px; + } + + &-bg { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 1; + + &:before { + content: ""; + position: absolute; + left: 0; + top: 0; + z-index: 1; + right: 0; + bottom: 0; + background-color: fade(@primary-color, 70%); + } + + & img { + width: 100%; + } + } +} + +.@{class-prefix}-app-logo-wid { + margin-bottom: auto; +} + +.@{class-prefix}-app-social-block { + .flex-display(flex, row, wrap); + .align-items(center); + .justify-content(space-between); + + & .@{class-prefix}-social-link, + & .@{class-prefix}-social-link li { + margin: 0; + } + + & .@{class-prefix}-social-link span { + border: @border-style-base @border-width-base @primary-color; + .border-radius(@border-radius-circle); + color: @primary-color; + + &:hover, + &:focus { + color: @white-color; + background-color: @primary-color; + } + } + + & p { + margin-bottom: 0; + } +} diff --git a/src/styles/pages/pricing-tables.less b/src/styles/pages/pricing-tables.less new file mode 100644 index 000000000..3bc57df81 --- /dev/null +++ b/src/styles/pages/pricing-tables.less @@ -0,0 +1,166 @@ +/*Pricing Tables Styles*/ +.@{class-prefix}-price-tables { + position: relative; +} + +.@{class-prefix}-package { + position: relative; + margin-bottom: 15px; + overflow: hidden; + .flex-display(flex, column, nowrap); + .border-radius(10px); + .box-shadow(@gx-card-shadow); + .transition(all 0.5s ease-in-out); + height: calc(100% ~"-" 15px); + .scale(0.95); + + &:hover, + &:focus, + &:active { + .scale(1); + .box-shadow(0 0 4px fade(@black-color, 55%)); + + .@{class-prefix}-pt-dark & { + .border-radius(20px); + } + } + + .@{class-prefix}-pt-classic & { + border: 0 none; + .border-radius(0); + } + + &.@{class-prefix}-highlight { + .scale(1); + z-index: 2; + } + + &-header { + padding: @gx-pricing-table-base; + text-align: center; + + & > .@{class-prefix}-price { + display: inline-block; + font-size: 36px; + font-weight: @font-weight-medium; + margin-left: 0; + margin-bottom: 12px; + color: @white-color; + + & > i { + display: inline-block; + margin-right: 6px; + font-weight: bold; + } + } + + & h5 { + color: inherit; + } + + &.@{class-prefix}-text-black { + & > .@{class-prefix}-price { + color: @grey-8 !important; + } + } + + @media only screen and (max-width: @screen-md-max) { + padding-left: @gx-pricing-table-base - 10px; + padding-right: @gx-pricing-table-base - 10px; + } + } + + &-body { + padding: (@gx-pricing-table-base + 20px) @gx-pricing-table-base; + .flex-display(flex, column, nowrap); + .flex-only(1); + .align-items(center); + + @media only screen and (max-width: @screen-md-max) { + padding-left: @gx-pricing-table-base - 10px; + padding-right: @gx-pricing-table-base - 10px; + } + } + + &-items { + list-style: none; + font-size: 14px; + margin: 0 0 20px; + padding-left: 0; + .flex-only(1); + + & li { + margin-bottom: 16px; + .clearfix(); + line-height: inherit; + + & i { + float: left; + min-width: 20px; + margin-right: 16px; + line-height: inherit; + } + + & span { + display: block; + overflow: hidden; + } + } + } + + &-footer { + padding-top: @gx-pricing-table-base; + + & .ant-btn { + text-transform: capitalize; + border: 0 none; + margin-bottom: 0; + } + } + + @media only screen and (max-width: @screen-sm-max) { + &:hover, + &:focus, + &:active, + &.@{class-prefix}-highlight { + .scale(1); + } + } +} + +.@{class-prefix}-text-black { + & .@{class-prefix}-text-white { + color: @grey-8 !important; + } +} + +.@{class-prefix}-pt-circle { + & .@{class-prefix}-package-header { + .border-radius(@border-radius-circle); + height: 224px; + width: 224px; + margin: 40px auto 0; + .align-items(center); + + & .@{class-prefix}-price { + margin-top: 30px; + + @media only screen and (max-width: @screen-md-max) { + font-size: 26px; + margin-top: 12px; + margin-bottom: 6px; + } + } + + & .@{class-prefix}-letter-spacing-base { + @media only screen and (max-width: @screen-md-max) { + letter-spacing: 1px; + } + } + + @media only screen and (max-width: @screen-md-max) { + height: 150px; + width: 150px; + } + } +} diff --git a/src/styles/pages/testimonials.less b/src/styles/pages/testimonials.less new file mode 100644 index 000000000..eae7ec1f6 --- /dev/null +++ b/src/styles/pages/testimonials.less @@ -0,0 +1,95 @@ +/*Testimonial Styles*/ + +.@{class-prefix}-testimonial { + margin-bottom: @gx-card-margin-base; +} + +// Testimonials Classic +.@{class-prefix}-classic-testimonial { + + & .ant-avatar { + margin: 0 auto; + margin-bottom: 30px; + width: @size-120; + height: @size-120; + + & img { + width: 100%; + height: 100%; + } + + @media screen and (max-width: @screen-xs-max) { + width: @size-80; + height: @size-80; + margin-bottom: 15px; + } + } +} + +// Testimonials Standard +.@{class-prefix}-testimonial-bg { + background-color: fade(@black-color, 80%); + padding: 30px; + overflow: hidden; + position: relative; + + @media screen and (max-width: @screen-xs-max) { + padding: 16px; + } + + & .ant-avatar { + display: inline-block; + width: @size-80; + height: @size-80; + overflow: hidden; + border: 4px solid @amber-color; + + & img { + width: 100%; + height: auto; + } + + @media screen and (max-width: 450px) { + width: @size-50; + height: @size-50; + } + } + + & .@{class-prefix}-description { + color: @grey-5; + font-style: italic; + font-weight: @font-weight-normal; + line-height: 25px; + margin-bottom: 15px; + } + + & .@{class-prefix}-title { + color: @amber-color; + margin-bottom: 2px; + } +} + +.@{class-prefix}-testimonial-des { + position: relative; + padding-left: 30px; + + &:before { + font-family: "gaxon-ant"; + font-size: 20px; + content: "\E022"; + color: @white-color; + position: absolute; + top: 0; + left: 0; + .scale(scaleX(-1)); + } +} + +.@{class-prefix}-standard { + + & .@{class-prefix}-media { + @media screen and (max-width: (@screen-xs-max - 100px)) { + flex-direction: column; + } + } +} diff --git a/src/styles/styles.less b/src/styles/styles.less new file mode 100644 index 000000000..df8dc6d5a --- /dev/null +++ b/src/styles/styles.less @@ -0,0 +1,76 @@ +/* +Author : G-axon +Template Name : Flexile Antd React - Admin Template +Version : 1.0 +*/ +/*============================================================= + Table of Contents: + ============================= + A. Globals + 01. Custom Animation + 02. Colors Class + + B. Base + 01. Base Styles + 02. Row Col Styles + 03. Margin Padding Styles + 04. Typography Styles + + C. Layouts + 01. Ant Layout Style + 02. Header Style + 03. Sidebar Style + 04. Ant Menu Style + 05. Footer Styles + 06. Customizer Style + + D. UI Components + 01. Avatar Styles + 02. Badges Styles + 03. Button Styles + 04. Cards Styles + 05. Cascader Styles + 06. Form Styles + 07. Input Styles + 08. Icon Styles + 09. List Styles + 10. Loader Styles + 11. Pagination Styles + 12. Pickers Styles + 13. Progress Styles + 14. Steps Styles + 15. Slider Styles + 16. Tables Styles + 17. Time Lines Style + 18. Tabs Styles + + E. Apps + 01. Apps Style + 02. Mails Apps Styles + 03. Chat Apps Styles + 04. Contact Apps Styles + 05. Calendar Apps Style + + F. Pages + 01. Callout Styles + 02. E-commerce Styles + 03. Pricing Tables Styles + 04. Login Styles + 05. Dashboard Styles + 06. Error Styles + 07. Editor Styles + 08. Testimonial Styles + + =============================================================*/ + +@import '../../node_modules/antd/dist/antd.less'; +//Custom Variables +@import "global/index"; +//Custom Files +@import "base/index"; +@import "layout/index"; +@import "ui/index"; +@import "apps/index"; +@import "pages/index"; +@import "dark-theme"; + diff --git a/src/styles/ui/avatar.less b/src/styles/ui/avatar.less new file mode 100644 index 000000000..b33b93b94 --- /dev/null +++ b/src/styles/ui/avatar.less @@ -0,0 +1,33 @@ +/*Avatar Styles*/ +.@{class-prefix}-avatar-img { + height: @size-50; + width: @size-50; + position: relative; + .border-radius(@border-radius-circle); + border: @border-style-base @border-width-base @border-color; +} + +.@{class-prefix}-avatar-img-lg { + height: @size-100; + width: @size-100; +} + +.ant-avatar-circle { + .border-radius(@border-radius-circle); +} + +.@{class-prefix}-avatar { + .flex-display(flex, row, wrap); + overflow: hidden; + .justify-content(center); + .align-items(center); + height: @size-50; + width: @size-50; + position: relative; + .border-radius(@border-radius-circle); + border: @border-style-base @border-width-base @border-color; +} + +.@{class-prefix}-user-thumb { + position: relative; +} diff --git a/src/styles/ui/badge.less b/src/styles/ui/badge.less new file mode 100644 index 000000000..bd136d68b --- /dev/null +++ b/src/styles/ui/badge.less @@ -0,0 +1,55 @@ +/*Badge Styles*/ +.ant-badge { + margin-bottom: 6px; + + &:not(:last-child) { + margin-right: 12px; + } +} + +.ant-tag { + margin-bottom: 8px; +} + +.@{class-prefix}-badge { + display: inline-block; + padding: 5px 8px 4px; + font-size: 75%; + margin-bottom: 6px; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + .border-radius(@border-radius-sm); + + &:not(:last-child) { + margin-right: 12px; + } + + .@{class-prefix}-chat-date & { + margin-bottom: 0; + width: @size-20; + height: @size-20; + text-align: center; + line-height: @size-20 - 4px; + padding: 2px; + } + + .@{class-prefix}-user-thumb & { + position: absolute; + left: -4px; + top: -4px; + z-index: 1; + margin: 0; + display: block; + width: 16px; + height: 16px; + padding: 0; + line-height: 16px; + } +} + +.@{class-prefix}-badge-outline { + background-color: transparent; + border: @border-style-base @border-width-base @border-color; +} diff --git a/src/styles/ui/button.less b/src/styles/ui/button.less new file mode 100644 index 000000000..79a06cf97 --- /dev/null +++ b/src/styles/ui/button.less @@ -0,0 +1,281 @@ +/*Button Styles*/ +.ant-btn { + + line-height: @btn-height-base - 2px; + + &-sm { + line-height: @btn-height-sm; + } + &-lg { + line-height: @btn-height-lg; + } + &:not(:last-child) { + margin-right: 15px; + + @media screen and (max-width: @screen-xs-max) { + margin-right: 10px; + } + + .ant-btn-group &, + .ant-transfer-operation & { + margin-right: 0; + } + } + + @media screen and (max-width: @screen-xs-max) { + margin-bottom: 10px; + } + + .ant-input-search & { + margin-bottom: 0; + } + + .@{class-prefix}-customizer-option & { + padding: 0 @padding-md + 2px; + font-size: @font-size-lg + 2px; + height: @btn-height-lg + 2px; + line-height: @btn-height-lg + 2px; + margin-bottom: 0; + .box-shadow(@gx-card-shadow-md); + .border-radius(30px 0 0 30px); + .horizontal-gradient(); + border: 0 none; + color: @white-color; + + &:hover, + &:focus { + .horizontal-gradient(@red-6, @orange-6); + } + + & .icon:before { + position: relative; + top: 2px; + } + } + + .@{class-prefix}-module-add-task & { + height: @btn-height-lg - 4px; + + & .icon:before { + position: relative; + top: 2px; + } + } + .ant-modal-footer & { + margin-bottom: 0; + } + + .@{class-prefix}-login-content & { + padding: 9px 20px !important; + height: auto; + line-height: 1; + } +} + +.ant-btn-group { + &:not(:last-child) { + margin-right: 15px; + + @media screen and (max-width: @screen-xs-max) { + margin-right: 10px; + } + } +} + +.ant-radio-group { + & .ant-radio-button-wrapper { + margin-bottom: 6px; + } +} + +button { + outline: none; +} + +.ant-confirm .ant-confirm-btns button + button { + margin-bottom: 8px; +} + +.ant-modal.ant-confirm .ant-confirm-btns button + button, +.ant-modal.ant-confirm .ant-btn { + margin-bottom: 0; +} + +.@{class-prefix}-btn, +.btn { + display: inline-block; + font-weight: @btn-font-weight; + color: @btn-default-color; + text-align: center; + white-space: nowrap; + vertical-align: middle; + border: @border-style-base @border-width-base @btn-default-border; + padding: @btn-padding-base; + height: @btn-height-base; + font-size: @font-size-base; + line-height: @btn-height-base; + .border-radius(2px); + margin-bottom: 15px; + + &:not(:last-child) { + margin-right: 15px; + + @media screen and (max-width: @screen-xs-max) { + margin-right: 10px; + } + } + + @media screen and (max-width: @screen-xs-max) { + margin-bottom: 10px; + } + + &:focus, + &:hover { + text-decoration: none; + } + + &:focus, + &.focus { + outline: 0; + } + + &.disabled, + &:disabled { + opacity: 0.65; + } + + &:not([disabled]):not(.disabled) { + cursor: pointer; + } + + .@{class-prefix}-btn-list & { + margin-bottom: 6px; + } + + .@{class-prefix}-sub-popover & { + border: 0 none; + margin-bottom: 5px; + + &:focus, + &:hover { + background-color: @grey-3; + } + + &:not(:last-child) { + margin-right: 5px; + } + } + + .@{class-prefix}-login-content & { + padding: 9px 20px !important; + height: auto; + line-height: 1; + } +} + +a.@{class-prefix}-btn.disabled, +fieldset[disabled] a.@{class-prefix}-btn { + pointer-events: none; +} + +.@{class-prefix}-btn-rounded { + .border-radius(50px) !important; +} + +.@{class-prefix}-btn-link { + font-size: @font-size-base; + font-weight: @btn-font-weight; + color: @primary-color; + background-color: transparent; + + &:hover { + color: @primary-8; + text-decoration: underline; + background-color: transparent; + border-color: transparent; + } + + &:focus, + &.focus { + text-decoration: underline; + border-color: transparent; + } + + &:disabled, + &.disabled { + color: @grey-6; + } +} + +.@{class-prefix}-btn-lg, +.@{class-prefix}-btn-group-lg > .@{class-prefix}-btn { + padding: @btn-padding-lg; + font-size: @btn-font-size-lg; + line-height: @btn-height-lg; + .border-radius(6px); + height: @btn-height-lg; +} + +.@{class-prefix}-btn-sm, +.@{class-prefix}-btn-group-sm > .@{class-prefix}-btn { + padding: @btn-padding-sm; + font-size: @btn-font-size-sm; + line-height: @btn-height-sm; + .border-radius(2px); + height: @btn-height-sm; +} + +.@{class-prefix}-btn-xs { + font-size: @btn-font-size-xs; + padding: @btn-padding-xs; + height: @btn-height-base - 10px; + line-height: @btn-height-base - 11px; +} + +.@{class-prefix}-btn-block { + display: block; + width: 100%; + + & + & { + margin-top: 0.5rem; + } +} + +.@{class-prefix}-icon-btn { + width: @size-40; + height: @size-40; + .border-radius(2px); + .flex-display(flex, row, wrap); + .justify-content(center); + .align-items(center); + cursor: pointer; + + &:focus, + &:hover { + background-color: fade(@black-color, 10%); + + .@{class-prefix}-layout-sider-dark & { + background-color: @sidebar-dark-bg; + } + } + + .@{class-prefix}-popover-header & { + width: @size-30; + height: @size-30; + } + + & .icon-star-o:before, + & .icon-star:before { + position: relative; + top: 3px; + } + + &.icon { + .@{class-prefix}-module-box-content & { + @media screen and (max-width: @screen-xs-max) { + font-size: 16px; + } + } + } +} + diff --git a/src/styles/ui/card.less b/src/styles/ui/card.less new file mode 100644 index 000000000..5b8909462 --- /dev/null +++ b/src/styles/ui/card.less @@ -0,0 +1,313 @@ +/*Card Styles*/ +.ant-card { + margin-bottom: @gx-card-margin-base; + + &-head { + background: none; + } + + &-head-title { + font-weight: @font-weight-normal; + } + + &-grid { + text-align: center; + width: 25%; + + @media screen and (max-width: @screen-sm-max) { + width: 33.33%; + } + + @media screen and (max-width: @screen-xs-max ) { + width: 50%; + } + } +} + +.ant-card-wider-padding .ant-card-body { + & > :last-child { + margin-bottom: 0; + } +} + +.@{class-prefix}-card-center-vertical { + .flex-display(flex, column, nowrap); + .justify-content(center); +} + +.@{class-prefix}-card-img { + position: relative; + + & .ant-card-body { + position: relative; + } + + & .@{class-prefix}-badge-up { + position: absolute; + right: 60px; + top: -20px; + z-index: 1; + padding: 5px; + .border-radius(@border-radius-circle); + height: @size-40; + width: @size-40; + line-height: 36px; + text-align: center; + } +} + +.@{class-prefix}-card-img-center { + + & .ant-card-cover { + text-align: center; + + & > * { + width: auto; + display: inline-block; + } + } +} + +.@{class-prefix}-card-body-border-top { + & .ant-card-cover { + padding-top: @card-padding-base; + } + + & .ant-card-body { + border-top: @border-style-base @border-width-base @border-color; + margin-top: @gx-card-margin-base; + } +} + +.@{class-prefix}-ant-card-actions { + list-style: none; + margin: 0 -10px 10px; + padding-left: 0; + + & li { + display: inline-block; + vertical-align: top; + padding: 0 10px; + + &:not(:last-child) { + border-right: @border-style-base @border-width-base @border-color; + } + } +} + +.@{class-prefix}-card { + margin-bottom: @gx-card-margin-base; + background-color: @white-color; + .box-shadow(@gx-card-shadow); + position: relative; + .border-radius(@border-radius-sm); + + &-head { + padding: @gx-card-padding-base; + + & .@{class-prefix}-card-title { + margin-bottom: 0; + } + + & + .@{class-prefix}-card-body { + padding-top: 0; + } + + @media screen and (max-width: @screen-md-max) { + padding: @card-padding-base; + } + } + + & .ant-card-head { + border-bottom: 0 none; + min-height: 10px; + padding: 0 @gx-card-padding-base; + + @media screen and (max-width: @screen-md-max) { + padding: 0 @card-padding-base; + } + } + + & .ant-card-head-title { + padding: (@card-head-padding + 9px) 0 0; + text-transform: uppercase; + font-size: @font-size-sm; + + @media screen and (max-width: @screen-md-max) { + padding-top: (@card-head-padding + 4px); + } + } + + &-body, + & .ant-card-body { + padding: @gx-card-padding-base; + padding-top: @gx-card-padding-base - 4px; + + @media screen and (max-width: @screen-md-max) { + padding: @card-padding-base; + } + } + + &.ant-card-bordered { + border: 0 none; + } + + &.ant-card-hoverable { + &:hover { + .box-shadow(0 0 4px fade(@black-color, 45%)); + } + } + + & .ant-card-cover { + padding: @gx-card-padding-base; + padding-bottom: 0; + + @media screen and (max-width: @screen-md-max) { + padding: @card-padding-base; + padding-bottom: 0; + } + } + + &-metrics { + .box-shadow(@gx-card-shadow); + + &.ant-card-bordered { + border: 0 none; + } + + & .ant-card-head { + border-bottom: 0 none; + min-height: 10px; + } + + & .ant-card-head-title { + padding: (@card-head-padding + 4px) 0 0; + text-transform: uppercase; + font-size: @font-size-sm; + } + } + + &-widget { + .box-shadow(@gx-card-shadow); + + &.ant-card-bordered { + border: 0 none; + } + + & .ant-card-head { + border-bottom: 0 none; + min-height: 24px; + padding: @gx-card-padding-base @gx-card-padding-base 0; + } + + & .ant-card-head-wrapper { + .flex-display(flex, row, wrap); + .align-items(center); + } + + & .ant-card-head-title { + padding: 0; + text-transform: uppercase; + font-size: @font-size-sm; + } + + & .ant-card-extra { + padding: 0; + + & .@{class-prefix}-btn { + margin-bottom: 0; + } + } + + & .ant-card-body { + padding: @gx-card-padding-base; + } + + &.@{class-prefix}-card-tabs { + & .ant-tabs-nav-container { + font-size: @h4-font-size; + } + + & .ant-card-body { + padding-top: @gx-card-padding-base - 20px; + } + } + } +} + +.@{class-prefix}-card-sm-padding { + & .ant-card-head { + min-height: 10px; + } + + & .ant-card-head-title { + padding: @gx-card-padding-sm @gx-card-padding-sm 0; + } + + &-body { + padding: @gx-card-padding-sm; + } +} + +.@{class-prefix}-entry-header { + margin-bottom: @gx-card-margin-base; + + & .@{class-prefix}-entry-heading { + margin-bottom: 0; + } + + & .@{class-prefix}-entry-description { + margin-bottom: 0; + font-size: 13px; + } +} + +.@{class-prefix}-card-full { + overflow: hidden; + + & .@{class-prefix}-card-body { + padding: 0; + + & .recharts-legend-wrapper { + padding: 0 @card-padding-wider; + } + } + + & .ant-card-body { + padding: 0; + + & .recharts-legend-wrapper { + padding: 0 @card-padding-wider; + } + } + + & .recharts-default-legend { + margin: 0 -10px !important; + + & li { + padding: 0 10px; + margin: 0 !important; + display: inline-block; + vertical-align: top; + } + + & li .recharts-legend-item-text { + margin-left: 10px; + } + } +} + +.@{class-prefix}-card-overview { + margin-bottom: @gx-card-margin-base; + background-color: @white-color; + .box-shadow(@gx-card-shadow); + position: relative; + .border-radius(@border-radius-sm); + padding: @gx-card-padding-base; + + & .@{class-prefix}-card-title { + text-transform: uppercase; + font-size: @font-size-sm; + margin-bottom: 20px; + } +} diff --git a/src/styles/ui/cascader.less b/src/styles/ui/cascader.less new file mode 100644 index 000000000..25e4888c1 --- /dev/null +++ b/src/styles/ui/cascader.less @@ -0,0 +1,4 @@ +/*Cascader Styles*/ +.ant-cascader-picker { + width: 100%; +} \ No newline at end of file diff --git a/src/styles/ui/form.less b/src/styles/ui/form.less new file mode 100644 index 000000000..0a21b3c13 --- /dev/null +++ b/src/styles/ui/form.less @@ -0,0 +1,121 @@ +/*Form Styles*/ +.ant-form { + & .ant-row { + margin-left: 0; + margin-right: 0; + } + + &-inline { + margin-left: -8px; + margin-right: -8px; + + & .ant-row { + padding-left: 8px; + padding-right: 8px; + } + + & .ant-form-item { + margin-bottom: 10px; + + @media screen and (max-width: @screen-xs-max) { + display: block; + } + } + } + + &-horizontal { + & .ant-row { + margin-left: -15px; + margin-right: -15px; + } + } + + &-vertical { + & .ant-form-item { + padding-bottom: 0; + } + + & .ant-row { + -ms-flex-direction: column; + flex-direction: column; + } + } +} + +.ant-form-item-with-help { + margin-bottom: @form-item-margin-bottom; +} + +.ant-advanced-search-form { + & .@{class-prefix}-btn-link:hover { + text-decoration: none; + } +} + +.ant-form-item-control > .ant-form-item:last-child, +.ant-form-item [class^="ant-col-"] > .ant-form-item:only-child { + margin-bottom: 0; +} + +.@{class-prefix}-form-row0 { + & .ant-row { + margin-left: 0 !important; + margin-right: 0 !important; + } +} + +.@{class-prefix}-login-form { + max-width: 350px; + + & .ant-form-item-control-wrapper { + width: 100%; + } +} + +@media (max-width: @screen-xl-max) { + .ant-form-item-label[class*='ant-col-'] { + padding: 0 15px; + } +} + +@media (max-width: @screen-lg-max) { + .ant-form-item-label[class*='ant-col-'] { + padding: 0 15px; + } + + .ant-form-item, + .ant-form-item-with-help { + margin-bottom: 12px; + } + + .ant-advanced-search-form .ant-form-item { + margin-bottom: 12px; + } +} + +@media (max-width: @screen-md-max) { + .ant-form-item-label[class*='ant-col-'] { + padding: 0 15px; + } +} + +@media (max-width: @screen-sm-max) { + .ant-form-item-label[class*='ant-col-'] { + padding: 0 15px; + } +} + +@media (max-width: @screen-xs-max) { + .ant-form-item-label[class*='ant-col-'] { + padding: 0 15px; + margin-bottom: 8px; + } + + .ant-advanced-search-form { + & .ant-btn, + & .@{class-prefix}-btn-link { + display: block; + margin: 0 0 10px !important; + } + } +} diff --git a/src/styles/ui/icon.less b/src/styles/ui/icon.less new file mode 100644 index 000000000..f16ba6297 --- /dev/null +++ b/src/styles/ui/icon.less @@ -0,0 +1,39 @@ +/*Icon Styles*/ +.@{class-prefix}-icon { + + &-views { + position: relative; + text-align: center; + padding: @card-head-padding; + .border-radius(@border-radius-sm); + .transition(all 0.3s ease-out); + margin-bottom: 15px; + height: calc(100% - 15px); + .flex-display(flex, column, nowrap); + .align-items(center); + .justify-content(center); + + & .icon { + margin-bottom: 12px; + font-size: @h2-font-size; + .transition(all 0.3s ease-out); + line-height: 1; + display: block; + } + + &:hover { + background-color: @primary-color; + cursor: pointer; + color: @white-color; + + & .icon { + .scale(1.4); + } + } + } + + &-text { + display: block; + font-size: @font-size-sm; + } +} diff --git a/src/styles/ui/index.less b/src/styles/ui/index.less new file mode 100644 index 000000000..cb938dc71 --- /dev/null +++ b/src/styles/ui/index.less @@ -0,0 +1,18 @@ +@import "avatar"; +@import "badge"; +@import "button"; +@import "card"; +@import "cascader"; +@import "form"; +@import "input"; +@import "icon"; +@import "list"; +@import "loader"; +@import "pagination"; +@import "pickers"; +@import "progress"; +@import "steps"; +@import "slider"; +@import "tables"; +@import "timeline"; +@import "tabs"; diff --git a/src/styles/ui/input.less b/src/styles/ui/input.less new file mode 100644 index 000000000..2784f6503 --- /dev/null +++ b/src/styles/ui/input.less @@ -0,0 +1,185 @@ +/*Input Styles*/ +.ant-input-search { + margin-bottom: 16px; + + & > .ant-input-suffix > .ant-input-search-button { + margin-right: 0; + } +} + +.ant-input-group { + + & > [class*="col-"] { + padding-left: 0; + float: left !important; + } +} + +.ant-transfer-list { + margin-bottom: 10px; +} + +.@{class-prefix}-form-group { + margin-bottom: 10px; +} + +// Search Bar Style +.@{class-prefix}-search-bar { + position: relative; + + & .@{class-prefix}-form-group { + width: 100%; + height: 100%; + margin-bottom: 0; + } + + & input[type="search"] { + padding-right: 35px; + background: fade(@grey-2, 10%); + + &:focus { + box-shadow: none; + background-color: fade(@grey-2, 30%); + } + } + + & .@{class-prefix}-search-icon { + background-color: transparent; + border: 0 none; + color: lighten(@grey-6, 10%); + height: 32px; + width: 30px; + line-height: 36px; + text-align: center; + + position: absolute; + right: 0; + top: 0; + } +} + +.@{class-prefix}-lt-icon-search-bar { + & input[type="search"] { + padding-right: 16px; + padding-left: 35px; + } + + & .@{class-prefix}-search-icon { + left: 0; + right: auto; + } +} + +.@{class-prefix}-lt-icon-search-bar-lg { + width: 350px; + + & input[type="search"] { + .border-radius(@border-radius-sm); + height: 46px; + padding: 10px 18px 10px 40px; + + @media screen and (max-width: @screen-md-max) { + height: 38px; + padding: 5px 18px 5px 40px; + } + } + + & .@{class-prefix}-search-icon { + width: 35px; + height: 46px; + line-height: 50px; + font-size: 16px; + left: 0; + right: auto; + + @media screen and (max-width: @screen-md-max) { + height: 38px; + line-height: 40px; + } + } + + .@{class-prefix}-layout-header-horizontal & { + width: 200px; + margin-right: 10px; + + @media screen and (max-width: @screen-lg-max) { + width: 120px; + } + } + + @media screen and (max-width: @screen-lg-max) { + width: 150px; + } +} + +.@{class-prefix}-popover-search-bar { + width: 150px; + margin: -10px -14px; +} + +.@{class-prefix}-chat-search-bar { + .flex(1); + min-width: 100px; + width: auto; + + & input[type="search"] { + .box-shadow(none); + .border-radius(0); + height: 40px; + + &:focus { + background-color: @white-color; + } + } + + & .@{class-prefix}-search-icon { + height: 40px; + line-height: 44px; + } +} + +.ant-transfer-list { + width: 150px; + + @media screen and (max-width: @screen-xs-max) { + width: 100%; + } +} + +@media screen and (max-width: @screen-xs-max) { + .@{class-prefix}-ant-transfer-width .ant-transfer-list { + width: 100% !important; + } +} + +@media screen and (max-width: (@screen-xs-max - 100px)) { + .ant-input-group.ant-input-group-compact { + & > * { + .border-radius(4px) !important; + width: 100% !important; + border-right-width: 1px; + + &:not(:last-child) { + margin-bottom: 10px; + } + } + + // reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker + & > .@{ant-prefix}-select > .@{ant-prefix}-select-selection, + & > .@{ant-prefix}-calendar-picker .@{ant-prefix}-input, + & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input, + & > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input, + & > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor, + & > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input { + border-radius: 4px; + border-right-width: 1px; + } + + & .@{class-prefix}-border-lt-xs { + border-left: @border-width-base @border-style-base @input-border-color !important; + } + } +} + + + diff --git a/src/styles/ui/list.less b/src/styles/ui/list.less new file mode 100644 index 000000000..1b227b945 --- /dev/null +++ b/src/styles/ui/list.less @@ -0,0 +1,178 @@ +/*List Styles*/ +.ant-list-vertical { + & .ant-list-item-main { + min-width: 200px; + } + + & .ant-list-item-extra { + @media screen and (max-width: (@screen-xs-max - 95px)) { + margin-bottom: 10px; + } + } +} + +.@{class-prefix}-list-item { + & .ant-list-item-extra-wrap { + .flex-display(flex, row, wrap); + .flex-only(1); + + & .ant-list-item-extra { + margin-left: 20px; + + @media screen and (max-width: @screen-xs-max) { + margin-left: 0; + margin-top: 10px; + + & img { + width: 100%; + } + } + } + + @media screen and (max-width: @screen-xs-max) { + .flex-display(flex, column, nowrap); + } + } +} + +.@{class-prefix}-user-list { + width: 100%; + padding-bottom: 10px; + .flex-display(flex, row, wrap); + + &:not(:first-child) { + padding-top: 20px; + + @media screen and (max-width: @screen-xs-max) { + padding-top: 0; + } + } + + &.@{class-prefix}-card-list { + padding: 20px; + background: @component-background; + .border-radius(@border-radius-sm); + margin-bottom: @gx-card-margin-base; + .box-shadow(@gx-card-shadow); + + @media screen and (max-width: @screen-sm-max) { + padding: 15px; + } + } + + & .@{class-prefix}-avatar-img { + margin-right: 20px; + margin-bottom: 10px; + } + + & h3 { + font-weight: @font-weight-medium; + margin-bottom: 8px; + } + + & a[class*="gx-meta-"] { + display: inline-block; + color: @text-color; + font-size: @h6-font-size; + font-weight: @font-weight-medium; + } + + & a[class*="gx-meta-"] i { + margin-right: 6px; + vertical-align: middle; + } + + & .@{class-prefix}-description { + width: calc(100% ~"-" 120px); + + @media screen and (max-width: @screen-xs-max) { + width: 100%; + } + } + + & .@{class-prefix}-btn-list { + & li:not(:last-child) { + margin-right: 10px; + } + } +} + +.@{class-prefix}-list-inline { + margin-left: -5px; + margin-right: -5px; + padding-left: 0; + list-style: none; + & li { + padding: 0 5px; + display: inline-block; + } +} + +.@{class-prefix}-list-inline-lg { + margin-left: -10px; + margin-right: -10px; + padding-left: 0; + list-style: none; + & li { + padding: 0 10px; + display: inline-block; + } +} + +.@{class-prefix}-card-strip { + margin-bottom: 10px; + + &:not(:last-child) { + border-bottom: @border-style-base @border-width-base @border-color; + } +} + +.@{class-prefix}-card-list { + + & .@{class-prefix}-description { + width: calc(100% ~"-" 370px); + + @media screen and (max-width: @screen-sm-max) { + width: 100%; + } + } + + & .@{class-prefix}-img-section { + width: 230px; + margin-left: 20px; + + @media screen and (max-width: @screen-sm-max) { + width: 100%; + margin-left: 0; + } + } +} + +.@{class-prefix}-list-group { + list-style: none; + padding-left: 0; + + & li { + margin-bottom: 6px; + + & i { + margin-right: 12px; + } + } +} + +.@{class-prefix}-dot-list { + list-style: none; + margin: 0 -3px 10px; + padding-left: 0; + + & li { + display: inline-block; + vertical-align: top; + padding: 0 3px; + } + + @media screen and (max-width: @screen-xs-max) { + margin-bottom: 5px; + } +} diff --git a/src/styles/ui/loader.less b/src/styles/ui/loader.less new file mode 100644 index 000000000..110617b44 --- /dev/null +++ b/src/styles/ui/loader.less @@ -0,0 +1,14 @@ +/*Loader Styles*/ +.ant-spin { + margin-right: 16px; + margin-bottom: 10px; +} + +.@{class-prefix}-loader-container { + text-align: center; + background-color: @grey-3; + .border-radius(@border-radius-sm); + padding: @size-30 @size-50; + margin-right: 0; + display: block; +} diff --git a/src/styles/ui/pagination.less b/src/styles/ui/pagination.less new file mode 100644 index 000000000..1c0db2821 --- /dev/null +++ b/src/styles/ui/pagination.less @@ -0,0 +1,28 @@ +/*Pagination Styles*/ +.ant-pagination { + & > li { + margin-bottom: 10px; + + &.ant-pagination-options, + &.ant-pagination-total-text { + margin-bottom: 0; + } + } + + &.mini { + &:not(:last-child) { + margin-bottom: 10px; + } + + & li { + margin-bottom: 5px !important; + } + } + + &-prev, + &-next, + &-jump-prev, + &-jump-next { + line-height: @pagination-item-size - 2px; + } +} diff --git a/src/styles/ui/pickers.less b/src/styles/ui/pickers.less new file mode 100644 index 000000000..ff1ab9787 --- /dev/null +++ b/src/styles/ui/pickers.less @@ -0,0 +1,16 @@ +/*Pickers Styles*/ +.photoshop-picker, +.swatches-picker, +.alpha-picker, +.hue-picker { + width: 100% !important; +} + +.@{class-prefix}-alpha-pickers { + position: relative; + min-height: 250px; +} + +.ant-calendar-footer .ant-calendar-ok-btn { + margin-bottom: 0; +} diff --git a/src/styles/ui/progress.less b/src/styles/ui/progress.less new file mode 100644 index 000000000..b8ea2cd81 --- /dev/null +++ b/src/styles/ui/progress.less @@ -0,0 +1,9 @@ +/*Progress Styles*/ +.ant-progress-line { + margin-right: 8px; + margin-bottom: 8px; +} + +.ant-progress-circle { + .ant-progress-line; +} diff --git a/src/styles/ui/slider.less b/src/styles/ui/slider.less new file mode 100644 index 000000000..bca090cf5 --- /dev/null +++ b/src/styles/ui/slider.less @@ -0,0 +1,85 @@ +/*Slider Styles*/ +.ant-carousel { + & h1, + & h2, + & h3, + & h4, + & h5, + & h6 { + line-height: inherit; + margin-bottom: 0; + } +} + +.@{class-prefix}-vertical-slider { + position: relative; + .flex-display(flex, row, wrap); + margin: 0 -15px; +} + +.@{class-prefix}-vertical-slider-item { + width: 33.33%; + padding: 0 15px; + height: 300px; + .flex-display(flex, column, nowrap); + .align-items(center); + + @media screen and (max-width: @screen-xs-max ) { + width: 50%; + margin-bottom: 15px; + } +} + +.ant-carousel-vertical .@{class-prefix}-vertical-slide { + & .slick-slide { + height: 160px; + } +} + +.slick-slider { + margin-bottom: @gx-card-margin-base; + + & .slick-prev { + left: -15px; + + &:before { + color: @black-color; + } + } + + & .slick-next { + right: -15px; + + &:before { + color: @black-color; + } + } +} + +.slick-dots { + & li { + width: 10px !important; + height: 10px !important; + } + + & li button { + width: 10px !important; + height: 10px !important; + + &:before { + width: 10px !important; + height: 10px !important; + line-height: 10px !important; + } + } +} + +.@{class-prefix}-slide-item { + margin-left: 15px; + margin-right: 15px; + + @media screen and (max-width: (@screen-xs-max - 95px)) { + margin-left: 0; + margin-right: 0; + } +} diff --git a/src/styles/ui/steps.less b/src/styles/ui/steps.less new file mode 100644 index 000000000..eb5224d50 --- /dev/null +++ b/src/styles/ui/steps.less @@ -0,0 +1,16 @@ +/*Steps Styles*/ +.ant-steps-dot { + flex-wrap: wrap; + overflow: hidden; + padding: 10px 0; + + & .ant-steps-item { + margin-bottom: 10px; + } + + & .ant-steps-item-description { + @media screen and (max-width: @screen-xs-max) { + display: none; + } + } +} \ No newline at end of file diff --git a/src/styles/ui/tables.less b/src/styles/ui/tables.less new file mode 100644 index 000000000..117d0a6c3 --- /dev/null +++ b/src/styles/ui/tables.less @@ -0,0 +1,161 @@ +/*Tables Styles*/ +.ant-table-small { + > .ant-table-content { + > .ant-table-header > table, + > .ant-table-body > table, + > .ant-table-scroll > .ant-table-header > table, + > .ant-table-scroll > .ant-table-body > table, + > .ant-table-fixed-left > .ant-table-header > table, + > .ant-table-fixed-right > .ant-table-header > table, + > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table, + > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table { + padding: 0; + } + } +} + +.ant-table { + &-thead > tr > th, + &-tbody > tr > td { + word-break: normal; + } +} + +.@{class-prefix}-table-responsive .ant-table { + min-height: .01%; + overflow-x: auto; +} + +@media screen and (max-width: @screen-sm-max) { + .@{class-prefix}-table-responsive .ant-table { + width: 100%; + overflow-y: hidden; + -ms-overflow-style: -ms-autohiding-scrollbar; + border: @border-style-base @border-width-base @border-color; + + .ant-card-bordered.@{class-prefix}-card-full & { + border: 0 none; + border-bottom: @border-style-base @border-width-base @border-color; + } + + & .ant-table-tbody > tr:last-child > td { + border-bottom: 0 none; + } + + &.ant-table-bordered { + + & .ant-table-header > table, + & .ant-table-body > table, + & .ant-table-fixed-left table, + & .ant-table-fixed-right table { + border-top: 0 none; + border-left: 0 none; + } + + & .ant-table-title { + border: 0 none; + } + + & .ant-table-footer { + border: 0 none; + border-top: @border-style-base @border-width-base @border-color; + } + + & .ant-table-thead > tr > th:last-child, + & .ant-table-tbody > tr > td:last-child { + border-right: 0 none; + } + } + } + + .@{class-prefix}-table-responsive .ant-table-body > table > thead > tr > th, + .@{class-prefix}-table-responsive .ant-table-body > table > tbody > tr > th, + .@{class-prefix}-table-responsive .ant-table-body > table > tfoot > tr > th, + .@{class-prefix}-table-responsive .ant-table-body > table > thead > tr > td, + .@{class-prefix}-table-responsive .ant-table-body > table > tbody > tr > td, + .@{class-prefix}-table-responsive .ant-table-body > table > tfoot > tr > td { + white-space: nowrap; + } +} + +.@{class-prefix}-table { + width: 100%; + max-width: 100%; + margin-bottom: 1rem; + background-color: transparent; + + & th, + & td { + padding: 0.75rem; + vertical-align: top; + border-top: @border-style-base @border-width-base @border-color; + } + + & thead th { + vertical-align: bottom; + border-bottom: 2px @border-style-base @border-color; + } + + & tbody + tbody { + border-top: 2px @border-style-base @border-color; + } +} + +.@{class-prefix}-table-bordered { + border: @border-width-base @border-style-base @border-color; + + & th, + & td { + border: @border-width-base @border-style-base @border-color; + } + + & thead th, + & thead td { + border-bottom-width: 2px; + } +} + +.@{class-prefix}-table-no-bordered { + border: 0 none; + + & th, + & td { + border: 0 none; + } + + & thead th, + & thead td { + border-bottom-width: 2px; + } +} + +.@{class-prefix}-table-thead-uppercase { + & thead th { + text-transform: uppercase; + } +} + +.@{class-prefix}-table-padding-lg { + & thead th, + & tbody td { + padding: 20px 30px !important; + + @media screen and (max-width: @screen-md-max) { + padding: 15px 20px !important; + } + + @media screen and (max-width: @screen-sm-max) { + padding: 10px !important; + } + } + + & .ant-table-pagination { + float: none; + text-align: center; + margin: 22px 0; + + @media screen and (max-width: @screen-md-max) { + margin: 16px 0; + } + } +} diff --git a/src/styles/ui/tabs.less b/src/styles/ui/tabs.less new file mode 100644 index 000000000..967a4db0c --- /dev/null +++ b/src/styles/ui/tabs.less @@ -0,0 +1,20 @@ +/*Tabs Styles*/ +.@{class-prefix}-tabs-half { + & .ant-tabs-bar { + margin-bottom: 0; + } + + & .ant-tabs-nav { + display: block; + + & .ant-tabs-tab { + margin: 0; + width: 50%; + text-align: center; + } + + & .ant-tabs-ink-bar { + width: 50%; + } + } +} diff --git a/src/styles/ui/timeline.less b/src/styles/ui/timeline.less new file mode 100644 index 000000000..f01f7b18c --- /dev/null +++ b/src/styles/ui/timeline.less @@ -0,0 +1,450 @@ +/*Time Lines Style*/ + +/*Antd Time Lines Style*/ +.ant-timeline-item { + padding: 0; + + &:not(:last-child) { + padding-bottom: 20px; + } +} + +.@{class-prefix}-timeline-info { + position: relative; + + &:not(:last-child) { + padding-bottom: 20px; + } + + &-day { + text-transform: uppercase; + margin-bottom: 20px; + font-size: @h5-font-size; + } + + & .ant-timeline { + padding-top: 7px; + padding-left: 7px; + } + + & .ant-timeline-item-head-custom { + padding: 0; + } + + & .ant-timeline-item-content { + padding-left: 45px; + top: -3px; + } +} + +/*Custom Time Lines Style*/ +.@{class-prefix}-timeline-left { + float: left; + margin-right: 20px; +} + +.@{class-prefix}-timeline-right { + float: right; + margin-left: 20px; +} + +.@{class-prefix}-timeline-circle { + .border-radius(@border-radius-circle); +} + +.@{class-prefix}-timeline-section { + margin-bottom: 25px; + overflow: hidden; +} + +.@{class-prefix}-timeline-item { + padding-bottom: 25px; + padding-left: 80px; + position: relative; + + &:before { + border-left: @border-style-base 2px @grey-4; + content: ""; + left: 25px; + position: absolute; + top: 25px; + bottom: -20px; + width: 2px; + z-index: 1; + } + &:first-child:before { + border-left-style: dashed; + } + &:last-child:before { + border-left-style: dashed; + bottom: 25px; + } +} + +.@{class-prefix}-timeline-badge { + height: @size-50; + width: @size-50; + position: absolute; + left: 0; + top: 16px; + z-index: 2; + font-size: 16px; + color: @white-color; + text-align: center; + .border-radius(@border-radius-circle); + + &.@{class-prefix}-timeline-img { + background-color: transparent; + + &:after { + display: none; + } + } + + &:after { + position: absolute; + content: ""; + width: 42px; + height: 42px; + background-color: transparent; + border: 4px solid @grey-4; + .border-radius(@border-radius-circle); + left: 4px; + top: 4px; + z-index: 1; + } + + & [class^="gx-"]:before, + & [class*="gx-"]:before { + line-height: 50px; + } +} + +.@{class-prefix}-timeline-img > img, +.@{class-prefix}-timeline-header-img > img { + display: inline-block; + max-width: 100%; + height: auto; +} + +.@{class-prefix}-timeline-panel { + padding: 20px 30px; + position: relative; + background-color: @white-color; + .border-radius(@border-radius-lg); + border: @border-style-base @border-width-base @grey-4; + + &:after, + &:before { + content: ""; + position: absolute; + border-style: solid; + display: inline-block; + top: 30px; + } + + &:before { + border-color: transparent @grey-4; + border-width: 10px 17px 10px 0; + left: -18px; + + } + + &:after { + border-color: transparent @white-color; + border-width: 10px 16px 10px 0; + left: -16px; + } +} + +.@{class-prefix}-timeline-no-padding { + padding: 0; +} + +.@{class-prefix}-timeline-panel-header { + margin-bottom: 10px; +} + +.@{class-prefix}-timeline-header-img { + margin-bottom: 10px; +} + +.@{class-prefix}-timeline-inverted { + & .@{class-prefix}-timeline-left { + float: right; + margin-right: 0; + margin-left: 20px; + } +} + +.@{class-prefix}-timeline-heading { + overflow: hidden; + margin-bottom: 10px; +} + +.@{class-prefix}-timeline-body { + clear: both; +} + +/*Gxtl Center Style*/ +.@{class-prefix}-timeline-center { + & .@{class-prefix}-timeline-item { + clear: both; + float: right; + width: 50%; + padding-left: 55px; + + &:before { + left: 0; + } + } +} + +.@{class-prefix}-timeline-center { + & .@{class-prefix}-timeline-badge { + left: -25px; + right: auto; + } + + & .@{class-prefix}-timeline-time { + position: absolute; + top: 32px; + left: -150px; + right: auto; + z-index: 2; + } + + & .@{class-prefix}-timeline-inverted { + float: left; + text-align: right; + padding-left: 0; + padding-right: 55px; + + &:before { + border-left: 0 none; + border-right: @border-style-base 2px @grey-4; + left: auto; + right: -2px; + } + & .@{class-prefix}-timeline-badge { + left: auto; + right: -25px; + } + + & .@{class-prefix}-timeline-panel { + &:before { + border-width: 10px 0 10px 17px; + left: auto; + right: -18px; + } + + &:after { + border-width: 10px 0 10px 16px; + left: auto; + right: -16px; + } + } + + & .@{class-prefix}-timeline-time { + position: absolute; + top: 32px; + right: -150px; + left: auto; + z-index: 2; + } + } +} + +/*Gxtl Zigzag Style*/ +.@{class-prefix}-timeline-zigzag { + & .@{class-prefix}-timeline-item { + padding-left: 150px; + + & + .@{class-prefix}-timeline-item { + margin-top: -80px; + } + } + + & .@{class-prefix}-timeline-img { + width: 90px; + height: 90px; + left: 5px; + & > img { + width: 100%; + } + } + + & .@{class-prefix}-timeline-inverted .@{class-prefix}-timeline-img { + right: 5px !important; + } + + & .@{class-prefix}-timeline-item:before { + .rotate(35deg); + top: 20px; + bottom: 20px; + } + + & .@{class-prefix}-timeline-inverted { + padding-left: 0; + padding-right: 150px; + &:before { + .rotate(-35deg); + } + } + + & .@{class-prefix}-timeline-item:first-child:before { + border-left-style: solid; + } + + & .@{class-prefix}-timeline-item:last-child:before { + display: none; + } +} + +.@{class-prefix}-timeline-item:last-child:before { + bottom: 25px; +} + +@media screen and (max-width: @screen-md-max) { + .@{class-prefix}-timeline-zigzag .@{class-prefix}-timeline-item + .@{class-prefix}-timeline-item { + margin-top: -60px; + } + + .@{class-prefix}-timeline-zigzag .@{class-prefix}-timeline-item:before { + bottom: 0; + } + + .@{class-prefix}-timeline-zigzag { + & .@{class-prefix}-timeline-item { + padding-left: 120px; + } + + & .@{class-prefix}-timeline-inverted { + padding-right: 120px; + padding-left: 0; + } + } +} + +@media screen and (max-width: @screen-sm-max) { + .@{class-prefix}-timeline-center { + & .@{class-prefix}-timeline-item { + float: none; + padding-left: 80px; + width: auto; + &:before { + left: 25px; + } + } + + & .@{class-prefix}-timeline-badge { + left: 0; + } + + & .@{class-prefix}-timeline-inverted { + float: none; + text-align: left; + padding-right: 0; + + &:before { + border-left: @border-style-base 2px @grey-4; + border-right: 0 none; + left: 24px; + right: auto; + } + & .@{class-prefix}-timeline-badge { + right: auto; + left: 0; + } + + & .@{class-prefix}-timeline-panel { + &:before { + border-width: 10px 17px 10px 0 !important; + left: -18px; + right: auto; + } + &:after { + border-width: 10px 16px 10px 0 !important; + left: -16px; + right: auto; + } + } + } + } + + .@{class-prefix}-timeline-inverted { + & .@{class-prefix}-timeline-panel-header { + float: none; + } + + & .@{class-prefix}-timeline-left { + float: left; + margin-left: 0; + margin-right: 20px; + } + } + + .@{class-prefix}-timeline-zigzag { + & .@{class-prefix}-timeline-panel { + max-height: none; + min-height: 10px; + overflow-y: visible; + } + + & .@{class-prefix}-timeline-item { + padding-left: 100px; + & + .@{class-prefix}-timeline-item { + margin-top: 0; + } + + &:before { + transform: none; + top: 25px; + bottom: -25px; + left: 45px; + } + + &:last-child:before { + bottom: 0; + } + } + & .@{class-prefix}-timeline-inverted:before { + transform: none; + } + } + + .@{class-prefix}-timeline-center { + & .@{class-prefix}-timeline-time, + & .@{class-prefix}-timeline-inverted .@{class-prefix}-timeline-time { + position: relative; + top: auto; + left: auto; + right: auto; + margin-bottom: 6px; + } + + .@{class-prefix}-timeline-time-item .@{class-prefix}-timeline-panel::before, + .@{class-prefix}-timeline-time-item .@{class-prefix}-timeline-panel::after { + top: 10px; + } + } +} + +@media screen and (max-width: 399px) { + .@{class-prefix}-timeline-left { + float: none; + margin-right: 0; + } + + .@{class-prefix}-timeline-right { + float: none; + margin-left: 0; + } + + .@{class-prefix}-timeline-inverted { + & .@{class-prefix}-timeline-left { + float: none; + margin-right: 0; + } + } +} diff --git a/src/styles/variables.less b/src/styles/variables.less new file mode 100644 index 000000000..99c751f01 --- /dev/null +++ b/src/styles/variables.less @@ -0,0 +1,21 @@ +@import "../../node_modules/antd/lib/style/themes/default.less"; + +// ColorPicker Variables +@white-color: #ffffff; +@black-color: #000000; + +//global style variables +@primary-color: #3c1990; +@secondary-color: #ec407a; +@text-color: #545454; +@text-color-secondary: #595959; +@heading-color: #535353; +@header-text-color: #333333; +@layout-header-background: #fefefe; +@layout-footer-background: #fffffd; +@body-background: #f5f5f5; +@sidebar-bg: @white-color; +@sidebar-text-color: #a1a1a1; +@sidebar-dark-bg: @black-color; +@sidebar-dark-text-color: #a1a1a1; +@menu-dark-bg: @sidebar-dark-bg;