refactor: split scss file
This commit is contained in:
sualko
Родитель
8d04c91ee2
Коммит
8bbe5fb6a3
|
|
@ -13,3 +13,6 @@ charset = utf-8
|
|||
indent_style = space
|
||||
indent_size = 3
|
||||
quote_type = single
|
||||
|
||||
[scss/**.scss]
|
||||
indent_size = 2
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"indent_size": 3,
|
||||
"indent_char": " ",
|
||||
"end_with_newline": true
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"extends": "stylelint-config-sass-guidelines",
|
||||
"rules": {
|
||||
"string-quotes": "double",
|
||||
"selector-max-id": 1,
|
||||
"max-nesting-depth": 5,
|
||||
"selector-max-compound-selectors": 5,
|
||||
"selector-no-qualifying-type": [true, {
|
||||
"ignore": ["attribute", "class", "id"]
|
||||
}],
|
||||
"selector-class-pattern": [
|
||||
"^[a-z0-9_\\-]+$",
|
||||
{
|
||||
"message":
|
||||
"Selector should be written in lowercase with hyphens and underscores (selector-class-pattern)"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
305
scss/_oc.scss
305
scss/_oc.scss
|
|
@ -1,305 +0,0 @@
|
|||
@keyframes jsxc-left-to-right {
|
||||
0% {
|
||||
background-position-x: 0%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position-x: 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position-x: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
#jsxc-roster {
|
||||
padding-top: 5px; // NC >= 14
|
||||
top: 45px;
|
||||
z-index: 1500;
|
||||
}
|
||||
|
||||
#jsxc_toggleRoster {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
#jsxc-window-list, #jsxc_windowListSB {
|
||||
z-index: 1500;
|
||||
}
|
||||
|
||||
.jsxc-dialog-wrapper {
|
||||
z-index: 1600;
|
||||
}
|
||||
|
||||
#jsxc {
|
||||
padding: 20px;
|
||||
|
||||
h1 {
|
||||
margin: 15px 0 5px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#jsxc_submit {
|
||||
font-size: 15px;
|
||||
padding: 3px 5px;
|
||||
opacity: 1;
|
||||
font-weight: normal;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
#ojsxc {
|
||||
.form-group {
|
||||
overflow: hidden;
|
||||
|
||||
> label, > .form-col {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
box-sizing: border-box;
|
||||
padding: 6px 15px 6px 0;
|
||||
width: 100%;
|
||||
margin: 3px 0;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 33%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.form-no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-col {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 66%;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.form-col-offset {
|
||||
@media (min-width: 768px) {
|
||||
padding-left: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
box-sizing: border-box;
|
||||
padding-right: 15px;
|
||||
width: 100%;
|
||||
|
||||
&[type='checkbox'] {
|
||||
margin: 13px 0;
|
||||
width: auto;
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&[type='radio'] {
|
||||
width: auto;
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&[readonly] {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
&:invalid {
|
||||
border: 1px solid red;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.jsxc-loading {
|
||||
background-image: linear-gradient(to right, #fff, #fff);
|
||||
background-position-x: 10%;
|
||||
background-size: 30px 100%;
|
||||
background-repeat: no-repeat;
|
||||
animation: jsxc-left-to-right 5s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
em, .boshUrl-msg {
|
||||
display: block;
|
||||
clear: left;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h3 {
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 33%;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
%msg {
|
||||
border: 1px solid #fff;
|
||||
color: #030;
|
||||
padding: 11px;
|
||||
padding-left: 38px;
|
||||
background-position: 12px center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #f1f1f1;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.jsxc_success {
|
||||
@extend %msg;
|
||||
|
||||
background-image: url("../img/checkmark-green.svg");
|
||||
}
|
||||
|
||||
.jsxc_fail {
|
||||
@extend %msg;
|
||||
|
||||
background-image: url("../img/cross-red.svg");
|
||||
background-position: 12px 5px;
|
||||
}
|
||||
|
||||
.jsxc_log {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#mainContainer, #odf-toolbar {
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: auto !important;
|
||||
z-index: 70 !important;
|
||||
}
|
||||
|
||||
#header .jsxc_chatIcon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
float: right;
|
||||
background-image: url("../img/chat-icon-white.svg");
|
||||
background-size: 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
#content, #content-wrapper, #filestable > thead {
|
||||
padding-right: 0;
|
||||
transition: padding-right 0.5s;
|
||||
}
|
||||
|
||||
#mainContainer, #odf-toolbar, #app-sidebar {
|
||||
right: 0;
|
||||
transition: right 0.5s;
|
||||
}
|
||||
|
||||
.app-mail .submit-message-wrapper {
|
||||
transition: right 0.5s;
|
||||
|
||||
.submit-message {
|
||||
transition: right 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
.jsxc-roster-shown {
|
||||
#content, #content-wrapper, #filestable > thead {
|
||||
padding-right: 210px;
|
||||
}
|
||||
|
||||
#mainContainer, #odf-toolbar, #app-sidebar {
|
||||
right: 210px;
|
||||
}
|
||||
|
||||
.app-mail .submit-message-wrapper {
|
||||
right: 225px;
|
||||
|
||||
.submit-message {
|
||||
right: 225px;
|
||||
}
|
||||
}
|
||||
|
||||
#app-content.with-app-sidebar {
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#body-login {
|
||||
#jsxc_windowList, #jsxc_roster {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#contactsmenu-contacts {
|
||||
.jsxc_statusIndicator {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
right: 13px;
|
||||
top: 13px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.contact {
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-icon-javascript-xmpp-client {
|
||||
background-image: url("../img/app-black.svg");
|
||||
}
|
||||
|
||||
.jsxc-internal-server {
|
||||
#jsxc_buddylist .jsxc_more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#jsxc_menu {
|
||||
.jsxc_joinChat, .jsxc_addBuddy {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
//fonts
|
||||
$font-sans: Arial, sans-serif;
|
||||
$font-serif: serif;
|
||||
|
||||
$window-bar-bg: #0082c9;
|
||||
$window-bar-color: #c0dff1;
|
||||
$window-bar-color-hover: #fff;
|
||||
|
||||
@import "modules/animations";
|
||||
@import "vendor/jsxc";
|
||||
|
||||
@import "partials/nextcloud";
|
||||
@import "partials/misc";
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
//fonts
|
||||
$font_sans: Arial, sans-serif;
|
||||
$font_serif: serif;
|
||||
|
||||
$window_bar_bg: #0082c9;
|
||||
$window_bar_color: #c0dff1;
|
||||
$window_bar_color_hover: #fff;
|
||||
|
||||
@import "oc";
|
||||
|
||||
.jsxc-bar--window, .jsxc-window-item .jsxc-memberlist {
|
||||
background-color: $window_bar_bg;
|
||||
color: $window_bar_color;
|
||||
|
||||
:hover {
|
||||
// color: $window_bar_color_hover;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
@keyframes jsxc-left-to-right {
|
||||
0% {
|
||||
background-position-x: 0%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position-x: 100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position-x: 0%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
#jsxc_submit {
|
||||
font-size: 15px;
|
||||
padding: 3px 5px;
|
||||
opacity: 1;
|
||||
font-weight: normal;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
#ojsxc {
|
||||
.form-group {
|
||||
overflow: hidden;
|
||||
|
||||
>label,
|
||||
>.form-col {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
box-sizing: border-box;
|
||||
padding: 6px 15px 6px 0;
|
||||
width: 100%;
|
||||
margin: 3px 0;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 33%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.form-no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-col {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 66%;
|
||||
}
|
||||
|
||||
input {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.form-col-offset {
|
||||
@media (min-width: 768px) {
|
||||
padding-left: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
box-sizing: border-box;
|
||||
padding-right: 15px;
|
||||
width: 100%;
|
||||
|
||||
&[type='checkbox'] {
|
||||
margin: 13px 0;
|
||||
width: auto;
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&[type='radio'] {
|
||||
width: auto;
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
&[readonly] {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
&:invalid {
|
||||
border: 1px solid red;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.jsxc-loading {
|
||||
background-image: linear-gradient(to right, #fff, #fff);
|
||||
background-position-x: 10%;
|
||||
background-size: 30px 100%;
|
||||
background-repeat: no-repeat;
|
||||
animation: jsxc-left-to-right 5s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
em,
|
||||
.boshUrl-msg {
|
||||
display: block;
|
||||
clear: left;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h3 {
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 33%;
|
||||
border-bottom: 1px solid #e1e1e1;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
%msg {
|
||||
border: 1px solid #fff;
|
||||
color: #030;
|
||||
padding: 11px;
|
||||
padding-left: 38px;
|
||||
background-position: 12px center;
|
||||
background-repeat: no-repeat;
|
||||
background-color: #f1f1f1;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.jsxc_success {
|
||||
@extend %msg;
|
||||
|
||||
background-image: url("../img/checkmark-green.svg");
|
||||
}
|
||||
|
||||
.jsxc_fail {
|
||||
@extend %msg;
|
||||
|
||||
background-image: url("../img/cross-red.svg");
|
||||
background-position: 12px 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#header .ojsxc-chat-icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
float: right;
|
||||
background-image: url("../img/chat-icon-white.svg");
|
||||
background-size: 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-icon-javascript-xmpp-client {
|
||||
background-image: url("../img/app-black.svg");
|
||||
}
|
||||
|
||||
.jsxc-internal-server {
|
||||
#jsxc_buddylist .jsxc_more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#jsxc_menu {
|
||||
|
||||
.jsxc_joinChat,
|
||||
.jsxc_addBuddy {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
#mainContainer,
|
||||
#odf-toolbar {
|
||||
right: 0;
|
||||
left: 0;
|
||||
width: auto !important;
|
||||
z-index: 70 !important;
|
||||
}
|
||||
|
||||
#body-login {
|
||||
#jsxc_windowList,
|
||||
#jsxc_roster {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#contactsmenu-contacts {
|
||||
.jsxc_statusIndicator {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
right: 13px;
|
||||
top: 13px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.contact {
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
#content,
|
||||
#content-wrapper,
|
||||
#filestable>thead {
|
||||
padding-right: 0;
|
||||
transition: padding-right 0.5s;
|
||||
}
|
||||
|
||||
#mainContainer,
|
||||
#odf-toolbar,
|
||||
#app-sidebar {
|
||||
right: 0;
|
||||
transition: right 0.5s;
|
||||
}
|
||||
|
||||
.app-mail .submit-message-wrapper {
|
||||
transition: right 0.5s;
|
||||
|
||||
.submit-message {
|
||||
transition: right 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
.jsxc-roster-shown {
|
||||
|
||||
#content,
|
||||
#content-wrapper,
|
||||
#filestable>thead {
|
||||
padding-right: 210px;
|
||||
}
|
||||
|
||||
#mainContainer,
|
||||
#odf-toolbar,
|
||||
#app-sidebar {
|
||||
right: 210px;
|
||||
}
|
||||
|
||||
.app-mail .submit-message-wrapper {
|
||||
right: 225px;
|
||||
|
||||
.submit-message {
|
||||
right: 225px;
|
||||
}
|
||||
}
|
||||
|
||||
#app-content.with-app-sidebar {
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
.jsxc-bar--window,
|
||||
.jsxc-window-item .jsxc-memberlist {
|
||||
background-color: $window-bar-bg;
|
||||
color: $window-bar-color;
|
||||
|
||||
:hover {
|
||||
// color: $window_bar_color_hover;
|
||||
}
|
||||
}
|
||||
|
||||
#jsxc {
|
||||
padding: 20px;
|
||||
|
||||
h1 {
|
||||
margin: 15px 0 5px;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#jsxc-roster {
|
||||
padding-top: 5px; // NC >= 14
|
||||
top: 45px;
|
||||
z-index: 1500;
|
||||
}
|
||||
|
||||
#jsxc-window-list,
|
||||
#jsxc_windowListSB {
|
||||
z-index: 1500;
|
||||
}
|
||||
|
||||
.jsxc-dialog-wrapper {
|
||||
z-index: 1600;
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
export default function injectChatIcon() {
|
||||
var div = $('<div/>');
|
||||
|
||||
div.addClass('jsxc_chatIcon');
|
||||
div.addClass('ojsxc-chat-icon');
|
||||
div.click(function() {
|
||||
jsxc.toggleRoster();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const fileLoader = {
|
|||
};
|
||||
|
||||
module.exports = {
|
||||
entry: ['./scss/jsxc.oc.scss', './ts/index.ts'],
|
||||
entry: ['./scss/index.scss', './ts/index.ts'],
|
||||
output: {
|
||||
filename: 'js/bundle.js',
|
||||
path: path.resolve(__dirname, DESTINATION_DIR),
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче