SharePoint Aussehen von WebPart ändern
Das Aussehen von WebPart Elementen wird in der src\webparts\WebPart.module.css als HTML Style Blöcke geändert.
Hier der CSS Code für die Listen-Elemente
//--< Style: List >--- .list { color: #333333; font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 14px; font-weight: normal; box-sizing: border-box; margin: 10; padding: 10; line-height: 50px; list-style-type: none; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); }
.listItem { color: #333333; vertical-align: center; font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 14px; font-weight: normal; box-sizing: border-box; margin: 0; padding: 0; box-shadow: none; *zoom: 1; padding: 9px 28px 3px; position: relative; } //--</ Style: List >--- |
Anschliessend wird der Style in einem Control angewendet, mit
<div class="${styles.List}"> |
@import '~office-ui-fabric-react/dist/sass/References.scss';
.webPart01 { .container { max-width: 700px; margin: 0px auto; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); }
.row { @include ms-Grid-row; @include ms-fontColor-white; background-color: $ms-color-themeDark; padding: 20px; }
.column { @include ms-Grid-col; @include ms-lg10; @include ms-xl8; @include ms-xlPush2; @include ms-lgPush1; }
.title { @include ms-font-xl; @include ms-fontColor-white; }
.subTitle { @include ms-font-l; @include ms-fontColor-white; }
.description { @include ms-font-l; @include ms-fontColor-white; }
.button { // Our button text-decoration: none; height: 32px;
// Primary Button min-width: 80px; background-color: $ms-color-themePrimary; border-color: $ms-color-themePrimary; color: $ms-color-white;
// Basic Button outline: transparent; position: relative; font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif; -webkit-font-smoothing: antialiased; font-size: $ms-font-size-m; font-weight: $ms-font-weight-regular; border-width: 0; text-align: center; cursor: pointer; display: inline-block; padding: 0 16px;
.label { font-weight: $ms-font-weight-semibold; font-size: $ms-font-size-m; height: 32px; line-height: 32px; margin: 0 4px; vertical-align: top; display: inline-block; } }
//--< Style: List >--- .list { color: #333333; font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 14px; font-weight: normal; box-sizing: border-box; margin: 10; padding: 10; line-height: 50px; list-style-type: none; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); }
.listItem { color: #333333; vertical-align: center; font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 14px; font-weight: normal; box-sizing: border-box; margin: 0; padding: 0; box-shadow: none; *zoom: 1; padding: 9px 28px 3px; position: relative; } //--</ Style: List >---
}
|