Students
/
ITRadio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Авто исправление scss с учетом кастомных правил

This commit is contained in:
Norbaev 2024-07-29 17:28:35 +05:00
parent f780f12e4a
commit 0aba41a808
11 changed files with 149 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
client/src/assets/css/mixins/text.scss
View File

@ -34,6 +34,15 @@
@define-mixin h1 { @define-mixin h1 {
@mixin __p; @mixin __p;
/* margin-top: 32px; */
margin-bottom: 1.5rem;
padding-bottom: 6px;
font-size: 100px;
font-weight: 500;
line-height: 1.2;
color: var(--color-white);
@mixin responsive-l { @mixin responsive-l {
font-size: 84px; font-size: 84px;
} }
@ -45,29 +54,11 @@
@mixin responsive-s { @mixin responsive-s {
font-size: 36px; font-size: 36px;
} }
/* margin-top: 32px; */
margin-bottom: 1.5rem;
padding-bottom: 6px;
font-size: 100px;
font-weight: 500;
line-height: 1.2;
color: var(--color-white);
} }
@define-mixin h2 { @define-mixin h2 {
@mixin __p; @mixin __p;
@mixin responsive-l {
font-size: 40px;
line-height: 1.1;
}
@mixin responsive-m {
font-size: 32px;
}
margin: 2.5rem 0; margin: 2.5rem 0;
padding-bottom: 6px; padding-bottom: 6px;
@ -113,6 +104,15 @@
color: var(--color-white); color: var(--color-white);
} }
} }
@mixin responsive-l {
font-size: 40px;
line-height: 1.1;
}
@mixin responsive-m {
font-size: 32px;
}
} }
@define-mixin h3 { @define-mixin h3 {

56
client/src/assets/css/module/app-footer.scss
View File

@ -9,11 +9,6 @@
} }
&__question { &__question {
@mixin responsive-xs {
flex-direction: column;
align-items: flex-start;
}
display: flex; display: flex;
gap: 10px; gap: 10px;
align-items: center; align-items: center;
@ -22,6 +17,11 @@
&-button { &-button {
margin-left: auto; margin-left: auto;
} }
@mixin responsive-xs {
flex-direction: column;
align-items: flex-start;
}
} }
&__bottom { &__bottom {
@ -31,20 +31,6 @@
} }
&__menu { &__menu {
@mixin responsive-m {
grid-row-gap: 10px;
grid-template-columns: min-content min-content min-content;
grid-template-rows: min-content;
width: 100%;
margin-bottom: var(--space-between-block);
}
@mixin responsive-s {
display: flex;
flex-wrap: wrap;
}
display: grid; display: grid;
grid-gap: var(--space-between-block) var(--space-between-sections); grid-gap: var(--space-between-block) var(--space-between-sections);
grid-template-columns: var(--space-between-sections) var(--space-between-sections); grid-template-columns: var(--space-between-sections) var(--space-between-sections);
@ -59,29 +45,43 @@
&-link { &-link {
font-size: 1.2rem; font-size: 1.2rem;
} }
@mixin responsive-m {
grid-row-gap: 10px;
grid-template-columns: min-content min-content min-content;
grid-template-rows: min-content;
width: 100%;
margin-bottom: var(--space-between-block);
}
@mixin responsive-s {
display: flex;
flex-wrap: wrap;
}
} }
&__social { &__social {
display: flex;
flex-wrap: wrap;
gap: var(--space-between-block);
@mixin responsive-m { @mixin responsive-m {
grid-row-gap: 10px; grid-row-gap: 10px;
margin-bottom: var(--space-between-block); margin-bottom: var(--space-between-block);
} }
display: flex;
flex-wrap: wrap;
gap: var(--space-between-block);
} }
&__connection { &__connection {
@mixin responsive-m {
align-items: flex-start;
width: 100%;
}
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
align-items: flex-end; align-items: flex-end;
justify-content: space-between; justify-content: space-between;
@mixin responsive-m {
align-items: flex-start;
width: 100%;
}
} }
} }

8
client/src/assets/css/module/app.scss
View File

@ -29,15 +29,15 @@
} }
&__content { &__content {
@mixin responsive-l {
padding: 0 20px;
}
max-width: var(--container); max-width: var(--container);
margin: 0 auto; margin: 0 auto;
padding: 0 50px; padding: 0 50px;
.m--indentation { .m--indentation {
} }
@mixin responsive-l {
padding: 0 20px;
}
} }
} }

20
client/src/assets/css/module/blog.scss
View File

