10f7463094
- Implemented the PortalSettings Web Part with a new manifest and TypeScript file. - Created SCSS styles for the Web Part, defining various UI elements and responsive design. - Added localization support for English and German languages. - Developed tests for Provider Registry and static assets validation. - Included PowerShell script for project validation.
172 lines
12 KiB
SCSS
172 lines
12 KiB
SCSS
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
|
|
|
$white: "[theme: white, default: #ffffff]";
|
|
$neutral-lighter-alt: "[theme: neutralLighterAlt, default: #f8f8f8]";
|
|
$neutral-lighter: "[theme: neutralLighter, default: #f4f4f4]";
|
|
$neutral-light: "[theme: neutralLight, default: #eaeaea]";
|
|
$neutral-tertiary: "[theme: neutralTertiary, default: #a6a6a6]";
|
|
$neutral-secondary: "[theme: neutralSecondary, default: #666666]";
|
|
$neutral-primary: "[theme: neutralPrimary, default: #333333]";
|
|
$theme-lighter-alt: "[theme: themeLighterAlt, default: #eff6fc]";
|
|
$theme-lighter: "[theme: themeLighter, default: #deecf9]";
|
|
$theme-light: "[theme: themeLight, default: #c7e0f4]";
|
|
$theme-primary: "[theme: themePrimary, default: #0078d7]";
|
|
$theme-dark: "[theme: themeDark, default: #005a9e]";
|
|
$red-dark: "[theme: redDark, default: #a80000]";
|
|
$green: "[theme: green, default: #107c10]";
|
|
|
|
.ps3-root {
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
background: $neutral-lighter-alt;
|
|
color: $neutral-primary;
|
|
font-family: 'Segoe UI', 'Segoe UI Web (West European)', sans-serif;
|
|
}
|
|
|
|
.ps3-root *, .ps3-root *::before, .ps3-root *::after { box-sizing: border-box; }
|
|
.ps3-shell { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px; }
|
|
.ps3-statusHost { min-height: 50px; }
|
|
.ps3-status { margin-bottom: 14px; padding: 12px 16px; border: 1px solid $neutral-light; border-radius: 4px; background: $white; }
|
|
.ps3-status-info { border-color: $theme-light; background: $theme-lighter-alt; color: $theme-dark; }
|
|
.ps3-status-success { border-color: $green; color: $green; }
|
|
.ps3-status-warning { border-color: #ca5010; background: #fff4ce; color: #8a3707; }
|
|
.ps3-status-danger { border-color: $red-dark; background: #fde7e9; color: $red-dark; }
|
|
|
|
.ps3-hero {
|
|
padding: 28px 30px;
|
|
border-radius: 8px;
|
|
background: $theme-primary;
|
|
color: $white;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
|
|
}
|
|
.ps3-eyebrow { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
|
|
.ps3-title { margin: 0; font-size: 30px; font-weight: 300; line-height: 1.2; }
|
|
.ps3-lead { max-width: 850px; margin: 12px 0 0; font-size: 15px; line-height: 1.6; }
|
|
.ps3-heroMeta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
|
|
.ps3-heroMetric { min-width: 210px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.32); border-radius: 4px; background: rgba(255,255,255,.1); }
|
|
.ps3-heroMetric span, .ps3-heroMetric strong { display: block; }
|
|
.ps3-heroMetric span { margin-bottom: 3px; font-size: 11px; opacity: .85; text-transform: uppercase; }
|
|
.ps3-heroMetric strong { font-size: 13px; word-break: break-word; }
|
|
|
|
.ps3-tabs { display: flex; gap: 4px; margin: 22px 0 0; padding: 0 4px; border-bottom: 1px solid $neutral-light; }
|
|
.ps3-tab { position: relative; min-height: 44px; padding: 0 18px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: $neutral-secondary; cursor: pointer; font: inherit; font-weight: 600; }
|
|
.ps3-tab:hover { background: $neutral-lighter; color: $neutral-primary; }
|
|
.ps3-tab.is-active { border-bottom-color: $theme-primary; color: $theme-primary; }
|
|
.ps3-tab:focus { outline: 2px solid $theme-primary; outline-offset: -2px; }
|
|
.ps3-dirtyDot { margin-left: 8px; color: #ca5010; font-size: 9px; }
|
|
|
|
.ps3-content { padding-top: 18px; }
|
|
.ps3-providerHeader { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 16px; padding: 20px 22px; border: 1px solid $neutral-light; border-radius: 6px; background: $white; }
|
|
.ps3-providerVersion { color: $theme-primary; font-size: 11px; font-weight: 700; text-transform: uppercase; }
|
|
.ps3-providerTitle { margin: 3px 0 5px; font-size: 24px; font-weight: 400; }
|
|
.ps3-providerDescription { margin: 0; color: $neutral-secondary; line-height: 1.5; }
|
|
.ps3-storageBadge { flex: 0 0 auto; padding: 6px 10px; border-radius: 12px; background: $theme-lighter-alt; color: $theme-dark; font-size: 12px; font-weight: 600; }
|
|
|
|
.ps3-form { display: grid; gap: 16px; }
|
|
.ps3-section { display: block; margin: 0; padding: 0; border: 1px solid $neutral-light; border-radius: 6px; background: $white; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
|
|
.ps3-sectionHeader { display: block; padding: 18px 20px 14px; border-bottom: 1px solid $neutral-light; }
|
|
details.ps3-section > summary { cursor: pointer; }
|
|
details.ps3-section > summary:focus { outline: 2px solid $theme-primary; outline-offset: -2px; }
|
|
.ps3-sectionTitle { margin: 0; font-size: 18px; font-weight: 600; }
|
|
.ps3-sectionDescription { margin: 5px 0 0; color: $neutral-secondary; line-height: 1.5; }
|
|
.ps3-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; padding: 20px; }
|
|
.ps3-span-1 { grid-column: span 1; } .ps3-span-2 { grid-column: span 2; } .ps3-span-3 { grid-column: span 3; }
|
|
.ps3-span-4 { grid-column: span 4; } .ps3-span-6 { grid-column: span 6; } .ps3-span-8 { grid-column: span 8; } .ps3-span-12 { grid-column: span 12; }
|
|
.ps3-element { min-width: 0; }
|
|
.ps3-elementHeading { margin: 0; font-size: 15px; font-weight: 600; }
|
|
.ps3-label { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 600; }
|
|
.ps3-required { color: $red-dark; }
|
|
.ps3-description { display: block; margin: 6px 0 0; color: $neutral-secondary; font-size: 12px; line-height: 1.5; }
|
|
.ps3-controlRow { display: flex; align-items: stretch; }
|
|
.ps3-input, .ps3-textarea { width: 100%; border: 1px solid $neutral-tertiary; border-radius: 2px; background: $white; color: $neutral-primary; font: inherit; font-size: 14px; }
|
|
.ps3-input { height: 36px; padding: 0 10px; }
|
|
.ps3-textarea { min-height: 180px; padding: 10px; resize: vertical; line-height: 1.5; }
|
|
.ps3-listEditor { min-height: 120px; }
|
|
.ps3-input:focus, .ps3-textarea:focus { border-color: $theme-primary; outline: 1px solid $theme-primary; }
|
|
.ps3-textarea[aria-invalid='true'] { border-color: $red-dark; }
|
|
.ps3-suffix { display: flex; align-items: center; padding: 0 10px; border: 1px solid $neutral-tertiary; border-left: 0; background: $neutral-lighter; font-size: 12px; }
|
|
.ps3-code { font-family: Consolas, 'Courier New', monospace; font-size: 12px; }
|
|
.ps3-fieldError, .ps3-errorText { margin-top: 5px; color: $red-dark; font-size: 12px; }
|
|
.ps3-divider { height: 1px; align-self: center; background: $neutral-light; }
|
|
|
|
.ps3-notice { padding: 13px 15px; border-left: 4px solid $theme-primary; background: $theme-lighter-alt; }
|
|
.ps3-notice-warning { border-left-color: #ca5010; background: #fff4ce; }
|
|
.ps3-notice-danger { border-left-color: $red-dark; background: #fde7e9; }
|
|
.ps3-notice-success { border-left-color: $green; background: #dff6dd; }
|
|
.ps3-noticeTitle { display: block; margin-bottom: 3px; }
|
|
.ps3-noticeText { margin: 0; line-height: 1.5; }
|
|
|
|
.ps3-toggle { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 10px; cursor: pointer; }
|
|
.ps3-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
|
|
.ps3-toggleVisual { position: relative; width: 40px; height: 20px; margin-top: 2px; border: 1px solid $neutral-secondary; border-radius: 10px; background: $white; }
|
|
.ps3-toggleVisual::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: $neutral-secondary; transition: left .12s ease; }
|
|
.ps3-toggle input:checked + .ps3-toggleVisual { border-color: $theme-primary; background: $theme-primary; }
|
|
.ps3-toggle input:checked + .ps3-toggleVisual::after { left: 23px; background: $white; }
|
|
.ps3-toggle input:focus + .ps3-toggleVisual { outline: 2px solid $theme-primary; outline-offset: 2px; }
|
|
.ps3-toggleContent .ps3-description { margin-top: 2px; }
|
|
|
|
.ps3-choiceCards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
|
|
.ps3-choiceCard { position: relative; display: block; min-height: 90px; padding: 15px; border: 1px solid $neutral-light; border-radius: 4px; cursor: pointer; }
|
|
.ps3-choiceCard:hover { border-color: $theme-primary; background: $theme-lighter-alt; }
|
|
.ps3-choiceCard input { position: absolute; top: 14px; right: 14px; }
|
|
.ps3-choiceCard.is-selected { border: 2px solid $theme-primary; padding: 14px; background: $theme-lighter-alt; }
|
|
.ps3-choiceTitle, .ps3-choiceContent { display: block; }
|
|
|
|
.ps3-selectedItem, .ps3-pickerItem { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px; border: 1px solid $neutral-light; border-radius: 4px; background: $neutral-lighter-alt; }
|
|
.ps3-selectedTitle, .ps3-mono { display: block; }
|
|
.ps3-mono { margin-top: 3px; color: $neutral-secondary; font-family: Consolas, 'Courier New', monospace; font-size: 11px; word-break: break-all; }
|
|
.ps3-bindingList, .ps3-pickerResults { display: grid; gap: 8px; }
|
|
.ps3-bindingHeader { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
|
|
.ps3-binding { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid $neutral-light; border-radius: 4px; }
|
|
.ps3-bindingTitle { display: block; }
|
|
.ps3-emptyInline { margin: 0; padding: 14px; color: $neutral-secondary; text-align: center; }
|
|
|
|
.ps3-preview { border: 1px solid $neutral-light; border-radius: 4px; }
|
|
.ps3-previewTitle { padding: 12px 14px; cursor: pointer; font-weight: 600; }
|
|
.ps3-previewCode { max-height: 440px; margin: 0; padding: 14px; overflow: auto; border-top: 1px solid $neutral-light; background: $neutral-lighter-alt; white-space: pre-wrap; }
|
|
.ps3-summaryTable { width: 100%; border-collapse: collapse; }
|
|
.ps3-summaryTable td { padding: 8px 10px; border-bottom: 1px solid $neutral-light; word-break: break-word; }
|
|
.ps3-summaryTable td:first-child { width: 28%; color: $neutral-secondary; font-weight: 600; }
|
|
|
|
.ps3-actionBar { position: sticky; bottom: 12px; z-index: 3; display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding: 14px; border: 1px solid $neutral-light; border-radius: 6px; background: rgba(255,255,255,.96); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
|
|
.ps3-button { min-height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: 2px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; }
|
|
.ps3-button-primary { border-color: $theme-primary; background: $theme-primary; color: $white; }
|
|
.ps3-button-primary:hover { border-color: $theme-dark; background: $theme-dark; }
|
|
.ps3-button-secondary { border-color: $neutral-tertiary; background: $white; color: $neutral-primary; }
|
|
.ps3-button-secondary:hover { border-color: $theme-primary; color: $theme-primary; }
|
|
.ps3-button:focus { outline: 2px solid $theme-primary; outline-offset: 2px; }
|
|
.ps3-button:disabled { cursor: default; opacity: .45; }
|
|
|
|
.ps3-modalBackdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.48); }
|
|
.ps3-modal { width: 100%; max-width: 760px; max-height: calc(100vh - 48px); padding: 22px; overflow: auto; border-radius: 6px; background: $white; color: $neutral-primary; box-shadow: 0 12px 40px rgba(0,0,0,.3); }
|
|
.ps3-modal-large { max-width: 1120px; }
|
|
.ps3-modal h2 { margin: 0 0 14px; }
|
|
.ps3-modal > .ps3-label { margin-top: 14px; }
|
|
.ps3-dialogStatus { min-height: 42px; padding: 10px 0; color: $neutral-secondary; }
|
|
.ps3-dialogActions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
|
|
.ps3-pickerResults { max-height: 460px; margin: 14px 0; overflow: auto; }
|
|
.ps3-empty, .ps3-accessDenied { padding: 28px; border: 1px solid $neutral-light; border-radius: 6px; background: $white; text-align: center; }
|
|
|
|
@media (max-width: 800px) {
|
|
.ps3-shell { padding: 12px; }
|
|
.ps3-hero { padding: 22px 18px; }
|
|
.ps3-title { font-size: 25px; }
|
|
.ps3-tabs { flex-direction: column; border-bottom: 0; }
|
|
.ps3-tab { width: 100%; border-bottom: 0; border-left: 3px solid transparent; text-align: left; }
|
|
.ps3-tab.is-active { border-left-color: $theme-primary; }
|
|
.ps3-span-1, .ps3-span-2, .ps3-span-3, .ps3-span-4, .ps3-span-6, .ps3-span-8 { grid-column: span 12; }
|
|
.ps3-choiceCards { grid-template-columns: 1fr; }
|
|
.ps3-providerHeader { display: block; }
|
|
.ps3-storageBadge { display: inline-block; margin-top: 12px; }
|
|
.ps3-actionBar { display: grid; }
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.ps3-hero, .ps3-button-primary, .ps3-toggle input:checked + .ps3-toggleVisual { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
|
|
.ps3-section, .ps3-providerHeader, .ps3-actionBar { border: 1px solid CanvasText; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ps3-toggleVisual::after { transition: none; }
|
|
}
|