@ieeesa-npm/shared-styles 0.4.3 → 0.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/assets/images/sprites/sprites.svg +24 -23
  2. package/package.json +1 -1
  3. package/styles/mixins.scss +17 -0
  4. package/styles/styles.scss +1 -1
  5. package/styles/variables.scss +23 -13
  6. package/styles/dark-theme.scss +0 -189
  7. package/styles/lighter-theme.scss +0 -189
package/assets/images/sprites/sprites.svg CHANGED
@@ -40,13 +40,11 @@
40
40
  <path fill="#525252" style="fill: var(--color1, #525252)" d="M9.245 15.689v-1.867h9.956v1.867h-9.956zM9.245 10.711v-1.867h9.956v1.867h-9.956zM6.134 18.8h9.956c0.548 0 1.059 0.124 1.531 0.373s0.875 0.581 1.207 0.996l3.484 4.542v-19.289h-16.178v13.378zM6.134 26.578h15.244l-4.013-5.258c-0.157-0.205-0.346-0.365-0.569-0.48s-0.458-0.173-0.707-0.173h-9.956v5.911zM22.312 28.444h-16.178c-0.498 0-0.933-0.187-1.307-0.56s-0.56-0.809-0.56-1.307v-21.156c0-0.498 0.187-0.933 0.56-1.307s0.809-0.56 1.307-0.56h16.178c0.498 0 0.933 0.187 1.307 0.56s0.56 0.809 0.56 1.307v21.156c0 0.498-0.187 0.933-0.56 1.307s-0.809 0.56-1.307 0.56z">
41
41
  </path>
42
42
  </symbol>
43
- <symbol id="icon-expand-collapse-minus" viewBox="0 0 32 32">
44
- <path fill="#00629b" style="fill: var(--color1, #00629b)" d="M9.333 16.9h13.333v-2h-13.333v2zM16 29.333c-1.822 0-3.544-0.35-5.167-1.050s-3.039-1.656-4.25-2.867c-1.211-1.211-2.167-2.628-2.867-4.25s-1.050-3.344-1.050-5.167c0-1.844 0.35-3.578 1.050-5.2s1.656-3.033 2.867-4.233c1.211-1.2 2.628-2.15 4.25-2.85s3.344-1.050 5.167-1.050c1.844 0 3.578 0.35 5.2 1.050s3.033 1.65 4.233 2.85c1.2 1.2 2.15 2.611 2.85 4.233s1.050 3.356 1.050 5.2c0 1.822-0.35 3.544-1.050 5.167s-1.65 3.039-2.85 4.25c-1.2 1.211-2.611 2.167-4.233 2.867s-3.356 1.050-5.2 1.050zM16 27.333c3.156 0 5.833-1.105 8.033-3.317s3.3-4.883 3.3-8.017c0-3.156-1.1-5.833-3.3-8.033s-4.878-3.3-8.033-3.3c-3.133 0-5.806 1.1-8.017 3.3s-3.317 4.878-3.317 8.033c0 3.133 1.106 5.806 3.317 8.017s4.883 3.317 8.017 3.317z">
45
- </path>
43
+ <symbol id="icon-expand-collapse-minus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
44
+ <path d="M7 12.675H17V11.175H7V12.675ZM12 22C10.6333 22 9.34167 21.7375 8.125 21.2125C6.90833 20.6875 5.84583 19.9708 4.9375 19.0625C4.02917 18.1542 3.3125 17.0917 2.7875 15.875C2.2625 14.6583 2 13.3667 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.02917 5.825 4.9375 4.925C5.84583 4.025 6.90833 3.3125 8.125 2.7875C9.34167 2.2625 10.6333 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3667 21.7375 14.6583 21.2125 15.875C20.6875 17.0917 19.975 18.1542 19.075 19.0625C18.175 19.9708 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="#00629B"/>
46
45
  </symbol>
47
- <symbol id="icon-expand-collapse-plus" viewBox="0 0 32 32">
48
- <path fill="#00629b" style="fill: var(--color1, #00629b)" d="M15.1 22.667h2v-5.533h5.567v-2h-5.567v-5.8h-2v5.8h-5.767v2h5.767v5.533zM16.009 29.333c-1.839 0-3.566-0.35-5.183-1.050s-3.031-1.656-4.242-2.867-2.167-2.626-2.867-4.245c-0.7-1.619-1.050-3.348-1.050-5.189s0.35-3.57 1.050-5.189 1.656-3.028 2.867-4.228c1.211-1.2 2.626-2.15 4.245-2.85s3.348-1.050 5.189-1.050c1.84 0 3.57 0.35 5.189 1.050s3.028 1.65 4.228 2.85c1.2 1.2 2.15 2.611 2.85 4.233s1.050 3.353 1.050 5.191c0 1.839-0.35 3.566-1.050 5.183s-1.65 3.029-2.85 4.236c-1.2 1.207-2.611 2.163-4.233 2.867s-3.353 1.056-5.191 1.056zM16.017 27.333c3.144 0 5.817-1.105 8.017-3.317s3.3-4.889 3.3-8.033-1.098-5.817-3.294-8.017c-2.196-2.2-4.876-3.3-8.040-3.3-3.133 0-5.806 1.098-8.017 3.294s-3.317 4.876-3.317 8.040c0 3.133 1.106 5.806 3.317 8.017s4.889 3.317 8.033 3.317z">
49
- </path>
46
+ <symbol id="icon-expand-collapse-plus" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
47
+ <path d="M11.325 17H12.825V12.85H17V11.35H12.825V7H11.325V11.35H7V12.85H11.325V17ZM12.0066 22C10.6278 22 9.33192 21.7375 8.11915 21.2125C6.90638 20.6875 5.84583 19.9708 4.9375 19.0625C4.02917 18.1542 3.3125 17.093 2.7875 15.879C2.2625 14.665 2 13.3678 2 11.9875C2 10.6072 2.2625 9.31003 2.7875 8.09602C3.3125 6.88201 4.02917 5.825 4.9375 4.925C5.84583 4.025 6.90701 3.3125 8.12103 2.7875C9.33503 2.2625 10.6322 2 12.0125 2C13.3928 2 14.69 2.2625 15.904 2.7875C17.118 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6145 22 11.9934C22 13.3723 21.7375 14.6681 21.2125 15.8809C20.6875 17.0936 19.975 18.1526 19.075 19.0579C18.175 19.9632 17.1167 20.6798 15.9 21.2079C14.6833 21.736 13.3855 22 12.0066 22ZM12.0125 20.5C14.3708 20.5 16.375 19.6708 18.025 18.0125C19.675 16.3542 20.5 14.3458 20.5 11.9875C20.5 9.62917 19.6766 7.625 18.0297 5.975C16.3828 4.325 14.3729 3.5 12 3.5C9.65 3.5 7.64583 4.32343 5.9875 5.9703C4.32917 7.61718 3.5 9.62708 3.5 12C3.5 14.35 4.32917 16.3542 5.9875 18.0125C7.64583 19.6708 9.65417 20.5 12.0125 20.5Z" fill="#00629B"/>
50
48
  </symbol>
