Фронтенд для сервиса (#5)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz>
Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/tnsu-approval-route/pulls/5

frontend/src/webparts/approvalAdmin/components/ui/PageChrome.module.scss

@@ -0,0 +1,88 @@
+@import '../../../../styles/design-tokens';
+
+.bread {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12px;
+  color: $gray-400;
+  margin-bottom: 14px;
+  letter-spacing: .2px;
+  flex-wrap: wrap;
+}
+
+.breadLink {
+  color: $navy-700;
+  text-decoration: none;
+  background: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  &:hover { color: $gold-600; }
+}
+
+.sep { color: $gold-400; font-size: 10px; }
+
+.ph {
+  @include page-header;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: $sh-2;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+  gap: 14px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: -60px;
+    top: -60px;
+    width: 220px;
+    height: 220px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(212,160,30,.14), transparent 65%);
+  }
+}
+
+.phLeft { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
+
+.phIcon {
+  width: 46px;
+  height: 46px;
+  border-radius: $r-md;
+  background: rgba(212,160,30,.14);
+  border: 1px solid rgba(212,160,30,.3);
+  color: $gold-300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.phSub {
+  font-size: 10.5px;
+  color: rgba(255,255,255,.55);
+  text-transform: uppercase;
+  letter-spacing: 1.8px;
+  font-weight: 500;
+}
+
+.phTitle {
+  font-family: $font-serif;
+  font-size: $fs-page-title;
+  font-weight: 600;
+  color: #fff;
+  margin-top: 3px;
+  letter-spacing: .2px;
+}
+
+.phRight {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+  position: relative;
+  z-index: 1;
+}