FLUID-5561: Convert Pager CSS to Stylus

Description

Re-implement the styling using the Stylus syntax.
https://github.com/fluid-project/infusion/tree/master/src/components/pager/css

http://wiki.fluidproject.org/display/fluid/Stylus+and+How+to+Use+It+in+Infusion

Comments

• Dinuka Desilva commented 2016-03-04T11:56:11.814-0500

  Hi @Justin Obara

  I just send a pull request to this, Appreciate if you could look in.

• Cindy Li commented 2016-03-11T10:29:19.738-0500

  When I was testing Dinuka's pull request, I realized some stylings in the Pager.css file are no longer valid, such as at this line - https://github.com/fluid-project/infusion/blob/master/src/components/pager/css/Pager.css#L20, the selector ```fl-pager-ui``` that is meant to be an umbrella selector for the pager UI doesn't appear in any demo or example markups or javascript code. Most, or probably all, pager styling on the demo (https://github.com/fluid-project/infusion/blob/master/demos/pager/index.html) comes from the demo css file, in this demo - https://github.com/fluid-project/infusion/blob/master/demos/pager/css/pager.css. There are other pager css files for other pager examples in this repository. You can search the repo using ```pager.css```.

  This brings some thoughts of extending the coverage of this JIRA by revisiting the pager css contents, including css files for the Pager component, demos and examples, to:

  1. Remove the parts in the component Pager.css that are no longer valid;
  2. Better make use the css in the demo (or example) pager css files by moving the sensible pieces into the component Pager css file;
  3. Of course, the new component Pager.css is written in stylus.

• Justin Obara commented 2016-03-14T09:30:10.772-0400

  I suppose it should be explore if the fl-pager-ui class should be put into the demos, or removed from the component CSS.

• Dinuka Desilva commented 2016-03-15T03:48:58.078-0400

  Yeah... But, also I feel like no point of having fl-theme-bw class too. Because, it seems like a duplicate.

  /***********************************************************/
  /** THEMES - High Contrast **/
  /* Pager data */
  .fl-theme-bw .fl-pager .fl-pager-data {
      .fl-pager-desc {
          background: url(../images/arrow-up.png) no-repeat right;
      }
      .fl-pager-asc {
          background: url(../images/arrow-dn.png) no-repeat right;
      }
  }
  

• Cindy Li commented 2016-03-15T09:24:43.542-0400

  Thanks for pointing this out, @@Dinuka Desilva.

  I believe the original idea of having "high contrast" section in the pager css is to allow Pager to work with one of our other components - UI Options. You can try UI Options demo at http://build.fluidproject.org/infusion/demos/uiOptions/.

  However, this section does look incomplete since it only handles "black on white" theme and is not used in any pager demo or examples. I agree that it (as well as the handling of the high contrast themes) can be removed from the pager component css.

  @@Justin Obara, let us know if you have other thoughts. Thanks.

• Dinuka Desilva commented 2016-03-15T11:46:12.887-0400

  So, we can add those required classes and images according to that.
  Shall I work on it.

• Cindy Li commented 2016-03-15T11:59:26.650-0400

  @@Dinuka Desilva If you meant to add classes and images for high contrast themes, I don't think it's necessary since we first need to have a design of how Pager should look like with high contrast themes, which is worth a separate JIRA.

• Dinuka Desilva commented 2016-03-17T22:54:18.326-0400

  Yeah......... at this point I have updated pager css file only thing which have been used which means I have removed fl-theme-bw and ui-options from it since they haven't been used any where.

  So, are we going to merge my changes and do the theme design changes as another jira or are we going to do everything in another jira.

• Cindy Li commented 2016-03-18T10:10:27.452-0400

  @@Dinuka Desilva, I left a comment on your pull request:

  "actually another pull request #685 is modifying and consolidating the pager component and demo css files. The stylus conversion should happen after that when we have a clean component css."

• Justin Obara commented 2021-03-23T12:48:32.377-0400

  As part of the work on FLUID-6496 the CSS Preprocessing in Infusion was migrated to Sass