diff options
Diffstat (limited to 'webapp/sass')
70 files changed, 0 insertions, 14716 deletions
diff --git a/webapp/sass/base/_module.scss b/webapp/sass/base/_module.scss deleted file mode 100644 index 987b9200b..000000000 --- a/webapp/sass/base/_module.scss +++ /dev/null @@ -1,3 +0,0 @@ -// Only for combining all the files in this folder -@import 'typography'; -@import 'structure'; diff --git a/webapp/sass/base/_structure.scss b/webapp/sass/base/_structure.scss deleted file mode 100644 index b29cfa424..000000000 --- a/webapp/sass/base/_structure.scss +++ /dev/null @@ -1,70 +0,0 @@ -@charset 'UTF-8'; - -html, -body { - height: 100%; -} - -body { - background: $bg--gray; - height: 100%; - position: relative; - width: 100%; - - &.error-bar--fixed { - padding-top: 22px; - } -} - -.sticky { - background: $white; - - > .container-fluid { - overflow: auto; - } - - .inner-wrap { - > .row { - &.content { - margin-bottom: -89px; - min-height: 100%; - } - } - } -} - -.inner-wrap { - height: 100%; - - &.sticky { - overflow: auto; - } - - > .row { - &.main { - height: 100%; - position: relative; - } - } -} - -.container-fluid { - @include legacy-pie-clearfix; - height: 100%; - position: relative; - -webkit-overflow-scrolling: touch; -} - -.channel-view { - @include clearfix; - height: 100%; - position: relative; -} - -img { - max-width: 100%; - - &.rounded { - @include border-radius(100%); - } -} diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss deleted file mode 100644 index 83f3e6b8b..000000000 --- a/webapp/sass/base/_typography.scss +++ /dev/null @@ -1,137 +0,0 @@ -@charset 'UTF-8'; - -b, -strong { - font-weight: 600; -} - -a { - color: $primary-color; - cursor: pointer; - text-decoration: none; - word-break: break-word; - - &:focus, - &:hover { - color: $primary-color--hover; - } -} - -body { - @include font-smoothing; - font-family: 'Open Sans', sans-serif; -} - -.light { - @include opacity(.6); -} - -.word-break--all { - word-break: break-all; -} - -.whitespace--nowrap { - white-space: nowrap; -} - -.overflow--ellipsis { - overflow: hidden; - text-overflow: ellipsis; -} - -.fa { - &.fa-margin--left { - margin-left: 3px; - } - - &.fa-margin--right { - margin-right: 3px; - } -} - -.font-weight--normal { - font-weight: normal; -} - -/* open-sans-300 - latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese */ -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 300; - src: url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300.eot'); /* IE9 Compat Modes */ - src: local('Open Sans Light'), local('OpenSans-Light'), - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300.woff') format('woff'), /* Modern Browsers */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300.svg#OpenSans') format('svg'); /* Legacy iOS */ -} -/* open-sans-300italic - latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese */ -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: 300; - src: url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300italic.eot'); /* IE9 Compat Modes */ - src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300italic.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300italic.woff') format('woff'), /* Modern Browsers */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */ -} -/* open-sans-regular - latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese */ -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - src: url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-regular.eot'); /* IE9 Compat Modes */ - src: local('Open Sans'), local('OpenSans'), - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-regular.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-regular.woff') format('woff'), /* Modern Browsers */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-regular.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-regular.svg#OpenSans') format('svg'); /* Legacy iOS */ -} -/* open-sans-italic - latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese */ -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: 400; - src: url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-italic.eot'); /* IE9 Compat Modes */ - src: local('Open Sans Italic'), local('OpenSans-Italic'), - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-italic.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-italic.woff') format('woff'), /* Modern Browsers */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-italic.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-italic.svg#OpenSans') format('svg'); /* Legacy iOS */ -} -/* open-sans-600 - latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese */ -@font-face { - font-family: 'Open Sans'; - font-style: normal; - font-weight: 600; - src: url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600.eot'); /* IE9 Compat Modes */ - src: local('Open Sans Semibold'), local('OpenSans-Semibold'), - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600.woff') format('woff'), /* Modern Browsers */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600.svg#OpenSans') format('svg'); /* Legacy iOS */ -} -/* open-sans-600italic - latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese */ -@font-face { - font-family: 'Open Sans'; - font-style: italic; - font-weight: 600; - src: url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600italic.eot'); /* IE9 Compat Modes */ - src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600italic.woff2') format('woff2'), /* Super Modern Browsers */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600italic.woff') format('woff'), /* Modern Browsers */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600italic.ttf') format('truetype'), /* Safari, Android, iOS */ - url('../fonts/open-sans-v13-latin-ext_latin_cyrillic-ext_greek-ext_greek_cyrillic_vietnamese-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */ -} - -.app__body.font--open_sans { - font-family: 'Open Sans', 'sans-serif'; -} diff --git a/webapp/sass/components/_alerts.scss b/webapp/sass/components/_alerts.scss deleted file mode 100644 index cb4c9c9e1..000000000 --- a/webapp/sass/components/_alerts.scss +++ /dev/null @@ -1,13 +0,0 @@ -@charset 'UTF-8'; - -.alert { - @include border-radius($border-rad); - padding: 8px 12px; -} - -.alert--confirm { - display: inline-block; - float: left; - margin: 1px 0 0 10px; - padding: 4px 10px; -} diff --git a/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss deleted file mode 100644 index c6086e866..000000000 --- a/webapp/sass/components/_buttons.scss +++ /dev/null @@ -1,55 +0,0 @@ -@charset 'UTF-8'; - -.btn { - @include single-transition(all, .15s, ease-in); - @include border-radius($border-rad); - - &.btn-primary { - background: $primary-color; - border-color: transparent; - - &:hover, - &:focus, - &:active { - background: $primary-color--hover; - } - } - - &.btn-default { - background: alpha-color($black, .7); - color: $white; - - &:hover, - &:focus, - &:active { - background: alpha-color($black, .8); - color: $white; - } - } - - &.btn-danger { - color: $white; - - .app__body & { - color: $white; - - &:hover, - &:focus, - &:active { - color: $white; - } - } - - &:hover, - &:focus, - &:active { - color: $white; - } - } - - &.btn-inactive { - background: $light-gray; - border-color: transparent; - color: $white; - } -} diff --git a/webapp/sass/components/_dropdown.scss b/webapp/sass/components/_dropdown.scss deleted file mode 100644 index bc128d6ef..000000000 --- a/webapp/sass/components/_dropdown.scss +++ /dev/null @@ -1,54 +0,0 @@ -@charset 'UTF-8'; - -.dropdown-menu { - border-radius: $border-rad; - - &.colorpicker { - min-width: 125px; - z-index: 2500; - } - - .fa { - @include opacity(.6); - margin-right: 5px; - } - - .divider { - @include opacity(.15); - - & + .divider { - display: none; - } - - &:last-child { - display: none; - } - } - - div, - li { - > a { - color: inherit; - text-decoration: none; - - &:focus, - &:hover { - color: inherit; - } - } - } -} - -.open { - > .dropdown-menu__content { - display: block; - - > .dropdown-menu { - display: block; - } - } -} - -.dropdown-menu__content { - display: none; -} diff --git a/webapp/sass/components/_emojisprite.scss b/webapp/sass/components/_emojisprite.scss deleted file mode 100644 index 569895ba0..000000000 --- a/webapp/sass/components/_emojisprite.scss +++ /dev/null @@ -1,1489 +0,0 @@ -@charset "UTF-8"; -.emojisprite-preview { - @include transform(scale(.55)); - background-repeat: no-repeat; - cursor: pointer; - height: 64px; - max-width: none; - transform-origin: 0 0; - width: 64px; - padding: 0 10px 0 0; -} -.emojisprite { - @include transform(scale(.35)); - background-repeat: no-repeat; - border-radius: 18px; - cursor: pointer; - height: 64px; - max-width: none; - transform-origin: 0 0; - width: 64px; -} -.emojisprite-loading { - background-image: none !important; - @include transform(scale(.35)); - background-repeat: no-repeat; - border-radius: 18px; - cursor: pointer; - height: 64px; - max-width: none; - transform-origin: 0 0; - width: 64px; -} -.emoji-category-people { background-image: url('../images/emoji-sheets/people.png'); } -.emoji-1f302 { background-position: -0px -0px; } -.emoji-1f383 { background-position: -64px -0px; } -.emoji-1f385 { background-position: -0px -64px; } -.emoji-1f392 { background-position: -64px -64px; } -.emoji-1f393 { background-position: -128px -0px; } -.emoji-1f3a9 { background-position: -128px -64px; } -.emoji-1f3c3 { background-position: -0px -128px; } -.emoji-1f3c3-200d-2640-fe0f { background-position: -64px -128px; } -.emoji-1f440 { background-position: -128px -128px; } -.emoji-1f441 { background-position: -192px -0px; } -.emoji-1f442 { background-position: -192px -64px; } -.emoji-1f443 { background-position: -192px -128px; } -.emoji-1f444 { background-position: -0px -192px; } -.emoji-1f445 { background-position: -64px -192px; } -.emoji-1f446 { background-position: -128px -192px; } -.emoji-1f447 { background-position: -192px -192px; } -.emoji-1f448 { background-position: -256px -0px; } -.emoji-1f449 { background-position: -256px -64px; } -.emoji-1f44a { background-position: -256px -128px; } -.emoji-1f44b { background-position: -256px -192px; } -.emoji-1f44c { background-position: -0px -256px; } -.emoji-1f44d { background-position: -64px -256px; } -.emoji-1f44e { background-position: -128px -256px; } -.emoji-1f44f { background-position: -192px -256px; } -.emoji-1f450 { background-position: -256px -256px; } -.emoji-1f451 { background-position: -320px -0px; } -.emoji-1f452 { background-position: -320px -64px; } -.emoji-1f453 { background-position: -320px -128px; } -.emoji-1f454 { background-position: -320px -192px; } -.emoji-1f455 { background-position: -320px -256px; } -.emoji-1f456 { background-position: -0px -320px; } -.emoji-1f457 { background-position: -64px -320px; } -.emoji-1f458 { background-position: -128px -320px; } -.emoji-1f459 { background-position: -192px -320px; } -.emoji-1f45a { background-position: -256px -320px; } -.emoji-1f45b { background-position: -320px -320px; } -.emoji-1f45c { background-position: -384px -0px; } -.emoji-1f45d { background-position: -384px -64px; } -.emoji-1f45e { background-position: -384px -128px; } -.emoji-1f45f { background-position: -384px -192px; } -.emoji-1f460 { background-position: -384px -256px; } -.emoji-1f461 { background-position: -384px -320px; } -.emoji-1f462 { background-position: -0px -384px; } -.emoji-1f463 { background-position: -64px -384px; } -.emoji-1f464 { background-position: -128px -384px; } -.emoji-1f465 { background-position: -192px -384px; } -.emoji-1f466 { background-position: -256px -384px; } -.emoji-1f467 { background-position: -320px -384px; } -.emoji-1f468 { background-position: -384px -384px; } -.emoji-1f468-200d-1f33e { background-position: -448px -0px; } -.emoji-1f468-200d-1f373 { background-position: -448px -64px; } -.emoji-1f468-200d-1f393 { background-position: -448px -128px; } -.emoji-1f468-200d-1f3a4 { background-position: -448px -192px; } -.emoji-1f468-200d-1f3a8 { background-position: -448px -256px; } -.emoji-1f468-200d-1f3eb { background-position: -448px -320px; } -.emoji-1f468-200d-1f3ed { background-position: -448px -384px; } -.emoji-1f468-200d-1f466 { background-position: -0px -448px; } -.emoji-1f468-200d-1f466-200d-1f466 { background-position: -64px -448px; } -.emoji-1f468-200d-1f467 { background-position: -128px -448px; } -.emoji-1f468-200d-1f467-200d-1f466 { background-position: -192px -448px; } -.emoji-1f468-200d-1f467-200d-1f467 { background-position: -256px -448px; } -.emoji-1f468-200d-1f468-200d-1f466 { background-position: -320px -448px; } -.emoji-1f468-200d-1f468-200d-1f466-200d-1f466 { background-position: -384px -448px; } -.emoji-1f468-200d-1f468-200d-1f467 { background-position: -448px -448px; } -.emoji-1f468-200d-1f468-200d-1f467-200d-1f466 { background-position: -512px -0px; } -.emoji-1f468-200d-1f468-200d-1f467-200d-1f467 { background-position: -512px -64px; } -.emoji-1f468-200d-1f469-200d-1f466-200d-1f466 { background-position: -512px -128px; } -.emoji-1f468-200d-1f469-200d-1f467 { background-position: -512px -192px; } -.emoji-1f468-200d-1f469-200d-1f467-200d-1f466 { background-position: -512px -256px; } -.emoji-1f468-200d-1f469-200d-1f467-200d-1f467 { background-position: -512px -320px; } -.emoji-1f468-200d-1f4bb { background-position: -512px -384px; } -.emoji-1f468-200d-1f4bc { background-position: -512px -448px; } -.emoji-1f468-200d-1f527 { background-position: -0px -512px; } -.emoji-1f468-200d-1f52c { background-position: -64px -512px; } -.emoji-1f468-200d-1f680 { background-position: -128px -512px; } -.emoji-1f468-200d-1f692 { background-position: -192px -512px; } -.emoji-1f468-200d-2695-fe0f { background-position: -256px -512px; } -.emoji-1f468-200d-2696-fe0f { background-position: -320px -512px; } -.emoji-1f468-200d-2708-fe0f { background-position: -384px -512px; } -.emoji-1f468-200d-2764-fe0f-200d-1f468 { background-position: -448px -512px; } -.emoji-1f468-200d-2764-fe0f-200d-1f48b-200d-1f468 { background-position: -512px -512px; } -.emoji-1f469 { background-position: -576px -0px; } -.emoji-1f469-200d-1f33e { background-position: -576px -64px; } -.emoji-1f469-200d-1f373 { background-position: -576px -128px; } -.emoji-1f469-200d-1f393 { background-position: -576px -192px; } -.emoji-1f469-200d-1f3a4 { background-position: -576px -256px; } -.emoji-1f469-200d-1f3a8 { background-position: -576px -320px; } -.emoji-1f469-200d-1f3eb { background-position: -576px -384px; } -.emoji-1f469-200d-1f3ed { background-position: -576px -448px; } -.emoji-1f469-200d-1f466 { background-position: -576px -512px; } -.emoji-1f469-200d-1f466-200d-1f466 { background-position: -0px -576px; } -.emoji-1f469-200d-1f467 { background-position: -64px -576px; } -.emoji-1f469-200d-1f467-200d-1f466 { background-position: -128px -576px; } -.emoji-1f469-200d-1f467-200d-1f467 { background-position: -192px -576px; } -.emoji-1f469-200d-1f469-200d-1f466 { background-position: -256px -576px; } -.emoji-1f469-200d-1f469-200d-1f466-200d-1f466 { background-position: -320px -576px; } -.emoji-1f469-200d-1f469-200d-1f467 { background-position: -384px -576px; } -.emoji-1f469-200d-1f469-200d-1f467-200d-1f466 { background-position: -448px -576px; } -.emoji-1f469-200d-1f469-200d-1f467-200d-1f467 { background-position: -512px -576px; } -.emoji-1f469-200d-1f4bb { background-position: -576px -576px; } -.emoji-1f469-200d-1f4bc { background-position: -640px -0px; } -.emoji-1f469-200d-1f527 { background-position: -640px -64px; } -.emoji-1f469-200d-1f52c { background-position: -640px -128px; } -.emoji-1f469-200d-1f680 { background-position: -640px -192px; } -.emoji-1f469-200d-1f692 { background-position: -640px -256px; } -.emoji-1f469-200d-2695-fe0f { background-position: -640px -320px; } -.emoji-1f469-200d-2696-fe0f { background-position: -640px -384px; } -.emoji-1f469-200d-2708-fe0f { background-position: -640px -448px; } -.emoji-1f469-200d-2764-fe0f-200d-1f469 { background-position: -640px -512px; } -.emoji-1f469-200d-2764-fe0f-200d-1f48b-200d-1f469 { background-position: -640px -576px; } -.emoji-1f46a { background-position: -0px -640px; } -.emoji-1f46b { background-position: -64px -640px; } -.emoji-1f46c { background-position: -128px -640px; } -.emoji-1f46d { background-position: -192px -640px; } -.emoji-1f46e { background-position: -256px -640px; } -.emoji-1f46e-200d-2640-fe0f { background-position: -320px -640px; } -.emoji-1f46f { background-position: -384px -640px; } -.emoji-1f46f-200d-2642-fe0f { background-position: -448px -640px; } -.emoji-1f470 { background-position: -512px -640px; } -.emoji-1f471 { background-position: -576px -640px; } -.emoji-1f471-200d-2640-fe0f { background-position: -640px -640px; } -.emoji-1f472 { background-position: -704px -0px; } -.emoji-1f473 { background-position: -704px -64px; } -.emoji-1f473-200d-2640-fe0f { background-position: -704px -128px; } -.emoji-1f474 { background-position: -704px -192px; } -.emoji-1f475 { background-position: -704px -256px; } -.emoji-1f476 { background-position: -704px -320px; } -.emoji-1f477 { background-position: -704px -384px; } -.emoji-1f477-200d-2640-fe0f { background-position: -704px -448px; } -.emoji-1f478 { background-position: -704px -512px; } -.emoji-1f479 { background-position: -704px -576px; } -.emoji-1f47a { background-position: -704px -640px; } -.emoji-1f47b { background-position: -0px -704px; } -.emoji-1f47c { background-position: -64px -704px; } -.emoji-1f47d { background-position: -128px -704px; } -.emoji-1f47e { background-position: -192px -704px; } -.emoji-1f47f { background-position: -256px -704px; } -.emoji-1f480 { background-position: -320px -704px; } -.emoji-1f481 { background-position: -384px -704px; } -.emoji-1f481-200d-2642-fe0f { background-position: -448px -704px; } -.emoji-1f482 { background-position: -512px -704px; } -.emoji-1f482-200d-2640-fe0f { background-position: -576px -704px; } -.emoji-1f483 { background-position: -640px -704px; } -.emoji-1f484 { background-position: -704px -704px; } -.emoji-1f485 { background-position: -768px -0px; } -.emoji-1f486 { background-position: -768px -64px; } -.emoji-1f486-200d-2642-fe0f { background-position: -768px -128px; } -.emoji-1f487 { background-position: -768px -192px; } -.emoji-1f487-200d-2642-fe0f { background-position: -768px -256px; } -.emoji-1f48b { background-position: -768px -320px; } -.emoji-1f48d { background-position: -768px -384px; } -.emoji-1f48f { background-position: -768px -448px; } -.emoji-1f491 { background-position: -768px -512px; } -.emoji-1f4a9 { background-position: -768px -576px; } -.emoji-1f4aa { background-position: -768px -640px; } -.emoji-1f4bc { background-position: -768px -704px; } -.emoji-1f574 { background-position: -0px -768px; } -.emoji-1f575-fe0f { background-position: -64px -768px; } -.emoji-1f575-fe0f-200d-2640-fe0f { background-position: -128px -768px; } -.emoji-1f576 { background-position: -192px -768px; } -.emoji-1f57a { background-position: -256px -768px; } -.emoji-1f590 { background-position: -320px -768px; } -.emoji-1f595 { background-position: -384px -768px; } -.emoji-1f596 { background-position: -448px -768px; } -.emoji-1f5e3 { background-position: -512px -768px; } -.emoji-1f600 { background-position: -576px -768px; } -.emoji-1f601 { background-position: -640px -768px; } -.emoji-1f602 { background-position: -704px -768px; } -.emoji-1f603 { background-position: -768px -768px; } -.emoji-1f604 { background-position: -832px -0px; } -.emoji-1f605 { background-position: -832px -64px; } -.emoji-1f606 { background-position: -832px -128px; } -.emoji-1f607 { background-position: -832px -192px; } -.emoji-1f608 { background-position: -832px -256px; } -.emoji-1f609 { background-position: -832px -320px; } -.emoji-1f60a { background-position: -832px -384px; } -.emoji-1f60b { background-position: -832px -448px; } -.emoji-1f60c { background-position: -832px -512px; } -.emoji-1f60d { background-position: -832px -576px; } -.emoji-1f60e { background-position: -832px -640px; } -.emoji-1f60f { background-position: -832px -704px; } -.emoji-1f610 { background-position: -832px -768px; } -.emoji-1f611 { background-position: -0px -832px; } -.emoji-1f612 { background-position: -64px -832px; } -.emoji-1f613 { background-position: -128px -832px; } -.emoji-1f614 { background-position: -192px -832px; } -.emoji-1f615 { background-position: -256px -832px; } -.emoji-1f616 { background-position: -320px -832px; } -.emoji-1f617 { background-position: -384px -832px; } -.emoji-1f618 { background-position: -448px -832px; } -.emoji-1f619 { background-position: -512px -832px; } -.emoji-1f61a { background-position: -576px -832px; } -.emoji-1f61b { background-position: -640px -832px; } -.emoji-1f61c { background-position: -704px -832px; } -.emoji-1f61d { background-position: -768px -832px; } -.emoji-1f61e { background-position: -832px -832px; } -.emoji-1f61f { background-position: -896px -0px; } -.emoji-1f620 { background-position: -896px -64px; } -.emoji-1f621 { background-position: -896px -128px; } -.emoji-1f622 { background-position: -896px -192px; } -.emoji-1f623 { background-position: -896px -256px; } -.emoji-1f624 { background-position: -896px -320px; } -.emoji-1f625 { background-position: -896px -384px; } -.emoji-1f626 { background-position: -896px -448px; } -.emoji-1f627 { background-position: -896px -512px; } -.emoji-1f628 { background-position: -896px -576px; } -.emoji-1f629 { background-position: -896px -640px; } -.emoji-1f62a { background-position: -896px -704px; } -.emoji-1f62b { background-position: -896px -768px; } -.emoji-1f62c { background-position: -896px -832px; } -.emoji-1f62d { background-position: -0px -896px; } -.emoji-1f62e { background-position: -64px -896px; } -.emoji-1f62f { background-position: -128px -896px; } -.emoji-1f630 { background-position: -192px -896px; } -.emoji-1f631 { background-position: -256px -896px; } -.emoji-1f632 { background-position: -320px -896px; } -.emoji-1f633 { background-position: -384px -896px; } -.emoji-1f634 { background-position: -448px -896px; } -.emoji-1f635 { background-position: -512px -896px; } -.emoji-1f636 { background-position: -576px -896px; } -.emoji-1f637 { background-position: -640px -896px; } -.emoji-1f638 { background-position: -704px -896px; } -.emoji-1f639 { background-position: -768px -896px; } -.emoji-1f63a { background-position: -832px -896px; } -.emoji-1f63b { background-position: -896px -896px; } -.emoji-1f63c { background-position: -960px -0px; } -.emoji-1f63d { background-position: -960px -64px; } -.emoji-1f63e { background-position: -960px -128px; } -.emoji-1f63f { background-position: -960px -192px; } -.emoji-1f640 { background-position: -960px -256px; } -.emoji-1f641 { background-position: -960px -320px; } -.emoji-1f642 { background-position: -960px -384px; } -.emoji-1f643 { background-position: -960px -448px; } -.emoji-1f644 { background-position: -960px -512px; } -.emoji-1f645 { background-position: -960px -576px; } -.emoji-1f645-200d-2642-fe0f { background-position: -960px -640px; } -.emoji-1f646 { background-position: -960px -704px; } -.emoji-1f646-200d-2642-fe0f { background-position: -960px -768px; } -.emoji-1f647 { background-position: -960px -832px; } -.emoji-1f647-200d-2640-fe0f { background-position: -960px -896px; } -.emoji-1f64b { background-position: -0px -960px; } -.emoji-1f64b-200d-2642-fe0f { background-position: -64px -960px; } -.emoji-1f64c { background-position: -128px -960px; } -.emoji-1f64d { background-position: -192px -960px; } -.emoji-1f64d-200d-2642-fe0f { background-position: -256px -960px; } -.emoji-1f64e { background-position: -320px -960px; } -.emoji-1f64e-200d-2642-fe0f { background-position: -384px -960px; } -.emoji-1f64f { background-position: -448px -960px; } -.emoji-1f6b6 { background-position: -512px -960px; } -.emoji-1f6b6-200d-2640-fe0f { background-position: -576px -960px; } -.emoji-1f910 { background-position: -640px -960px; } -.emoji-1f911 { background-position: -704px -960px; } -.emoji-1f912 { background-position: -768px -960px; } -.emoji-1f913 { background-position: -832px -960px; } -.emoji-1f914 { background-position: -896px -960px; } -.emoji-1f915 { background-position: -960px -960px; } -.emoji-1f916 { background-position: -1024px -0px; } -.emoji-1f917 { background-position: -1024px -64px; } -.emoji-1f918 { background-position: -1024px -128px; } -.emoji-1f919 { background-position: -1024px -192px; } -.emoji-1f91a { background-position: -1024px -256px; } -.emoji-1f91b { background-position: -1024px -320px; } -.emoji-1f91c { background-position: -1024px -384px; } -.emoji-1f91d { background-position: -1024px -448px; } -.emoji-1f91e { background-position: -1024px -512px; } -.emoji-1f920 { background-position: -1024px -576px; } -.emoji-1f921 { background-position: -1024px -640px; } -.emoji-1f922 { background-position: -1024px -704px; } -.emoji-1f923 { background-position: -1024px -768px; } -.emoji-1f924 { background-position: -1024px -832px; } -.emoji-1f925 { background-position: -1024px -896px; } -.emoji-1f926-200d-2640-fe0f { background-position: -1024px -960px; } -.emoji-1f926-200d-2642-fe0f { background-position: -0px -1024px; } -.emoji-1f927 { background-position: -64px -1024px; } -.emoji-1f930 { background-position: -128px -1024px; } -.emoji-1f933 { background-position: -192px -1024px; } -.emoji-1f934 { background-position: -256px -1024px; } -.emoji-1f935 { background-position: -320px -1024px; } -.emoji-1f936 { background-position: -384px -1024px; } -.emoji-1f937-200d-2640-fe0f { background-position: -448px -1024px; } -.emoji-1f937-200d-2642-fe0f { background-position: -512px -1024px; } -.emoji-2602-fe0f { background-position: -576px -1024px; } -.emoji-261d-fe0f { background-position: -640px -1024px; } -.emoji-2620-fe0f { background-position: -704px -1024px; } -.emoji-2639-fe0f { background-position: -768px -1024px; } -.emoji-263a-fe0f { background-position: -832px -1024px; } -.emoji-26d1 { background-position: -896px -1024px; } -.emoji-270a { background-position: -960px -1024px; } -.emoji-270b { background-position: -1024px -1024px; } -.emoji-270c-fe0f { background-position: -1088px -0px; } -.emoji-270d-fe0f { background-position: -1088px -64px; } -.emoji-category-nature { background-image: url('../images/emoji-sheets/nature.png'); } -.emoji-1f308 { background-position: -0px -0px; } -.emoji-1f30a { background-position: -64px -0px; } -.emoji-1f30d { background-position: -0px -64px; } -.emoji-1f30e { background-position: -64px -64px; } -.emoji-1f30f { background-position: -128px -0px; } -.emoji-1f311 { background-position: -128px -64px; } -.emoji-1f312 { background-position: -0px -128px; } -.emoji-1f313 { background-position: -64px -128px; } -.emoji-1f314 { background-position: -128px -128px; } -.emoji-1f315 { background-position: -192px -0px; } -.emoji-1f316 { background-position: -192px -64px; } -.emoji-1f317 { background-position: -192px -128px; } -.emoji-1f318 { background-position: -0px -192px; } -.emoji-1f319 { background-position: -64px -192px; } -.emoji-1f31a { background-position: -128px -192px; } -.emoji-1f31b { background-position: -192px -192px; } -.emoji-1f31c { background-position: -256px -0px; } -.emoji-1f31d { background-position: -256px -64px; } -.emoji-1f31e { background-position: -256px -128px; } -.emoji-1f31f { background-position: -256px -192px; } -.emoji-1f324 { background-position: -0px -256px; } -.emoji-1f325 { background-position: -64px -256px; } -.emoji-1f326 { background-position: -128px -256px; } -.emoji-1f327 { background-position: -192px -256px; } -.emoji-1f328 { background-position: -256px -256px; } -.emoji-1f329 { background-position: -320px -0px; } -.emoji-1f32a { background-position: -320px -64px; } -.emoji-1f32b { background-position: -320px -128px; } -.emoji-1f32c { background-position: -320px -192px; } -.emoji-1f331 { background-position: -320px -256px; } -.emoji-1f332 { background-position: -0px -320px; } -.emoji-1f333 { background-position: -64px -320px; } -.emoji-1f334 { background-position: -128px -320px; } -.emoji-1f335 { background-position: -192px -320px; } -.emoji-1f337 { background-position: -256px -320px; } -.emoji-1f338 { background-position: -320px -320px; } -.emoji-1f339 { background-position: -384px -0px; } -.emoji-1f33a { background-position: -384px -64px; } -.emoji-1f33b { background-position: -384px -128px; } -.emoji-1f33c { background-position: -384px -192px; } -.emoji-1f33e { background-position: -384px -256px; } -.emoji-1f33f { background-position: -384px -320px; } -.emoji-1f340 { background-position: -0px -384px; } -.emoji-1f341 { background-position: -64px -384px; } -.emoji-1f342 { background-position: -128px -384px; } -.emoji-1f343 { background-position: -192px -384px; } -.emoji-1f344 { background-position: -256px -384px; } -.emoji-1f384 { background-position: -320px -384px; } -.emoji-1f38b { background-position: -384px -384px; } -.emoji-1f38d { background-position: -448px -0px; } -.emoji-1f400 { background-position: -448px -64px; } -.emoji-1f401 { background-position: -448px -128px; } -.emoji-1f402 { background-position: -448px -192px; } -.emoji-1f403 { background-position: -448px -256px; } -.emoji-1f404 { background-position: -448px -320px; } -.emoji-1f405 { background-position: -448px -384px; } -.emoji-1f406 { background-position: -0px -448px; } -.emoji-1f407 { background-position: -64px -448px; } -.emoji-1f408 { background-position: -128px -448px; } -.emoji-1f409 { background-position: -192px -448px; } -.emoji-1f40a { background-position: -256px -448px; } -.emoji-1f40b { background-position: -320px -448px; } -.emoji-1f40c { background-position: -384px -448px; } -.emoji-1f40d { background-position: -448px -448px; } -.emoji-1f40e { background-position: -512px -0px; } -.emoji-1f40f { background-position: -512px -64px; } -.emoji-1f410 { background-position: -512px -128px; } -.emoji-1f411 { background-position: -512px -192px; } -.emoji-1f412 { background-position: -512px -256px; } -.emoji-1f413 { background-position: -512px -320px; } -.emoji-1f414 { background-position: -512px -384px; } -.emoji-1f415 { background-position: -512px -448px; } -.emoji-1f416 { background-position: -0px -512px; } -.emoji-1f417 { background-position: -64px -512px; } -.emoji-1f418 { background-position: -128px -512px; } -.emoji-1f419 { background-position: -192px -512px; } -.emoji-1f41a { background-position: -256px -512px; } -.emoji-1f41b { background-position: -320px -512px; } -.emoji-1f41c { background-position: -384px -512px; } -.emoji-1f41d { background-position: -448px -512px; } -.emoji-1f41e { background-position: -512px -512px; } -.emoji-1f41f { background-position: -576px -0px; } -.emoji-1f420 { background-position: -576px -64px; } -.emoji-1f421 { background-position: -576px -128px; } -.emoji-1f422 { background-position: -576px -192px; } -.emoji-1f423 { background-position: -576px -256px; } -.emoji-1f424 { background-position: -576px -320px; } -.emoji-1f425 { background-position: -576px -384px; } -.emoji-1f426 { background-position: -576px -448px; } -.emoji-1f427 { background-position: -576px -512px; } -.emoji-1f428 { background-position: -0px -576px; } -.emoji-1f429 { background-position: -64px -576px; } -.emoji-1f42a { background-position: -128px -576px; } -.emoji-1f42b { background-position: -192px -576px; } -.emoji-1f42c { background-position: -256px -576px; } -.emoji-1f42d { background-position: -320px -576px; } -.emoji-1f42e { background-position: -384px -576px; } -.emoji-1f42f { background-position: -448px -576px; } -.emoji-1f430 { background-position: -512px -576px; } -.emoji-1f431 { background-position: -576px -576px; } -.emoji-1f432 { background-position: -640px -0px; } -.emoji-1f433 { background-position: -640px -64px; } -.emoji-1f434 { background-position: -640px -128px; } -.emoji-1f435 { background-position: -640px -192px; } -.emoji-1f436 { background-position: -640px -256px; } -.emoji-1f437 { background-position: -640px -320px; } -.emoji-1f438 { background-position: -640px -384px; } -.emoji-1f439 { background-position: -640px -448px; } -.emoji-1f43a { background-position: -640px -512px; } -.emoji-1f43b { background-position: -640px -576px; } -.emoji-1f43c { background-position: -0px -640px; } -.emoji-1f43d { background-position: -64px -640px; } -.emoji-1f43e { background-position: -128px -640px; } -.emoji-1f43f { background-position: -192px -640px; } -.emoji-1f490 { background-position: -256px -640px; } -.emoji-1f4a5 { background-position: -320px -640px; } -.emoji-1f4a6 { background-position: -384px -640px; } -.emoji-1f4a7 { background-position: -448px -640px; } -.emoji-1f4a8 { background-position: -512px -640px; } -.emoji-1f4ab { background-position: -576px -640px; } -.emoji-1f525 { background-position: -640px -640px; } -.emoji-1f54a { background-position: -704px -0px; } -.emoji-1f577 { background-position: -704px -64px; } -.emoji-1f578 { background-position: -704px -128px; } -.emoji-1f648 { background-position: -704px -192px; } -.emoji-1f649 { background-position: -704px -256px; } -.emoji-1f64a { background-position: -704px -320px; } -.emoji-1f940 { background-position: -704px -384px; } -.emoji-1f980 { background-position: -704px -448px; } -.emoji-1f981 { background-position: -704px -512px; } -.emoji-1f982 { background-position: -704px -576px; } -.emoji-1f983 { background-position: -704px -640px; } -.emoji-1f984 { background-position: -0px -704px; } -.emoji-1f985 { background-position: -64px -704px; } -.emoji-1f986 { background-position: -128px -704px; } -.emoji-1f987 { background-position: -192px -704px; } -.emoji-1f988 { background-position: -256px -704px; } -.emoji-1f989 { background-position: -320px -704px; } -.emoji-1f98a { background-position: -384px -704px; } -.emoji-1f98b { background-position: -448px -704px; } -.emoji-1f98c { background-position: -512px -704px; } -.emoji-1f98d { background-position: -576px -704px; } -.emoji-1f98e { background-position: -640px -704px; } -.emoji-1f98f { background-position: -704px -704px; } -.emoji-1f990 { background-position: -768px -0px; } -.emoji-1f991 { background-position: -768px -64px; } -.emoji-2600-fe0f { background-position: -768px -128px; } -.emoji-2601-fe0f { background-position: -768px -192px; } -.emoji-2603-fe0f { background-position: -768px -256px; } -.emoji-2604-fe0f { background-position: -768px -320px; } -.emoji-2614-fe0f { background-position: -768px -384px; } -.emoji-2618-fe0f { background-position: -768px -448px; } -.emoji-26a1-fe0f { background-position: -768px -512px; } -.emoji-26c4-fe0f { background-position: -768px -576px; } -.emoji-26c5-fe0f { background-position: -768px -640px; } -.emoji-26c8 { background-position: -768px -704px; } -.emoji-2728 { background-position: -0px -768px; } -.emoji-2744-fe0f { background-position: -64px -768px; } -.emoji-2b50-fe0f { background-position: -128px -768px; } -.emoji-category-foods { background-image: url('../images/emoji-sheets/foods.png'); } -.emoji-1f32d { background-position: -0px -0px; } -.emoji-1f32e { background-position: -64px -0px; } -.emoji-1f32f { background-position: -0px -64px; } -.emoji-1f330 { background-position: -64px -64px; } -.emoji-1f336 { background-position: -128px -0px; } -.emoji-1f33d { background-position: -128px -64px; } -.emoji-1f345 { background-position: -0px -128px; } -.emoji-1f346 { background-position: -64px -128px; } -.emoji-1f347 { background-position: -128px -128px; } -.emoji-1f348 { background-position: -192px -0px; } -.emoji-1f349 { background-position: -192px -64px; } -.emoji-1f34a { background-position: -192px -128px; } -.emoji-1f34b { background-position: -0px -192px; } -.emoji-1f34c { background-position: -64px -192px; } -.emoji-1f34d { background-position: -128px -192px; } -.emoji-1f34e { background-position: -192px -192px; } -.emoji-1f34f { background-position: -256px -0px; } -.emoji-1f350 { background-position: -256px -64px; } -.emoji-1f351 { background-position: -256px -128px; } -.emoji-1f352 { background-position: -256px -192px; } -.emoji-1f353 { background-position: -0px -256px; } -.emoji-1f354 { background-position: -64px -256px; } -.emoji-1f355 { background-position: -128px -256px; } -.emoji-1f356 { background-position: -192px -256px; } -.emoji-1f357 { background-position: -256px -256px; } -.emoji-1f358 { background-position: -320px -0px; } -.emoji-1f359 { background-position: -320px -64px; } -.emoji-1f35a { background-position: -320px -128px; } -.emoji-1f35b { background-position: -320px -192px; } -.emoji-1f35c { background-position: -320px -256px; } -.emoji-1f35d { background-position: -0px -320px; } -.emoji-1f35e { background-position: -64px -320px; } -.emoji-1f35f { background-position: -128px -320px; } -.emoji-1f360 { background-position: -192px -320px; } -.emoji-1f361 { background-position: -256px -320px; } -.emoji-1f362 { background-position: -320px -320px; } -.emoji-1f363 { background-position: -384px -0px; } -.emoji-1f364 { background-position: -384px -64px; } -.emoji-1f365 { background-position: -384px -128px; } -.emoji-1f366 { background-position: -384px -192px; } -.emoji-1f367 { background-position: -384px -256px; } -.emoji-1f368 { background-position: -384px -320px; } -.emoji-1f369 { background-position: -0px -384px; } -.emoji-1f36a { background-position: -64px -384px; } -.emoji-1f36b { background-position: -128px -384px; } -.emoji-1f36c { background-position: -192px -384px; } -.emoji-1f36d { background-position: -256px -384px; } -.emoji-1f36e { background-position: -320px -384px; } -.emoji-1f36f { background-position: -384px -384px; } -.emoji-1f370 { background-position: -448px -0px; } -.emoji-1f371 { background-position: -448px -64px; } -.emoji-1f372 { background-position: -448px -128px; } -.emoji-1f373 { background-position: -448px -192px; } -.emoji-1f374 { background-position: -448px -256px; } -.emoji-1f375 { background-position: -448px -320px; } -.emoji-1f376 { background-position: -448px -384px; } -.emoji-1f377 { background-position: -0px -448px; } -.emoji-1f378 { background-position: -64px -448px; } -.emoji-1f379 { background-position: -128px -448px; } -.emoji-1f37a { background-position: -192px -448px; } -.emoji-1f37b { background-position: -256px -448px; } -.emoji-1f37c { background-position: -320px -448px; } -.emoji-1f37d { background-position: -384px -448px; } -.emoji-1f37e { background-position: -448px -448px; } -.emoji-1f37f { background-position: -512px -0px; } -.emoji-1f382 { background-position: -512px -64px; } -.emoji-1f942 { background-position: -512px -128px; } -.emoji-1f943 { background-position: -512px -192px; } -.emoji-1f944 { background-position: -512px -256px; } -.emoji-1f950 { background-position: -512px -320px; } -.emoji-1f951 { background-position: -512px -384px; } -.emoji-1f952 { background-position: -512px -448px; } -.emoji-1f953 { background-position: -0px -512px; } -.emoji-1f954 { background-position: -64px -512px; } -.emoji-1f955 { background-position: -128px -512px; } -.emoji-1f956 { background-position: -192px -512px; } -.emoji-1f957 { background-position: -256px -512px; } -.emoji-1f958 { background-position: -320px -512px; } -.emoji-1f959 { background-position: -384px -512px; } -.emoji-1f95a { background-position: -448px -512px; } -.emoji-1f95b { background-position: -512px -512px; } -.emoji-1f95c { background-position: -576px -0px; } -.emoji-1f95d { background-position: -576px -64px; } -.emoji-1f95e { background-position: -576px -128px; } -.emoji-1f9c0 { background-position: -576px -192px; } -.emoji-2615-fe0f { background-position: -576px -256px; } -.emoji-category-activity { background-image: url('../images/emoji-sheets/activity.png'); } -.emoji-1f396 { background-position: -0px -0px; } -.emoji-1f397 { background-position: -64px -0px; } -.emoji-1f39f { background-position: -0px -64px; } -.emoji-1f3a3 { background-position: -64px -64px; } -.emoji-1f3a4 { background-position: -128px -0px; } -.emoji-1f3a7 { background-position: -128px -64px; } -.emoji-1f3a8 { background-position: -0px -128px; } -.emoji-1f3aa { background-position: -64px -128px; } -.emoji-1f3ab { background-position: -128px -128px; } -.emoji-1f3ac { background-position: -192px -0px; } -.emoji-1f3ad { background-position: -192px -64px; } -.emoji-1f3ae { background-position: -192px -128px; } -.emoji-1f3af { background-position: -0px -192px; } -.emoji-1f3b0 { background-position: -64px -192px; } -.emoji-1f3b1 { background-position: -128px -192px; } -.emoji-1f3b2 { background-position: -192px -192px; } -.emoji-1f3b3 { background-position: -256px -0px; } -.emoji-1f3b7 { background-position: -256px -64px; } -.emoji-1f3b8 { background-position: -256px -128px; } -.emoji-1f3b9 { background-position: -256px -192px; } -.emoji-1f3ba { background-position: -0px -256px; } -.emoji-1f3bb { background-position: -64px -256px; } -.emoji-1f3bc { background-position: -128px -256px; } -.emoji-1f3bd { background-position: -192px -256px; } -.emoji-1f3be { background-position: -256px -256px; } -.emoji-1f3bf { background-position: -320px -0px; } -.emoji-1f3c0 { background-position: -320px -64px; } -.emoji-1f3c2 { background-position: -320px -128px; } -.emoji-1f3c4 { background-position: -320px -192px; } -.emoji-1f3c4-200d-2640-fe0f { background-position: -320px -256px; } -.emoji-1f3c5 { background-position: -0px -320px; } -.emoji-1f3c6 { background-position: -64px -320px; } -.emoji-1f3c7 { background-position: -128px -320px; } -.emoji-1f3c8 { background-position: -192px -320px; } -.emoji-1f3c9 { background-position: -256px -320px; } -.emoji-1f3ca { background-position: -320px -320px; } -.emoji-1f3ca-200d-2640-fe0f { background-position: -384px -0px; } -.emoji-1f3cb-fe0f { background-position: -384px -64px; } -.emoji-1f3cb-fe0f-200d-2640-fe0f { background-position: -384px -128px; } -.emoji-1f3cc-fe0f { background-position: -384px -192px; } -.emoji-1f3cc-fe0f-200d-2640-fe0f { background-position: -384px -256px; } -.emoji-1f3cf { background-position: -384px -320px; } -.emoji-1f3d0 { background-position: -0px -384px; } -.emoji-1f3d1 { background-position: -64px -384px; } -.emoji-1f3d2 { background-position: -128px -384px; } -.emoji-1f3d3 { background-position: -192px -384px; } -.emoji-1f3f5 { background-position: -256px -384px; } -.emoji-1f3f8 { background-position: -320px -384px; } -.emoji-1f3f9 { background-position: -384px -384px; } -.emoji-1f6a3 { background-position: -448px -0px; } -.emoji-1f6a3-200d-2640-fe0f { background-position: -448px -64px; } -.emoji-1f6b4 { background-position: -448px -128px; } -.emoji-1f6b4-200d-2640-fe0f { background-position: -448px -192px; } -.emoji-1f6b5 { background-position: -448px -256px; } -.emoji-1f6b5-200d-2640-fe0f { background-position: -448px -320px; } -.emoji-1f938-200d-2640-fe0f { background-position: -448px -384px; } -.emoji-1f938-200d-2642-fe0f { background-position: -0px -448px; } -.emoji-1f939-200d-2640-fe0f { background-position: -64px -448px; } -.emoji-1f939-200d-2642-fe0f { background-position: -128px -448px; } -.emoji-1f93a { background-position: -192px -448px; } -.emoji-1f93c-200d-2640-fe0f { background-position: -256px -448px; } -.emoji-1f93c-200d-2642-fe0f { background-position: -320px -448px; } -.emoji-1f93d-200d-2640-fe0f { background-position: -384px -448px; } -.emoji-1f93d-200d-2642-fe0f { background-position: -448px -448px; } -.emoji-1f93e-200d-2640-fe0f { background-position: -512px -0px; } -.emoji-1f93e-200d-2642-fe0f { background-position: -512px -64px; } -.emoji-1f941 { background-position: -512px -128px; } -.emoji-1f945 { background-position: -512px -192px; } -.emoji-1f947 { background-position: -512px -256px; } -.emoji-1f948 { background-position: -512px -320px; } -.emoji-1f949 { background-position: -512px -384px; } -.emoji-1f94a { background-position: -512px -448px; } -.emoji-1f94b { background-position: -0px -512px; } -.emoji-26bd-fe0f { background-position: -64px -512px; } -.emoji-26be-fe0f { background-position: -128px -512px; } -.emoji-26f3-fe0f { background-position: -192px -512px; } -.emoji-26f7 { background-position: -256px -512px; } -.emoji-26f8 { background-position: -320px -512px; } -.emoji-26f9-fe0f { background-position: -384px -512px; } -.emoji-26f9-fe0f-200d-2640-fe0f { background-position: -448px -512px; } -.emoji-category-places { background-image: url('../images/emoji-sheets/places.png'); } -.emoji-1f301 { background-position: -0px -0px; } -.emoji-1f303 { background-position: -64px -0px; } -.emoji-1f304 { background-position: -0px -64px; } -.emoji-1f305 { background-position: -64px -64px; } -.emoji-1f306 { background-position: -128px -0px; } -.emoji-1f307 { background-position: -128px -64px; } -.emoji-1f309 { background-position: -0px -128px; } -.emoji-1f30b { background-position: -64px -128px; } -.emoji-1f30c { background-position: -128px -128px; } -.emoji-1f320 { background-position: -192px -0px; } -.emoji-1f386 { background-position: -192px -64px; } -.emoji-1f387 { background-position: -192px -128px; } -.emoji-1f391 { background-position: -0px -192px; } -.emoji-1f3a0 { background-position: -64px -192px; } -.emoji-1f3a1 { background-position: -128px -192px; } -.emoji-1f3a2 { background-position: -192px -192px; } -.emoji-1f3cd { background-position: -256px -0px; } -.emoji-1f3ce { background-position: -256px -64px; } -.emoji-1f3d4 { background-position: -256px -128px; } -.emoji-1f3d5 { background-position: -256px -192px; } -.emoji-1f3d6 { background-position: -0px -256px; } -.emoji-1f3d7 { background-position: -64px -256px; } -.emoji-1f3d8 { background-position: -128px -256px; } -.emoji-1f3d9 { background-position: -192px -256px; } -.emoji-1f3da { background-position: -256px -256px; } -.emoji-1f3db { background-position: -320px -0px; } -.emoji-1f3dc { background-position: -320px -64px; } -.emoji-1f3dd { background-position: -320px -128px; } -.emoji-1f3de { background-position: -320px -192px; } -.emoji-1f3df { background-position: -320px -256px; } -.emoji-1f3e0 { background-position: -0px -320px; } -.emoji-1f3e1 { background-position: -64px -320px; } -.emoji-1f3e2 { background-position: -128px -320px; } -.emoji-1f3e3 { background-position: -192px -320px; } -.emoji-1f3e4 { background-position: -256px -320px; } -.emoji-1f3e5 { background-position: -320px -320px; } -.emoji-1f3e6 { background-position: -384px -0px; } -.emoji-1f3e8 { background-position: -384px -64px; } -.emoji-1f3e9 { background-position: -384px -128px; } -.emoji-1f3ea { background-position: -384px -192px; } -.emoji-1f3eb { background-position: -384px -256px; } -.emoji-1f3ec { background-position: -384px -320px; } -.emoji-1f3ed { background-position: -0px -384px; } -.emoji-1f3ef { background-position: -64px -384px; } -.emoji-1f3f0 { background-position: -128px -384px; } -.emoji-1f492 { background-position: -192px -384px; } -.emoji-1f4ba { background-position: -256px -384px; } -.emoji-1f54b { background-position: -320px -384px; } -.emoji-1f54c { background-position: -384px -384px; } -.emoji-1f54d { background-position: -448px -0px; } -.emoji-1f5fa { background-position: -448px -64px; } -.emoji-1f5fb { background-position: -448px -128px; } -.emoji-1f5fc { background-position: -448px -192px; } -.emoji-1f5fd { background-position: -448px -256px; } -.emoji-1f5fe { background-position: -448px -320px; } -.emoji-1f5ff { background-position: -448px -384px; } -.emoji-1f680 { background-position: -0px -448px; } -.emoji-1f681 { background-position: -64px -448px; } -.emoji-1f682 { background-position: -128px -448px; } -.emoji-1f683 { background-position: -192px -448px; } -.emoji-1f684 { background-position: -256px -448px; } -.emoji-1f685 { background-position: -320px -448px; } -.emoji-1f686 { background-position: -384px -448px; } -.emoji-1f687 { background-position: -448px -448px; } -.emoji-1f688 { background-position: -512px -0px; } -.emoji-1f689 { background-position: -512px -64px; } -.emoji-1f68a { background-position: -512px -128px; } -.emoji-1f68b { background-position: -512px -192px; } -.emoji-1f68c { background-position: -512px -256px; } -.emoji-1f68d { background-position: -512px -320px; } -.emoji-1f68e { background-position: -512px -384px; } -.emoji-1f68f { background-position: -512px -448px; } -.emoji-1f690 { background-position: -0px -512px; } -.emoji-1f691 { background-position: -64px -512px; } -.emoji-1f692 { background-position: -128px -512px; } -.emoji-1f693 { background-position: -192px -512px; } -.emoji-1f694 { background-position: -256px -512px; } -.emoji-1f695 { background-position: -320px -512px; } -.emoji-1f696 { background-position: -384px -512px; } -.emoji-1f697 { background-position: -448px -512px; } -.emoji-1f698 { background-position: -512px -512px; } -.emoji-1f699 { background-position: -576px -0px; } -.emoji-1f69a { background-position: -576px -64px; } -.emoji-1f69b { background-position: -576px -128px; } -.emoji-1f69c { background-position: -576px -192px; } -.emoji-1f69d { background-position: -576px -256px; } -.emoji-1f69e { background-position: -576px -320px; } -.emoji-1f69f { background-position: -576px -384px; } -.emoji-1f6a0 { background-position: -576px -448px; } -.emoji-1f6a1 { background-position: -576px -512px; } -.emoji-1f6a2 { background-position: -0px -576px; } -.emoji-1f6a4 { background-position: -64px -576px; } -.emoji-1f6a5 { background-position: -128px -576px; } -.emoji-1f6a6 { background-position: -192px -576px; } -.emoji-1f6a7 { background-position: -256px -576px; } -.emoji-1f6a8 { background-position: -320px -576px; } -.emoji-1f6b2 { background-position: -384px -576px; } -.emoji-1f6e3 { background-position: -448px -576px; } -.emoji-1f6e4 { background-position: -512px -576px; } -.emoji-1f6e5 { background-position: -576px -576px; } -.emoji-1f6e9 { background-position: -640px -0px; } -.emoji-1f6eb { background-position: -640px -64px; } -.emoji-1f6ec { background-position: -640px -128px; } -.emoji-1f6f0 { background-position: -640px -192px; } -.emoji-1f6f3 { background-position: -640px -256px; } -.emoji-1f6f4 { background-position: -640px -320px; } -.emoji-1f6f5 { background-position: -640px -384px; } -.emoji-1f6f6 { background-position: -640px -448px; } -.emoji-2693-fe0f { background-position: -640px -512px; } -.emoji-26e9 { background-position: -640px -576px; } -.emoji-26ea-fe0f { background-position: -0px -640px; } -.emoji-26f0 { background-position: -64px -640px; } -.emoji-26f1 { background-position: -128px -640px; } -.emoji-26f2-fe0f { background-position: -192px -640px; } -.emoji-26f4 { background-position: -256px -640px; } -.emoji-26f5-fe0f { background-position: -320px -640px; } -.emoji-26fa-fe0f { background-position: -384px -640px; } -.emoji-26fd-fe0f { background-position: -448px -640px; } -.emoji-2708-fe0f { background-position: -512px -640px; } -.emoji-category-objects { background-image: url('../images/emoji-sheets/objects.png'); } -.emoji-1f321 { background-position: -0px -0px; } -.emoji-1f380 { background-position: -64px -0px; } -.emoji-1f381 { background-position: -0px -64px; } -.emoji-1f388 { background-position: -64px -64px; } -.emoji-1f389 { background-position: -128px -0px; } -.emoji-1f38a { background-position: -128px -64px; } -.emoji-1f38e { background-position: -0px -128px; } -.emoji-1f38f { background-position: -64px -128px; } -.emoji-1f390 { background-position: -128px -128px; } -.emoji-1f399 { background-position: -192px -0px; } -.emoji-1f39a { background-position: -192px -64px; } -.emoji-1f39b { background-position: -192px -128px; } -.emoji-1f39e { background-position: -0px -192px; } -.emoji-1f3a5 { background-position: -64px -192px; } -.emoji-1f3ee { background-position: -128px -192px; } -.emoji-1f3f7 { background-position: -192px -192px; } -.emoji-1f3fa { background-position: -256px -0px; } -.emoji-1f488 { background-position: -256px -64px; } -.emoji-1f489 { background-position: -256px -128px; } -.emoji-1f48a { background-position: -256px -192px; } -.emoji-1f48c { background-position: -0px -256px; } -.emoji-1f48e { background-position: -64px -256px; } -.emoji-1f4a1 { background-position: -128px -256px; } -.emoji-1f4a3 { background-position: -192px -256px; } -.emoji-1f4b0 { background-position: -256px -256px; } -.emoji-1f4b3 { background-position: -320px -0px; } -.emoji-1f4b4 { background-position: -320px -64px; } -.emoji-1f4b5 { background-position: -320px -128px; } -.emoji-1f4b6 { background-position: -320px -192px; } -.emoji-1f4b7 { background-position: -320px -256px; } -.emoji-1f4b8 { background-position: -0px -320px; } -.emoji-1f4bb { background-position: -64px -320px; } -.emoji-1f4bd { background-position: -128px -320px; } -.emoji-1f4be { background-position: -192px -320px; } -.emoji-1f4bf { background-position: -256px -320px; } -.emoji-1f4c0 { background-position: -320px -320px; } -.emoji-1f4c1 { background-position: -384px -0px; } -.emoji-1f4c2 { background-position: -384px -64px; } -.emoji-1f4c3 { background-position: -384px -128px; } -.emoji-1f4c4 { background-position: -384px -192px; } -.emoji-1f4c5 { background-position: -384px -256px; } -.emoji-1f4c6 { background-position: -384px -320px; } -.emoji-1f4c7 { background-position: -0px -384px; } -.emoji-1f4c8 { background-position: -64px -384px; } -.emoji-1f4c9 { background-position: -128px -384px; } -.emoji-1f4ca { background-position: -192px -384px; } -.emoji-1f4cb { background-position: -256px -384px; } -.emoji-1f4cc { background-position: -320px -384px; } -.emoji-1f4cd { background-position: -384px -384px; } -.emoji-1f4ce { background-position: -448px -0px; } -.emoji-1f4cf { background-position: -448px -64px; } -.emoji-1f4d0 { background-position: -448px -128px; } -.emoji-1f4d1 { background-position: -448px -192px; } -.emoji-1f4d2 { background-position: -448px -256px; } -.emoji-1f4d3 { background-position: -448px -320px; } -.emoji-1f4d4 { background-position: -448px -384px; } -.emoji-1f4d5 { background-position: -0px -448px; } -.emoji-1f4d6 { background-position: -64px -448px; } -.emoji-1f4d7 { background-position: -128px -448px; } -.emoji-1f4d8 { background-position: -192px -448px; } -.emoji-1f4d9 { background-position: -256px -448px; } -.emoji-1f4da { background-position: -320px -448px; } -.emoji-1f4dc { background-position: -384px -448px; } -.emoji-1f4dd { background-position: -448px -448px; } -.emoji-1f4de { background-position: -512px -0px; } -.emoji-1f4df { background-position: -512px -64px; } -.emoji-1f4e0 { background-position: -512px -128px; } -.emoji-1f4e1 { background-position: -512px -192px; } -.emoji-1f4e4 { background-position: -512px -256px; } -.emoji-1f4e5 { background-position: -512px -320px; } -.emoji-1f4e6 { background-position: -512px -384px; } -.emoji-1f4e7 { background-position: -512px -448px; } -.emoji-1f4e8 { background-position: -0px -512px; } -.emoji-1f4e9 { background-position: -64px -512px; } -.emoji-1f4ea { background-position: -128px -512px; } -.emoji-1f4eb { background-position: -192px -512px; } -.emoji-1f4ec { background-position: -256px -512px; } -.emoji-1f4ed { background-position: -320px -512px; } -.emoji-1f4ee { background-position: -384px -512px; } -.emoji-1f4ef { background-position: -448px -512px; } -.emoji-1f4f0 { background-position: -512px -512px; } -.emoji-1f4f1 { background-position: -576px -0px; } -.emoji-1f4f2 { background-position: -576px -64px; } -.emoji-1f4f7 { background-position: -576px -128px; } -.emoji-1f4f8 { background-position: -576px -192px; } -.emoji-1f4f9 { background-position: -576px -256px; } -.emoji-1f4fa { background-position: -576px -320px; } -.emoji-1f4fb { background-position: -576px -384px; } -.emoji-1f4fc { background-position: -576px -448px; } -.emoji-1f4fd { background-position: -576px -512px; } -.emoji-1f4ff { background-position: -0px -576px; } -.emoji-1f50b { background-position: -64px -576px; } -.emoji-1f50c { background-position: -128px -576px; } -.emoji-1f50d { background-position: -192px -576px; } -.emoji-1f50e { background-position: -256px -576px; } -.emoji-1f50f { background-position: -320px -576px; } -.emoji-1f510 { background-position: -384px -576px; } -.emoji-1f511 { background-position: -448px -576px; } -.emoji-1f512 { background-position: -512px -576px; } -.emoji-1f513 { background-position: -576px -576px; } -.emoji-1f516 { background-position: -640px -0px; } -.emoji-1f517 { background-position: -640px -64px; } -.emoji-1f526 { background-position: -640px -128px; } -.emoji-1f527 { background-position: -640px -192px; } -.emoji-1f528 { background-position: -640px -256px; } -.emoji-1f529 { background-position: -640px -320px; } -.emoji-1f52a { background-position: -640px -384px; } -.emoji-1f52b { background-position: -640px -448px; } -.emoji-1f52c { background-position: -640px -512px; } -.emoji-1f52d { background-position: -640px -576px; } -.emoji-1f52e { background-position: -0px -640px; } -.emoji-1f56f { background-position: -64px -640px; } -.emoji-1f570 { background-position: -128px -640px; } -.emoji-1f573 { background-position: -192px -640px; } -.emoji-1f579 { background-position: -256px -640px; } -.emoji-1f587 { background-position: -320px -640px; } -.emoji-1f58a { background-position: -384px -640px; } -.emoji-1f58b { background-position: -448px -640px; } -.emoji-1f58c { background-position: -512px -640px; } -.emoji-1f58d { background-position: -576px -640px; } -.emoji-1f5a5 { background-position: -640px -640px; } -.emoji-1f5a8 { background-position: -704px -0px; } -.emoji-1f5b1 { background-position: -704px -64px; } -.emoji-1f5b2 { background-position: -704px -128px; } -.emoji-1f5bc { background-position: -704px -192px; } -.emoji-1f5c2 { background-position: -704px -256px; } -.emoji-1f5c3 { background-position: -704px -320px; } -.emoji-1f5c4 { background-position: -704px -384px; } -.emoji-1f5d1 { background-position: -704px -448px; } -.emoji-1f5d2 { background-position: -704px -512px; } -.emoji-1f5d3 { background-position: -704px -576px; } -.emoji-1f5dc { background-position: -704px -640px; } -.emoji-1f5dd { background-position: -0px -704px; } -.emoji-1f5de { background-position: -64px -704px; } -.emoji-1f5e1 { background-position: -128px -704px; } -.emoji-1f5f3 { background-position: -192px -704px; } -.emoji-1f6aa { background-position: -256px -704px; } -.emoji-1f6ac { background-position: -320px -704px; } -.emoji-1f6b0 { background-position: -384px -704px; } -.emoji-1f6bd { background-position: -448px -704px; } -.emoji-1f6bf { background-position: -512px -704px; } -.emoji-1f6c0 { background-position: -576px -704px; } -.emoji-1f6c1 { background-position: -640px -704px; } -.emoji-1f6cb { background-position: -704px -704px; } -.emoji-1f6cc { background-position: -768px -0px; } -.emoji-1f6cd { background-position: -768px -64px; } -.emoji-1f6ce { background-position: -768px -128px; } -.emoji-1f6cf { background-position: -768px -192px; } -.emoji-1f6d2 { background-position: -768px -256px; } -.emoji-1f6e0 { background-position: -768px -320px; } -.emoji-1f6e1 { background-position: -768px -384px; } -.emoji-1f6e2 { background-position: -768px -448px; } -.emoji-231a-fe0f { background-position: -768px -512px; } -.emoji-231b-fe0f { background-position: -768px -576px; } -.emoji-2328-fe0f { background-position: -768px -640px; } -.emoji-23f0 { background-position: -768px -704px; } -.emoji-23f1 { background-position: -0px -768px; } -.emoji-23f2 { background-position: -64px -768px; } -.emoji-23f3 { background-position: -128px -768px; } -.emoji-260e-fe0f { background-position: -192px -768px; } -.emoji-2692 { background-position: -256px -768px; } -.emoji-2694-fe0f { background-position: -320px -768px; } -.emoji-2696-fe0f { background-position: -384px -768px; } -.emoji-2697-fe0f { background-position: -448px -768px; } -.emoji-2699-fe0f { background-position: -512px -768px; } -.emoji-26b0-fe0f { background-position: -576px -768px; } -.emoji-26b1-fe0f { background-position: -640px -768px; } -.emoji-26cf { background-position: -704px -768px; } -.emoji-26d3 { background-position: -768px -768px; } -.emoji-2702-fe0f { background-position: -832px -0px; } -.emoji-2709-fe0f { background-position: -832px -64px; } -.emoji-270f-fe0f { background-position: -832px -128px; } -.emoji-2712-fe0f { background-position: -832px -192px; } -.emoji-category-symbols { background-image: url('../images/emoji-sheets/symbols.png'); } -.emoji-0023-fe0f-20e3 { background-position: -0px -0px; } -.emoji-002a-fe0f-20e3 { background-position: -64px -0px; } -.emoji-0030-fe0f-20e3 { background-position: -0px -64px; } -.emoji-0031-fe0f-20e3 { background-position: -64px -64px; } -.emoji-0032-fe0f-20e3 { background-position: -128px -0px; } -.emoji-0033-fe0f-20e3 { background-position: -128px -64px; } -.emoji-0034-fe0f-20e3 { background-position: -0px -128px; } -.emoji-0035-fe0f-20e3 { background-position: -64px -128px; } -.emoji-0036-fe0f-20e3 { background-position: -128px -128px; } -.emoji-0037-fe0f-20e3 { background-position: -192px -0px; } -.emoji-0038-fe0f-20e3 { background-position: -192px -64px; } -.emoji-0039-fe0f-20e3 { background-position: -192px -128px; } -.emoji-00a9-fe0f { background-position: -0px -192px; } -.emoji-00ae-fe0f { background-position: -64px -192px; } -.emoji-1f004-fe0f { background-position: -128px -192px; } -.emoji-1f0cf { background-position: -192px -192px; } -.emoji-1f170-fe0f { background-position: -256px -0px; } -.emoji-1f171-fe0f { background-position: -256px -64px; } -.emoji-1f17e-fe0f { background-position: -256px -128px; } -.emoji-1f17f-fe0f { background-position: -256px -192px; } -.emoji-1f18e { background-position: -0px -256px; } -.emoji-1f191 { background-position: -64px -256px; } -.emoji-1f192 { background-position: -128px -256px; } -.emoji-1f193 { background-position: -192px -256px; } -.emoji-1f194 { background-position: -256px -256px; } -.emoji-1f195 { background-position: -320px -0px; } -.emoji-1f196 { background-position: -320px -64px; } -.emoji-1f197 { background-position: -320px -128px; } -.emoji-1f198 { background-position: -320px -192px; } -.emoji-1f199 { background-position: -320px -256px; } -.emoji-1f19a { background-position: -0px -320px; } -.emoji-1f201 { background-position: -64px -320px; } -.emoji-1f202-fe0f { background-position: -128px -320px; } -.emoji-1f21a-fe0f { background-position: -192px -320px; } -.emoji-1f22f-fe0f { background-position: -256px -320px; } -.emoji-1f232 { background-position: -320px -320px; } -.emoji-1f233 { background-position: -384px -0px; } -.emoji-1f234 { background-position: -384px -64px; } -.emoji-1f235 { background-position: -384px -128px; } -.emoji-1f236 { background-position: -384px -192px; } -.emoji-1f237-fe0f { background-position: -384px -256px; } -.emoji-1f238 { background-position: -384px -320px; } -.emoji-1f239 { background-position: -0px -384px; } -.emoji-1f23a { background-position: -64px -384px; } -.emoji-1f250 { background-position: -128px -384px; } -.emoji-1f251 { background-position: -192px -384px; } -.emoji-1f300 { background-position: -256px -384px; } -.emoji-1f310 { background-position: -320px -384px; } -.emoji-1f3a6 { background-position: -384px -384px; } -.emoji-1f3b4 { background-position: -448px -0px; } -.emoji-1f3b5 { background-position: -448px -64px; } -.emoji-1f3b6 { background-position: -448px -128px; } -.emoji-1f3e7 { background-position: -448px -192px; } -.emoji-1f441-200d-1f5e8 { background-position: -448px -256px; } -.emoji-1f493 { background-position: -448px -320px; } -.emoji-1f494 { background-position: -448px -384px; } -.emoji-1f495 { background-position: -0px -448px; } -.emoji-1f496 { background-position: -64px -448px; } -.emoji-1f497 { background-position: -128px -448px; } -.emoji-1f498 { background-position: -192px -448px; } -.emoji-1f499 { background-position: -256px -448px; } -.emoji-1f49a { background-position: -320px -448px; } -.emoji-1f49b { background-position: -384px -448px; } -.emoji-1f49c { background-position: -448px -448px; } -.emoji-1f49d { background-position: -512px -0px; } -.emoji-1f49e { background-position: -512px -64px; } -.emoji-1f49f { background-position: -512px -128px; } -.emoji-1f4a0 { background-position: -512px -192px; } -.emoji-1f4a2 { background-position: -512px -256px; } -.emoji-1f4a4 { background-position: -512px -320px; } -.emoji-1f4ac { background-position: -512px -384px; } -.emoji-1f4ad { background-position: -512px -448px; } -.emoji-1f4ae { background-position: -0px -512px; } -.emoji-1f4af { background-position: -64px -512px; } -.emoji-1f4b1 { background-position: -128px -512px; } -.emoji-1f4b2 { background-position: -192px -512px; } -.emoji-1f4b9 { background-position: -256px -512px; } -.emoji-1f4db { background-position: -320px -512px; } -.emoji-1f4e2 { background-position: -384px -512px; } -.emoji-1f4e3 { background-position: -448px -512px; } -.emoji-1f4f3 { background-position: -512px -512px; } -.emoji-1f4f4 { background-position: -576px -0px; } -.emoji-1f4f5 { background-position: -576px -64px; } -.emoji-1f4f6 { background-position: -576px -128px; } -.emoji-1f500 { background-position: -576px -192px; } -.emoji-1f501 { background-position: -576px -256px; } -.emoji-1f502 { background-position: -576px -320px; } -.emoji-1f503 { background-position: -576px -384px; } -.emoji-1f504 { background-position: -576px -448px; } -.emoji-1f505 { background-position: -576px -512px; } -.emoji-1f506 { background-position: -0px -576px; } -.emoji-1f507 { background-position: -64px -576px; } -.emoji-1f508 { background-position: -128px -576px; } -.emoji-1f509 { background-position: -192px -576px; } -.emoji-1f50a { background-position: -256px -576px; } -.emoji-1f514 { background-position: -320px -576px; } -.emoji-1f515 { background-position: -384px -576px; } -.emoji-1f518 { background-position: -448px -576px; } -.emoji-1f519 { background-position: -512px -576px; } -.emoji-1f51a { background-position: -576px -576px; } -.emoji-1f51b { background-position: -640px -0px; } -.emoji-1f51c { background-position: -640px -64px; } -.emoji-1f51d { background-position: -640px -128px; } -.emoji-1f51e { background-position: -640px -192px; } -.emoji-1f51f { background-position: -640px -256px; } -.emoji-1f520 { background-position: -640px -320px; } -.emoji-1f521 { background-position: -640px -384px; } -.emoji-1f522 { background-position: -640px -448px; } -.emoji-1f523 { background-position: -640px -512px; } -.emoji-1f524 { background-position: -640px -576px; } -.emoji-1f52f { background-position: -0px -640px; } -.emoji-1f530 { background-position: -64px -640px; } -.emoji-1f531 { background-position: -128px -640px; } -.emoji-1f532 { background-position: -192px -640px; } -.emoji-1f533 { background-position: -256px -640px; } -.emoji-1f534 { background-position: -320px -640px; } -.emoji-1f535 { background-position: -384px -640px; } -.emoji-1f536 { background-position: -448px -640px; } -.emoji-1f537 { background-position: -512px -640px; } -.emoji-1f538 { background-position: -576px -640px; } -.emoji-1f539 { background-position: -640px -640px; } -.emoji-1f53a { background-position: -704px -0px; } -.emoji-1f53b { background-position: -704px -64px; } -.emoji-1f53c { background-position: -704px -128px; } -.emoji-1f53d { background-position: -704px -192px; } -.emoji-1f549 { background-position: -704px -256px; } -.emoji-1f54e { background-position: -704px -320px; } -.emoji-1f550 { background-position: -704px -384px; } -.emoji-1f551 { background-position: -704px -448px; } -.emoji-1f552 { background-position: -704px -512px; } -.emoji-1f553 { background-position: -704px -576px; } -.emoji-1f554 { background-position: -704px -640px; } -.emoji-1f555 { background-position: -0px -704px; } -.emoji-1f556 { background-position: -64px -704px; } -.emoji-1f557 { background-position: -128px -704px; } -.emoji-1f558 { background-position: -192px -704px; } -.emoji-1f559 { background-position: -256px -704px; } -.emoji-1f55a { background-position: -320px -704px; } -.emoji-1f55b { background-position: -384px -704px; } -.emoji-1f55c { background-position: -448px -704px; } -.emoji-1f55d { background-position: -512px -704px; } -.emoji-1f55e { background-position: -576px -704px; } -.emoji-1f55f { background-position: -640px -704px; } -.emoji-1f560 { background-position: -704px -704px; } -.emoji-1f561 { background-position: -768px -0px; } -.emoji-1f562 { background-position: -768px -64px; } -.emoji-1f563 { background-position: -768px -128px; } -.emoji-1f564 { background-position: -768px -192px; } -.emoji-1f565 { background-position: -768px -256px; } -.emoji-1f566 { background-position: -768px -320px; } -.emoji-1f567 { background-position: -768px -384px; } -.emoji-1f5a4 { background-position: -768px -448px; } -.emoji-1f5ef { background-position: -768px -512px; } -.emoji-1f6ab { background-position: -768px -576px; } -.emoji-1f6ad { background-position: -768px -640px; } -.emoji-1f6ae { background-position: -768px -704px; } -.emoji-1f6af { background-position: -0px -768px; } -.emoji-1f6b1 { background-position: -64px -768px; } -.emoji-1f6b3 { background-position: -128px -768px; } -.emoji-1f6b7 { background-position: -192px -768px; } -.emoji-1f6b8 { background-position: -256px -768px; } -.emoji-1f6b9 { background-position: -320px -768px; } -.emoji-1f6ba { background-position: -384px -768px; } -.emoji-1f6bb { background-position: -448px -768px; } -.emoji-1f6bc { background-position: -512px -768px; } -.emoji-1f6be { background-position: -576px -768px; } -.emoji-1f6c2 { background-position: -640px -768px; } -.emoji-1f6c3 { background-position: -704px -768px; } -.emoji-1f6c4 { background-position: -768px -768px; } -.emoji-1f6c5 { background-position: -832px -0px; } -.emoji-1f6d0 { background-position: -832px -64px; } -.emoji-1f6d1 { background-position: -832px -128px; } -.emoji-203c-fe0f { background-position: -832px -192px; } -.emoji-2049-fe0f { background-position: -832px -256px; } -.emoji-2122-fe0f { background-position: -832px -320px; } -.emoji-2139-fe0f { background-position: -832px -384px; } -.emoji-2194-fe0f { background-position: -832px -448px; } -.emoji-2195-fe0f { background-position: -832px -512px; } -.emoji-2196-fe0f { background-position: -832px -576px; } -.emoji-2197-fe0f { background-position: -832px -640px; } -.emoji-2198-fe0f { background-position: -832px -704px; } -.emoji-2199-fe0f { background-position: -832px -768px; } -.emoji-21a9-fe0f { background-position: -0px -832px; } -.emoji-21aa-fe0f { background-position: -64px -832px; } -.emoji-23e9 { background-position: -128px -832px; } -.emoji-23ea { background-position: -192px -832px; } -.emoji-23eb { background-position: -256px -832px; } -.emoji-23ec { background-position: -320px -832px; } -.emoji-23ed { background-position: -384px -832px; } -.emoji-23ee { background-position: -448px -832px; } -.emoji-23ef { background-position: -512px -832px; } -.emoji-23f8 { background-position: -576px -832px; } -.emoji-23f9 { background-position: -640px -832px; } -.emoji-23fa { background-position: -704px -832px; } -.emoji-24c2-fe0f { background-position: -768px -832px; } -.emoji-25aa-fe0f { background-position: -832px -832px; } -.emoji-25ab-fe0f { background-position: -896px -0px; } -.emoji-25b6-fe0f { background-position: -896px -64px; } -.emoji-25c0-fe0f { background-position: -896px -128px; } -.emoji-25fb-fe0f { background-position: -896px -192px; } -.emoji-25fc-fe0f { background-position: -896px -256px; } -.emoji-25fd-fe0f { background-position: -896px -320px; } -.emoji-25fe-fe0f { background-position: -896px -384px; } -.emoji-2611-fe0f { background-position: -896px -448px; } -.emoji-2622-fe0f { background-position: -896px -512px; } -.emoji-2623-fe0f { background-position: -896px -576px; } -.emoji-2626-fe0f { background-position: -896px -640px; } -.emoji-262a-fe0f { background-position: -896px -704px; } -.emoji-262e-fe0f { background-position: -896px -768px; } -.emoji-262f-fe0f { background-position: -896px -832px; } -.emoji-2638-fe0f { background-position: -0px -896px; } -.emoji-2648-fe0f { background-position: -64px -896px; } -.emoji-2649-fe0f { background-position: -128px -896px; } -.emoji-264a-fe0f { background-position: -192px -896px; } -.emoji-264b-fe0f { background-position: -256px -896px; } -.emoji-264c-fe0f { background-position: -320px -896px; } -.emoji-264d-fe0f { background-position: -384px -896px; } -.emoji-264e-fe0f { background-position: -448px -896px; } -.emoji-264f-fe0f { background-position: -512px -896px; } -.emoji-2650-fe0f { background-position: -576px -896px; } -.emoji-2651-fe0f { background-position: -640px -896px; } -.emoji-2652-fe0f { background-position: -704px -896px; } -.emoji-2653-fe0f { background-position: -768px -896px; } -.emoji-2660-fe0f { background-position: -832px -896px; } -.emoji-2663-fe0f { background-position: -896px -896px; } -.emoji-2665-fe0f { background-position: -960px -0px; } -.emoji-2666-fe0f { background-position: -960px -64px; } -.emoji-2668-fe0f { background-position: -960px -128px; } -.emoji-267b-fe0f { background-position: -960px -192px; } -.emoji-267f-fe0f { background-position: -960px -256px; } -.emoji-269b-fe0f { background-position: -960px -320px; } -.emoji-269c-fe0f { background-position: -960px -384px; } -.emoji-26a0-fe0f { background-position: -960px -448px; } -.emoji-26aa-fe0f { background-position: -960px -512px; } -.emoji-26ab-fe0f { background-position: -960px -576px; } -.emoji-26ce { background-position: -960px -640px; } -.emoji-26d4-fe0f { background-position: -960px -704px; } -.emoji-2705 { background-position: -960px -768px; } -.emoji-2714-fe0f { background-position: -960px -832px; } -.emoji-2716-fe0f { background-position: -960px -896px; } -.emoji-271d-fe0f { background-position: -0px -960px; } -.emoji-2721-fe0f { background-position: -64px -960px; } -.emoji-2733-fe0f { background-position: -128px -960px; } -.emoji-2734-fe0f { background-position: -192px -960px; } -.emoji-2747-fe0f { background-position: -256px -960px; } -.emoji-274c { background-position: -320px -960px; } -.emoji-274e { background-position: -384px -960px; } -.emoji-2753 { background-position: -448px -960px; } -.emoji-2754 { background-position: -512px -960px; } -.emoji-2755 { background-position: -576px -960px; } -.emoji-2757-fe0f { background-position: -640px -960px; } -.emoji-2763-fe0f { background-position: -704px -960px; } -.emoji-2764-fe0f { background-position: -768px -960px; } -.emoji-2795 { background-position: -832px -960px; } -.emoji-2796 { background-position: -896px -960px; } -.emoji-2797 { background-position: -960px -960px; } -.emoji-27a1-fe0f { background-position: -1024px -0px; } -.emoji-27b0 { background-position: -1024px -64px; } -.emoji-27bf { background-position: -1024px -128px; } -.emoji-2934-fe0f { background-position: -1024px -192px; } -.emoji-2935-fe0f { background-position: -1024px -256px; } -.emoji-2b05-fe0f { background-position: -1024px -320px; } -.emoji-2b06-fe0f { background-position: -1024px -384px; } -.emoji-2b07-fe0f { background-position: -1024px -448px; } -.emoji-2b1b-fe0f { background-position: -1024px -512px; } -.emoji-2b1c-fe0f { background-position: -1024px -576px; } -.emoji-2b55-fe0f { background-position: -1024px -640px; } -.emoji-3030-fe0f { background-position: -1024px -704px; } -.emoji-303d-fe0f { background-position: -1024px -768px; } -.emoji-3297-fe0f { background-position: -1024px -832px; } -.emoji-3299-fe0f { background-position: -1024px -896px; } -.emoji-category-flags { background-image: url('../images/emoji-sheets/flags.png'); } -.emoji-1f1e6-1f1e9 { background-position: -0px -0px; } -.emoji-1f1e6-1f1ea { background-position: -64px -0px; } -.emoji-1f1e6-1f1eb { background-position: -0px -64px; } -.emoji-1f1e6-1f1ec { background-position: -64px -64px; } -.emoji-1f1e6-1f1ee { background-position: -128px -0px; } -.emoji-1f1e6-1f1f1 { background-position: -128px -64px; } -.emoji-1f1e6-1f1f2 { background-position: -0px -128px; } -.emoji-1f1e6-1f1f4 { background-position: -64px -128px; } -.emoji-1f1e6-1f1f6 { background-position: -128px -128px; } -.emoji-1f1e6-1f1f7 { background-position: -192px -0px; } -.emoji-1f1e6-1f1f8 { background-position: -192px -64px; } -.emoji-1f1e6-1f1f9 { background-position: -192px -128px; } -.emoji-1f1e6-1f1fa { background-position: -0px -192px; } -.emoji-1f1e6-1f1fc { background-position: -64px -192px; } -.emoji-1f1e6-1f1fd { background-position: -128px -192px; } -.emoji-1f1e6-1f1ff { background-position: -192px -192px; } -.emoji-1f1e7-1f1e6 { background-position: -256px -0px; } -.emoji-1f1e7-1f1e7 { background-position: -256px -64px; } -.emoji-1f1e7-1f1e9 { background-position: -256px -128px; } -.emoji-1f1e7-1f1ea { background-position: -256px -192px; } -.emoji-1f1e7-1f1eb { background-position: -0px -256px; } -.emoji-1f1e7-1f1ec { background-position: -64px -256px; } -.emoji-1f1e7-1f1ed { background-position: -128px -256px; } -.emoji-1f1e7-1f1ee { background-position: -192px -256px; } -.emoji-1f1e7-1f1ef { background-position: -256px -256px; } -.emoji-1f1e7-1f1f1 { background-position: -320px -0px; } -.emoji-1f1e7-1f1f2 { background-position: -320px -64px; } -.emoji-1f1e7-1f1f3 { background-position: -320px -128px; } -.emoji-1f1e7-1f1f4 { background-position: -320px -192px; } -.emoji-1f1e7-1f1f6 { background-position: -320px -256px; } -.emoji-1f1e7-1f1f7 { background-position: -0px -320px; } -.emoji-1f1e7-1f1f8 { background-position: -64px -320px; } -.emoji-1f1e7-1f1f9 { background-position: -128px -320px; } -.emoji-1f1e7-1f1fc { background-position: -192px -320px; } -.emoji-1f1e7-1f1fe { background-position: -256px -320px; } -.emoji-1f1e7-1f1ff { background-position: -320px -320px; } -.emoji-1f1e8-1f1e6 { background-position: -384px -0px; } -.emoji-1f1e8-1f1e8 { background-position: -384px -64px; } -.emoji-1f1e8-1f1e9 { background-position: -384px -128px; } -.emoji-1f1e8-1f1eb { background-position: -384px -192px; } -.emoji-1f1e8-1f1ec { background-position: -384px -256px; } -.emoji-1f1e8-1f1ed { background-position: -384px -320px; } -.emoji-1f1e8-1f1ee { background-position: -0px -384px; } -.emoji-1f1e8-1f1f0 { background-position: -64px -384px; } -.emoji-1f1e8-1f1f1 { background-position: -128px -384px; } -.emoji-1f1e8-1f1f2 { background-position: -192px -384px; } -.emoji-1f1e8-1f1f3 { background-position: -256px -384px; } -.emoji-1f1e8-1f1f4 { background-position: -320px -384px; } -.emoji-1f1e8-1f1f7 { background-position: -384px -384px; } -.emoji-1f1e8-1f1fa { background-position: -448px -0px; } -.emoji-1f1e8-1f1fb { background-position: -448px -64px; } -.emoji-1f1e8-1f1fc { background-position: -448px -128px; } -.emoji-1f1e8-1f1fd { background-position: -448px -192px; } -.emoji-1f1e8-1f1fe { background-position: -448px -256px; } -.emoji-1f1e8-1f1ff { background-position: -448px -320px; } -.emoji-1f1e9-1f1ea { background-position: -448px -384px; } -.emoji-1f1e9-1f1ef { background-position: -0px -448px; } -.emoji-1f1e9-1f1f0 { background-position: -64px -448px; } -.emoji-1f1e9-1f1f2 { background-position: -128px -448px; } -.emoji-1f1e9-1f1f4 { background-position: -192px -448px; } -.emoji-1f1e9-1f1ff { background-position: -256px -448px; } -.emoji-1f1ea-1f1e8 { background-position: -320px -448px; } -.emoji-1f1ea-1f1ea { background-position: -384px -448px; } -.emoji-1f1ea-1f1ec { background-position: -448px -448px; } -.emoji-1f1ea-1f1ed { background-position: -512px -0px; } -.emoji-1f1ea-1f1f7 { background-position: -512px -64px; } -.emoji-1f1ea-1f1f8 { background-position: -512px -128px; } -.emoji-1f1ea-1f1f9 { background-position: -512px -192px; } -.emoji-1f1ea-1f1fa { background-position: -512px -256px; } -.emoji-1f1eb-1f1ee { background-position: -512px -320px; } -.emoji-1f1eb-1f1ef { background-position: -512px -384px; } -.emoji-1f1eb-1f1f0 { background-position: -512px -448px; } -.emoji-1f1eb-1f1f2 { background-position: -0px -512px; } -.emoji-1f1eb-1f1f4 { background-position: -64px -512px; } -.emoji-1f1eb-1f1f7 { background-position: -128px -512px; } -.emoji-1f1ec-1f1e6 { background-position: -192px -512px; } -.emoji-1f1ec-1f1e7 { background-position: -256px -512px; } -.emoji-1f1ec-1f1e9 { background-position: -320px -512px; } -.emoji-1f1ec-1f1ea { background-position: -384px -512px; } -.emoji-1f1ec-1f1eb { background-position: -448px -512px; } -.emoji-1f1ec-1f1ec { background-position: -512px -512px; } -.emoji-1f1ec-1f1ed { background-position: -576px -0px; } -.emoji-1f1ec-1f1ee { background-position: -576px -64px; } -.emoji-1f1ec-1f1f1 { background-position: -576px -128px; } -.emoji-1f1ec-1f1f2 { background-position: -576px -192px; } -.emoji-1f1ec-1f1f3 { background-position: -576px -256px; } -.emoji-1f1ec-1f1f5 { background-position: -576px -320px; } -.emoji-1f1ec-1f1f6 { background-position: -576px -384px; } -.emoji-1f1ec-1f1f7 { background-position: -576px -448px; } -.emoji-1f1ec-1f1f8 { background-position: -576px -512px; } -.emoji-1f1ec-1f1f9 { background-position: -0px -576px; } -.emoji-1f1ec-1f1fa { background-position: -64px -576px; } -.emoji-1f1ec-1f1fc { background-position: -128px -576px; } -.emoji-1f1ec-1f1fe { background-position: -192px -576px; } -.emoji-1f1ed-1f1f0 { background-position: -256px -576px; } -.emoji-1f1ed-1f1f3 { background-position: -320px -576px; } -.emoji-1f1ed-1f1f7 { background-position: -384px -576px; } -.emoji-1f1ed-1f1f9 { background-position: -448px -576px; } -.emoji-1f1ed-1f1fa { background-position: -512px -576px; } -.emoji-1f1ee-1f1e8 { background-position: -576px -576px; } -.emoji-1f1ee-1f1e9 { background-position: -640px -0px; } -.emoji-1f1ee-1f1ea { background-position: -640px -64px; } -.emoji-1f1ee-1f1f1 { background-position: -640px -128px; } -.emoji-1f1ee-1f1f2 { background-position: -640px -192px; } -.emoji-1f1ee-1f1f3 { background-position: -640px -256px; } -.emoji-1f1ee-1f1f4 { background-position: -640px -320px; } -.emoji-1f1ee-1f1f6 { background-position: -640px -384px; } -.emoji-1f1ee-1f1f7 { background-position: -640px -448px; } -.emoji-1f1ee-1f1f8 { background-position: -640px -512px; } -.emoji-1f1ee-1f1f9 { background-position: -640px -576px; } -.emoji-1f1ef-1f1ea { background-position: -0px -640px; } -.emoji-1f1ef-1f1f2 { background-position: -64px -640px; } -.emoji-1f1ef-1f1f4 { background-position: -128px -640px; } -.emoji-1f1ef-1f1f5 { background-position: -192px -640px; } -.emoji-1f1f0-1f1ea { background-position: -256px -640px; } -.emoji-1f1f0-1f1ec { background-position: -320px -640px; } -.emoji-1f1f0-1f1ed { background-position: -384px -640px; } -.emoji-1f1f0-1f1ee { background-position: -448px -640px; } -.emoji-1f1f0-1f1f2 { background-position: -512px -640px; } -.emoji-1f1f0-1f1f3 { background-position: -576px -640px; } -.emoji-1f1f0-1f1f5 { background-position: -640px -640px; } -.emoji-1f1f0-1f1f7 { background-position: -704px -0px; } -.emoji-1f1f0-1f1fc { background-position: -704px -64px; } -.emoji-1f1f0-1f1fe { background-position: -704px -128px; } -.emoji-1f1f0-1f1ff { background-position: -704px -192px; } -.emoji-1f1f1-1f1e6 { background-position: -704px -256px; } -.emoji-1f1f1-1f1e7 { background-position: -704px -320px; } -.emoji-1f1f1-1f1e8 { background-position: -704px -384px; } -.emoji-1f1f1-1f1ee { background-position: -704px -448px; } -.emoji-1f1f1-1f1f0 { background-position: -704px -512px; } -.emoji-1f1f1-1f1f7 { background-position: -704px -576px; } -.emoji-1f1f1-1f1f8 { background-position: -704px -640px; } -.emoji-1f1f1-1f1f9 { background-position: -0px -704px; } -.emoji-1f1f1-1f1fa { background-position: -64px -704px; } -.emoji-1f1f1-1f1fb { background-position: -128px -704px; } -.emoji-1f1f1-1f1fe { background-position: -192px -704px; } -.emoji-1f1f2-1f1e6 { background-position: -256px -704px; } -.emoji-1f1f2-1f1e8 { background-position: -320px -704px; } -.emoji-1f1f2-1f1e9 { background-position: -384px -704px; } -.emoji-1f1f2-1f1ea { background-position: -448px -704px; } -.emoji-1f1f2-1f1ec { background-position: -512px -704px; } -.emoji-1f1f2-1f1ed { background-position: -576px -704px; } -.emoji-1f1f2-1f1f0 { background-position: -640px -704px; } -.emoji-1f1f2-1f1f1 { background-position: -704px -704px; } -.emoji-1f1f2-1f1f2 { background-position: -768px -0px; } -.emoji-1f1f2-1f1f3 { background-position: -768px -64px; } -.emoji-1f1f2-1f1f4 { background-position: -768px -128px; } -.emoji-1f1f2-1f1f5 { background-position: -768px -192px; } -.emoji-1f1f2-1f1f6 { background-position: -768px -256px; } -.emoji-1f1f2-1f1f7 { background-position: -768px -320px; } -.emoji-1f1f2-1f1f8 { background-position: -768px -384px; } -.emoji-1f1f2-1f1f9 { background-position: -768px -448px; } -.emoji-1f1f2-1f1fa { background-position: -768px -512px; } -.emoji-1f1f2-1f1fb { background-position: -768px -576px; } -.emoji-1f1f2-1f1fc { background-position: -768px -640px; } -.emoji-1f1f2-1f1fd { background-position: -768px -704px; } -.emoji-1f1f2-1f1fe { background-position: -0px -768px; } -.emoji-1f1f2-1f1ff { background-position: -64px -768px; } -.emoji-1f1f3-1f1e6 { background-position: -128px -768px; } -.emoji-1f1f3-1f1e8 { background-position: -192px -768px; } -.emoji-1f1f3-1f1ea { background-position: -256px -768px; } -.emoji-1f1f3-1f1eb { background-position: -320px -768px; } -.emoji-1f1f3-1f1ec { background-position: -384px -768px; } -.emoji-1f1f3-1f1ee { background-position: -448px -768px; } -.emoji-1f1f3-1f1f1 { background-position: -512px -768px; } -.emoji-1f1f3-1f1f4 { background-position: -576px -768px; } -.emoji-1f1f3-1f1f5 { background-position: -640px -768px; } -.emoji-1f1f3-1f1f7 { background-position: -704px -768px; } -.emoji-1f1f3-1f1fa { background-position: -768px -768px; } -.emoji-1f1f3-1f1ff { background-position: -832px -0px; } -.emoji-1f1f4-1f1f2 { background-position: -832px -64px; } -.emoji-1f1f5-1f1e6 { background-position: -832px -128px; } -.emoji-1f1f5-1f1ea { background-position: -832px -192px; } -.emoji-1f1f5-1f1eb { background-position: -832px -256px; } -.emoji-1f1f5-1f1ec { background-position: -832px -320px; } -.emoji-1f1f5-1f1ed { background-position: -832px -384px; } -.emoji-1f1f5-1f1f0 { background-position: -832px -448px; } -.emoji-1f1f5-1f1f1 { background-position: -832px -512px; } -.emoji-1f1f5-1f1f2 { background-position: -832px -576px; } -.emoji-1f1f5-1f1f3 { background-position: -832px -640px; } -.emoji-1f1f5-1f1f7 { background-position: -832px -704px; } -.emoji-1f1f5-1f1f8 { background-position: -832px -768px; } -.emoji-1f1f5-1f1f9 { background-position: -0px -832px; } -.emoji-1f1f5-1f1fc { background-position: -64px -832px; } -.emoji-1f1f5-1f1fe { background-position: -128px -832px; } -.emoji-1f1f6-1f1e6 { background-position: -192px -832px; } -.emoji-1f1f7-1f1ea { background-position: -256px -832px; } -.emoji-1f1f7-1f1f4 { background-position: -320px -832px; } -.emoji-1f1f7-1f1f8 { background-position: -384px -832px; } -.emoji-1f1f7-1f1fa { background-position: -448px -832px; } -.emoji-1f1f7-1f1fc { background-position: -512px -832px; } -.emoji-1f1f8-1f1e6 { background-position: -576px -832px; } -.emoji-1f1f8-1f1e7 { background-position: -640px -832px; } -.emoji-1f1f8-1f1e8 { background-position: -704px -832px; } -.emoji-1f1f8-1f1e9 { background-position: -768px -832px; } -.emoji-1f1f8-1f1ea { background-position: -832px -832px; } -.emoji-1f1f8-1f1ec { background-position: -896px -0px; } -.emoji-1f1f8-1f1ed { background-position: -896px -64px; } -.emoji-1f1f8-1f1ee { background-position: -896px -128px; } -.emoji-1f1f8-1f1f0 { background-position: -896px -192px; } -.emoji-1f1f8-1f1f1 { background-position: -896px -256px; } -.emoji-1f1f8-1f1f2 { background-position: -896px -320px; } -.emoji-1f1f8-1f1f3 { background-position: -896px -384px; } -.emoji-1f1f8-1f1f4 { background-position: -896px -448px; } -.emoji-1f1f8-1f1f7 { background-position: -896px -512px; } -.emoji-1f1f8-1f1f8 { background-position: -896px -576px; } -.emoji-1f1f8-1f1f9 { background-position: -896px -640px; } -.emoji-1f1f8-1f1fb { background-position: -896px -704px; } -.emoji-1f1f8-1f1fd { background-position: -896px -768px; } -.emoji-1f1f8-1f1fe { background-position: -896px -832px; } -.emoji-1f1f8-1f1ff { background-position: -0px -896px; } -.emoji-1f1f9-1f1e8 { background-position: -64px -896px; } -.emoji-1f1f9-1f1e9 { background-position: -128px -896px; } -.emoji-1f1f9-1f1eb { background-position: -192px -896px; } -.emoji-1f1f9-1f1ec { background-position: -256px -896px; } -.emoji-1f1f9-1f1ed { background-position: -320px -896px; } -.emoji-1f1f9-1f1ef { background-position: -384px -896px; } -.emoji-1f1f9-1f1f0 { background-position: -448px -896px; } -.emoji-1f1f9-1f1f1 { background-position: -512px -896px; } -.emoji-1f1f9-1f1f2 { background-position: -576px -896px; } -.emoji-1f1f9-1f1f3 { background-position: -640px -896px; } -.emoji-1f1f9-1f1f4 { background-position: -704px -896px; } -.emoji-1f1f9-1f1f7 { background-position: -768px -896px; } -.emoji-1f1f9-1f1f9 { background-position: -832px -896px; } -.emoji-1f1f9-1f1fb { background-position: -896px -896px; } -.emoji-1f1f9-1f1fc { background-position: -960px -0px; } -.emoji-1f1f9-1f1ff { background-position: -960px -64px; } -.emoji-1f1fa-1f1e6 { background-position: -960px -128px; } -.emoji-1f1fa-1f1ec { background-position: -960px -192px; } -.emoji-1f1fa-1f1f8 { background-position: -960px -256px; } -.emoji-1f1fa-1f1fe { background-position: -960px -320px; } -.emoji-1f1fa-1f1ff { background-position: -960px -384px; } -.emoji-1f1fb-1f1e6 { background-position: -960px -448px; } -.emoji-1f1fb-1f1e8 { background-position: -960px -512px; } -.emoji-1f1fb-1f1ea { background-position: -960px -576px; } -.emoji-1f1fb-1f1ec { background-position: -960px -640px; } -.emoji-1f1fb-1f1ee { background-position: -960px -704px; } -.emoji-1f1fb-1f1f3 { background-position: -960px -768px; } -.emoji-1f1fb-1f1fa { background-position: -960px -832px; } -.emoji-1f1fc-1f1eb { background-position: -960px -896px; } -.emoji-1f1fc-1f1f8 { background-position: -0px -960px; } -.emoji-1f1fd-1f1f0 { background-position: -64px -960px; } -.emoji-1f1fe-1f1ea { background-position: -128px -960px; } -.emoji-1f1fe-1f1f9 { background-position: -192px -960px; } -.emoji-1f1ff-1f1e6 { background-position: -256px -960px; } -.emoji-1f1ff-1f1f2 { background-position: -320px -960px; } -.emoji-1f1ff-1f1fc { background-position: -384px -960px; } -.emoji-1f38c { background-position: -448px -960px; } -.emoji-1f3c1 { background-position: -512px -960px; } -.emoji-1f3f3-fe0f { background-position: -576px -960px; } -.emoji-1f3f3-fe0f-200d-1f308 { background-position: -640px -960px; } -.emoji-1f3f4 { background-position: -704px -960px; } -.emoji-1f6a9 { background-position: -768px -960px; } -.emoji-category-custom { background-image: url('../images/emoji-sheets/custom.png'); } -.emoji-shipit { background-position: -0px -0px; width: 75px; height: 75px; } -.emoji-octocat { background-position: -75px -0px; } -.emoji-finnadie { background-position: -0px -75px; } -.emoji-goberserk { background-position: -64px -75px; } -.emoji-godmode { background-position: -139px -0px; } -.emoji-hurtrealbad { background-position: -139px -64px; } -.emoji-mattermost { background-position: -0px -139px; } -.emoji-neckbeard { background-position: -64px -139px; } -.emoji-feelsgood { background-position: -128px -139px; } -.emoji-rage1 { background-position: -203px -0px; } -.emoji-rage2 { background-position: -203px -64px; } -.emoji-rage3 { background-position: -203px -128px; } -.emoji-rage4 { background-position: -0px -203px; } -.emoji-bowtie { background-position: -64px -203px; } -.emoji-suspect { background-position: -128px -203px; } -.emoji-trollface { background-position: -192px -203px; }
\ No newline at end of file diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss deleted file mode 100644 index c8fd50226..000000000 --- a/webapp/sass/components/_emoticons.scss +++ /dev/null @@ -1,233 +0,0 @@ -@charset "UTF-8"; - -.reacticon { - display: inline-block; - fill: inherit; - opacity: .7; - position: relative; - top: 2px; - vertical-align: middle; - visibility: hidden; -} - -.emoticon { - background-position: 50% 50%; - background-repeat: no-repeat; - background-size: contain; - display: inline-block; - height: 21px; - min-height: 1em; - min-width: 1em; - vertical-align: middle; - width: 21px; -} - -.emoticon-suggestion { - @include clearfix; - cursor: pointer; - font-size: 13px; - height: 30px; - line-height: 30px; - width: 100%; - - > div { - &:first-child { - text-align: center; - width: 30px; - } - } -} - -.emoticon-suggestion__image { - margin-top: -2px; - max-height: 20px; - max-width: 20px; - padding: 0; - text-align: center; - vertical-align: middle; -} - -.emoji-picker { - @include user-select(none); - border-radius: 3px; - border: 1px solid; - display: flex; - flex-direction: column; - position: absolute; - height: 362px; - width: 278px; - z-index: 8; -} - -.emoji-picker__categories { - flex-grow: 0; - flex-shrink: 0; - - .emoji-picker__category { - color: #333333; - display: inline-block; - font-size: 16px; - margin: 3px 6px; - text-align: center; - width: 15px; - - &--selected, - &:hover { - color: #666666; - } - } -} - -.emoji-picker__search-container { - position: relative; - border-top-style: solid; - border-top-width: 1px; - - .emoji-picker__search-icon { - padding-left: 6px; - padding-top: 6px; - position: absolute; - font-size: 13px; - } - - .emoji-picker__search { - border-width: 0px; - padding: 2px 0 2px 25px; - width: 100%; - height: 25px; - font-size: 12px; - - &:focus{ - outline: none; - } - } -} - -.emoji-picker__items { - max-height: 278px; - overflow-x: hidden; - overflow-y: auto; - padding: 0px 8px 8px 8px; - position: relative; - border-top-style: solid; - border-top-width: 1px; - - .emoji-picker__category-header { - font-size: 12px; - font-weight: bold; - margin-bottom: 6px; - margin-top: 3px; - padding-top: 3px; - } - - .emoji-picker__preview_sprite { - isplay: inline-block; - height: 45px; - margin: 3px; - vertical-align: top; - - padding: 3px; - } - - .emoji-picker-items__container { - > div { - display: inline-block; - height: 21px; - margin: 3px; - vertical-align: top; - width: 21px; - padding: 3px; - } - > span { - display: inline-block; - height: 21px; - margin: 3px; - vertical-align: top; - width: 21px; - padding: 0px; - border: 0px; - text-align: center; - border-radius: 6px; - overflow: hidden; - cursor: pointer; - } - } - - .emoji-picker__item-wrapper { - .emoji-picker__item { - font-size: 18px; - margin: 3px; - max-height: 21px; - max-width: 21px; - min-height: 0; - min-width: 0; - width: auto; - height: auto; - margin: 0 auto; - } - } -} - -.emoji-picker__preview { - border-top: 1px solid; - display: flex; - flex-direction: row; - justify-content: flex-start; - align-items: stretch; - vertical-align: middle; - flex-grow: 0; - flex-shrink: 0; - height: 45px; - padding: 3px 10px; - vertical-align: middle; - width: 278px; - - &.emoji-picker__preview-placeholder { - padding: 12px; - } - - > div { - display: table-cell; - vertical-align: middle; - } - - .emoji-picker__preview-image-label-box { - margin-left: 3px; - .emoji-picker__preview-name { - font-size: 13px; - font-weight: bold; - } - - .emoji-picker__preview-aliases { - display: block; - font-size: 12px; - - font-weight: bold; - } - } - - .emoji-picker__preview-image-box { - display: flex; - align-items: center; - justify-content: center; - height: 36px; - max-height: 36px; - width: 42px; - max-width: 42px; - text-align: center; - - .sprite-preview { - border: none; - display: inline-block; - height: 36px; - padding: 0; - vertical-align: middle; - width: 36px; - } - } - - .emoji-picker__preview-image { - max-height: 36px; - max-width: 42px; - } -} diff --git a/webapp/sass/components/_error-bar.scss b/webapp/sass/components/_error-bar.scss deleted file mode 100644 index b08b6d95b..000000000 --- a/webapp/sass/components/_error-bar.scss +++ /dev/null @@ -1,55 +0,0 @@ -@charset 'UTF-8'; - -.error-bar { - background-color: darken($primary-color, 5%); - color: $white; - padding: 5px 30px; - position: fixed; - text-align: center; - top: 0; - width: 100%; - z-index: 9999; - - &.error-bar--fixed { - overflow: hidden; - padding: 1px 30px; - text-overflow: ellipsis; - white-space: nowrap; - } - - a { - color: inherit !important; - text-decoration: underline; - - &:hover, - &:active, - &:focus { - color: inherit !important; - } - - &.error-bar__close { - color: $white; - font-family: 'Open Sans', sans-serif; - font-size: 20px; - font-weight: 600; - padding: 0 10px; - position: absolute; - right: 0; - text-decoration: none; - top: 0; - - &:hover { - color: $white; - text-decoration: none; - } - } - } -} - -.error-bar-critical { - background-color: #B0171F; -} - -.error-bar-developer { - background-color: purple; -} diff --git a/webapp/sass/components/_files.scss b/webapp/sass/components/_files.scss deleted file mode 100644 index b72180b42..000000000 --- a/webapp/sass/components/_files.scss +++ /dev/null @@ -1,298 +0,0 @@ -@charset 'UTF-8'; - -.file-preview__container { - height: 100px; - margin: 1px 0 10px; - max-height: 100px; - 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; - height: 100px; - margin: 0 0 0 10px; - position: relative; - width: 120px; - - &:first-child { - margin-left: 0; - } - - .spinner { - height: 32px; - left: 50%; - margin-left: -16px; - margin-top: -16px; - position: absolute; - top: 50%; - width: 32px; - } -} - -.file-preview__remove { - background: alpha-color($black, .5); - border-radius: 0 0 0 2px; - height: 28px; - position: absolute; - right: 0; - text-align: center; - top: 0; - width: 28px; - - i { - color: $white; - cursor: pointer; - font-size: 16px; - line-height: 29px; - position: relative; - right: auto; - text-shadow: 0 0 3px alpha-color($black, .7); - top: auto; - z-index: 5; - } -} - -.image-comment { - background-position: left top; - background-repeat: no-repeat; - height: 300px; - width: 300px; -} - - -.file-icon { - height: 100%; - width: 100%; - - &.audio { - @include file-icon('../images/icons/audio.png'); - } - - &.video { - @include file-icon('../images/icons/video.png'); - } - - &.ppt { - @include file-icon('../images/icons/ppt.png'); - } - - &.generic { - @include file-icon('../images/icons/generic.png'); - } - - &.code { - @include file-icon('../images/icons/code.png'); - } - - &.excel { - @include file-icon('../images/icons/excel.png'); - } - - &.word { - @include file-icon('../images/icons/word.png'); - } - - &.pdf { - @include file-icon('../images/icons/pdf.png'); - } - - &.patch { - @include file-icon('../images/icons/patch.png'); - } - - &.image { - @include file-icon('../images/icons/image.png'); - } -} - -.pdf-preview-spacer { - height: 5px; -} - -.pdf-max-pages { - background: $white; - bottom: 0; - display: block; - left: 0; - position: relative; - width: 100%; - - span { - @include border-radius(3px); - background: alpha-color($black, .8); - bottom: 15px; - color: $white; - display: inline-block; - height: 3em; - line-height: 3em; - padding: 0 1.5em; - position: relative; - } -} - -.post-image__column { - border: 1px solid alpha-color($black, .2); - float: left; - height: 100px; - margin: 5px 10px 5px 0; - position: relative; - width: 240px; - - &--placeholder { - visibility: hidden; - } -} - -.post-image__load { - background-position: center; - background-repeat: no-repeat; - background-size: 20px 20px; - height: 100%; - width: 100%; -} - -.post-image { - background-color: $white; - background-repeat: no-repeat; - height: 100%; - overflow: hidden; - position: relative; - text-align: center; - width: 100%; - - &.small { - background-position: center; - } - - &.normal { - background-position: top left; - } - - .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; - } - } -} - -.post-image__thumbnail { - @include cursor(zoom-in); - float: left; - height: 100%; - width: 50%; -} - -.post-image__details { - @include clearfix; - background: $white; - border-left: 1px solid $light-gray; - color: alpha-color($black, .8); - float: left; - font-size: 13px; - height: 100%; - padding: 7px; - width: 50%; - word-break: break-word; - - .post-image__name { - display: block; - margin-bottom: 3px; - } - - .post-image__download { - @include opacity(.7); - cursor: pointer; - display: inline-block; - padding-right: 7px; - } - - .post-image__type { - @include opacity(.6); - } - - .post-image__size { - @include opacity(.6); - margin-left: 4px; - } -} - -.file-details__container { - @include display-flex; - background: $white; - - .file-details { - height: 270px; - padding: 14px; - text-align: left; - vertical-align: top; - width: 320px; - - .file-details__name { - color: alpha-color($black, .9); - font-size: 16px; - margin: 5px 0; - word-break: break-word; - } - - .file-details__info { - color: alpha-color($black, .5); - } - } - - .file-details__preview { - border-right: 1px solid $light-gray; - height: 270px; - vertical-align: center; - width: 320px; - - // helper to center the image icon in the preview window - .file-details__preview-helper { - display: inline-block; - height: 100%; - vertical-align: middle; - } - } -} - -.file-playback__controls { - @include single-transition(opacity, .6s); - bottom: 0; - cursor: pointer; - font-size: 22px; - position: absolute; - right: 5px; - transition: opacity .6s; - z-index: 2; - - &.stop { - @include opacity(0); - } -} - -.view-image__loading { - background: $black; - min-height: 100px; -} diff --git a/webapp/sass/components/_inputs.scss b/webapp/sass/components/_inputs.scss deleted file mode 100644 index 4d99e00e4..000000000 --- a/webapp/sass/components/_inputs.scss +++ /dev/null @@ -1,71 +0,0 @@ -@charset 'UTF-8'; - -.form-control { - @include border-radius($border-rad); - - &:focus { - @include box-shadow(none); - } - - &.no-padding { - line-height: 32px; - padding: 0; - } - - &.no-resize { - resize: none; - } - - &[disabled], - [readonly] { - @include alpha-property(background, $white, .1); - color: inherit; - cursor: auto; - } -} - -fieldset { - &[disabled] { - .form-control { - @include alpha-property(background, $white, .1); - color: inherit; - cursor: auto; - } - } -} - -.admin-textarea { - resize: none; -} - -input { - &[type='radio'], - &[type='checkbox'] { - font-size: 14px; - margin-top: 3px; - } -} - -input::-webkit-file-upload-button { - display: none -} - -::-webkit-input-placeholder { /* Chrome/Opera/Safari */ - color: inherit; - opacity: 0.5; -} - -::-moz-placeholder { /* Firefox 19+ */ - color: inherit; - opacity: 0.5; -} - -:-ms-input-placeholder { /* IE 10+ */ - color: inherit; - opacity: 0.5; -} - -:-moz-placeholder { /* Firefox 18- */ - color: inherit; - opacity: 0.5; -} diff --git a/webapp/sass/components/_links.scss b/webapp/sass/components/_links.scss deleted file mode 100644 index 3d7472670..000000000 --- a/webapp/sass/components/_links.scss +++ /dev/null @@ -1,22 +0,0 @@ -@charset 'UTF-8'; - -a { - color: $primary-color; - cursor: pointer; - text-decoration: none; - word-break: break-word; - - &:hover, - &:focus { - color: $primary-color--hover; - } -} - -.text-danger { - color: desaturate($red, 20%); - - &:hover, - &:focus { - color: desaturate($red, 20%); - } -} diff --git a/webapp/sass/components/_mentions.scss b/webapp/sass/components/_mentions.scss deleted file mode 100644 index 37820cbd9..000000000 --- a/webapp/sass/components/_mentions.scss +++ /dev/null @@ -1,112 +0,0 @@ -@charset 'UTF-8'; - -.mention { - @include border-radius(3px); - background: $primary-color; - color: $white; - padding-bottom: 2px; - position: relative; - z-index: 10; -} - -.badge { - background-color: #777; - border-radius: 10px; - color: #fff; - display: inline-block; - font-size: 12px; - font-weight: bold; - line-height: 1; - min-width: 10px; - padding: 3px 7px; - text-align: center; - vertical-align: middle; - white-space: nowrap; -} - -.mentions__name { - @include clearfix; - cursor: pointer; - font-size: 13px; - line-height: 20px; - margin: 0; - padding: 6px 10px; - position: relative; - white-space: nowrap; - width: 100%; - z-index: 101; - - .icon { - @include opacity(.5); - display: inline-block; - margin: 0 7px 0 0; - position: relative; - text-align: center; - top: 2px; - vertical-align: top; - width: 16px; - - &.icon__globe { - svg { - height: 14px; - width: 14px; - } - } - } - - .status { - font-size: 15px; - text-align: center; - vertical-align: bottom; - width: 20px; - } - - .fa-user { - position: relative; - top: -1px; - } - - .mention--align { - @include clearfix; - text-overflow: ellipsis; - width: calc(100% - 50px); - } -} - -.mention__image { - @include border-radius(20px); - display: block; - font-size: 15px; - height: 16px; - line-height: 16px; - margin-right: 7px; - margin-top: 3px; - text-align: center; - width: 16px; - - .mention--align { - display: inline-block; - max-width: 80%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } -} - -.mention__fullname { - @include opacity(.5); -} - -.mention--highlight { - background-color: $yellow; -} - -.mention__purpose { - @include opacity(.5); - line-height: normal; - margin-left: 5px; -} - -.mention__channelname { - @include opacity(.5); -} diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss deleted file mode 100644 index 58887b0bc..000000000 --- a/webapp/sass/components/_modal.scss +++ /dev/null @@ -1,700 +0,0 @@ -@charset 'UTF-8'; - -.app__body { - - &.browser--ie { - .modal { - .modal-dialog { - @include translateY(0); - } - } - } - - .modal-body { - max-height: calc(90vh - 62px); - overflow: auto; - padding: 20px 15px; - } - - .edit-modal-body { - overflow: visible; - - .custom-textarea { - max-height: 60vh; - min-height: 8em; - } - - .suggestion-list__content { - max-height: 150px; - } - - .edit-post-footer { - display: inline-block; - font-size: 13px; - position: relative; - - .post-error { - @include opacity(.55); - font-size: .85em; - font-weight: normal; - margin-bottom: 0; - position: relative; - top: 3px; - } - } - } - - .row--invite { - .col-sm-6 { - &:first-child { - padding-right: 0; - } - } - } - - .modal__hint { - @include opacity(.8); - display: block; - font-size: .9em; - margin: 0 0 10px; - } - - .modal__error { - color: $red; - float: left; - font-size: .95em; - font-weight: normal; - margin-top: 6px; - } - - .more-table { - margin: 0; - table-layout: fixed; - } - - .modal { - color: alpha-color($black, .9); - width: 100%; - - .channel-switch-modal { - .modal-header { - background: transparent; - border: none; - min-height: 0; - padding: 0; - - .close { - top: 10px; - } - } - } - - .modal--overflow { - .modal-body { - overflow: visible; - } - } - - &.modal-image { - .modal-backdrop { - &.in { - @include opacity(.7); - } - } - } - - .custom-textarea { - border-color: $light-gray; - color: inherit; - - &:focus { - border-color: $light-gray; - box-shadow: none; - } - } - - .btn { - font-size: 13px; - - &.btn-default { - background: transparent; - border: none; - } - } - - .info__label { - @include opacity(.5); - font-size: .9em; - font-weight: 600; - margin-bottom: 3px; - } - - .info__value { - padding-left: 10px; - word-break: break-word; - } - - .team-member-list { - width: 100%; - } - - .remove__member { - color: inherit; - float: right; - font-size: 20px; - line-height: 0; - padding: 6px; - - &:hover { - color: $red; - } - } - - .modal-dialog { - margin-bottom: 0; - margin-left: auto; - margin-right: auto; - max-width: 95%; - - &.modal-xl { - width: 800px; - } - } - - .modal-push-down { - margin-top: 60px; - } - - .modal-next-bar { - height: 100%; - position: absolute; - right: 0; - top: 0; - } - - .modal-header { - @include border-radius(0); - @include clearfix; - background: $primary-color; - border: 1px solid $light-gray; - color: $white; - min-height: 56px; - padding: 14px 15px 11px; - - .modal-title { - color: $bg--gray; - float: left; - font-size: 17px; - line-height: 27px; - max-width: calc(100% - 80px); - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - .name { - color: $white; - font-weight: 600; - } - } - - .modal-action { - margin: 0; - padding: 0; - } - - .close { - @include opacity(1); - @include single-transition(all, .25s, ease-in); - color: $white; - height: 30px; - line-height: 30px; - position: absolute; - right: 10px; - text-shadow: none; - width: 30px; - z-index: 5; - - &:hover { - @include alpha-property(background, $black, .1); - } - - .sr-only { - display: none; - } - - span { - font-family: 'Open Sans', sans-serif; - line-height: 10px; - } - } - - .btn { - &.btn-primary { - float: right; - margin: -4px 33px 0 0; - position: relative; - - i { - margin-right: 5px; - } - } - } - } - - .no-channel-message { - padding: 2em 1em; - text-align: center; - - .primary-message { - font-size: 1.25em; - } - - .secondary-message { - @include opacity(.8); - margin: 1em 0 0; - } - } - - .modal-content { - @include box-shadow(0 0 10px rgba($black, .5)); - border-radius: $border-rad; - } - - .modal-chevron-icon { - font-size: 120%; - top: 50%; - } - - .modal-prev-bar { - height: 100%; - left: 0; - position: absolute; - top: 0; - } - - .modal-image { - height: 100%; - margin: 0 auto; - max-width: 100%; - position: relative; - width: 100%; - - .modal-body { - @include clearfix; - display: table; - height: 100%; - max-height: 100%; - table-layout: fixed; - width: 100%; - } - - .modal-image__content { - max-height: 85vh; - max-width: 90vw; - overflow-x: hidden; - overflow-y: visible; - } - - .post-code__container { - overflow: auto; - } - - .modal-image__wrapper { - @include border-radius(3px); - display: table-cell; - max-width: 90%; - position: relative; - text-align: center; - vertical-align: middle; - width: 100%; - - &:hover { - @include border-radius(3px 3px 0 0); - } - - &.default { - height: 80%; - width: 100%; - } - - audio, - canvas, - progress, - video { - display: block; - height: auto; - max-width: 100%; - } - - .modal-close { - @include single-transition(opacity, .6s); - @include background-size(100% 100%); - @include opacity(0); - background-image: url('../images/close.png'); - cursor: pointer; - height: 37px; - position: absolute; - right: -13px; - top: -13px; - transition: opacity .6s; - width: 37px; - z-index: 9999; - - &.modal-close--show { - @include opacity(1); - } - } - - > div { - display: inline-block; - min-height: 100px; - min-width: 320px; - position: relative; - } - - code { - min-height: 130px; - min-width: 330px; - } - - pre, - code { - display: inline-block; - } - - .post-body--code { - max-height: calc(100vh - 80px); - max-width: calc(100vw - 80px); - overflow: auto; - } - - img { - max-height: calc(100vh - 200px); - max-width: 100%; - } - - .spinner { - .file__loading { - left: 50%; - margin-left: -16px; - margin-top: -16px; - position: absolute; - top: 50%; - z-index: 2; - } - } - } - - .modal-content { - background: alpha-color($black, 0); - border: none; - box-shadow: none; - height: 100%; - padding: 0; - width: 100%; - } - - .modal-image__body { - display: table-cell; - height: 100%; - overflow: visible; - padding: 0; - position: relative; - text-align: center; - vertical-align: middle; - } - - .image-control { - background: url('../images/prev.png') left no-repeat; - float: left; - height: 45px; - margin-top: -23px; - position: relative; - top: 50%; - width: 50px; - - &.image-next { - background: url('../images/next.png') left no-repeat; - float: right; - } - } - - .loader-image { - bottom: 0; - left: 0; - margin: auto; - position: absolute; - right: 0; - top: 0; - } - - .loader-percent { - bottom: 0; - color: alpha-color($white, 0.8); - height: 20px; - left: 0; - margin: auto; - position: absolute; - right: 0; - top: 55px; - } - - .modal-button-bar { - @include single-transition(opacity, .6s); - @include border-radius(0 0 3px 3px); - @include opacity(0); - background-color: $black; - bottom: -40px; - left: 0; - line-height: 40px; - max-width: 90vw; - padding: 0 10px; - position: absolute; - right: 0; - - &.footer--show { - @include opacity(1); - } - - .image-links { - a, - span { - float: right; - } - } - - .text { - bottom: 0; - color: $white; - margin-left: 5px; - vertical-align: middle; - } - - .public-link { - margin-right: 5px; - } - } - } - - &.more-channel__modal { - .modal-body { - overflow-x: hidden; - padding: 10px 0 15px; - } - - .channel-count { - @include opacity(.8); - float: right; - margin-top: 5px; - } - } - } - - .more-modal { - - .user-list { - margin-top: 10px; - overflow-x: hidden; - overflow-y: auto; - position: relative; - } - - .modal-body { - overflow-x: hidden; - padding: 10px 0 15px; - } - - .filter-row { - margin: 5px 0 10px; - width: 300px; - - &.filter-row--full { - width: 100%; - } - } - - .member-count { - @include opacity(.8); - float: right; - margin-top: 5px; - } - - .member-show { - @include opacity(.8); - float: right; - margin-right: 3px; - margin-top: 8px; - } - - .member-select__container { - .member-count { - margin: 12px 0 0 3px; - } - - select { - @include opacity(.8); - float: right; - margin: 1px 5px 0 2px; - width: auto; - } - } - - .more-purpose { - @include opacity(.7); - } - } - -} - -.more-modal__button { - .btn { - font-size: .9em; - font-weight: 600; - height: 39px; - width: 100%; - } -} - -.more-modal__list { - display: flex; - flex-direction: column; - - .browser--ie & { - flex: 20; - } - - > div { - min-height: 100%; - overflow: auto; - } - - .popover & { - font-size: .95em; - - .more-modal__row { - padding: 5px 10px; - } - } - - .more-modal__image { - @include border-radius(60px); - flex-grow: 0; - flex-shrink: 0; - margin-top: 2px; - max-width: none; - } - - .more-modal__details { - flex-grow: 1; - flex-shrink: 1; - overflow: hidden; - padding-left: 10px; - text-overflow: ellipsis; - } - - .more-modal__actions { - flex-grow: 0; - flex-shrink: 0; - margin: 5px 0; - padding-left: 20px; - } - - .more-modal__name { - font-size: .95em; - font-weight: 600; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .more-modal__description { - @include opacity(.7); - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .more-modal__row { - border-bottom: 1px solid $light-gray; - display: flex; - padding: 10px 15px; - - &.clickable { - cursor: pointer; - } - - &:hover { - .more-modal__actions--round { - opacity: .5; - } - } - } - - .more-modal__placeholder-row { - padding: 10px 15px; - } - - .more-modal__actions--round { - height: 32px; - line-height: 32px; - opacity: 0; - text-align: center; - width: 32px; - } - - p { - @include opacity(.8); - font-size: .9em; - margin: 5px 0; - overflow: hidden; - text-overflow: ellipsis; - } -} - -.member-select__container { - position: absolute; - right: 15px; - top: 15px; -} - -.filtered-user-list { - display: flex; - flex-direction: column; - height: calc(90vh - 120px); - width: 100%; - - > div { - flex: 1 1 auto; - } - - .more-modal__list { - flex-grow: 500; - height: 1px; - } - - .filter-button { - .btn { - height: 34px; - } - } - - .filter-controls { - padding: 1em 1.5em 0; - - .filter-control__next { - float: right; - } - } - - .filter-button { - margin-left: 0; - padding-left: 0; - } -} - -.modal-invite-member { - .btn:hover { - text-decoration: underline; - } -} diff --git a/webapp/sass/components/_module.scss b/webapp/sass/components/_module.scss deleted file mode 100644 index f2180d525..000000000 --- a/webapp/sass/components/_module.scss +++ /dev/null @@ -1,25 +0,0 @@ -// Only for combining all the files in this folder -@import 'alerts'; -@import 'buttons'; -@import 'dropdown'; -@import 'emoticons'; -@import 'emojisprite'; -@import 'error-bar'; -@import 'files'; -@import 'inputs'; -@import 'links'; -@import 'mentions'; -@import 'modal'; -@import 'multi-select'; -@import 'oauth'; -@import 'popover'; -@import 'save-button'; -@import 'scrollbar'; -@import 'search'; -@import 'status-icon'; -@import 'status-dropdown'; -@import 'suggestion-list'; -@import 'tooltip'; -@import 'tutorial'; -@import 'videos'; -@import 'webrtc'; diff --git a/webapp/sass/components/_multi-select.scss b/webapp/sass/components/_multi-select.scss deleted file mode 100644 index beceb7b9c..000000000 --- a/webapp/sass/components/_multi-select.scss +++ /dev/null @@ -1,58 +0,0 @@ -@charset 'UTF-8'; - -.multi-select__container { - display: table; - padding: 0 15px; - width: 100%; - - .Select { - display: table-cell; - padding-right: 15px; - vertical-align: top; - width: 100%; - } - - .btn { - display: table-cell; - height: 36px; - min-width: 60px; - vertical-align: top; - } - - .Select-control { - border-radius: 1px; - } - - .Select-value { - white-space: nowrap; - } - - .Select-value-label { - overflow: hidden; - } -} - -.multi-select__help { - padding: 10px 15px 0; - - > div:not(.multi-select__note), - > span { - @include opacity(.6); - } -} - -.multi-select__note { - @include border-radius(3px); - display: table; - margin-top: 5px; - padding: 8px 13px; - width: 100%; - - > div { - display: table-cell; - - &.note__icon { - width: 15px; - } - } -} diff --git a/webapp/sass/components/_oauth.scss b/webapp/sass/components/_oauth.scss deleted file mode 100644 index 8ca1e6c17..000000000 --- a/webapp/sass/components/_oauth.scss +++ /dev/null @@ -1,47 +0,0 @@ -@charset 'UTF-8'; - -.prompt { - background: $white; - border: 1px solid $light-gray; - margin: 50px auto; - max-width: 90%; - padding: 1em 2em 0; - width: 600px; - - .prompt__heading { - display: table; - font-size: em(18px); - line-height: normal; - margin: 1em 0; - table-layout: fixed; - width: 100%; - - > div { - display: table-cell; - vertical-align: top; - - &:first-child { - width: 70px; - } - } - - img { - margin-right: 15px; - } - } - - .prompt__allow { - font-size: em(20px); - margin: 1em 0; - } - - .prompt__buttons { - border-top: 1px solid $light-gray; - padding: 1.5em 0; - text-align: right; - } - - .prompt__error { - display: inline-block; - } -} diff --git a/webapp/sass/components/_popover.scss b/webapp/sass/components/_popover.scss deleted file mode 100644 index be0403292..000000000 --- a/webapp/sass/components/_popover.scss +++ /dev/null @@ -1,348 +0,0 @@ -@charset 'UTF-8'; -@import 'compass/css3/transition'; - -.popover { - @include border-radius($border-rad * 2); - color: lighten($black, 25%); - font-family: inherit; - padding: 0; - - &.bottom, - &.right, - &.top, - &.left { - > .arrow { - display: none; - - &:after { - border-color: transparent; - } - } - } - - &.bottom { - margin-top: 10px; - } - - .popover-title { - @include border-radius(0); - background: alpha-color($black, .05); - max-width: 100%; - overflow: hidden; - padding: 8px 10px; - text-overflow: ellipsis; - } - - .popover-content { - word-break: break-word; - - p { - &:last-child { - margin-bottom: 5px; - } - } - } - - .popover__row { - margin: 0 -15px 0; - padding: 9px 15px 0; - - &.first { - border-top: 1px solid transparent; - margin-top: 9px; - } - - > a { - > i { - margin-right: 5px; - } - - > span { - text-transform: capitalize; - } - } - } -} - -.channel-header__info { - .popover-content { - max-height: 250px; - overflow: auto; - } -} - -.user-popover { - cursor: pointer; - display: inline-block; -} - -.code-popover { - .popover-content { - padding: 5px; - } -} - -.user-popover__image { - @include border-radius(128px); - margin: 0 0 10px; -} - -.user-popover__email { - display: block; - max-width: 200px; - overflow: hidden; - text-overflow: ellipsis; - - &[disabled] { - color: $video-circle-offline; - - &:focus, - &:hover { - color: $video-circle-offline; - text-decoration: none; - } - } - -} - -.search-help-popover { - @include single-transition(opacity, .3s, ease-in); - font-size: em(13px); - max-width: 350px; - top: 36px; - visibility: hidden; - width: 100%; - - &.autocomplete { - display: block; - - .popover-content { - padding: 10px; - position: relative; - -webkit-overflow-scrolling: touch; - } - } - - .search-autocomplete__divider { - line-height: 21px; - margin: 10px 0 5px; - position: relative; - - &:first-child { - margin-top: 5px; - } - - > span { - background: $white; - display: inline-block; - padding-right: 10px; - position: relative; - z-index: 5; - } - - &:before { - @include opacity(.2); - background: $dark-gray; - content: ''; - height: 1px; - left: 0; - position: absolute; - top: 10px; - width: 100%; - } - } - - .search-autocomplete__item { - @include border-radius(2px); - cursor: pointer; - margin: 3px 0 0 5px; - overflow: hidden; - padding: 6px 8px; - text-overflow: ellipsis; - white-space: nowrap; - - &:hover { - background: alpha-color($black, .1); - } - - &.selected { - background: alpha-color($black, .2); - } - - .mention--align { - display: inline-block; - } - - .fa { - @include opacity(.5); - margin-right: 5px; - } - - .profile-img { - height: 16px; - margin-right: 6px; - margin-top: -1px; - width: 16px; - } - } - - &.bottom > .arrow { - border-width: 9px; - left: 30px; - top: -18px; - } - - .popover-content { - max-height: 500px; - overflow: auto; - padding: 3px 13px; - } - - h4 { - font-size: 1em; - } - - ul { - padding-left: 17px; - - span { - @include opacity(.8); - } - - strong, - b { - @include opacity(1); - } - } - - .tooltip-inner { - max-width: 100%; - } - - &.visible { - @include opacity(1); - visibility: visible; - } -} - -.member-list__popover { - margin-left: -95px; - max-width: initial; - - .more-modal__body { - border-bottom: 1px solid transparent; - border-top: 1px solid transparent; - max-height: 275px; - overflow: auto; - position: relative; - } - - .more-modal__header { - padding: 14px 20px; - - .icon { - @include opacity(.8); - margin: 0 38px 0 24px; - position: relative; - top: 2px; - } - - span { - font-weight: 600; - } - } - - .more-modal__button { - .btn { - height: 42px; - } - } - - .more-modal__list { - .more-modal__row { - border: none; - cursor: pointer; - height: 50px; - margin: 1px 0; - overflow: hidden; - padding: 6px 19px 0 20px; - - &:hover { - border-left: 3px solid transparent; - padding-left: 17px; - - .more-modal__actions { - @include opacity(1); - } - - .more-modal__name { - font-weight: 600; - } - } - - &.more-modal__row--button { - border-left: none; - height: 40px; - position: relative; - - button { - font-weight: 500; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - } - } - } - - .more-modal__name { - font-size: 13.5px; - font-weight: normal; - } - - .more-modal__image { - margin: 0; - position: relative; - top: -1px; - } - - .more-modal__details { - line-height: 39px; - padding-left: 30px; - } - - .more-modal__actions { - @include opacity(0); - line-height: 42px; - margin: 0; - - .icon { - position: relative; - top: 2px; - } - } - } - - .popover-content { - max-height: 380px; - padding: 0; - position: relative; - width: 260px; - - .text-nowrap { - font-size: 13px; - line-height: 26px; - overflow: hidden; - padding: 6px 10px; - width: 100%; - } - - .more__name { - margin-left: 6px; - max-width: 140px; - overflow: hidden; - text-overflow: ellipsis; - } - } -} diff --git a/webapp/sass/components/_save-button.scss b/webapp/sass/components/_save-button.scss deleted file mode 100644 index dedef3255..000000000 --- a/webapp/sass/components/_save-button.scss +++ /dev/null @@ -1,7 +0,0 @@ -@charset 'UTF-8'; - -.save-button { - .icon { - margin-right: 10px; - } -} diff --git a/webapp/sass/components/_scrollbar.scss b/webapp/sass/components/_scrollbar.scss deleted file mode 100644 index 5c8f06a2d..000000000 --- a/webapp/sass/components/_scrollbar.scss +++ /dev/null @@ -1,78 +0,0 @@ -@charset 'UTF-8'; - -::-webkit-scrollbar { - height: 8px; // for horizontal scrollbars - width: 8px; // for vertical scrollbars -} - -::-webkit-scrollbar-track { - background: rgba(0, 0, 0, .1); -} - -::-webkit-scrollbar-thumb { - @include border-radius($border-rad * 2); - background: rgba(0, 0, 0, .2); -} - -body { - &.app__body { - scrollbar-3dlight-color: #7D7E94; - scrollbar-arrow-color: #C1C1D1; - scrollbar-darkshadow-color: #2D2C4D; - scrollbar-face-color: rgba(0, 0, 0, .1); - scrollbar-highlight-color: #7D7E94; - scrollbar-shadow-color: #2D2C4D; - scrollbar-track-color: rgba(0, 0, 0, .1); - } - - .ps { - > .ps__scrollbar-y-rail { - > .ps__scrollbar-y { - width: 6px !important; - } - } - - &:hover { - > .ps__scrollbar-y-rail { - &:hover { - background: transparent; - } - } - } - } -} - -.scrollbar--horizontal, -.scrollbar--vertical { - @include border-radius(2px); - @include alpha-property(background-color, $black, .5); -} - -.scrollbar--view { - -ms-overflow-style: none; - - .browser--ie & { - margin: 0 !important; - } -} - - -.ps-container { - &:hover { - .ps-scrollbar-x-rail, - .ps-scrollbar-y-rail { - @include opacity(.3); - } - } - - > .ps-scrollbar-y-rail { - width: 10px; - - &:hover { - .ps-scrollbar-y { - @include opacity(.6); - width: 6px; - } - } - } -} diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss deleted file mode 100644 index 8d80d5d82..000000000 --- a/webapp/sass/components/_search.scss +++ /dev/null @@ -1,163 +0,0 @@ -@charset 'UTF-8'; - -.search-bar__container { - .channel-header__links { - .sidebar--right & { - line-height: 25px; - } - } -} - -.icon--rotate { - @include animation(spin .7s infinite linear); -} - -.search-item-snippet { - @include clearfix; - text-overflow: ellipsis; - - ul, - ol { - padding-left: 20px; - } -} - -.search__icon { - left: 10px; - position: absolute; - top: 8px; -} - -.sidebar__search-clear { - @include opacity(.5); - color: $dark-gray; - cursor: pointer; - margin-right: 20px; - position: absolute; - right: 0; - top: 12px; - visibility: hidden; - width: 40px; -} - -.search__form { - position: relative; - - .search-bar__container & { - @include border-radius(50px); - border: 1px solid $light-gray; - margin: 16px 10px 0 0; - width: 229px; - } - - .sidebar--right & { - width: 100%; - } - - .search-bar { - background: transparent; - border: none; - box-shadow: none; - font-size: 14px; - height: 35px; - outline: none; - padding: 0 30px 0 40px; - width: 100%; - } - - .fa-spin { - @include opacity(0.5); - font-size: 1.2em; - position: absolute; - right: 27px; - top: 27px; - - .search-bar__container & { - right: 12px; - top: 10px; - } - } -} - -.search-items-container { - @include flex(1 1 auto); - -webkit-overflow-scrolling: touch; - height: calc(100% - 56px); - overflow: auto; - padding-top: 10px; - position: relative; -} - -.search-items-container div.loading { - text-align: center; -} - -.search-items-container img { - display: inline-block; -} - -.search-results-header { - border-bottom: $border-gray; - color: #999999; - font-size: 1em; - font-weight: 400; - height: 44px; - line-height: 44px; - padding: 0 10px; - text-transform: uppercase; -} - -.search-item__container { - .post { - margin: 0; - padding: 0 1em 1em; - - &:first-child { - border: none; - } - - .post__header { - padding-right: 70px; - } - - .search-channel__name { - font-weight: 600; - margin: 0 0 10px; - } - } -} - -.col__controls { - font-size: 13px; - position: absolute; - right: 0; - top: 0; - - a { - vertical-align: top; - } - - - .search-item__jump { - font-size: 13px; - position: relative; - top: 1px; - } - - .search-item__comment { - margin-right: 5px; - } -} - -.search-item-time { - @include opacity(.7); - font-size: .9em; -} - -.search-results-none { - padding: 10px; -} - -.search-highlight { - background-color: $yellow; -} diff --git a/webapp/sass/components/_spinner-button.scss b/webapp/sass/components/_spinner-button.scss deleted file mode 100644 index e683ad4f4..000000000 --- a/webapp/sass/components/_spinner-button.scss +++ /dev/null @@ -1,8 +0,0 @@ -@charset 'UTF-8'; - -.spinner-button__gif { - height: 15px; - margin-top: 2px; - width: 15px; -} - diff --git a/webapp/sass/components/_status-dropdown.scss b/webapp/sass/components/_status-dropdown.scss deleted file mode 100644 index 3a6b89835..000000000 --- a/webapp/sass/components/_status-dropdown.scss +++ /dev/null @@ -1,5 +0,0 @@ -@charset 'UTF-8'; - -#status-dropdown { - cursor: pointer; -} diff --git a/webapp/sass/components/_status-icon.scss b/webapp/sass/components/_status-icon.scss deleted file mode 100644 index 022cffa69..000000000 --- a/webapp/sass/components/_status-icon.scss +++ /dev/null @@ -1,97 +0,0 @@ -@charset 'UTF-8'; - -.status-wrapper { - display: inline-block; - height: 32px; - position: relative; - - .status { - border-radius: 100px; - bottom: -4px; - height: 15px; - line-height: 0; - margin: 0; - position: absolute; - right: -3px; - top: auto; - width: 15px; - - .modal & { - bottom: -6px; - } - - &.status-edit { - text-align: center; - - i { - @include opacity(1); - font-size: 10px; - position: relative; - top: 4px; - } - } - - - svg { - max-height: 11px; - position: relative; - top: 2px; - } - } -} - -.status { - display: inline-block; - margin: 0 7px 0 1px; - position: relative; - top: 2px; - width: 15px; - - &.status--group { - border-radius: 2px; - font-size: 10px; - font-weight: 600; - height: 15px; - left: 1px; - line-height: 14px; - margin: 0 9px 0 -1px; - text-align: center; - top: -2px; - width: 15px; - - .mentions__name & { - height: 18px; - left: 0; - line-height: 18px; - margin-left: 0; - margin-right: 6px; - text-align: center; - width: 17px; - } - } - - svg { - max-height: 14px; - } - - i, - path, - ellipse { - @include opacity(.5); - - &.online--icon, - &.away--icon { - @include opacity(1); - } - } - - .fa-lock { - margin-left: 1px; - } - - .fa-globe { - position: relative; - top: -1px; - } -} - diff --git a/webapp/sass/components/_suggestion-list.scss b/webapp/sass/components/_suggestion-list.scss deleted file mode 100644 index 05a83c32d..000000000 --- a/webapp/sass/components/_suggestion-list.scss +++ /dev/null @@ -1,92 +0,0 @@ -@charset 'UTF-8'; - -.suggestion-list { - @extend %popover-box-shadow; - width: 100%; - z-index: 100; - - .suggestion-list__item { - &:hover { - background: alpha-color($black, .1); - } - } -} - -.suggestion-list--top { - bottom: 100%; - position: absolute; -} - -.suggestion-list--bottom { - height: 0; - position: relative; -} - -.suggestion-list__content { - -webkit-overflow-scrolling: touch; - background-color: $white; - border: $border-gray; - max-height: 292px; - overflow-x: hidden; - overflow-y: scroll; - padding-bottom: 5px; - width: 100%; - - .command { - border-bottom: 1px solid $light-gray; - font-size: .95em; - line-height: 24px; - padding: 5px 10px 8px; - position: relative; - width: 100%; - z-index: 101; - - .command__desc { - @include opacity(.5); - line-height: normal; - margin-left: 5px; - } - } -} - -.suggestion-list__content--top { - bottom: 0; - position: absolute; -} - -.suggestion-list--bottom { - position: relative; -} - -.suggestion-loader { - margin: 6px 11px; -} - -.suggestion-list__divider { - line-height: 21px; - margin: 5px 0 5px 5px; - position: relative; - - &:first-child { - margin-top: 5px; - } - - > span { - display: inline-block; - font-size: .9em; - padding: 0 10px 0 5px; - position: relative; - z-index: 5; - } - - &:before { - @include opacity(.2); - background: $dark-gray; - content: ''; - height: 1px; - left: 0; - position: absolute; - top: 11px; - width: 100%; - } -} diff --git a/webapp/sass/components/_tooltip.scss b/webapp/sass/components/_tooltip.scss deleted file mode 100644 index 6953dad58..000000000 --- a/webapp/sass/components/_tooltip.scss +++ /dev/null @@ -1,22 +0,0 @@ -@charset 'UTF-8'; - -.tooltip { - .tooltip-inner { - font-size: 13px; - font-weight: 500; - padding: 3px 10px 4px; - word-break: break-word; - } - - &.text-nowrap { - .tooltip-inner { - white-space: nowrap; - } - } -} - -#webrtcTooltip { - .tooltip-inner { - word-break: normal; - } -} diff --git a/webapp/sass/components/_tutorial.scss b/webapp/sass/components/_tutorial.scss deleted file mode 100644 index 0eae59629..000000000 --- a/webapp/sass/components/_tutorial.scss +++ /dev/null @@ -1,239 +0,0 @@ -@charset 'UTF-8'; - -.tip-backdrop { - background: alpha-color($black, .5); - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - z-index: 999; -} - -.tip-overlay { - @include border-radius(3px); - background-color: $white; - max-width: 90%; - padding: 20px; - position: absolute; - width: 350px; - z-index: 1000; - - .arrow { - border-color: transparent; - border-style: solid; - border-width: 10px; - display: block; - height: 0; - position: absolute; - width: 0; - } - - &.tip-overlay--sidebar { - margin: 50px 0 0 10px; - max-width: 75%; - min-height: 330px; - - .tutorial__footer { - bottom: 20px; - left: 0; - padding: 0 20px; - position: absolute; - width: 100%; - } - - .arrow { - border-left-width: 0; - border-right-color: $white; - left: -10px; - margin-top: -10px; - top: 80px; - } - } - - &.tip-overlay--header--left { - margin: 10px 0 0 10px; - - .arrow { - border-left-width: 0; - border-right-color: $white; - left: -10px; - top: 15px; - } - } - - &.tip-overlay--header--bottom { - margin-top: -10px; - - .arrow { - border-bottom-color: $white; - border-top-width: 0; - left: 50%; - margin-left: -10px; - top: -10px; - } - } - - &.tip-overlay--chat { - margin-top: -10px; - - .arrow { - border-bottom-width: 0; - border-top-color: $white; - bottom: -10px; - left: 50%; - margin-left: -10px; - } - } - - h4 { - font-size: em(16px); - font-weight: 600; - margin: 5px 0 15px; - } - - p { - font-size: 13px; - line-height: 1.6; - - strong { - font-weight: 600; - } - } - - .btn { - @include border-radius(3px); - background: alpha-color($black, .3); - border: none; - color: $white; - margin: 10px 0; - - &:hover, - &:active, - &:focus { - background: alpha-color($black, .4); - border: none; - color: $white; - } - } - - .tip-opt { - font-size: 12px; - - span { - @include opacity(.9); - } - } - - .tutorial__circles { - margin: 1.5em 0 -1.7em -4px; - - .circle { - height: 7px; - margin: 0 4px; - width: 7px; - } - } -} - -.tip-button { - cursor: pointer; - position: relative; - right: -10px; - top: -10px; - z-index: 998; -} - -.tip-div { - position: absolute; - right: 0; - top: 0; - - &.tip-overlay--header { - right: 2px; - top: 21px; - - .tip-button { - @include opacity(.8); - } - } - - &.tip-overlay--sidebar { - @include opacity(.8); - left: 0; - top: -9px; - } -} - -.tutorial-steps__container { - display: table; - height: 100%; - left: 0; - position: absolute; - text-align: center; - top: 0; - width: 100%; - - .tutorial__content { - display: table-cell; - vertical-align: middle; - - .tutorial__steps { - display: inline-block; - margin-bottom: 50px; - max-width: 310px; - min-height: 480px; - position: relative; - text-align: left; - } - } - - .tutorial__footer { - bottom: 0; - position: absolute; - } - - h1 { - font-size: em(40px); - font-weight: 600; - margin: -20px 0 30px; - } - - h3 { - font-size: em(24px); - font-weight: 600; - margin-bottom: 30px; - } - - .tutorial__circles { - bottom: 25px; - position: absolute; - } - - .tutorial-skip { - margin-left: 13px; - } -} - -.tutorial__circles { - margin: 2em 0; - - .circle { - @include border-radius(9px); - @include opacity(.2); - background: $black; - display: inline-block; - height: 9px; - margin: 0 5px; - width: 9px; - - &.active { - @include opacity(1); - background: $primary-color; - } - } -} - -.tutorial__app-icons { - margin: 2em 0; -}
\ No newline at end of file diff --git a/webapp/sass/components/_videos.scss b/webapp/sass/components/_videos.scss deleted file mode 100644 index 16e3468d1..000000000 --- a/webapp/sass/components/_videos.scss +++ /dev/null @@ -1,95 +0,0 @@ -@charset 'UTF-8'; - -.post { - .video-div { - margin-bottom: 8px; - max-width: 480px; - position: relative; - - .video-thumbnail { - height: auto; - max-width: 100%; - } - - .video-thumbnail__error { - height: 100%; - line-height: 2; - padding: 110px 0; - text-align: center; - width: 100%; - - .fa { - @include opacity(.5); - } - - div { - font-size: 1.2em; - } - } - - .block { - background-color: alpha-color($black, .5); - border-radius: 10px; - height: 150px; - left: 50%; - margin: -75px 0 0 -100px; - position: absolute; - top: 50%; - width: 200px; - } - } - - .video-type { - @include opacity(.8); - font-size: 15px; - margin: 0; - padding: 0; - } - - .video-title { - font-size: 15px; - margin-top: 3px; - } - - .play-button { - @include border-radius(14px); - border: 4px solid alpha-color($white, .4); - height: 100px; - position: absolute; - right: 51px; - top: 26px; - width: 100px; - - span { - border-bottom: 36px solid transparent; - border-left: 60px solid alpha-color($white, .4); - border-top: 36px solid transparent; - height: 0; - left: 20px; - position: absolute; - top: 10px; - width: 0; - } - } - - .img-div { - -moz-force-broken-image-icon: 1; - border-radius: 5px; - margin-bottom: 8px; - max-height: 500px; - max-width: 450px; - position: relative; - - &.placeholder { - height: 500px; - } - - .sidebar--right & { - max-width: 100%; - } - } - - .video-loading { - height: 360px; - } -} diff --git a/webapp/sass/components/_webrtc.scss b/webapp/sass/components/_webrtc.scss deleted file mode 100644 index 05ef408e2..000000000 --- a/webapp/sass/components/_webrtc.scss +++ /dev/null @@ -1,331 +0,0 @@ -@charset 'UTF-8'; - -.webrtc__header { - @include webrtc-button; - - svg { - position: relative; - } -} - -.webrtc__notification--rhs { - background: $button--ready; - border-radius: 3px 0 0 3px; - color: $white; - cursor: pointer; - left: 50%; - margin-left: -150px; - overflow: hidden; - padding: 10px 15px; - position: absolute; - text-align: center; - text-overflow: ellipsis; - top: 0; - white-space: nowrap; - width: 300px; - z-index: 9999; - - &:empty { - display: none; - } - - .fa { - margin-right: 6px; - } -} - -.webrtc__error { - padding: 0 20px; - text-align: center; - - .sidebar--right--expanded & { - bottom: 80px; - padding: 0 20px; - position: absolute; - text-align: center; - width: 100%; - } - - .form-group { - padding: 0 20px; - position: relative; - text-align: center; - z-index: 9999; - } - - .control-label { - @include border-radius(3px); - background: #f2f2f2; - color: alpha-color($black, .7); - font-size: 14px; - font-weight: normal; - margin: 1em 0 -1em; - padding: .7em 1em; - } - - .has-error { - .control-label { - color: #a94442; - font-size: .95em; - - &.warning { - color: #444; - - &:before { - display: none; - } - } - - &:before { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - color: #a94442; - content: '\F071'; - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - margin-right: 4px; - text-rendering: auto; - transform: translate(0, 0); - } - } - } -} - -#videos { - background: $black; - font-size: 0; - height: 300px; - left: 0; - pointer-events: none; - position: relative; - text-align: center; - width: 100%; - - #main-video video { - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - } - - #local-video { - border: 1px solid gray; - max-width: 30%; - opacity: 1; - position: absolute; - right: 10px; - top: 10px; - transition: opacity 1s; - z-index: 2; - - &.full { - background: $black; - border: none; - height: 100%; - max-width: 100% !important; - right: 0; - top: 0; - width: 100%; - } - - video { - -moz-transform: scale(-1, 1); - -ms-transform: scale(-1, 1); - -o-transform: scale(-1, 1); - -webkit-transform: scale(-1, 1); - height: 100%; - max-height: 100%; - max-width: 100%; - object-fit: cover; - transform: scale(-1, 1); - transition: opacity 1s; - width: 100%; - } - } - - .webrtc__local-image { - position: absolute; - right: 10px; - top: 10px; - z-index: 2; - - img { - border-radius: 50%; - height: 64px; - max-width: 100%; - width: 64px; - } - } - - .webrtc__remote-image { - background-color: $black; - border: 1px solid alpha-color($black, .2); - padding: 40px 0; - - img { - border-radius: 50%; - max-height: 128px; - max-width: 128px; - width: 100%; - } - } - - .webrtc__remote-mute { - bottom: 0; - position: absolute; - right: 10px; - z-index: 9999; - } -} - -.webrtc-buttons { - margin-top: 1.2em; - text-align: center; - - .webrtc-icons__call { - border-radius: 48px; - - circle { - fill: $button--ready; - } - - &:hover { - cursor: pointer; - - circle { - fill: darken($button--ready, 5%); - } - } - - &[disabled] { - circle { - fill: $video-circle-offline; - } - } - } - - .webrtc-icons__cancel { - border-radius: 48px; - - circle { - fill: $button--cancel; - } - - &:hover { - cursor: pointer; - - circle { - fill: darken($button--cancel, 5%); - } - } - } -} - -.webrtc-icons { - &.active { - svg { - transform: translateY(0); - } - } - - svg { - border-radius: 48px; - margin: 5px; - - path { - &.on { - display: block; - } - - &.off { - display: none; - } - } - } -} - -.connecting { - position: absolute; - top: 0; - width: 100%; - - .loading-screen { - background-color: rgba(0,0,0, .3); - color: $connecting; - margin-left: 5px; - padding: 20px; - position: relative; - top: 75px; - width: 97%; - - .loading__content { - .round { - background: $connecting !important; - } - } - } -} - -.webrtc-notification { - background-color: $webrtc-notification-bg; - color: $white; - left: calc(50% - 200px); - padding: 20px 30px 10px; - position: absolute; - text-align: center; - top: calc(50% - 115px); - width: 400px; - z-index: 99999; - - .webrtc-buttons { - margin-top: 1.2em; - text-align: center; - - .webrtc-icons__pickup { - circle { - fill: $button--pickup; - } - - &:hover { - cursor: pointer; - - circle { - fill: darken($button--pickup, 3%); - } - } - } - } -} - -.sidebar--right--expanded { - #videos { - height: calc(100% - 90px); - position: absolute; - - #main-video { - height: 100%; - - video { - height: 100%; - width: 100%; - } - } - } - - .webrtc-buttons { - bottom: 15px; - position: absolute; - width: 100%; - } - - #videos { - #local-video { - max-width: 200px; - } - } - - #videos.small { - position: relative; - } -} diff --git a/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss deleted file mode 100644 index 7bf6c08ad..000000000 --- a/webapp/sass/layout/_content.scss +++ /dev/null @@ -1,95 +0,0 @@ -@charset 'UTF-8'; - -.inner-wrap { - &.move--left, - &.webrtc--show { - .search-bar__container { - display: none; - } - - .search-btns { - display: none; - } - - .header-list__right { - // the negative margin-right is used - // to prevent the icons in the header from - // moving to the left when the RHS is open - // - // the below z-index is used to ensure the icons - // stays on the top and don't get hidden by the - // search's input block - float: right; - padding-right: 0px !important; - position: relative; - z-index: 6; - } - } - - &.move--right { - .search-bar__container { - display: none; - } - - .search-btns { - display: none; - } - - .header-list__right { - // the negative margin-right is used - // to prevent the icons in the header from - // moving to the left when the RHS is open - // - // the below z-index is used to ensure the icons - // stays on the top and don't get hidden by the - // search's input block - float: right; - margin-right: -18px; - padding-right: 0px !important; - position: relative; - z-index: 6; - } - } -} - -.app__content { - @include display-flex; - @include flex-direction(column); - background: $white; - height: 100%; - margin-left: 220px; - padding-top: 50px; - position: relative; - - .channel__wrap & { - padding-top: 0; - } -} - -#archive-link-home { - @include flex(0 0 auto); - cursor: pointer; - font-size: 13px; - - .fa { - @include opacity(.7); - font-size: 11px; - } - - a { - color: inherit; - display: block; - padding: 10px 20px; - width: 100%; - } -} - -.delete-message-text { - margin-top: 10px; -} - -.col-sm-auto { - padding-left: 15px; - padding-right: 15px; -} - diff --git a/webapp/sass/layout/_footer.scss b/webapp/sass/layout/_footer.scss deleted file mode 100644 index 36fdbd55b..000000000 --- a/webapp/sass/layout/_footer.scss +++ /dev/null @@ -1,30 +0,0 @@ -@charset 'UTF-8'; - -.footer-pane { - background: $bg--gray; - padding-bottom: 1em; - - .footer-link { - padding: 0 1.5em; - - &.copyright { - color: $dark-gray; - padding-right: 0; - } - } - - .footer-site-name { - font-size: 14px; - font-weight: bold; - padding: 1.5em 0 1em; - text-transform: uppercase; - } -} - -.footer, -.footer-pane, -.footer-push { - height: 89px; -} - - diff --git a/webapp/sass/layout/_forms.scss b/webapp/sass/layout/_forms.scss deleted file mode 100644 index a49acf3e3..000000000 --- a/webapp/sass/layout/_forms.scss +++ /dev/null @@ -1,93 +0,0 @@ -@charset 'UTF-8'; - -.radio, -.checkbox { - &.margin-bottom--none { - margin-bottom: 0; - } -} - -.form-horizontal { - .modal-intro { - margin: -10px 0 30px; - } - - .form__label { - font-size: 1.1em; - font-weight: 600; - padding-right: 3px; - text-align: left; - - &.light { - @include opacity(.6); - font-size: 1.05em; - font-style: italic; - font-weight: normal; - padding-top: 2px; - } - } - - .input__help { - @include opacity(.8); - color: inherit; - margin: 10px 0 0 0; - word-break: break-word; - - &.dark { - @include opacity(1); - } - - &.error { - color: darken($red, 20%); - } - } - - .form-control { - font-weight: normal; - } - - .form-group { - margin-bottom: 25px; - - &.less { - margin-bottom: 10px; - } - } -} - -.help-block { - color: $dark-gray; - font-size: .95em; - margin: 10px 0 0; -} - -.form-group { - &.form-group--small { - margin-bottom: 10px; - } -} - -.has-error { - .help-block, - .radio, - .checkbox, - .radio-inline, - .checkbox-inline { - color: $red; - } - - .form__label { - &.control-label { - color: inherit !important; - } - } - - &.radio, - &.checkbox, - &.radio-inline, - &.checkbox-inline { - label { - color: $red; - } - } -} diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss deleted file mode 100644 index 4b7348d7b..000000000 --- a/webapp/sass/layout/_headers.scss +++ /dev/null @@ -1,534 +0,0 @@ -@charset 'UTF-8'; - -.channel-header { - @include flex(0 0 70px); - border-bottom: 1px solid; - font-size: 14px; - position: relative; - width: 100%; - z-index: 9; - - .flex-parent { - display: flex; - } - - .flex-child { - &:first-child { - flex: 1; - min-width: 0; - padding-left: 20px; - } - - .markdown__paragraph-inline { - overflow: hidden; - text-overflow: ellipsis; - width: calc(100% - 50px); - } - } - - .channel-header__icon { - @include border-radius(50%); - border: 1px solid; - cursor: pointer; - height: 37px; - line-height: 36px; - margin: 16px 10px 0 0; - min-width: 30px; - text-align: center; - width: 37px; - - &.wide { - @include border-radius(37px); - padding: 0; - white-space: nowrap; - width: auto; - - > div { - padding: 0 13px 0 15px; - } - } - - .icon__text { - font-weight: 600; - margin-right: 9px; - } - - a { - display: block; - } - - .fa { - font-size: 19px; - } - - & + div { - display: none; - } - - .icon { - position: relative; - } - - .icon__pin, - .icon__members { - top: 2px; - } - - .icon__mentions { - top: 5px; - } - - .icon__flag { - top: 3px; - } - } - - .move--left & { - .icon--hidden { - display: none; - } - } - - &.alt { - margin: 0; - - th { - font-weight: normal; - vertical-align: top; - - &.header-list__right { - padding-right: 4px; - white-space: nowrap; - } - } - - td { - border: none; - } - } - - .heading { - display: inline-block; - font-size: 17px; - font-weight: 400; - margin: 0 4px 0 0; - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: top; - white-space: nowrap; - } - - .caret { - margin-top: 3px; - } - - .more { - color: #81848b; - display: inline-block; - font-size: 13px; - text-transform: capitalize; - vertical-align: top; - } - - .disabled { - color: #999999; - } -} - -.row { - &.header { - position: relative; - - .channel__wrap & { - display: none; - } - } -} - -.header-dropdown__icon { - color: inherit; - font-size: 21px; - margin-left: 1px; - position: relative; - top: 2px; -} - -.channel-header__info { - margin-top: 12px; - white-space: nowrap; - .header-dropdown__icon { - color: $dark-gray; - } - .channel-header__title { - > a { - display: inline-block; - text-decoration: none; - width: calc(100% - 65px); - } - - .modal { - white-space: normal; - } - } - - .channel-header__description { - height: 19px; - margin-top: 3px; - margin-bottom: 13px; - overflow: hidden; - position: relative; - text-overflow: ellipsis; - width: calc(100% - 18px); - - .markdown__heading { - font-size: 1em; - margin: 0; - } - - &.light { - @include opacity(.6); - color: inherit; - - &:hover, - &:focus { - color: inherit; - } - } - - .markdown-inline-img { - max-height: 45px; - } - } - - .status { - width: 18px; - - svg { - max-height: 20px; - width: 16px; - } - } -} - -.channel-intro { - margin: 0 auto 10px; - padding: 0 15px; - - &.channel-intro--centered { - max-width: 1020px; - } - - .intro-links { - display: inline-block; - margin: 0 1.5em 10px 0; - - .fa { - margin-right: 5px; - } - } - - .channel-intro-profile { - margin-top: 5px; - - .user-popover { - max-width: calc(100% - 100px); - overflow: hidden; - text-overflow: ellipsis; - } - } - - .channel-intro-img { - .status-wrapper { - height: 50px; - margin: 0 10px 10px 0; - } - - img { - @include border-radius(100px); - } - } - - .channel-intro__title { - font-size: 20px; - font-weight: 600; - margin-bottom: 15px; - } - - .channel-intro__content { - @include border-radius(3px); - background: $bg--gray; - padding: 10px 15px; - } -} - -// Team Header in Sidebar -.sidebar--left, -.sidebar--menu, -.admin-sidebar { - - .divider { - border-top: 1px solid transparent; - margin: 0.5em 0; - - & + .divider { - display: none; - } - } - - .team__header { - @include legacy-pie-clearfix; - @include display-flex(); - @include flex-direction(row-reverse); - padding: 16px 40px 12px 12px; - position: relative; - - &:before { - @include single-transition(all, .05s, linear); - background: none; - content: ''; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - } - - &:hover { - &:before { - @include alpha-property(background, $black, .1); - } - - .user__name { - color: $white; - } - - .sidebar-header-dropdown { - .sidebar-header-dropdown__toggle { - @include opacity(1); - } - } - - .navbar-right { - .dropdown-toggle { - @include opacity(1); - } - } - } - - a { - text-decoration: none; - @include flex-grow(1); - } - - .sidebar-header-dropdown, - .admin-navbar-dropdown { - font-size: .85em; - height: 100%; - left: 0; - margin-right: -22px; - position: absolute; - right: 22px; - top: 0; - - li { - width: 100%; - } - - .sidebar-header-dropdown__toggle, - .admin-navbar-dropdown__toggle { - @include opacity(.8); - @include single-transition(all, .1s, linear); - background: none; - color: $white; - display: block; - font-size: 1em; - height: 100%; - left: 0; - line-height: 1.8; - padding: 10px; - width: 100%; - } - - .dropdown-menu { - margin-right: 10px; - margin-top: 4px; - width: 199px; - - a { - overflow: hidden; - padding: 3px 20px; - text-overflow: ellipsis; - } - } - - .sidebar-header-dropdown__icon, - .admin-navbar-dropdown__icon { - border-radius: 36px; - fill: $white; - float: right; - height: 36px; - line-height: 36px; - position: relative; - right: -3px; - text-align: center; - top: 7px; - width: 36px; - } - } - - .user__picture { - @include border-radius(36px); - float: left; - height: 36px; - width: 36px; - } - - .header__info { - @include clearfix; - @include flex-grow(1); - color: $white; - padding-left: 8px; - position: relative; - } - - .team__name, - .user__name { - display: block; - font-size: 14px; - font-weight: 600; - max-width: 100%; - overflow: hidden; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - } - - .team__name { - line-height: 22px; - } - - .user__name { - @include single-transition(all, .1s, linear); - @include alpha-property(color, $white, .8); - font-size: 14px; - font-weight: 400; - line-height: 18px; - } - } - - .search__clear { - display: none; - } -} - -#navbar { - .navbar-default { - .navbar-toggle { - &.menu-toggle { - padding: 0 1em; - } - } - } -} - -.channel-header__navbar { - font-size: 16px; - - .heading { - margin-right: 3px; - } - - .header-dropdown__icon { - top: 1px; - } -} - -.channel-header__favorites { - @include opacity(.5); - float: left; - height: 20px; - margin: 0 8px 0 0; - padding-top: 3px; - position: relative; - z-index: 1; - - &.inactive { - color: inherit; - - &:active { - color: inherit; - } - } - - &.active { - @include opacity(1); - } - - i { - font-size: 17px; - } -} - -.app__body { - - .channel-header__links { - display: inline-block; - font-family: 'Open Sans', sans-serif; - font-size: 22px; - height: 30px; - line-height: 26px; - margin-right: 1px; - text-align: center; - width: 30px; - - th { - &:last-child { - div { - margin-right: 10px; - } - } - } - - .channel__wrap.move--left &, - .channel__wrap.webrtc--show & { - position: absolute; - right: -400px; - top: 14px; - } - - .icon__flag { - svg { - height: 19px; - position: relative; - top: 2px; - width: 19px; - } - } - - > a { - @include opacity(.6); - @include single-transition(all, .1s, ease-in); - color: inherit; - text-decoration: none; - - &:hover { - @include opacity(0.7); - } - - &:focus { - color: inherit; - } - - &.active { - color: $primary-color; - @include opacity(1); - - .icon { - fill: $primary-color; - } - } - } - } - -} diff --git a/webapp/sass/layout/_markdown.scss b/webapp/sass/layout/_markdown.scss deleted file mode 100644 index d15c00b1a..000000000 --- a/webapp/sass/layout/_markdown.scss +++ /dev/null @@ -1,223 +0,0 @@ -@charset 'UTF-8'; - -h1 { - font-size: 28px; -} - -h2 { - font-size: 25px; -} - -h3 { - font-size: 22px; -} - -h4 { - font-size: 19px; -} - -h5 { - font-size: 15px; -} - -h6 { - font-size: 1em; -} - -.markdown__link { -} - -.markdown__heading { - font-weight: 700; - line-height: 1.5; - margin: 10px 0; - - &:first-child { - margin: 5px 0 10px; - } - - .emoticon { - min-height: 1.5em; - min-width: 1.5em; - vertical-align: top; - } -} - -.markdown__paragraph-inline { - display: inline; - - + .markdown__paragraph-inline { - margin-left: 4px; - } -} - -#post-list { - .markdown-inline-img { - -moz-force-broken-image-icon: 1; - margin: 5px 0; - max-height: 500px; - } -} - -.post-code { - overflow-x: auto; - overflow-y: hidden; - position: relative; - - code { - border: 1px solid rgba(221,221,221,1); - border-radius: .25em; - display: block; - font-size: 13px; - margin: 5px 0; - overflow-x: auto; - padding: 6.5px; - text-align: left; - white-space: pre; - } - - td { - padding: 0 .5em; - vertical-align: top; - } - - &:hover .post-code__language { - @include opacity(1); - } - - &--wrap code { - white-space: pre-wrap; - } - - .hljs { - position: relative; - visibility: visible; - } -} - -.post-code__language { - @include opacity(0); - @include transition(opacity, .6s); - @include unselectable; - background: #21586d; - border-radius: 0 0 0 2px; - color: $white; - padding: 4px 10px 5px; - position: absolute; - right: 0; - top: 5px; - z-index: 5; -} - -.post-code__lineno { - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - -webkit-user-select: none; - border-right: 1px solid #aaa; - color: #aaa; - margin-right: .5em; - text-align: right; - user-select: none; -} - -.post-code__search-highlighting { - color: transparent; - right: 6.5px; - left: 6.5px; - pointer-events: none; - position: absolute; - @include user-select(none); -} - -.post__body { - hr { - @include opacity(.2); - background-color: #e7e7e7; - border: 0 none; - height: 4px; - margin: 15px 0 16px; - padding: 0; - } - - .codespan__pre-wrap { - code { - white-space: pre-wrap; - } - } -} - -.markdown__table { - background: $white; - margin: 5px 0 10px; - - th, - td { - border: 1px solid #ddd; - padding: 6px 13px; - } - - tbody tr { - background: $white; - - &:nth-child(2n) { - background-color: #f8f8f8; - } - } -} - -blockquote { - border: none; - font-size: 16px; - margin-bottom: 0; - padding: 10px 10px 10px 38px; - position: relative; - - &:before { - @include opacity(.6); - content: '\f10d'; - display: inline-block; - font-family: FontAwesome; - font-size: 20px; - font-style: normal; - font-weight: normal; - left: 8px; - position: absolute; - text-decoration: inherit; - top: 5px; - } -} - -pre { - color: inherit; - margin: 5px 0; - padding: 0; -} - -code { - background: $white; - color: inherit; -} - -.help { - code { - background: rgba(51,51,51,0.1); - } - - .hljs { - background: #f8f8f8; - color: #333; - display: block; - overflow-x: auto; - padding: 0.5em; - } - - .container { - margin-bottom: 40px; - } - - .links { - font-size: 1.2em; - margin-top: 30px; - } -} diff --git a/webapp/sass/layout/_module.scss b/webapp/sass/layout/_module.scss deleted file mode 100644 index bdaa12acb..000000000 --- a/webapp/sass/layout/_module.scss +++ /dev/null @@ -1,14 +0,0 @@ -// Only for combining all the files in this folder -@import 'content'; -@import 'footer'; -@import 'forms'; -@import 'headers'; -@import 'markdown'; -@import 'navigation'; -@import 'post'; -@import 'post-right'; -@import 'sidebar-left'; -@import 'sidebar-menu'; -@import 'sidebar-right'; -@import 'team-sidebar'; -@import 'webhooks'; diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss deleted file mode 100644 index c04a7a570..000000000 --- a/webapp/sass/layout/_navigation.scss +++ /dev/null @@ -1,190 +0,0 @@ -@charset 'UTF-8'; - -.nav > li > a:focus, -.nav > li > a:hover { - background: transparent; -} - -.nav-tabs { - margin-bottom: 10px; - - > li { - margin-right: 5px; - - > a { - border-bottom-color: transparent !important; - padding: 7px 15px; - - .small { - @include opacity(.8); - margin-left: 4px; - } - } - } -} - -#navbar { - input { - margin: 0 5px 0 2px; - } - - .navbar-default { - background: $primary-color; - border: none; - min-height: 50px; - position: absolute; - - .navbar-nav { - > li { - > a { - height: 50px; - padding: 0 1.3em; - - i { - line-height: 50px; - } - } - } - } - - .navbar-toggle { - border-color: transparent; - border-radius: 0; - fill: $white; - float: left; - height: 50px; - line-height: 48px; - margin: 0; - padding: 0 10px; - width: 50px; - z-index: 5; - - &.navbar-right__icon { - @include border-radius(50px); - height: 32px; - line-height: 0; - margin: 9px 10px 0 0; - padding: 0; - width: 32px; - } - - &.menu-toggle { - margin-right: 16px; - } - - .icon-bar { - background: $white; - width: 21px; - } - - .icon__search { - svg { - left: -1px; - position: relative; - width: 17px; - } - } - - .icon--white { - color: $white; - } - - &:hover, - &:active, - &:focus { - background: inherit; - } - } - - .navbar-brand { - float: none; - font-size: 16px; - height: 50px; - line-height: 50px; - padding: 0 .5em; - - .heading { - display: inline-block; - font-weight: 600; - line-height: 50px; - margin-right: 5px; - max-width: calc(100% - 200px); - overflow: hidden; - text-overflow: ellipsis; - vertical-align: top; - } - - .header-dropdown__icon { - margin-left: 0; - top: -1px; - } - - .dropdown-toggle { - color: $white; - } - - .description { - color: $white; - display: inline-block; - margin-right: 1em; - - &.info-popover { - @include border-radius(50px); - cursor: pointer; - height: 32px; - line-height: 32px; - margin: 9px 10px 0 0; - position: relative; - text-align: center; - vertical-align: top; - width: 32px; - - &:hover { - background: transparent; - } - - svg { - position: relative; - top: 5px; - } - } - } - } - } - - .sidebar-name { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - span { - margin-left: 2px; - white-space: nowrap; - } - } - - .channel-create-btn { - margin-right: 15px; - } - - .more-channel-table { - border: 1px solid #dbdbdc; - width: 100%; - - td { - padding: 7px; - } - - button { - width: 110px; - } - } -} - -.badge-notify { - background: $red; - left: 4px; - position: absolute; - top: 3px; - z-index: 100; -} diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss deleted file mode 100644 index fefb58092..000000000 --- a/webapp/sass/layout/_post-right.scss +++ /dev/null @@ -1,156 +0,0 @@ -@charset 'UTF-8'; - -.post-right__container { - @include display-flex; - @include flex-direction(column); - height: 100%; - - .post-right-root-message { - padding: 1em 1em 0; - } - - .post-right-comments-container { - position: relative; - } - - - .help_format_text { - bottom: -63px; - right: auto; - } - - .post { - &.post--root { - border-bottom: 1px solid #ddd; - padding-bottom: 1em; - - .post__body { - background: transparent !important; - } - } - - .post__header { - .col__reply { - background: transparent !important; - border: none !important; - right: 5px; - text-align: right; - top: -3px; - } - } - - .post__body { - width: 100%; - } - } - - hr { - border: none; - } - - .date-separator { - hr { - border-top: 1px solid #eee; - } - } - - .post-create__container { - width: 100%; - - .btn { - margin-bottom: 10px; - - &.disabled { - background: grey !important; - border-color: transparent !important; - } - } - - .custom-textarea { - min-height: 100px; - } - - .msg-typing { - @include opacity(.7); - display: block; - float: left; - font-size: 13px; - height: 20px; - line-height: 20px; - margin-top: 3px; - max-width: 230px; - min-width: 1px; - } - - .post-right-comments-upload-in-progress { - @include opacity(.7); - margin-right: 10px; - padding: 6px 0; - } - - .emoji-picker { - position: absolute; - top: -361px; - right: 0px; - } - } -} - -.post-right-header { - border-bottom: $border-gray; - color: #999; - font-size: 1em; - font-weight: 400; - height: 39px; - padding: 10px 10px 0 15px; - text-transform: uppercase; -} - -.post-right-root-container { - border-bottom: $border-gray; - padding: 5px 10px; - - ul { - margin-bottom: 2px; - padding-left: 0; - } -} - -.post-right-channel__name { - font-weight: 600; - margin: 0 0 15px; -} - -.post-right-root-container li { - display: inline; - list-style-type: none; - padding-right: 3px; -} - -.post-right-root-time { - color: #a8adb7; -} - -.post-right-create-comment-container { - bottom: 0; - left: 0; - margin-bottom: 18px; - padding: 5px; - position: absolute; - width: 100%; -} - -.post-right__scroll { - -webkit-overflow-scrolling: touch; - @include flex(1 1 auto); - padding-top: 10px; - position: relative; - - .file-preview__container { - margin-top: 5px; - } -} - -.post-right-comment-time { - color: #a8adb7; -} diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss deleted file mode 100644 index 54807f01f..000000000 --- a/webapp/sass/layout/_post.scss +++ /dev/null @@ -1,1642 +0,0 @@ -@charset 'UTF-8'; - -.custom-textarea { - background: transparent; - border: 1px solid #cccccc; - height: 100%; - line-height: 20px; - min-height: 36px; - overflow-x: hidden; - resize: none; - white-space: pre-wrap; - word-wrap: break-word; - - &:focus { - border-color: #cccccc; - box-shadow: none; - } - - &.bad-connection { - background: #ffffac !important; - color: #d04444 !important; - } -} - -.textarea-wrapper { - min-height: 37px; - position: relative; - - .textbox-preview-area { - box-shadow: none; - left: 0; - position: absolute; - top: 0; - white-space: normal; - z-index: 2; - } - - .help__text { - bottom: -23px; - cursor: pointer; - font-size: 13px; - position: absolute; - right: 0; - text-align: right; - z-index: 3; - } - - .textbox-preview-link { - margin-right: 8px; - } -} - -.help__format-text { - @include opacity(0); - @include single-transition(all, .5s, ease, .5s); - display: inline-block; - font-size: .85em; - margin-right: 10px; - vertical-align: bottom; - white-space: nowrap; - - b, - i, - span { - margin: 0 2px; - position: relative; - top: -1px; - } - - b { - @include opacity(.9); - } - - code { - background: transparent; - padding: 0; - } - - .textbox-preview-link { - cursor: pointer; - font-size: 13px; - margin-left: 15px; - } -} - -.date-separator, -.new-separator { - height: 2em; - margin: 0; - position: relative; - text-align: center; - z-index: 0; - - &:before, - &:after { - content: ''; - display: none; - height: 1em; - left: 0; - position: absolute; - width: 100%; - } - - &:before { - bottom: 0; - } - - &:after { - top: 0; - } - - &.hovered--after { - &:before { - background: #f5f5f5; - display: block; - } - } - - &.hovered--before { - &:after { - background: #f5f5f5; - display: block; - } - } - - .separator__hr { - border-color: #cccccc; - margin: 0; - position: relative; - top: 1em; - z-index: 5; - } - - .separator__text { - @include border-radius(50px); - background: #ffffff; - color: #555555; - display: inline-block; - font-size: 13px; - font-weight: 700; - line-height: 2em; - padding: 0 1em; - position: relative; - z-index: 5; - } -} - -.new-separator { - .separator__hr { - border-color: #ffaf53; - } - - .separator__text { - color: #ff8800; - font-weight: normal; - } -} - -.file-overlay { - color: $white; - font-size: em(20px); - font-weight: 600; - height: 100%; - left: 0; - pointer-events: none; - position: absolute; - text-align: center; - top: 0; - width: 100%; - z-index: 11; - - .overlay__indent { - @include clearfix; - @include alpha-property(background-color, $black, .6); - height: 100%; - position: relative; - } - - &.center-file-overlay { - } - - &.right-file-overlay { - font-size: em(18px); - - .overlay__circle { - height: 300px; - margin: -150px 0 0 -150px; - width: 300px; - } - - .overlay__files { - margin: 60px auto 15px; - width: 150px; - } - } - - .overlay__circle { - @include border-radius(500px); - @include alpha-property(background, $black, .7); - height: 370px; - left: 50%; - margin: -185px 0 0 -185px; - pointer-events: none; - position: absolute; - top: 50%; - width: 370px; - } - - .overlay__files { - display: block; - margin: 75px auto 20px; - } - - .overlay__logo { - @include opacity(.3); - bottom: 30px; - left: 50%; - margin-left: -50px; - position: absolute; - } - - .fa { - display: inline-block; - font-size: 1.1em; - margin-right: 8px; - } -} - -#post-list { - @include flex(1 1 auto); - height: 100%; - overflow-y: hidden; - position: relative; - - .inactive { - display: none; - } - - .post-list__loading { - @include opacity(.5); - font-size: .9em; - font-style: italic; - padding: 1em 0; - text-align: center; - - i { - margin-right: 2px; - } - - &.post-list__loading-search { - cursor: pointer; - - &:hover { - text-decoration: underline; - } - } - } - - .post-list-holder-by-time { - -webkit-overflow-scrolling: touch; - height: 100%; - overflow-y: scroll; - padding: 1em 0 .5em; - position: absolute; - width: 100%; - - &.active { - display: inline; - } - } - - .more-messages-text { - border: none; - display: block; - font-size: 13px; - margin: 5px 0 10px; - outline: none; - text-align: center; - } - - .new-messages__button { - @include opacity(0); - bottom: 0; - font-size: 13.5px; - left: 0; - margin: 5px auto; - position: absolute; - right: 0; - text-align: center; - visibility: hidden; - z-index: 1; - - .fa { - font-size: 1.2em; - font-weight: bold; - margin-right: .5rem; - position: relative; - top: 1px; - } - - .icon { - margin-left: 5px; - } - - div { - @include border-radius(50px); - cursor: pointer; - display: inline-block; - padding: 4px 20px 3px; - } - - &.visible { - @include opacity(1); - visibility: visible; - } - - &.disabled { - display: none; - } - } -} - -.post-list__timestamp { - @include opacity(0); - @include single-transition(all, .6s, ease); - @include translateY(-45px); - display: none; - left: 0; - position: absolute; - text-align: center; - top: 8px; - width: 100%; - z-index: 50; - - &.scrolling { - @include translateY(0); - @include opacity(.9); - } - - &.rhs { - top: 98px; - } - - > div { - @include border-radius(3px); - @include font-smoothing(initial); - background: $primary-color; - border: 1px solid; - color: $white; - display: inline-block; - font-size: 12px; - line-height: 25px; - padding: 0 8px; - text-align: center; - } -} - -.post-list__arrows { - @include opacity(0); - @include single-transition(all, .6s); - background-repeat: no-repeat; - bottom: 0; - display: none; - fill: #444444; - height: 40px; - left: 9px; - position: absolute; - text-align: center; - width: 40px; - z-index: 50; - - svg { - color: inherit; - height: 28px; - width: 28px; - } - - &.scrolling { - @include opacity(1); - display: block; - } -} - -.post-create__container { - @include flex(0 0 auto); - width: 100%; - z-index: 5; - - label { - font-weight: normal; - } - - form { - margin: 0 auto; - padding: 0 15px 0; - width: 100%; - } - - .center { - max-width: 1028px; - } - - .custom-textarea { - bottom: 0; - max-height: 162px; - overflow: hidden; - padding: 14px 0 14px 20px; - resize: none; - - &:not(.custom-textarea--emoji-picker) { - padding-right: 40px; - } - - &.custom-textarea--emoji-picker { - padding-right: 80px; - } - - &.textbox-preview-area { - overflow-y: auto; - } - } - - .emoji-picker { - position: absolute; - right: 0; - top: -361px; - } - - .scroll { - .post-body__actions { - right: 10px; - } - - .custom-textarea { - -ms-overflow-style: auto; - -webkit-overflow-scrolling: touch; - overflow: auto; - - &:not(.custom-textarea--emoji-picker) { - padding-right: 50px; - } - - &.custom-textarea--emoji-picker { - padding-right: 90px; - } - } - } - - .post-body__actions { - display: flex; - height: 100%; - position: absolute; - right: 0; - top: 0; - - > span { - border-left: 1px solid transparent; - width: 41px; - - &:first-child { - border: none; - } - - > span, - div { - display: block; - height: 49px; - line-height: 49px; - text-align: center; - width: 100%; - } - } - - &:hover, - &:active { - box-shadow: none; - } - - &.btn-file__disabled { - @include opacity(.1); - - &:hover, - &:active { - @include opacity(.1); - } - } - - .icon--emoji { - @include opacity(.5); - @include single-transition(all, .15s); - cursor: pointer; - - &:hover { - @include opacity(.7); - } - - svg { - position: relative; - top: 2px; - } - } - - .icon--attachment { - @include opacity(.4); - @include single-transition(all, .15s); - cursor: pointer; - overflow: hidden; - position: relative; - vertical-align: top; - - &:hover { - @include opacity(.6); - } - - input { - cursor: pointer; - direction: ltr; - filter: alpha(opacity=0); - font-size: 23px; - height: 100%; - margin: 0; - opacity: 0; - position: absolute; - right: 0; - top: 0; - width: 100%; - } - - svg { - position: relative; - top: 3px; - } - } - } - - .post-create-body { - padding: 0 0 2px; - position: relative; - - .post-body__cell { - position: relative; - vertical-align: top; - } - - .send-button { - @include single-transition(all, .15s); - border-left: 1px solid transparent; - cursor: pointer; - display: none; - font-size: 17px; - height: 100%; - line-height: 49px; - padding-right: 4px; - text-align: center; - vertical-align: bottom; - width: 45px; - - &:active { - @include opacity(.75); - } - - &.disabled { - i { - color: inherit; - } - } - } - - - .icon--emoji-picker { - @include opacity(.5); - @include single-transition(all, .15s); - cursor: pointer; - - &:hover, - &:active { - @include opacity(.9); - box-shadow: none; - } - - .icon--attachment { - @include opacity(.5); - display: inline-block; - position: relative; - vertical-align: top; - - input { - cursor: pointer; - direction: ltr; - filter: alpha(opacity=0); - font-size: 23px; - height: 100%; - margin: 0; - opacity: 0; - position: absolute; - right: 0; - top: 0; - width: 100%; - } - - &:hover { - @include opacity(.9); - } - } - } - - textarea { - box-shadow: none; - } - } - - .post-create-footer { - @include clearfix; - font-size: 13px; - padding: 3px 0 0; - position: relative; - - .post-error { - @include opacity(.55); - display: inline-block; - font-size: .85em; - font-weight: normal; - margin-bottom: 0; - position: absolute; - top: 4px; - } - } - - .msg-typing { - @include opacity(.7); - display: block; - font-size: .95em; - height: 20px; - margin-bottom: 5px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } -} - -.post-list__table { - display: table; - height: 100%; - min-height: 350px; - table-layout: fixed; - width: 100%; - - .post-list__content { - display: table-cell; - vertical-align: bottom; - - .dropdown-menu { - &.bottom { - bottom: 19px; - top: auto; - } - } - } -} - -.post { - @include legacy-pie-clearfix; - max-width: 100%; - padding: 8px .5em 0 1em; - position: relative; - word-wrap: break-word; - - &.post--system { - .post__header { - .col__reply { - min-width: 0; - } - } - } - - &:hover { - .dropdown, - .comment-icon__container, - .reacticon, - .reacticon__container, - .flag-icon__container, - .post__reply, - .post__remove { - visibility: visible; - } - - .permalink-icon { - visibility: visible; - } - } - - &.post--hovered { - .dropdown, - .comment-icon__container, - .post__reply, - .post__remove, - .reacticon__container, - .permalink-icon { - visibility: visible; - } - - .post__header { - .col__reply { - z-index: 7; - } - } - - .post__body { - background: transparent !important; - } - } - - &.post--highlight { - background-color: beige; - } - - &.post--hide-controls { - .post__header { - .col__reply { - display: none; - } - } - } - - &.post--compact { - &.post--thread { - .post__header { - padding-top: 3px; - } - } - - &.post--system { - .status { - visibility: hidden; - } - - > div { - margin-bottom: 0; - } - } - - &.same--root { - &.same--user { - .post__header { - height: 0; - } - } - } - - .post__img { - padding-top: 0; - } - - .attachment { - .attachment__body__wrap { - .btn-close { - left: -2px; - } - } - } - - &.post--comment { - .attachment { - .attachment__body__wrap { - .btn-close { - left: -13px; - } - } - } - } - - .status-wrapper { - cursor: auto; - height: 14px; - pointer-events: none; - - .status { - bottom: auto; - height: 13px; - left: -2px; - position: relative; - right: auto; - top: auto; - width: 13px; - } - - svg { - top: 1px; - } - - &:after { - bottom: 0; - } - } - - blockquote { - font-size: 1em; - margin-left: 0; - margin-top: 1.3em; - padding: 3px 0 0 25px; - vertical-align: top; - - &:before { - font-size: 15px; - left: 4px; - top: 2px; - } - } - - .search-item-snippet { - blockquote { - margin-top: 0; - } - } - - .markdown__heading { - clear: both; - font-size: 1em; - margin: 0; - } - - .post__header { - height: 22px; - margin-bottom: 0; - } - - .post__body { - background: transparent !important; - line-height: 1.5; - margin-top: -1px; - padding: 3px 0 0; - - .img-div { - max-height: 150px; - max-width: 150px; - } - - p { - line-height: inherit; - } - - p + p { - margin-bottom: 1em; - margin-top: 1em; - } - - ol, - ul { - clear: both; - padding-left: 20px; - } - - div { - margin-bottom: 0; - } - - .post-image__column { - margin: 3px 0; - } - } - - .post-image__column { - @include border-radius(2px); - font-size: .9em; - height: 26px; - line-height: 25px; - padding: 0 7px; - width: auto; - - .post-image__thumbnail { - display: none; - } - - .post-image__details { - background: transparent; - border: none; - padding: 0; - width: 100%; - - svg { - display: inline-block; - height: 13px; - margin: 5px 4px 0 0; - opacity: .5; - position: relative; - vertical-align: top; - width: 13px; - } - - > div { - display: none; - } - } - - .post-image__name { - @include clearfix; - display: block; - margin: 0; - padding-right: 10px; - text-overflow: ellipsis; - white-space: nowrap; - - i { - font-size: .9em; - margin-right: 5px; - opacity: .5; - } - } - - a { - &:hover { - text-decoration: none; - } - } - } - - .post__img { - padding-top: 1px; - width: 16px; - - img { - display: none; - } - } - } - - .post__img:hover { - cursor: pointer; - } - - .post--fail { - position: relative; - } - - .post--edited { - // If the last paragraph of an edited post is a paragraph, make it inline-block so that the (edited) indicator can be on the same line as it - .post-message__text > p:last-child { - display: inline-block; - width: auto; - } - - .post-edited-indicator { - @include opacity(.6); - font-size: .87em; - } - } - - .emoticon { - vertical-align: top; - } - - p { - font-size: 13.5px; - line-height: 1.6em; - margin: 0; - white-space: pre-wrap; - width: 100%; - word-break: break-word; - } - - .post__header--info { - padding: 0; - } - - &.post--root { - .comment-icon__container { - visibility: visible; - } - } - - &.post--comment { - .post__body { - border-left: 4px solid $gray; - padding-left: 7px; - - &.mention-comment { - border-left: 4px solid $yellow; - border-color: $yellow; - } - } - - .attachment { - .attachment__body__wrap { - .btn-close { - left: -11px; - } - } - } - } - - &.same--root { - &.post--pinned { - h1, - h2 { - &:first-child { - margin-top: 15px; - } - } - - h3, - h4, - h5, - h6 { - &:first-child { - margin-top: 20px; - } - } - } - - &.same--user { - padding: 0 .5em 0 1em; - - &:hover, - &.post--hovered { - .post__time { - @include opacity(.5); - } - } - - .flag-icon__container { - left: 36px; - margin-left: 7px; - position: absolute; - top: 6px; - } - - .post__img { - .status-wrapper { - display: none; - } - - img { - display: none; - } - } - - .post__header { - height: 0; - margin: 0; - - .col__name { - display: none; - } - - .col__reply { - top: -1px; - } - } - } - - &.post--comment { - .post__link { - display: none; - } - - &.same--user { - .post__img { - img { - display: none; - } - } - } - } - } - - &.other--root { - .comment-icon__container { - &.icon--show { - visibility: visible; - } - } - - &.post--comment { - - .popover { - margin-top: 84px; - - > .arrow { - top: 21px !important; - } - } - - .post__header { - .col__reply { - top: -4px; - } - } - } - } - - .post__content { - display: table; - margin: 0 auto; - padding: 0 5px; - position: relative; - table-layout: fixed; - width: 100%; - - > div { - display: table-cell; - vertical-align: top; - } - } - - .center { - max-width: 1000px; - } - - .post__header { - margin-bottom: 2px; - padding: 0; - - > div { - display: inline-block; - vertical-align: top; - } - - .col__name { - font-weight: 600; - margin-right: 7px; - - .user-popover { - @include clearfix; - max-width: 200px; - text-overflow: ellipsis; - vertical-align: top; - white-space: nowrap; - } - - .colon { - display: none; - font-weight: 900; - margin-left: 2px; - } - } - - .col__reply { - border: 1px solid transparent; - border-radius: 2px; - min-width: 70px; - padding: 2px 5px; - position: absolute; - right: 0; - top: -4px; - white-space: nowrap; - z-index: 6; - } - - .col__remove { - position: absolute; - right: 10px; - } - - .permalink-popover { - min-width: 0; - - .popover-content { - padding: 5px; - } - - .form-control, - .btn { - font-size: 13px; - height: 30px; - line-height: 30px; - padding: 0 8px; - } - } - } - - .post__img { - padding-right: 10px; - text-align: right; - width: 53px; - - .icon { - svg { - height: 32px; - width: 32px; - } - } - - path { - fill: inherit; - } - - img { - @include border-radius(50px); - height: 32px; - vertical-align: inherit; - width: 32px; - max-width:none; - } - } - - .post__embed-container { - @include single-transition(max-height, .5, ease); - display: block; - max-height: 1000px; - overflow: hidden; - - &[hidden] { - max-height: 0; - } - } - - .dropdown { - display: inline-block; - top: -1px; - vertical-align: middle; - visibility: hidden; - - .dropdown-menu { - left: auto; - min-width: 130px; - padding: 2px 0; - right: 0; - top: 20px; - - li { - display: block; - } - - a { - padding: 5px 15px; - } - } - } - - .post__dropdown { - vertical-align: middle; - - &:after { - content: '[...]'; - font-family: 'Open Sans', sans-serif; - position: relative; - top: -1px; - } - } - - .post__remove { - @include opacity(.5); - color: inherit; - display: inline-block; - float: right; - font-family: 'Open Sans', sans-serif; - font-size: 20px; - font-weight: 600; - height: 20px; - line-height: 20px; - position: relative; - right: -10px; - text-decoration: none; - vertical-align: top; - visibility: hidden; - width: 20px; - - &:hover { - @include opacity(.8); - } - } - - .post__body { - @include legacy-pie-clearfix; - padding: .2em .5em; - width: 100%; - word-wrap: break-word; - - div { - } - - p + p { - margin: 0.5em 0 0; - } - - img { - max-height: 400px; - } - - ul, - ol { - font-size: 13.5px; - margin-bottom: .11em; - margin-top: 3px; - padding-left: 20px; - - p { - margin-bottom: 0; - } - - li { - ul, - ol { - font-size: 1em; - margin: 0; - padding: 0 0 0 20px; - } - } - - li.list-item--task-list ul, - li.list-item--task-list ol { - margin-left: 20px; - } - - li.list-item--task-list ul { - padding-left: 0; - } - - li:not(.list-item--task-list) li.list-item--task-list, - li:not(.list-item--task-list) li.list-item--task-list ~ li { - margin-left: -20px; - } - - li input[type='checkbox']:disabled { - cursor: default; - vertical-align: top; - } - } - - ul li.list-item--task-list, - ul li.list-item--task-list ~ li { - list-style-type: none; - } - - ul li.list-item--task-list ~ li:not(.list-item--task-list) { - text-indent: 3px; - - &:before { - content: '\2022'; - margin-right: 8px; - } - } - - ul + p, - ol + p { - margin-top: .6em; - } - - p + ul, - p + ol { - margin-top: .6em; - } - - .pending-post-actions { - background: alpha-color($black, .7); - color: $white; - font-size: .9em; - padding: 5px 7px; - position: absolute; - right: 0; - top: 0; - z-index: 100; - - a { - color: $white; - } - } - - .post-reaction-list { - min-height: 30px; - } - - .post-reaction { - @include user-select(none); - @include border-radius(3px); - border: 1px solid $primary-color; - cursor: pointer; - display: inline-block; - font-size: 11px; - height: 23px; - margin-bottom: 5px; - margin-right: 5px; - padding: 0 4px 0 3px; - - .post-reaction__emoji { - margin: 2px 3px 0 0; - max-height: 16px; - max-width: 16px; - vertical-align: middle; - } - - .post-reaction__count { - line-height: 10px; - position: relative; - top: 3px; - } - - &--current-user { - .post-reaction__count { - font-weight: 600; - } - } - } - } - - .post__link { - font-size: 13px; - margin: 2px 0 5px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - - a { - font-weight: bold; - } - } - - .post__embed-visibility { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - cursor: pointer; - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - margin: 0; - text-rendering: auto; - - &.pull-left { - margin: 5px 5px 0 0; - } - - &:hover { - text-decoration: none; - } - - &:before { - content: '\f065'; - font-size: 14px; - } - - &[data-expanded='true']:before { - content: '\f066'; - } - } - - .post__visibility { - @include opacity(.6); - font-size: .9em; - padding: 8px; - } - - .post__time { - @include opacity(.6); - font-size: .9em; - } - - .post__permalink { - color: inherit; - - &:hover, - &:focus { - color: inherit; - } - - &:focus { - text-decoration: none; - } - - &:hover { - text-decoration: underline; - } - } - - .post-loading-gif { - height: 10px; - margin-top: 6px; - width: 10px; - } - - .post-fail { - color: #d58a8a; - } - - .post-waiting { - color: #999999; - } - - .permalink-icon { - color: $primary-color; - display: inline-block; - visibility: hidden; - } - - .post__reply { - display: inline-block; - margin-right: 6px; - visibility: hidden; - - svg { - fill: inherit; - position: relative; - top: 3px; - width: 18px; - } - } - - .comment-icon__container { - display: inline-block; - fill: $primary-color; - position: relative; - top: 1px; - visibility: hidden; - - &:focus { - outline: none; - } - - &.icon--visible { - visibility: visible; - } - - svg { - height: 17px; - width: 17px; - } - - .comment-count { - margin-left: 2px; - } - - .comment-icon { - display: inline-block; - fill: inherit; - margin: 0 1px 0 5px; - position: relative; - top: 1px; - vertical-align: top; - } - - path { - fill: inherit; - } - } - - .reacticon__container { - display: inline-block; - fill: $primary-color; - font-size: 16px; - margin-left: 5px; - vertical-align: top; - visibility: hidden; - - svg { - height: 14px; - position: relative; - top: 1px; - width: 14px; - } - } - - .flag-icon__container { - display: inline-block; - height: 15px; - margin-left: 7px; - position: relative; - top: 2px; - vertical-align: top; - visibility: hidden; - - &.visible { - visibility: visible; - } - - svg { - width: 12px; - } - - path { - fill: inherit; - } - - .fa-star-o { - @include opacity(.8); - } - - &:focus { - outline: none; - } - - &.icon--visible { - visibility: visible; - } - - } - - .web-embed-data { - @include border-radius(2px); - @include alpha-property(background, $black, 0.05); - height: 50px; - overflow: hidden; - padding: 2px 0 0 10px; - text-overflow: ellipsis; - - .embed-title { - color: #555555; - font-weight: 600; - margin: 3px 0 1px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .embed-description { - color: #888888; - margin: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .embed-link { - display: none; - } - } -} - -.bot-indicator, -.post__pinned-badge { - border-radius: 2px; - font-family: inherit; - font-size: 10px; - font-weight: 600; - padding: 1px 4px; -} - -.bot-indicator { - margin: 2px 10px 0 -4px; -} - -.post__pinned-badge { - margin-left: 7px; - position: relative; - top: -1px; -} - -.permalink-text { - overflow: hidden; -} - -.permalink-popover { - margin-left: 50px !important; - min-width: 320px; -} diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss deleted file mode 100644 index 515f87a87..000000000 --- a/webapp/sass/layout/_sidebar-left.scss +++ /dev/null @@ -1,372 +0,0 @@ -@charset 'UTF-8'; - -.sidebar--left { - border-right: $border-gray; - height: 100%; - left: 0; - position: fixed; - width: 220px; - z-index: 5; - - .error-bar--fixed & { - height: calc(100% - 22px); - } - - &.sidebar--padded { - padding-top: 44px; - } - - .sidebar-item { - .icon { - display: inline-block; - margin: 0 7px 0 1px; - position: relative; - text-align: left; - vertical-align: top; - width: 15px; - } - - .icon__lock { - top: 2px; - } - - .icon__globe { - top: 1px; - } - } - - .sidebar-item__name { - display: inline-block; - max-width: 160px; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: top; - } - - .sidebar__divider { - color: $white; - font-size: .9em; - height: 20px; - line-height: 20px; - margin: 5px 0 6px; - position: relative; - z-index: 0; - - &:before { - background: $light-gray; - content: ''; - height: 1px; - position: absolute; - top: 10px; - width: 100%; - } - - .sidebar__divider__text { - background: $primary-color; - float: right; - padding: 0 10px; - position: relative; - z-index: 1; - } - } - - .sidebar__switcher { - bottom: 0; - display: block; - padding-bottom: 0; - position: absolute; - width: 100%; - - button { - @include single-transition(all, .15s, ease-in); - display: block; - font-weight: 600; - height: 45px; - line-height: 40px; - padding: 0; - text-decoration: none; - width: 100%; - - > span { - display: inline-block; - position: relative; - vertical-align: middle; - z-index: 5; - } - - .icon { - display: none; - margin-right: 15px; - - svg { - position: relative; - top: 7px; - } - } - - &:hover { - span { - @include opacity(1); - } - } - } - - .switch__shortcut { - margin-left: 4px; - } - } - - .dropdown-menu { - max-height: 80vh; - max-width: 200px; - overflow-x: hidden; - overflow-y: auto; - width: 200px; - } - - .search__form { - display: none; - margin: 0; - padding: 1em 1em 0; - } - - .badge { - @include border-radius(100px); - font-size: 11px; - height: 16px; - line-height: 16px; - min-width: 18px; - padding: 0 5px; - position: absolute; - right: 15px; - top: 8px; - } - - .nav-pills__container { - -webkit-overflow-scrolling: touch; - height: calc(100% - 115px); - overflow: auto; - position: relative; - } - - .nav-pills__unread-indicator { - @include border-radius(50px); - font-size: 13.5px; - left: 15px; - margin: 0 auto; - padding: 4px 0 3px; - position: fixed; - text-align: center; - width: 190px; - z-index: 1; - - .icon { - margin-left: 5px; - } - } - - .nav-pills__unread-indicator-top { - top: 80px; - - .icon { - svg { - @include transform(rotate(180deg)); - } - } - } - - .nav-pills__unread-indicator-bottom { - bottom: 60px; - } - - .nav { - &.nav-stacked { - > li + li { - margin: 0; - } - } - - li { - > h4 { - font-size: 1em; - font-weight: 600; - margin: 1.5em 0 .7em; - padding: 0 12px 0 17px; - text-transform: uppercase; - } - - .divider { - & + .divider { - display: none; - } - } - - > a { - border-radius: 0; - line-height: 1.5; - outline: none; - overflow: hidden; - padding: 5px 0 5px 17px; - text-overflow: ellipsis; - white-space: nowrap; - - .icon { - &.icon__globe, - &.icon__lock { - @include opacity(.5); - } - } - - &.has-badge { - .sidebar-item__name { - max-width: 142px; - } - } - - &.has-close { - &:hover { - .sidebar-item__name { - max-width: 152px; - } - - .btn-close { - @include opacity(.8); - display: block; - } - } - - .btn-close { - @include opacity(0); - display: none; - font-family: 'Open Sans', sans-serif; - font-size: 21px; - font-weight: 600; - position: absolute; - right: 15px; - top: 0px; - - &:hover { - @include opacity(1); - } - } - } - - &.unread-title { - font-weight: 600; - } - - } - - &.active { - a { - &:before { - background: $black; - content: ''; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 3px; - } - } - - .icon { - &.icon__globe, - &.icon__lock { - @include opacity(.7); - } - } - - a, - a:hover, - a:focus { - @include alpha-property(background-color, $black, .1); - border-radius: 0; - font-weight: 400; - position: relative; - - &.unread-title { - font-weight: 600; - } - } - } - } - } - - .modal-title { - line-height: 2em; - } - - .add-channel-btn { - float: right; - font-size: 1.9em; - font-weight: 700; - line-height: 18px; - margin: -2px 0 0 0; - outline: none; - padding: 0 5px; - text-decoration: none; - - &:hover { - color: #666666; - } - } - - .status-wrapper { - height: 36px; - width: 36px; - - .status { - bottom: -4px; - height: 18px; - right: -5px; - width: 18px; - - &.status-edit { - .fa { - top: 4px; - } - } - - .fa { - position: relative; - top: 2px; - } - - .icon__container { - &:after { - border-radius: 20px; - content: ''; - height: 10px; - left: 4px; - position: absolute; - top: 4px; - width: 10px; - } - } - - svg { - height: 13px; - left: 3px; - max-height: initial; - position: relative; - top: 3px; - width: 13px; - z-index: 1; - } - } - } -} - -.channel-loading-gif { - height: 15px; - margin-top: 2px; - width: 15px; -} - -.join-channel-loading-gif { - height: 25px; - margin-left: 10px; - margin-top: 5px; - width: 25px; -} diff --git a/webapp/sass/layout/_sidebar-menu.scss b/webapp/sass/layout/_sidebar-menu.scss deleted file mode 100644 index b4d4f15fd..000000000 --- a/webapp/sass/layout/_sidebar-menu.scss +++ /dev/null @@ -1,95 +0,0 @@ -@charset 'UTF-8'; - -.sidebar--menu { - -webkit-overflow-scrolling: touch; - background: #fafafa; - border-right: $border-gray; - display: none; - height: 100%; - overflow: auto; - padding: 0 0 2em; - position: absolute; - right: 0; - width: 220px; - - .nav-pills__container { - padding-top: 5px; - } - - .team__header { - @include legacy-pie-clearfix; - display: none; - padding: 0 15px; - - a { - color: $white; - } - - .navbar-right { - font-size: .85em; - margin: 16px -5px 0; - - .dropdown-toggle { - padding: 0 10px; - } - - .dropdown-menu { - li a { - color: #555; - padding: 3 20px; - } - } - - .dropdown__icon { - @include background-size(100% 100%); - display: inline-block; - height: 16px; - width: 4px; - } - } - - .team__name { - float: left; - font-size: 1.2em; - font-weight: 600; - line-height: 50px; - max-width: 80%; - overflow: hidden; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - .nav { - > li { - > a { - background: none !important; - color: inherit; - font-size: 15px; - line-height: 40px; - padding: 0 15px; - - svg { - fill-opacity: 0.85; - position: relative; - top: 4px; - width: 18px; - } - - .icon { - display: inline-block; - left: -5px; - position: relative; - text-align: center; - width: 25px; - } - - .mentions { - font-size: 17px; - font-weight: bold; - } - } - } - } -} diff --git a/webapp/sass/layout/_sidebar-right.scss b/webapp/sass/layout/_sidebar-right.scss deleted file mode 100644 index bf1cef606..000000000 --- a/webapp/sass/layout/_sidebar-right.scss +++ /dev/null @@ -1,291 +0,0 @@ -@charset 'UTF-8'; - -.sidebar--right { - @include translateX(400px); - background: $white; - height: 100%; - padding: 0; - position: fixed; - right: 0; - width: 400px; - z-index: 8; - - .error-bar--fixed & { - height: calc(100% - 22px); - } - - &.webrtc { - z-index: 5; - } - - &.sidebar--right--expanded { - z-index: 10; - } - - .sidebar--right__bg { - @include single-transition(background-color, .5s, ease); - background-color: alpha-color($black, 0); - height: 100%; - position: absolute; - top: 0; - visibility: hidden; - width: 300%; - } - - &.move--left, - &.webrtc--show { - .sidebar--right__bg { - left: -100%; - } - } - - .sidebar-right__table { - display: table; - - > div:not(.sidebar-collapse__container) { - display: table-cell; - - &:last-child { - .channel-header__icon { - margin-right: 10px; - } - } - } - - .search-form__container { - padding-right: 10px; - width: 100%; - } - } - - .post-body { - img { - max-height: 200px; - } - } - - .post { - &.post--compact { - .post__pinned-badge { - margin: 0 0 0 5px; - } - } - - .post__content { - padding: 0 10px 0 0; - } - - .post__header { - .col__name { - .user-popover { - max-width: 120px; - } - } - - .flag-icon__container { - z-index: 5; - } - } - } - - .post-create__container { - form { - padding: .5em 15px 0; - } - - .post-create-footer { - @include clearfix; - clear: both; - font-size: 13px; - overflow: visible; - position: relative; - - .post-error { - @include opacity(.55); - display: inline-block; - font-size: .85em; - font-weight: normal; - margin-bottom: 0; - position: absolute; - top: -25px; - } - } - } - - .help__format-text { - display: none; - } - - .sidebar--right__content { - @include display-flex; - @include flex-direction(column); - height: 100%; - } - - .sidebar--right__back { - @include single-transition(all, .2s, ease-in); - @include opacity(.5); - color: inherit; - display: inline-block; - font-size: 26px; - margin-left: -14px; - text-align: center; - vertical-align: top; - width: 30px; - - &:hover, - &:active { - color: inherit; - opacity: .8; - } - - i { - position: relative; - top: -2px; - } - } - - .sidebar-right__body { - @include display-flex; - @include flex(1 1 auto); - @include flex-direction(column); - border-left: $border-gray; - height: calc(100% - 56px); - } - - .sidebar__overlay { - @include opacity(.1); - background-color: $yellow; - height: 100%; - pointer-events: none; - position: absolute; - width: 100%; - z-index: 5; - } - - .input-group { - word-break: break-word; - } - - .sidebar--right__buttons { - float: right; - } - - .sidebar--right__close { - @include single-transition(all, .2s, ease-in); - background: none; - border: none; - font-size: 20px; - height: 22px; - line-height: 0; - margin: 11px 0 0; - opacity: .5; - outline: none; - padding: 0; - width: 30px; - - &:hover, - &:active { - opacity: .8; - } - - i { - position: relative; - } - } - - .sidebar--right__expand { - @extend .sidebar--right__close; - font-size: 17px; - - i { - top: -2px; - } - - .fa-compress { - display: none; - } - } - - .sidebar--right__title { - @include clearfix; - padding-left: 15px; - } - - .sidebar--right__header { - @include flex(0 0 44px); - border-bottom: 1px solid; - color: inherit; - font-size: 1em; - height: 44px; - line-height: 44px; - overflow: hidden; - padding: 0 5px 0 0; - text-transform: uppercase; - } - - .sidebar--right__loading { - @include opacity(.7); - text-align: center; - - .fa { - margin-right: 5px; - } - } - - .sidebar--right__subheader { - font-size: 1em; - padding: .5em 1em 0; - - h4 { - font-size: 1em; - } - - ul { - @include opacity(.7); - padding: 10px 0 0 30px; - } - - li { - font-size: .95em; - padding-bottom: 10px; - } - - .usage__icon { - @include opacity(.9); - margin: 0 3px; - position: relative; - top: 3px; - } - } - - .suggestion-list__content { - max-height: 120px; - } -} - -.sidebar-right-container { - height: 100%; -} - -.sidebar-collapse__container { - display: none; -} - -.sidebar-collapse { - @include single-transition(all, .2s, linear); - @include translateX(0); - cursor: pointer; - font-size: 16px; - height: 48px; - line-height: 0; - padding-left: 1px; - text-align: center; - width: 50px; - z-index: 5; - - .fa { - position: relative; - top: 18px; - } -} diff --git a/webapp/sass/layout/_team-sidebar.scss b/webapp/sass/layout/_team-sidebar.scss deleted file mode 100644 index f44454eb7..000000000 --- a/webapp/sass/layout/_team-sidebar.scss +++ /dev/null @@ -1,124 +0,0 @@ -.multi-teams { - .team-sidebar { - height: 100%; - left: 0; - position: fixed; - text-align: center; - width: 65px; - z-index: 5; - - .team-wrapper { - -webkit-overflow-scrolling: touch; - background-color: alpha-color($black, .2); - height: 100%; - overflow: auto; - padding-top: 15px; - - .team-container { - display: table; - margin-bottom: 10px; - position: relative; - text-align: center; - width: 100%; - - a { - display: block; - margin-left: 11px; - text-decoration: none; - &:hover .team-btn { - border-color: white; - } - } - - .team-btn { - @include border-radius(2px); - background-color: alpha-color($black, .3); - border: 1px solid alpha-color($white, .2); - display: table-cell; - font-size: 12px; - font-weight: bold; - padding: 4px 5px; - position: relative; - text-align: center; - vertical-align: top; - width: 40px; - - .team-btn__initials { - text-align: left; - } - - .team-btn__content { - bottom: 4px; - font-size: 8.5px; - font-weight: normal; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 31px; - } - - .badge { - font-size: 10px; - position: absolute; - right: -6px; - top: -3px; - } - - &.team-btn__add { - height: 39px; - vertical-align: middle; - } - } - - &.active { - .team-btn { - background-color: transparent; - border-color: $white; - } - } - - &.active:before { - background: $black; - content: ''; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 5px; - } - - &.unread:before { - background: $black; - border-radius: 50%; - content: ''; - height: 5px; - left: 0; - position: absolute; - top: 18px; - width: 5px; - } - - a.team-disabled { - @include opacity(.5); - cursor: not-allowed; - } - } - - .team-container a:hover { - text-decoration: none; - } - } - } - - .sidebar--left { - left: 65px; - - .nav-pills__unread-indicator { - left: 80px; - } - } - - .app__content { - margin-left: 285px; - } -} diff --git a/webapp/sass/layout/_webhooks.scss b/webapp/sass/layout/_webhooks.scss deleted file mode 100644 index ed3e2555a..000000000 --- a/webapp/sass/layout/_webhooks.scss +++ /dev/null @@ -1,303 +0,0 @@ -@charset 'UTF-8'; - -.webhooks__container { - @include border-radius(3px); - @include alpha-property(background, $black, .1); - border: 1px solid; - margin-top: 10px; - padding: 0 13px 15px; -} - -.webhook__item { - font-size: 13px; - position: relative; - - &:last-child { - .divider-light:last-child { - display: none; - } - } - - .webhook__remove { - color: #e05f5d; - font-size: 22px; - font-weight: bold; - height: 30px; - position: absolute; - right: -7px; - text-align: center; - text-decoration: none; - top: 8px; - width: 30px; - } - - .webhook__url { - padding-right: 20px; - } -} - -.post { - &.post--comment { - .attachment { - .attachment__body__wrap { - .btn-close { - left: -11px; - } - } - } - } - - .attachment { - margin-left: -20px; - position: relative; - - &:hover { - .attachment__body__wrap { - .btn-close { - visibility: visible; - } - } - } - - &.attachment--opengraph { - max-width: 800px; - } - - .attachment__content { - border-radius: 4px; - border-style: solid; - border-width: 1px; - margin: 5px 0 5px 20px; - padding: 2px 5px; - } - - .attachment__thumb-pretext { - background: transparent; - border: none; - margin-left: 25px; - } - - .attachment__container { - border-left-style: solid; - border-left-width: 4px; - padding: 10px; - - &.attachment__container--good { - border-left-color: #00c100; - } - - &.attachment__container--warning { - border-left-color: #dede01; - } - - &.attachment__container--danger { - border-left-color: #e40303; - } - - &.attachment__container--opengraph { - border-left-color: transparent; - border-left-style: none; - display: table; - margin: 0; - padding-bottom: 13px; - padding-left: 5px; - table-layout: fixed; - width: 100%; - - div { - margin: 0; - } - } - - .sitename { - color: #A3A3A3; - } - } - - .attachment__body__wrap { - &.attachment__body__wrap--opengraph { - display: table-cell; - vertical-align: top; - width: 100%; - } - - .btn-close { - @include opacity(.4); - background: transparent; - border: none; - color: inherit; - font-size: 21px; - font-weight: 500; - height: 20px; - left: -7px; - line-height: 20px; - outline: none; - padding: 0; - position: absolute; - text-align: center; - text-decoration: none; - text-shadow: none; - visibility: hidden; - width: 20px; - z-index: 5; - - span { - font-family: 'Open Sans', sans-serif; - line-height: 10px; - } - - &:hover { - @include opacity(.9); - } - } - - &:hover { - .btn-close { - visibility: visible; - } - } - } - - .attachment__body { - float: left; - overflow-x: auto; - overflow-y: hidden; - padding-right: 5px; - width: 80%; - - &.attachment__body--no_thumb { - width: 100%; - } - - &.attachment__body--opengraph { - float: none; - padding-right: 0; - width: 100%; - word-wrap: break-word; - } - } - - .attachment__text p:last-of-type { - display: inline-block; - } - - .attachment__image__container--openraph { - display: table-cell; - padding-left: 15px; - padding-top: 3px; - vertical-align: top; - width: 95px; - } - - .attachment__image { - margin-bottom: 1em; - max-height: 300px; - max-width: 500px; - - &.attachment__image--openraph { - margin-bottom: 0; - max-height: 80px; - max-width: 100%; - - &.loading { - height: 80px; - } - - &.large_image { - border-radius: 3px; - margin-top: 10px; - max-height: 200px; - max-width: 400px; - width: 100%; - - &.loading { - height: 150px; - } - } - } - } - - .attachment__author-name { - @include opacity(.6); - } - - .attachment__title { - font-size: 14px; - font-weight: 600; - height: 22px; - line-height: 18px; - margin: 5px 0; - padding: 0; - - &.has-link { - color: #2f81b7; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - &.attachment__title--opengraph { - height: auto; - word-wrap: break-word; - - &.is-url { - word-break: break-all; - } - } - } - - .attachment-link-more { - display: inline-block; - font-size: .9em; - margin: 5px 0; - } - - .attachment__author-icon { - @include border-radius(50px); - height: 14px; - margin-right: 5px; - width: 14px; - } - - .attachment__thumb-container { - float: right; - text-align: right; - width: 80px; - - img { - max-height: 75px; - max-width: 100%; - } - } - - .attachment-fields { - width: 100%; - - .attachment-field__caption { - font-weight: 600; - padding-top: .7em; - } - - .attachment-field { - p { - margin: 0; - } - } - } - - .attachment-actions { - margin-top: 9px; - - button { - @include border-radius(3px); - outline: 0; - margin: 8px 8px 0 0; - border-width: 1px; - border-style: solid; - height: 30px; - font-size: 13px; - font-weight: 700; - } - } - } -} diff --git a/webapp/sass/responsive/_desktop.scss b/webapp/sass/responsive/_desktop.scss deleted file mode 100644 index 3c467cf10..000000000 --- a/webapp/sass/responsive/_desktop.scss +++ /dev/null @@ -1,96 +0,0 @@ -@charset 'UTF-8'; - -@media screen and (max-width: 1800px) { - .inner-wrap { - &.move--left, - &.webrtc--show { - .date-separator, - .new-separator { - &.hovered--comment { - &:before, - &:after { - background: none; - } - } - } - } - } -} - -@media screen and (max-width: 1440px) { - .inner-wrap { - &.move--left, - &.webrtc--show { - .help__format-text { - display: none; - } - } - } - - .date-separator, - .new-separator { - &.hovered--comment { - &:before, - &:after { - background: none !important; - } - } - } - - .backstage-content { - margin: 46px 46px 46px 150px; - } -} - -@media screen and (max-width: 1140px) { - .tip-overlay { - &.tip-overlay--chat { - margin: -10px 0 0 -10px; - - .arrow { - left: auto; - right: 15px; - } - } - } - - .inner-wrap { - &.move--left, - &.webrtc--show { - .file-overlay { - font-size: em(18px); - - .overlay__circle { - height: 300px; - margin: -150px 0 0 -150px; - width: 300px; - } - - .overlay__files { - margin: 60px auto 15px; - width: 150px; - } - } - } - } -} - -@media (max-width: 1024px) { - .channel-header { - .search-bar__container { - .search__form { - width: 150px; - } - } - } - - .integration-option { - width: 280px; - } -} - -@media (min-width: 992px) { - .modal-lg { - width: 700px; - } -} diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss deleted file mode 100644 index b47db42a3..000000000 --- a/webapp/sass/responsive/_mobile.scss +++ /dev/null @@ -1,1886 +0,0 @@ -@charset 'UTF-8'; - -@media screen and (max-width: 768px) { - .channel-header { - .channel-header__icon { - display: none; - } - } - - .member-role .member-menu, - .member-drop .member-menu { - right: 0; - top: 30px; - } - - .post-code { - word-wrap: normal; - } - - .table-responsive { - border: none; - } - - .multi-select__container { - .btn { - display: block; - min-width: 50px; - } - - .Select-value-label { - max-width: 190px; - text-overflow: ellipsis; - } - } - - .more-modal__list { - .more-modal__actions--round { - @include opacity(.5); - } - } - - .post-create__container { - .post-create-footer { - padding: 0 10px; - } - - form { - padding: 0; - } - - .post-create-body { - padding: 0; - - .send-button { - display: block; - } - - textarea { - .app-content & { - border-left: none; - border-right: none; - } - } - } - - .msg-typing { - display: none; - } - - .emoji-picker__container { - display: none; - } - } - - .suggestion-list__content { - max-height: 145px; - } - - .webrtc__notification--rhs { - left: auto; - right: 0; - top: 47px; - width: 205px; - } - - .filtered-user-list { - .filter-button { - .btn { - width: 100%; - } - } - } - - .settings-modal { - .modal-body { - overflow: auto; - } - } - - #header-popover { - @include single-transition(all, .35s, ease); - @include translate3d(0, 100%, 0); - @include box-shadow(none); - background: alpha-color($black, .9); - border: none; - height: calc(100% - 50px); - max-width: 100%; - position: fixed; - top: 40px !important; - width: 100%; - - &.in { - @include translate3d(0, 0, 0); - } - - a { - color: #0091ff; - } - - .arrow { - display: none; - } - - .popover-content { - color: $white; - font-size: 15px; - padding: 15px 20px 100px; - - > div { - &:first-child { - -webkit-overflow-scrolling: touch; - height: calc(100vh - 150px); - overflow: auto; - } - } - } - - .close { - @include border-radius(50%); - border: 1px solid $white; - bottom: 25px; - color: $white; - display: block; - font-family: 'Open Sans', sans-serif; - font-size: 23px; - font-weight: 200; - height: 30px; - left: 50%; - line-height: 0; - margin-left: -15px; - opacity: 1; - padding-top: 13px; - position: fixed; - text-align: center; - text-shadow: none; - width: 30px; - } - } - - .app__body { - .edit-modal-body { - .custom-textarea { - max-height: 30vh; - } - } - } - - .video-div { - &.embed-responsive-item { - height: 0; - padding-bottom: 75%; - - iframe { - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - } - } - } - - .tutorial-steps__container { - .tutorial__content { - .tutorial__steps { - margin-top: 15%; - margin-bottom: 15%; - max-height: 70%; - padding-bottom: 0; - } - } - } - - .prompt { - .prompt__heading { - display: block; - - > div { - &:first-child { - display: block; - margin: 0 0 1em; - } - } - } - } - - .scrollbar--view { - margin-right: 0 !important; - } - - .post-code__language { - @include opacity(.6); - @include transition(none); - display: block; - position: relative; - } - - .post-code { - &:hover { - .post-code__language { - @include opacity(.6); - } - } - } - - .backstage-filters { - display: block; - - .backstage-filter__search { - margin: 10px 0; - width: 100%; - } - } - - .compliance-panel, - .audit-panel { - .row { - > .form-group { - padding-left: 15px; - } - } - } - - .user-popover { - cursor: pointer; - display: inline-block; - } - - .signup-team__container { - font-size: 1em; - } - - .sidebar--left .team__header .user__picture, - .sidebar--menu .team__header .user__picture { - display: none; - } - - .date-separator.hovered--before:after, - .date-separator.hovered--after:before, - .new-separator.hovered--after:before, - .new-separator.hovered--before:after { - background: none !important; - } - - .channel-intro { - margin: 0 0 35px; - } - - .post { - &:not(.post--compact) { - .bot-indicator { - left: 6px; - position: absolute; - top: 31px; - } - } - - .reacticon__container { - display: none; - } - - .post__dropdown { - display: inline-block; - height: 28px; - line-height: 21px; - text-align: center; - text-decoration: none; - width: 28px; - - &:after { - content: '...'; - font-size: 20px; - top: -3px; - } - } - - .post__remove { - margin-right: 10px; - visibility: visible; - } - - &.post--compact { - .post__img { - padding-top: 0; - } - - &.same--root { - &.same--user { - .post__header { - height: auto; - } - } - } - - .status-wrapper { - &:after { - bottom: 3px; - - .sidebar--right & { - bottom: 0; - } - } - } - - blockquote { - margin-top: 0; - } - } - - &.same--root { - &.same--user { - .flag-icon__container { - left: auto; - position: relative; - top: 1px; - } - } - } - - .post__content { - padding: 0 10px 0 0; - } - - .post__header { - margin-bottom: 0; - padding-right: 70px; - - .col__reply { - top: -3px; - width: 65px; - z-index: auto; - } - - .col__name { - .user-popover { - max-width: 130px; - } - } - } - - .comment-icon__container { - display: none; - visibility: visible; - - .sidebar--right & { - display: inline-block; - } - - &.icon--show { - display: inline-block; - } - } - - .post-list__content & { - &:hover { - background: transparent; - } - - .comment-icon__container { - visibility: visible; - } - } - - .dropdown, - .post__reply { - visibility: visible; - } - - .post__body { - width: 100%; - } - - .post__reply { - float: right; - margin-right: 20px; - - svg { - top: 1px; - } - } - - &.post--comment { - .post__body { - margin-top: 5px; - padding: 2px 0 0 7px; - } - } - - &.other--root { - &.post--comment { - .post__header { - .col__reply { - top: -3px; - } - } - } - - .post__reply { - &.post__reply--hide { - visibility: hidden; - } - } - } - - &.current--user { - .post__link { - margin: 0 0 8px; - } - } - - .star-icon__container { - left: auto; - position: relative; - top: auto; - - &:not(.visible) { - display: none; - } - } - - &.same--root { - .star-icon__container { - left: auto; - position: relative; - top: auto; - } - - &.same--user { - &.post--compact { - .status-wrapper { - &:after { - bottom: -2px; - } - } - } - - .post__img { - img { - display: block; - } - } - - .post__header { - height: auto; - margin-top: 5px; - - .col__name { - display: inline-block; - } - } - } - } - - .post__img { - width: 40px; - - img { - height: 32px; - width: 32px; - } - } - } - - .post-image__column { - height: 95px; - width: 200px; - } - - .form-control { - &.min-height { - min-height: 100px; - } - } - - .img-div { - max-width: 100%; - } - - .tip-div { - left: 15px; - right: auto; - } - - .tip-overlay { - &.tip-overlay--chat { - margin-left: 10px; - - .arrow { - left: 32px; - } - } - } - - .file-details__container { - display: block; - - .file-details__preview { - border-bottom: 1px solid #dddddd; - border-right: none; - display: block; - height: 150px; - width: 100%; - - img { - height: 64px; - width: 64px; - } - } - - .file-details { - height: auto; - width: 100%; - } - } - - .search-help-popover { - left: 55px; - max-width: calc(100% - 80px); - } - - .modal-direct-channels, - .more-channel__modal { - .member-count { - display: block; - float: none; - margin-top: 10px; - } - } - - .file-overlay { - font-size: em(18px); - - &.center-file-overlay { - .overlay__indent { - margin-left: 0; - } - } - - .overlay__circle { - height: 300px; - margin: -150px 0 0 -150px; - width: 300px; - } - - .overlay__files { - margin: 60px auto 15px; - width: 150px; - } - } - - .date-separator, - .new-separator { - &.hovered--after { - &:before { - background: none; - } - } - - &.hovered--before { - &:after { - background: none; - } - } - } - - .post-list__timestamp { - display: block; - } - - .signup-team__container { - font-size: .9em; - margin-bottom: 30px; - padding: 60px 10px 0; - - .signup-team__name { - font-size: 2em; - } - - .btn.btn-full { - padding-left: 10px; - } - - .btn { - .icon, - .fa { - margin-right: 6px; - } - } - } - - .app__body { - .row--invite { - .col-sm-6 { - &:first-child { - padding-right: 15px; - } - } - } - - .modal { - .modal--scroll { - .modal-body { - max-height: calc(100vh - 62px); - overflow: auto; - } - } - - .nav-pills { - > li { - &.active { - a { - background: transparent; - - &:before { - display: none; - } - } - } - } - } - - .info__label { - padding-bottom: 5px; - text-align: left; - } - - .modal-image { - .modal-button-bar { - line-height: 30px; - padding: 5px; - } - - .modal-image__wrapper { - > div { - font-size: 12px; - min-width: 250px; - } - - .modal-close { - @include opacity(1); - } - } - - .modal-button-bar { - @include opacity(1); - padding-right: 10px; - } - } - - .modal-header { - .modal-action { - margin-top: 10px; - } - - .close { - font-size: 27px; - font-weight: normal; - margin-top: -2px; - } - - .modal-title { - float: none; - max-width: 90%; - } - - .btn { - &.btn-primary { - display: block; - float: none; - margin: 10px 0 6px; - width: 100%; - } - } - } - - .settings-modal { - .modal-body { - min-height: 100%; - } - - .nav-pills { - > li { - &:hover { - a { - background: transparent !important; - } - } - } - } - - &.display--content { - .modal-header { - display: none; - } - - .settings-table { - display: block; - - .settings-content { - .section-title { - padding-right: 15px; - } - - .section-edit { - position: relative; - right: 0; - text-align: left; - top: 0; - } - - .appearance-section { - .theme-elements { - .element { - margin-right: 10px; - - &:nth-child(2n) { - margin-right: 10px; - } - } - } - } - - &.minimize-settings { - display: block; - } - - .section-min:hover { - background: none; - } - - .no-padding--left { - padding-left: 15px; - } - } - - .settings-links { - display: none; - } - - .modal-header { - display: block; - position: absolute; - top: 0; - width: 100%; - z-index: 5; - - .modal-title { - max-width: 100%; - padding: 0 40px; - text-align: center; - width: 100%; - - > span { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } - - .user-settings { - .tab-header { - display: none; - } - - .divider-dark.first { - display: none; - } - } - } - } - - .settings-table { - padding: 0; - - .nav { - position: relative; - top: auto; - width: 100%; - - &.position--top { - top: auto; - } - } - - .settings-content { - .section-edit { - text-align: left; - - .fa { - display: inline-block; - } - } - - &.minimize-settings { - display: none; - padding: 0; - - .user-settings { - padding: 70px 20px 30px; - } - } - - .section-min:hover { - background: none !important; - } - } - - .nav { - > li { - > a { - border-bottom: 1px solid transparent; - font-size: 1.1em; - line-height: 2.7; - - .icon { - margin: 0 7px; - } - } - } - } - } - } - } - } - - .file-preview__container { - margin: 10px 0 5px; - } - - .file-preview { - margin-top: 0; - } - - // Since system console is not responsive we're overriding bootstrap styles for it - .admin-sidebar { - .navbar-nav { - margin-top: 0; - - > li { - float: left; - } - - .dropdown-menu { - background: $white; - left: auto; - position: absolute; - right: 0; - } - } - } - - #navbar { - .navbar-default { - .navbar-header { - float: none; - margin: 0 -15px; - - .dropdown__icon { - @include background-size(100% 100%); - display: inline-block; - height: 16px; - width: 4px; - } - } - - .navbar-toggle { - display: block; - } - - .navbar-brand { - white-space: nowrap; - - .heading { - font-size: 17px; - font-weight: 400; - line-height: 50px; - position: relative; - vertical-align: top; - - .ios & { - line-height: 48px; - } - } - - .header-dropdown__icon { - font-size: 12px; - line-height: 50px; - margin-left: 5px; - top: 0; - vertical-align: top; - } - } - - .dropdown { - &.open { - .dropdown-menu { - @include translate3d(0, 0, 0); - visibility: visible; - } - } - } - - .dropdown-menu { - @include single-transition(all, .35s, ease); - @include translate3d(0, 100%, 0); - background: alpha-color($black, .9); - display: block; - height: calc(100% - 48px); - left: 0; - overflow: auto; - padding: 1.4em 0 0; - position: fixed; - top: 48px; - visibility: hidden; - width: 100%; - - .close { - @include border-radius(50%); - border: 1px solid $white; - bottom: 25px; - color: $white; - display: block; - font-family: 'Open Sans', sans-serif; - font-size: 23px; - font-weight: 200; - height: 30px; - left: 50%; - line-height: 0; - margin-left: -15px; - opacity: 1; - padding-top: 13px; - position: fixed; - text-align: center; - text-shadow: none; - width: 30px; - } - - > li { - > a { - border-bottom: 1px solid alpha-color($white, .3); - color: $white; - font-weight: 600; - line-height: 35px; - margin: 0 auto; - text-align: center; - width: 90%; - - &:hover { - background: transparent; - } - } - } - } - - .status { - margin: 0 5px 0 3px; - top: 2px; - width: 16px; - - svg { - max-height: 20px; - width: 16px; - } - } - } - } - - body { - &.white { - .inner-wrap { - > .row.content { - margin-bottom: -185px; - } - } - } - } - - .footer, - .footer-pane, - .footer-push { - height: 187px; - } - - .footer-pane { - .footer-link { - line-height: 1.7; - padding: 0; - text-align: right; - width: 100%; - - &.copyright { - width: 100%; - } - } - } - - .search-bar__container { - @include flex(0 0 50px); - background: $primary-color; - padding: 0; - - .search-form__container { - color: $black; - padding: 0; - } - - .search__form { - @include single-transition(all, .2s, linear); - @include translateX(0); - border: none; - margin-top: 9px; - width: 100%; - - .fa-spin { - font-size: 1.1em; - top: 9px; - } - - .search-bar { - font-size: 14px; - height: 32px; - padding: 0 40px; - } - - .search__icon { - left: 15px; - top: 7px; - - svg { - stroke: $black; - stroke-opacity: .4; - width: 17px; - } - } - - .icon--refresh { - @include opacity(.6); - right: 16px; - top: 9px; - } - - .form-control { - @include border-radius(3px); - background: $white; - border: none; - color: $dark-gray; - padding: 0 31px; - } - } - - .channel-header__links { - display: none; - } - } - - .sidebar--menu { - @include single-transition(transform, .35s, ease); - @include translate3d(290px, 0, 0); - border: none; - visibility: hidden; - width: 290px; - - &.visible { - display: block; - visibility: visible; - } - - &.move--left, - &.webrtc--show { - @include translate3d(0, 0, 0); - display: block; - visibility: visible; - } - } - - .sidebar--left { - @include single-transition(transform, .35s, ease); - @include translate3d(-290px, 0, 0); - border: none; - width: 290px; - - &.sidebar--padded { - padding-top: 0; - } - - &.move--right { - @include translate3d(0, 0, 0); - } - - .nav-pills__container { - height: calc(100% - 55px); - } - - > div { - padding-bottom: 70px; - } - - .nav-pills__unread-indicator { - width: 260px; - } - - .badge { - top: 13px; - } - - .team__header { - @include clearfix; - pointer-events: none; - - .user__name { - display: none; - } - - .team__name { - margin: 10px 0; - } - - .sidebar-header-dropdown { - display: none; - } - } - - .search__form { - display: block; - } - - .nav { - li { - &.dropdown.open { - padding-bottom: 25px; - - ul { - background: $white; - border-radius: 3px; - clear: both; - position: relative; - top: 5px; - - li { - a { - line-height: 30px; - } - } - } - } - - h4 { - margin: 2em 0 1.5em; - } - - > a { - font-size: 15px; - line-height: 2.5; - margin: 0; - - &:hover, - &:focus { - background: transparent !important; - } - - &.has-close { - .btn-close { - @include opacity(.5); - display: block; - right: 0; - text-align: center; - width: 40px; - } - } - } - } - } - } - - .sidebar--right { - @include translate3d(100%, 0, 0); - right: 0; - width: 100%; - - .post-create__container { - form { - padding: .5em 1em; - } - - .emoji-rhs { - display: none; - position: relative; - right: -1px; - top: 1px; - } - - .msg-typing:empty { - display: none; - } - - .post-create-footer { - padding-top: 10px; - - .control-label { - margin: .5em 0; - top: 0; - } - - .post-error { - left: 0; - top: 0; - } - } - } - - .sidebar-collapse__container { - display: table-cell; - vertical-align: top; - } - - .sidebar__search-clear { - color: inherit; - display: block; - height: 32px; - margin-right: 0; - text-align: center; - top: 0; - width: 42px; - - &.visible { - visibility: visible; - } - } - - .sidebar__search-clear-x { - font-size: 21px; - font-weight: 700; - line-height: 0; - position: relative; - top: 9px; - } - - .sidebar--right__close { - display: none; - } - - .sidebar-right__body { - height: calc(100% - 56px); - } - } - - .search-items-container { - height: calc(100% - 56px); - } - - .inner-wrap { - @include single-transition(all, .35s, ease); - - .app__body & { - &:before { - //Some trickery in order for the z-index transition to happen immediately on move-in and delayed on move-out. - background-color: transparent; - content: ''; - height: 100%; - left: -15px; - position: absolute; - top: 0; - transition: background-color .35s ease, z-index 0s ease .35s; - width: calc(100% + 30px); - z-index: 0; - } - } - - &.move--right { - @include translate3d(0, 0, 0); - - &:before { - @include single-transition(all, .35s, ease); - - background-color: rgba(0, 0, 0, .4); - z-index: 9999; - } - } - - &.move--left-small { - @include translate3d(-290px, 0, 0); - - &:before { - @include single-transition(all, .35s, ease); - background-color: rgba(0, 0, 0, .4); - z-index: 9999; - } - } - - &.move--left, - &.webrtc--show { - margin: 0; - @include translate3d(-100%, 0, 0); - } - } - - .integration-option { - height: auto; - margin-left: 0; - width: 100%; - } - - .app__content { - margin: 0; - padding-top: 50px; - - .channel__wrap & { - padding-top: 50px; - } - - #channel-header { - display: none; - } - } - - .channel__wrap { - .row { - &.header { - display: block; - } - } - } - - .post-comments { - padding: 9px 21px 10px 10px !important; - } - - .multi-teams { - - .app__content { - margin-left: 0; - } - - .sidebar--left { - left: 0; - - &.move--right { - left: 65px; - } - - .nav-pills__unread-indicator { - left: 15px; - } - } - - .team-sidebar { - display: none; - - &.move--right { - display: block; - @include translate3d(0, 0, 0); - } - } - } - - .post { - .attachment { - .attachment__body__wrap { - .btn-close { - height: 30px; - left: -15px; - top: 7px; - visibility: visible; - width: 30px; - } - } - - .attachment__image { - &.attachment__image--openraph { - max-width: 200px; - } - } - } - } -} - -@media screen and (max-width: 640px) { - .filtered-user-list { - height: calc(100vh - 80px); - } - - .more-modal--action { - .filtered-user-list { - height: calc(100vh - 110px); - } - } - - .app__body { - .modal { - .more-modal { - .modal-body { - max-height: calc(100vh - 62px); - padding-bottom: 5px; - } - } - } - - .post { - .open { - > .dropdown-menu__content { - display: table; - - > .dropdown-menu { - display: table-cell; - } - } - } - - .dropdown-menu__content { - height: 100%; - left: 0; - position: fixed; - top: 0; - width: 100%; - z-index: 9999; - - &:before { - background: alpha-color($black, .3); - content: ''; - height: 100%; - left: 0; - position: fixed; - top: 0; - width: 100%; - } - } - - .dropdown-menu { - &.bottom { - bottom: auto; - top: 0; - } - - background: transparent; - border: none; - bottom: auto; - box-shadow: none; - float: none; - height: 100%; - left: 0; - margin: 0; - padding: 0 2em; - position: relative; - top: 0; - vertical-align: middle; - width: 100%; - z-index: 9999; - - > li { - &:last-child { - a { - border: none; - } - } - } - - a { - border-bottom: 1px solid; - line-height: 45px; - position: relative; - text-align: center; - } - } - } - - .modal { - overflow: hidden; - padding: 0 !important; - - .modal-dialog { - height: 100%; - margin: 0; - max-width: 100%; - - .modal-content { - height: 100%; - } - } - - .modal-footer { - bottom: 0; - position: fixed; - width: 100%; - } - - .about-modal { - .about-modal__content { - display: block; - } - - .about-modal__hash { - p { - word-break: break-all; - - &:first-child { - float: none; - } - } - } - - .about-modal__logo { - float: none; - padding: 0; - text-align: center; - width: 100%; - - svg { - height: 100px; - width: 100px; - } - } - - .about-modal__logo + div { - padding: 2em 0 0; - } - } - } - } - - .access-history__table { - > div { - display: block; - } - - .access__report { - margin: 0 0 15px 15px; - } - - .access__date { - div { - margin-bottom: 15px; - } - } - } - - .activity-log__table { - > div { - display: block; - } - - .activity-log__report { - width: 100%; - } - - .activity-log__action { - margin-top: 10px; - text-align: left; - } - } - - .post { - .attachment { - .attachment__image { - &.attachment__image--openraph { - max-width: 200px; - } - } - } - } -} - -@media screen and (max-width: 550px) { - .app__body { - .more-modal { - &.more-system-members { - .filter-row { - min-height: 80px; - width: 100%; - } - } - - &.more-direct-channels { - .member-show { - display: none; - } - - select { - margin: 0; - width: 100%; - } - } - } - } - - .member-select__container { - left: 15px; - top: 60px; - width: calc(100% - 30px); - } - - .post { - .attachment { - .attachment__image { - &.attachment__image--openraph { - max-width: 180px; - } - } - } - } -} - -@media screen and (max-width: 480px) { - #user-profile-popover { - left: 50px !important; - } - - .post { - .img-div { - max-width: 100%; - } - } - - .nav-tabs { - margin-top: 1em; - - > li { - margin-right: 0; - - a { - font-size: .9em; - padding: 6px 11px; - } - } - } - - .sidebar--right { - .post { - &.post--compact { - .post__header { - height: auto; - } - } - } - } - - .backstage-header { - h1 { - float: none; - margin-bottom: 15px; - } - - .add-integrations-link { - float: none; - } - } - - .backstage-list__item { - display: block; - - .item-actions, - .actions { - margin-top: 15px; - padding: 0; - } - } - - .app__body { - .modal { - .settings-modal { - &.display--content { - .modal-body { - max-height: 90%; - } - } - - .modal-body { - max-height: 70%; - padding-bottom: 0; - } - - .settings-table { - .security-links { - display: block; - margin-bottom: 10px; - - &:last-child { - margin-bottom: 0; - } - } - } - } - } - } - - .tip-overlay.tip-overlay--sidebar { - min-height: 350px; - } - - .member-div { - padding: 8px 0; - - .member-drop, - .member-role { - margin: 0 0 0 44px; - padding: 5px 0; - position: relative; - right: 0; - top: 0; - } - - .open > .dropdown-menu { - left: 0; - right: auto; - } - } - - .sidebar--left { - @include translate3d(-260px, 0, 0); - width: 260px; - - .nav-pills__unread-indicator { - width: 230px; - } - } - - .inner-wrap { - &.move--right { - @include translate3d(0, 0, 0); - } - } - - .integration__icon { - display: none; - } - - .post { - .attachment { - .attachment__image { - &.attachment__image--openraph { - max-width: 120px; - } - } - } - } -} - -@media screen and (max-height: 640px) { - .signup-team__container { - font-size: .9em; - margin-bottom: 30px; - - .signup-team__name { - font-size: 2em; - } - } -} - -@media screen and (max-width: 320px) { - .multi-teams { - .sidebar--left { - width: 220px; - - .nav-pills__unread-indicator { - width: 190px; - } - } - } - - .post { - .post__header { - .col__name { - .user-popover { - max-width: 105px; - } - } - } - - .attachment { - .attachment__image { - &.attachment__image--openraph { - max-width: 80px; - } - } - } - } - - .tutorial-steps__container { - left: 0; - position: fixed; - top: 0; - z-index: 9999; - - .tutorial__content { - .tutorial__steps { - margin-top: 20px; - min-height: auto; - padding: 0 20px; - width: 100%; - - h1 { - font-size: 2em; - margin: -5px 0 20px; - } - - h3 { - font-size: 1.5em; - margin-bottom: 10px; - } - - .tutorial__app-icons { - margin: 10px 0; - } - - .tutorial__circles { - bottom: auto; - margin: 15px 0 20px; - position: relative; - } - - .tutorial__footer { - bottom: auto; - position: relative; - } - } - } - } - - .tip-overlay { - &.tip-overlay--sidebar { - min-height: 440px; - } - } -} - -@media screen and (max-width: 380px) and (max-height: 580px) { - #navbar { - .navbar-default { - .dropdown-menu { - padding-top: 1em; - - > li { - > a { - border: none; - font-size: 13px; - line-height: 27px; - } - } - } - } - } -} - - - -// on iOS, allow clicks within an input's label to actually propagate through to the input itself, -// but still allow clicks to a elements to go trough -// http://stackoverflow.com/a/34810294/6325807 -label { - span { - pointer-events: none; - } - - span a { - pointer-events: all; - } -} - -@media screen and (-webkit-min-device-pixel-ratio: 0) { - select, - textarea, - input { - font-size: 16px; - } -} diff --git a/webapp/sass/responsive/_module.scss b/webapp/sass/responsive/_module.scss deleted file mode 100644 index a799c145e..000000000 --- a/webapp/sass/responsive/_module.scss +++ /dev/null @@ -1,4 +0,0 @@ -@charset 'UTF-8'; -@import 'desktop'; -@import 'tablet'; -@import 'mobile'; diff --git a/webapp/sass/responsive/_tablet.scss b/webapp/sass/responsive/_tablet.scss deleted file mode 100644 index 092b8c226..000000000 --- a/webapp/sass/responsive/_tablet.scss +++ /dev/null @@ -1,378 +0,0 @@ -@charset 'UTF-8'; - -@media screen and (max-width: 960px) { - .textarea-wrapper { - .textbox-preview-link, - .textbox-help-link { - display: none; - } - } - - .help__format-text { - display: none; - } - - .post-right__scroll { - .post-create__container { - .post-create-body { - .icon__emoji_picker { - display: none; - top: -7px; - } - } - } - } - - .signup-team__container { - &.branded { - display: block; - margin: 0 auto; - max-width: 380px; - - .signup__markdown { - display: none; - } - } - } - - .sidebar--right { - @include single-transition(all, .35s, ease); - @include translateX(100%); - z-index: 10; - - &.move--left, - &.webrtc--show { - -webkit-transform: translateX(0) !important; - -moz-transform: translateX(0) !important; - -ms-transform: translateX(0) !important; - -o-transform: translateX(0) !important; - transform: translateX(0) !important; - - .search-bar__container { - z-index: 5; - } - } - } - - .backstage-content { - margin: 30px; - max-width: 100%; - padding: 0; - } - - .backstage-sidebar { - height: auto; - padding: 30px 15px 0; - position: relative; - width: 100%; - } - - .inner-wrap { - &:not(.move--left) { - margin-right: 0 !important; - } - - &.move--left, - &.webrtc--show { - margin-right: 0 !important; - - .channel-header__links { - position: relative; - right: auto; - top: auto; - } - } - - &.move--left, - &.webrtc--show, - &.move--right { - .header-list__right { - // hide it behind the RHS - z-index: -1; - } - } - } - - .post { - .attachment { - .attachment__image { - &.attachment__image--openraph { - max-height: 70px; - max-width: 300px; - - &.loading { - height: 70px; - } - } - } - } - } -} - -// Tablet and desktop -@media screen and (min-width: 768px) { - .col-sm-auto { - float: left; - } - - .second-bar { - display: none; - } - - .sidebar--right { - &.move--left, - &.webrtc--show { - @include translateX(0); - } - - &.sidebar--right--expanded { - width: calc(100% - 280px); - - .sidebar--right__bg { - background-color: alpha-color($black, .4); - visibility: visible; - } - - .search-bar__container { - padding-left: 10px; - } - - .sidebar-right-container { - position: relative; - z-index: 5; - } - - .sidebar--right__expand { - .fa-expand { - display: none; - } - - .fa-compress { - display: inline-block; - } - } - } - - .sidebar--right__title { - display: inline-block; - max-width: 300px; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - .inner-wrap { - &.move--left, - &.webrtc--show { - margin-right: 400px; - } - } - - .post { - &.post--compact { - - .channel__wrap & { - .post__time { - font-size: .85em; - left: -79px; - position: absolute; - text-align: right; - top: 3px; - width: 60px; - } - - .star-icon__container { - left: -65px; - position: absolute; - text-align: right; - top: 6px; - width: 60px; - } - } - - .post__pinned-badge { - margin-left: 0; - margin-right: 5px; - } - - &:not(.post--thread) { - padding: 0 .5em 0 77px; - - &.other--root { - - } - - .post__link { - margin: 3px 0 7px; - vertical-align: bottom; - } - - span { - p { - &:last-child { - margin-bottom: 0; - } - } - } - - .post__header { - float: left; - height: 21px; - padding-top: 2px; - - .col__name { - font-weight: bold; - margin-right: 2px; - padding-right: 5px; - position: relative; - z-index: 1; - } - - .colon { - display: inline; - } - - .col__reply { - top: -1px; - } - } - - &.other--root { - .post__link + .post__body { - clear: both; - } - - &.post--comment { - .post__header { - .col__reply { - top: -1px; - } - } - } - } - - .post-code { - clear: both; - } - - .post__body { - width: 100%; - } - - .post__content { - padding-right: 45px; - } - } - - .flag-icon__container { - left: -21px; - position: absolute; - top: 4px; - } - - .sidebar--right & .flag-icon__container { - left: auto; - position: relative; - top: 1px; - } - - &.same--root { - &.same--user { - padding-left: 77px; - padding-top: 0; - - .flag-icon__container { - left: -21px; - position: absolute; - top: 4px; - } - - .post__header { - .col__reply { - top: -1px; - } - } - - .post__img { - img { - display: none; - } - } - - &.post--root { - .post__img { - img { - display: block; - } - } - - .post__time { - @include opacity(.6); - } - } - } - - &.post--comment { - padding-top: 1px; - - &.same--user { - .post__img { - img { - display: none; - } - } - } - - .post__header { - margin-left: 12px; - } - } - } - } - - &.same--root { - &.same--user { - .post__time { - @include opacity(0); - } - - .post__header { - float: left; - padding-top: 3px; - - .col__reply { - top: -21px; - } - - .post__pinned-badge { - margin-right: 5px; - } - } - - &:not(.post--compact) { - .post__time { - display: inline-block; - font-size: 11px; - left: -14px; - line-height: 20px; - position: absolute; - text-align: right; - text-rendering: auto; - top: 4px; - width: 51px; - - &:hover { - text-decoration: underline; - } - } - } - } - - &.post--comment:not(.post--compact) { - .post__pinned-badge { - margin-left: 10px; - } - } - } - } -} diff --git a/webapp/sass/routes/_about-modal.scss b/webapp/sass/routes/_about-modal.scss deleted file mode 100644 index 539130ad0..000000000 --- a/webapp/sass/routes/_about-modal.scss +++ /dev/null @@ -1,116 +0,0 @@ -@charset 'UTF-8'; - -.modal { - .modal-content { - @include box-shadow(0 0 10px rgba($black, .5)); - border-radius: $border-rad; - } - - .about-modal { - .modal-content { - .modal-header { - background: transparent; - border: none; - color: inherit; - padding: 20px 25px 0; - - .close { - color: inherit; - font-weight: normal; - right: 15px; - } - - .modal-title { - color: inherit; - font-size: 16px; - } - - .icon { - margin: 0 5px 0 8px; - position: relative; - top: 1px; - - svg { - @include opacity(.8); - height: 14px; - width: 14px; - } - } - } - } - - .modal-body { - padding: 20px 25px 10px; - } - - &.large { - .modal-body { - padding-bottom: 20px; - } - } - - .about-modal__content { - @include clearfix; - @include display-flex; - @include flex-direction(row); - padding: 1em 0 3em; - } - - .about-modal__copyright { - @include opacity(.6); - margin-top: .5em; - } - - .about-modal__footer { - font-size: 13.5px; - } - - .about-modal__title { - line-height: 1.5; - margin: 0 0 10px; - } - - .about-modal__subtitle { - @include opacity(.6); - } - - .about-modal__hash { - @include opacity(.4); - font-size: .75em; - text-align: right; - - p { - &:first-child { - float: left; - text-align: left; - } - } - } - - .about-modal__notice { - @include opacity(.8); - font-size: .79em; - text-align: right; - - p { - &:first-child { - text-align: left; - } - } - } - - .about-modal__logo { - @include opacity(.9); - padding: 0 40px 0 20px; - - svg { - height: 125px; - width: 125px; - } - - path { - fill: inherit; - } - } - } -}
\ No newline at end of file diff --git a/webapp/sass/routes/_access-history.scss b/webapp/sass/routes/_access-history.scss deleted file mode 100644 index ea66f5f00..000000000 --- a/webapp/sass/routes/_access-history.scss +++ /dev/null @@ -1,32 +0,0 @@ -@charset 'UTF-8'; - -.access-history__table { - display: table; - line-height: 1.6; - padding-top: 15px; - width: 100%; - - &:first-child { - padding: 0; - } - - > div { - display: table-cell; - vertical-align: top; - } - - .access__date { - font-size: 15px; - font-weight: 600; - width: 190px; - } - - .access__report { - border-bottom: 1px solid #ddd; - padding-bottom: 15px; - } - - .report__info { - @include opacity(.8); - } -} diff --git a/webapp/sass/routes/_activity-log.scss b/webapp/sass/routes/_activity-log.scss deleted file mode 100644 index 19f4757ea..000000000 --- a/webapp/sass/routes/_activity-log.scss +++ /dev/null @@ -1,57 +0,0 @@ -@charset 'UTF-8'; - -.animation--highlight { - &:before { - animation: highlight 1.5s ease; - content: ''; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - display: inline-block; - } -} - -.activity-log__table { - border-top: 1px solid $light-gray; - display: table; - line-height: 1.8; - padding: 15px 0; - width: 100%; - - &:first-child { - border: none; - padding-top: 0; - } - - > div { - display: table-cell; - vertical-align: top; - } - - .activity-log__report { - width: 80%; - } - - .activity-log__action { - text-align: right; - } - - .report__platform { - font-size: 15px; - font-weight: 600; - - .fa { - margin-right: 6px; - } - } - - .report__info { - @include opacity(.8); - } -} - -.session-help-text { - padding: 0 0 20px; -} diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss deleted file mode 100644 index 7983cf131..000000000 --- a/webapp/sass/routes/_admin-console.scss +++ /dev/null @@ -1,673 +0,0 @@ -@charset 'UTF-8'; - -.admin-console__wrapper { - height: 100%; - overflow: auto; -} - -.admin-console { - color: #333; - height: 100%; - margin-left: 220px; - overflow: auto; - padding: 0 20px; - - .color-picker__popover { - position: absolute; - right: 0; - top: 40px; - z-index: 5; - } - - .dropdown-menu { - .divider { - @include opacity(1); - } - } - - .filtered-user-list { - height: calc(100vh - 120px); - } - - .Select-value-label { - white-space: nowrap; - } - - .inner-wrap { - position: absolute; - width: 100%; - } - - h3 { - font-weight: 600; - margin: 1em 0; - padding-bottom: .5em; - } - - h4 { - font-weight: 600; - margin-bottom: 2em; - } - - .form-control { - background-color: $white; - border: 1px solid $light-gray; - - &:focus { - @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)); - border-color: #66afe9; - outline: 0; - } - } - - .table { - &.table-margin--none { - margin-bottom: 0; - } - } - - .btn { - &.btn-spacing--right { - margin-right: 10px; - } - - .fa { - margin-right: 5px; - } - } - - .log__panel { - background-color: white; - border: $border-gray; - height: calc(100vh - 200px); - margin-top: 10px; - overflow: scroll; - padding: 5px; - width: 100%; - } - - &.admin { - background-color: #f1f1f1; - min-height: 600px; - overflow: auto; - padding: 0 40px 20px; - } - - .wrapper--fixed { - max-width: 800px; - } - - .form-horizontal { - margin-top: 40px; - - .control-label { - font-weight: 600; - padding-right: 0; - text-align: left; - } - - .has-error { - .control-label { - font-weight: normal; - } - } - - .form-group { - margin-bottom: 25px; - - &.half { - margin-bottom: 14px; - } - } - - .file__upload { - display: inline-block; - margin: 0 10px 10px 0; - position: relative; - - input { - @include opacity(0); - cursor: pointer; - height: 100%; - left: 0; - padding-left: 100%; - position: absolute; - top: 0; - width: 100%; - z-index: 5; - } - } - - .help-text { - color: alpha-color($black, .5); - display: block; - margin: 10px 0 0; - - &.no-margin { - margin: 0; - } - - &.no-margin--top { - margin-top: 0; - } - - ul, - ol { - padding-left: 23px; - } - - .help-link { - margin-right: 5px; - } - - .btn { - font-size: 13px; - } - - &.remove-filename { - margin-bottom: 5px; - position: relative; - top: -2px; - } - } - - .alert { - display: inline-block; - margin: 1em 0 0; - padding: 5px 7px; - position: relative; - top: 1px; - - .fa { - margin-right: 5px; - } - - &.alert-transparent { - background: $white; - border: $border-gray; - margin: 0; - padding: 8px 12px; - width: 100%; - } - - hr { - margin: .8em 0; - - &:last-child { - display: none; - } - } - } - } - - .banner { - background: $white; - border: $border-gray; - font-size: .95em; - margin: 2em 0; - padding: .8em 1.5rem; - - &.banner--url { - padding: 1.2em; - } - - .banner__url { - background: alpha-color($black, .07); - border-radius: 2px; - padding: .7em 1em; - word-break: break-all; - } - - .banner__heading { - font-size: 1.5em; - margin-bottom: 0.5em; - } - - &.warning { - background: #e60000; - } - } - - .popover { - border-radius: 3px; - font-size: .95em; - width: 100%; - } - - .panel { - background-color: transparent; - border: none; - } - - .panel-default { - > .panel-heading { - background-color: transparent; - padding: 10px 0; - } - - .panel-body { - padding: 30px 0 10px; - } - } - - .panel-group { - margin-bottom: 50px; - } - - .panel-title { - font-size: 24px; - line-height: 1.5; - - a { - @include clearfix; - display: block; - text-decoration: none; - - &.collapsed { - .fa-minus { - display: none; - } - - .fa-plus { - display: inline-block; - } - } - - .fa { - color: #aaa; - float: right; - font-size: 18px; - margin-top: 8px; - } - - .fa-plus { - display: none; - } - } - } - - .more-modal__list { - .filtered-user-list { - .filter-controls { - padding-bottom: 1em; - } - } - - .filter-row { - margin: 10px 0; - } - } - - .member-list-holder { - background: $white; - overflow: visible; - padding: 5px 0; - - .more-modal__list { - overflow: visible; - } - - .more-modal__row { - &:last-child { - border: none; - } - } - } - - .member-count { - @include opacity(.7); - margin-top: 8px; - } - - .admin-console-header { - border-bottom: 1px solid alpha-color($black, .1); - } - - .status-icon-unknown { - color: gray; - } - - .status-icon-success { - color: #69c169; - } - - .status-icon-warning { - color: #eac262; - } - - .status-icon-error { - color: #ea6262; - } - - .suggestion--selected { - background-color: #e2e2e2; - } -} - -.brand-img { - margin-bottom: 1.5em; - max-width: 150px; -} - -.admin-console__disabled-text { - color: #777; - margin: 10px 0 0 15px; -} - -.admin-sidebar { - background: #333; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 220px; - z-index: 5; - - .dropdown-menu { - max-height: 80vh; - max-width: 200px; - min-width: 200px; - overflow: auto; - } - - .team__header { - background: transparent; - } - - .nav-pills__container { - @include font-smoothing(initial); - background: #111; - height: calc(100% - 68px); - margin-top: 1px; - padding-bottom: 20px; - position: relative; - } - - .sidebar-category { - .category-title { - background: alpha-color($white, .15); - color: $white; - line-height: 15.4px; - padding: 10px; - - .category-icon { - font-size: 15px; - margin-right: 7px; - overflow: hidden; - right: 12px; - text-align: center; - top: 6px; - vertical-align: bottom; - width: 16px; - - &.fa-user { - font-size: 14px; - } - - &.fa-bar-chart { - font-size: 16px; - } - } - } - - .sections { - padding: 5px 0; - } - } - - .sidebar-section { - > .sidebar-section-title { - position: relative; - } - - .nav__sub-menu { - margin-bottom: 7px; - - &:empty { - display: none; - } - } - } - - .sections { - &.sections--settings { - .sidebar-section-title { - text-transform: uppercase; - - &:hover, - &:focus { - color: alpha-color($white, .5); - } - } - } - } - - .sidebar-section-title { - padding: 7px 35px 7px 15px; - } - - .sidebar-subsection-title { - padding: 7px 35px 7px 30px; - } - - .sidebar-section-title, - .sidebar-subsection-title { - color: alpha-color($white, .5); - display: block; - font-size: 13px; - position: relative; - - &:focus { - text-decoration: none; - } - - &:hover { - color: lighten($primary-color, 10); - text-decoration: none; - } - - &--active { - background: alpha-color($white, .1); - color: $white; - - &:hover, - &:focus { - background: alpha-color($white, .1); - color: $white; - } - - &:after { - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - color: whitesmoke; - content: "\f0d9"; - display: inline-block; - font: normal normal normal 26px/1 FontAwesome; - position: absolute; - right: -1px; - text-rendering: auto; - top: 3px; - } - } - } - - .sidebar-subsection-title { - &--active { - &:after { - top: 4px; - } - } - } - - .menu-icon--right { - font-size: 18px; - font-weight: 600; - height: 20px; - line-height: 20px; - position: absolute; - right: 12px; - text-align: center; - top: 8px; - width: 20px; - - .fa { - color: $white; - font-size: 13px; - position: relative; - right: -2px; - } - - &.menu__close { - cursor: pointer; - right: 10px; - top: 3px; - } - } -} - -.email-connection-test { - margin-top: -15px; -} - -.recycle-db { - margin-top: 50px !important; -} - -.cluster-status { - height: 24px; - width: 24px; -} - -.config-hash { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 130px; -} - -.system-users__filter-row { - display: flex; - margin-left: 15px; - margin-right: 15px; - - .system-users__filter { - flex: 1; - margin-right: 15px; - } - - .system-users__team-filter-label { - margin-right: 15px; - } - - .system-users__team-filter { - display: inline-block; - width: 200px; - } - - label { - font-weight: normal; - } -} - -.manage-teams { - .manage-teams__user { - align-items: center; - display: flex; - } - - .manage-teams__teams { - border-top: $border-gray; - margin: 1em 0 .3em; - - .btn-link { - &.danger { - color: #c55151; - } - } - } - - .member-row--padded { - padding-left: 20px; - - strong { - margin-right: 10px; - } - } - - .manage-row--inner { - padding: 15px 0 4px; - - & + div { - border-top: $border-gray; - } - } - - .manage-teams__profile-picture { - border-radius: 20px; - height: 40px; - width: 40px; - } - - .manage-teams__info { - flex: 1; - margin-left: 10px; - overflow: hidden; - white-space: nowrap; - - .manage-teams__name { - font-weight: bold; - overflow: hidden; - text-overflow: ellipsis; - } - - .manage-teams__email { - opacity: 0.5; - overflow: hidden; - text-overflow: ellipsis; - } - } - - .manage-teams__system-admin { - margin-left: 10px; - opacity: 0.5; - padding-right: 10px; - } - - .manage-teams__teams { - margin-top: 1em; - - .manage-row__empty { - padding: 9px 0; - } - } - - .manage-teams__team { - align-items: center; - border-bottom: $border-gray; - display: flex; - padding: 7px 10px; - - .btn { - font-size: .9em; - } - - .dropdown { - padding: 6px 0; - } - } - - .manage-teams__team-name { - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - } - - .manage-teams__team-actions { - margin-left: 10px; - - // Override default react-bootstrap style - .dropdown-toggle { - @include box-shadow(none); - } - } -} diff --git a/webapp/sass/routes/_backstage.scss b/webapp/sass/routes/_backstage.scss deleted file mode 100644 index 9785dcca9..000000000 --- a/webapp/sass/routes/_backstage.scss +++ /dev/null @@ -1,437 +0,0 @@ -.backstage { - height: 100vh; - width: 100vw; -} - -.backstage-navbar { - background: $white; - height: 41px; - border-bottom: 1px solid $light-gray; - padding: 10px 20px; - z-index: 10; -} - -.backstage-navbar__back { - color: inherit; - text-decoration: none; - - .fa { - font-size: 1.1em; - font-weight: bold; - margin-right: 7px; - } - - &:hover, - &:active { - color: inherit; - } -} - -.backstage-body { - background-color: $bg--gray; - bottom: 0; - display: inline-block; - height: calc(100vh - 41px); - overflow: auto; - top: 0; - width: 100%; -} - -.backstage-content { - background-color: $bg--gray; - margin: 46px auto; - max-width: 1200px; - padding-left: 135px; - vertical-align: top; -} - -.backstage-sidebar { - padding: 46px 20px; - position: absolute; - vertical-align: top; - width: 260px; - - ul { - list-style: none; - padding: 0; - } - - > ul { - @include clearfix; - @include border-radius(2px); - border-left: 1px solid $light-gray; - border-right: 1px solid $light-gray; - } -} - -.backstage-sidebar__category { - - + .backstage-sidebar__category { - .category-title { - border-top: none; - } - } - - .category-title { - border-bottom: 1px solid $light-gray; - border-top: 1px solid $light-gray; - color: $black; - display: block; - line-height: 35px; - padding: 0 10px; - position: relative; - - .fa { - @include opacity(.5); - position: relative; - text-align: center; - top: 1px; - width: 20px; - } - - .fa-smile-o { - font-size: 17px; - } - } - - .category-title--active { - background-color: $primary-color; - color: $white; - - .fa { - @include opacity(1); - } - } - - .category-title__text { - left: 2.5em; - position: absolute; - } - - .sections { - background: $white; - border-bottom: 1px solid $light-gray; - } - - .section-title, - .subsection-title { - display: block; - font-size: .95em; - line-height: 29px; - padding-left: 2em; - text-decoration: none; - } - - .subsection-title { - padding-left: 3em; - } - - .section-title--active, - .subsection-title--active { - background-color: $primary-color; - color: $white; - font-weight: 600; - } -} - -.backstage-header__divider { - color: $gray; - margin: 0 10px; -} - -.backstage-header { - @include clearfix; - margin-bottom: 20px; - width: 100%; - - h1 { - float: left; - font-size: 20px; - margin: 5px 0; - } - - .add-link { - float: right; - } -} - -.backstage-filters { - display: flex; - flex-direction: row; - width: 100%; -} - -.backstage-filters__sort { - flex-grow: 1; - flex-shrink: 0; - line-height: 30px; - - .filter-sort { - text-decoration: none; - - &.filter-sort--active { - color: inherit; - cursor: default; - } - } - - .divider { - margin-left: 8px; - margin-right: 8px; - } -} - -.backstage-filter__search { - flex-grow: 0; - flex-shrink: 0; - position: relative; - width: 270px; - - .fa { - @include opacity(.4); - left: 11px; - position: absolute; - top: 11px; - } - - input { - background: $white; - padding-left: 30px; - } -} - -.backstage-list { - background-color: $white; - border: 1px solid $light-gray; - padding: 5px 15px; - min-height: 50px; -} - -.backstage-list__help { - display: block; - margin: 1em 0; -} - -.backstage-list__item { - border-bottom: 1px solid $light-gray; - display: flex; - padding: 20px 15px; - position: relative; - - &:last-child { - border: none; - } - - .item-details { - color: $dark-gray; - flex-grow: 1; - flex-shrink: 1; - overflow: hidden; - text-overflow: ellipsis; - } - - .item-details__row + .item-details__row { - @include clearfix; - text-overflow: ellipsis; - } - - .item-details__name { - color: black; - font-weight: 600; - } - - .item-details__trigger { - margin-left: 6px; - } - - .item-details__description, - .item-details__content_type, - .item-details__token, - .item-details__trigger-words, - .item-details__trigger-when, - .item-details__url, - .item-details__creation { - display: inline-block; - margin-top: 10px; - vertical-align: top; - - &:empty { - display: none; - } - } - - .item-details__trigger-words { - white-space: nowrap; - } - - .item-actions { - flex-grow: 0; - flex-shrink: 0; - padding-left: 20px; - } -} - -// Backstage Form - -.backstage-form { - background-color: $white; - border: 1px solid $light-gray; - padding: 40px 30px 30px; - position: relative; - - &.backstage-form__confirmation { - padding: 30px 30px 20px; - } - - label { - font-weight: normal; - } - - .backstage-form__title { - margin: 5px 0 1.5em; - } - - .radio, - .checkbox { - input { - height: 16px; - margin: 0 5px 0 0; - position: relative; - top: 2px; - width: 16px; - } - } - - .form-control { - background: $white; - - &:focus { - border-color: $primary-color; - } - } - - .form__help { - color: $dark-gray; - font-size: .95em; - margin-top: 1em; - - & + .form__help { - margin-top: .4em; - } - } -} - -.backstage-form__footer { - border-top: 1px solid $light-gray; - margin-top: 2.5em; - padding-top: 1.8em; - text-align: right; - - .has-error { - float: left; - margin: 0; - } -} - -.integration__icon { - position: absolute; - height: 100px; - width: 100px; - right: 20px; - - &.integration-list__icon { - top: 50px; - } -} - -.integration-option { - background-color: $white; - border: 1px solid $light-gray; - display: inline-block; - margin: 0 30px 30px 0; - min-height: 230px; - padding: 20px; - text-align: center; - vertical-align: top; - width: 290px; - - &:last-child { - margin-right: 0; - } - - &:hover { - color: default; - text-decoration: none; - } -} - -.integration-option__image { - height: 80px; - margin: .5em 0 .7em; -} - -.integration-option__title { - color: $black; - margin-bottom: 10px; -} - -.integration-option__description { - color: $dark-gray; -} - -.emoji-list__table { - width: 100%; - - .backstage-list__item { - display: table-row; - } - - .backstage-list__empty td { - padding: 15px 20px; - } -} - -.emoji-list__table-header { - font-weight: bold; -} - -.emoji-list__name { - padding: 20px 0 20px 15px; - width: 30%; -} - -.emoji-list__image { - padding: 15px 0; - width: 15%; -} - -.emoji-list__creator { - padding: 15px 0; - width: 40%; -} - -.emoji-list__actions { - padding: 20px 15px 20px 0; - width: 15%; -} - -.add-emoji__upload { - display: inline-block; - margin: 0 10px 10px 0; - position: relative; - - input { - @include opacity(0); - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 100%; - z-index: 5; - } -} - -.add-emoji__filename, -.add-emoji__preview { - padding-top: 7px; -} diff --git a/webapp/sass/routes/_compliance.scss b/webapp/sass/routes/_compliance.scss deleted file mode 100644 index 922ea27d7..000000000 --- a/webapp/sass/routes/_compliance.scss +++ /dev/null @@ -1,39 +0,0 @@ -@charset 'UTF-8'; - -.compliance-panel__table, -.audit-panel__table, -.cluster-panel__table { - background-color: $white; - border: 1px solid $border-gray; - margin-top: 10px; - max-height: 70vh; - min-height: 100px; - overflow: auto; - padding: 5px; - width: 100%; -} - -.compliance-panel, -.audit-panel { - .row { - > .form-group { - padding-left: 0; - - &:first-child { - padding-left: 15px; - } - } - - label { - font-weight: 600; - } - } - - .fa-refresh { - margin-right: 5px; - } -} - -.compliance-panel { - margin-bottom: 3em; -} diff --git a/webapp/sass/routes/_docs.scss b/webapp/sass/routes/_docs.scss deleted file mode 100644 index 9a205f8a2..000000000 --- a/webapp/sass/routes/_docs.scss +++ /dev/null @@ -1,19 +0,0 @@ -@charset 'UTF-8'; - -.docs__page { - line-height: 1.7; - padding-bottom: 20px; - - > div { - margin: 0 auto; - max-width: 100%; - padding: 0 15px; - width: 1170px; - } - - h1.markdown__heading { - border-bottom: 1px solid #ddd; - margin: 1em 0 1em; - padding-bottom: 1rem; - } -} diff --git a/webapp/sass/routes/_error-page.scss b/webapp/sass/routes/_error-page.scss deleted file mode 100644 index 438e60554..000000000 --- a/webapp/sass/routes/_error-page.scss +++ /dev/null @@ -1,35 +0,0 @@ -@charset 'UTF-8'; - -body { - &.error { - .container-fluid { - display: table; - height: 90%; - } - - .error__container { - color: #555; - display: table-cell; - margin: 0 auto; - max-width: 800px; - padding: 5em 0; - text-align: left; - vertical-align: top; - } - - .error__icon { - color: #ccc; - font-size: 4em; - } - - h2 { - font-size: 1.5em; - font-weight: 600; - margin: .8em 0 .5em; - } - - p { - font-size: 1.2em; - } - } -} diff --git a/webapp/sass/routes/_get-app.scss b/webapp/sass/routes/_get-app.scss deleted file mode 100644 index 4d018fd78..000000000 --- a/webapp/sass/routes/_get-app.scss +++ /dev/null @@ -1,97 +0,0 @@ -.get-app { - hr { - border-top: 1px solid #ddd; - } - - .get-app__header { - color: #666; - font-size: 20px; - font-weight: bold; - text-align: center - } - - .get-app__screenshot { - border-bottom: 1px solid #ddd; - display: block; - margin: auto; - } - - .get-app__continue-with-browser { - display: block; - margin-top: 40px; - padding-bottom: 30px; - text-align: center; - } -} - -.get-android-app { - margin: 20px; - - .get-app__header { - text-align: left; - } - - .get-android-app__icon { - width: 60px; - } - - .get-android-app__app-info { - display: inline-block; - margin-left: 8px; - vertical-align: middle; - - .get-android-app__app-name { - color: #666; - display: block; - font-size: 13px; - font-weight: bold; - } - - .get-android-app__app-creator { - color: #aaa; - display: block; - font-size: 10px - } - } - - .get-app__screenshot { - width: 240px; - } - - .get-android-app__continue { - display: block; - font-size: 16px; - margin-bottom: 40px; - margin-top: 15px; - padding: 12px; - } -} - -.get-ios-app { - margin: 30px; - - .get-app__screenshot { - width: 180px; - } - - .get-ios-app__app-store-link { - display: block; - margin: auto; - margin-bottom: 30px; - width: 180px; - } - - .get-ios-app__already-have-it { - font-size: 18px; - margin-bottom: 20px; - text-align: center; - } - - .get-ios-app__open-mattermost { - display: block; - font-size: 20px; - margin: auto; - padding: 12px; - width: 220px; - } -}
\ No newline at end of file diff --git a/webapp/sass/routes/_loading.scss b/webapp/sass/routes/_loading.scss deleted file mode 100644 index 39f37b1b3..000000000 --- a/webapp/sass/routes/_loading.scss +++ /dev/null @@ -1,51 +0,0 @@ -@charset 'UTF-8'; - -@import "compass/css3/animation"; - -.loading-screen { - display: table; - height: 100%; - padding: 60px; - text-align: center; - width: 100%; - - .loading__content { - display: table-cell; - font-size: 0; - vertical-align: middle; - - h3 { - display: inline-block; - font-size: 16px; - font-weight: 400; - margin: 0 .2em; - } - - .round { - @include animation(move .75s infinite linear); - @include border-radius(10px); - background-color: #444444; - display: inline-block; - height: 4px; - margin: 0 2px; - opacity: .1; - width: 4px; - } - - @for $i from 1 through 3 { - .round-#{$i} { - @include animation-delay(.2s*$i); - } - } - - @include keyframes(move) { - from { - opacity: 1; - } - - to { - opacity: .1; - } - } - } -} diff --git a/webapp/sass/routes/_module.scss b/webapp/sass/routes/_module.scss deleted file mode 100644 index b7ecc08e7..000000000 --- a/webapp/sass/routes/_module.scss +++ /dev/null @@ -1,16 +0,0 @@ -// Only for combining all the files in this folder -@import 'about-modal'; -@import 'access-history'; -@import 'activity-log'; -@import 'admin-console'; -@import 'backstage'; -@import 'compliance'; -@import 'docs'; -@import 'error-page'; -@import 'get-app'; -@import 'loading'; -@import 'print'; -@import 'settings'; -@import 'shortcuts-modal'; -@import 'signup'; -@import 'statistics'; diff --git a/webapp/sass/routes/_print.scss b/webapp/sass/routes/_print.scss deleted file mode 100644 index 079fc200e..000000000 --- a/webapp/sass/routes/_print.scss +++ /dev/null @@ -1,123 +0,0 @@ -@charset 'UTF-8'; - -@media print { - * { - background: transparent !important; - color: black !important; - text-shadow: none !important; - } - - .post-list__content, - .post-list__table, - .app__content { - display: block; - } - - a:not(.mention-link), - a:not(.mention-link):visited { - text-decoration: underline; - } - - a[href^=http]:after { - content: ' <' attr(href) '> '; - } - - tr, - img, - pre, - blockquote, - code, - .post, - .date-separator { - page-break-inside: avoid; - } - - .post__header { - page-break-after: avoid; - } - - thead { - display: table-header-group; - } - - img { - max-width: 100% !important; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - #sidebar-left, - #sidebar-right, - #channel-header, - #post-create, - #post-list .more-messages-text, - .post .post__header .col__reply, - .post .post__content > div.post__img, - .attachment__content, - .post__body .img-div, - .post-image__thumbnail, - .post.post--system, - #archive-link-home, - .channel-intro { - display: none; - } - - #post-list, - #channel_view, - #post-list .post-list-holder-by-time { - overflow: visible; - overflow-y: visible; - } - - #app-content { - margin-left: 0; - } - - #channel_view .inner-wrap.move--left, - #channel_view .inner-wrap.webrtc--show { - margin-right: 0; - } - - .post-image__columns > div:first-child:before { - content: 'Attachments:'; - display: block; - font-weight: bold; - } - - .post-image__column { - width: inherit; - display: inline; - height: inherit; - background: transparent; - border-color: transparent; - border: 0 none; - } - - .post-image__details { - width: 100%; - border: 0 none; - - .post-image__name:before { - content: '['; - } - - .post-image__name:after { - content: ': ' attr(href) ']'; - } - - .post-image__name + div { - display: none; - } - } - - - .date-separator .separator__hr, - .new-separator .separator__hr { - top: 1.7em; - } -} diff --git a/webapp/sass/routes/_settings.scss b/webapp/sass/routes/_settings.scss deleted file mode 100644 index 0c690178e..000000000 --- a/webapp/sass/routes/_settings.scss +++ /dev/null @@ -1,555 +0,0 @@ -@charset 'UTF-8'; - -.user-settings { - min-height: 300px; - - .table-responsive { - max-height: 300px; - max-width: 560px; - } - - .authorized-apps__help { - font-size: 13px; - font-weight: 400; - margin-top: 7px; - } - - .authorized-apps__wrapper { - padding: 10px 0; - } - - .authorized-app { - display: inline-block; - width: 100%; - - &:not(:last-child) { - border-bottom: 1px solid #ccc; - margin-bottom: 10px; - } - - .authorized-app__name { - font-weight: 600; - } - - .authorized-app__url { - font-size: 13px; - font-weight: 400; - } - - .authorized-app__description, - .authorized-app__deauthorize { - font-size: 13px; - margin: 5px 0; - } - } -} - -.modal { - .settings-modal { - width: 800px; - - .modal-back { - font-size: 27px; - font-weight: normal; - height: 40px; - left: 0; - line-height: 32px; - position: absolute; - text-align: center; - top: 12px; - width: 50px; - - .fa { - height: 100%; - left: 0; - line-height: inherit; - position: absolute; - width: 100%; - } - } - - .modal-body { - margin: 0 auto; - min-height: calc(100% - 62px); - padding: 0; - } - - li { - list-style: none; - } - - label { - font-weight: 600; - - &.has-error { - font-weight: normal; - } - } - - .no-padding--left { - padding-left: 0; - } - - .profile-img { - height: 128px; - width: 128px; - } - - .profile-img-preview { - background-position: 50% 50%; - background-size: cover; - border-radius: 100%; - height: 128px; - width: 128px; - } - - .settings-table { - display: table; - margin: 0 auto; - max-width: 1000px; - table-layout: fixed; - width: 100%; - - > div { - display: table-cell; - vertical-align: top; - } - - .nav { - position: fixed; - width: 179px; - - &.position--top { - top: 57px; - } - } - - .security-links { - margin-right: 20px; - - .fa { - margin-right: 6px; - } - } - - .settings-links { - width: 180px; - } - - .settings-content { - padding: 0 20px 30px; - - .modal-header { - display: none; - } - - .section-min { - padding: 1em 0; - margin-bottom: 0; - cursor: pointer; - position: relative; - @include clearfix; - - &:hover { - background: #f9f9f9; - } - - &:hover .fa { - display: inline-block; - } - - &:hover .section-edit { - text-decoration: underline; - } - } - - .section-max { - @include clearfix; - @include alpha-property(background, $black, .05); - margin-bottom: 0; - padding: 1em 0 1.3em; - - .section-title { - margin-bottom: 10px; - } - } - - .appearance-section { - .theme-group { - .input-group-addon { - padding: 4px 5px; - width: 40px; - } - - img { - border: 1px solid rgba(black, .15); - width: 29px; - } - } - - .group--code { - select { - @include appearance(none); - appearance: none; - padding-right: 25px; - } - - &:before { - @include font-smoothing; - content: '\f0d7'; - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - pointer-events: none; - position: absolute; - right: 50px; - text-rendering: auto; - top: 11px; - z-index: 5; - - .browser--ie & { - display: none; - } - } - } - - .premade-themes { - margin-bottom: 10px; - - .theme-label { - font-weight: 400; - margin-top: 5px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - img { - border: 3px solid transparent; - &:hover { - cursor: pointer; - } - } - - .active { - img { - border-color: $primary-color; - } - } - } - - .theme-elements { - padding-left: 15px; - - .element { - margin-right: 10px; - - &:nth-child(2n) { - margin-right: 0; - } - } - } - - .theme-elements__header { - border-bottom: 1px solid; - cursor: pointer; - font-size: em(13.5px); - font-weight: 600; - margin: 10px 20px 0 0; - padding: 1px 0 10px; - - .fa-minus { - display: none; - } - - &.open { - .fa-minus { - display: inline-block; - } - - .fa-plus { - display: none; - } - } - - .header__icon { - @include opacity(.5); - float: right; - } - } - - .theme-elements__body { - @include border-radius(0 0 3px 3px); - @include legacy-pie-clearfix; - @include alpha-property(background-color, $white, .05); - display: none; - margin: 0 20px 0 0; - padding: 20px 0 0 20px; - - &.open { - display: block; - } - } - - .custom-label { - font-size: 12px; - font-weight: normal; - margin-bottom: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; - } - - .input-group-addon { - background: transparent; - } - - .radio { - label { - font-weight: 600; - } - } - } - - .section-title { - font-weight: 600; - margin-bottom: 5px; - padding-right: 50px; - } - - .section-edit { - margin-bottom: 5px; - text-align: right; - - .fa { - @include opacity(.5); - display: none; - font-size: 12px; - margin-right: 5px; - - &.fa-chevron-down { - margin-right: 0; - position: relative; - top: -1px; - } - } - } - - .section-describe { - @include clearfix; - @include opacity(.7); - text-overflow: ellipsis; - white-space: pre; - } - - .divider-dark { - border-bottom: 1px solid #aaa; - } - - .divider-light { - border-bottom: 1px solid lightgrey; - - & + .divider-light { - display: none; - } - - & + .divider-dark { - display: none; - } - } - - .setting-list { - list-style-type: none; - padding: 0; - } - - .setting-box__item { - &:first-child { - padding-top: 3px; - } - - &:last-child { - hr { - display: none; - } - } - } - - .setting-box__token-id { - margin: 4px 0; - } - - .setting-list__hint { - margin-top: 20px; - } - - .mentions-input { - margin-top: 10px; - } - - .setting-list-item { - margin-top: 7px; - } - - .has-error { - color: #a94442; - } - - .file-status { - color: #555; - font-size: 13px; - margin-top: 8px; - } - - .confirm-import { - margin: 10px 0; - padding: 4px 10px; - } - } - } - } - - .nav-pills { - > li { - margin: 0; - - a { - border-radius: 0; - color: $gray; - overflow: hidden; - padding: 8px 15px; - text-overflow: ellipsis; - white-space: nowrap; - } - - .icon { - font-size: 15px; - margin-right: 10px; - text-align: center; - top: 2px; - width: 14px; - } - - &:hover { - a { - @include alpha-property(background-color, $black, .1); - } - } - - &.active { - a { - background-color: #e1e1e1; - color: #111; - - &:before { - background: $black; - content: ''; - height: 100%; - left: 0; - position: absolute; - top: 0; - width: 5px; - } - } - - a, - a:hover, - a:focus { - @include alpha-property(background-color, $black, .1); - border-radius: 0; - font-weight: 400; - position: relative; - } - } - } - } - - h3 { - font-size: em(20px); - } -} - -.channel-settings { - padding: 0 10px; -} - -.tab-header { - margin-bottom: 1em; -} - -.setting-name { - color: grey; - font-weight: 500; -} - -.sel-btn { - margin-right: 5px; -} - -.member-div { - border-bottom: 1px solid lightgrey; - margin: 0; - padding: 2px; - position: relative; - width: 100%; - - &:first-child { - border-top: 1px solid lightgrey; - } - - .post-profile-img { - @include border-radius(50px); - margin-right: 8px; - } -} - -.member-role, -.member-drop { - .fa { - @include opacity(.5); - font-size: 12px; - margin-right: 5px; - } - - .member-menu { - right: 110%; - top: -50%; - } -} - -.member-invite { - position: absolute; - right: 10px; - top: 7px; -} - -.member-menu { - left: auto; - right: 0; -} - -.member-list { - overflow-x: visible; - width: 100%; -} - -.member-page { - padding-top: 50px; -} - -.active-border { - border: 1px solid red; -} - -.color-btn { - margin: 4px; -} - -.no-resize { - resize: none; -} - -.user-settings__submit-checkbox { - padding-top: 0px; - padding-bottom: 20px; -} diff --git a/webapp/sass/routes/_shortcuts-modal.scss b/webapp/sass/routes/_shortcuts-modal.scss deleted file mode 100644 index 854340b2c..000000000 --- a/webapp/sass/routes/_shortcuts-modal.scss +++ /dev/null @@ -1,102 +0,0 @@ -@charset 'UTF-8'; - -.app__body { - .modal { - .shortcuts-modal { - margin-top: 50px; - width: 1100px; - - .shortcuts-content { - .modal-header { - background: transparent; - border: none; - color: inherit; - padding: 20px 40px 20px; - - .close { - color: inherit; - font-size: 28px; - font-weight: normal; - right: 35px; - top: 35px; - } - - .modal-title { - color: inherit; - font-size: 20px; - - > div { - &:first-child { - margin-bottom: 2.5em; - } - } - - .shortcut-line { - margin: 17px 0; - - span { - &:first-child { - margin-right: 5px; - } - } - - .shortcut-key { - border-radius: 3px; - font-size: .9em; - font-weight: 500; - margin: 5px 0 5px 5px; - padding: 1px 5px; - } - } - } - } - } - - .modal-body { - max-height: calc(100vh - 67px); - padding: 0 40px 20px; - } - - .section { - > div { - &:first-child { - margin-bottom: 2.5em; - } - } - - .shortcut-line { - margin: 17px 0; - - span { - &:first-child { - margin-right: 5px; - } - } - - .shortcut-key { - border-radius: 3px; - font-size: 12px; - font-weight: 500; - margin: 5px 0 5px 5px; - padding: 1px 5px; - } - } - } - - .section-title { - font-size: 18px; - margin: 1.5em 0; - } - - .subsection { - border-left: 2px solid; - padding-left: 15px; - } - - .info__label { - margin: 35px 0 10px; - text-align: center; - } - } - } -} diff --git a/webapp/sass/routes/_signup.scss b/webapp/sass/routes/_signup.scss deleted file mode 100644 index 9aa179349..000000000 --- a/webapp/sass/routes/_signup.scss +++ /dev/null @@ -1,535 +0,0 @@ -@charset 'UTF-8'; - -.signup-header { - background: $bg--gray; - line-height: 33px; - padding: 0 1em .2em; - width: 100%; - - .fa { - margin-right: 5px; - } -} - -.signup-team__container { - margin: 0 auto; - max-width: 400px; - padding: 100px 0 50px; - position: relative; - - &.branded { - @include display-flex; - @include flex-direction(row); - max-width: 900px; - - .signup__markdown { - @include flex(1.3 0 0); - padding-right: 80px; - - img { - max-width: 450px; - } - - p { - color: lighten($black, 50%); - } - } - - .signup__content { - @include flex(1 0 0); - } - - } - - &.padding--less { - padding-top: 50px; - } - - .form-control:focus { - @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)); - } - - h1, - h2, - h3, - h4, - h5, - h6, - p { - line-height: 1.3; - } - - h1 { - font-weight: 600; - } - - h2 { - font-size: em(30px); - font-weight: 600; - letter-spacing: -.5px; - margin-bottom: .8em; - } - - h3 { - font-size: 1.5em; - font-weight: 600; - margin: 0 0 1.3em; - } - - h4 { - font-size: em(20px); - font-weight: 600; - margin-bottom: 1em; - } - - h5 { - font-size: em(16px); - } - - hr { - margin: 2em 0; - } - - p { - color: #555555; - line-height: 1.5; - margin-bottom: 1em; - } - - .input-group { - &.input-group--limit { - table-layout: fixed; - width: 100%; - - .tooltip-inner { - word-wrap: break-word; - } - - .form-control { - display: table-cell; - text-align: left; - width: 100%; - } - - .input-group-addon { - display: table-cell; - overflow: hidden; - text-align: left; - text-overflow: ellipsis; - width: 50%; - } - } - } - - .inner__content { - margin: 30px 0 20px; - } - - .block--gray { - @include border-radius(3px); - background: #f2f2f2; - display: inline-block; - font-weight: 600; - padding: .85em 1.2em; - } - - form { - margin-bottom: .8em; - } - - .signup-team-confirm__container { - padding: 100px 0; - } - - .signup-team-logo { - display: none; - margin: 0 0 2em; - width: 210px; - } - - .signup-team-login { - font-weight: 600; - padding-bottom: 10px; - } - - .signup-team__name { - font-size: 2.2em; - font-weight: 600; - margin: .5em 0 0; - } - - .signup-team__subdomain { - font-size: 1.5em; - font-weight: 300; - margin: .2em 0 1.2em; - text-transform: uppercase; - } - - .form-control { - height: em(38px); - } - - .or__container { - background: #dddddd; - height: 1px; - margin: 2em 0; - margin: 2.5em 0 2.5em -1rem; - text-align: left; - - span { - background: #ffffff; - display: inline-block; - font-size: 1.14286em; - font-weight: 600; - line-height: 20px; - position: relative; - text-align: center; - top: -10px; - width: 40px; - } - } - - ul { - margin-bottom: 0; - padding-left: 18px; - } - - .btn { - font-size: 1em; - font-weight: 600; - margin-right: 5px; - padding: em(7px) em(15px); - - .fa { - font-size: 17px; - margin-right: 8px; - - &.fa--margin-top { - position: relative; - top: 2px; - } - } - - .icon { - @include background-size(100% 100%); - display: inline-block; - height: 18px; - margin-right: 8px; - position: relative; - text-align: center; - top: -1px; - width: 18px; - } - - &.btn-custom-login { - @include border-radius(2px); - color: $white; - display: block; - height: 40px; - line-height: 36px; - margin: 1em 0; - min-width: 200px; - padding: 0 1em 0 2em; - text-align: left; - width: 200px; - - > span { - position: relative; - top: 11px; - vertical-align: top; - - > span { - display: inline-block; - line-height: normal; - vertical-align: top; - } - } - - &.gitlab { - background: #554488; - - &:hover { - background: darken(#554488, 10%); - } - - .icon { - background-image: url('../images/gitlabLogo.png'); - } - } - - &.google { - background: #dd4b39; - - &:hover { - background: darken(#dd4b39, 10%); - } - - .icon { - background-image: url('../images/googleLogo.png'); - } - } - - &.office365 { - background: #0079d6; - - &:hover { - background: darken(#0079d6, 10%); - } - - .icon { - background-image: url('../images/office365Logo.png'); - } - } - - &.ldap { - background: #3AA1CF; - - &:hover { - background: darken(#3AA1CF, 10%); - } - } - - &.email { - background: $primary-color; - - &:hover { - background: $primary-color--hover; - } - } - - &.saml { - background: #34a28b; - - &:hover { - background: darken(#34a28b, 10%); - } - } - - &.btn--full { - max-width: 350px; - padding-left: 35px; - text-align: left; - width: 100%; - } - - &.btn--large { - width: 300px; - } - } - - &.btn-default { - color: #444444; - } - - .fa { - position: relative; - - &.fa-check, - &.fa-refresh { - font-size: .9em; - left: -2px; - margin-right: .5em; - } - - &.fa-chevron-right { - font-size: .8em; - right: -5px; - top: 0; - } - - &.fa-chevron-left { - font-size: .8em; - left: -2px; - top: 0px; - } - } - } - - .has-error { - .control-label { - @include border-radius(3px); - background: #f2f2f2; - color: #999999; - font-size: 14px; - font-weight: normal; - margin: 1em 0 0; - padding: .7em 1em; - width: 100%; - - &:before { - @extend %font-awesome; - color: #aaaaaa; - content: '\f071'; - margin-right: 4px; - } - } - } - - .reset-form { - @include border-radius(3px); - font-size: .95em; - position: relative; - - p { - color: inherit; - } - } - - // Modifier Styles - h1, - h2, - h3, - h4, - h5, - h6 { - &.margin--top-none { - margin-top: 0; - } - - &.margin--bottom-none { - margin-bottom: 0; - } - - &.margin--less { - margin-bottom: .3em; - } - - &.sub-heading { - font-weight: 400; - margin-bottom: 0; - } - - &.color--light { - font-weight: 300; - } - } - - p { - &.margin--extra { - margin-bottom: 1.5em; - } - - &.margin--less { - margin-bottom: .3em; - } - - .black, - &.black { - color: #000000; - } - } - - .color--light { - color: #777777; - } - - .margin--extra { - margin-top: 2.5em; - } - - .margin--extra-2x { - margin-top: 5em; - } -} - -.signup-team-all { - @include border-radius(2px); - border: 1px solid #dddddd; - margin: 0 0 20px; - - .signup-team-dir { - background: #fafafa; - border-top: 1px solid #d5d5d5; - overflow: hidden; - - &:first-child { - border: none; - } - - .icon { - cursor: pointer; - float: left; - margin: 16px 7px 0 15px; - opacity: .45; - - svg { - height: 20px; - width: 20px; - } - } - - a { - color: inherit; - display: block; - font-size: 1.1em; - height: 3.5em; - line-height: 3.6em; - padding: 0 15px; - } - } - - .signup-team-dir-err { - background: #fafafa; - border-top: 1px solid #d5d5d5; - color: inherit; - padding: 5px 15px; - - &:first-child { - border: none; - } - } - - .signup-team-dir__name { - float: left; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: calc(100% - 50px); - - } - - .signup-team__icon { - color: $dark-gray; - float: right; - font-size: 1.5em; - line-height: 25px; - position: relative; - top: .66em; - - &.fa-spin { - font-size: .9em; - right: -2px; - top: 16px; - } - - &.fa-info-circle { - float: left; - line-height: 1.5em; - margin-right: .3em; - padding-left: .5em; - font-size: 1.5em; - top: 11px; - } - } -} - - -.authorize-box { - border: 1px solid $black; - height: 280px; - margin: 100px auto; - width: 500px; -} - -.authorize-inner { - padding: 20px; -} - -.authorize-btn { - margin-right: 6px; -} - -.verify_panel { - margin: 60px auto auto; - max-width: 380px; -}
\ No newline at end of file diff --git a/webapp/sass/routes/_statistics.scss b/webapp/sass/routes/_statistics.scss deleted file mode 100644 index 85232708a..000000000 --- a/webapp/sass/routes/_statistics.scss +++ /dev/null @@ -1,120 +0,0 @@ -@charset 'UTF-8'; - -.team_statistics { - .total-count { - @include border-radius(3px); - background: $white; - border: 1px solid $light-gray; - margin: 1em 0; - text-align: center; - width: 100%; - - .title { - border-bottom: 1px solid $light-gray; - font-size: 13px; - font-weight: 400; - padding: 7px 10px; - text-align: left; - - span { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: calc(100% - 20px); - } - - .fa { - color: #555555; - float: right; - font-size: 16px; - margin: 0; - } - } - - .content { - color: #555555; - font-size: 30px; - font-weight: 600; - overflow: auto; - padding: .3em 0 .35em; - } - } - - .total-count--day { - background: $white; - border: 1px solid $light-gray; - clear: both; - height: 275px; - margin: 10px; - padding: 5px 10px 10px; - width: 760px; - - > div { - font-size: 18px; - font-weight: 300; - } - } - - .recent-active-users { - table { - table-layout: fixed; - width: 100%; - } - - .content { - max-height: 400px; - overflow: auto; - padding: 0; - } - - tr { - &:first-child { - td { - border-top: none; - } - } - - td { - @include clearfix; - border-left: 1px solid $light-gray; - border-top: 1px solid $light-gray; - font-size: 13px; - font-weight: 400; - padding: 5px 5px 6px; - text-overflow: ellipsis; - white-space: nowrap; - - &:first-child { - border-left: none; - } - } - } - } - - .team-statistics__header-row { - display: flex; - margin-bottom: 1.5em; - margin-top: 1.5em; - } - - .team-statistics__header { - display: inline-block; - flex: 1; - margin-right: 15px; - overflow: hidden; - padding-bottom: .5em; - - > h3 { - margin: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - .team-statistics__team-filter { - display: inline-block; - width: 200px; - } -} diff --git a/webapp/sass/styles.scss b/webapp/sass/styles.scss deleted file mode 100644 index c42722652..000000000 --- a/webapp/sass/styles.scss +++ /dev/null @@ -1,20 +0,0 @@ -@charset 'UTF-8'; - -@import 'compass/utilities'; -@import 'compass/css3'; - -// Dependancies -@import '~bootstrap/dist/css/bootstrap.css'; -@import '~jasny-bootstrap/dist/css/jasny-bootstrap.css'; -@import '~perfect-scrollbar/dist/css/perfect-scrollbar.css'; -@import '~font-awesome/css/font-awesome.css'; -@import '~bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css'; -@import '~react-select/dist/react-select.css'; - -// styles.scss -@import 'utils/module'; -@import 'base/module'; -@import 'routes/module'; -@import 'components/module'; -@import 'layout/module'; -@import 'responsive/module'; diff --git a/webapp/sass/utils/_animations.scss b/webapp/sass/utils/_animations.scss deleted file mode 100644 index ffdbcb219..000000000 --- a/webapp/sass/utils/_animations.scss +++ /dev/null @@ -1,21 +0,0 @@ -@charset 'UTF-8'; - -@keyframes spin { - from { - transform: scale(1) rotate(0deg); - } - - to { - transform: scale(1) rotate(360deg); - } -} - -@keyframes highlight { - from { - @include alpha-property(background, $yellow, .5); - } - - to { - background: none; - } -} diff --git a/webapp/sass/utils/_functions.scss b/webapp/sass/utils/_functions.scss deleted file mode 100644 index 26e3c6147..000000000 --- a/webapp/sass/utils/_functions.scss +++ /dev/null @@ -1,33 +0,0 @@ -@charset "UTF-8"; - -@function em($pixels, $context: 14px) { - @return ($pixels / $context * 1em) -} - -@function alpha-color($color, $amount) { - @return rgba($color, $amount) -} - -%popover-box-shadow { - @include box-shadow(rgba(black, .175) 1px -3px 12px); -} - -%font-awesome { - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - transform: translate(0, 0); -} - -@mixin unselectable { - -webkit-user-select: none; /* Chrome/Safari */ - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* IE10+ */ - - /* Rules below not implemented in browsers yet */ - -o-user-select: none; - user-select: none; -} diff --git a/webapp/sass/utils/_mixins.scss b/webapp/sass/utils/_mixins.scss deleted file mode 100644 index 4d2b031e4..000000000 --- a/webapp/sass/utils/_mixins.scss +++ /dev/null @@ -1,38 +0,0 @@ -@charset 'UTF-8'; - -@mixin file-icon($path) { - @include background-size(60px auto); - background-color: $white; - background-image: url($path); - background-position: center; - background-repeat: no-repeat; -} - -@mixin alpha-property($property, $color, $opacity) { - #{$property}: rgba($color, $opacity); -} - -@mixin font-smoothing($value: antialiased) { - @if $value == antialiased { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - @else { - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; - } -} - -@mixin cursor($value) { - cursor: -webkit-$value; - cursor: zoom-$value; -} - -// Webrtc button -@mixin webrtc-button { - .webrtc__button { - &.offline { - @include opacity(.5); - } - } -} diff --git a/webapp/sass/utils/_modifiers.scss b/webapp/sass/utils/_modifiers.scss deleted file mode 100644 index e388d0901..000000000 --- a/webapp/sass/utils/_modifiers.scss +++ /dev/null @@ -1,109 +0,0 @@ -@charset 'UTF-8'; - -.padding-top { - padding-top: 7px; - - &.x2 { - padding-top: 14px; - } - - &.x3 { - padding-top: 21px; - } -} - -.padding-bottom { - padding-bottom: 7px; - - &.x2 { - padding-bottom: 14px; - } - - &.x3 { - padding-bottom: 21px; - } - - .control-label { - font-weight: 600; - - &.text-left { - text-align: left; - } - } -} - -.padding-left { - padding-left: 7px; - - &.x2 { - padding-left: 14px; - } - - &.x3 { - padding-left: 21px; - } -} - -.padding-right { - padding-right: 7px; - - &.x2 { - padding-right: 14px; - } - - &.x3 { - padding-right: 21px; - } -} - -.margin-right { - margin-right: 7px; - - &.x2 { - margin-right: 14px; - } - - &.x3 { - margin-right: 21px; - } -} - -.margin-left { - margin-left: 7px; - - &.x2 { - margin-left: 14px; - } - - &.x3 { - margin-left: 21px; - } -} - -.margin-top { - margin-top: 7px; - - &.half { - margin-top: 4px; - } - - &.x2 { - margin-top: 14px; - } - - &.x3 { - margin-top: 21px; - } -} - -.margin-bottom { - margin-bottom: 7px; - - &.x2 { - margin-bottom: 14px; - } - - &.x3 { - margin-bottom: 21px; - } -} diff --git a/webapp/sass/utils/_module.scss b/webapp/sass/utils/_module.scss deleted file mode 100644 index 5cf2a85be..000000000 --- a/webapp/sass/utils/_module.scss +++ /dev/null @@ -1,6 +0,0 @@ -// Only for combining all the files in this folder -@import 'variables'; -@import 'functions'; -@import 'mixins'; -@import 'animations'; -@import 'modifiers'; diff --git a/webapp/sass/utils/_variables.scss b/webapp/sass/utils/_variables.scss deleted file mode 100644 index 85bdd28a3..000000000 --- a/webapp/sass/utils/_variables.scss +++ /dev/null @@ -1,29 +0,0 @@ -@charset 'UTF-8'; - -// Color Variables -$primary-color: rgb(35, 137, 215); -$primary-color--hover: darken($primary-color, 10%); -$bg--gray: rgb(245, 245, 245); -$white: rgb(255, 255, 255); -$black: rgb(0, 0, 0); -$red: rgb(214, 73, 70); -$yellow: rgb(255, 255, 0); -$light-gray: rgba(0, 0, 0, .15); -$gray: rgba(0, 0, 0, .3); -$dark-gray: rgba(0, 0, 0, .5); - -// Page Variables -$border-gray: 1px solid #ddd; - -// Random variables -$border-rad: 1px; - -// Webrtc Variables -$button--ready: #00A6EE; -$video-circle-btn: #2f81b7; -$video-circle-hover: #56C303; -$video-circle-offline: #aaa; -$button--cancel: #E41020; -$button--pickup: #73B001; -$connecting: $white; -$webrtc-notification-bg: rgba(112, 128, 144, .8);
\ No newline at end of file |