51
49
  <symbol id="icon-create-group" viewBox="0 0 32 32">
52
50
  <path fill="#fffbfe" style="fill: var(--color1, #fffbfe)" d="M5.818 0.727h20.364c2.41 0 4.364 1.954 4.364 4.364v20.364c0 2.41-1.954 4.364-4.364 4.364h-20.364c-2.41 0-4.364-1.954-4.364-4.364v-20.364c0-2.41 1.954-4.364 4.364-4.364z">
@@ -58,13 +56,8 @@
58
56
  <path fill="#00629b" style="fill: var(--color2, #00629b)" d="M20.559 10.182v-2.182h-1.455v2.182h-2.182v1.455h2.182v2.182h1.455v-2.182h2.182v-1.455h-2.182z">
59
57
  </path>
60
58
  </symbol>
61
- <symbol id="icon-edit-group" viewBox="0 0 32 32">
62
- <path fill="#fffbfe" style="fill: var(--color1, #fffbfe)" d="M5.818 0.727h20.364c2.41 0 4.364 1.954 4.364 4.364v20.364c0 2.41-1.954 4.364-4.364 4.364h-20.364c-2.41 0-4.364-1.954-4.364-4.364v-20.364c0-2.41 1.954-4.364 4.364-4.364z">
63
- </path>
64
- <path fill="#00629b" style="fill: var(--color2, #00629b)" opacity="0.11" d="M5.818 0.727h20.364c2.41 0 4.364 1.954 4.364 4.364v20.364c0 2.41-1.954 4.364-4.364 4.364h-20.364c-2.41 0-4.364-1.954-4.364-4.364v-20.364c0-2.41 1.954-4.364 4.364-4.364z">
65
- </path>
66
- <path fill="#00629b" style="fill: var(--color2, #00629b)" d="M21.135 9.156l0.982 0.982c0.575 0.567 0.575 1.491 0 2.058l-9.622 9.622h-3.040v-3.040l9.622-9.622c0.567-0.567 1.491-0.567 2.058 0zM10.909 20.364l1.025 0.044 7.142-7.149-1.025-1.025-7.142 7.142v0.989z">
67
- </path>
59
+ <symbol id="icon-edit-group" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
60
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M16.0576 0.58793L17.4076 1.93793C18.1976 2.71793 18.1976 3.98793 17.4076 4.76793L4.17756 17.9979H-0.00244141V13.8179L10.3976 3.40793L13.2276 0.58793C14.0076 -0.19207 15.2776 -0.19207 16.0576 0.58793ZM1.99756 15.9979L3.40756 16.0579L13.2276 6.22793L11.8176 4.81793L1.99756 14.6379V15.9979Z" fill="#00629B"/>
68
61
  </symbol>
69
62
  <symbol id="icon-roster" viewBox="0 0 32 32">
70
63
  <path fill="#fffbfe" style="fill: var(--color1, #fffbfe)" d="M5.818 0.727h20.364c2.41 0 4.364 1.954 4.364 4.364v20.364c0 2.41-1.954 4.364-4.364 4.364h-20.364c-2.41 0-4.364-1.954-4.364-4.364v-20.364c0-2.41 1.954-4.364 4.364-4.364z">
@@ -74,13 +67,8 @@
74
67
  <path fill="#00629b" style="fill: var(--color2, #00629b)" d="M15.273 11.636h4.364v1.455h-4.364v-1.455zM15.273 14.545h4.364v1.455h-4.364v-1.455zM15.273 17.455h4.364v1.455h-4.364v-1.455zM12.364 11.636h1.455v1.455h-1.455v-1.455zM12.364 14.545h1.455v1.455h-1.455v-1.455zM12.364 17.455h1.455v1.455h-1.455v-1.455zM21.891 8.727h-11.782c-0.364 0-0.655 0.291-0.655 0.655v11.782c0 0.291 0.291 0.655 0.655 0.655h11.782c0.291 0 0.655-0.364 0.655-0.655v-11.782c0-0.364-0.364-0.655-0.655-0.655zM21.091 20.364h-10.182v-10.182h10.182v10.182z">
75
68
  </path>
76
69
  </symbol>
