Updating asss lint stuff with other scss improvements
Этот коммит содержится в:
Asaad Mahmood
@@ -1,13 +1,13 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.alert {
|
||||
padding: 8px 12px;
|
||||
@include border-radius($border-rad);
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
.alert--confirm {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: 4px 10px;
|
||||
margin: 1px 0 0 10px;
|
||||
}
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
@@ -5,19 +5,19 @@
|
||||
@include border-radius($border-rad);
|
||||
|
||||
&.btn-primary {
|
||||
background: $primary-color;
|
||||
border-color: transparent;
|
||||
background: $color--primary;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: $color--primary--hover;
|
||||
background: $primary-color--hover;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-inactive {
|
||||
background: $light-gray;
|
||||
border-color: transparent;
|
||||
background: #707070;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.emoticon {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
display: inline-block;
|
||||
margin-bottom: .25em;
|
||||
background-size: contain;
|
||||
display: inline-block;
|
||||
height: 1.5em;
|
||||
margin-bottom: .25em;
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
.emoticon-suggestion {
|
||||
@include clearfix;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.emoticon-suggestion__image {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 6px 6px 0 5px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
@@ -1,29 +1,28 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.error-bar {
|
||||
background-color: #09f;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
background-color: darken($primary-color, 5%);
|
||||
color: $white;
|
||||
padding: 5px 30px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
padding: 5px 30px;
|
||||
|
||||
&__close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
padding: 0 10px;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-decoration: none;
|
||||
top: 0;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,27 +1,31 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.file-preview__container {
|
||||
position: relative;
|
||||
margin: 1px 0 10px;
|
||||
width: 100%;
|
||||
max-height: 100px;
|
||||
height: 100px;
|
||||
white-space: nowrap;
|
||||
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;
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
margin: 0 0 0 10px;
|
||||
position: relative;
|
||||
border: 1px solid #ddd;
|
||||
@include clearfix;
|
||||
width: 120px;
|
||||
|
||||
&:hover .file-preview__remove:after {
|
||||
@include opacity(1);
|
||||
&:hover {
|
||||
.file-preview__remove {
|
||||
&:after {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
@@ -29,13 +33,13 @@
|
||||
}
|
||||
|
||||
.spinner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
height: 32px;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
margin-top: -16px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -46,14 +50,15 @@
|
||||
}
|
||||
|
||||
.file-preview__remove {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
|
||||
&:after {
|
||||
background: rgba(0, 0, 0, .4);
|
||||
@include opacity(0);
|
||||
@include alpha-property(background, $black, .4);
|
||||
content: '';
|
||||
height: 100%;
|
||||
left: 0;
|
||||
@@ -61,33 +66,31 @@
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
@include opacity(0);
|
||||
}
|
||||
|
||||
i {
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
color: $white;
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
opacity: inherit;
|
||||
text-shadow: 0 0px 3px #444;
|
||||
text-shadow: 0 0px 3px rgba(0, 0, 0, .7);
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
text-shadow: 0 0 3px alpha-color($black, .7);
|
||||
top: 5px;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
|
||||
.image-comment {
|
||||
background-position: left top;
|
||||
background-repeat: no-repeat;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
|
||||
.file-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&.audio {
|
||||
@include file-icon('../images/icons/audio.png');
|
||||
@@ -131,36 +134,30 @@
|
||||
}
|
||||
|
||||
.post-image__column {
|
||||
border: 1px solid alpha-color($black, .2);
|
||||
float: left;
|
||||
height: 100px;
|
||||
margin: 5px 10px 5px 0;
|
||||
position: relative;
|
||||
width: 240px;
|
||||
height: 100px;
|
||||
float: left;
|
||||
margin: 5px 10px 5px 0;
|
||||
border: 1px solid lightgrey;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: grey;
|
||||
}
|
||||
}
|
||||
|
||||
.post-image__load {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 20px 20px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: 20px 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-image: url('~images/load.gif');
|
||||
}
|
||||
|
||||
.post-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
background-color: $white;
|
||||
background-repeat: no-repeat;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
&.small {
|
||||
background-position: center;
|
||||
@@ -170,60 +167,59 @@
|
||||
background-position: top left;
|
||||
}
|
||||
|
||||
.spinner.file__loading {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
.spinner {
|
||||
.file__loading {
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
margin-top: -16px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.file__loaded {
|
||||
max-width: initial;
|
||||
|
||||
&.landscape,
|
||||
&.quadrat {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
&.portrait {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .file-playback__controls.stop {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
.post-image__thumbnail {
|
||||
@include cursor(zoom-in);
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
cursor: zoom-in;
|
||||
cursor: -webkit-zoom-in;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.post-image__details {
|
||||
float: left;
|
||||
@include clearfix;
|
||||
word-break: break-word;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
border-left: 1px solid #ddd;
|
||||
background: $white;
|
||||
border-left: 1px solid $light-gray;
|
||||
color: alpha-color($black, .8);
|
||||
float: left;
|
||||
font-size: 13px;
|
||||
height: 100%;
|
||||
padding: 7px;
|
||||
color: #333;
|
||||
width: 50%;
|
||||
word-break: break-word;
|
||||
|
||||
.post-image__name {
|
||||
margin-bottom: 3px;
|
||||
display: block;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.post-image__download {
|
||||
@include opacity(.7);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding-right: 7px;
|
||||
cursor: pointer;
|
||||
@include opacity(.7);
|
||||
}
|
||||
|
||||
.post-image__type {
|
||||
@@ -231,57 +227,55 @@
|
||||
}
|
||||
|
||||
.post-image__size {
|
||||
margin-left: 4px;
|
||||
@include opacity(.6);
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-details__container {
|
||||
@include display-flex;
|
||||
display: -ms-flexbox;
|
||||
|
||||
.file-details {
|
||||
width: 320px;
|
||||
height: 270px;
|
||||
padding: 14px;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
width: 320px;
|
||||
|
||||
.file-details__name {
|
||||
color: #333;
|
||||
color: alpha-color($black, .9);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.file-details__info {
|
||||
color: grey;
|
||||
color: alpha-color($black, .5);
|
||||
}
|
||||
}
|
||||
|
||||
.file-details__preview {
|
||||
width: 320px;
|
||||
border-right: 1px solid $light-gray;
|
||||
height: 270px;
|
||||
border-right: 1px solid #ddd;
|
||||
vertical-align: center;
|
||||
width: 320px;
|
||||
|
||||
// helper to center the image icon in the preview window
|
||||
.file-details__preview-helper {
|
||||
height: 100%;
|
||||
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;
|
||||
bottom: 0;
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
-webkit-transition: opacity .6s;
|
||||
-moz-transition: opacity .6s;
|
||||
-o-transition: opacity .6s;
|
||||
transition: opacity .6s;
|
||||
z-index: 2;
|
||||
|
||||
&.stop {
|
||||
@include opacity(0);
|
||||
@@ -289,6 +283,6 @@
|
||||
}
|
||||
|
||||
.view-image__loading {
|
||||
background: black;
|
||||
background: $black;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
@@ -15,12 +15,21 @@
|
||||
&.no-resize {
|
||||
resize: none;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
[readonly] {
|
||||
@include alpha-property(background, $white, .1);
|
||||
color: inherit;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control[disabled],
|
||||
.form-control[readonly],
|
||||
fieldset[disabled] .form-control {
|
||||
cursor: auto;
|
||||
background: rgba(#fff, .1);
|
||||
color: inherit;
|
||||
fieldset {
|
||||
&[disabled] {
|
||||
.form-control {
|
||||
@include alpha-property(background, $white, .1);
|
||||
color: inherit;
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,22 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
a {
|
||||
color: $primary-color;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
word-break: break-word;
|
||||
color: $color--primary;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: $color--primary--hover;
|
||||
}
|
||||
|
||||
.text-danger,
|
||||
a.text-danger {
|
||||
color: #e05f5d;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #e05f5d;
|
||||
color: $primary-color--hover;
|
||||
}
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
color: desaturate($red, 20%);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: desaturate($red, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.mention {
|
||||
color: #fff;
|
||||
background: $color--primary;
|
||||
@include border-radius(3px);
|
||||
background: $primary-color;
|
||||
color: $white;
|
||||
padding-bottom: 2px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding-bottom: 2px;
|
||||
@include border-radius(3px);
|
||||
}
|
||||
|
||||
.mentions__name {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 2px;
|
||||
z-index: 101;
|
||||
line-height: 36px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 2px;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
z-index: 101;
|
||||
|
||||
.mention-align {
|
||||
@include clearfix;
|
||||
@@ -28,29 +28,29 @@
|
||||
}
|
||||
|
||||
.mention__image {
|
||||
margin-right: 6px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
line-height: 36px;
|
||||
@include border-radius(32px);
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
height: 32px;
|
||||
line-height: 36px;
|
||||
margin-right: 6px;
|
||||
text-align: center;
|
||||
@include border-radius(32px);
|
||||
width: 32px;
|
||||
|
||||
.mention--align {
|
||||
display: inline-block;
|
||||
max-width: 80%;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.mention__fullname {
|
||||
color: grey;
|
||||
color: $dark-gray;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.mention--highlight {
|
||||
background-color: #fff2bb;
|
||||
background-color: $yellow;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,24 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
#channel_members_modal .modal-body {
|
||||
min-height: 110px;
|
||||
.browser--ie {
|
||||
.modal {
|
||||
.modal-dialog {
|
||||
@include translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px 15px;
|
||||
overflow: auto;
|
||||
padding: 20px 15px;
|
||||
|
||||
.edit-modal-body {
|
||||
overflow: visible;
|
||||
|
||||
.suggestion-list__content {
|
||||
max-height: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.more-table {
|
||||
@@ -15,27 +27,23 @@
|
||||
}
|
||||
|
||||
.modal {
|
||||
color: alpha-color($black, .9);
|
||||
width: 100%;
|
||||
color: #333;
|
||||
|
||||
body.browser--IE & {
|
||||
.modal-dialog {
|
||||
@include translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&.image_modal {
|
||||
.modal-backdrop.in {
|
||||
@include opacity(.7);
|
||||
&.modal-image {
|
||||
.modal-backdrop {
|
||||
&.in {
|
||||
@include opacity(.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-textarea {
|
||||
border-color: $light-gray;
|
||||
color: inherit;
|
||||
border-color: #ccc;
|
||||
|
||||
&:focus {
|
||||
border-color: #ccc;
|
||||
border-color: $light-gray;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
@@ -44,15 +52,15 @@
|
||||
font-size: 13px;
|
||||
|
||||
&.btn-default {
|
||||
border: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.info__label {
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.team-member-list {
|
||||
@@ -60,21 +68,21 @@
|
||||
}
|
||||
|
||||
.remove__member {
|
||||
color: $dark-gray;
|
||||
float: right;
|
||||
color: #999;
|
||||
font-size: 20px;
|
||||
line-height: 0;
|
||||
padding: 6px;
|
||||
|
||||
&:hover {
|
||||
color: #e56565;
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
max-width: 95%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 95%;
|
||||
}
|
||||
|
||||
.modal-push-down {
|
||||
@@ -82,51 +90,51 @@
|
||||
}
|
||||
|
||||
.modal-next-bar {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-radius: 0;
|
||||
background: $color--primary;
|
||||
color: #fff;
|
||||
padding: 15px 15px 11px;
|
||||
border: 1px solid #ddd;
|
||||
min-height: 56px;
|
||||
@include border-radius(0);
|
||||
@include clearfix;
|
||||
background: $primary-color;
|
||||
border: 1px solid $light-gray;
|
||||
color: $white;
|
||||
min-height: 56px;
|
||||
padding: 15px 15px 11px;
|
||||
|
||||
.modal-title {
|
||||
color: $bg--gray;
|
||||
float: left;
|
||||
font-size: 17px;
|
||||
line-height: 27px;
|
||||
color: #f4f4f4;
|
||||
|
||||
.name {
|
||||
color: $white;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-action {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button.close {
|
||||
color: #fff;
|
||||
.close {
|
||||
@include opacity(1);
|
||||
z-index: 5;
|
||||
width: 30px;
|
||||
@include single-transition(all, .25s, ease-in);
|
||||
color: $white;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
@include single-transition(all, .25s, ease-in);
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
width: 30px;
|
||||
z-index: 5;
|
||||
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
@include alpha-property(background, $black, .1);
|
||||
}
|
||||
|
||||
span {
|
||||
@@ -149,8 +157,8 @@
|
||||
}
|
||||
|
||||
.no-channel-message {
|
||||
text-align: center;
|
||||
padding: 2em 1em;
|
||||
text-align: center;
|
||||
|
||||
.primary-message {
|
||||
font-size: 1.25em;
|
||||
@@ -168,46 +176,46 @@
|
||||
}
|
||||
|
||||
.modal-chevron-icon {
|
||||
top: 50%;
|
||||
font-size: 120%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.modal-prev-bar {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&#more_channels {
|
||||
&.more-channel__modal {
|
||||
.modal-body {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-image {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
.modal-body {
|
||||
@include clearfix;
|
||||
height: 100%;
|
||||
display: table;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
max-width: 90%;
|
||||
.modal-image__wrapper {
|
||||
@include border-radius(3px);
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
max-width: 90%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
@@ -215,33 +223,31 @@
|
||||
}
|
||||
|
||||
&.default {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: url('../images/close.png') no-repeat;
|
||||
@include single-transition(opacity, .6s);
|
||||
@include background-size(100% 100%);
|
||||
width: 37px;
|
||||
@include opacity(0);
|
||||
background-image: url('../images/close.png');
|
||||
cursor: pointer;
|
||||
height: 37px;
|
||||
position: absolute;
|
||||
right: -13px;
|
||||
top: -13px;
|
||||
@include opacity(0);
|
||||
-webkit-transition: opacity .6s;
|
||||
-moz-transition: opacity .6s;
|
||||
-o-transition: opacity .6s;
|
||||
transition: opacity .6s;
|
||||
cursor: pointer;
|
||||
width: 37px;
|
||||
z-index: 9999;
|
||||
|
||||
&.modal-close--show {
|
||||
@@ -250,99 +256,95 @@
|
||||
}
|
||||
|
||||
> div {
|
||||
background: $white;
|
||||
display: inline-block;
|
||||
min-height: 100px;
|
||||
min-width: 320px;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&:hover .file-playback__controls.stop {
|
||||
@include opacity(1);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.spinner.file__loading {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
top: 50%;
|
||||
margin-top: -16px;
|
||||
.spinner {
|
||||
.file__loading {
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
margin-top: -16px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: alpha-color($black, 0);
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-body {
|
||||
vertical-align: middle;
|
||||
.modal-image__body {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.image-control {
|
||||
width: 50px;
|
||||
height: 45px;
|
||||
background: url('../images/prev.png') left no-repeat;
|
||||
float: left;
|
||||
background: url(../images/prev.png) left no-repeat;
|
||||
top: 50%;
|
||||
position: relative;
|
||||
height: 45px;
|
||||
margin-top: -23px;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
width: 50px;
|
||||
|
||||
&.image-next {
|
||||
background: url('../images/next.png') left no-repeat;
|
||||
float: right;
|
||||
background: url(../images/next.png) left no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.loader-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.loader-percent {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
color: grey;
|
||||
color: $dark-gray;
|
||||
height: 20px;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 55px;
|
||||
}
|
||||
|
||||
.modal-button-bar {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
background-color: #222;
|
||||
@include single-transition(opacity, .6s);
|
||||
@include border-radius(0 0 3px 3px);
|
||||
@include opacity(0);
|
||||
-webkit-transition: opacity .6s;
|
||||
-moz-transition: opacity .6s;
|
||||
-o-transition: opacity .6s;
|
||||
transition: opacity .6s;
|
||||
background-color: $black;
|
||||
bottom: -40px;
|
||||
left: 0;
|
||||
line-height: 40px;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
&.footer--show {
|
||||
@include opacity(1);
|
||||
@@ -356,10 +358,10 @@
|
||||
}
|
||||
|
||||
.text {
|
||||
vertical-align: middle;
|
||||
bottom: 0;
|
||||
color: white;
|
||||
color: $white;
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.public-link {
|
||||
@@ -376,11 +378,12 @@
|
||||
}
|
||||
|
||||
.row--invite {
|
||||
margin-right: 40px;
|
||||
@include clearfix;
|
||||
margin-right: 40px;
|
||||
|
||||
.col-sm-6 {
|
||||
padding: 0 0 0 15px;
|
||||
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
@@ -389,26 +392,26 @@
|
||||
|
||||
.more-modal {
|
||||
.user-list {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
margin-top: 10px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 10px 0 20px;
|
||||
overflow-x: hidden;
|
||||
padding: 10px 0 20px;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
margin: 10px 0;
|
||||
@include clearfix;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.member-count {
|
||||
margin-top: 5px;
|
||||
float: right;
|
||||
@include opacity(.8);
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.more-purpose {
|
||||
@@ -416,21 +419,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body.edit-modal-body {
|
||||
overflow: visible;
|
||||
|
||||
.suggestion-list__content {
|
||||
max-height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.more-modal__list {
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
|
||||
.popover & {
|
||||
font-size: 0.95em;
|
||||
font-size: .95em;
|
||||
|
||||
.more-modal__row {
|
||||
padding: 5px 10px;
|
||||
@@ -442,9 +437,9 @@
|
||||
}
|
||||
|
||||
.more-modal__image {
|
||||
@include border-radius(60px);
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
@include border-radius(60px);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
@@ -462,33 +457,33 @@
|
||||
}
|
||||
|
||||
.more-modal__name {
|
||||
font-weight: 600;
|
||||
font-size: .95em;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.more-modal__description {
|
||||
@include opacity(.7);
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.more-modal__row {
|
||||
border-bottom: 1px solid;
|
||||
display: flex;
|
||||
padding: 8px 15px;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
p {
|
||||
@include opacity(.8);
|
||||
font-size: .9em;
|
||||
margin: 5px 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@include opacity(.8);
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.prompt {
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
padding: 1em 2em 0;
|
||||
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(20px);
|
||||
line-height: normal;
|
||||
margin: 1em 0;
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
||||
> div {
|
||||
@@ -26,13 +26,13 @@
|
||||
}
|
||||
|
||||
.prompt__allow {
|
||||
margin: 1em 0;
|
||||
font-size: em(24px);
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.prompt__buttons {
|
||||
text-align: right;
|
||||
border-top: 1px solid #ddd;
|
||||
border-top: 1px solid $dark-gray;
|
||||
padding: 1.5em 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,32 +3,38 @@
|
||||
|
||||
.popover {
|
||||
@include border-radius($border-rad);
|
||||
color: #333;
|
||||
color: lighten($black, 25%);
|
||||
|
||||
&.bottom,
|
||||
&.right,
|
||||
&.top,
|
||||
&.left {
|
||||
> .arrow:after {
|
||||
border-color: transparent;
|
||||
> .arrow {
|
||||
&:after {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover-title {
|
||||
background: rgba(black, .05);
|
||||
background: alpha-color($black, .05);
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
p:last-child {
|
||||
margin-bottom: 5px;
|
||||
p {
|
||||
&:last-child {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.channel-header__info .popover-content {
|
||||
max-height: 250px;
|
||||
overflow: auto;
|
||||
.channel-header__info {
|
||||
.popover-content {
|
||||
max-height: 250px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.user-popover {
|
||||
@@ -36,32 +42,35 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.code-popover .popover-content {
|
||||
padding: 5px;
|
||||
.code-popover {
|
||||
.popover-content {
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-popover__image {
|
||||
margin: 0 0 10px;
|
||||
@include border-radius(128px);
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
.user-popover__email {
|
||||
display: block;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search-help-popover {
|
||||
visibility: hidden;
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
top: 36px;
|
||||
@include single-transition(opacity, .3s, ease-in);
|
||||
font-size: em(13px);
|
||||
max-width: none;
|
||||
top: 36px;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
|
||||
&.autocomplete {
|
||||
display: block;
|
||||
|
||||
.popover-content {
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
@@ -69,65 +78,68 @@
|
||||
}
|
||||
|
||||
.search-autocomplete__divider {
|
||||
margin: 10px 0 5px;
|
||||
line-height: 21px;
|
||||
margin: 10px 0 5px;
|
||||
position: relative;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 5px;
|
||||
}
|
||||
span {
|
||||
|
||||
> span {
|
||||
background: $white;
|
||||
display: inline-block;
|
||||
padding-right: 10px;
|
||||
background: #fff;
|
||||
z-index: 5;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #ddd;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
@include opacity(.2);
|
||||
background: $dark-gray;
|
||||
content: '';
|
||||
height: 1px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.search-autocomplete__item {
|
||||
cursor: pointer;
|
||||
padding: 6px 8px;
|
||||
margin: 3px 0 0 5px;
|
||||
@include border-radius(2px);
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
margin: 3px 0 0 5px;
|
||||
overflow: hidden;
|
||||
padding: 6px 8px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: rgba(black, .1);
|
||||
background: alpha-color($black, .1);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: rgba(black, .2);
|
||||
background: alpha-color($black, .2);
|
||||
}
|
||||
|
||||
.fa {
|
||||
margin-right: 5px;
|
||||
@include opacity(.5);
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.profile-img {
|
||||
margin-top: -1px;
|
||||
height: 16px;
|
||||
margin-right: 6px;
|
||||
margin-top: -1px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.bottom > .arrow {
|
||||
top: -18px;
|
||||
border-width: 9px;
|
||||
left: 30px;
|
||||
top: -18px;
|
||||
}
|
||||
|
||||
.popover-content {
|
||||
@@ -142,9 +154,11 @@
|
||||
|
||||
ul {
|
||||
padding-left: 17px;
|
||||
|
||||
span {
|
||||
@include opacity(.8);
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
@include opacity(1);
|
||||
@@ -156,25 +170,28 @@
|
||||
}
|
||||
|
||||
&.visible {
|
||||
visibility: visible;
|
||||
@include opacity(1);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
#member-list-popover {
|
||||
.member-list__popover {
|
||||
max-width: initial;
|
||||
|
||||
.popover-content {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
width: 260px;
|
||||
max-height: 350px;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 260px;
|
||||
|
||||
.text-nowrap {
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
overflow: hidden;
|
||||
padding: 6px 10px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
line-height: 26px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.more__name {
|
||||
margin-left: 6px;
|
||||
max-width: 140px;
|
||||
|
||||
@@ -1,28 +1,25 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
::-webkit-scrollbar
|
||||
{
|
||||
width: 8px; /* for vertical scrollbars */
|
||||
height: 8px; /* for horizontal scrollbars */
|
||||
::-webkit-scrollbar {
|
||||
height: 8px; // for horizontal scrollbars
|
||||
width: 8px; // for vertical scrollbars
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track
|
||||
{
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb
|
||||
{
|
||||
::-webkit-scrollbar-thumb {
|
||||
@include border-radius($border-rad * 2);
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
background: rgba(0, 0, 0, .4);
|
||||
}
|
||||
|
||||
body{
|
||||
scrollbar-face-color: rgba(0, 0, 0, 0.1);
|
||||
scrollbar-shadow-color: #2D2C4D;
|
||||
scrollbar-highlight-color:#7D7E94;
|
||||
body {
|
||||
scrollbar-3dlight-color: #7D7E94;
|
||||
scrollbar-darkshadow-color: #2D2C4D;
|
||||
scrollbar-track-color: rgba(0, 0, 0, 0.1);
|
||||
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);
|
||||
}
|
||||
@@ -1,15 +1,19 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
#channel-header .search-bar__container {
|
||||
padding: 0 9px 0 3px;
|
||||
.channel-header {
|
||||
.search-bar__container {
|
||||
padding: 0 9px 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar__container {
|
||||
padding: 12px 8px 0 0;
|
||||
@include flex(0 0 56px);
|
||||
padding: 12px 8px 0 0;
|
||||
|
||||
.sidebar--right.move--left & {
|
||||
padding-right: 42px;
|
||||
.sidebar--right {
|
||||
&.move--left & {
|
||||
padding-right: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,62 +22,60 @@
|
||||
}
|
||||
|
||||
.search__clear {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
line-height: 45px;
|
||||
margin-right: 13px;
|
||||
@include single-transition(all, .2s, linear);
|
||||
@include translateX(60px);
|
||||
z-index: 5;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
line-height: 45px;
|
||||
margin-right: 13px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.search-item-snippet {
|
||||
@include clearfix;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sidebar__collapse {
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
fill: #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-size: 35px;
|
||||
width: 49px;
|
||||
@include single-transition(all, .2s, linear);
|
||||
@include translateX(0px);
|
||||
text-align: center;
|
||||
padding-left: 1px;
|
||||
line-height: 40px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search-item-snippet {
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar__collapse {
|
||||
@include single-transition(all, .2s, linear);
|
||||
@include translateX(0);
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
fill: $white;
|
||||
font-size: 35px;
|
||||
left: 0;
|
||||
line-height: 40px;
|
||||
padding-left: 1px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 49px;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.sidebar__search-icon {
|
||||
@include opacity(.5);
|
||||
color: $dark-gray;
|
||||
display: none;
|
||||
font-size: 14px;
|
||||
margin-left: 10px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
margin-left: 10px;
|
||||
font-size: 14px;
|
||||
@include opacity(.5);
|
||||
display: none;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.search__form {
|
||||
position: relative;
|
||||
|
||||
.search-bar__container & {
|
||||
margin: 0;
|
||||
border: 1px solid #ddd;
|
||||
@include border-radius(2px);
|
||||
border: 1px solid $light-gray;
|
||||
margin: 0;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
@@ -82,21 +84,21 @@
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
box-shadow: none;
|
||||
height: 40px;
|
||||
padding-right: 30px;
|
||||
box-shadow: none;
|
||||
|
||||
.search-bar__container & {
|
||||
height: 30px;
|
||||
border: none;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.glyphicon-refresh-animate {
|
||||
top: 27px;
|
||||
color: $dark-gray;
|
||||
position: absolute;
|
||||
right: 27px;
|
||||
color: #999;
|
||||
top: 27px;
|
||||
|
||||
.search-bar__container & {
|
||||
right: 7px;
|
||||
@@ -106,30 +108,29 @@
|
||||
}
|
||||
|
||||
.search-items-container {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@include flex(1 1 auto);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
height: calc(100% - 56px);
|
||||
overflow: auto;
|
||||
padding-top: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-results-header {
|
||||
border-bottom: $border-gray;
|
||||
color: #999999;
|
||||
font-size: 1em;
|
||||
text-transform: uppercase;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
color: #888;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding: 0 10px 0 10px;
|
||||
border-bottom: $border-gray;
|
||||
padding: 0 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.search-item__container {
|
||||
.post {
|
||||
padding: 0 1em 1em;
|
||||
margin: 0;
|
||||
padding: 0 1em 1em;
|
||||
|
||||
&:first-child {
|
||||
border: none;
|
||||
@@ -137,17 +138,17 @@
|
||||
|
||||
.search-channel__name {
|
||||
font-weight: 600;
|
||||
margin: 0 0 10px 0;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-item__jump {
|
||||
@include opacity(.8);
|
||||
font-size: 13px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0px;
|
||||
font-size: 13px;
|
||||
@include opacity(.8);
|
||||
top: 0;
|
||||
|
||||
&:hover {
|
||||
@include opacity(1);
|
||||
@@ -155,9 +156,9 @@
|
||||
}
|
||||
|
||||
.search-item__comment {
|
||||
margin-right: 35px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
margin-right: 35px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@@ -171,5 +172,5 @@
|
||||
}
|
||||
|
||||
.search-highlight {
|
||||
background-color: #fff2bb;
|
||||
background-color: $yellow;
|
||||
}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.suggestion-list {
|
||||
@extend %popover-box-shadow;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
@extend %popover-box-shadow;
|
||||
}
|
||||
|
||||
.suggestion-list--top {
|
||||
@@ -11,31 +11,31 @@
|
||||
}
|
||||
|
||||
.suggestion-list__content {
|
||||
width: 100%;
|
||||
max-height: 292px;
|
||||
background-color: #fff;
|
||||
background-color: $white;
|
||||
border: $border-gray;
|
||||
max-height: 292px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
|
||||
.command {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid $light-gray;
|
||||
font-size: .95em;
|
||||
line-height: 24px;
|
||||
padding: 5px 10px 8px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
z-index: 101;
|
||||
font-size: .95em;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
.command__desc {
|
||||
margin-left: 5px;
|
||||
@include opacity(.5);
|
||||
line-height: normal;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.suggestion-list__content--top {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
.tooltip {
|
||||
.tooltip-inner {
|
||||
word-break: break-word;
|
||||
font-size: 13px;
|
||||
padding: 3px 10px 4px;
|
||||
font-weight: 500;
|
||||
padding: 3px 10px 4px;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,72 +1,76 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.tip-backdrop {
|
||||
background: rgba(black, .5);
|
||||
background: alpha-color($black, .5);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.tip-overlay {
|
||||
width: 350px;
|
||||
max-width: 90%;
|
||||
position: absolute;
|
||||
background-color: #fff;
|
||||
@include border-radius(3px);
|
||||
background-color: $white;
|
||||
max-width: 90%;
|
||||
padding: 20px;
|
||||
position: absolute;
|
||||
width: 350px;
|
||||
z-index: 1000;
|
||||
|
||||
.arrow {
|
||||
border-width: 10px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 10px;
|
||||
display: block;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
&.tip-overlay--sidebar {
|
||||
max-width: 75%;
|
||||
margin: 50px 0 0 10px;
|
||||
max-width: 75%;
|
||||
min-height: 330px;
|
||||
|
||||
.tutorial__footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 20px;
|
||||
left: 0;
|
||||
padding: 0 20px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
top: 80px;
|
||||
border-left-width: 0;
|
||||
border-right-color: $white;
|
||||
left: -10px;
|
||||
margin-top: -10px;
|
||||
border-left-width: 0;
|
||||
border-right-color: #fff;
|
||||
top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tip-overlay--header {
|
||||
margin: 10px 0 0 10px;
|
||||
|
||||
.arrow {
|
||||
top: 15px;
|
||||
left: -10px;
|
||||
border-left-width: 0;
|
||||
border-right-color: #fff;
|
||||
border-right-color: $white;
|
||||
left: -10px;
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&.tip-overlay--chat {
|
||||
margin-top: -10px;
|
||||
|
||||
.arrow {
|
||||
border-bottom-width: 0;
|
||||
border-top-color: $white;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
margin-left: -10px;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: #fff;
|
||||
bottom: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -86,18 +90,18 @@
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: #ccc;
|
||||
color: #fff;
|
||||
@include border-radius(3px);
|
||||
background: alpha-color($black, .3);
|
||||
border: none;
|
||||
color: $white;
|
||||
margin: 10px 0;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: #fff;
|
||||
background: alpha-color($black, .4);
|
||||
border: none;
|
||||
background: #bbb;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -110,81 +114,88 @@
|
||||
}
|
||||
|
||||
.tutorial__circles {
|
||||
margin: 1.5em 0px -1.7em -4px;
|
||||
margin: 1.5em 0 -1.7em -4px;
|
||||
|
||||
.circle {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
margin: 0 4px;
|
||||
width: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tip-button {
|
||||
z-index: 998;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
right: -10px;
|
||||
top: -10px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.tip-div {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
&.tip-overlay--header {
|
||||
top: 21px;
|
||||
right: 2px;
|
||||
top: 21px;
|
||||
|
||||
.tip-button {
|
||||
@include opacity(.8);
|
||||
}
|
||||
}
|
||||
|
||||
&.tip-overlay--sidebar {
|
||||
left: 0;
|
||||
@include opacity(.8);
|
||||
left: 0;
|
||||
top: -9px;
|
||||
}
|
||||
}
|
||||
|
||||
.tutorial-steps__container {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: table;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
|
||||
.tutorial__content {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding-bottom: 100px;
|
||||
padding: 20px 40px 40px;
|
||||
vertical-align: middle;
|
||||
|
||||
.tutorial__steps {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-bottom: 50px;
|
||||
max-width: 310px;
|
||||
min-height: 370px;
|
||||
margin-bottom: 50px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.tutorial__footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: em(40px);
|
||||
margin: -20px 0 30px;
|
||||
font-weight: 600;
|
||||
margin: -20px 0 30px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: em(24px);
|
||||
margin-bottom: 30px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.tutorial__circles {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.tutorial-skip {
|
||||
margin-left: 13px;
|
||||
}
|
||||
@@ -192,17 +203,19 @@
|
||||
|
||||
.tutorial__circles {
|
||||
margin: 2em 0;
|
||||
|
||||
.circle {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
@include border-radius(9px);
|
||||
@include opacity(.2);
|
||||
background: #000;
|
||||
background: $black;
|
||||
display: inline-block;
|
||||
height: 9px;
|
||||
margin: 0 5px;
|
||||
width: 9px;
|
||||
|
||||
&.active {
|
||||
background: $color--primary;
|
||||
@include opacity(1);
|
||||
background: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,65 +1,68 @@
|
||||
@charset 'UTF-8';
|
||||
|
||||
.video-div {
|
||||
position: relative;
|
||||
max-width: 480px;
|
||||
margin-bottom: 8px;
|
||||
max-width: 480px;
|
||||
position: relative;
|
||||
|
||||
.video-thumbnail {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.block {
|
||||
background-color: rgba(0,0,0,.5);
|
||||
background-color: alpha-color($black, .5);
|
||||
border-radius: 10px;
|
||||
height: 150px;
|
||||
left: 50%;
|
||||
margin: -75px 0 0 -100px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -100px;
|
||||
width: 200px;
|
||||
margin: -75px 0 0 -100px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.video-type {
|
||||
@include opacity(.8);
|
||||
font-size: 15px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.video-title {
|
||||
font-size: 15px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.play-button {
|
||||
width: 100px;
|
||||
@include border-radius(14px);
|
||||
border: 4px solid alpha-color($white, .4);
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
right: 51px;
|
||||
border: 4px solid;
|
||||
border-color: rgba(255,255,255,.4);
|
||||
border-radius: 14px;
|
||||
}
|
||||
.play-button span {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 20px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 36px solid transparent;
|
||||
border-bottom: 36px solid transparent;
|
||||
border-left: 60px solid rgba(255,255,255,.4);
|
||||
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;
|
||||
position: relative;
|
||||
max-width: 450px;
|
||||
max-height: 500px;
|
||||
margin-bottom: 8px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 8px;
|
||||
max-height: 500px;
|
||||
max-width: 450px;
|
||||
position: relative;
|
||||
|
||||
&.placeholder {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
Ссылка в новой задаче
Block a user