@ -15,29 +15,24 @@
} }
&-btn { &-btn {
margin-left: auto;
@mixin responsive-xxs { @mixin responsive-xxs {
width: 100%; width: 100%;
} }
margin-left: auto;
} }
} }
&__content { &__content {
display: flex;
gap: 80px;
@mixin responsive-m { @mixin responsive-m {
flex-direction: column; flex-direction: column;
} }
display: flex;
gap: 80px;
} }
&__cover { &__cover {
@mixin responsive-m {
height: calc(var(--base-content-size) / 2);
max-height: none;
}
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -46,6 +41,11 @@
background: url('./assets/img/bg/blog.svg') no-repeat center; background: url('./assets/img/bg/blog.svg') no-repeat center;
background-size: cover; background-size: cover;
@mixin responsive-m {
height: calc(var(--base-content-size) / 2);
max-height: none;
}
} }
&__list { &__list {

12
client/src/assets/css/module/fiald.scss
View File

@ -63,18 +63,10 @@
font-size: 1rem; font-size: 1rem;
color: var(--color-white-opacity); color: var(--color-white-opacity);
&:hover {
cursor: url('./assets/img/icon/cursor.svg'), auto;
}
&::before { &::before {
cursor: pointer; cursor: pointer;
content: ''; content: '';
user-select: none; user-select: none;
user-select: none;
user-select: none;
user-select: none;
user-select: none;
position: absolute; position: absolute;
left: 0; left: 0;
@ -110,6 +102,10 @@
transition: all 0.3s ease; transition: all 0.3s ease;
} }
&:hover {
cursor: url('./assets/img/icon/cursor.svg'), auto;
}
} }
&-input { &-input {

95
client/src/assets/css/module/home.scss
View File

@ -65,10 +65,6 @@
} }
&__subtitle { &__subtitle {
@mixin responsive-l {
padding: 0 20px;
}
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
@ -106,6 +102,10 @@
span { span {
font-weight: 700; font-weight: 700;
} }
@mixin responsive-l {
padding: 0 20px;
}
} }
&__title { &__title {
@ -123,7 +123,6 @@
var(--color-white) 106.11% var(--color-white) 106.11%
); );
background-clip: text; background-clip: text;
background-clip: text;
span { span {
color: var(--color-black); color: var(--color-black);
@ -148,31 +147,22 @@
} }
&__description { &__description {
@mixin responsive-m {
gap: var(--space-between-block);
}
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
margin-top: calc(var(--space-between-sections) / 2); margin-top: calc(var(--space-between-sections) / 2);
margin-bottom: var(--space-between-sections); margin-bottom: var(--space-between-sections);
@mixin responsive-m {
gap: var(--space-between-block);
}
} }
&__info { &__info {
@mixin responsive-m {
width: 100%;
}
width: 60%; width: 60%;
&--item { &--item {
@mixin responsive-s {
flex-direction: column;
gap: 10px;
}
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -185,13 +175,6 @@
align-items: end; align-items: end;
&::before { &::before {
@mixin responsive-s {
width: 80px;
height: 80px;
margin-right: auto;
background-size: contain;
}
content: ''; content: '';
display: block; display: block;
@ -200,10 +183,21 @@
height: 130px; height: 130px;
background: url('./assets/img/icon/circleGradient.svg') no-repeat center; background: url('./assets/img/icon/circleGradient.svg') no-repeat center;
@mixin responsive-s {
width: 80px;
height: 80px;
margin-right: auto;
background-size: contain;
}
} }
} }
span { span {
width: 57%;
font-weight: 400;
color: var(--color-white);
@mixin responsive-m { @mixin responsive-m {
width: 75%; width: 75%;
} }
@ -211,35 +205,23 @@
@mixin responsive-s { @mixin responsive-s {
width: 100%; width: 100%;
} }
width: 57%;
font-weight: 400;
color: var(--color-white);
} }
@mixin responsive-s {
flex-direction: column;
gap: 10px;
}
}
@mixin responsive-m {
width: 100%;
} }
} }
&__content { &__content {
@mixin responsive-m {
display: flex;
flex-wrap: wrap;
gap: calc(var(--space-between-block) / 2);
align-items: flex-start;
max-width: none;
}
max-width: 360px; max-width: 360px;
&--item { &--item {
@mixin responsive-m {
width: calc((100% - var(--space-between-block)) / 3);
}
@mixin responsive-s {
width: 100%;
}
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -283,6 +265,23 @@
background-image: var(--linear-gradient); background-image: var(--linear-gradient);
background-clip: text; background-clip: text;
} }
@mixin responsive-m {
width: calc((100% - var(--space-between-block)) / 3);
}
@mixin responsive-s {
width: 100%;
}
}
@mixin responsive-m {
display: flex;
flex-wrap: wrap;
gap: calc(var(--space-between-block) / 2);
align-items: flex-start;
max-width: none;
} }
} }
@ -318,11 +317,11 @@
} }
&--description { &--description {
max-width: 45%;
@mixin responsive-xs { @mixin responsive-xs {
max-width: 100%; max-width: 100%;
} }
max-width: 45%;
} }
&--btns { &--btns {

2
client/src/assets/css/module/pagination.scss
View File

@ -30,10 +30,8 @@
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
margin: 5px; margin: 5px;
} }

16
client/src/assets/css/module/rubric.scss
View File

@ -14,10 +14,6 @@
} }
&__description{ &__description{
@mixin responsive-xxs {
max-width: none;
}
max-width: 60%; max-width: 60%;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
@ -26,6 +22,10 @@
max-width: 50%; max-width: 50%;
margin-bottom: 0; margin-bottom: 0;
} }
@mixin responsive-xxs {
max-width: none;
}
} }
&__link{ &__link{
@ -64,10 +64,6 @@
padding: 20px 0; padding: 20px 0;
&:hover{
cursor: url("./assets/img/icon/cursor.svg"), auto;
}
&::after{ &::after{
content: ''; content: '';
@ -80,6 +76,10 @@
background: #000; background: #000;
background: var(--linear-gradient); background: var(--linear-gradient);
} }
&:hover{
cursor: url("./assets/img/icon/cursor.svg"), auto;
}
} }
&__title{ &__title{

8
client/src/assets/css/module/song.scss
View File

@ -10,10 +10,6 @@
} }
&-item { &-item {
@mixin responsive-m {
width: 100%;
}
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -215,6 +211,10 @@
align-items: center; align-items: center;
margin-left: auto; margin-left: auto;
} }
@mixin responsive-m {
width: 100%;
}
} }
} }

4
client/src/assets/css/module/tabs.scss
View File

@ -4,14 +4,14 @@
margin-bottom: var(--space-between-block); margin-bottom: var(--space-between-block);
&.m--btns{ &.m--btns{
gap: 10px;
@mixin responsive-xs { @mixin responsive-xs {
.button{ .button{
width: 100%; width: 100%;
} }
} }
gap: 10px;
} }
&__item { &__item {

48
client/src/assets/css/module/team.scss
View File

@ -1,8 +1,4 @@
.team { .team {
@mixin responsive-xl {
padding: 0 0 0 20px;
}
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -11,6 +7,13 @@
margin-left: auto; margin-left: auto;
&__header { &__header {
display: flex;
max-width: var(--container);
margin-right: auto;
margin-bottom: var(--space-between-block);
padding: 0 50px;
@mixin responsive-xl { @mixin responsive-xl {
column-gap: var(--space-between-block); column-gap: var(--space-between-block);
padding: 0 40px 0 0; padding: 0 40px 0 0;
@ -19,13 +22,6 @@
@mixin responsive-s { @mixin responsive-s {
flex-wrap: wrap; flex-wrap: wrap;
} }
display: flex;
max-width: var(--container);
margin-right: auto;
margin-bottom: var(--space-between-block);
padding: 0 50px;
} }
&__title { &__title {
@ -49,14 +45,6 @@
} }
&__tools { &__tools {
@mixin responsive-xl {
padding: 0 80px 0 35px;
}
@mixin responsive-l {
padding: 0 40px 0 0;
}
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
row-gap: 1.5rem; row-gap: 1.5rem;
@ -75,13 +63,17 @@
width: 100%; width: 100%;
} }
} }
@mixin responsive-xl {
padding: 0 80px 0 35px;
}
@mixin responsive-l {
padding: 0 40px 0 0;
}
} }
&__progress { &__progress {
@mixin responsive-s {
max-width: none;
}
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -104,6 +96,10 @@
background: var(--color-white); background: var(--color-white);
} }
@mixin responsive-s {
max-width: none;
}
} }
&__cover { &__cover {
@ -127,6 +123,8 @@
} }
&__description { &__description {
max-width: 820px;
@mixin responsive-xl { @mixin responsive-xl {
max-width: calc(100% - var(--space-between-block)); max-width: calc(100% - var(--space-between-block));
} }
@ -135,7 +133,9 @@
width: 100%; width: 100%;
max-width: none; max-width: none;
} }
}
max-width: 820px; @mixin responsive-xl {
padding: 0 0 0 20px;
} }
} }