77
- <symbol id="icon-remove-group" viewBox="0 0 32 32">
78
- <path fill="#fffbfe" style="fill: var(--color1, #fffbfe)" d="M5.818 0.727h20.364c2.41 0 4.364 1.954 4.364 4.364v20.364c0 2.41-1.954 4.364-4.364 4.364h-20.364c-2.41 0-4.364-1.954-4.364-4.364v-20.364c0-2.41 1.954-4.364 4.364-4.364z">
79
- </path>
80
- <path fill="#00629b" style="fill: var(--color2, #00629b)" opacity="0.11" d="M5.818 0.727h20.364c2.41 0 4.364 1.954 4.364 4.364v20.364c0 2.41-1.954 4.364-4.364 4.364h-20.364c-2.41 0-4.364-1.954-4.364-4.364v-20.364c0-2.41 1.954-4.364 4.364-4.364z">
81
- </path>
82
- <path fill="#00629b" style="fill: var(--color2, #00629b)" d="M18.182 8.727v0.727h3.636v1.455h-0.727v9.455c0 0.8-0.655 1.455-1.455 1.455h-7.273c-0.8 0-1.455-0.655-1.455-1.455v-9.455h-0.727v-1.455h3.636v-0.727h4.364zM12.364 20.364h7.273v-9.455h-7.273v9.455zM13.818 12.364h1.455v6.545h-1.455v-6.545zM18.182 12.364h-1.455v6.545h1.455v-6.545z">
83
- </path>
70
+ <symbol id="icon-remove-group" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
71
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M15 3V4H20V6H19V19C19 20.1 18.1 21 17 21H7C5.9 21 5 20.1 5 19V6H4V4H9V3H15ZM7 19H17V6H7V19ZM9 8H11V17H9V8ZM15 8H13V17H15V8Z" fill="#00629B"/>
84
72
  </symbol>
85
73
  <symbol id="icon-add-group" viewBox="0 0 38 32">
86
74
  <path fill="#00629b" style="fill: var(--color1, #00629b)" d="M6.4 24c1.76 0 3.2-1.44 3.2-3.2s-1.44-3.2-3.2-3.2c-1.76 0-3.2 1.44-3.2 3.2s1.44 3.2 3.2 3.2zM8.208 25.76c-0.592-0.096-1.184-0.16-1.808-0.16-1.584 0-3.088 0.336-4.448 0.928-1.184 0.512-1.952 1.664-1.952 2.96v2.512h7.2v-2.576c0-1.328 0.368-2.576 1.008-3.664zM32 24c1.76 0 3.2-1.44 3.2-3.2s-1.44-3.2-3.2-3.2c-1.76 0-3.2 1.44-3.2 3.2s1.44 3.2 3.2 3.2zM38.4 29.488c0-1.296-0.768-2.448-1.952-2.96-1.36-0.592-2.864-0.928-4.448-0.928-0.624 0-1.216 0.064-1.808 0.16 0.64 1.088 1.008 2.336 1.008 3.664v2.576h7.2v-2.512zM25.984 25.040c-1.872-0.832-4.176-1.44-6.784-1.44s-4.912 0.624-6.784 1.44c-1.728 0.768-2.816 2.496-2.816 4.384v2.576h19.2v-2.576c0-1.888-1.088-3.616-2.816-4.384zM12.912 28.8c0.144-0.368 0.208-0.624 1.456-1.104 1.552-0.608 3.184-0.896 4.832-0.896s3.28 0.288 4.832 0.896c1.232 0.48 1.296 0.736 1.456 1.104h-12.576zM19.2 16c0.88 0 1.6 0.72 1.6 1.6s-0.72 1.6-1.6 1.6c-0.88 0-1.6-0.72-1.6-1.6s0.72-1.6 1.6-1.6zM19.2 12.8c-2.656 0-4.8 2.144-4.8 4.8s2.144 4.8 4.8 4.8c2.656 0 4.8-2.144 4.8-4.8s-2.144-4.8-4.8-4.8z">
@@ -106,9 +94,15 @@
106
94
  <path fill="#00629b" style="fill: var(--color1, #00629b)" d="M24.358 6.667v-4h-2.667v4h-4v2.667h4v4h2.667v-4h4v-2.667h-4z">
107
95
  </path>
108
96
  </symbol>
109
- <symbol id="icon-sort" viewBox="0 0 32 32">
110
- <path fill="#00629b" style="fill: var(--color1, #00629b)" d="M4 24h8v-2.667h-8v2.667zM4 8v2.667h24v-2.667h-24zM4 17.333h16v-2.667h-16v2.667z">
111
- </path>
97
+ <symbol id="icon-search" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
98
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M14.76 13.27L20.49 19L19 20.49L13.27 14.76C12.2 15.53 10.91 16 9.5 16C5.91 16 3 13.09 3 9.5C3 5.91 5.91 3 9.5 3C13.09 3 16 5.91 16 9.5C16 10.91 15.53 12.2 14.76 13.27ZM9.5 5C7.01 5 5 7.01 5 9.5C5 11.99 7.01 14 9.5 14C11.99 14 14 11.99 14 9.5C14 7.01 11.99 5 9.5 5Z" fill="#00629B"/>
99
+ </symbol>
100
+ <symbol id="icon-create-group-mobile" xmlns="http://www.w3.org/2000/svg" width="18" height="16" viewBox="0 0 18 16" fill="none">
101
+ <path d="M3 11.7496C3.825 11.7496 4.5 11.0746 4.5 10.2496C4.5 9.42459 3.825 8.74959 3 8.74959C2.175 8.74959 1.5 9.42459 1.5 10.2496C1.5 11.0746 2.175 11.7496 3 11.7496ZM3.8475 12.5746C3.57 12.5296 3.2925 12.4996 3 12.4996C2.2575 12.4996 1.5525 12.6571 0.915 12.9346C0.36 13.1746 0 13.7146 0 14.3221V15.4996H3.375V14.2921C3.375 13.6696 3.5475 13.0846 3.8475 12.5746ZM15 11.7496C15.825 11.7496 16.5 11.0746 16.5 10.2496C16.5 9.42459 15.825 8.74959 15 8.74959C14.175 8.74959 13.5 9.42459 13.5 10.2496C13.5 11.0746 14.175 11.7496 15 11.7496ZM18 14.3221C18 13.7146 17.64 13.1746 17.085 12.9346C16.4475 12.6571 15.7425 12.4996 15 12.4996C14.7075 12.4996 14.43 12.5296 14.1525 12.5746C14.4525 13.0846 14.625 13.6696 14.625 14.2921V15.4996H18V14.3221ZM12.18 12.2371C11.3025 11.8471 10.2225 11.5621 9 11.5621C7.7775 11.5621 6.6975 11.8546 5.82 12.2371C5.01 12.5971 4.5 13.4071 4.5 14.2921V15.4996H13.5V14.2921C13.5 13.4071 12.99 12.5971 12.18 12.2371ZM6.0525 13.9996C6.12 13.8271 6.15 13.7071 6.735 13.4821C7.4625 13.1971 8.2275 13.0621 9 13.0621C9.7725 13.0621 10.5375 13.1971 11.265 13.4821C11.8425 13.7071 11.8725 13.8271 11.9475 13.9996H6.0525ZM9 7.99959C9.4125 7.99959 9.75 8.33709 9.75 8.74959C9.75 9.16209 9.4125 9.49959 9 9.49959C8.5875 9.49959 8.25 9.16209 8.25 8.74959C8.25 8.33709 8.5875 7.99959 9 7.99959ZM9 6.49959C7.755 6.49959 6.75 7.50459 6.75 8.74959C6.75 9.99459 7.755 10.9996 9 10.9996C10.245 10.9996 11.25 9.99459 11.25 8.74959C11.25 7.50459 10.245 6.49959 9 6.49959Z" fill="#00629B"/>
102
+ <path d="M13.7012 2.75V0.5H12.2012V2.75H9.95121V4.25H12.2012V6.5H13.7012V4.25H15.9512V2.75H13.7012Z" fill="#00629B"/>
103
+ </symbol>
104
+ <symbol id="icon-sort" xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 18 12" fill="none">
105
+ <path d="M7 12H11V10H7V12ZM0 0V2H18V0H0ZM3 7H15V5H3V7Z" fill="#00629B"/>
112
106
  </symbol>
