external editor support
This commit is contained in:
Mo Bitar
@@ -1,99 +0,0 @@
|
||||
.extension-render-modal {
|
||||
position: fixed;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 10000;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(gray, 0.3);
|
||||
|
||||
.content {
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
background-color: white;
|
||||
width: 700px;
|
||||
height: 500px;
|
||||
margin: auto;
|
||||
padding: 25px;
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.contextual-menu {
|
||||
overflow-y: scroll;
|
||||
max-height: 85vh;
|
||||
|
||||
.extension {
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.ext-header {
|
||||
background-color: #ededed;
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
padding-top: 12px;
|
||||
padding-left: 10px;
|
||||
padding-bottom: 10px;
|
||||
position: relative;
|
||||
|
||||
> .name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
> .access {
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
font-weight: normal;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
> .loading {
|
||||
position: absolute;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
right: 10px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
list-style:none;
|
||||
padding-left:0;
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
height: auto;
|
||||
|
||||
&.action {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid rgba(black, 0.1);
|
||||
background-color: rgba(white, 0.9);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(gray, 0.05);
|
||||
}
|
||||
|
||||
> .name {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
> .desc {
|
||||
font-weight: normal;
|
||||
opacity: 0.5;
|
||||
margin-top: 1px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
111
app/assets/stylesheets/app/_extensions.scss
Normal file
111
app/assets/stylesheets/app/_extensions.scss
Normal file
@@ -0,0 +1,111 @@
|
||||
.extension-render-modal {
|
||||
position: fixed;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 10000;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(gray, 0.3);
|
||||
|
||||
.content {
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
background-color: white;
|
||||
width: 700px;
|
||||
height: 500px;
|
||||
margin: auto;
|
||||
padding: 25px;
|
||||
position: absolute;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-section-footer {
|
||||
background-color: #ededed;
|
||||
border-top: 1px solid #d3d3d3;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.menu-section-header {
|
||||
background-color: #ededed;
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
position: relative;
|
||||
padding-top: 12px;
|
||||
padding-left: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
|
||||
> .title {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
> .subtitle {
|
||||
font-size: 12px;
|
||||
opacity: 0.5;
|
||||
font-weight: normal;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
> .loading {
|
||||
position: absolute;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
right: 10px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.editor-menu {
|
||||
overflow-y: scroll;
|
||||
max-height: 85vh;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
list-style:none;
|
||||
padding-left:0;
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
height: auto;
|
||||
|
||||
&.menu-item {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid rgba(black, 0.1);
|
||||
background-color: rgba(white, 0.9);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(gray, 0.05);
|
||||
}
|
||||
|
||||
&.nonactive {
|
||||
cursor: default;
|
||||
&:hover {
|
||||
background-color: rgba(white, 0.9) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item-title {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.menu-item-subtitle {
|
||||
font-weight: normal;
|
||||
opacity: 0.5;
|
||||
margin-top: 1px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,145 +1,3 @@
|
||||
.pull-left {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 1px !important;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 2px !important;
|
||||
}
|
||||
|
||||
.mt-5 {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
|
||||
.mt-10 {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.mt-15 {
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
|
||||
.mt-25 {
|
||||
margin-top: 25px !important;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.mr-5 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.faded {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.center-align {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.one-line-overflow {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.small-v-space {
|
||||
height: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.medium-v-space {
|
||||
height: 12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.large-v-space {
|
||||
height: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.small-padding {
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
.medium-padding {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.pb-4 {
|
||||
padding-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.pb-6 {
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
|
||||
.pb-10 {
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.large-padding {
|
||||
padding: 22px !important;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: $blue-color;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.italic {
|
||||
font-style: italic !important;
|
||||
}
|
||||
|
||||
.normal {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.fake-link {
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
|
||||
269
app/assets/stylesheets/app/_standard.scss
Normal file
269
app/assets/stylesheets/app/_standard.scss
Normal file
@@ -0,0 +1,269 @@
|
||||
.pull-left {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.pull-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 1px !important;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 2px !important;
|
||||
}
|
||||
|
||||
.mt-5 {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
|
||||
.mt-10 {
|
||||
margin-top: 10px !important;
|
||||
}
|
||||
|
||||
.mt-15 {
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
|
||||
.mt-20 {
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
|
||||
.mt-25 {
|
||||
margin-top: 25px !important;
|
||||
}
|
||||
|
||||
.mt-50 {
|
||||
margin-top: 50px !important;
|
||||
}
|
||||
|
||||
.mt-100 {
|
||||
margin-top: 100px !important;
|
||||
}
|
||||
|
||||
.mb-0 {
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
.mb-10 {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.mr-5 {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.mr-10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mr-20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.pb-0 {
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.faded {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.center-align {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.center {
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.one-line-overflow {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.small-v-space {
|
||||
height: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.medium-v-space {
|
||||
height: 12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.large-v-space {
|
||||
height: 24px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.small-padding {
|
||||
padding: 5px !important;
|
||||
}
|
||||
|
||||
.medium-padding {
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
.pb-4 {
|
||||
padding-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.pb-6 {
|
||||
padding-bottom: 6px !important;
|
||||
}
|
||||
|
||||
.pb-10 {
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
|
||||
.large-padding {
|
||||
padding: 22px !important;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold !important;
|
||||
}
|
||||
|
||||
.normal {
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.medium {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline-block;
|
||||
|
||||
&.top {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
&.middle {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input.form-control {
|
||||
margin-bottom: 10px;
|
||||
border-radius: 0px;
|
||||
min-height: 39px;
|
||||
font-size: 14px;
|
||||
padding-left: 6px;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
|
||||
@mixin wide-button() {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
// min-width: 200px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&.black {
|
||||
@include wide-button();
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.white {
|
||||
@include wide-button();
|
||||
background-color: white;
|
||||
color: black;
|
||||
border: 1px solid rgba(gray, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.gray-bg {
|
||||
background-color: #f6f6f6;
|
||||
border: 1px solid #f2f2f2;
|
||||
}
|
||||
|
||||
.white-bg {
|
||||
background-color: white;
|
||||
border: 1px solid rgba(gray, 0.2);
|
||||
}
|
||||
|
||||
.col-container {
|
||||
// white-space: nowrap;
|
||||
}
|
||||
|
||||
@mixin col() {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.col-10 {
|
||||
width: 10%;
|
||||
@include col();
|
||||
}
|
||||
|
||||
.col-15 {
|
||||
width: 15%;
|
||||
@include col();
|
||||
}
|
||||
|
||||
.col-20 {
|
||||
width: 20%;
|
||||
@include col();
|
||||
}
|
||||
|
||||
.col-45 {
|
||||
width: 45%;
|
||||
@include col();
|
||||
}
|
||||
|
||||
.col-50 {
|
||||
width: 50%;
|
||||
@include col();
|
||||
}
|
||||
|
||||
.col-80 {
|
||||
width: 80%;
|
||||
@include col();
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute !important;
|
||||
}
|
||||
@@ -1,5 +1,6 @@
|
||||
$dark-gray: #2e2e2e;
|
||||
|
||||
@import "app/standard";
|
||||
@import "app/mostrap";
|
||||
@import "app/main";
|
||||
@import "app/common";
|
||||
@@ -7,7 +8,7 @@ $dark-gray: #2e2e2e;
|
||||
@import "app/tags";
|
||||
@import "app/notes";
|
||||
@import "app/editor";
|
||||
@import "app/directives";
|
||||
@import "app/extensions";
|
||||
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
|
||||
Reference in New Issue
Block a user