Warning, /firebird/firebird-ng/src/app/pages/shell-example/shell-example.component.scss is written in an unsupported language. File is not indexed.
0001 @use '@angular/material' as mat;
0002
0003 //:host {
0004 // display: block;
0005 // max-width: 1000px;
0006 //}
0007
0008 h1 {
0009 font: var(--mat-sys-title-large);
0010 font-size: 28px;
0011 padding-top: 32px;
0012 }
0013
0014 h2 {
0015 font: var(--mat-sys-title-large);
0016 }
0017
0018 a {
0019 color: var(--mat-sys-primary);
0020 }
0021
0022 .demo-warn {
0023 background: var(--mat-sys-error-container);
0024 color: var(--mat-sys-on-error-container);
0025 border: 1px solid var(--mat-sys-outline-variant);
0026 border-radius: var(--mat-sys-corner-extra-small);
0027 padding: 8px;
0028 }
0029
0030 .demo-group {
0031 display: grid;
0032 grid-template-columns: 1fr 1fr;
0033 grid-gap: 24px;
0034 margin-top: 24px;
0035 }
0036
0037 @media (max-width: 1000px) {
0038 .demo-group { grid-template-columns: auto;}
0039 }
0040
0041 .demo-color-container {
0042 border-radius: var(--mat-sys-corner-small);
0043 display: inline-block;
0044 font: var(--mat-sys-body-medium);
0045 vertical-align: top;
0046 }
0047
0048 .demo-heading {
0049 color: var(--mat-sys-on-primary);
0050 background: var(--mat-sys-primary);
0051 border: 1px solid var(--mat-sys-outline);
0052 border-top-right-radius: var(--mat-sys-corner-small);
0053 border-top-left-radius: var(--mat-sys-corner-small);
0054 border-bottom: none;
0055 padding: 16px;
0056 display: flex;
0057 align-items: center;
0058 justify-content: space-between;
0059 }
0060
0061 .demo-name {
0062 font: var(--mat-sys-title-medium);
0063 }
0064
0065 .demo-variable {
0066 font: var(--mat-sys-title-small);
0067 font-family: monospace;
0068 text-align: right;
0069 }
0070
0071 .demo-description {
0072 border: 1px solid var(--mat-sys-outline);
0073 border-bottom-right-radius: var(--mat-sys-corner-small);
0074 border-bottom-left-radius: var(--mat-sys-corner-small);
0075 padding: 0 16px;
0076 }
0077
0078 .demo-code {
0079 font-family: monospace;
0080 }
0081
0082 .demo-surface-variable {
0083 display: inline-block;
0084 font-family: monospace;
0085 background: var(--mat-sys-primary-container);
0086 color: var(--mat-sys-on-primary-container);
0087 padding: 2px 6px;
0088 margin: 0 2px;
0089 border-radius: 4px;
0090 }
0091
0092 mat-expansion-panel {
0093 margin-top: 24px;
0094 overflow: visible;
0095 @include mat.expansion-overrides((
0096 'container-text-font': var(--mat-sys-body-medium-font),
0097 'container-text-size': var(--mat-sys-body-medium-size),
0098 'container-text-weight': var(--mat-sys-body-medium-weight),
0099 'container-text-line-height': var(--mat-sys-body-medium-line-height),
0100 'container-text-tracking': var(--mat-sys-body-medium-tracking),
0101 ));
0102 }
0103
0104 .demo-compact-color-container {
0105 border-radius: var(--mat-sys-corner-small);
0106 border: 1px solid var(--mat-sys-outline);
0107 overflow: hidden; // Hide child heading background color
0108 margin-top: 24px;
0109
0110 .demo-heading {
0111 border: none;
0112 border-radius: 0;
0113
0114 &:not(:nth-child(1)) {
0115 border-top: 1px solid var(--mat-sys-outline);
0116 }
0117 }
0118
0119 .demo-variables {
0120 text-align: end;
0121 }
0122 }
0123
0124 .demo-typography-group {
0125 border: 1px solid var(--mat-sys-outline);
0126 border-radius: var(--mat-sys-corner-small);
0127 margin-top: 40px;
0128 overflow: hidden;
0129 }
0130
0131 .demo-typography-title {
0132 text-transform: capitalize;
0133 font: var(--mat-sys-title-medium);
0134 padding: 16px;
0135 border-bottom: 1px solid var(--mat-sys-outline);
0136 background: var(--mat-sys-primary-container);
0137 color: var(--mat-sys-on-primary-container);
0138 }
0139
0140 .demo-typography-variable {
0141 min-width: 240px;
0142 }
0143
0144 .demo-typography-example {
0145 padding: 16px;
0146 display: flex;
0147 align-items: baseline;
0148 border-top: 1px solid var(--mat-sys-outline-variant);
0149
0150 &:nth-child(1) {
0151 border: none;
0152 }
0153 .demo-surface-variable {
0154 margin-right: 16px;
0155 }
0156 }
0157
0158 .demo-typography-text {
0159 display: inline-block;
0160 }
0161
0162 .demo-elevation {
0163 height: 40px;
0164 width: 300px;
0165 margin: 32px;
0166 display: flex;
0167 align-items: center;
0168 justify-content: center;
0169 background: var(--mat-sys-surface-container);
0170 color: var(--mat-sys-on-surface);
0171 border-radius: var(--mat-sys-corner-extra-small);
0172 }
0173
0174 .demo-code-block {
0175 background: var(--mat-sys-surface-container-low);
0176 padding: 16px;
0177 border-radius: var(--mat-sys-corner-small);
0178 border: 1px solid var(--mat-sys-outline);
0179 }
0180
0181 .demo-overrides {
0182 background-color: var(--mat-sys-primary);
0183 color: var(--mat-sys-on-primary);
0184 font: var(--mat-sys-body-medium);
0185 border-radius: var(--mat-sys-corner-large);
0186 box-shadow: var(--mat-sys-level3);
0187 padding: 16px;
0188
0189 @include mat.theme-overrides((
0190 primary: #ebdcff,
0191 on-primary: #230f46,
0192 body-medium: 500 1.15rem/1.3rem Arial,
0193 corner-large: 32px,
0194 level3: 0 4px 6px 1px var(--mat-sys-surface-dim),
0195 ));
0196 }
0197