113
107
  <symbol id="icon-data-table-edit" viewBox="0 0 32 32">
114
108
  <path d="M25.413 4.785l1.8 1.8c1.053 1.040 1.053 2.733 0 3.773l-17.64 17.64h-5.573v-5.573l17.64-17.64c1.040-1.040 2.733-1.040 3.773 0zM6.667 25.332l1.88 0.080 13.093-13.107-1.88-1.88-13.093 13.093v1.813z">
@@ -235,5 +229,12 @@
235
229
  <symbol id="icon-view-participants" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
236
230
  <path d="M8 8.72727C8.90909 8.72727 9.68182 8.40909 10.3182 7.77273C10.9545 7.13636 11.2727 6.36364 11.2727 5.45455C11.2727 4.54545 10.9545 3.77273 10.3182 3.13636C9.68182 2.5 8.90909 2.18182 8 2.18182C7.09091 2.18182 6.31818 2.5 5.68182 3.13636C5.04545 3.77273 4.72727 4.54545 4.72727 5.45455C4.72727 6.36364 5.04545 7.13636 5.68182 7.77273C6.31818 8.40909 7.09091 8.72727 8 8.72727ZM8 7.41818C7.45455 7.41818 6.99091 7.22727 6.60909 6.84546C6.22727 6.46364 6.03636 6 6.03636 5.45455C6.03636 4.90909 6.22727 4.44545 6.60909 4.06364C6.99091 3.68182 7.45455 3.49091 8 3.49091C8.54545 3.49091 9.00909 3.68182 9.39091 4.06364C9.77273 4.44545 9.96364 4.90909 9.96364 5.45455C9.96364 6 9.77273 6.46364 9.39091 6.84546C9.00909 7.22727 8.54545 7.41818 8 7.41818ZM8 10.9091C6.2303 10.9091 4.61818 10.4152 3.16364 9.42727C1.70909 8.43939 0.654545 7.11515 0 5.45455C0.654545 3.79394 1.70909 2.4697 3.16364 1.48182C4.61818 0.493939 6.2303 0 8 0C9.7697 0 11.3818 0.493939 12.8364 1.48182C14.2909 2.4697 15.3455 3.79394 16 5.45455C15.3455 7.11515 14.2909 8.43939 12.8364 9.42727C11.3818 10.4152 9.7697 10.9091 8 10.9091ZM8 9.45455C9.3697 9.45455 10.6273 9.09394 11.7727 8.37273C12.9182 7.65152 13.7939 6.67879 14.4 5.45455C13.7939 4.2303 12.9182 3.25758 11.7727 2.53636C10.6273 1.81515 9.3697 1.45455 8 1.45455C6.6303 1.45455 5.37273 1.81515 4.22727 2.53636C3.08182 3.25758 2.20606 4.2303 1.6 5.45455C2.20606 6.67879 3.08182 7.65152 4.22727 8.37273C5.37273 9.09394 6.6303 9.45455 8 9.45455Z" fill="#00629B"/>
237
231
  </symbol>
