Commit f600b1dc authored by Asaad Mahmood's avatar Asaad Mahmood

Updating asss lint stuff with other scss improvements

parent 809779a8
# sass-lint config generated by make-sass-lint-config v0.1.1
#
# The following scss-lint Linters are not yet supported by sass-lint:
# DisableLinterReason, ElsePlacement, PropertyCount, SelectorDepth
# SpaceAroundOperator, TrailingWhitespace, UnnecessaryParentReference, Compass::*
#
# The following settings/values are unsupported by sass-lint:
# Linter Indentation, option "allow_non_nested_indentation"
# Linter Indentation, option "character"
# Linter NestingDepth, option "ignore_parent_selectors"
# Linter PropertySortOrder, option "min_properties"
# Linter PropertySortOrder, option "separate_groups"
# Linter SpaceBeforeBrace, option "allow_single_line_padding"
# Linter VendorPrefix, option "identifier_list"
files:
include: '**/*.scss'
options:
formatter: stylish
merge-default-rules: false
rules:
bem-depth:
- 1
- max-depth: 3
border-zero:
- 1
- convention: none
brace-style:
- 2
- allow-single-line: true
class-name-format:
- 1
- convention: hyphenatedbem
clean-import-paths:
- 1
- filename-extension: false
leading-underscore: false
empty-line-between-blocks:
- 2
- ignore-single-line-rulesets: true
extends-before-declarations: 1
extends-before-mixins: 1
final-newline:
- 1
- include: true
force-attribute-nesting: 1
force-element-nesting: 1
force-pseudo-nesting: 1
function-name-format:
- 1
- allow-leading-underscore: true
convention: hyphenatedlowercase
hex-length:
- 1
- style: short
hex-notation:
- 1
- style: lowercase
id-name-format:
- 1
- convention: hyphenatedbem
indentation:
- 2
- size: 4
leading-zero:
- 1
- include: false
mixin-name-format:
- 0
- allow-leading-underscore: true
convention: hyphenatedlowercase
mixins-before-declarations: 1
nesting-depth:
- 1
- max-depth: 4
no-color-keyword: 1
no-color-literals: 1
no-css-comments: 1
no-debug: 1
no-duplicate-properties: 1
no-empty-rulesets: 1
no-extends: 0
no-ids: 1
no-important: 1
no-invalid-hex: 1
no-mergeable-selectors: 1
no-misspelled-properties:
- 1
- extra-properties: ['overflow-scrolling', 'font-smoothing']
no-qualifying-elements:
- 1
- allow-element-with-attribute: false
allow-element-with-class: false
allow-element-with-id: false
no-trailing-zero: 1
no-transition-all: 0
no-url-protocols: 1
no-vendor-prefixes:
- 1
- additional-identifiers: []
excluded-identifiers: []
placeholder-in-extend: 1
placeholder-name-format:
- 1
- convention: hyphenatedlowercase
property-sort-order:
- 1
- ignore-custom-properties: false
property-units:
- 1
- global:
- ch
- em
- ex
- rem
- cm
- in
- mm
- pc
- pt
- px
- q
- vh
- vw
- vmin
- vmax
- deg
- grad
- rad
- turn
- ms
- s
- Hz
- kHz
- dpi
- dpcm
- dppx
- '%'
per-property: {}
quotes:
- 1
- style: single
shorthand-values:
- 1
- allowed-shorthands:
- 1
- 2
- 3
single-line-per-selector: 2
space-after-bang:
- 2
- include: false
space-after-colon:
- 2
- include: true
space-after-comma:
- 1
- include: true
space-before-bang:
- 2
- include: true
space-before-brace:
- 2
- include: true
space-before-colon: 1
space-between-parens:
- 2
- include: false
trailing-semicolon: 2
url-quotes: 1
variable-for-property:
- 0
- properties: []
variable-name-format:
- 1
- allow-leading-underscore: true
convention: hyphenatedlowercase
zero-unit: 1
{
"name": "mattermost",
"version": "0.0.1",
"private": true,
"dependencies": {
"autolinker": "0.24.0",
"fastclick": "1.0.6",
"flux": "2.1.1",
"highlight.js": "9.1.0",
"keymirror": "0.1.1",
"marked": "mattermost/marked#cb85e5cc81bc7937dbb73c3c53d9532b1b97e3ca",
"mm-intl": "mattermost/mm-intl#805442fd474fa40cd586ddeda404dbbe8e60626d",
"object-assign": "4.0.1",
"react": "0.14.3",
"react-router": "2.0.0",
"twemoji": "1.4.1"
},
"devDependencies": {
"babel-eslint": "5.0.0",
"babel-plugin-transform-runtime": "6.5.2",
"babel-preset-es2015": "6.5.0",
"babel-preset-react": "6.5.0",
"babel-preset-stage-0": "6.5.0",
"babelify": "7.2.0",
"browserify": "13.0.0",
"eslint": "2.2.0",
"eslint-plugin-react": "4.0.0",
"exorcist": "0.4.0",
"sass-lint": "^1.5.1",
"uglify-js": "2.6.1",
"watchify": "3.7.0"
},
"scripts": {
"check": "",
"build-libs": "browserify -r crypto -r autolinker -r flux -r keymirror -r marked -r object-assign -r twemoji | uglifyjs -c -m --screw-ie8 > ../static/js/libs.min.js",
"start": "watchify --fast -x crypto -x node -x autolinker -x flux -x keymirror -x marked -x object-assign -x twemoji -o ../static/js/bundle.js -v -d ./**/*.jsx",
"build": "browserify -x crypto -x autolinker -x flux -x keymirror -x marked -x object-assign -x twemoji -d ./**/*.jsx | exorcist ../static/js/inter.js.map > ../static/js/tmp.js && uglifyjs ../static/js/tmp.js --in-source-map \"../static/js/inter.js.map\" --source-map \"../static/js/bundle.min.js.map\" --source-map-url \"/static/js/bundle.min.js.map\" -c -m --screw-ie8 > ../static/js/bundle.min.js && rm ../static/js/tmp.js && rm ../static/js/inter.js.map"
},
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"transform-runtime"
]
}
]
]
}
}
B@charset 'UTF-8'; B@charset 'UTF-8';
...@@ -120,7 +120,10 @@ export default class CenterPanel extends React.Component { ...@@ -120,7 +120,10 @@ export default class CenterPanel extends React.Component {
id='app-content' id='app-content'
className='app__content' className='app__content'
> >
<div id='channel-header'> <div
id='channel-header'
className='channel-header'
>
<ChannelHeader <ChannelHeader
user={this.state.user} user={this.state.user}
/> />
......
...@@ -160,7 +160,7 @@ export default class MoreChannels extends React.Component { ...@@ -160,7 +160,7 @@ export default class MoreChannels extends React.Component {
return ( return (
<div <div
className='modal fade' className='modal fade more-channel__modal'
id='more_channels' id='more_channels'
ref='modal' ref='modal'
tabIndex='-1' tabIndex='-1'
......
...@@ -38,7 +38,7 @@ class NewChannelModal extends React.Component { ...@@ -38,7 +38,7 @@ class NewChannelModal extends React.Component {
} }
componentDidMount() { componentDidMount() {
if (Utils.isBrowserIE()) { if (Utils.isBrowserIE()) {
$('body').addClass('browser--IE'); $('body').addClass('browser--ie');
} }
} }
handleSubmit(e) { handleSubmit(e) {
......
...@@ -158,6 +158,7 @@ export default class PopoverListMembers extends React.Component { ...@@ -158,6 +158,7 @@ export default class PopoverListMembers extends React.Component {
<Popover <Popover
ref='memebersPopover' ref='memebersPopover'
title={title} title={title}
className='member-list__popover'
id='member-list-popover' id='member-list-popover'
> >
<div className='more-modal__list'>{popoverHtml}</div> <div className='more-modal__list'>{popoverHtml}</div>
......
...@@ -311,15 +311,15 @@ class ViewImageModal extends React.Component { ...@@ -311,15 +311,15 @@ class ViewImageModal extends React.Component {
<Modal <Modal
show={this.props.show} show={this.props.show}
onHide={this.props.onModalDismissed} onHide={this.props.onModalDismissed}
className='image_modal' className='modal-image'
dialogClassName='modal-image' dialogClassName='modal-image'
> >
<Modal.Body <Modal.Body
modalClassName='image-body' modalClassName='modal-image__body'
onClick={this.props.onModalDismissed} onClick={this.props.onModalDismissed}
> >
<div <div
className={'image-wrapper'} className={'modal-image__wrapper'}
onClick={this.props.onModalDismissed} onClick={this.props.onModalDismissed}
> >
<div <div
......
...@@ -6,22 +6,24 @@ body { ...@@ -6,22 +6,24 @@ body {
} }
body { body {
width: 100%;
height: 100%;
background: $bg--gray; background: $bg--gray;
height: 100%;
position: relative; position: relative;
width: 100%;
}
&.sticky { .sticky {
background: $bg--white; background: $white;
> .container-fluid { > .container-fluid {
overflow: auto; overflow: auto;
} }
.inner-wrap { .inner-wrap {
> .row.content { > .row {
min-height: 100%; &.content {
margin-bottom: -89px; margin-bottom: -89px;
min-height: 100%;
} }
} }
} }
...@@ -30,9 +32,11 @@ body { ...@@ -30,9 +32,11 @@ body {
.inner-wrap { .inner-wrap {
height: 100%; height: 100%;
> .row.main { > .row {
height: 100%; &.main {
position: relative; height: 100%;
position: relative;
}
} }
} }
......
...@@ -6,20 +6,20 @@ strong { ...@@ -6,20 +6,20 @@ strong {
} }
a { a {
color: $primary-color;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
word-break: break-word; word-break: break-word;
color: $color--primary;
}
a:focus, &:focus,
a:hover { &:hover {
color: $color--primary--hover; color: $primary-color--hover;
}
} }
body { body {
@include font-smoothing;
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
} }
.word-break--all { .word-break--all {
......
@charset 'UTF-8'; @charset 'UTF-8';
.alert { .alert {
padding: 8px 12px;
@include border-radius($border-rad); @include border-radius($border-rad);
padding: 8px 12px;
} }
.alert--confirm { .alert--confirm {
display: inline-block; display: inline-block;
float: left; float: left;
padding: 4px 10px;
margin: 1px 0 0 10px; margin: 1px 0 0 10px;
} padding: 4px 10px;
\ No newline at end of file }
...@@ -5,19 +5,19 @@ ...@@ -5,19 +5,19 @@
@include border-radius($border-rad); @include border-radius($border-rad);
&.btn-primary { &.btn-primary {
background: $primary-color;
border-color: transparent; border-color: transparent;
background: $color--primary;
&:hover, &:hover,
&:focus, &:focus,
&:active { &:active {
background: $color--primary--hover; background: $primary-color--hover;
} }
} }
&.btn-inactive { &.btn-inactive {
background: $light-gray;
border-color: transparent; border-color: transparent;
background: #707070; color: $white;
color: #fff;
} }
} }
@charset 'UTF-8'; @charset 'UTF-8';
.emoticon { .emoticon {
width: 1.5em; background-size: contain;
height: 1.5em;
display: inline-block; display: inline-block;
height: 1.5em;
margin-bottom: .25em; margin-bottom: .25em;
background-size: contain; width: 1.5em;
} }
.emoticon-suggestion { .emoticon-suggestion {
@include clearfix; @include clearfix;
width: 100%;
height: 30px;
cursor: pointer; cursor: pointer;
font-size: 13px; font-size: 13px;
height: 30px;
line-height: 30px; line-height: 30px;
width: 100%;
} }
.emoticon-suggestion__image { .emoticon-suggestion__image {
width: 20px;
height: 20px; height: 20px;
margin: 6px 6px 0 5px; margin: 6px 6px 0 5px;
padding: 0; padding: 0;
text-align: center; text-align: center;
vertical-align: top; vertical-align: top;
width: 20px;
} }
@charset 'UTF-8'; @charset 'UTF-8';
.error-bar { .error-bar {
background-color: #09f; background-color: darken($primary-color, 5%);
text-align: center; color: $white;
position: relative; padding: 5px 30px;
color: #fff;
position: absolute; position: absolute;
text-align: center;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 9999; z-index: 9999;
padding: 5px 30px;
&__close { &__close {
position: absolute; color: $white;
right: 0; font-family: 'Open Sans', sans-serif;
top: 0;
color: #fff;
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
text-decoration: none;
padding: 0 10px; padding: 0 10px;
font-family: 'Open Sans', sans-serif; position: absolute;
right: 0;
text-decoration: none;
top: 0;
&:hover { &:hover {
color: #fff; color: $white;
text-decoration: none; text-decoration: none;
} }
} }
......
@charset 'UTF-8'; @charset 'UTF-8';
.file-preview__container { .file-preview__container {
position: relative; height: 100px;
margin: 1px 0 10px; margin: 1px 0 10px;
width: 100%;
max-height: 100px; max-height: 100px;
height: 100px;
white-space: nowrap;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
position: relative;
white-space: nowrap;
width: 100%;
} }
.file-preview { .file-preview {
@include clearfix;
border: 1px solid $light-gray;
display: inline-block; display: inline-block;
width: 120px;
height: 100px; height: 100px;
margin: 0 0 0 10px; margin: 0 0 0 10px;
position: relative; position: relative;
border: 1px solid #ddd; width: 120px;
@include clearfix;
&:hover .file-preview__remove:after { &:hover {
@include opacity(1); .file-preview__remove {
&:after {
@include opacity(1);
}
}
} }
&:first-child { &:first-child {
...@@ -29,13 +33,13 @@ ...@@ -29,13 +33,13 @@
} }
.spinner { .spinner {
position: absolute; height: 32px;
top: 50%;
left: 50%; left: 50%;
margin-left: -16px; margin-left: -16px;
margin-top: -16px; margin-top: -16px;
position: absolute;
top: 50%;
width: 32px; width: 32px;
height: 32px;
} }
} }
...@@ -46,14 +50,15 @@ ...@@ -46,14 +50,15 @@
} }
.file-preview__remove { .file-preview__remove {
position: absolute;
width: 100%;
height: 100%; height: 100%;
left: 0; left: 0;
position: absolute;
top: 0; top: 0;
width: 100%;
&:after { &:after {
background: rgba(0, 0, 0, .4); @include opacity(0);
@include alpha-property(background, $black, .4);
content: ''; content: '';
height: 100%; height: 100%;
left: 0; left: 0;
...@@ -61,33 +66,31 @@ ...@@ -61,33 +66,31 @@
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
@include opacity(0);
} }
i { i {
top: 5px; color: $white;
right: 5px;
position: absolute;
color: #fff;
cursor: pointer; cursor: pointer;
z-index: 5;
opacity: inherit; opacity: inherit;
text-shadow: 0 0px 3px #444; position: absolute;
text-shadow: 0 0px 3px rgba(0, 0, 0, .7); right: 5px;
text-shadow: 0 0 3px alpha-color($black, .7);
top: 5px;
z-index: 5;
} }
} }