Create variable for --common-transition

[Woolfs1423]

Issue Description

Background:

In our project, there is a transition property that repeats multiple times. Instead of writing the same value a lot of times, I suggest creating a CSS variable and replacing every transition in the project with it.

Proposed Solution:

Create a CSS variable called --common-transition and use it in every CSS file where we need a transition.

Quick Instruction for Working on the Issue

‼️ Before checking out to a new branch, ensure you have the latest updates from the main by running git pull command.

• Create a new branch called refactor-common-transition.
• Now we need to create a root folder in the blocks directory.
• In this folder you will need to create a file root.css, in which variables will be written as follows:

  :root {
  --common-transition: all .5s ease;
  }

• After creating the file root.css, make sure that it is imported into all pages of our project in the corresponding files which are placed in the folder pages.
• Now in the necessary CSS files, for example, instead of transition: all .7s ease;, it is necessary to replace transition: var(--common-transition);.
• Open a pull request: reference the specific issue in your PR description using the following format: This pull request resolves [#issue_number](link_to_the_issue). Replace issue_number with the actual issue number and link_to_the_issue with the link to the respective issue. For example:

  This pull request resolves [#123](https://github.com/username/repository/issues/123)

[naumch1k]

@Woolfs1423 You did an outstanding job describing this issue 🔥🔥🔥

I do have a single suggestion to add: since we have multiple pages, we should check if any elements on components.html use transitions. If they do, we should also recommend importing our root.css into pages/components.css and replacing all transition occurrences with a newly created CSS variable for those elements on components.html 😊

[Woolfs1423]

@naumch1k , thank you for pointing that out, and I've added it to the description.

[MarPostovik]

@Woolfs1423 Since we now also have a page form.html, I think you should also recommend importing root.css into pages/form.css

[naumch1k]

@MarPostovik @Woolfs1423 Should we just say that root.css needs to be imported on all pages? We'll soon add more variables, like colors, common paddings, typography, etc., which will be used on every page..

[Woolfs1423]

@naumch1k Can you please tell me if that's clear? After creating the file, the path to it should be written to all the pages in the pages folder.

[MarPostovik]

@Woolfs1423 I think it's better to formulate it like this:

After creating the file root.css, make sure that it is imported into all pages of our project in the corresponding files which are placed in the folder pages.

But let's wait for the response of Irina. @naumch1k What do you think about it?

[naumch1k]

@MarPostovik Love it ❤️

[wwily]

.take

[github-actions[bot]]

@wwily 👋 Thanks for picking up this issue! 🙌 Feel free to reach out if you need any help or have questions!