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"
]
}
]
]
}
}
......@@ -120,7 +120,10 @@ export default class CenterPanel extends React.Component {
id='app-content'
className='app__content'
>
<div id='channel-header'>
<div
id='channel-header'
className='channel-header'
>
<ChannelHeader
user={this.state.user}
/>
......
......@@ -160,7 +160,7 @@ export default class MoreChannels extends React.Component {
return (
<div
className='modal fade'
className='modal fade more-channel__modal'
id='more_channels'
ref='modal'
tabIndex='-1'
......
......@@ -38,7 +38,7 @@ class NewChannelModal extends React.Component {
}
componentDidMount() {
if (Utils.isBrowserIE()) {
$('body').addClass('browser--IE');
$('body').addClass('browser--ie');
}
}
handleSubmit(e) {
......
......@@ -158,6 +158,7 @@ export default class PopoverListMembers extends React.Component {
<Popover
ref='memebersPopover'
title={title}
className='member-list__popover'
id='member-list-popover'
>
<div className='more-modal__list'>{popoverHtml}</div>
......
......@@ -311,15 +311,15 @@ class ViewImageModal extends React.Component {
<Modal
show={this.props.show}
onHide={this.props.onModalDismissed}
className='image_modal'
className='modal-image'
dialogClassName='modal-image'
>
<Modal.Body
modalClassName='image-body'
modalClassName='modal-image__body'
onClick={this.props.onModalDismissed}
>
<div
className={'image-wrapper'}
className={'modal-image__wrapper'}
onClick={this.props.onModalDismissed}
>
<div
......
......@@ -6,22 +6,24 @@ body {
}
body {
width: 100%;
height: 100%;
background: $bg--gray;
height: 100%;
position: relative;
width: 100%;
}
&.sticky {
background: $bg--white;
.sticky {
background: $white;
> .container-fluid {
overflow: auto;
}
> .container-fluid {
overflow: auto;
}
.inner-wrap {
> .row.content {
min-height: 100%;
.inner-wrap {
> .row {
&.content {
margin-bottom: -89px;
min-height: 100%;
}
}
}
......@@ -30,9 +32,11 @@ body {
.inner-wrap {
height: 100%;
> .row.main {
height: 100%;
position: relative;
> .row {
&.main {
height: 100%;
position: relative;
}
}
}
......
......@@ -6,20 +6,20 @@ strong {
}
a {
color: $primary-color;
cursor: pointer;
text-decoration: none;
word-break: break-word;
color: $color--primary;
}
a:focus,
a:hover {
color: $color--primary--hover;
&:focus,
&:hover {
color: $primary-color--hover;
}
}
body {
@include font-smoothing;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
}
.word-break--all {
......
@charset 'UTF-8';
.alert {
padding: 8px 12px;
@include border-radius($border-rad);
padding: 8px 12px;
}
.alert--confirm {
display: inline-block;
float: left;
padding: 4px 10px;
margin: 1px 0 0 10px;
}
\ No newline at end of file
padding: 4px 10px;
}
......@@ -5,19 +5,19 @@
@include border-radius($border-rad);
&.btn-primary {
background: $primary-color;
border-color: transparent;
background: $color--primary;
&:hover,
&:focus,
&:active {
background: $color--primary--hover;
background: $primary-color--hover;
}
}
&.btn-inactive {
background: $light-gray;
border-color: transparent;
background: #707070;
color: #fff;
color: $white;
}
}
@charset 'UTF-8';
.emoticon {
width: 1.5em;
height: 1.5em;
background-size: contain;
display: inline-block;
height: 1.5em;
margin-bottom: .25em;
background-size: contain;
width: 1.5em;
}
.emoticon-suggestion {
@include clearfix;
width: 100%;
height: 30px;
cursor: pointer;
font-size: 13px;
height: 30px;
line-height: 30px;
width: 100%;
}
.emoticon-suggestion__image {
width: 20px;
height: 20px;
margin: 6px 6px 0 5px;
padding: 0;
text-align: center;
vertical-align: top;
width: 20px;
}
@charset 'UTF-8';
.error-bar {
background-color: #09f;
text-align: center;
position: relative;
color: #fff;
background-color: darken($primary-color, 5%);
color: $white;
padding: 5px 30px;
position: absolute;
text-align: center;
top: 0;
width: 100%;
z-index: 9999;
padding: 5px 30px;
&__close {
position: absolute;
right: 0;
top: 0;
color: #fff;
color: $white;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
padding: 0 10px;
font-family: 'Open Sans', sans-serif;
position: absolute;
right: 0;
text-decoration: none;
top: 0;
&:hover {
color: #fff;
color: $white;
text-decoration: none;
}
}
......
@charset 'UTF-8';
.file-preview__container {
position: relative;
height: 100px;
margin: 1px 0 10px;
width: 100%;
max-height: 100px;
height: 100px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
position: relative;
white-space: nowrap;
width: 100%;
}
.file-preview {
@include clearfix;
border: 1px solid $light-gray;
display: inline-block;
width: 120px;
height: 100px;
margin: 0 0 0 10px;
position: relative;
border: 1px solid #ddd;
@include clearfix;
width: 120px;
&:hover .file-preview__remove:after {
@include opacity(1);
&:hover {
.file-preview__remove {
&:after {
@include opacity(1);
}
}
}
&:first-child {
......@@ -29,13 +33,13 @@
}
.spinner {
position: absolute;
top: 50%;
height: 32px;
left: 50%;
margin-left: -16px;
margin-top: -16px;
position: absolute;
top: 50%;
width: 32px;
height: 32px;
}
}
......@@ -46,14 +50,15 @@
}
.file-preview__remove {
position: absolute;
width: 100%;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
&:after {
background: rgba(0, 0, 0, .4);
@include opacity(0);
@include alpha-property(background, $black, .4);
content: '';
height: 100%;
left: 0;
......@@ -61,33 +66,31 @@
position: absolute;
top: 0;
width: 100%;
@include opacity(0);
}
i {
top: 5px;
right: 5px;
position: absolute;
color: #fff;
color: $white;
cursor: pointer;
z-index: 5;
opacity: inherit;
text-shadow: 0 0px 3px #444;
text-shadow: 0 0px 3px rgba(0, 0, 0, .7);
position: absolute;
right: 5px;
text-shadow: 0 0 3px alpha-color($black, .7);
top: 5px;
z-index: 5;
}
}
.image-comment {
background-position: left top;
background-repeat: no-repeat;
width: 300px;
height: 300px;
width: 300px;
}
.file-icon {
width: 100%;
height: 100%;
width: 100%;
&.audio {
@include file-icon('../images/icons/audio.png');
......@@ -131,36 +134,30 @@
}
.post-image__column {
position: relative;
width: 240px;
height: 100px;
border: 1px solid alpha-color($black, .2);
float: left;
height: 100px;
margin: 5px 10px 5px 0;
border: 1px solid lightgrey;
a {
text-decoration: none;
color: grey;
}
position: relative;
width: 240px;
}
.post-image__load {
background-position: center;
background-repeat: no-repeat;
background-size: 20px 20px;
height: 100%;
width: 100%;
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: center;
background-image: url('~images/load.gif');
}
.post-image {
width: 100%;
height: 100%;
background-color: #fff;
background-color: $white;
background-repeat: no-repeat;
height: 100%;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
&.small {
background-position: center;
......@@ -170,60 +167,59 @@
background-position: top left;
}
.spinner.file__loading {
position: absolute;
left: 50%;
margin-left: -16px;
top: 50%;
margin-top: -16px;
.spinner {
.file__loading {
left: 50%;
margin-left: -16px;
margin-top: -16px;
position: absolute;
top: 50%;
}
}
.file__loaded {
max-width: initial;
&.landscape,
&.quadrat {
height: 100px;
}
&.portrait {
width: 120px;
}
}
&:hover .file-playback__controls.stop {
@include opacity(1);
}
}
.post-image__thumbnail {
@include cursor(zoom-in);
float: left;
width: 50%;
height: 100%;
cursor: zoom-in;
cursor: -webkit-zoom-in;
width: 50%;
}
.post-image__details {
float: left;
@include clearfix;
word-break: break-word;
width: 50%;
height: 100%;
background: white;
border-left: 1px solid #ddd;
background: $white;
border-left: 1px solid $light-gray;
color: alpha-color($black, .8);
float: left;
font-size: 13px;
height: 100%;
padding: 7px;
color: #333;
width: 50%;
word-break: break-word;
.post-image__name {
margin-bottom: 3px;
display: block;
margin-bottom: