Combining stylesheets, compilation error - haskell

I have such issue:
`(line 7, column 99880):
unexpected "m"
expecting "-->"
Code: combineStylesheets
'StaticR [css_bootstrap_min_css, css_normalize_min_css]
In a stmt of a 'do' block:
$(combineStylesheets
'StaticR [css_bootstrap_min_css, css_normalize_min_css])
In the second argument of `($)', namely
`do { $(combineStylesheets 'StaticR [css_bootstrap_min_css, ....]);
$(combineScripts 'StaticR [js_jquery_1_11_0_min_js, ....]);
$(widgetFile "default-layout") }'
In a stmt of a 'do' block:
pc <- widgetToPageContent
$ do { $(combineStylesheets
'StaticR [css_bootstrap_min_css, ....]);
$(combineScripts 'StaticR [js_jquery_1_11_0_min_js, ....]);
$(widgetFile "default-layout") }`
What can it be? If I remove normalize.min.css's FilePath from the combineStylesheets, it will work. If I yesod devel in the folder, it will work. But ghci & cabal clean && cabal configure && cabal build will fail.
Here is the corresponding code:
pc <- widgetToPageContent $ do
$(combineStylesheets 'StaticR
[ css_bootstrap_min_css
, css_normalize_min_css
])
$(combineScripts 'StaticR
[ js_jquery_1_11_0_min_js
, js_bootstrap_min_js
])
$(widgetFile "default-layout")
giveUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
The problem in the css_normalize_min_css
Here is contents of the normalize.css
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined for any HTML5 element in IE 8/9.
* Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
* Correct `block` display not defined for `main` in IE 11.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* 1. Correct `inline-block` display not defined in IE 8/9.
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
*/
audio,
canvas,
progress,
video {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address `[hidden]` styling not present in IE 8/9/10.
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 1. Address box sizing set to `content-box` in IE 8/9/10.
* 2. Remove excess padding in IE 8/9/10.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
* `font-size` values of the `input`, it causes the cursor style of the
* decrement button to change from `default` to `text`.
*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
* Safari (but not Chrome) clips the cancel button when the search input has
* padding (and `textfield` appearance).
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct `color` not being inherited in IE 8/9/10/11.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
overflow: auto;
}
/**
* Don't inherit the `font-weight` (applied by a rule above).
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
*/
optgroup {
font-weight: bold;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
Here is contents of normalize.min.css:
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
Both leads to compilation error.
But if I write normalize first, it works both in yesod devel and cabal build
$(combineStylesheets 'StaticR
[ css_normalize_min_css
, css_bootstrap_min_css
])
I can see such strange behavior only on the minified css.

Related

solving my Grid with sass?

I have been trying to solve my grid and I'm not sure why my columns are not stacking up next to each other. when I am making a div with a container and inside it a row and then 12 columns the columns are taking the full width then staking below
$screen-width: 1147px;
$number-of-columns: 12;
$gutter: 30px;
$column-width: $screen-width/$number-of-columns;
$padding: $gutter / 2;
$total-width: ($column-width * $number-of-columns) + ($gutter * ($number-of-columns - 1));
$gutter-width:($gutter / $total-width) * 100%;
#for $i from 1 through $number-of-columns {
.column-#{$i} {
width: ( $i /$number-of-columns ) * 100%;
background:#ccc;
float: left;
margin-left: $gutter;
}
}
#mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Set Base Container
.container {
max-width:$total-width;
margin:0px auto;
padding: 0 $padding 0 $padding;
background: blue;
#include clearfix;
}
.row {
width: 100%;
margin: 0;
background: green;
#include clearfix;
}
You are dividing the available space by the number of columns, but then you are adding a margin to the left of each column So if you have 10 columns then each column is 10% of the total width + gutters. This adds up to more than 100% and is pushing three of your columns onto the next line.
Most grid systems solve this in one of two ways...
A) use css calc() to calculate the width of each column by dividing the space by the number of columns then deducting the gutter. E.g. calc(10% - 30px);
B) Use padding on each column to create the gutters and add it equally on both sides. E.g. padding:0 15px; This will give you an even spread of the columns and require no calculations but the downside is you'll need -15px margin on each side of your container to accommodate it and you'll need an extra HTML tag inside each column.
So I have managed to add that into a function, But now I have left margin what seems to be happening, which I'm not sure why is that, I have tried, things like putting a negative margin on the row.
$screen-width: 2147px;
$number-of-columns: 12;
$gutter: 30px;
$column-width: $screen-width/$number-of-columns;
$padding: $gutter / 2;
$total-width: ($column-width * $number-of-columns) + ($gutter * ($number-of-columns - 1));
$gutter-width:($gutter / $total-width) * 100%;
#function grid-width($cols, $has-gutter:false) {
#if $has-gutter {
#return calc(((100% / #{$number-of-columns}) * #{$cols}) - #{$gutter});
}
#else {
#return calc((100% / #{$number-of-columns}) * #{$cols});
}
}
#for $i from 1 through $number-of-columns {
.column-#{$i} {
width: grid-width(#{$i}, true);
background:#ccc;
display: inline-block;
margin-left: $gutter;
float: left;
}
}
#mixin clearfix() {
&:before,
&:after {
content: " "; // 1
display: table; // 2
}
&:after {
clear: both;
}
}
// Set Base Container
.container {
max-width:$total-width;
margin: 0px auto;
height:100px;
background: blue;
#include clearfix;
}
.row {
width: 100%;
height:50px;
background: green;
#include clearfix;
}