232
+ <symbol id="icon-view-roster" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
233
+ <path d="M10.9976 7H16.9976V9H10.9976V7ZM10.9976 11H16.9976V13H10.9976V11ZM10.9976 15H16.9976V17H10.9976V15ZM6.99756 7H8.99756V9H6.99756V7ZM6.99756 11H8.99756V13H6.99756V11ZM6.99756 15H8.99756V17H6.99756V15ZM20.0976 3H3.89756C3.39756 3 2.99756 3.4 2.99756 3.9V20.1C2.99756 20.5 3.39756 21 3.89756 21H20.0976C20.4976 21 20.9976 20.5 20.9976 20.1V3.9C20.9976 3.4 20.4976 3 20.0976 3ZM18.9976 19H4.99756V5H18.9976V19Z" fill="#00629B"/>
234
+ </symbol>
235
+ <symbol id="icon-create-sub-group" xmlns="http://www.w3.org/2000/svg" width="18" height="16" viewBox="0 0 18 16" fill="none">
236
+ <path d="M2.99756 11.7496C3.82256 11.7496 4.49756 11.0746 4.49756 10.2496C4.49756 9.42459 3.82256 8.74959 2.99756 8.74959C2.17256 8.74959 1.49756 9.42459 1.49756 10.2496C1.49756 11.0746 2.17256 11.7496 2.99756 11.7496ZM3.84506 12.5746C3.56756 12.5296 3.29006 12.4996 2.99756 12.4996C2.25506 12.4996 1.55006 12.6571 0.912559 12.9346C0.357559 13.1746 -0.00244141 13.7146 -0.00244141 14.3221V15.4996H3.37256V14.2921C3.37256 13.6696 3.54506 13.0846 3.84506 12.5746ZM14.9976 11.7496C15.8226 11.7496 16.4976 11.0746 16.4976 10.2496C16.4976 9.42459 15.8226 8.74959 14.9976 8.74959C14.1726 8.74959 13.4976 9.42459 13.4976 10.2496C13.4976 11.0746 14.1726 11.7496 14.9976 11.7496ZM17.9976 14.3221C17.9976 13.7146 17.6376 13.1746 17.0826 12.9346C16.4451 12.6571 15.7401 12.4996 14.9976 12.4996C14.7051 12.4996 14.4276 12.5296 14.1501 12.5746C14.4501 13.0846 14.6226 13.6696 14.6226 14.2921V15.4996H17.9976V14.3221ZM12.1776 12.2371C11.3001 11.8471 10.2201 11.5621 8.99756 11.5621C7.77506 11.5621 6.69506 11.8546 5.81756 12.2371C5.00756 12.5971 4.49756 13.4071 4.49756 14.2921V15.4996H13.4976V14.2921C13.4976 13.4071 12.9876 12.5971 12.1776 12.2371ZM6.05006 13.9996C6.11756 13.8271 6.14756 13.7071 6.73256 13.4821C7.46006 13.1971 8.22506 13.0621 8.99756 13.0621C9.77006 13.0621 10.5351 13.1971 11.2626 13.4821C11.8401 13.7071 11.8701 13.8271 11.9451 13.9996H6.05006ZM8.99756 7.99959C9.41006 7.99959 9.74756 8.33709 9.74756 8.74959C9.74756 9.16209 9.41006 9.49959 8.99756 9.49959C8.58506 9.49959 8.24756 9.16209 8.24756 8.74959C8.24756 8.33709 8.58506 7.99959 8.99756 7.99959ZM8.99756 6.49959C7.75256 6.49959 6.74756 7.50459 6.74756 8.74959C6.74756 9.99459 7.75256 10.9996 8.99756 10.9996C10.2426 10.9996 11.2476 9.99459 11.2476 8.74959C11.2476 7.50459 10.2426 6.49959 8.99756 6.49959Z" fill="#00629B"/>
237
+ <path d="M13.6988 2.75V0.5H12.1988V2.75H9.94877V4.25H12.1988V6.5H13.6988V4.25H15.9488V2.75H13.6988Z" fill="#00629B"/>
238
+ </symbol>
238
239
  </defs>
239
240
  </svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ieeesa-npm/shared-styles",
3
- "version": "0.4.3",
3
+ "version": "0.4.5",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^16.1.0",
6
6
  "@angular/core": "^16.1.0"
