mirror of
https://gitee.com/dcren/cloud-native-app-initializer.git
synced 2026-07-04 13:06:47 +08:00
Project initial
This commit is contained in:
chengpu
542
initializer-page/src/styles/_dark.scss
Normal file
542
initializer-page/src/styles/_dark.scss
Normal file
@@ -0,0 +1,542 @@
|
||||
body.dark {
|
||||
background-color: $dark-background;
|
||||
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
$dark-primary 4px,
|
||||
$dark-background-light 4px $spring-sidebar-width,
|
||||
$dark-background $spring-sidebar-width
|
||||
);
|
||||
|
||||
color: $dark-color-light;
|
||||
|
||||
.header h1.logo a {
|
||||
color: $dark-color;
|
||||
span.title {
|
||||
strong {
|
||||
color: $dark-primary;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
color: $dark-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.radio {
|
||||
color: $dark-color-medium;
|
||||
border-color: $dark-border;
|
||||
&:hover {
|
||||
color: $dark-color-light;
|
||||
border-color: $dark-border-dark;
|
||||
}
|
||||
&.checked {
|
||||
color: $dark-color;
|
||||
border-bottom-color: $dark-primary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: $dark-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.colset-submit .right.nopadding {
|
||||
background: $dark-background;
|
||||
}
|
||||
|
||||
.submit {
|
||||
background: $dark-background;
|
||||
border-color: $dark-border-dark;
|
||||
}
|
||||
|
||||
.tab {
|
||||
background: $dark-background;
|
||||
.tab-container {
|
||||
border-color: $dark-border;
|
||||
}
|
||||
a {
|
||||
color: $dark-color-medium;
|
||||
border-color: $dark-border;
|
||||
&:hover {
|
||||
color: $dark-color-light;
|
||||
border-bottom-color: $dark-border-dark;
|
||||
}
|
||||
&.active {
|
||||
color: $dark-color;
|
||||
border-bottom-color: $dark-primary;
|
||||
&:hover {
|
||||
border-bottom-color: $dark-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-input {
|
||||
background: $dark-background;
|
||||
color: $dark-color;
|
||||
border-color: $dark-border;
|
||||
&:hover {
|
||||
border-color: $dark-border-dark;
|
||||
}
|
||||
&:focus {
|
||||
border-bottom-color: $dark-primary;
|
||||
&:hover {
|
||||
border-bottom-color: $dark-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel .panel-wrap {
|
||||
border-color: $dark-border;
|
||||
}
|
||||
|
||||
.casePanel .panel-wrap {
|
||||
border-color: $dark-border;
|
||||
}
|
||||
|
||||
.more div.wrap {
|
||||
border-color: $dark-border;
|
||||
a {
|
||||
color: $dark-color-light;
|
||||
&:hover {
|
||||
color: $dark-color-light;
|
||||
svg {
|
||||
color: $dark-primary;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
color: $dark-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.demos div.wrap {
|
||||
border-color: $dark-border;
|
||||
a {
|
||||
color: $dark-color-light;
|
||||
&:hover {
|
||||
color: $dark-color-light;
|
||||
svg {
|
||||
color: $dark-primary;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
color: $dark-color-light;
|
||||
}
|
||||
strong {
|
||||
color: $dark-color-medium;
|
||||
span {
|
||||
color: $dark-color;
|
||||
}
|
||||
background: $dark-background-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
background: $dark-background-light;
|
||||
border-color: $dark-background-light;
|
||||
color: $dark-color;
|
||||
&:hover {
|
||||
background: $dark-background-lighter;
|
||||
border-color: $dark-background-lighter;
|
||||
}
|
||||
&.primary {
|
||||
border-color: $dark-primary;
|
||||
background-color: $dark-primary;
|
||||
&:hover {
|
||||
border-color: darken($dark-primary, 5);
|
||||
background-color: darken($dark-primary, 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: $dark-background-light;
|
||||
color: $dark-color-medium;
|
||||
}
|
||||
|
||||
label {
|
||||
color: $dark-color-dark;
|
||||
}
|
||||
|
||||
.search-no-selected {
|
||||
color: $dark-color-light;
|
||||
}
|
||||
|
||||
.groups .group a {
|
||||
background: $dark-background-light;
|
||||
color: $dark-color-light;
|
||||
strong {
|
||||
color: $dark-color;
|
||||
}
|
||||
.icon {
|
||||
border: 2px solid $dark-border-dark;
|
||||
color: $dark-color-light;
|
||||
}
|
||||
&:hover {
|
||||
background: $dark-background-lighter;
|
||||
.icon {
|
||||
color: $dark-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.groups .group .group-title {
|
||||
border-color: $dark-border;
|
||||
a {
|
||||
background: $dark-background;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-links li a {
|
||||
color: $dark-color-light;
|
||||
&:hover {
|
||||
color: $dark-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.groups .group a.invalid,
|
||||
.groups .group a.checked.invalid {
|
||||
background: $dark-background-disabled;
|
||||
strong {
|
||||
color: $dark-color-medium;
|
||||
}
|
||||
&:hover {
|
||||
background: $dark-background-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.groups .group a.checked,
|
||||
.groups .group a.selected {
|
||||
$c: #363e44;
|
||||
background: $c;
|
||||
&:hover {
|
||||
background: lighten($c, 6);
|
||||
}
|
||||
}
|
||||
|
||||
.groups .group a.checked .icon,
|
||||
.groups .group a .selected .icon {
|
||||
border-color: $dark-border-dark;
|
||||
&:hover {
|
||||
border-color: $dark-border-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.groups .group a.checked,
|
||||
.groups .group a .selected {
|
||||
&:hover {
|
||||
.icon {
|
||||
border-color: lighten($dark-border, 20);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab strong {
|
||||
color: $dark-color-medium;
|
||||
span {
|
||||
color: $dark-color;
|
||||
}
|
||||
background: $dark-background-lighter;
|
||||
}
|
||||
|
||||
.dependencies-list .dependency-item.checked,
|
||||
.dependencies-list .dependency-item .selected,
|
||||
ul.dependencies-list .dependency-item.checked,
|
||||
ul.dependencies-list .dependency-item .selected {
|
||||
background: $dark-background-light;
|
||||
color: $dark-color-light;
|
||||
strong {
|
||||
color: $dark-color;
|
||||
}
|
||||
|
||||
.icon {
|
||||
border-color: $dark-border-dark;
|
||||
color: $dark-color-light;
|
||||
}
|
||||
&:hover {
|
||||
background: $dark-background-lighter;
|
||||
.icon {
|
||||
color: $dark-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dependencies-list .dependency-item,
|
||||
ul.dependencies-list .dependency-item {
|
||||
background: $dark-background-light;
|
||||
color: $dark-color-light;
|
||||
strong {
|
||||
color: $dark-color;
|
||||
}
|
||||
|
||||
.icon {
|
||||
border: 2px solid $dark-border-dark;
|
||||
color: $dark-primary;
|
||||
}
|
||||
&:hover {
|
||||
background: $dark-background-lighter;
|
||||
.icon {
|
||||
color: $dark-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
&.invalid,
|
||||
&.checked.invalid {
|
||||
background: $dark-background-disabled;
|
||||
&:hover {
|
||||
background: $dark-background-disabled;
|
||||
}
|
||||
.warning {
|
||||
color: #ff7676;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-more-warning,
|
||||
.search-no-result {
|
||||
color: $dark-color-medium;
|
||||
}
|
||||
|
||||
.dependencies-list .dependency-item.selected,
|
||||
ul.dependencies-list .dependency-item.selected {
|
||||
background: $dark-background-lighter;
|
||||
.icon {
|
||||
color: $dark-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
.dependencies-list-checked .dependency-item.checked,
|
||||
ul.dependencies-list-checked .dependency-item.checked {
|
||||
.icon {
|
||||
color: $dark-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.quick-links ul.dropdown-menu {
|
||||
background: $dark-background-lighter;
|
||||
li {
|
||||
a {
|
||||
color: $dark-color;
|
||||
&:hover {
|
||||
background: $dark-background-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-share {
|
||||
background: $dark-background-lighter;
|
||||
.popup-header {
|
||||
border-color: $dark-border-dark;
|
||||
.close {
|
||||
color: $dark-color-medium;
|
||||
}
|
||||
}
|
||||
.popup-content {
|
||||
label {
|
||||
color: $dark-color-light;
|
||||
}
|
||||
}
|
||||
.control-input {
|
||||
background: $dark-background-lighter;
|
||||
border-color: $dark-border-dark;
|
||||
&:focus {
|
||||
border-color: $dark-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.popup-share-overlay {
|
||||
background: rgba($dark-background, 0.95);
|
||||
}
|
||||
.popup-content .link {
|
||||
}
|
||||
|
||||
.placeholder-radios .placeholder-radio {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.placeholder-input,
|
||||
.placeholder-dropdown {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
&::after {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder-button {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.placeholder-tabs .placeholder-header {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.placeholder-tabs .placeholder-tab {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.placeholder-text {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: rgba($dark-background, 0.95);
|
||||
}
|
||||
|
||||
.modal-explorer {
|
||||
background: $dark-background-lighter;
|
||||
box-shadow: 0 0 0 black;
|
||||
}
|
||||
.modal-fetch {
|
||||
background: $dark-background-lighter;
|
||||
box-shadow: 0 0 0 black;
|
||||
.control-input {
|
||||
background: $dark-background-lighter;
|
||||
border-color: $dark-border-dark;
|
||||
&:focus {
|
||||
border-color: $dark-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-explorer {
|
||||
.colset-explorer {
|
||||
.head,
|
||||
.foot,
|
||||
.left,
|
||||
.right {
|
||||
color: $dark-color-light;
|
||||
border-color: $dark-border-dark;
|
||||
.placeholder-text {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
.close {
|
||||
color: $dark-color-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-explorer .colset-explorer .head .actions {
|
||||
color: $dark-color-medium;
|
||||
}
|
||||
|
||||
.explorer-ul .file.selected,
|
||||
.explorer-ul .folder.selected {
|
||||
color: $dark-color;
|
||||
background: $dark-background-light;
|
||||
&:hover {
|
||||
color: $dark-color;
|
||||
background: $dark-background-light;
|
||||
}
|
||||
}
|
||||
|
||||
.explorer-ul .file,
|
||||
.explorer-ul .folder {
|
||||
color: $dark-color-light;
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
pre.prism-code {
|
||||
span.explorer-number {
|
||||
color: rgba($dark-color, 0.5);
|
||||
&:before {
|
||||
background-color: $dark-background-light;
|
||||
color: rgba($dark-color, 0.5);
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
color: rgba($dark-color, 0.5);
|
||||
background-color: $dark-background-light;
|
||||
}
|
||||
}
|
||||
|
||||
.explorer-ul .file.disabled,
|
||||
.explorer-ul .folder.disabled {
|
||||
color: $dark-color-light;
|
||||
&:hover {
|
||||
color: $dark-color-light;
|
||||
}
|
||||
}
|
||||
|
||||
.token.cdata,
|
||||
.token.comment,
|
||||
.token.doctype,
|
||||
.token.prolog {
|
||||
color: $dark-color-medium;
|
||||
}
|
||||
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'],
|
||||
.token.operator,
|
||||
.token.punctuation,
|
||||
.token.operator {
|
||||
color: $dark-color-light;
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
&::after {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.warnings {
|
||||
background: #ffe09c;
|
||||
}
|
||||
|
||||
.radio.err {
|
||||
background: $dark-background-lighter;
|
||||
border-color: #f30808;
|
||||
}
|
||||
|
||||
.switch-label .switch-button,
|
||||
.switch-checkbox:checked + .switch-label .switch-button {
|
||||
background: $dark-color;
|
||||
}
|
||||
|
||||
// Outline
|
||||
.modal-explorer .colset-explorer .foot .action,
|
||||
.modal-explorer .colset-explorer .head a,
|
||||
.modal-explorer .close,
|
||||
.header h1.logo a,
|
||||
.radio,
|
||||
.tab a,
|
||||
.more div.wrap a,
|
||||
.button,
|
||||
.groups .group a,
|
||||
.groups .group .group-title span,
|
||||
.dependencies-list .dependency-item,
|
||||
ul.dependencies-list .dependency-item,
|
||||
.explorer-ul .file,
|
||||
.explorer-ul .folder {
|
||||
&:focus {
|
||||
outline-color: $dark-outline;
|
||||
}
|
||||
}
|
||||
|
||||
.groups .group a.invalid .warning,
|
||||
.groups .group a.checked.invalid .warning {
|
||||
color: #ff7676;
|
||||
}
|
||||
.footer a,
|
||||
.popup-share .popup-content .link,
|
||||
.modal-explorer .colset-explorer .action,
|
||||
.markdown a,
|
||||
.markdown-source a {
|
||||
color: $dark-link;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
body.dark {
|
||||
background: $dark-background;
|
||||
.quick-links {
|
||||
border-color: $dark-border;
|
||||
background: $dark-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
1024
initializer-page/src/styles/_main.scss
Normal file
1024
initializer-page/src/styles/_main.scss
Normal file
File diff suppressed because it is too large
Load Diff
183
initializer-page/src/styles/_mixins.scss
Normal file
183
initializer-page/src/styles/_mixins.scss
Normal file
@@ -0,0 +1,183 @@
|
||||
@mixin transition($args...) {
|
||||
-webkit-transition: $args;
|
||||
-moz-transition: $args;
|
||||
-ms-transition: $args;
|
||||
-o-transition: $args;
|
||||
transition: $args;
|
||||
}
|
||||
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin outline {
|
||||
&:focus {
|
||||
outline: 1px dotted $light-outline;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
|
||||
@if $inset {
|
||||
-webkit-box-shadow: inset $top $left $blur $color;
|
||||
-moz-box-shadow: inset $top $left $blur $color;
|
||||
box-shadow: inset $top $left $blur $color;
|
||||
} @else {
|
||||
-webkit-box-shadow: $top $left $blur $color;
|
||||
-moz-box-shadow: $top $left $blur $color;
|
||||
box-shadow: $top $left $blur $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin link {
|
||||
color: $light-link;
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tile {
|
||||
position: relative;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding: $spring-8points * 2;
|
||||
padding-right: 60px;
|
||||
color: rgba($light-color, 0.8);
|
||||
background: $light-background-dark;
|
||||
cursor: pointer;
|
||||
font-size: $spring-font-size-sm;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 24px;
|
||||
@include outline();
|
||||
strong {
|
||||
color: $light-color;
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
div {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
span {
|
||||
font-size: $spring-font-size-sm - 1;
|
||||
}
|
||||
.icon {
|
||||
$s: 24px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
border: 2px solid $light-border;
|
||||
height: $s;
|
||||
width: $s;
|
||||
margin-top: -$s/2;
|
||||
top: 50%;
|
||||
right: 16px;
|
||||
border-radius: $s/2 + 2;
|
||||
color: $light-color;
|
||||
}
|
||||
.icon-times,
|
||||
.icon-check,
|
||||
.icon-plus {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
width: 12px;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 6px;
|
||||
}
|
||||
.icon-times {
|
||||
left: 7px;
|
||||
width: 10px;
|
||||
color: #d20000;
|
||||
}
|
||||
.icon-check {
|
||||
top: 6px;
|
||||
}
|
||||
&.selected {
|
||||
background: #e7f1f4;
|
||||
.icon {
|
||||
border-color: rgba(darken(#e7f1f4, 20), 0.6);
|
||||
color: darken(#e7f1f4, 60);
|
||||
}
|
||||
.icon-plus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.checked,
|
||||
.selected {
|
||||
background: white;
|
||||
box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.1);
|
||||
.icon {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
color: #ff6a00;
|
||||
}
|
||||
.icon-check {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.checked:hover {
|
||||
.icon-plus {
|
||||
opacity: 0;
|
||||
}
|
||||
.icon-check {
|
||||
opacity: 0;
|
||||
}
|
||||
.icon-times {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.invalid,
|
||||
&.checked.invalid {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
background: $light-background-dark;
|
||||
&:hover {
|
||||
background: $light-background-dark;
|
||||
}
|
||||
.warning {
|
||||
color: #f30808;
|
||||
}
|
||||
}
|
||||
&.invalid {
|
||||
.icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.checked.invalid {
|
||||
cursor: pointer;
|
||||
.icon {
|
||||
display: block;
|
||||
}
|
||||
.icon-check {
|
||||
opacity: 0;
|
||||
}
|
||||
.icon-times {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tilehover {
|
||||
&:hover {
|
||||
background: #e7f1f4;
|
||||
.icon {
|
||||
border-color: rgba(darken(#e7f1f4, 20), 0.6);
|
||||
color: darken(#e7f1f4, 80);
|
||||
}
|
||||
.icon-plus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.checked:hover {
|
||||
background: white;
|
||||
.icon {
|
||||
border-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
122
initializer-page/src/styles/_prism.scss
Normal file
122
initializer-page/src/styles/_prism.scss
Normal file
@@ -0,0 +1,122 @@
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: #393a34;
|
||||
font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier,
|
||||
monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
pre[class*='language-']::-moz-selection,
|
||||
pre[class*='language-'] ::-moz-selection,
|
||||
code[class*='language-']::-moz-selection,
|
||||
code[class*='language-'] ::-moz-selection {
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*='language-']::selection,
|
||||
pre[class*='language-'] ::selection,
|
||||
code[class*='language-']::selection,
|
||||
code[class*='language-'] ::selection {
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #999988;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.string,
|
||||
.token.attr-value {
|
||||
color: #e3116c;
|
||||
}
|
||||
.token.punctuation,
|
||||
.token.operator {
|
||||
color: #393a34; /* no highlight */
|
||||
}
|
||||
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.token.symbol,
|
||||
.token.number,
|
||||
.token.boolean,
|
||||
.token.variable,
|
||||
.token.constant,
|
||||
.token.property,
|
||||
.token.regex,
|
||||
.token.inserted {
|
||||
color: #36acaa;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.attr-name,
|
||||
.language-autohotkey .token.selector {
|
||||
color: #00bfff;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.deleted,
|
||||
.language-autohotkey .token.tag {
|
||||
color: #f14f00;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.selector,
|
||||
.language-autohotkey .token.keyword {
|
||||
color: #00009f;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.function,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.language-java {
|
||||
.token.annotation {
|
||||
color: #e3116c; /* no highlight */
|
||||
}
|
||||
}
|
||||
|
||||
.gatsby-highlight-code-line {
|
||||
background-color: #f9f9f9;
|
||||
display: block;
|
||||
margin-right: -1em;
|
||||
margin-left: -1em;
|
||||
padding-right: 1em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
pre.language-xml {
|
||||
.token.tag,
|
||||
.token.selector,
|
||||
.language-autohotkey .token.keyword {
|
||||
color: #e3116c;
|
||||
}
|
||||
.token {
|
||||
&.attr-value {
|
||||
color: rgb(80, 161, 79);
|
||||
}
|
||||
&.attr-name {
|
||||
color: rgb(193, 132, 1);
|
||||
}
|
||||
&.punctuation {
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
148
initializer-page/src/styles/_responsive.scss
Normal file
148
initializer-page/src/styles/_responsive.scss
Normal file
@@ -0,0 +1,148 @@
|
||||
@media (max-width: 900px) {
|
||||
.desktop-only {
|
||||
display: none;
|
||||
}
|
||||
body,
|
||||
body.light {
|
||||
background: none;
|
||||
padding-bottom: 94px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.colset {
|
||||
display: block;
|
||||
max-width: none;
|
||||
min-width: 0;
|
||||
padding: $spring-8points * 2;
|
||||
.left {
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
max-width: none;
|
||||
min-width: 0;
|
||||
flex: none;
|
||||
}
|
||||
.right {
|
||||
padding: 0;
|
||||
max-width: none;
|
||||
min-width: 0;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.right.right-md {
|
||||
padding: 0;
|
||||
max-width: none;
|
||||
width: auto;
|
||||
flex: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 0;
|
||||
border-top: 4px solid $light-primary;
|
||||
width: auto;
|
||||
h1.logo {
|
||||
a {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-links {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
display: block;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-top: 1px solid #e4e4e4;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
background: $light-background-dark;
|
||||
padding: 0.5rem 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Colset
|
||||
|
||||
.colset-2 {
|
||||
display: block;
|
||||
flex-flow: wrap;
|
||||
.column {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex: none;
|
||||
+ .column {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-top: $spring-8points * 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dependencies-box {
|
||||
padding: $spring-8points 0;
|
||||
}
|
||||
|
||||
.colset .left.nopadding {
|
||||
margin-left: 0;
|
||||
padding: 0px;
|
||||
flex: none;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
display: none;
|
||||
}
|
||||
.sticky .colset {
|
||||
padding: 0;
|
||||
}
|
||||
.colset .right.nopadding {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
min-width: 0;
|
||||
flex: none;
|
||||
.submit {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.placeholder-button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.groups .group {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.groups .group .group-title {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
float: none;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.submit {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.tab {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error {
|
||||
position: relative;
|
||||
left: auto;
|
||||
top: auto;
|
||||
padding: 0 40px;
|
||||
}
|
||||
.warnings {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 4px 18px;
|
||||
}
|
||||
.share-area > .button,
|
||||
.share-area {
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
51
initializer-page/src/styles/_toast.scss
Normal file
51
initializer-page/src/styles/_toast.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
$rt-color-default: #fff;
|
||||
$rt-color-info: #3498db;
|
||||
$rt-color-success: #ff6a00;
|
||||
$rt-color-warning: #e8ba00;
|
||||
$rt-color-error: #e74c3c;
|
||||
$rt-toast-width: 400px;
|
||||
|
||||
@import '../../node_modules/react-toastify/scss/variables';
|
||||
|
||||
@import '../../node_modules/react-toastify/scss/toastContainer';
|
||||
@import '../../node_modules/react-toastify/scss/toast';
|
||||
@import '../../node_modules/react-toastify/scss/closeButton';
|
||||
@import '../../node_modules/react-toastify/scss/progressBar';
|
||||
|
||||
@import '../../node_modules/react-toastify/scss/animations/bounce.scss';
|
||||
@import '../../node_modules/react-toastify/scss/animations/zoom.scss';
|
||||
@import '../../node_modules/react-toastify/scss/animations/flip.scss';
|
||||
@import '../../node_modules/react-toastify/scss/animations/slide.scss';
|
||||
|
||||
.#{$rt-namespace}__toast-container {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.#{$rt-namespace}__toast {
|
||||
padding: $spring-8points * 2;
|
||||
}
|
||||
|
||||
.Toastify__toast {
|
||||
position: relative;
|
||||
min-height: 32px;
|
||||
padding: 12px;
|
||||
.toast-close {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 6px 8px;
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
color: white;
|
||||
svg {
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.toast-close {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
41
initializer-page/src/styles/_variables.scss
Normal file
41
initializer-page/src/styles/_variables.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
// Theme Light
|
||||
|
||||
$light-background: #fff;
|
||||
$light-background-dark: #f7f7f7;
|
||||
$light-background-darker: #e4e4e4;
|
||||
$light-background-disabled: #23282b;
|
||||
$light-color: #222;
|
||||
$light-color-light: #d1d2d3;
|
||||
$light-color-medium: #8d8f91;
|
||||
$light-color-dark: #494c4e;
|
||||
$light-border: #e4e4e4;
|
||||
$light-border-dark: darken($light-border, 10);
|
||||
$light-outline: rgba(0, 0, 0, 0.2);
|
||||
$light-primary: #ff6a00;
|
||||
$light-link: #0188ff;
|
||||
|
||||
// Theme Dark
|
||||
|
||||
$dark-background: #1b1f23;
|
||||
$dark-background-light: #262a2d;
|
||||
$dark-background-lighter: lighten($dark-background-light, 5);
|
||||
$dark-background-disabled: #23282b;
|
||||
$dark-color: #fff;
|
||||
$dark-color-light: #d1d2d3;
|
||||
$dark-color-medium: #8d8f91;
|
||||
$dark-color-dark: #494c4e;
|
||||
$dark-border: #323638;
|
||||
$dark-border-dark: lighten($dark-border, 10);
|
||||
$dark-outline: #76797a;
|
||||
$dark-primary: #ff6a00;
|
||||
$dark-link: #0188ff;
|
||||
|
||||
// Global
|
||||
|
||||
$spring-8points: 8px;
|
||||
$spring-font-size: 15px;
|
||||
$spring-font-size-sm: 14px;
|
||||
$spring-font-family: Karla, Arial, sans-serif;
|
||||
$spring-radius: 4px;
|
||||
$spring-transition-duration: 0.15s;
|
||||
$spring-sidebar-width: 316px;
|
||||
32
initializer-page/src/styles/app.scss
Normal file
32
initializer-page/src/styles/app.scss
Normal file
@@ -0,0 +1,32 @@
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../fonts/karla-v12-latin-regular.eot');
|
||||
src: local(''),
|
||||
url('../fonts/karla-v12-latin-regular.eot?#iefix')
|
||||
format('embedded-opentype'),
|
||||
url('../fonts/karla-v12-latin-regular.woff2') format('woff2'),
|
||||
url('../fonts/karla-v12-latin-regular.woff') format('woff'),
|
||||
url('../fonts/karla-v12-latin-regular.ttf') format('truetype'),
|
||||
url('../fonts/karla-v12-latin-regular.svg#Karla') format('svg');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Karla';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: url('../fonts/karla-v12-latin-700.eot');
|
||||
src: local(''),
|
||||
url('../fonts/karla-v12-latin-700.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/karla-v12-latin-700.woff2') format('woff2'),
|
||||
url('../fonts/karla-v12-latin-700.woff') format('woff'),
|
||||
url('../fonts/karla-v12-latin-700.ttf') format('truetype'),
|
||||
url('../fonts/karla-v12-latin-700.svg#Karla') format('svg');
|
||||
}
|
||||
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'main';
|
||||
@import 'toast';
|
||||
@import 'responsive';
|
||||
@import 'dark';
|
||||
426
initializer-page/src/styles/explore.scss
Normal file
426
initializer-page/src/styles/explore.scss
Normal file
@@ -0,0 +1,426 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'prism';
|
||||
|
||||
$placeholder-bg: #f7f7f7;
|
||||
$placeholder-border: #e4e4e4;
|
||||
|
||||
.modal-explorer {
|
||||
width: 98%;
|
||||
max-width: 1320px;
|
||||
top: 40px;
|
||||
height: 80%;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
padding: 0;
|
||||
min-width: 960px;
|
||||
> div {
|
||||
height: 100%;
|
||||
}
|
||||
.close {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 6px 12px;
|
||||
height: 28px;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
color: $light-color;
|
||||
svg {
|
||||
width: 14px;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.colset-explorer {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.right,
|
||||
.left {
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.left {
|
||||
flex: 0 0 400px;
|
||||
border-right: 1px solid $light-border;
|
||||
}
|
||||
.head {
|
||||
border-bottom: 1px solid $light-border;
|
||||
line-height: 40px;
|
||||
padding: 0 $spring-8points * 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 40px;
|
||||
right: 0;
|
||||
|
||||
.divider {
|
||||
display: inline-block;
|
||||
}
|
||||
.actions {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
margin-left: 16px;
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
.placeholder-text {
|
||||
margin: 13px 13px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
outline: 1px solid transparent;
|
||||
height: 40px;
|
||||
&:focus {
|
||||
outline: 1px dotted $light-outline;
|
||||
}
|
||||
}
|
||||
.placeholder-text {
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
.placeholder-text {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.foot {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
border-top: 1px solid $light-border;
|
||||
.action {
|
||||
position: relative;
|
||||
padding-left: 5px;
|
||||
padding-right: 20px;
|
||||
margin-left: 10px;
|
||||
outline: 1px solid transparent;
|
||||
.icon-download {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 5px;
|
||||
}
|
||||
&:focus {
|
||||
outline: 1px dotted $light-outline;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
position: absolute;
|
||||
top: 13px;
|
||||
left: 14px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.action {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
color: $light-link;
|
||||
padding: 0 $spring-8points * 2;
|
||||
text-decoration: underline;
|
||||
svg {
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.explorer-content {
|
||||
position: absolute;
|
||||
top: 41px;
|
||||
bottom: 40px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
.head {
|
||||
strong {
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
svg {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0;
|
||||
width: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.placeholder-text {
|
||||
background: $placeholder-bg;
|
||||
}
|
||||
.explorer-content {
|
||||
bottom: 0;
|
||||
&::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(black, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-download {
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.explorer-ul {
|
||||
&,
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
.file,
|
||||
.folder {
|
||||
position: relative;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: $light-color;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.text {
|
||||
position: relative;
|
||||
padding-left: 44px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
.icon {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 18px;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
.icon-caret-down {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
top: 6px;
|
||||
left: 0;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
outline: 1px dotted transparent;
|
||||
&:focus {
|
||||
outline: 1px dotted $light-outline;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
&:focus {
|
||||
outline: 1px dotted $light-outline;
|
||||
}
|
||||
}
|
||||
&.selected {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.folder-hide {
|
||||
> ul {
|
||||
display: none;
|
||||
}
|
||||
> .folder > .text > .icon-caret-down {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
|
||||
$range: 12px;
|
||||
|
||||
.level-0 {
|
||||
.text {
|
||||
margin-left: 0 * $range + 6px;
|
||||
}
|
||||
}
|
||||
.level-1 {
|
||||
.text {
|
||||
margin-left: 1 * $range + 6px;
|
||||
}
|
||||
}
|
||||
.level-2 {
|
||||
.text {
|
||||
margin-left: 2 * $range + 6px;
|
||||
}
|
||||
}
|
||||
.level-3 {
|
||||
.text {
|
||||
margin-left: 3 * $range + 6px;
|
||||
}
|
||||
}
|
||||
.level-4 {
|
||||
.text {
|
||||
margin-left: 4 * $range + 6px;
|
||||
}
|
||||
}
|
||||
.level-5 {
|
||||
.text {
|
||||
margin-left: 5 * $range + 6px;
|
||||
}
|
||||
}
|
||||
.level-6 {
|
||||
.text {
|
||||
margin-left: 6 * $range + 6px;
|
||||
}
|
||||
}
|
||||
.level-7 {
|
||||
.text {
|
||||
margin-left: 7 * $range + 6px;
|
||||
}
|
||||
}
|
||||
.level-8 {
|
||||
.text {
|
||||
margin-left: 8 * $range + 6px;
|
||||
}
|
||||
}
|
||||
.level-9 {
|
||||
.text {
|
||||
margin-left: 9 * $range + 6px;
|
||||
}
|
||||
}
|
||||
.level-10 {
|
||||
.text {
|
||||
margin-left: 10 * $range + 6px;
|
||||
}
|
||||
}
|
||||
.icon-folder {
|
||||
width: 20px;
|
||||
}
|
||||
.icon-file {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 4px;
|
||||
width: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
ul.explorer-ul-placeholder {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
li {
|
||||
list-style: none;
|
||||
height: 30px;
|
||||
.placeholder-text {
|
||||
margin-left: 28px;
|
||||
margin-top: 8px;
|
||||
+ .placeholder-text {
|
||||
margin-left: 5px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre.prism-code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 24px;
|
||||
font-size: 13px;
|
||||
font-family: Monaco, Menlo, Consolas, 'courier new', monospace;
|
||||
span.explorer-number {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
padding-right: 10px;
|
||||
text-align: right;
|
||||
margin-right: 10px;
|
||||
font-size: 11px;
|
||||
height: 25px;
|
||||
&:before {
|
||||
display: block;
|
||||
content: attr(data-value);
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
left: 0;
|
||||
top: 9px;
|
||||
background-color: $light-background-dark;
|
||||
padding-right: 10px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
.token-line {
|
||||
height: 25px;
|
||||
}
|
||||
&.line-3 {
|
||||
width: 28px;
|
||||
span.explorer-number {
|
||||
width: 28px;
|
||||
&:before {
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
width: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 30px;
|
||||
content: '';
|
||||
background-color: $light-background-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown,
|
||||
.markdown-source {
|
||||
position: relative;
|
||||
padding: $spring-8points $spring-8points * 4;
|
||||
a {
|
||||
color: $light-link;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.button-source {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
line-height: 20px;
|
||||
margin: 10px 15px;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
padding: 2px 12px;
|
||||
}
|
||||
}
|
||||
.markdown-source {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
33
initializer-page/src/styles/fetch.scss
Normal file
33
initializer-page/src/styles/fetch.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
.modal-fetch {
|
||||
padding: 10px 30px 10px 30px;
|
||||
height: 300px;
|
||||
width: 700px;
|
||||
h2 {
|
||||
border-bottom: solid 3px #ff6a00;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.fetch-method {
|
||||
margin-bottom: 20px;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
font-weight: bold;
|
||||
}
|
||||
input {
|
||||
padding-right: 70px;
|
||||
display: inline-block;
|
||||
}
|
||||
a {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
color: #ff6a00;
|
||||
}
|
||||
a:visited {
|
||||
color: #ff6a00;
|
||||
}
|
||||
}
|
||||
}
|
||||
141
initializer-page/src/styles/sandbox.scss
Normal file
141
initializer-page/src/styles/sandbox.scss
Normal file
@@ -0,0 +1,141 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
$w_arrow: 12px;
|
||||
$w: 500px;
|
||||
|
||||
.popup-share {
|
||||
z-index: 10000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $w;
|
||||
background: white;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
@include transition(all $spring-transition-duration);
|
||||
&:before {
|
||||
$h: 60px;
|
||||
content: ' ';
|
||||
height: $h;
|
||||
width: $w;
|
||||
position: absolute;
|
||||
bottom: -$h;
|
||||
left: 0;
|
||||
}
|
||||
.popup-content {
|
||||
padding: $spring-8points * 3;
|
||||
padding-top: $spring-8points;
|
||||
label {
|
||||
display: block;
|
||||
font-size: $spring-font-size;
|
||||
color: $light-color;
|
||||
line-height: $spring-8points * 3;
|
||||
padding-top: $spring-8points;
|
||||
}
|
||||
.control {
|
||||
position: relative;
|
||||
padding-bottom: $spring-8points;
|
||||
}
|
||||
.control-input {
|
||||
padding-right: 70px;
|
||||
&.padding-lg {
|
||||
padding-right: 88px;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
}
|
||||
.link {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
padding: 0 $spring-8points * 2;
|
||||
height: 38px;
|
||||
line-height: 43px;
|
||||
right: 0;
|
||||
@include link;
|
||||
}
|
||||
}
|
||||
.popup-header {
|
||||
position: relative;
|
||||
padding: 4px $spring-8points * 2 2px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
h1 {
|
||||
font-size: $spring-8points * 2;
|
||||
line-height: $spring-8points * 2;
|
||||
}
|
||||
.close {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 4px;
|
||||
padding: 4px 8px;
|
||||
height: 22px;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
color: $light-color;
|
||||
svg {
|
||||
width: 14px;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.button.share-ghost {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: none;
|
||||
z-index: 99000;
|
||||
}
|
||||
|
||||
// }
|
||||
.popup-share-overlay {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.popup-enter {
|
||||
opacity: 0.01;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.popup-enter-active {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.popup-exit {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.popup-exit-active {
|
||||
opacity: 0.01;
|
||||
transform: scale(0.95);
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.overlay-enter {
|
||||
opacity: 0.01;
|
||||
}
|
||||
|
||||
.overlay-enter-active {
|
||||
opacity: 1;
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.overlay-exit {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.overlay-exit-active {
|
||||
opacity: 0.01;
|
||||
transition: all 300ms;
|
||||
}
|
||||
141
initializer-page/src/styles/share.scss
Normal file
141
initializer-page/src/styles/share.scss
Normal file
@@ -0,0 +1,141 @@
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
$w_arrow: 12px;
|
||||
$w: 500px;
|
||||
|
||||
.popup-share {
|
||||
z-index: 10000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $w;
|
||||
background: white;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
@include transition(all $spring-transition-duration);
|
||||
&:before {
|
||||
$h: 60px;
|
||||
content: ' ';
|
||||
height: $h;
|
||||
width: $w;
|
||||
position: absolute;
|
||||
bottom: -$h;
|
||||
left: 0;
|
||||
}
|
||||
.popup-content {
|
||||
padding: $spring-8points * 3;
|
||||
padding-top: $spring-8points;
|
||||
label {
|
||||
display: block;
|
||||
font-size: $spring-font-size;
|
||||
color: $light-color;
|
||||
line-height: $spring-8points * 3;
|
||||
padding-top: $spring-8points;
|
||||
}
|
||||
.control {
|
||||
position: relative;
|
||||
padding-bottom: $spring-8points;
|
||||
}
|
||||
.control-input {
|
||||
padding-right: 70px;
|
||||
&.padding-lg {
|
||||
padding-right: 88px;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
}
|
||||
.link {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
padding: 0 $spring-8points * 2;
|
||||
height: 38px;
|
||||
line-height: 43px;
|
||||
right: 0;
|
||||
@include link;
|
||||
}
|
||||
}
|
||||
.popup-header {
|
||||
position: relative;
|
||||
padding: 4px $spring-8points * 2 2px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
h1 {
|
||||
font-size: $spring-8points * 2;
|
||||
line-height: $spring-8points * 2;
|
||||
}
|
||||
.close {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 4px;
|
||||
padding: 4px 8px;
|
||||
height: 22px;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
color: $light-color;
|
||||
svg {
|
||||
width: 14px;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.button.share-ghost {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: none;
|
||||
z-index: 99000;
|
||||
}
|
||||
|
||||
// }
|
||||
.popup-share-overlay {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.popup-enter {
|
||||
opacity: 0.01;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.popup-enter-active {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.popup-exit {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.popup-exit-active {
|
||||
opacity: 0.01;
|
||||
transform: scale(0.95);
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.overlay-enter {
|
||||
opacity: 0.01;
|
||||
}
|
||||
|
||||
.overlay-enter-active {
|
||||
opacity: 1;
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.overlay-exit {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.overlay-exit-active {
|
||||
opacity: 0.01;
|
||||
transition: all 300ms;
|
||||
}
|
||||
Reference in New Issue
Block a user