добавляю все изменения проекта на текущий момент
This commit is contained in:
vasya
@@ -0,0 +1,8 @@
|
||||
#popup-parent-container{
|
||||
padding: 10px;
|
||||
top: 150px;
|
||||
z-index: 901;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50px);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
@import url('./../variables.css');
|
||||
|
||||
/* #modal-window__background{
|
||||
position: fixed;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #6a6a6ab5;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
} */
|
||||
|
||||
.entity-hist-container{
|
||||
position: fixed;
|
||||
width: 50%;
|
||||
top: 10%;
|
||||
left: 25%;
|
||||
z-index: 100;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 15px 1px #9b9999;
|
||||
|
||||
&>.hist__header-block{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--color_graphite_main);
|
||||
min-height: 7%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
|
||||
&>.hist__header__buttons{
|
||||
|
||||
&>.header__buttons__close{
|
||||
transform: rotate(45deg);
|
||||
font-size: 2rem;
|
||||
color: var(--color_ruby_main);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.hist__content-block{
|
||||
overflow-y: scroll;
|
||||
padding: 10px;
|
||||
max-height: 500px;
|
||||
|
||||
&>.hist-container__date-block{
|
||||
display: flex;
|
||||
|
||||
&>.date-block__date{
|
||||
flex-basis: 15%;
|
||||
|
||||
&>div{
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
padding: 3px;
|
||||
background: var(--color_purple_main);
|
||||
border-radius: 5px 0 0 5px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&>.date-block__changes{
|
||||
flex-basis: 85%;
|
||||
border-left: 2px solid black;
|
||||
padding: 0 10px;
|
||||
|
||||
&>.changes__action-block{
|
||||
|
||||
& .action-block__action-name{
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
font-size: 1.2rem;
|
||||
/* border-bottom: 3px solid var(--color_purple_main); */
|
||||
background: color-mix(in srgb, var(--color_purple_main) 20%, transparent);
|
||||
box-shadow: 0px 2px 3px 0px #c0bdd3;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&>.changes__date-time-block{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 5px 0px 10px 0px;
|
||||
color: rgb(173 173 173);
|
||||
}
|
||||
|
||||
&>.changes__details{
|
||||
margin-bottom: 15px;
|
||||
|
||||
& .changes__details__el{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&>.changes__details__el__prop-name{
|
||||
flex-basis: 30%;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&>.changes__details__el__prop-val{
|
||||
flex-basis: 70%;
|
||||
background: #91919121;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
@import url('./../variables.css');
|
||||
|
||||
#form-valid-err-container{
|
||||
|
||||
background: red;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
|
||||
&.form-valid-err--hide{
|
||||
display: none;
|
||||
}
|
||||
&.form-valid-err--visible{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
@import url('./../variables.css');
|
||||
@import '@fortawesome/fontawesome-free/css/all.css';
|
||||
|
||||
/* Анимация таймера popup, по истечению которого он скроется */
|
||||
@keyframes popupTimer {
|
||||
from{
|
||||
width: 100%;
|
||||
}
|
||||
to {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.magic-popup-container{
|
||||
padding: 5px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
box-shadow: 0px 3px 4px 1px #918787;
|
||||
background: var(--color_graphite_main);
|
||||
width: 500px;
|
||||
transition: 0.3s;
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
|
||||
&.hide{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.show{
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
&.hidePopup{
|
||||
transform: translateY(10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&>.popup__icon-block{
|
||||
flex-basis: 10%;
|
||||
align-self: center;
|
||||
|
||||
&>i{
|
||||
font-size: 4rem;
|
||||
color: var(--color_purple_main);
|
||||
|
||||
&.fa-circle-check{
|
||||
color: var(--color_emerald_main);
|
||||
}
|
||||
&.fa-circle-xmark{
|
||||
color: var(--color_ruby_main);
|
||||
}
|
||||
&.fa-circle-exclamation{
|
||||
color: orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&>.popup__content-block{
|
||||
flex-basis: 90%;
|
||||
border-left: 2px solid white;
|
||||
|
||||
&>.popup__content__text-block{
|
||||
color: white;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
&>.popup__button-block{
|
||||
margin: 10px 0;
|
||||
|
||||
&>button{
|
||||
font-size: 1rem;
|
||||
margin: auto;
|
||||
opacity: 0.5;
|
||||
background: var(--color_purple_main);
|
||||
transition: 0.3s;
|
||||
|
||||
&:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup__timer-block__timer{
|
||||
|
||||
&.popup__timer-block__timer {
|
||||
height: 5px;
|
||||
margin: 0 5px;
|
||||
border-radius: 10px;
|
||||
|
||||
&.timerProgress{
|
||||
background: #63707a;
|
||||
animation: popupTimer;
|
||||
animation-duration: 3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,173 @@
|
||||
@import url('./../variables.css');
|
||||
|
||||
#preloader_container {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 900;
|
||||
backdrop-filter: blur(5px);
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&>#preloader{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: none;
|
||||
position: relative;
|
||||
top: 30%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
&>.circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
border: 10px solid transparent;
|
||||
}
|
||||
|
||||
&>#circle_one {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
border-top-width: 10px;
|
||||
left: 5%;
|
||||
top: 5%;
|
||||
animation: roll_one 4.5s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
|
||||
&.preloader-emerald-circle{
|
||||
border-top-color: var(--color_emerald_light);
|
||||
}
|
||||
&.preloader-ruby-circle{
|
||||
border-top-color: var(--color_ruby_main);
|
||||
}
|
||||
&.preloader-graphite-circle{
|
||||
border-top-color: var(--color_graphite_main);
|
||||
}
|
||||
}
|
||||
|
||||
&>#circle_two {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
left: 10%;
|
||||
top: 10%;
|
||||
border-right-width: 10px;
|
||||
animation: roll_two 2.5s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
|
||||
&.preloader-emerald-circle{
|
||||
border-right-color: var(--color_emerald_light);
|
||||
}
|
||||
&.preloader-ruby-circle{
|
||||
border-right-color: var(--color_ruby_main);
|
||||
}
|
||||
&.preloader-graphite-circle{
|
||||
border-right-color: var(--color_graphite_main);
|
||||
}
|
||||
}
|
||||
|
||||
&>#circle_three {
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
left: 15%;
|
||||
top: 15%;
|
||||
border-bottom-width: 10px;
|
||||
animation: roll_three 3s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
|
||||
&.preloader-emerald-circle{
|
||||
border-bottom-color: var(--color_emerald_light);
|
||||
}
|
||||
&.preloader-ruby-circle{
|
||||
border-bottom-color: var(--color_ruby_main);
|
||||
}
|
||||
&.preloader-graphite-circle{
|
||||
border-bottom-color: var(--color_graphite_main);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&>#preloader_text {
|
||||
width: 150%;
|
||||
left: -25%;
|
||||
font-size: 1.5rem;
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&>#logo {
|
||||
position: absolute;
|
||||
background: none;
|
||||
width: 40%;
|
||||
height: 40%;
|
||||
top: 25%;
|
||||
left: 25%;
|
||||
|
||||
&>.logo_square {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&>#left-top {
|
||||
width: 60%;
|
||||
height: 70%;
|
||||
top: 15%;
|
||||
left: 20%;
|
||||
border-left: 7px solid white;
|
||||
border-top: 7px solid white;
|
||||
border-top-left-radius: 45%;
|
||||
}
|
||||
|
||||
&>#right-bottom {
|
||||
width: 40%;
|
||||
height: 50%;
|
||||
top: 15%;
|
||||
left: 40%;
|
||||
border-right: 7px solid white;
|
||||
border-bottom: 7px solid white;
|
||||
border-bottom-right-radius: 45%;
|
||||
border-bottom-left-radius: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes roll_one {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes roll_two {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
@keyframes roll_three {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(720deg);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user