scinote-web/app/assets/stylesheets/marvinjs.scss

197 lines
3.4 KiB
SCSS
Raw Normal View History

2019-04-29 01:11:41 +08:00
// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
// scss-lint:disable SelectorFormat
// scss-lint:disable ImportantRule
// scss-lint:disable IdSelector
2019-04-27 00:24:21 +08:00
@import "constants";
@import "mixins";
// MarvinJs modal
.modal-marvin-js {
background: transparent;
2020-06-15 20:04:39 +08:00
font-size: $font-size-base;
2019-04-27 00:24:21 +08:00
padding: 0 !important;
.preview-close {
background: transparent;
border: 0;
color: $color-white;
display: inline-block;
float: right;
}
.modal-dialog {
height: 100%;
margin: 0;
padding: 0;
width: auto;
}
.modal-content {
background: transparent;
border: 0;
box-shadow: none;
color: $color-white;
height: 100%;
width: auto;
}
.modal-header {
background: $color-black;
border: 0;
2020-06-15 20:04:39 +08:00
display: flex;
2019-04-27 00:24:21 +08:00
height: 60px;
2019-07-16 19:40:54 +08:00
line-height: 40px;
padding: 10px 15px;
2019-04-27 00:24:21 +08:00
text-align: center;
2019-07-16 19:40:54 +08:00
.file-save-link {
2020-06-15 20:04:39 +08:00
flex-shrink: 0;
2019-07-16 19:42:39 +08:00
margin: 0 20px 0 0;
2019-07-16 19:40:54 +08:00
}
2019-04-27 00:24:21 +08:00
.file-name {
2019-07-16 19:40:54 +08:00
align-items: center;
display: flex;
2020-06-15 20:04:39 +08:00
flex-shrink: 0;
2019-04-27 00:24:21 +08:00
float: left;
2020-06-15 20:04:39 +08:00
margin-right: auto;
input {
border-radius: 5px;
box-shadow: none;
color: $color-black;
height: 40px;
2019-07-16 19:40:54 +08:00
margin-left: 5px;
outline: 0;
padding: 5px 10px;
2019-04-29 01:11:41 +08:00
position: relative;
width: 350px;
}
2019-04-27 00:24:21 +08:00
}
}
.modal-body {
height: calc(100% - 60px);
padding: 0;
#marvinjs-editor {
height: 100%;
overflow: hidden;
position: relative;
2019-04-29 01:11:41 +08:00
width: 100%;
2019-04-27 00:24:21 +08:00
#marvinjs-sketch {
2019-04-30 23:32:55 +08:00
border-right: 1px solid $color-gainsboro;
float: left;
2019-04-27 00:24:21 +08:00
min-height: 450px;
2019-04-29 01:11:41 +08:00
min-width: 500px;
overflow: hidden;
2019-04-27 00:24:21 +08:00
}
2019-04-30 23:32:55 +08:00
}
.sketch-container {
@include md-card-style;
cursor: pointer;
margin: 10px;
overflow: hidden;
padding: 10px;
position: relative;
.sketch-image {
height: 100%;
width: 100%;
}
.sketch-name {
color: $brand-primary;
font-family: Lato;
font-size: 16px;
line-height: 18px;
margin: 10px auto;
overflow: hidden;
text-align: center;
width: 160px;
}
.sketch-object {
color: $color-emperor;
font-size: 12px;
opacity: .6;
text-align: center;
}
2019-04-27 00:24:21 +08:00
}
}
.file-save-link {
color: $color-white;
2019-04-27 04:59:38 +08:00
cursor: pointer;
2019-04-27 00:24:21 +08:00
display: inline-block;
float: right;
margin-right: 20px;
}
2019-04-27 19:51:35 +08:00
}
2019-04-29 01:11:41 +08:00
#new-step-sketch {
2019-04-27 19:51:35 +08:00
.sketch-container {
2019-04-28 01:08:40 +08:00
display: grid;
2019-04-29 01:11:41 +08:00
float: left;
2019-04-28 01:08:40 +08:00
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
2019-04-29 01:11:41 +08:00
width: 100%;
2019-04-27 19:51:35 +08:00
}
2019-04-28 04:54:59 +08:00
}
2020-07-28 21:39:29 +08:00
button.new-marvinjs-upload-button {
2020-03-23 00:47:13 +08:00
padding: 1px 16px !important;
.new-marvinjs-upload-icon {
display: inline-block;
height: 32px;
width: 32px;
img {
height: 100%;
width: 100%;
}
}
}
2020-07-28 21:39:29 +08:00
li.new-marvinjs-upload-button {
.new-marvinjs-upload-icon {
display: inline-block;
height: 24px;
margin-left: -9px;
width: 24px;
img {
height: 100%;
width: 100%;
}
}
}
.mce-i-marvinjs::before {
background-image: url("/images/icon_small/marvinjs.svg");
content: "";
display: block;
height: 32px;
left: -8px;
2019-04-29 01:11:41 +08:00
line-height: 16px;
position: relative;
top: -8px;
width: 32px;
2019-04-29 01:11:41 +08:00
}
2019-09-24 17:02:15 +08:00
.modal-promo-marvin-js {
.modal-header {
padding-left: 35px;
}
.modal-body {
padding: 15px 35px;
}
}