mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-15 11:40:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refector sass

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-19 10:28:41 +05:30
parent 85c3240b54
commit ce9f140ddf
46 changed files with 407 additions and 703 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/atoms/avatar/Avatar.jsx
View file

@ -26,7 +26,7 @@ function Avatar({
: (
<span
style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
className={`avatar__border${iconSrc !== null ? ' avatar__bordered' : ''} inline-flex--center`}
className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
>
{
iconSrc !== null

12
src/app/atoms/avatar/Avatar.scss
View file

@ -1,3 +1,5 @@
@use '../../partials/flex';
.avatar-container {
display: inline-flex;
width: 42px;
@ -31,11 +33,9 @@
border-radius: inherit;
}
.avatar__bordered {
box-shadow: var(--bs-surface-border);
}
.avatar__border {
@extend .cp-fx__row--c-c;
position: absolute;
top: 0;
left: 0;
@ -47,5 +47,9 @@
.text {
color: white;
}
&--active {
@extend .avatar__border;
box-shadow: var(--bs-surface-border);
}
}
}

22
src/app/atoms/button/Button.scss
View file

@ -1,4 +1,5 @@
@use 'state';
@use '../../partials/dir';
.btn-surface,
.btn-primary,
@ -18,27 +19,10 @@
@include state.disabled;
&--icon {
padding: {
left: var(--sp-tight);
right: var(--sp-loose);
}
[dir=rtl] & {
padding: {
left: var(--sp-loose);
right: var(--sp-tight);
}
}
@include dir.side(padding, var(--sp-tight), var(--sp-loose));
.ic-raw {
margin-right: var(--sp-extra-tight);
[dir=rtl] & {
margin: {
right: 0;
left: var(--sp-extra-tight);
}
}
@include dir.side(margin, 0, var(--sp-extra-tight));
}
}
}

14
src/app/atoms/button/Toggle.scss
View file

@ -1,3 +1,5 @@
@use '../../partials/dir';
.toggle {
width: 44px;
height: 24px;
@ -27,13 +29,13 @@
background-color: var(--bg-positive);
&::before {
background-color: white;
transform: translateX(calc(125%));
opacity: 1;
--ltr: translateX(calc(125%));
--rtl: translateX(calc(-125%));
@include dir.prop(transform, var(--ltr), var(--rtl));
[dir=rtl] & {
transform: translateX(calc(-125%));
}
transform: translateX(calc(125%));
background-color: white;
opacity: 1;
}
}
}

8
src/app/atoms/chip/Chip.scss
View file

@ -1,3 +1,5 @@
@use '../../partials/dir';
.chip {
padding: var(--sp-ultra-tight) var(--sp-extra-tight);
@ -24,10 +26,6 @@
& > .ic-raw {
width: 16px;
height: 16px;
margin-right: var(--sp-ultra-tight);
[dir=rtl] & {
margin-right: 0;
margin-left: var(--sp-ultra-tight);
}
@include dir.side(margin, 0, var(--sp-ultra-tight));
}
}

23
src/app/atoms/context-menu/ContextMenu.scss
View file

@ -1,3 +1,6 @@
@use '../../partials/text';
@use '../../partials/dir';
.context-menu {
background-color: var(--bg-surface);
box-shadow: var(--bs-popup);
@ -29,10 +32,8 @@
border-bottom: 1px solid var(--bg-surface-border);
.text {
@extend .cp-txt__ellipsis;
color: var(--tc-surface-low);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:not(:first-child) {
@ -50,17 +51,11 @@
white-space: nowrap;
.text:first-child {
margin: {
left: calc(var(--ic-small) + var(--sp-ultra-tight));
right: var(--sp-extra-tight);
}
[dir=rtl] & {
margin: {
left: var(--sp-extra-tight);
right: calc(var(--ic-small) + var(--sp-ultra-tight));
}
}
@include dir.side(
margin,
calc(var(--ic-small) + var(--sp-ultra-tight)),
var(--sp-extra-tight)
);
}
}
.btn-surface:focus {

42
src/app/atoms/header/Header.scss
View file

@ -1,63 +1,43 @@
@use '../../partials/text';
@use '../../partials/dir';
.header {
padding: {
left: var(--sp-normal);
right: var(--sp-extra-tight);
}
@include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
width: 100%;
height: var(--header-height);
border-bottom: 1px solid var(--bg-surface-border);
display: flex;
align-items: center;
[dir=rtl] & {
padding: {
left: var(--sp-extra-tight);
right: var(--sp-normal);
}
}
&__title-wrapper {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
margin: 0 var(--sp-tight);
&:first-child {
margin-left: 0;
[dir=rtl] & {
margin-right: 0;
}
@include dir.side(margin, 0, var(--sp-tight));
}
& > .text:first-child {
@extend .cp-txt__ellipsis;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
& > .text-b3{
flex: 1;
min-width: 0;
margin-top: var(--sp-ultra-tight);
margin-left: var(--sp-tight);
padding-left: var(--sp-tight);
border-left: 1px solid var(--bg-surface-border);
@include dir.side(margin, var(--sp-tight), 0);
@include dir.side(padding, var(--sp-tight), 0);
@include dir.side(border, 1px solid var(--bg-surface-border), none);
max-height: calc(2 * var(--lh-b3));
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
[dir=rtl] & {
margin-left: 0;
padding-left: 0;
border-left: none;
margin-right: var(--sp-tight);
padding-right: var(--sp-tight);
border-right: 1px solid var(--bg-surface-border);
}
}
}
}

8
src/app/atoms/segmented-controls/SegmentedControls.scss
View file

@ -1,4 +1,5 @@
@use '../button/state';
@use '../../partials/dir';
.segmented-controls {
background-color: var(--bg-surface-low);
@ -20,12 +21,7 @@
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid var(--bg-surface-border);
[dir=rtl] & {
border-left: none;
border-right: 1px solid var(--bg-surface-border);
}
@include dir.side(border, 1px solid var(--bg-surface-border), none);
& .text:nth-child(2) {
margin: 0 var(--sp-extra-tight);