Skip to content

Instantly share code, notes, and snippets.

@mikezimm

mikezimm/my.module.scss

Last active February 21, 2020 05:23
Download ZIP

Revisions

  1. mikezimm revised this gist Feb 21, 2020. No changes.
  2. mikezimm revised this gist Feb 21, 2020. 1 changed file with 13 additions and 8 deletions.
    21 changes: 13 additions & 8 deletions my.module.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,16 +1,21 @@
    @import '~office-ui-fabric-react/dist/sass/References.scss';

    .myWebPartClass {

    //Key is using this format.... and reference this page for more details
    //https://www.w3.org/TR/CSS21/selector.html%23id-selectors#type-selectors
    //Basically, this will get any child elements of className={ styles.listViewTransparent }
    //Then find only items where the property data-automationid = DetailsRowFields.
    //You can use this syntax and others to filter on any element property, wildcard etc....

    .listViewTransparent *[data-automationid="DetailsRowFields"] {
    background-color: #eaeaea ;
    transition: all 0.3s ease;
    }
    background-color: #eaeaea ;
    transition: all 0.3s ease;
    }

    .listViewTransparent *[data-automationid="DetailsRowFields"] :hover {
    background-color: #c2c2c2 ;
    color: #212121;
    transition: all 0.3s ease;
    }
    background-color: #c2c2c2 ;
    color: #212121;
    transition: all 0.3s ease;
    }

    }
  3. mikezimm created this gist Feb 21, 2020.
    16 changes: 16 additions & 0 deletions my.module.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    @import '~office-ui-fabric-react/dist/sass/References.scss';

    .myWebPartClass {

    .listViewTransparent *[data-automationid="DetailsRowFields"] {
    background-color: #eaeaea ;
    transition: all 0.3s ease;
    }

    .listViewTransparent *[data-automationid="DetailsRowFields"] :hover {
    background-color: #c2c2c2 ;
    color: #212121;
    transition: all 0.3s ease;
    }

    }
    13 changes: 13 additions & 0 deletions myElement.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    export function xyz(){

    let listView =
    <div
    className={ styles.listViewTransparent }>
    <ListView
    items={theseAreItems}
    viewFields={viewFields}
    />
    </div>;


    }