Bug 20427: Convert OPAC LESS to SCSS

This patch converts the OPAC LESS files to SCSS. In the process of
converting opac.less (and other .less files) to .scss, I have improved
the completeness of the nesting, reordered properties, and in general
done cleanup based on rules in .scss-lint.yml. All of these changes
should have no impact on the style of the OPAC.

This patch modifies the commands used to compile CSS so that OPAC and
staff assets can be processed separately:

'yarn build' <-- Builds the staff client assets by default
'yarn build --view opac' <-- Builds OPAC assets

To test, apply the patch and compile the CSS by running the command
above (or apply the follow-up patch with compiled CSS).

Do a thorough review of the OPAC, taking care to cover as many pages as
possible and checking responsive behavior at the same time. There should
be no visual differences in the OPAC before and after applying the
patch.

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

.gitignore

@@ -3,4 +3,5 @@
 /Makefile
 /pm_to_blib
 node_modules/
+koha-tmpl/opac-tmpl/bootstrap/css/maps/
 koha-tmpl/intranet-tmpl/prog/css/maps/

.scss-lint.yml

@@ -0,0 +1,245 @@
+# Default application configuration that all configurations inherit from.
+
+scss_files: "**/*.scss"
+plugin_directories: ['.scss-linters']
+
+# List of gem names to load custom linters from (make sure they are already
+# installed)
+plugin_gems: []
+
+# Default severity of all linters.
+severity: warning
+
+linters:
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BemDepth:
+    enabled: false
+    max_elements: 1
+
+  BorderZero:
+    enabled: true
+    convention: zero # or `none`
+
+  ChainedClasses:
+    enabled: false
+
+  ColorKeyword:
+    enabled: false
+
+  ColorVariable:
+    enabled: false
+
+  Comment:
+    enabled: false
+    style: silent
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DisableLinterReason:
+    enabled: false
+
+  DuplicateProperty:
+    enabled: true
+
+  ElsePlacement:
+    enabled: true
+    style: same_line # or 'new_line'
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: true
+
+  EmptyRule:
+    enabled: true
+
+  ExtendDirective:
+    enabled: false
+
+  FinalNewline:
+    enabled: true
+    present: true
+
+  HexLength:
+    enabled: false
+    style:  short # or 'long'
+
+  HexNotation:
+    enabled: true
+    style: uppercase # or 'lowercase'
+
+  HexValidation:
+    enabled: true
+
+  IdSelector:
+    enabled: false
+
+  ImportantRule:
+    enabled: true
+
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: true
+    allow_non_nested_indentation: false
+    character: space # or 'tab'
+    width: 4
+
+  LeadingZero:
+    enabled: true
+    style: exclude_zero # or 'include_zero'
+
+  MergeableSelector:
+    enabled: true
+    force_nesting: true
+
+  NameFormat:
+    enabled: true
+    allow_leading_underscore: true
+    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
+
+  NestingDepth:
+    enabled: true
+    max_depth: 4
+    ignore_parent_selectors: false
+
+  PlaceholderInExtend:
+    enabled: true
+
+  PrivateNamingConvention:
+    enabled: false
+    prefix: _
+
+  PropertyCount:
+    enabled: false
+    include_nested: false
+    max_properties: 10
+
+  PropertySortOrder:
+    enabled: true
+    ignore_unspecified: false
+    min_properties: 2
+    separate_groups: false
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+    disabled_properties: []
+
+  PseudoElement:
+    enabled: true
+
+  QualifyingElement:
+    enabled: true
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 4
+
+  SelectorFormat:
+    enabled: false
+    convention: hyphenated_lowercase # or 'classic_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
+
+  Shorthand:
+    enabled: true
+    allowed_shorthands: [1, 2, 3, 4]
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: false
+
+  SingleLinePerSelector:
+    enabled: true
+
+  SpaceAfterComma:
+    enabled: true
+    style: one_space # or 'no_space', or 'at_least_one_space'
+
+  SpaceAfterComment:
+    enabled: false
+    style: one_space # or 'no_space', or 'at_least_one_space'
+    allow_empty_comments: true
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceAfterVariableColon:
+    enabled: false
+    style: one_space # or 'no_space', 'at_least_one_space' or 'one_space_or_newline'
+
+  SpaceAfterVariableName:
+    enabled: true
+
+  SpaceAroundOperator:
+    enabled: true
+    style: one_space # or 'at_least_one_space', or 'no_space'
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space # or 'new_line'
+    allow_single_line_padding: false
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 1
+
+  StringQuotes:
+    enabled: true
+    style: double_quotes # or single_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingWhitespace:
+    enabled: true
+
+  TrailingZero:
+    enabled: false
+
+  TransitionAll:
+    enabled: false
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: true
+
+  UrlQuotes:
+    enabled: true
+
+  VariableForProperty:
+    enabled: false
+    properties: []
+
+  VendorPrefix:
+    enabled: true
+    identifier_list: base
+    additional_identifiers: []
+    excluded_identifiers: []
+
+  ZeroUnit:
+    enabled: true
+
+  Compass::*:
+    enabled: false

gulpfile.js

@@ -26,28 +26,36 @@ var sassOptions = {
     precision: 3
 }
 
+if( gutil.env.view == "opac" ){
+    var css_base = OPAC_CSS_BASE;
+    var js_base = OPAC_JS_BASE;
+} else {
+    var css_base = STAFF_CSS_BASE;
+    var js_base = STAFF_JS_BASE;
+}
+
 gulp.task( "default", ['watch'] );
 
 // CSS processing for development
 gulp.task('css', function() {
-    return gulp.src( STAFF_CSS_BASE + "/src/**/*.scss" )
+    return gulp.src( css_base + "/src/**/*.scss" )
       .pipe(sourcemaps.init())
       .pipe(sass( sassOptions ).on('error', sass.logError))
       .pipe(autoprefixer())
       .pipe(sourcemaps.write('./maps'))
-      .pipe(gulp.dest( STAFF_CSS_BASE ));
+      .pipe(gulp.dest( css_base ));
 });
 
 // CSS processing for production
 
 gulp.task('build', function() {
-    return gulp.src( STAFF_CSS_BASE + "/src/**/*.scss" )
+    return gulp.src( css_base + "/src/**/*.scss" )
       .pipe(sass( sassOptions ).on('error', sass.logError))
       .pipe(autoprefixer())
       .pipe(cssnano())
-      .pipe(gulp.dest( STAFF_CSS_BASE ));
+      .pipe(gulp.dest( css_base ));
 });
 
 gulp.task('watch', function(){
-    gulp.watch( STAFF_CSS_BASE + "/src/**/*.scss", ['css'] );
+    gulp.watch( css_base + "/src/**/*.scss", ['css'] );
 });

koha-tmpl/opac-tmpl/bootstrap/css/src/_mixins.scss

@@ -0,0 +1,10 @@
+$color: #999999;
+$links: #0076B2;
+
+@mixin shadowed {
+    box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .2 );
+}
+
+@mixin border-radius-all( $radius: 3px ) {
+    border-radius: $radius;
+}