Skip to content

Commit

Permalink
іьфдд ашчуііьфдд ашчуі
Browse files Browse the repository at this point in the history
  • Loading branch information
@nelyaklyusa
nelyaklyusa committed Oct 24, 2024
1 parent 54d7c70 commit 2943260
Show file tree
Hide file tree
Showing 4 changed files with 72 additions and 61 deletions.
6 changes: 4 additions & 2 deletions src/components/BaseImage/BaseImage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const onImageLoaded = () => {
<template>
<div
class="BaseImage base-image"
:class="[`is--${fit}`]"
:class="[`is--${fit}`, { 'is--bg': !src }]"
>
<BaseSkeleton
v-show="!isImageLoaded"
Expand All @@ -48,12 +48,14 @@ const onImageLoaded = () => {
$root:&
width: 100%
height: 100%
background-color: $default-background-color
display: flex
justify-content: center
align-items: center
overflow: hidden
&.is--bg
background-color: $default-background-color
&__image
height: 100%
width: 100%
Expand Down
10 changes: 8 additions & 2 deletions src/components/common/CheckmarkedItem/CheckmarkedItem.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script setup lang="ts">
import { BaseSvgIcon } from 'UiKit/components/BaseSvgIcon'
import BaseTooltip from 'UiKit/components/BaseTooltip/BaseTooltip.vue';
import { PropType } from 'vue';
export interface ICheckmarkedItem {
Expand All @@ -12,7 +13,7 @@ defineProps({
title: String,
description: String,
darkMode: Boolean,
iconHollow: Boolean,
icon: String as PropType<'hollow' | 'darkbg'>,
card: Boolean,
tooltip: String,
});
Expand All @@ -32,7 +33,7 @@ defineProps({
<div class="checkmarked-item__top">
<div
class="checkmarked-item__icon-wrap"
:class="{'is--icon-hollow': iconHollow }"
:class="{'is--icon-hollow': icon === 'hollow', 'is--icon-dark-bg': icon === 'darkbg' }"
>
<BaseSvgIcon
name="check"
Expand Down Expand Up @@ -92,6 +93,7 @@ defineProps({
height: auto
color: $secondary-dark
&__icon-wrap
display: flex
padding: 4px
Expand All @@ -105,6 +107,10 @@ defineProps({
background-color: transparent
border: 1px solid $secondary
padding: 3px
&.is--icon-dark-bg
background-color: $secondary-dark
#{$root}__icon
color: $black
&__bottom
opacity: 0.9
Expand Down
115 changes: 59 additions & 56 deletions src/styles/components/_code.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,44 +11,45 @@
// margin-bottom: 20px
// position: relative
:not(pre) > code
padding: 0 5px
display: inline-block
margin: 0
background-color: $gray-10
:not(pre) > code
padding: 0 5px
display: inline-block
margin: 0
background-color: $gray-10


a > code
color: $black
a > code
color: $black


a:hover > code
a:hover > code
color: $primary

pre > code
pre > code
display: block
a
margin: 0 !important


h1 > code,
h2 > code,
h3 > code,
h4 > code
h1 > code,
h2 > code,
h3 > code,
h4 > code
font-size: 0.9em


div[class*='language-'],
.vp-block
div[class*='language-'],
.vp-block
position: relative
margin: 16px -24px
overflow-x: auto
transition: background-color 0.5s
max-width: 100%


@media (min-width: 640px)
div[class*='language-'],
.vp-block
@media (min-width: 640px)
div[class*='language-'],
.vp-block
margin-top: 40px
margin-left: 0
margin-right: 0
Expand All @@ -59,8 +60,8 @@



[class*='language-'] pre,
[class*='language-'] code
[class*='language-'] pre,
[class*='language-'] code
/*rtl:ignore*/
direction: ltr
/*rtl:ignore*/
Expand All @@ -78,7 +79,7 @@
hyphens: none


[class*='language-'] pre
[class*='language-'] pre
position: relative
z-index: 1
margin: 0
Expand All @@ -87,16 +88,17 @@
overflow-x: auto


[class*='language-'] code
[class*='language-'] code
display: block
width: fit-content
min-width: 100%
border: none
transition: color 0.5s
margin-bottom: 0
padding: 10px


[class*='language-'] code .highlighted
[class*='language-'] code .highlighted
background-color: $primary-light
transition: background-color 0.5s
margin: 0 -24px
Expand All @@ -105,68 +107,68 @@
display: inline-block


[class*='language-'] code .highlighted.error
[class*='language-'] code .highlighted.error
background-color: $red


[class*='language-'] code .highlighted.warning
[class*='language-'] code .highlighted.warning
background-color: $yellow


[class*='language-'] code .diff
[class*='language-'] code .diff
transition: background-color 0.5s
margin: 0 -24px
padding: 0 24px
width: calc(100% + 2 * 24px)
display: inline-block


[class*='language-'] code .diff::before
[class*='language-'] code .diff::before
position: absolute
left: 10px


[class*='language-'] .has-focused-lines .line:not(.has-focus)
[class*='language-'] .has-focused-lines .line:not(.has-focus)
filter: blur(0.095rem)
opacity: 0.4
transition: filter 0.35s, opacity 0.35s


[class*='language-'] .has-focused-lines .line:not(.has-focus)
[class*='language-'] .has-focused-lines .line:not(.has-focus)
opacity: 0.7
transition: filter 0.35s, opacity 0.35s


[class*='language-']:hover .has-focused-lines .line:not(.has-focus)
[class*='language-']:hover .has-focused-lines .line:not(.has-focus)
filter: blur(0)
opacity: 1


[class*='language-'] code .diff.remove
[class*='language-'] code .diff.remove
background-color: $red
opacity: 0.7


[class*='language-'] code .diff.remove::before
[class*='language-'] code .diff.remove::before
content: '-'
color: $red


[class*='language-'] code .diff.add
[class*='language-'] code .diff.add
background-color: $secondary


[class*='language-'] code .diff.add::before
[class*='language-'] code .diff.add::before
content: '+'
color: $secondary


div[class*='language-'].line-numbers-mode
div[class*='language-'].line-numbers-mode
/*rtl:ignore*/
padding-left: 32px


.line-numbers-wrapper
.line-numbers-wrapper
position: absolute
top: 0
bottom: 0
Expand All @@ -181,7 +183,7 @@
transition: border-color 0.5s, color 0.5s


[class*='language-'] > button.copy
[class*='language-'] > button.copy
/*rtl:ignore*/
direction: ltr
position: absolute
Expand All @@ -201,18 +203,19 @@
transition: border-color 0.25s, background-color 0.25s, opacity 0.25s


[class*='language-'] > button.copy:focus
[class*='language-'] > button.copy:focus,
[class*='language-'] > button.copy:hover
opacity: 1


[class*='language-'] > button.copy.copied,
[class*='language-'] > button.copy:hover.copied
[class*='language-'] > button.copy.copied,
[class*='language-'] > button.copy:hover.copied
background-image: url("UiKit/assets/check.svg?url")




[class*='language-'] > span.lang
[class*='language-'] > span.lang
position: absolute
top: 2px
right: 8px
Expand All @@ -221,16 +224,16 @@
transition: color 0.4s, opacity 0.4s


[class*='language-']:hover > button.copy + span.lang,
[class*='language-'] > button.copy:focus + span.lang
[class*='language-']:hover > button.copy + span.lang,
[class*='language-'] > button.copy:focus + span.lang
opacity: 0


.vp-code-group
.vp-code-group
margin-top: 16px


.vp-code-group .tabs
.vp-code-group .tabs
position: relative
display: flex
margin-right: -24px
Expand All @@ -242,20 +245,20 @@
border-radius: 2px


@media (min-width: 640px)
.vp-code-group .tabs
@media (min-width: 640px)
.vp-code-group .tabs
margin-right: 0
margin-left: 0



.vp-code-group .tabs input
.vp-code-group .tabs input
position: fixed
opacity: 0
pointer-events: none


.vp-code-group .tabs label
.vp-code-group .tabs label
position: relative
display: inline-block
border-bottom: 1px solid transparent
Expand All @@ -268,28 +271,28 @@
transition: all 0.25s


.vp-code-group label:hover
.vp-code-group label:hover
color: $black


.vp-code-group input:checked + label
.vp-code-group input:checked + label
color: $black
background-color: $white
box-shadow: $box-shadow-small


.vp-code-group div[class*='language-'],
.vp-block
.vp-code-group div[class*='language-'],
.vp-block
display: none
margin-top: 0 !important
border-top-left-radius: 0 !important
border-top-right-radius: 0 !important


.vp-code-group div[class*='language-'].active,
.vp-block.active
.vp-code-group div[class*='language-'].active,
.vp-block.active
display: block


.vp-block
.vp-block
padding: 20px 24px
2 changes: 1 addition & 1 deletion src/styles/components/_link.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ h1, h2, h3, h4, h5, h6,


// SPACING
a + *:not(.is--no-margin)
a + *:not(.is--no-margin):not(br)
margin-top: 12px
.is--no-margin
a + *,
Expand Down

0 comments on commit 2943260

Please sign in to comment.