mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
replaced node-sass with sass
This commit is contained in:
parent
8ee5b09b65
commit
5c9fdf93db
39 changed files with 148 additions and 1162 deletions
|
@ -4,7 +4,7 @@
|
|||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate($content_width / 2 + $gap, 0);
|
||||
transform: translate($content_width * 0.5 + $gap, 0);
|
||||
z-index: 14;
|
||||
|
||||
@media (max-width: $content_width + ($bar_height + $gap) * 2) {
|
||||
|
@ -17,7 +17,7 @@
|
|||
background: $red_gradient;
|
||||
width: $bar_height;
|
||||
height: $bar_height;
|
||||
border-radius: $bar_height / 2;
|
||||
border-radius: $bar_height * 0.5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.wrap {
|
||||
padding: $gap / 2 0;
|
||||
padding: $gap * 0.5 0;
|
||||
border-bottom: 1px solid #333333;
|
||||
|
||||
&:last-child {
|
||||
|
|
|
@ -101,7 +101,7 @@
|
|||
}
|
||||
|
||||
.block_text {
|
||||
padding: $gap / 2 0;
|
||||
padding: $gap * 0.5 0;
|
||||
}
|
||||
|
||||
.date {
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin: $gap / 4 0 !important;
|
||||
margin: $gap * 0.25 0 !important;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
|
@ -58,7 +58,7 @@
|
|||
}
|
||||
|
||||
.preview {
|
||||
padding: 0 $gap / 2 0;
|
||||
padding: 0 $gap * 0.5 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
|
@ -24,20 +24,20 @@
|
|||
background: transparentize(black, 0.8);
|
||||
border-radius: 0 0 $radius $radius;
|
||||
flex-wrap: wrap;
|
||||
padding: $gap / 4;
|
||||
padding: $gap * 0.25;
|
||||
}
|
||||
|
||||
.button_column {
|
||||
padding: $gap / 4;
|
||||
padding: $gap * 0.25;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uploads {
|
||||
padding: ($gap / 2);
|
||||
padding: ($gap * 0.5);
|
||||
display: grid;
|
||||
grid-column-gap: $gap / 2;
|
||||
grid-row-gap: $gap / 2;
|
||||
grid-column-gap: $gap * 0.5;
|
||||
grid-row-gap: $gap * 0.5;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
}
|
||||
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
flex-direction: column;
|
||||
|
||||
& > * {
|
||||
margin: $gap/2 0;
|
||||
margin: $gap*0.5 0;
|
||||
|
||||
&:first-child { margin-top: 0; }
|
||||
&:last-child { margin-bottom: 0; }
|
||||
|
@ -32,7 +32,7 @@
|
|||
}
|
||||
|
||||
& > * {
|
||||
margin: 0 $gap / 2;
|
||||
margin: 0 $gap * 0.5;
|
||||
|
||||
&:first-child { margin-left: 0; }
|
||||
&:last-child { margin-right: 0; }
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
flex-wrap: wrap;
|
||||
|
||||
&> * {
|
||||
margin: $gap / 2;
|
||||
margin: $gap * 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding: 0 $gap / 2;
|
||||
padding: 0 $gap * 0.5;
|
||||
}
|
||||
|
||||
.tab {
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
touch-action: none;
|
||||
|
||||
& > * {
|
||||
margin: 0 $gap / 2;
|
||||
margin: 0 $gap * 0.5;
|
||||
pointer-events: all;
|
||||
touch-action: auto;
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
@include outer_shadow();
|
||||
|
||||
height: $upload_button_height;
|
||||
border-radius: ($upload_button_height / 2) !important;
|
||||
border-radius: ($upload_button_height * 0.5) !important;
|
||||
position: relative;
|
||||
border-radius: $radius;
|
||||
cursor: pointer;
|
||||
|
@ -49,7 +49,7 @@
|
|||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
border-radius: ($upload_button_height / 2) !important;
|
||||
border-radius: ($upload_button_height * 0.5) !important;
|
||||
background: 50% 50% no-repeat;
|
||||
background-size: cover;
|
||||
will-change: transform;
|
||||
|
|
|
@ -70,7 +70,7 @@
|
|||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
margin-right: $gap / 2;
|
||||
margin-right: $gap * 0.5;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -144,7 +144,7 @@
|
|||
height: 20px;
|
||||
font: $font_12_semibold;
|
||||
padding: 0 15px;
|
||||
border-radius: $radius / 2;
|
||||
border-radius: $radius * 0.5;
|
||||
|
||||
&:global(.round) {
|
||||
border-radius: 10px;
|
||||
|
@ -153,7 +153,7 @@
|
|||
|
||||
.mini {
|
||||
height: 26px;
|
||||
border-radius: $radius / 2;
|
||||
border-radius: $radius * 0.5;
|
||||
|
||||
&:global(.round) {
|
||||
border-radius: 14px;
|
||||
|
@ -204,13 +204,13 @@
|
|||
}
|
||||
|
||||
.icon_left {
|
||||
margin-right: $gap / 2 !important;
|
||||
margin-right: $gap * 0.5 !important;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.icon_right {
|
||||
margin-left: $gap / 2 !important;
|
||||
margin-left: $gap * 0.5 !important;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
|
|
@ -34,20 +34,20 @@
|
|||
.error {
|
||||
position: absolute;
|
||||
font: $font_12_semibold;
|
||||
padding: 0 $gap / 2;
|
||||
padding: 0 $gap * 0.5;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
background-color: $red;
|
||||
bottom: 0;
|
||||
right: $gap / 2;
|
||||
right: $gap * 0.5;
|
||||
transform: translate(0, 50%);
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: $gap;
|
||||
left: $gap / 2;
|
||||
padding: 0 $gap / 2;
|
||||
left: $gap * 0.5;
|
||||
padding: 0 $gap * 0.5;
|
||||
transform: translate(0, 0) scale(1);
|
||||
font: $input_font;
|
||||
transition: transform 0.25s;
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
.wrap {
|
||||
@include outer_shadow;
|
||||
|
||||
background: url('../../../sprites/boris_lab.svg') 50% 50% no-repeat;
|
||||
background: url('/images/boris_lab.svg') 50% 50% no-repeat;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
@import "src/styles/variables.scss";
|
||||
|
||||
.wrap {
|
||||
padding: $lab_gap / 2 $lab_gap 0;
|
||||
padding: $lab_gap * 0.5 $lab_gap 0;
|
||||
line-height: 1.3em;
|
||||
|
||||
@include tablet {
|
||||
|
@ -9,6 +9,6 @@
|
|||
line-height: 1.3em;
|
||||
font: $font_16_regular;
|
||||
padding: 0 $lab_gap_mobile;
|
||||
margin: $lab_gap_mobile / 2 0;
|
||||
margin: $lab_gap_mobile * 0.5 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
border-radius: $radius;
|
||||
background-color: $content_bg;
|
||||
padding: $gap / 2;
|
||||
padding: $gap * 0.5;
|
||||
}
|
||||
|
||||
.group {
|
||||
|
@ -18,6 +18,6 @@
|
|||
}
|
||||
|
||||
& > * {
|
||||
margin: $gap / 2;
|
||||
margin: $gap * 0.5;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
.item {
|
||||
flex: 0 0 auto;
|
||||
padding: $gap / 2;
|
||||
padding: $gap * 0.5;
|
||||
fill: currentColor;
|
||||
color: darken(white, 50%);
|
||||
transition: color 0.25s;
|
||||
|
|
|
@ -28,6 +28,6 @@
|
|||
}
|
||||
|
||||
.content {
|
||||
padding: $gap / 2 0;
|
||||
padding: $gap * 0.5 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
@ -5,6 +5,6 @@
|
|||
flex-wrap: wrap;
|
||||
|
||||
& > * {
|
||||
margin: $gap / 2;
|
||||
margin: $gap * 0.5;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -58,5 +58,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#preload_shade>
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
box-sizing: border-box;
|
||||
|
||||
&:global(.logo) {
|
||||
height: (54px * 1.5) + $gap / 2;
|
||||
height: (54px * 1.5) + $gap * 0.5;
|
||||
background: $red_gradient;
|
||||
background-size: 140px;
|
||||
font-weight: 600;
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
}
|
||||
|
||||
.text {
|
||||
margin-left: $gap / 2;
|
||||
margin-left: $gap * 0.5;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
|
|
|
@ -47,7 +47,7 @@ div.thumb {
|
|||
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
padding: $gap / 2;
|
||||
padding: $gap * 0.5;
|
||||
box-sizing: border-box;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
|
|
@ -95,6 +95,6 @@ $outgoing_color: $comment_bg;
|
|||
.deleted {
|
||||
background: mix($red, $content_bg, 50%);
|
||||
border-radius: $radius $radius $radius 0;
|
||||
padding: $gap / 2;
|
||||
padding: $gap * 0.5;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
|
@ -36,7 +36,7 @@ $pad_usual: mix(white, $content_bg, 10%);
|
|||
border-radius: 4px;
|
||||
font: $font_10_semibold;
|
||||
line-height: 12px;
|
||||
padding: 2px $gap / 2;
|
||||
padding: 2px $gap * 0.5;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -27,6 +27,6 @@ $row_height: 24px;
|
|||
|
||||
.scroll {
|
||||
overflow: hidden;
|
||||
padding: 0 0 $gap / 2;
|
||||
padding: 0 0 $gap * 0.5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
|
@ -9,7 +9,7 @@ $big: 1.2;
|
|||
cursor: default;
|
||||
height: $tag_height;
|
||||
background: $tag_bg;
|
||||
border-radius: ($tag_height / 2) 3px 3px ($tag_height / 2);
|
||||
border-radius: ($tag_height * 0.5) 3px 3px ($tag_height * 0.5);
|
||||
font: $font_14_semibold;
|
||||
align-self: flex-start;
|
||||
position: relative;
|
||||
|
@ -28,7 +28,7 @@ $big: 1.2;
|
|||
&:global(.big) {
|
||||
height: $tag_height * $big;
|
||||
font: $font_16_semibold;
|
||||
border-radius: ($tag_height * $big / 2) 3px 3px ($tag_height * $big / 2);
|
||||
border-radius: ($tag_height * $big * 0.5) 3px 3px ($tag_height * $big * 0.5);
|
||||
|
||||
.hole {
|
||||
width: $tag_height * $big;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue