import styles from '../RssApp.module.scss';
    let newsElement = (element: IRssItem)=> { //Newly added
        return (
              <div className = {styles.row} >
                  <div className={styles.myTitle} style={{fontSize: '30px'}}>{element.title}</div>
                  <div className={ styles.description }>{element.description}</div>

                  <div>{element.author}</div>
              </div>
        );
    };

    return (
      <div className = {styles.column}>

          <DefaultButton
            data-automation-id="test"
            text="Settings"
            onClick={this._showPanel}
          />
          {this.state.items.map(newsElement)}
          {settingsPanel}
      </div>


    );

// @import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';



 .rssApp {
     .myTitle{
        background-color: blue;
      }
//   .container {
//     max-width: 800px;
//     margin: 0px auto;
//     box-shadow: 0 2px 4px 0 rgba(90, 21, 21, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
//   }

//   .row{
//     background-color: blue;
//   }

//   .row {
//     background-color: black;
//   }

//   .column {
//     @include ms-Grid-col;
//     @include ms-lg10;
//     @include ms-xl8;
//     @include ms-xlPush2;
//     @include ms-lgPush1;

//   }

//   .title {
//     @include ms-font-l;
//     @include ms-fontColor-white;
//     background-color: $ms-color-themePrimary;
//   }

//   .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;
//     }
//   }

 }

/* tslint:disable */
require("./RssApp.module.css");
const styles = {
  rssApp: 'rssApp_9a4695d5',
  container: 'container_9a4695d5',
  row: 'row_9a4695d5',
  column: 'column_9a4695d5',
  'ms-Grid': 'ms-Grid_9a4695d5',
  myTitle: 'myTitle_9a4695d5',
  //title: 'title_9a4695d5',
  subTitle: 'subTitle_9a4695d5',
  description: 'description_9a4695d5',
  button: 'button_9a4695d5',
  label: 'label_9a4695d5',
};

export default styles;
/* tslint:enable */