compile less preserving blank lines

I have the following string:
/* file: /Users/andrepadez/develop/vigour-io/gaston/test/to-compile/src/styles.less */
.main {
color: white;
}
/* file: /Users/andrepadez/develop/vigour-io/gaston/test/to-compile/global.less */
body {
background-color: black;
}
/* file: /Users/andrepadez/develop/vigour-io/gaston/test/to-compile/src/module/styles.less */
.module {
background: blue;
}
/* file: /Users/andrepadez/develop/vigour-io/gaston/test/to-compile/some-other-global.less */
body {
color: red;
}
and the following code:
var less = require('less');
less.render(str)
.then(function(output){
console.log(output.css);
});
which gives me:
/* file: /Users/andrepadez/develop/vigour-io/gaston/test/to-compile/src/styles.less */
.main {
color: white;
}
/* file: /Users/andrepadez/develop/vigour-io/gaston/test/to-compile/global.less */
body {
background-color: black;
}
/* file: /Users/andrepadez/develop/vigour-io/gaston/test/to-compile/src/module/styles.less */
.module {
background: blue;
}
/* file: /Users/andrepadez/develop/vigour-io/gaston/test/to-compile/some-other-global.less */
body {
color: red;
}
I need my output.css to preserve the original blank lines. Is there an option i could pass to the render function to do this?

Customizing Sharepoint 2013 List Header

My company just converted to SP 2013 and I am now trying to create a new list. I have been trying to customize my header to have the following attribute:
Wrapped Text
Font Color Blue
Text Allignment - Center
Vertical alignment - bottom
I have found a script that allowed me to wrap the headers on all of the columns and I tried adding to it the color and text allignment. What I keep running into is that it is only updating the color and allignment on my one header that is not filterable. I have tried to look up what each of the .ms items mean because I am assuming that is my issue, but I can not seem to find the answer to that question. Any help would be greatly appreciated!
<style>
.ms-vh, .ms-vh2-nofilter, .ms-vh2-nograd, .ms-vh2, .ms-vb{
white-space: normal;
color:#0000ff;
text-align:center;
vertical-align:text-bottom;
}
</style>
I have done some test and this is the css file
---------- Table Rows ----------*/
ms-vh-div,ms-vh2-nofilter,ms-vh-div{
background: #2E4C70;
}
/* Set background for every row */
.ms-listviewtable > tbody > tr {
background: white;
}
Set border for every row */
.ms-listviewtable > tbody > tr td{
border-bottom: 1px solid #AFAFAF !important; /* !important needed over override SharePoint inline style */
}
Set background for every alternating row */
.ms-listviewtable > tbody > tr.ms-alternating {
background: #E2E3E5;
} Table Header Row
Remove background set in SharePoints general data table style */
.ms-listviewtable tr.ms-viewheadertr {
background: transparent;
width:100%;
}
.ms-viewheadertr,
.ms-listviewtable {
width:100%;
}tr.ms-viewheadertr > th.ms-vh2-nograd { color:white;}
Modify background color */
tr.ms-viewheadertr > th.ms-vh2-nograd,
tr.ms-viewheadertr > th.ms-vh-icon, /* Input box and attachment icon */
tr.ms-viewheadertr > th.ms-vh, /* Text */
tr.ms-viewheadertr > th.ms-vh2 ,
tr.ms-viewheadertr >th.ms-vh2-nofilter,
tr.ms-viewheadertr >th.ms-vh-div/* Text */ {
background: #2E4C70;
}
.ms-viewheadertr {
width:100%;
}
Modify background color on hover */
tr.ms-viewheadertr > th.ms-vh:hover,
tr.ms-viewheadertr > th.ms-vh2:hover {
background-color: #273C51;
border-color: #273C51;
}
Modify font color */
.ms-viewheadertr a,
.ms-viewheadertr div {
color: grey;
}
Modify font color on hover */
.ms-viewheadertr a:hover,
.ms-viewheadertr div:hover {
color: blue;
}
more details heresharepoint experience
Add a Script Editor web part, and insert this:
/*Choose your background colour*/
.ms-viewheadertr{
background:#00426A;
}
/*Choose font style*/
.ms-vh2-nofilter, .ms-vh2, a.ms-headerSortTitleLink {
font-weight:bold;
color:white;
font-size:1.05em;
}
</style>
With thanks to Nate Chamberlain:
https://natechamberlain.com/2018/07/20/customize-styles-formatting-of-sharepoint-list-column-header-rows/
The formatting does not apply to multiple line of text field.

Vertically align 2 different size divs

I got 2 divs inside parent box.
I want to make the upper one to take 70% of the parent box and the second the other 30%.
I don't want to use position absolute.
Any ideas?
**********************
* top div *
* top div *
* top div *
* top div *
* top div *
* top div *
**********************
* bottom div *
**********************
EDIT:
The parent box is floating,
#mright {
width : 45%;
float:right;
margin-right: 5%;
}
Like I commented above. Is this what you wanted?
#top{
width: 100%;
height: 70%;
}
#parent{
width: 45%;
height: 80%;
border: 1px solid black;
float: right;
margin: 5%;
}
#bottom{
width: 100%;
height: 30%;
}
Jsfiddle.
yes, make float:left both the divs; like:
#parentDiv{ width:100%; }
#topDiv{ width:70%; }
#bottomDiv{ width: 30%; }
#topDiv,#bottomDiv{ float:left; }
Use Jquery:
$(window).resize(function () {
$('.topDiv').height(($(window).height() / 10) * 7);
$('.bottomDiv').height(($(window).height() / 10) * 3);
$('.bottomDiv').css('margin-top', $('.topDiv').height());
$('.bottomDiv').css('margin-left', $('.topDiv').width() * -1);
});
$('.topDiv').height(($(window).height() / 10) * 7);
$('.bottomDiv').height(($(window).height() / 10) * 3);
$('.bottomDiv').css('margin-top', $('.topDiv').height());
$('.bottomDiv').css('margin-left', $('.topDiv').width() * -1);
http://jsfiddle.net/Hive7/PzVCR/1/

Select drop down menu for nav on collapse

I’m not a fan of the collapsed 3 line nav button when bootstrap collapses for smaller viewports. Is there a way to get the navbar collapse to a select drop down menu, as well as place it somewhere else on the page, other than in the top right? Just like this: http://filamentgroup.com/examples/rwd-nav-patterns/
Looking at what happens on the filamentgroup site, you can see that below a certain width, the body gets the class nav-menu and removes if when sized larger. This is their rwd-nav.js complete with comments:
jQuery(function($){
$('.nav-primary')
// test the menu to see if all items fit horizontally
.bind('testfit', function(){
var nav = $(this),
items = nav.find('a');
$('body').removeClass('nav-menu');
// when the nav wraps under the logo, or when options are stacked, display the nav as a menu
if ( (nav.offset().top > nav.prev().offset().top) || ($(items[items.length-1]).offset().top > $(items[0]).offset().top) ) {
// add a class for scoping menu styles
$('body').addClass('nav-menu');
};
})
// toggle the menu items' visiblity
.find('h3')
.bind('click focus', function(){
$(this).parent().toggleClass('expanded')
});
// ...and update the nav on window events
$(window).bind('load resize orientationchange', function(){
$('.nav-primary').trigger('testfit');
});
});
Then in their rwd-nav.css, this repositions based on width
/* Media queries
------------------------------ */
#media screen and (min-width: 640px) {
.nav-primary,
.nav-primary ul {
float: left;
}
.nav-primary ul {
float: left;
}
.nav-primary li {
float: left;
font-size: 1.5em;
border-bottom: 0;
}
}
#media screen and (min-width: 910px) {
.nav-primary {
float: right;
clear: none;
}
}
Hope that helps!

Resources