package/styles/mixins.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @import "./variables.scss";
2
+
1
3
  @mixin set-font-style(
2
4
  $font-family,
3
5
  $font-style,
@@ -79,3 +81,18 @@
79
81
  @function rotate-icon($deg) {
80
82
  @return rotate($deg);
81
83
  }
84
+ @mixin set-form-field-border-and-background() {
85
+ background: $ieeesa-form-field-background;
86
+ border-top: $ieeesa-border-width solid $ieeesa-sys-light-surface-variant;
87
+ border-right: $ieeesa-border-width solid $ieeesa-sys-light-surface-variant;
88
+ border-left: $ieeesa-border-width solid $ieeesa-sys-light-surface-variant;
89
+ border-top-left-radius: 4px;
90
+ border-top-right-radius: 4px;
91
+ border-bottom-left-radius: $ieeesa-border-bottom-left-radius;
92
+ border-bottom-right-radius: $ieeesa-border-bottom-right-radius;
93
+ }
94
+ @mixin set-form-field-border($top, $right, $left) {
95
+ border-top: $top;
96
+ border-right: $right;
97
+ border-left: $left;
98
+ }
package/styles/styles.scss CHANGED
@@ -1,4 +1,4 @@
1
1
  @import "./variables.scss";
2
2
  @import "./mixins.scss";
3
3
  @import "./typography.scss";
4
- @import "./theme.scss";
4
+ @import "./theme.scss";
package/styles/variables.scss CHANGED
@@ -92,7 +92,7 @@ $ieeesa-border-gray: #d7d6d6;
92
92
  $ieeesa-nav-blue: #00b5e2;
93
93
  $ieeesa-primary-99: #f0f5f9;
94
94
  $ieeesa-icon-disabled-color: #c9c5ca;
95
- $ieeesa-data-table-row-background-color: #f7f9ff;
95
+ $ieeesa-data-table-row-background-color: #f8fcff;
96
96
  $ieeesa-data-table-head-color: #dce3e9;
97
97
  $ieeesa-button-bg-gray: #383838;
98
98
  $ieeesa-light-surface-variant: #daf1fe;
@@ -132,13 +132,14 @@ $ieeesa-box-shadow-12: 0px 1px 3px rgba(235, 116, 116, 0.12),
132
132
  $ieeesa-box-shadow-13: 0px 2px 6px 2px rgba(0, 0, 0, 0.15),
133
133
  0px 1px 2px 0px rgba(0, 0, 0, 0.3);
134
134
  $ieeesa-box-shadow-14: 0px 2px 0px 0px #00b5e2 inset;
135
- $ieeesa-box-shadow-15: 0px 1px 4px 0px rgba(0, 0, 0, 0.25), 0px 4px 0px 0px #00B5E2 inset;
135
+ $ieeesa-box-shadow-15: 0px 1px 4px 0px rgba(0, 0, 0, 0.25),
136
+ 0px 4px 0px 0px #00b5e2 inset;
136
137
  $ieeesa-box-shadow-16: 0px 1px 1px 1px rgba(0, 0, 0, 0.15),
137
138
  0px 1px 1px 0px rgba(0, 0, 0, 0.3);
138
139
  $ieeesa-box-shadow-17: 0px 1px 0px 0px #9ba0a6 inset;
139
140
  $ieeesa-box-shadow-18: 0px 1px 0px 0px #dce3e9 inset;
140
141
  $ieeesa-box-shadow-19: 0px 3px 0px 0px #00b5e2 inset,
141
- 0px 4px 24px 0px rgba(0, 0, 0, 0.5);
142
+ 0px 4px 24px 0px rgba(0, 0, 0, 0.5);
142
143
  // Angular Material mat-button styles
143
144
  $ieeesa-primary-btn-active: #00629b;
144
145
  $ieeesa-primary-btn-hover: #003e65;
@@ -157,13 +158,11 @@ $ieeesa-primary-brand-30: #0188aa;
157
158
  $ieeesa-dark-grey-20: #333436;
158
159
  $ieeesa-dark-grey-30: #4a4d50;
159
160
  $ieeesa-dark-grey-20: #333436;
160
- $ieeesa-dark-grey-60: #878b8f;
161
161
  $ieeesa-dark-grey-99: #f4f8fe;
162
162
  $ieeesa-dark-grey-95: #dbe2eb;
163
163
  $ieeesa-brand-grey-50: #777a7e;
164
164
  $ieeesa-dark-grey-60: #878b8f;
165
165
  $ieeesa-brand-grey-70: #9ba0a6;
166
- $ieeesa-dark-grey-99: #f4f8fe;
167
166
  $ieeesa-outline-variant: #cac4d0;
168
167
  $ieeesa-dark-grey: #63666a;
169
168
  $ieeesa-brand-dark-grey: #1c1d1e;
@@ -173,12 +172,7 @@ $ieeesa-error-color: #f9dedc;
173
172
  $ieeesa-warning-color: #ffefd3;
174
173
  $ieeesa-neutral-60: #8f918e;
175
174
  $ieeesa-color-picker-default-bg-color: #f4f3f3;
176
- $ieeesa-form-field-background: linear-gradient(
177
- 0deg,
178
- rgba(0, 98, 155, 0.05) 0%,
179
- rgba(0, 98, 155, 0.05) 100%
180
- ),
181
- #fffbfe;
175
+ $ieeesa-form-field-background: #ffffff;
182
176
  $ieeesa-tile-background: linear-gradient(
183
177
  0deg,
184
178
  rgba(0, 98, 155, 0.08) 0%,
@@ -198,6 +192,22 @@ $ieeesa-background-color-gray: #f2f2f2;
198
192
  $ieeesa-mobile-min-width: 767px;
199
193
  $ieeesa-background-color-light-blue: #b0d6ec;
200
194
  $ieeesa-disabled-border-color: #c0c7cd;
201
- $ieeesa-inverse-primary-color: #B0D6EC;
195
+ $ieeesa-inverse-primary-color: #b0d6ec;
202
196
  $ieeesa-file-upload-background-color: #f8fcff;
203
- $ieeesa-sys-light-surface-variant: #D9D9D6;
197
+ $ieeesa-sys-light-surface-variant: #d9d9d6;
198
+ $ieeesa-border-bottom-left-radius: 4px;
199
+ $ieeesa-border-bottom-right-radius: 4px;
200
+ $ieeesa-border-width: 1px;
201
+ $ieeesa-form-field-overlay-background: #ffffff;
202
+ $ieeesa-filled-form-field-border: 2px solid $ieeesa-blue;
203
+ $ieeesa-invalid-form-field-border: 2px solid $ieeesa-red;
204
+ $ieeesa-ripple-border-bottom-color: #d9d9d6;
205
+ $ieeesa-mat-expansion-panel-bg-color: #f3f5f7;
206
+ $ieeesa-form-field-content-color: #49454f;
207
+ $ieeesa-form-field-content-font-size: 0.75rem;
208
+ $ieeesa-breadcrumb-font-color: #757874;
209
+ $ieeesa-data-table-head-color: #323232;
210
+ $ieeesa-toggle-btn-group-radius: 0.25em;
211
+ $ieeesa-calendar-bg-color: #ffffff;
212
+ $ieeesa-nav-menu-item-hover-bg-color: #dae9f1;
213
+ $ieeesa-nav-menu-item-focus-bg-color: #c0deef;
package/styles/dark-theme.scss DELETED
@@ -1,189 +0,0 @@
1
- @import "./variables.scss";
2
- @import "./typography.scss";
3
- @import "./mixins.scss";
4
-
5
- // button variant classes
6
- .mat-mdc-button.mat-mdc-button-base {
7
- &.mat-primary-button,
8
- &.mat-secondary-button,
9
- &.mat-tertiary-button,
10
- &.mat-text-button {
11
- min-width: 103px;
12
- width: auto;
13
- min-height: 40px;
14
- height: auto;
15
- border-radius: 3px;
16
- text-align: center;
17
- padding: 0.625em 1.5em;
18
- border: none;
19
- @include set-font-style(
20
- $ieeesa-font-calibri-bold,
21
- $ieeesa-font-style-normal,
22
- $ieeesa-font-wt-700,
23
- $ieeesa-font-size-16,
24
- $ieeesa-line-height-20,
25
- $ieeesa-black,
26
- $ieeesa-letter-space-point-1
27
- );
28
- }
29
- & > .mat-icon {
30
- margin-right: 11px;
31
- }
32
- &.mat-primary-button {
33
- background-color: $ieeesa-primary-btn-active;
34
- color: $ieeesa-white;
35
- }
36
- &.mat-primary-button:hover {
37
- background-color: $ieeesa-primary-btn-hover;
38
- }
39
- &.mat-primary-button:active {
40
- background-color: $ieeesa-primary-btn-active;
41
- }
42
- &.mat-primary-button:disabled {
43
- background-color: $ieeesa-primary-btn-disabled;
44
- }
45
-
46
- &.mat-secondary-button {
47
- color: $ieeesa-white;
48
- background: $ieeesa-medium-grey;
49
- box-shadow: $ieeesa-box-shadow-2;
50
- }
51
- &.mat-secondary-button:hover {
52
- background: $ieeesa-secondary-btn-hover;
53
- }
54
- &.mat-secondary-button:active {
55
- background: $ieeesa-secondary-btn-active;
56
- }
57
- &.mat-secondary-button:disabled {
58
- background: $ieeesa-primary-btn-disabled;
59
- color: $ieeesa-background-dark-color;
60
- opacity: $ieeesa-opacity-point-38;
61
- }
62
-
63
- &.mat-tertiary-button {
64
- background-color: $ieeesa-white;
65
- border: 1px solid $ieeesa-tertiary-btn-color;
66
- color: $ieeesa-tertiary-btn-color;
67
- }
68
- &.mat-tertiary-button:hover {
69
- background-color: $ieeesa-tertiary-btn-hover;
70
- }
71
- &.mat-tertiary-button:active {
72
- background: $ieeesa-tertiary-btn-active;
73
- }
74
- &.mat-tertiary-button:disabled {
75
- border: 1px solid $ieeesa-tertiary-btn-disabled;
76
- color: $ieeesa-background-dark-color;
77
- opacity: $ieeesa-opacity-point-38;
78
- }
79
-
80
- &.mat-text-button {
81
- color: $ieeesa-blue;
82
- &:hover {
83
- background: $ieeesa-tertiary-btn-hover;
84
- }
85
- &:active {
86
- background: $ieeesa-tertiary-btn-hover;
87
- }
88
- &:disabled {
89
- color: $ieeesa-title-color;
90
- opacity: $ieeesa-opacity-point-38;
91
- }
92
- }
93
- }
94
- .ieeesa-text-button {
95
- color: $ieeesa-outline-variant;
96
- background: none;
97
- border: none;
98
- }
99
- .ieeesa-view-more-or-less-button {
100
- border: none;
101
- background: none;
102
- text-decoration: underline;
103
- color: $ieeesa-blue;
104
- }
105
- .flex-align-center {
106
- display: flex;
107
- align-items: center;
108
- justify-content: center;
109
- }
110
- // mat-toggle-button theme
111
- .mat-button-toggle-checked {
112
- background-color: $ieeesa-secondary-btn-hover;
113
- .mat-button-toggle-label-content::before {
114
- font-family: "Font Awesome 5 Free";
115
- font-weight: $ieeesa-font-wt-900;
116
- content: "\f00c";
117
- padding-right: 0.5625em;
118
- }
119
- }
120
- .mat-button-toggle-group {
121
- .mat-button-toggle-label-content {
122
- @include set-font-style(
123
- $ieeesa-font-calibri-bold,
124
- $ieeesa-font-style-normal,
125
- $ieeesa-font-wt-700,
126
- $ieeesa-font-size-16,
127
- $ieeesa-line-height-20,
128
- $ieeesa-background-dark-color,
129
- $ieeesa-letter-space-point-1
130
- );
131
- }
132
- }
133
- // Bordered button with no background
134
- .no-bg-color-btn {
135
- color: $ieeesa-blue;
136
- border-radius: 3px;
137
- border: 1px solid $ieeesa-blue;
138
- min-height: 40px;
139
- height: auto;
140
- }
141
- @media (max-width: 768px) {
142
- .mat-button-toggle-group {
143
- .mat-button-toggle-label-content {
144
- max-width: 8ch;
145
- text-overflow: ellipsis;
146
- white-space: nowrap;
147
- overflow: hidden;
148
- position: relative;
149
- }
150
- }
151
- }
152
- .cdk-overlay-pane {
153
- .mat-mdc-tooltip .mdc-tooltip__surface {
154
- color: #525252;
155
- padding: 6px 12px;
156
- font-family: $ieeesa-font-calibri-regular;
157
- font-size: $ieeesa-font-size-16;
158
- border: 1px solid $ieeesa-outline-variant;
159
- background: $ieeesa-white;
160
- box-shadow: $ieeesa-box-shadow-11;
161
- max-width: unset !important;
162
- }
163
- }
164
- .cdk-overlay-pane {
165
- .mat-mdc-option .mdc-list-item__primary-text {
166
- font-family: $ieeesa-font-calibri-regular !important;
167
- }
168
- }
169
- // Modal component styles
170
- .cdk-overlay-pane {
171
- &.ieeesa-modal-confirm-dialog,
172
- &.ieeesa-modal-dialog,
173
- &.ieeesa-alert-dialog {
174
- width: 100%;
175
- min-width: 312px;
176
- }
177
- }
178
-
179
- .mat-mdc-form-field {
180
- @include set-font-style(
181
- $ieeesa-font-calibri-regular,
182
- $ieeesa-font-style-normal,
183
- $ieeesa-font-wt-400,
184
- $ieeesa-font-size-18,
185
- $ieeesa-line-height-24,
186
- $ieeesa-on-surface-variant-color,
187
- $ieeesa-letter-space-point-5
188
- );
189
- }
package/styles/lighter-theme.scss DELETED
@@ -1,189 +0,0 @@
1
- @import "./variables.scss";
2
- @import "./typography.scss";
3
- @import "./mixins.scss";
4
-
5
- // button variant classes
6
- .mat-mdc-button.mat-mdc-button-base {
7
- &.mat-primary-button,
8
- &.mat-secondary-button,
9
- &.mat-tertiary-button,
10
- &.mat-text-button {
11
- min-width: 103px;
12
- width: auto;
13
- min-height: 40px;
14
- height: auto;
15
- border-radius: 3px;
16
- text-align: center;
17
- padding: 0.625em 1.5em;
18
- border: none;
19
- @include set-font-style(
20
- $ieeesa-font-calibri-bold,
21
- $ieeesa-font-style-normal,
22
- $ieeesa-font-wt-700,
23
- $ieeesa-font-size-16,
24
- $ieeesa-line-height-20,
25
- $ieeesa-black,
26
- $ieeesa-letter-space-point-1
27
- );
28
- }
29
- & > .mat-icon {
30
- margin-right: 11px;
31
- }
32
- &.mat-primary-button {
33
- background-color: $ieeesa-primary-btn-active;
34
- color: $ieeesa-white;
35
- }
36
- &.mat-primary-button:hover {
37
- background-color: $ieeesa-primary-btn-hover;
38
- }
39
- &.mat-primary-button:active {
40
- background-color: $ieeesa-primary-btn-active;
41
- }
42
- &.mat-primary-button:disabled {
43
- background-color: $ieeesa-primary-btn-disabled;
44
- }
45
-
46
- &.mat-secondary-button {
47
- color: $ieeesa-white;
48
- background: $ieeesa-medium-grey;
49
- box-shadow: $ieeesa-box-shadow-2;
50
- }
51
- &.mat-secondary-button:hover {
52
- background: $ieeesa-secondary-btn-hover;
53
- }
54
- &.mat-secondary-button:active {
55
- background: $ieeesa-secondary-btn-active;
56
- }
57
- &.mat-secondary-button:disabled {
58
- background: $ieeesa-primary-btn-disabled;
59
- color: $ieeesa-background-dark-color;
60
- opacity: $ieeesa-opacity-point-38;
61
- }
62
-
63
- &.mat-tertiary-button {
64
- background-color: $ieeesa-white;
65
- border: 1px solid $ieeesa-tertiary-btn-color;
66
- color: $ieeesa-tertiary-btn-color;
67
- }
68
- &.mat-tertiary-button:hover {
69
- background-color: $ieeesa-tertiary-btn-hover;
70
- }
71
- &.mat-tertiary-button:active {
72
- background: $ieeesa-tertiary-btn-active;
73
- }
74
- &.mat-tertiary-button:disabled {
75
- border: 1px solid $ieeesa-tertiary-btn-disabled;
76
- color: $ieeesa-background-dark-color;
77
- opacity: $ieeesa-opacity-point-38;
78
- }
79
-
80
- &.mat-text-button {
81
- color: $ieeesa-blue;
82
- &:hover {
83
- background: $ieeesa-tertiary-btn-hover;
84
- }
85
- &:active {
86
- background: $ieeesa-tertiary-btn-hover;
87
- }
88
- &:disabled {
89
- color: $ieeesa-title-color;
90
- opacity: $ieeesa-opacity-point-38;
91
- }
92
- }
93
- }
94
- .ieeesa-text-button {
95
- color: $ieeesa-outline-variant;
96
- background: none;
97
- border: none;
98
- }
99
- .ieeesa-view-more-or-less-button {
100
- border: none;
101
- background: none;
102
- text-decoration: underline;
103
- color: $ieeesa-blue;
104
- }
105
- .flex-align-center {
106
- display: flex;
107
- align-items: center;
108
- justify-content: center;
109
- }
110
- // mat-toggle-button theme
111
- .mat-button-toggle-checked {
112
- background-color: $ieeesa-secondary-btn-hover;
113
- .mat-button-toggle-label-content::before {
114
- font-family: "Font Awesome 5 Free";
115
- font-weight: $ieeesa-font-wt-900;
116
- content: "\f00c";
117
- padding-right: 0.5625em;
118
- }
119
- }
120
- .mat-button-toggle-group {
121
- .mat-button-toggle-label-content {
122
- @include set-font-style(
123
- $ieeesa-font-calibri-bold,
124
- $ieeesa-font-style-normal,
125
- $ieeesa-font-wt-700,
126
- $ieeesa-font-size-16,
127
- $ieeesa-line-height-20,
128
- $ieeesa-background-dark-color,
129
- $ieeesa-letter-space-point-1
130
- );
131
- }
132
- }
133
- // Bordered button with no background
134
- .no-bg-color-btn {
135
- color: $ieeesa-blue;
136
- border-radius: 3px;
137
- border: 1px solid $ieeesa-blue;
138
- min-height: 40px;
139
- height: auto;
140
- }
141
- @media (max-width: 768px) {
142
- .mat-button-toggle-group {
143
- .mat-button-toggle-label-content {
144
- max-width: 8ch;
145
- text-overflow: ellipsis;
146
- white-space: nowrap;
147
- overflow: hidden;
148
- position: relative;
149
- }
150
- }
151
- }
152
- .cdk-overlay-pane {
153
- .mat-mdc-tooltip .mdc-tooltip__surface {
154
- color: #525252;
155
- padding: 6px 12px;
156
- font-family: $ieeesa-font-calibri-regular;
157
- font-size: $ieeesa-font-size-16;
158
- border: 1px solid $ieeesa-outline-variant;
159
- background: $ieeesa-white;
160
- box-shadow: $ieeesa-box-shadow-11;
161
- max-width: unset !important;
162
- }
163
- }
164
- .cdk-overlay-pane {
165
- .mat-mdc-option .mdc-list-item__primary-text {
166
- font-family: $ieeesa-font-calibri-regular !important;
167
- }
168
- }
169
- // Modal component styles
170
- .cdk-overlay-pane {
171
- &.ieeesa-modal-confirm-dialog,
172
- &.ieeesa-modal-dialog,
173
- &.ieeesa-alert-dialog {
174
- width: 100%;
175
- min-width: 312px;
176
- }
177
- }
178
-
179
- .mat-mdc-form-field {
180
- @include set-font-style(
181
- $ieeesa-font-calibri-regular,
182
- $ieeesa-font-style-normal,
183
- $ieeesa-font-wt-400,
184
- $ieeesa-font-size-18,
185
- $ieeesa-line-height-24,
186
- $ieeesa-on-surface-variant-color,
187
- $ieeesa-letter-space-point-5
188
- );
189
- }