большая разработка аутентификации

mirzaev/site/account/system/public/css/icons/arrow_right.css

@@ -2,9 +2,9 @@
  box-sizing: border-box;
  position: relative;
  display: block;
- transform: scale(var(--ggs,1));
  width: 22px;
- height: 22px
+ --height: 22px;
+ height: var(--height);
 }
 
 i.arrow.right::after,
@@ -13,7 +13,7 @@ i.arrow.right::before {
  display: block;
  box-sizing: border-box;
  position: absolute;
- right: 3px
+ right: 3px;
 }
 
 i.arrow.right::after {
@@ -22,12 +22,12 @@ i.arrow.right::after {
  border-top: 2px solid;
  border-right: 2px solid;
  transform: rotate(45deg);
- bottom: 7px
+ bottom: 7px;
 }
 
 i.arrow.right::before {
  width: 16px;
  height: 2px;
  bottom: 10px;
- background: currentColor
+ background: currentColor;
 } 

mirzaev/site/account/system/public/css/icons/keyhole.css

@@ -0,0 +1,48 @@
+i.keyhole,
+i.keyhole::after,
+i.keyhole::before {
+ display: block;
+ box-sizing: border-box;
+ border-radius: 20px;
+}
+
+i.keyhole {
+ --width: 20px;
+ --height: 20px;
+ position: relative;
+ width: 20px;
+ height: 20px;
+ border: 2px solid;
+}
+
+i.keyhole::after,
+i.keyhole::before {
+ position: absolute;
+ content: '';
+}
+
+i.keyhole::before {
+ left: 5px;
+ top: 3px;
+ width: 6px;
+ height: 6px;
+ border: 2px solid;
+}
+
+i.keyhole::after {
+  left: 7px;
+  bottom: 3px; 
+  width: 2px;
+  height: 5px;
+  background: currentColor;
+} 
+
+label>i.keyhole:first-child {
+  left: 7px;
+  scale: .9;
+  border: 2.1px solid;
+}
+
+i.keyhole+input {
+  padding-left: 34px;
+}

mirzaev/site/account/system/public/css/icons/lock.css

@@ -0,0 +1,28 @@
+i.lock {
+ --width: 12px;
+ --height: 11px;
+ position: relative;
+ margin-top: -12px;
+ width: 12px;
+ height: 11px;
+ display: block;
+ box-sizing: border-box;
+ border: 2px solid;
+ border-top-right-radius: 50%;
+ border-top-left-radius: 50%;
+ border-bottom: transparent;
+}
+
+i.lock::after {
+ left: -4px;
+ top: 9px;
+ position: absolute;
+ width: 16px;
+ height: 10px;
+ display: block;
+ box-sizing: border-box; 
+ content: '';
+ box-shadow: 0 0 0 2px;
+ border-radius: 2px;
+ border: 2px solid transparent;
+}

mirzaev/site/account/system/public/css/icons/mail.css

@@ -0,0 +1,30 @@
+i.mail,
+i.mail::after {
+ --width: 18px;
+ --height: 14px;
+ height: 14px;
+ display: block;
+ box-sizing: border-box;
+ border: 2px solid;
+}
+
+i.mail {
+ position: relative;
+ width: 18px;
+ overflow: hidden;
+ border-radius: 2px;
+}
+
+i.mail::after {
+ position: absolute;
+ left: 0;
+ bottom: 3px;
+ width: 14px;
+ transform: rotate(-45deg);
+ content: "";
+ border-radius: 3px;
+} 
+
+i.mail+input {
+  padding-left: 36px;
+}

mirzaev/site/account/system/public/css/icons/nametag.css

@@ -0,0 +1,34 @@
+i.nametag {
+ --width: 6px;
+ --height: 6px;
+ box-sizing: border-box;
+ position: relative;
+ width: 6px;
+ height: 6px;
+ display: block;
+ border: 2px solid;
+}
+
+i.nametag::before {
+ left: -5px;
+ top: -5px;
+ position: absolute;
+ width: 12px;
+ height: 12px;
+ display: block;
+ box-sizing: border-box;
+ content: '';
+ box-shadow:
+   -5px -5px 0 -3px,
+   5px 5px 0 -3px,
+   5px -5px 0 -3px,
+   -5px 5px 0 -3px;
+} 
+
+label>i.nametag:first-child {
+  left: 13px;
+}
+
+i.nametag+input {
+  padding-left: 32px;
+}

mirzaev/site/account/system/public/css/icons/user_add.css

@@ -0,0 +1,53 @@
+i.user.add {
+  --width: 20px;
+  --height: 18px;
+  width: 20px;
+ height: 18px;
+ display: block;
+ box-sizing: border-box;
+ background:
+ linear-gradient(
+ to left,
+ currentColor 8px,
+ transparent 0)
+ no-repeat 14px 6px/6px 2px,
+ linear-gradient(
+ to left,
+ currentColor 8px,
+ transparent 0)
+ no-repeat 16px 4px/2px 6px;
+}
+
+i.user.add::after,
+i.user.add::before {
+ content: '';
+ position: absolute;
+ display: block;
+ box-sizing: border-box;
+ border: 2px solid
+}
+
+i.user.add::before {
+ left: 2px;
+ top: 0;
+ width: 8px;
+ height: 8px;
+ border-radius: 30px;
+}
+
+i.user.add::after {
+ top: 9px;
+ width: 12px;
+ height: 9px;
+ border-bottom: 0;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+}
+
+label>i.user.add:first-child {
+  left: 9px;
+}
+
+i.user.add+input {
+  padding-left: 37px;
+}