[NEW] postcss parser and cssnext implementation (#6982)
* rocketchat:postcss parser and cssnext implementation * convert forms, keygrames and reset to cssnext * convert rtl to cssnext * convert base.less to cssnext * convert base.less to cssnext * fix * selector * try to fix tests * add css browser support * remove duplicated test * remove duplicated get * skip fileupload test * fix tests * skip fileupload tests * Try to fix tests * try to fix the test * test * vai que vai * fix wrong commit * try again * try some more * try to fix tests * skip the failing tests * skip last test * fix stylelint * stylelint * fix height calc * skip sweetalert tests again * skip more sweetalert testspull/7033/head^2
Karl Prieb
9 years ago
committed by
GitHub
parent
1a04c3fa28
commit
9e14767ec0
@ -0,0 +1,20 @@ |
||||
{ |
||||
"plugins": { |
||||
"postcss-smart-import": {}, |
||||
"postcss-cssnext": { |
||||
"browsers": [ |
||||
"ie > 10", |
||||
"last 2 Edge versions", |
||||
"last 2 Firefox versions", |
||||
"last 1 FirefoxAndroid versions", |
||||
"last 2 Chrome versions", |
||||
"last 1 ChromeAndroid versions", |
||||
"last 2 Safari versions", |
||||
"last 2 Opera versions", |
||||
"last 2 iOS versions", |
||||
"last 1 Android version" |
||||
] |
||||
} |
||||
}, |
||||
"excludedPackages": ["deepwell:bootstrap-datepicker2", "smoral:sweetalert"] |
||||
} |
||||
@ -0,0 +1,2 @@ |
||||
packages/rocketchat-theme/client/vendor/fontello/css/fontello.css |
||||
packages/meteor-autocomplete/client/autocomplete.css |
||||
File diff suppressed because it is too large
Load Diff
@ -1,3 +1,3 @@ |
||||
#login-buttons-image-gitlab { |
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wJGBYxHYxl31wAAAHpSURBVDjLpZI/aFNRFMZ/973bJqGRPopV4qNq/+SpTYnWRhCKilShg9BGcHOM+GfQoZuLk4iLgw4qZNBaHLuIdBNHl7Ta1qdNFI3SihnaNG1MpH3vuiQYQnwZvHCG893zffc751z4z6PX5T5gA1DAKnAaOAQEgAfAVeCpl+CeCrlRuEC6maO4h0A1wl4tPAHMqNUthvrDdHYY7A3t4rDVjeO6rBU2FaABM1WCrBNoi48Mi+nH9yj+KtPibAKwJXfQ5vcRG7soUnYmWEuQgAEIYBv4cGpoILI0Z4tyYYPegS6UguyijZQ6J45GSNmZHzUcJYD2ii2Ajv7efZ8WZ6ZwXFj79hXpayW4O0SL1Nl/8jzZlZ9dQLFS70pgvZKIyGD0yvu5eRmMnrk1PjI81ir1qBACTdPevXj95mVuNX8XKDQc/+T334bZZ104cvzYw2s3J3qAL5WXSsDbf61NNMBu+wOBs+VSyQ84Nfhg028ZGx3/qyy0lC7lgi7lghBitoon03lvB8l0/k7Wnk+8mny0cyXzEcfZxgwfZPTyRMHsOzAFXE9YhtNQIJnOx4FpJXT1eSkn2g0frqMoFrfoCXcqlCOAGwnLuO/l4JymcWl5uRxzXUKghBAiZ5r+WaV4lrCM555zqO+x2d0ftGmpiA/0k70AAAAASUVORK5CYII=); |
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9wJGBYxHYxl31wAAAHpSURBVDjLpZI/aFNRFMZ/973bJqGRPopV4qNq/+SpTYnWRhCKilShg9BGcHOM+GfQoZuLk4iLgw4qZNBaHLuIdBNHl7Ta1qdNFI3SihnaNG1MpH3vuiQYQnwZvHCG893zffc751z4z6PX5T5gA1DAKnAaOAQEgAfAVeCpl+CeCrlRuEC6maO4h0A1wl4tPAHMqNUthvrDdHYY7A3t4rDVjeO6rBU2FaABM1WCrBNoi48Mi+nH9yj+KtPibAKwJXfQ5vcRG7soUnYmWEuQgAEIYBv4cGpoILI0Z4tyYYPegS6UguyijZQ6J45GSNmZHzUcJYD2ii2Ajv7efZ8WZ6ZwXFj79hXpayW4O0SL1Nl/8jzZlZ9dQLFS70pgvZKIyGD0yvu5eRmMnrk1PjI81ir1qBACTdPevXj95mVuNX8XKDQc/+T334bZZ104cvzYw2s3J3qAL5WXSsDbf61NNMBu+wOBs+VSyQ84Nfhg028ZGx3/qyy0lC7lgi7lghBitoon03lvB8l0/k7Wnk+8mny0cyXzEcfZxgwfZPTyRMHsOzAFXE9YhtNQIJnOx4FpJXT1eSkn2g0frqMoFrfoCXcqlCOAGwnLuO/l4JymcWl5uRxzXUKghBAiZ5r+WaV4lrCM555zqO+x2d0ftGmpiA/0k70AAAAASUVORK5CYII=); |
||||
} |
||||
|
||||
@ -0,0 +1 @@ |
||||
node_modules |
||||
@ -0,0 +1,7 @@ |
||||
This directory and the files immediately inside it are automatically generated |
||||
when you change this package's NPM dependencies. Commit the files in this |
||||
directory (npm-shrinkwrap.json, .gitignore, and this README) to source control |
||||
so that others run the same versions of sub-dependencies. |
||||
|
||||
You should NOT check in the node_modules directory that Meteor automatically |
||||
creates; if you are using git, the .gitignore file tells git to ignore it. |
||||
@ -0,0 +1,71 @@ |
||||
{ |
||||
"dependencies": { |
||||
"ansi-regex": { |
||||
"version": "2.1.1", |
||||
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz", |
||||
"from": "ansi-regex@>=2.0.0 <3.0.0" |
||||
}, |
||||
"ansi-styles": { |
||||
"version": "2.2.1", |
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz", |
||||
"from": "ansi-styles@>=2.2.1 <3.0.0" |
||||
}, |
||||
"app-module-path": { |
||||
"version": "2.2.0", |
||||
"resolved": "https://registry.npmjs.org/app-module-path/-/app-module-path-2.2.0.tgz", |
||||
"from": "app-module-path@2.2.0" |
||||
}, |
||||
"chalk": { |
||||
"version": "1.1.3", |
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz", |
||||
"from": "chalk@>=1.1.3 <2.0.0", |
||||
"dependencies": { |
||||
"supports-color": { |
||||
"version": "2.0.0", |
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", |
||||
"from": "supports-color@>=2.0.0 <3.0.0" |
||||
} |
||||
} |
||||
}, |
||||
"escape-string-regexp": { |
||||
"version": "1.0.5", |
||||
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", |
||||
"from": "escape-string-regexp@>=1.0.2 <2.0.0" |
||||
}, |
||||
"has-ansi": { |
||||
"version": "2.0.0", |
||||
"resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz", |
||||
"from": "has-ansi@>=2.0.0 <3.0.0" |
||||
}, |
||||
"has-flag": { |
||||
"version": "1.0.0", |
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", |
||||
"from": "has-flag@>=1.0.0 <2.0.0" |
||||
}, |
||||
"js-base64": { |
||||
"version": "2.1.9", |
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.1.9.tgz", |
||||
"from": "js-base64@>=2.1.9 <3.0.0" |
||||
}, |
||||
"postcss": { |
||||
"version": "5.2.17", |
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.17.tgz", |
||||
"from": "postcss@5.2.17" |
||||
}, |
||||
"source-map": { |
||||
"version": "0.5.6", |
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", |
||||
"from": "source-map@0.5.6" |
||||
}, |
||||
"strip-ansi": { |
||||
"version": "3.0.1", |
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", |
||||
"from": "strip-ansi@>=3.0.0 <4.0.0" |
||||
}, |
||||
"supports-color": { |
||||
"version": "3.2.3", |
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", |
||||
"from": "supports-color@>=3.2.3 <4.0.0" |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
Package.describe({ |
||||
summary: 'Minifier for Meteor with PostCSS processing', |
||||
version: '1.0.0', |
||||
name: 'rocketchat:postcss' |
||||
}); |
||||
|
||||
Package.registerBuildPlugin({ |
||||
name: 'minifier-postcss', |
||||
use: [ |
||||
'ecmascript', |
||||
'minifier-css' |
||||
], |
||||
npmDependencies: { |
||||
'app-module-path': '2.2.0', |
||||
'postcss': '5.2.17', |
||||
'source-map': '0.5.6' |
||||
}, |
||||
sources: [ |
||||
'plugin/minify-css.js' |
||||
] |
||||
}); |
||||
|
||||
Package.onUse(function(api) { |
||||
api.use('isobuild:minifier-plugin'); |
||||
}); |
||||
@ -0,0 +1,209 @@ |
||||
/* global CssTools */ |
||||
|
||||
import appModulePath from 'app-module-path'; |
||||
import Future from 'fibers/future'; |
||||
import fs from 'fs'; |
||||
import path from 'path'; |
||||
import postCSS from 'postcss'; |
||||
import sourcemap from 'source-map'; |
||||
|
||||
appModulePath.addPath(`${ process.cwd() }/node_modules/`); |
||||
|
||||
const postCSSConfigFile = path.resolve(process.cwd(), '.postcssrc'); |
||||
|
||||
const postCSSConfig = JSON.parse(fs.readFileSync(postCSSConfigFile)); |
||||
|
||||
const getPostCSSPlugins = () => { |
||||
const plugins = []; |
||||
if (postCSSConfig.plugins) { |
||||
Object.keys(postCSSConfig.plugins).forEach((pluginName) => { |
||||
const postCSSPlugin = Npm.require(pluginName); |
||||
if (postCSSPlugin && postCSSPlugin.name === 'creator' && postCSSPlugin().postcssPlugin) { |
||||
plugins.push(postCSSPlugin(postCSSConfig.plugins ? postCSSConfig.plugins[pluginName] : {})); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
return plugins; |
||||
}; |
||||
|
||||
const getPostCSSParser = () => { |
||||
if (postCSSConfig.parser) { |
||||
return Npm.require(postCSSConfig.parser); |
||||
} |
||||
|
||||
return false; |
||||
}; |
||||
|
||||
const getExcludedPackages = () => { |
||||
if (postCSSConfig.excludedPackages && postCSSConfig.excludedPackages instanceof Array) { |
||||
return postCSSConfig.excludedPackages; |
||||
} |
||||
|
||||
return false; |
||||
}; |
||||
|
||||
const isNotInExcludedPackages = (excludedPackages, pathInBundle) => { |
||||
let exclArr = []; |
||||
if (excludedPackages && excludedPackages instanceof Array) { |
||||
exclArr = excludedPackages.map(packageName => { |
||||
return pathInBundle && pathInBundle.indexOf(`packages/${ packageName.replace(':', '_') }`) > -1; |
||||
}); |
||||
} |
||||
|
||||
return exclArr.indexOf(true) === -1; |
||||
}; |
||||
|
||||
const isNotImport = inputFileUrl => !(/\.import\.css$/.test(inputFileUrl) || /(?:^|\/)imports\//.test(inputFileUrl)); |
||||
|
||||
const mergeCss = css => { |
||||
const originals = {}; |
||||
const excludedPackagesArr = getExcludedPackages(); |
||||
|
||||
const cssAsts = css.map(file => { |
||||
const filename = file.getPathInBundle(); |
||||
originals[filename] = file; |
||||
|
||||
const f = new Future; |
||||
|
||||
let css; |
||||
let postres; |
||||
const isFileForPostCSS = isNotInExcludedPackages(excludedPackagesArr, file.getPathInBundle()); |
||||
|
||||
postCSS(isFileForPostCSS ? getPostCSSPlugins() : []) |
||||
.process(file.getContentsAsString(), { |
||||
from: process.cwd() + file._source.url.replace('_', '-'), |
||||
parser: getPostCSSParser() |
||||
}) |
||||
.then(result => { |
||||
result.warnings().forEach(warn => { |
||||
process.stderr.write(warn.toString()); |
||||
}); |
||||
f.return(result); |
||||
}) |
||||
.catch(error => { |
||||
if (error.name === 'CssSyntaxError') { |
||||
error.message = `${ error.message }\n\nCss Syntax Error.\n\n${ error.message }${ error.showSourceCode() }`; |
||||
} |
||||
f.return(error); |
||||
}); |
||||
|
||||
try { |
||||
const parseOptions = { |
||||
source: filename, |
||||
position: true |
||||
}; |
||||
|
||||
postres = f.wait(); |
||||
|
||||
if (postres.name === 'CssSyntaxError') { |
||||
throw postres; |
||||
} |
||||
|
||||
css = postres.css; |
||||
|
||||
const ast = CssTools.parseCss(css, parseOptions); |
||||
ast.filename = filename; |
||||
|
||||
return ast; |
||||
} catch (e) { |
||||
if (e.name === 'CssSyntaxError') { |
||||
file.error({ |
||||
message: e.message, |
||||
line: e.line, |
||||
column: e.column |
||||
}); |
||||
} else if (e.reason) { |
||||
file.error({ |
||||
message: e.reason, |
||||
line: e.line, |
||||
column: e.column |
||||
}); |
||||
} else { |
||||
file.error({ |
||||
message: e.message |
||||
}); |
||||
} |
||||
|
||||
return { |
||||
type: 'stylesheet', |
||||
stylesheet: { rules: [] }, |
||||
filename |
||||
}; |
||||
} |
||||
}); |
||||
|
||||
const mergedCssAst = CssTools.mergeCssAsts(cssAsts, (filename, msg) => { |
||||
console.log(`${ filename }: warn: ${ msg }`); |
||||
}); |
||||
|
||||
const stringifiedCss = CssTools.stringifyCss(mergedCssAst, { |
||||
sourcemap: true, |
||||
inputSourcemaps: false |
||||
}); |
||||
|
||||
if (!stringifiedCss.code) { |
||||
return { code: '' }; |
||||
} |
||||
|
||||
stringifiedCss.map.sourcesContent = |
||||
stringifiedCss.map.sources.map(filename => { |
||||
return originals[filename].getContentsAsString(); |
||||
}); |
||||
|
||||
const newMap = sourcemap.SourceMapGenerator.fromSourceMap(new sourcemap.SourceMapConsumer(stringifiedCss.map)); |
||||
|
||||
Object.keys(originals).forEach(name => { |
||||
const file = originals[name]; |
||||
if (!file.getSourceMap()) { |
||||
return false; |
||||
} |
||||
try { |
||||
newMap.applySourceMap(new sourcemap.SourceMapConsumer(file.getSourceMap()), name); |
||||
} catch (err) { |
||||
// If can't apply the source map, silently drop it.
|
||||
} |
||||
}); |
||||
|
||||
return { |
||||
code: stringifiedCss.code, |
||||
sourceMap: newMap.toString() |
||||
}; |
||||
}; |
||||
|
||||
class CssToolsMinifier { |
||||
processFilesForBundle(files, options) { |
||||
const mode = options.minifyMode; |
||||
|
||||
if (!files.length) { |
||||
return false; |
||||
} |
||||
|
||||
const filesToMerge = []; |
||||
|
||||
files.forEach(file => { |
||||
if (isNotImport(file._source.url)) { |
||||
filesToMerge.push(file); |
||||
} |
||||
}); |
||||
|
||||
const merged = mergeCss(filesToMerge); |
||||
|
||||
if (mode === 'development') { |
||||
files[0].addStylesheet({ |
||||
data: merged.code, |
||||
sourceMap: merged.sourceMap, |
||||
path: 'merged-stylesheets.css' |
||||
}); |
||||
return false; |
||||
} |
||||
|
||||
if (files.length) { |
||||
files[0].addStylesheet({ |
||||
data: CssTools.minifyCss(merged.code)[0] |
||||
}); |
||||
} |
||||
} |
||||
} |
||||
|
||||
Plugin.registerMinifier({extensions: ['css']}, () => new CssToolsMinifier); |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,118 @@ |
||||
@keyframes fadeIn { |
||||
0% { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
1% { |
||||
opacity: 0; |
||||
visibility: visible; |
||||
} |
||||
|
||||
100% { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
} |
||||
} |
||||
|
||||
@keyframes fadeOut { |
||||
0% { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
} |
||||
|
||||
99% { |
||||
opacity: 0; |
||||
visibility: visible; |
||||
} |
||||
|
||||
100% { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
} |
||||
} |
||||
|
||||
@keyframes highlight { |
||||
0% { |
||||
background: #ffff99; |
||||
} |
||||
|
||||
100% { |
||||
background: none; |
||||
} |
||||
} |
||||
|
||||
@keyframes modalEnter { |
||||
0% { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
1% { |
||||
opacity: 0; |
||||
visibility: visible; |
||||
transform: translateY(-150px); |
||||
} |
||||
|
||||
100% { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
transform: translateY(0); |
||||
} |
||||
} |
||||
|
||||
@keyframes modalExit { |
||||
0% { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
} |
||||
|
||||
99% { |
||||
opacity: 0; |
||||
visibility: visible; |
||||
transform: translateY(150px); |
||||
} |
||||
|
||||
100% { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
} |
||||
} |
||||
|
||||
@keyframes spin { |
||||
from { |
||||
transform: rotate(0deg); |
||||
} |
||||
|
||||
to { |
||||
transform: rotate(360deg); |
||||
} |
||||
} |
||||
|
||||
@keyframes spinh { |
||||
from { |
||||
transform: rotateY(0deg); |
||||
} |
||||
|
||||
to { |
||||
transform: rotateY(360deg); |
||||
} |
||||
} |
||||
|
||||
@keyframes dropdown-in { |
||||
0% { |
||||
display: none; |
||||
opacity: 0; |
||||
} |
||||
|
||||
1% { |
||||
display: block; |
||||
opacity: 0; |
||||
transform: scale(0); |
||||
} |
||||
|
||||
100% { |
||||
opacity: 1; |
||||
transform: scale(1); |
||||
} |
||||
} |
||||
@ -1,183 +0,0 @@ |
||||
// keyframes |
||||
|
||||
@-webkit-keyframes fadeIn { |
||||
0% { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
1% { |
||||
opacity: 0; |
||||
visibility: visible; |
||||
} |
||||
|
||||
100% { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
} |
||||
} |
||||
|
||||
@keyframes fadeIn { |
||||
0% { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
1% { |
||||
opacity: 0; |
||||
visibility: visible; |
||||
} |
||||
|
||||
100% { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
} |
||||
} |
||||
|
||||
@-webkit-keyframes fadeOut { |
||||
0% { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
} |
||||
|
||||
99% { |
||||
opacity: 0; |
||||
visibility: visible; |
||||
} |
||||
|
||||
100% { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
} |
||||
} |
||||
|
||||
@keyframes fadeOut { |
||||
0% { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
} |
||||
|
||||
99% { |
||||
opacity: 0; |
||||
visibility: visible; |
||||
} |
||||
|
||||
100% { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
} |
||||
} |
||||
|
||||
@-webkit-keyframes highlight { |
||||
0% { |
||||
background: #ffff99; |
||||
} |
||||
|
||||
100% { |
||||
background: none; |
||||
} |
||||
} |
||||
|
||||
@-moz-keyframes highlight { |
||||
0% { |
||||
background: #ffff99; |
||||
} |
||||
|
||||
100% { |
||||
background: none; |
||||
} |
||||
} |
||||
|
||||
@-o-keyframes highlight { |
||||
0% { |
||||
background: #ffff99; |
||||
} |
||||
|
||||
100% { |
||||
background: none; |
||||
} |
||||
} |
||||
|
||||
@keyframes highlight { |
||||
0% { |
||||
background: #ffff99; |
||||
} |
||||
|
||||
100% { |
||||
background: none; |
||||
} |
||||
} |
||||
|
||||
@keyframes modalEnter { |
||||
0% { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
1% { |
||||
opacity: 0; |
||||
visibility: visible; |
||||
transform: translateY(-150px); |
||||
} |
||||
|
||||
100% { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
transform: translateY(0); |
||||
} |
||||
} |
||||
|
||||
@-webkit-keyframes modalEnter { |
||||
0% { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
} |
||||
|
||||
1% { |
||||
opacity: 0; |
||||
visibility: visible; |
||||
-webkit-transform: translateY(-150px); |
||||
} |
||||
|
||||
100% { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
-webkit-transform: translateY(0); |
||||
} |
||||
} |
||||
|
||||
@keyframes modalExit { |
||||
0% { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
} |
||||
|
||||
99% { |
||||
opacity: 0; |
||||
visibility: visible; |
||||
transform: translateY(150px); |
||||
} |
||||
|
||||
100% { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
} |
||||
} |
||||
|
||||
@-webkit-keyframes modalExit { |
||||
0% { |
||||
opacity: 1; |
||||
visibility: visible; |
||||
} |
||||
|
||||
99% { |
||||
opacity: 0; |
||||
visibility: visible; |
||||
-webkit-transform: translateY(150px); |
||||
} |
||||
|
||||
100% { |
||||
opacity: 0; |
||||
visibility: hidden; |
||||
} |
||||
} |
||||
@ -0,0 +1,47 @@ |
||||
:root { |
||||
--clearfix: { |
||||
clear: both; |
||||
|
||||
&::after { |
||||
content: ""; |
||||
display: table; |
||||
clear: both; |
||||
} |
||||
} |
||||
|
||||
--fill-all: { |
||||
position: absolute; |
||||
width: 100%; |
||||
height: 100%; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
--flex-center: { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
--small-title: { |
||||
font-size: 13px; |
||||
text-transform: uppercase; |
||||
margin-bottom: 5px; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
--rocket-h2: { |
||||
font-weight: 300; |
||||
text-transform: uppercase; |
||||
font-size: 20px; |
||||
letter-spacing: -0.5px; |
||||
margin: 18px 0; |
||||
} |
||||
|
||||
--rocket-h3: { |
||||
font-weight: 300; |
||||
text-transform: uppercase; |
||||
font-size: 16px; |
||||
letter-spacing: -0.5px; |
||||
margin: 18px 0; |
||||
} |
||||
} |
||||
@ -0,0 +1,770 @@ |
||||
.rtl { |
||||
direction: rtl; |
||||
|
||||
& button { |
||||
text-align: right; |
||||
} |
||||
|
||||
& .text-right { |
||||
text-align: left; |
||||
} |
||||
|
||||
& .side-nav { |
||||
right: 0; |
||||
left: auto; |
||||
|
||||
& .header { |
||||
right: 0; |
||||
left: auto; |
||||
|
||||
& .account-box { |
||||
& .info { |
||||
padding: 10px 18px 10px 0; |
||||
|
||||
& .thumb { |
||||
float: right; |
||||
|
||||
&::after { |
||||
right: -14px; |
||||
left: auto; |
||||
} |
||||
} |
||||
|
||||
& .data { |
||||
float: right; |
||||
padding: 0 10px 0 25px; |
||||
|
||||
& .wrp { |
||||
text-align: right; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .options { |
||||
right: 0; |
||||
left: auto; |
||||
|
||||
& .status { |
||||
padding-right: 38px; |
||||
padding-left: auto; |
||||
|
||||
&::after { |
||||
right: 18px; |
||||
left: auto; |
||||
} |
||||
} |
||||
|
||||
& span.soon { |
||||
left: -30px; |
||||
right: auto; |
||||
} |
||||
} |
||||
|
||||
& .options._hidden { |
||||
transform: translateX(100%); |
||||
} |
||||
} |
||||
} |
||||
|
||||
& > .arrow { |
||||
left: 8px; |
||||
right: auto; |
||||
} |
||||
|
||||
& .arrow { |
||||
transform: rotateY(180deg); |
||||
} |
||||
|
||||
& .footer { |
||||
right: 0; |
||||
left: auto; |
||||
} |
||||
|
||||
& .rooms-list { |
||||
direction: ltr; |
||||
|
||||
& > .wrapper { |
||||
direction: rtl; |
||||
padding-right: 8px; |
||||
padding-left: auto; |
||||
|
||||
& h3 { |
||||
padding-right: 10px; |
||||
padding-left: auto; |
||||
|
||||
& .add-room i { |
||||
left: 6px; |
||||
right: auto; |
||||
} |
||||
} |
||||
|
||||
& ul a { |
||||
padding: 6px 6px 7px 25px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .more { |
||||
padding: 4px 10px 4px 0; |
||||
} |
||||
|
||||
& .empty { |
||||
padding-right: 10px; |
||||
padding-left: auto; |
||||
} |
||||
|
||||
& ul .opt { |
||||
left: 0; |
||||
right: auto; |
||||
padding-left: 10px; |
||||
padding-right: auto; |
||||
text-align: left; |
||||
} |
||||
|
||||
& .flex-nav { |
||||
right: 0; |
||||
left: auto; |
||||
|
||||
& > section { |
||||
right: 0; |
||||
left: auto; |
||||
} |
||||
|
||||
& header { |
||||
right: 0; |
||||
left: auto; |
||||
padding-right: 15px; |
||||
padding-left: auto; |
||||
|
||||
& > div { |
||||
text-align: right; |
||||
} |
||||
} |
||||
|
||||
& .content > .wrapper { |
||||
direction: rtl; |
||||
} |
||||
|
||||
& .input-submit { |
||||
margin: 35px -4px 0 0; |
||||
} |
||||
|
||||
& .button::before { |
||||
right: 0; |
||||
left: auto; |
||||
} |
||||
|
||||
& footer { |
||||
right: 0; |
||||
left: auto; |
||||
text-align: right; |
||||
|
||||
& > div { |
||||
text-align: right; |
||||
} |
||||
} |
||||
|
||||
&.animated-hidden { |
||||
transform: translateX(100%); |
||||
|
||||
& header, |
||||
& footer, |
||||
& .content { |
||||
transform: translateX(100%); |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .search-form { |
||||
margin-left: 20px; |
||||
margin-right: auto; |
||||
|
||||
& .search { |
||||
padding-right: 25px; |
||||
padding-left: auto; |
||||
} |
||||
} |
||||
|
||||
& h3 { |
||||
padding-right: 10px; |
||||
padding-left: auto; |
||||
|
||||
&.add-room i { |
||||
left: 6px; |
||||
right: auto; |
||||
} |
||||
} |
||||
|
||||
& .unread { |
||||
left: 6px; |
||||
right: auto; |
||||
} |
||||
} |
||||
|
||||
& .side-nav::before { |
||||
right: 8px; |
||||
left: auto; |
||||
} |
||||
|
||||
& .main-content { |
||||
left: 0; |
||||
right: var(--rooms-box-width); |
||||
transition: left 0.25s cubic-bezier(0.5, 0, 0.1, 1); |
||||
|
||||
&.flex-opened { |
||||
left: calc(var(--flex-tab-width) + 40px); |
||||
} |
||||
} |
||||
|
||||
& .page-settings { |
||||
& .content > .info { |
||||
padding-left: 20px; |
||||
} |
||||
|
||||
& .section { |
||||
border-right: none; |
||||
border-left: 1px solid #dddddd; |
||||
|
||||
& .section-content .input-line > label { |
||||
text-align: right; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .messages-box { |
||||
margin: 60px 0 0 20px; |
||||
|
||||
& .new-message { |
||||
right: 50%; |
||||
left: auto; |
||||
} |
||||
} |
||||
|
||||
& .terminal { |
||||
direction: ltr; |
||||
} |
||||
|
||||
& .container-bars { |
||||
& .upload-progress { |
||||
& .upload-progress-progress { |
||||
right: 0; |
||||
left: auto; |
||||
} |
||||
|
||||
& .upload-progress-text > a { |
||||
float: left; |
||||
} |
||||
} |
||||
|
||||
& .unread-bar { |
||||
& > a.mark-read { |
||||
float: left; |
||||
} |
||||
|
||||
& > a.jump-to { |
||||
float: right; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .messages-container { |
||||
right: 0; |
||||
left: auto; |
||||
|
||||
& .edit-room-title { |
||||
margin-right: 4px; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
& .wrapper { |
||||
right: 0; |
||||
left: auto; |
||||
} |
||||
|
||||
& .footer { |
||||
right: 0; |
||||
left: auto; |
||||
} |
||||
|
||||
& .message-form { |
||||
& > div .input-message-container .inner-left-toolbar { |
||||
right: 13px; |
||||
left: auto; |
||||
} |
||||
|
||||
& textarea { |
||||
padding-right: 49px; |
||||
padding-left: 8px; |
||||
text-align: right; |
||||
border-width: 0 0 0 1px; |
||||
border-right-width: 0; |
||||
} |
||||
|
||||
& > .stream-info { |
||||
float: right; |
||||
} |
||||
|
||||
& > .formatting-tips { |
||||
float: left; |
||||
position: relative; |
||||
right: auto; |
||||
|
||||
& q { |
||||
padding: 0 3px 0 0; |
||||
border-right: 3px solid; |
||||
border-left: 0 none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .account-box .options { |
||||
direction: ltr; |
||||
|
||||
& > .wrapper { |
||||
direction: rtl; |
||||
} |
||||
} |
||||
|
||||
& .flex-tab-container { |
||||
border-width: 0 1px 0 0; |
||||
} |
||||
|
||||
& .flex-tab-bar .tab-button.active { |
||||
margin-right: -1px; |
||||
margin-left: auto; |
||||
border-left: 3px solid #ff0000; |
||||
border-right: unset; |
||||
} |
||||
|
||||
& .flex-tab .control { |
||||
text-align: right; |
||||
padding: 12px 30px; |
||||
|
||||
& > a, |
||||
& > form { |
||||
float: right; |
||||
} |
||||
|
||||
& .more { |
||||
right: 0; |
||||
left: auto; |
||||
transform: translateX(27px); |
||||
} |
||||
|
||||
& .search-form { |
||||
padding: 0 0 0 4px; |
||||
width: 100%; |
||||
|
||||
& .icon-plus { |
||||
right: 4px; |
||||
left: auto; |
||||
} |
||||
} |
||||
|
||||
& .info-tabs { |
||||
text-align: left; |
||||
left: 20px; |
||||
right: auto; |
||||
} |
||||
} |
||||
|
||||
& .flex-opened .flex-tab .control .more { |
||||
transform: translateX(0); |
||||
} |
||||
|
||||
& .input-line { |
||||
&.search { |
||||
& .icon-spin { |
||||
left: 5px; |
||||
right: auto; |
||||
} |
||||
|
||||
& .icon-search, |
||||
& .icon-right-open-small { |
||||
right: 2px; |
||||
left: auto; |
||||
} |
||||
|
||||
& input { |
||||
padding-right: 20px; |
||||
padding-left: 8px; |
||||
text-align: right; |
||||
} |
||||
} |
||||
|
||||
& > div .right { |
||||
left: 10px; |
||||
right: auto; |
||||
} |
||||
|
||||
&.double-col { |
||||
& > label { |
||||
float: right; |
||||
text-align: left; |
||||
padding: 10px 0 10px 20px; |
||||
} |
||||
|
||||
& > div { |
||||
float: right; |
||||
|
||||
& label { |
||||
margin-left: 4px; |
||||
margin-right: auto; |
||||
|
||||
&:nth-last-child(1) { |
||||
margin-left: 0; |
||||
margin-right: auto; |
||||
} |
||||
|
||||
& input { |
||||
margin-left: 4px; |
||||
margin-right: auto; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .user-image .avatar::after { |
||||
right: -12px; |
||||
left: auto; |
||||
} |
||||
|
||||
& .lines .user-image { |
||||
& button > div { |
||||
float: right; |
||||
} |
||||
|
||||
& p { |
||||
float: right; |
||||
padding-right: 10px; |
||||
padding-left: auto; |
||||
} |
||||
} |
||||
|
||||
& .user-view { |
||||
& nav { |
||||
margin-right: -4px; |
||||
margin-left: auto; |
||||
|
||||
& .back { |
||||
float: left; |
||||
} |
||||
} |
||||
|
||||
& .stats li { |
||||
border-right: unset; |
||||
border-left: 2px; |
||||
} |
||||
} |
||||
|
||||
& .burger { |
||||
margin-right: 7px; |
||||
margin-left: auto; |
||||
right: 0; |
||||
left: auto; |
||||
|
||||
& .unread-burger-alert { |
||||
left: 4px; |
||||
right: auto; |
||||
} |
||||
|
||||
&.menu-opened i { |
||||
&:nth-child(1) { |
||||
transform: translate(25%, 3px) rotate(45deg) scale(0.5, 1); |
||||
} |
||||
|
||||
&:nth-child(3) { |
||||
transform: translate(25%, -3px) rotate(-45deg) scale(0.5, 1); |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .arrow { |
||||
&::before, |
||||
&::after { |
||||
right: calc(50% - 5px); |
||||
} |
||||
|
||||
&::before { |
||||
transform: rotate(135deg) translateX(4px); |
||||
} |
||||
|
||||
&::after { |
||||
transform: rotate(-135deg) translateX(4px); |
||||
} |
||||
|
||||
&.left { |
||||
&::before { |
||||
transform: rotate(-45deg) translateY(-4px); |
||||
} |
||||
|
||||
&::after { |
||||
transform: rotate(45deg) translateY(4px); |
||||
} |
||||
} |
||||
|
||||
&.top { |
||||
&::before { |
||||
transform: rotate(45deg) translateX(-2px) translateY(2px); |
||||
} |
||||
|
||||
&::after { |
||||
transform: rotate(-45deg) translateX(2px) translateY(2px); |
||||
} |
||||
} |
||||
|
||||
&.bottom { |
||||
&::before { |
||||
transform: rotate(-45deg) translateX(-2px) translateY(-2px); |
||||
} |
||||
|
||||
&::after { |
||||
transform: rotate(45deg) translateX(2px) translateY(-2px); |
||||
} |
||||
} |
||||
|
||||
&.close { |
||||
&::before { |
||||
transform: rotate(-45deg); |
||||
} |
||||
|
||||
&::after { |
||||
transform: rotate(45deg); |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .message { |
||||
padding-left: 20px; |
||||
padding-right: 70px; |
||||
|
||||
& .message-dropdown { |
||||
right: -2px; |
||||
left: auto; |
||||
|
||||
& ul li { |
||||
&:first-child { |
||||
padding-right: 6px; |
||||
padding-left: 8px; |
||||
border-left: 1px solid #eeeeee; |
||||
border-right: unset; |
||||
} |
||||
|
||||
&:last-child { |
||||
padding-left: 13px; |
||||
padding-right: 8px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .user { |
||||
margin-left: 5px; |
||||
margin-right: 0; |
||||
} |
||||
|
||||
& .thumb { |
||||
right: 20px; |
||||
left: auto; |
||||
} |
||||
|
||||
& .info .edited { |
||||
border-right: 1px dotted #bab8d8; |
||||
border-left: unset; |
||||
padding-right: 3px; |
||||
padding-left: auto; |
||||
margin-right: 3px; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
& .private { |
||||
margin-right: 10px; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
&.sequential { |
||||
padding-top: 4px; |
||||
|
||||
& .info { |
||||
text-align: left; |
||||
right: 5px; |
||||
left: auto; |
||||
|
||||
& .edited { |
||||
border-right: 0; |
||||
margin-right: 0; |
||||
margin-left: auto; |
||||
padding-right: 0; |
||||
padding-left: auto; |
||||
} |
||||
|
||||
& .message-action { |
||||
float: right; |
||||
margin-right: 1px; |
||||
margin-left: auto; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
& blockquote { |
||||
padding-right: 10px; |
||||
padding-left: auto; |
||||
|
||||
&::before { |
||||
right: 0; |
||||
left: auto; |
||||
} |
||||
} |
||||
|
||||
& .first-unread .body { |
||||
&::before { |
||||
right: 20px; |
||||
left: 0; |
||||
} |
||||
|
||||
&::after { |
||||
left: 0; |
||||
right: auto; |
||||
} |
||||
} |
||||
|
||||
& .ticks-bar { |
||||
left: 2px; |
||||
right: auto; |
||||
} |
||||
|
||||
& .fixed-title { |
||||
padding: 0 20px 0 10px; |
||||
right: 0; |
||||
left: auto; |
||||
} |
||||
|
||||
& .list-view { |
||||
& > .title .see-all { |
||||
float: left; |
||||
} |
||||
|
||||
&.uploaded-files-list { |
||||
& a { |
||||
direction: ltr; |
||||
} |
||||
|
||||
& i { |
||||
float: right; |
||||
margin-left: 10px; |
||||
margin-right: auto; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .page-list .list { |
||||
& a .info ul { |
||||
margin-right: 3px; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
& .user-image { |
||||
float: left; |
||||
margin-right: 12px; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
& table thead th { |
||||
text-align: right; |
||||
} |
||||
} |
||||
|
||||
& .statistics-table { |
||||
& th, |
||||
& td { |
||||
text-align: right; |
||||
} |
||||
} |
||||
|
||||
& .code-mirror-box { |
||||
direction: ltr; |
||||
|
||||
& .buttons { |
||||
text-align: left; |
||||
} |
||||
|
||||
&.code-mirror-box-fullscreen { |
||||
left: 40px; |
||||
right: 260px; |
||||
|
||||
& .title { |
||||
padding-right: 10px; |
||||
padding-left: unset; |
||||
direction: rtl; |
||||
} |
||||
} |
||||
} |
||||
|
||||
& .rocket-form { |
||||
& legend::after { |
||||
right: 0; |
||||
} |
||||
|
||||
& .logoutOthers { |
||||
text-align: left; |
||||
} |
||||
|
||||
& .submit { |
||||
text-align: left; |
||||
} |
||||
} |
||||
|
||||
/* Override toastr messages to show on hte left side */ |
||||
& .toast-top-right { |
||||
left: 12px; |
||||
right: auto; |
||||
} |
||||
|
||||
& .toolbar-search__icon { |
||||
right: 0; |
||||
} |
||||
|
||||
& .toolbar-search__icon--cancel { |
||||
right: auto; |
||||
left: 0; |
||||
} |
||||
|
||||
& .message-popup.search-results-list { |
||||
direction: ltr; |
||||
text-align: right; |
||||
padding: 25px 8px 0 0; |
||||
|
||||
& .popup-item { |
||||
direction: rtl; |
||||
} |
||||
} |
||||
|
||||
@media (width <= 1100px) { |
||||
& #rocket-chat .flex-opened { |
||||
left: 0; |
||||
right: var(--rooms-box-width); |
||||
|
||||
& .flex-tab { |
||||
transform: translateX(calc(100% + 40px)); |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media (width <= 780px) { |
||||
& #rocket-chat { |
||||
& .main-content { |
||||
right: 0; |
||||
} |
||||
|
||||
& .fixed-title h2 { |
||||
margin-right: 45px; |
||||
} |
||||
} |
||||
|
||||
& .code-mirror-box.code-mirror-box-fullscreen { |
||||
right: 0; |
||||
} |
||||
} |
||||
} |
||||
@ -1,808 +0,0 @@ |
||||
.rtl { |
||||
direction: rtl; |
||||
|
||||
// Mix-ins |
||||
.right(@right) { |
||||
right: @right; |
||||
left: auto; |
||||
} |
||||
|
||||
.left(@left) { |
||||
left: @left; |
||||
right: auto; |
||||
} |
||||
|
||||
.margin-right(@margin-right) { |
||||
margin-right: @margin-right; |
||||
margin-left: auto; |
||||
} |
||||
|
||||
.margin-left(@margin-left) { |
||||
margin-left: @margin-left; |
||||
margin-right: auto; |
||||
} |
||||
|
||||
.padding-right(@padding-right) { |
||||
padding-right: @padding-right; |
||||
padding-left: 0; |
||||
} |
||||
|
||||
.padding-left(@padding-left) { |
||||
padding-left: @padding-left; |
||||
padding-right: 0; |
||||
} |
||||
|
||||
button { |
||||
text-align: right; |
||||
} |
||||
|
||||
.text-right { |
||||
text-align: left; |
||||
} |
||||
|
||||
.side-nav { |
||||
.right(0); |
||||
|
||||
.header { |
||||
.right(0); |
||||
|
||||
.account-box { |
||||
.info { |
||||
padding: 10px 18px 10px 0; |
||||
|
||||
.thumb { |
||||
float: right; |
||||
} |
||||
|
||||
.thumb::after { |
||||
.right(-14px); |
||||
} |
||||
|
||||
.data { |
||||
float: right; |
||||
padding: 0 10px 0 25px; |
||||
|
||||
.wrp { |
||||
text-align: right; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.options { |
||||
.right(0); |
||||
|
||||
.status { |
||||
.padding-right(38px); |
||||
} |
||||
|
||||
span.soon { |
||||
.left(-30px); |
||||
} |
||||
|
||||
.status::after { |
||||
.right(18px); |
||||
} |
||||
} |
||||
|
||||
.options._hidden { |
||||
transform: translateX(100%); |
||||
} |
||||
} |
||||
} |
||||
|
||||
> .arrow { |
||||
.left(8px); |
||||
} |
||||
|
||||
.arrow { |
||||
transform: rotateY(180deg); |
||||
} |
||||
|
||||
.footer { |
||||
.right(0); |
||||
} |
||||
|
||||
.rooms-list { |
||||
direction: ltr; |
||||
|
||||
> .wrapper { |
||||
direction: rtl; |
||||
.padding-right(8px); |
||||
|
||||
h3.room-type { |
||||
i { |
||||
.left(6px); |
||||
} |
||||
} |
||||
|
||||
h3 { |
||||
.padding-right(10px); |
||||
} |
||||
|
||||
ul a { |
||||
padding: 6px 6px 7px 25px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.more { |
||||
padding: 4px 10px 4px 0; |
||||
} |
||||
|
||||
.empty { |
||||
.padding-right(10px); |
||||
} |
||||
|
||||
ul .opt { |
||||
.left(0); |
||||
.padding-left(10px); |
||||
text-align: left; |
||||
} |
||||
|
||||
.flex-nav { |
||||
.right(0); |
||||
|
||||
> section { |
||||
.right(0); |
||||
} |
||||
|
||||
header { |
||||
.right(0); |
||||
.padding-right(15px); |
||||
|
||||
> div { |
||||
text-align: right; |
||||
} |
||||
} |
||||
|
||||
.content { |
||||
> .wrapper { |
||||
direction: rtl; |
||||
} |
||||
} |
||||
|
||||
.input-submit { |
||||
margin: 35px -4px 0 0; |
||||
} |
||||
|
||||
.button::before { |
||||
.right(0); |
||||
} |
||||
|
||||
footer { |
||||
.right(0); |
||||
text-align: right; |
||||
|
||||
> div { |
||||
text-align: right; |
||||
} |
||||
} |
||||
|
||||
&.animated-hidden { |
||||
transform: translateX(100%); |
||||
|
||||
header, |
||||
footer, |
||||
.content { |
||||
transform: translateX(100%); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.search-form { |
||||
.search { |
||||
.padding-right(25px); |
||||
} |
||||
|
||||
.margin-left(20px); |
||||
} |
||||
|
||||
h3 { |
||||
.padding-right(10px); |
||||
|
||||
&.room-type { |
||||
i { |
||||
.left(6px); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.unread { |
||||
.left(6px); |
||||
} |
||||
} |
||||
|
||||
.side-nav::before { |
||||
.right(8px); |
||||
} |
||||
|
||||
.main-content { |
||||
left: 0; |
||||
right: @rooms-box-width; |
||||
transition: left 0.25s cubic-bezier(0.5, 0, 0.1, 1); |
||||
|
||||
&.flex-opened { |
||||
left: @flex-tab-width + 40px; |
||||
} |
||||
} |
||||
|
||||
.page-settings { |
||||
.content { |
||||
> .info { |
||||
padding-left: 20px; |
||||
} |
||||
} |
||||
|
||||
.section { |
||||
border-right: none; |
||||
border-left: 1px solid #dddddd; |
||||
|
||||
.section-content { |
||||
.input-line { |
||||
> label { |
||||
text-align: right; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.messages-box { |
||||
margin: 60px 0 0 20px; |
||||
|
||||
.new-message { |
||||
.right(50%); |
||||
} |
||||
} |
||||
|
||||
.terminal { |
||||
direction: ltr; |
||||
} |
||||
|
||||
.container-bars { |
||||
.upload-progress { |
||||
.upload-progress-progress { |
||||
.right(0); |
||||
} |
||||
|
||||
.upload-progress-text { |
||||
> a { |
||||
float: left; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.unread-bar { |
||||
> a.mark-read { |
||||
float: left; |
||||
} |
||||
|
||||
> a.jump-to { |
||||
float: right; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.messages-container { |
||||
.right(0); |
||||
|
||||
.edit-room-title { |
||||
.margin-right(4px); |
||||
} |
||||
|
||||
.wrapper { |
||||
.right(0); |
||||
} |
||||
|
||||
.footer { |
||||
.right(0); |
||||
} |
||||
|
||||
.message-form { |
||||
> div { |
||||
.input-message-container { |
||||
.inner-left-toolbar { |
||||
.right(13px); |
||||
} |
||||
} |
||||
} |
||||
|
||||
textarea { |
||||
padding-right: 49px; |
||||
padding-left: 8px; |
||||
text-align: right; |
||||
border-width: 0 0 0 1px; |
||||
border-right-width: 0; |
||||
} |
||||
|
||||
> .stream-info { |
||||
float: right; |
||||
} |
||||
|
||||
> .formatting-tips { |
||||
float: left; |
||||
position: relative; |
||||
right: auto; |
||||
|
||||
q { |
||||
padding: 0 3px 0 0; |
||||
border-right: 3px solid; |
||||
border-left: 0 none; |
||||
// border-right-color: #cccccc; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.account-box { |
||||
.options { |
||||
direction: ltr; |
||||
|
||||
> .wrapper { |
||||
direction: rtl; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.flex-tab-container { |
||||
border-width: 0 1px 0 0; |
||||
} |
||||
|
||||
.flex-tab-bar { |
||||
.tab-button { |
||||
&.active { |
||||
.margin-right(-1px); |
||||
border-left: 3px solid #ff0000; |
||||
border-right: unset; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.flex-tab { |
||||
.control { |
||||
text-align: right; |
||||
padding: 12px 30px; |
||||
|
||||
> a, |
||||
> form { |
||||
float: right; |
||||
} |
||||
|
||||
.more { |
||||
.right(0); |
||||
transform: translateX(27px); |
||||
} |
||||
|
||||
.search-form { |
||||
padding: 0 0 0 4px; |
||||
width: 100%; |
||||
|
||||
.icon-plus { |
||||
.right(4px); |
||||
} |
||||
} |
||||
|
||||
.info-tabs { |
||||
text-align: left; |
||||
.left(20px); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.flex-opened { |
||||
.flex-tab { |
||||
.control { |
||||
.more { |
||||
transform: translateX(0); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.input-line { |
||||
&.search { |
||||
.icon-spin { |
||||
.left(5px); |
||||
} |
||||
|
||||
.icon-search, |
||||
.icon-right-open-small { |
||||
.right(2px); |
||||
} |
||||
|
||||
input { |
||||
padding-right: 20px; |
||||
padding-left: 8px; |
||||
text-align: right; |
||||
} |
||||
} |
||||
|
||||
> div { |
||||
.right { |
||||
.left(10px); |
||||
} |
||||
} |
||||
|
||||
&.double-col { |
||||
> label { |
||||
float: right; |
||||
.padding-left(20px); |
||||
text-align: left; |
||||
padding: 10px 0 10px 20px; |
||||
} |
||||
|
||||
> div { |
||||
float: right; |
||||
|
||||
label { |
||||
.margin-left(4px); |
||||
|
||||
&:nth-last-child(1) { |
||||
.margin-left(0); |
||||
} |
||||
|
||||
input { |
||||
.margin-left(4px); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.user-image { |
||||
.avatar { |
||||
&::after { |
||||
.right(-12px); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.lines .user-image { |
||||
button { |
||||
> div { |
||||
float: right; |
||||
} |
||||
} |
||||
|
||||
p { |
||||
float: right; |
||||
.padding-right(10px); |
||||
} |
||||
} |
||||
|
||||
.user-view { |
||||
nav { |
||||
.margin-right(-4px); |
||||
|
||||
.back { |
||||
float: left; |
||||
} |
||||
} |
||||
|
||||
.stats { |
||||
li { |
||||
border-right: unset; |
||||
border-left: 2px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media all and(max-width: 1100px) { |
||||
#rocket-chat { |
||||
.flex-opened { |
||||
left: 0; |
||||
right: @rooms-box-width; |
||||
|
||||
.flex-tab { |
||||
transform: translateX(calc(~'100% + 40px')); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media all and(max-width: 780px) { |
||||
#rocket-chat { |
||||
.main-content { |
||||
right: 0; |
||||
} |
||||
|
||||
.fixed-title h2 { |
||||
margin-right: 45px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.burger { |
||||
.margin-right(7px); |
||||
.right(0); |
||||
|
||||
.unread-burger-alert { |
||||
.left(4px); |
||||
} |
||||
|
||||
&.menu-opened { |
||||
i { |
||||
&:nth-child(1) { |
||||
transform: translate(25%, 3px) rotate(45deg) scale(0.5, 1); |
||||
} |
||||
|
||||
&:nth-child(3) { |
||||
transform: translate(25%, -3px) rotate(-45deg) scale(0.5, 1); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.arrow { |
||||
&::before, |
||||
&::after { |
||||
right: calc(~"50% - 5px"); |
||||
} |
||||
|
||||
&::before { |
||||
transform: rotate(135deg) translateX(4px); |
||||
} |
||||
|
||||
&::after { |
||||
transform: rotate(-135deg) translateX(4px); |
||||
} |
||||
|
||||
&.left { |
||||
&::before { |
||||
transform: rotate(-45deg) translateY(-4px); |
||||
} |
||||
|
||||
&::after { |
||||
transform: rotate(45deg) translateY(4px); |
||||
} |
||||
} |
||||
|
||||
&.top { |
||||
&::before { |
||||
transform: rotate(45deg) translateX(-2px) translateY(2px); |
||||
} |
||||
|
||||
&::after { |
||||
transform: rotate(-45deg) translateX(2px) translateY(2px); |
||||
} |
||||
} |
||||
|
||||
&.bottom { |
||||
&::before { |
||||
transform: rotate(-45deg) translateX(-2px) translateY(-2px); |
||||
} |
||||
|
||||
&::after { |
||||
transform: rotate(45deg) translateX(2px) translateY(-2px); |
||||
} |
||||
} |
||||
|
||||
&.close { |
||||
&::before { |
||||
transform: rotate(-45deg); |
||||
} |
||||
|
||||
&::after { |
||||
transform: rotate(45deg); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.message { |
||||
padding-left: 20px; |
||||
padding-right: 70px; |
||||
|
||||
.message-dropdown { |
||||
.right(-2px); |
||||
|
||||
ul { |
||||
li { |
||||
&:first-child { |
||||
padding-right: 6px; |
||||
padding-left: 8px; |
||||
border-left: 1px solid #eeeeee; |
||||
border-right: unset; |
||||
} |
||||
|
||||
&:last-child { |
||||
padding-left: 13px; |
||||
padding-right: 8px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.user { |
||||
margin-left: 5px; |
||||
margin-right: 0; |
||||
} |
||||
|
||||
.thumb { |
||||
.right(20px); |
||||
} |
||||
|
||||
.info { |
||||
.edited { |
||||
border-right: 1px dotted #bab8d8; |
||||
border-left: unset; |
||||
.padding-right(3px); |
||||
.margin-right(3px); |
||||
} |
||||
} |
||||
|
||||
.private { |
||||
.margin-right(10px); |
||||
// |
||||
} |
||||
|
||||
&.sequential { |
||||
padding-top: 4px; |
||||
|
||||
.info { |
||||
text-align: left; |
||||
.right(5px); |
||||
|
||||
.edited { |
||||
border-right: 0; |
||||
.margin-right(0); |
||||
.padding-right(0); |
||||
} |
||||
|
||||
.message-action { |
||||
float: right; |
||||
// |
||||
.margin-right(1px); |
||||
// |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
blockquote { |
||||
.padding-right(10px); |
||||
|
||||
&::before { |
||||
.right(0); |
||||
} |
||||
} |
||||
|
||||
.first-unread { |
||||
.body { |
||||
&::before { |
||||
right: 20px; |
||||
left: 0; |
||||
} |
||||
|
||||
&::after { |
||||
.left(0); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.ticks-bar { |
||||
.left(2px); |
||||
} |
||||
|
||||
.fixed-title { |
||||
padding: 0 20px 0 10px; |
||||
.right(0); |
||||
} |
||||
|
||||
.list-view { |
||||
> .title { |
||||
.see-all { |
||||
float: left; |
||||
} |
||||
} |
||||
|
||||
&.uploaded-files-list { |
||||
a { |
||||
direction: ltr; |
||||
} |
||||
|
||||
i { |
||||
float: right; |
||||
.margin-left(10px); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.page-list { |
||||
.list { |
||||
a { |
||||
.info { |
||||
ul { |
||||
.margin-right(3px); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.user-image { |
||||
float: left; |
||||
.margin-right(12px); |
||||
} |
||||
|
||||
table { |
||||
thead { |
||||
th { |
||||
text-align: right; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.statistics-table { |
||||
th, |
||||
td { |
||||
text-align: right; |
||||
} |
||||
} |
||||
|
||||
.code-mirror-box { |
||||
direction: ltr; |
||||
|
||||
.buttons { |
||||
text-align: left; |
||||
} |
||||
|
||||
&.code-mirror-box-fullscreen { |
||||
left: 40px; |
||||
right: 260px; |
||||
|
||||
.title { |
||||
padding-right: 10px; |
||||
padding-left: unset; |
||||
direction: rtl; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media all and (max-width: 780px) { |
||||
.code-mirror-box { |
||||
&.code-mirror-box-fullscreen { |
||||
right: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.rocket-form { |
||||
legend { |
||||
&::after { |
||||
right: 0; |
||||
} |
||||
} |
||||
|
||||
.logoutOthers { |
||||
text-align: left; |
||||
} |
||||
|
||||
.submit { |
||||
text-align: left; |
||||
} |
||||
} |
||||
|
||||
/* Override toastr messages to show on hte left side */ |
||||
.toast-top-right { |
||||
.left(12px); |
||||
} |
||||
|
||||
.toolbar-search__icon { |
||||
right: 0; |
||||
} |
||||
|
||||
.toolbar-search__icon--cancel { |
||||
right: auto; |
||||
left: 0; |
||||
} |
||||
|
||||
.message-popup.search-results-list { |
||||
direction: ltr; |
||||
text-align: right; |
||||
padding: 25px 8px 0 0; |
||||
|
||||
.popup-item { |
||||
direction: rtl; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,10 @@ |
||||
:root { |
||||
--header-min-height: 60px; |
||||
--toolbar-height: 55px; |
||||
--footer-min-height: 70px; |
||||
--rooms-box-width: 260px; |
||||
--flex-tab-width: 400px; |
||||
--flex-tab-webrtc-width: 400px; |
||||
--flex-tab-webrtc-2-width: 850px; |
||||
--user-image-square: 20px; |
||||
} |
||||
@ -1,7 +0,0 @@ |
||||
@header-min-height: 60px; |
||||
@toolbar-height: 55px; |
||||
@footer-min-height: 70px; |
||||
@rooms-box-width: 260px; |
||||
@flex-tab-width: 400px; |
||||
@flex-tab-webrtc-width: 400px; |
||||
@flex-tab-webrtc-2-width: 850px; |
||||
@ -0,0 +1,8 @@ |
||||
@import 'imports/reset.css'; |
||||
@import 'imports/variables.css'; |
||||
@import 'imports/properties.css'; |
||||
@import 'imports/keyframes.css'; |
||||
@import 'imports/forms.css'; |
||||
@import 'imports/base.css'; |
||||
@import 'imports/rtl.css'; |
||||
|
||||
@ -1,6 +0,0 @@ |
||||
@import "imports/variables.less"; |
||||
@import "imports/reset.less"; |
||||
@import "imports/keyframes.less"; |
||||
@import "imports/rtl.less"; |
||||
@import "imports/forms.less"; |
||||
@import "imports/base.less"; |
||||
@ -1,3 +1,3 @@ |
||||
#login-buttons-image-wordpress { |
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiP…A3LDI3LjUsMjUuOTQsMjMuMjE1LDI4LjQzNHoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==); |
||||
} |
||||
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiP…A3LDI3LjUsMjUuOTQsMjMuMjE1LDI4LjQzNHoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==); |
||||
} |
||||
|
||||
Loading…
Reference in new issue