clean-css-cli Format media print code with clean-css-cli - clean-css

1. program with python excute clancss cli
I set level 2 and mergeMedia:off and the result is not well for me.
try:
#cmd = "cleancss -02 mergeMedia:off --compatibility ie8 -o {0} {1} ".format(dstFile, srcFile)
cmd = "cleancss -O2 mergeMedia:off;removeDuplicateMediaBlocks:off -o {0} {1} ".format(dstFile, srcFile)
os.system(cmd)
print("cleancss - {} - ok !".format(srcFile))
#os.remove(srcFile)
#os.rename(dstFile, srcFile)
except NameError as e:
print(e)
2. css source code
The style code like below.The first item "table" will be remove(see setp 3)
#media print {
table {
border: 1px solid black;
border-collapse: collapse;
table-layout: fixed;
}
table th {
border: 1px solid black;
}
table td {
border: 1px solid black;
}
.pageBreak {
page-break-after: always;
}
.noPrint {
display: none;
}
.borderable {
border: 2px solid black;
padding: 3px;
}
nav, aside {
display: none;
}
table.posprint {
border: 1px solid white;
border-collapse: collapse;
table-layout: fixed;
}
table.posprint th {
border: 1px solid white;
}
table.posprint td {
border: 1px solid white;
}
}
3. clean css output
The output of above setp 2 .
The first element was be removed and less brackets in the end .
#media print{border-collapse:collapse;table-layout:fixed}table td,table th{border:1px solid #000}.pageBreak{page-break-after:always}.noPrint{display:none}.borderable{border:2px solid #000;padding:3px}aside,nav{display:none}table.posprint{border:1px solid #fff;border-collapse:collapse;table-layout:fixed}table.posprint td,table.posprint th{border:1px solid #fff}
How can i change my program code and get the right output.
Thank you .

Related

How to add column separator in Grid created by using grid.mvc and bootstrap in MVC5?

I've created grid in MVC5 like
.
But I want a vertical line as a column separator like
I'm using grid.mvc (version: 3.0.0) of nugget package and default bootstrap for VS2013(MVC5).
Here is my Gridmvc.css
/***
* Grid.Mvc stylesheet http://gridmvc.codeplex.com/
* This file contains default styles for Grid.Mvc.
*/
/* Grid */
table.grid-table { margin: 0; }
table.grid-table .grid-wrap { padding: 0; position: relative; }
table.grid-table .grid-empty-text { color: #666; }
/* Grid headers */
table.grid-table .grid-header { position: relative; }
table.grid-table .grid-header .sorted-asc .grid-sort-arrow:after { content: " \2193"; }
table.grid-table .grid-header .sorted-desc .grid-sort-arrow:after { content: " \2191"; }
table.grid-table .grid-header > .grid-header-title { border: #999999 1px solid;height: 21px;background-color: #f0f0f0;text-overflow: ellipsis;overflow: hidden; }
/* Grid body */
/*table.grid-table tr.grid-row-selected td { background: #4888C2 !important; color: white; }*/
table.grid-table tr.grid-row-selected td { margin-bottom: 1px; padding-top: 0px; border: #000000 1px solid; height: 21px; }
/*table.grid-table tr.grid-row-selected a { color: white; }*/
table.grid-table tr.grid-row-selected a { margin-bottom: 1px; color: #000000; padding-top: 1px; border: #c4ddff 1px solid; height: 21px; background-color: #a7cdf0; }
/* Grid filtering */
input.grid-filter-input { padding: 4px; font-size: 13px; }
table.grid-table .grid-filter { position: relative; margin-top: 2px; float: right; width: 10px; height: 12px; }
table.grid-table .grid-filter-btn { cursor: pointer; display: block; width: 10px; height: 12px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJFJREFUKFNjkJSU/E8MZvj//78DMRhkoj+6bizYH2SiiIeHx2FjY+P/2DBIDqSGAQSOHTtmYWZm9hldEUgMJAdWBAJAHSzt7e056ApBYiA5qDIIAAoIhIaGroYpArFBYlBpVLB3715DmEIQGyqMCUDWwBRiWIkOYAqhXNwApMjX13c7lIsbgBQBrdWAcqGAgQEAdOGTrvsYKXIAAAAASUVORK5CYII=') no-repeat; }
table.grid-table .grid-filter-btn.filtered { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAJNJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2ZhZmb2GV0RSAwkB1YEAkAdLO3t7TnoCkFiIDmoMggACgiEhoauhikCsUFiUGlUsHfvXkOYQhAbKowJQNbAFGJYiQ5gCqFc3ACkyNfXdzuUixuAFAGt1YByoYCBAQAUDanUpFB4UQAAAABJRU5ErkJggg==') no-repeat; }
table.grid-table .grid-filter-buttons { padding: 0; }
table.grid-table .grid-filter-datepicker { font-size: 12px; }
table.grid-table .grid-filter-datepicker table td { padding: 1px!important; }
table.grid-table .grid-filter-datepicker .ui-datepicker { width: auto; }
table.grid-table .grid-dropdown-inner ul.menu-list li a.grid-filter-clear { white-space: nowrap; padding-left: 23px; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAMCAYAAABbayygAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAARpJREFUKFNjYGj//58o/P//fwdiMIOkpKQ/VhOQMFgNULWIh4fHYWNj4//YMEgOpIYBBI4dO2axOC/396GinP/O+vpwRVbGxl92+vluXm1kuASsEKiD5VB99aG3eTH/HxjL/A/RUPsfrqb6f7e21uutlhbRYEUwAFQskOLmun2+lND/0xxM/7dycXzd6OxoCpVGBduWLjXv4+f/v5WF+f9RbtYvfeysqlApBKhhY2Hcxsy0+xAL038nbe3/m8W4ss/Jcx2GSiPAal6uvGtczP9TFOXBHgGJ7RHlmLGOjy0UrAAGzgT7rn7urP/P3NDgv6+v73aQWAMzM+dqTtbJYAUwsNzeyuhImE8GSBHQYxpQYYYJQCcxMDAwAAB7/bt5uWh9FAAAAABJRU5ErkJggg=='); background-position: 3px center; background-repeat: no-repeat; }
table.grid-table .grid-filter-choose.choose-selected { background-color: white!important; cursor: default; color: #999; }
table.grid-table .grid-popup-additional { padding: 3px 0 0 0; }
/* POP-UP */
.grid-dropdown { font-weight: normal; left: -102px; top: 16px!important; min-width: 180px; }
.grid-dropdown-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABp0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuMTAw9HKhAAAAl0lEQVQoU42PMQuFMAyE6xN5gpOjjsIb/P9/o3O3zh27dY25kIPq8DBwmLT35WoQkUEVOmGec84CaW2q7+N+AdCD6M9SisQYTei1jsfyCeCu+vjFVGs1AN++94DRfUOfuNLoKUiyRC5y2F5I8NdaM4P/l0EswvBorQTnfxBhLMRih+2pklIy+eEtjQPu6MNZwIBNbwteMBd5X4ZGHcwL3QAAAABJRU5ErkJggg==") no-repeat; height: 8px; left: 99px; position: absolute; top: -8px; width: 14px; }
.grid-dropdown-inner { padding: 5px 7px; }
.grid-dropdown ul.menu-list { list-style-type: none; margin: 3px 0 0 0; padding: 0; }
.grid-dropdown ul.menu-list li a { text-decoration: none; background-position: 6px center; background-repeat: no-repeat; display: block; padding: 4px 5px; }
.grid-dropdown ul.menu-list li a:hover { background-color: #EEE; text-decoration: none; }
Added these two lines under GridBody in Gridmvc.css :
table.grid-table tr td {border-right: solid 1px #666;}
table.grid-table tr a {border-right: solid 1px #666;}
To add a right border to your table you need to apply it to your table headings and table data tags
Add this to your CSS and place it after the gridmvc.css.
td, th {
border-right: 4px solid black;
}
Hope this helps

Does Bootstrap 3 have a pre-built steps option for forms?

Couldn't find anything in the doc's but perhaps someone knows better or can suggest a work around using available properties to hack it together?
If not in bootstrap does anyone know of a gem (rails) or generator that can create the CSS/jQuery/JS?
You can also try this Bootstrap 3 Nav Wizard version on GitHub, LESS file is included:
https://github.com/acornejo/bootstrap-nav-wizard
demo here: http://acornejo.github.io/bootstrap-nav-wizard/
Preview (orig):
Preview (customized):
Maybe you are looking for this. Check the demo below. Just resize the window if it doesn't look like the image below.
Fiddle
HTML
<h3>Wizard</h3>
<div class="wizard">
<a><span class="badge">1</span> Set Global Properties</a>
<a><span class="badge">2</span> Specify Entry Scheme</a>
<a class="current"><span class="badge badge-inverse">3</span> Create Test Entry</a>
<a><span class="badge">4</span> Check Your Data and Generate Portal</a>
</div>
CSS (or SCSS instead)
.wizard a {
padding: 10px 12px 10px;
margin-right: 5px;
background: #efefef;
position: relative;
display: inline-block;
}
.wizard a:before {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #fff;
position: absolute;
content: "";
top: 0;
left: 0;
}
.wizard a:after {
width: 0;
height: 0;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #efefef;
position: absolute;
content: "";
top: 0;
right: -20px;
z-index: 2;
}
.wizard a:first-child:before,
.wizard a:last-child:after {
border: none;
}
.wizard a:first-child {
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.wizard a:last-child {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.wizard .badge {
margin: 0 5px 0 18px;
position: relative;
top: -1px;
}
.wizard a:first-child .badge {
margin-left: 0;
}
.wizard .current {
background: #007ACC;
color: #fff;
}
.wizard .current:after {
border-left-color: #007ACC;
}

p:fileupload how to set file name width?

Now I am using primefaces fileupload. I set width to fileupload. But when selecting long file names, filename is overflow. Like
How to solve this??? My css is
.ui-panelgrid tr,.ui-panelgrid td {
border: none;
}
.ui-fileupload .cancel {
display: none;
}
.ui-fileupload .progress {
display: none;
}
.ui-widget-content {
background: none;
border: 1px solid #A8A8A8;
color: #4F4F4F;
}
.ui-widget-header {
background: none;
border: none;
color: #333333;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
width: 450px;
}
.fileupload-content {
padding: 0.2em 0.4em;
}
.fileupload-with {
width: 600px;
}
You just have to fix your CSS, has been asked many times on SO in general. Since you are using PF fileUpload particularly you can use something like this.
.files td.name {
word-break:break-all;
}
More Info:
http://css-tricks.com/almanac/properties/w/word-break/

Webkit Scrollbar Error

I have a problem with my webkit scrollbar on the iPod/iPhone/iPad - the user can't scroll down. The scrollbar just looks like a floating line, and the page breaks halfway through. (It works fine in Chrome & Safari.)
Is there any way I can keep the scrollbar, but have it not be custom on apple products?
Here's my site, and here's my scrollbar code:
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
height: 10px;
}
::-webkit-scrollbar-button:vertical:increment {
background-color: #fff;
}
::-webkit-scrollbar-track-piece {
background-color: #eee;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #ccc;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 50px;
background-color: #ccc;
-webkit-border-radius: 3px;
}
html {
overflow: auto;
background-color: #FAFAFA;
-webkit-font-smoothing: antialiased;
}
body {
background: #FAFAFA;
font-family: arial, serif;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 10px;
overflow-y: scroll;
overflow-x: hidden;
color: #999;
}
You might have to load that scrollbar styling code from a separate stylesheet. Move it over to a new file, lets say scrollbars.css, and attach this code to your JavaScript:
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.search('iphone') == -1 && userAgent.search('ipod') == -1)
{
$('head').append('<link rel="stylesheet" href="scrollbars.css" type="text/css" />');
}
In your site, you have these styles in the main page:
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
height: 10px;
}
::-webkit-scrollbar-button:vertical:increment {
background-color: #fff;
}
::-webkit-scrollbar-track-piece {
background-color: #eee;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #ccc;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 50px;
background-color: #ccc;
-webkit-border-radius: 3px;
}
...
Take them and copy them over to a new file called scrollbars.css. Now, delete those old ones from your site completely. The JavaScript loads the scrollbar CSS file automagically.

CSS question. How can I get blueprint css to work rails tabnav widget?

I need a quick solution to getting some decent layout working within the tabnav widget display area. I'm already using blueprint css for other aspects of the layout but I don't have enough CSS chops to figure out how to get blueprint containers to display within the tabnav's content area.
The tabnav's content area is <div class="main_tabnav_content" id="main_tabnav_content">
and this is the related css:
.main_tabnav {
color: #000;
border-bottom: 1px solid #ccc;
margin: 13px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px }
.main_tabnav ul {
margin: 0px;
padding: 0px;
}
.main_tabnav li {
display: inline;
overflow: hidden;
list-style-type: none; }
.main_tabnav li span.disabled {
color: #888888;
background: #FAFAFA;
border: 2px solid #DDDDDD;
border-bottom: none;
padding: 2px 5px 0px 5px;
margin: 0;
text-decoration: none;}
.main_tabnav a, main_tabnav a.active {
color: #000000;
background: #EEEEEE;
font-weight: bold;
border: 1px solid #ccc;
padding: 2px 5px 0px 5px;
margin: 0;
text-decoration: none; }
.main_tabnav a.active {
background: #FFFFFF;
border-bottom: 3px solid #FFFFFF; }
.main_tabnav a:hover {
color: #FFFFFF;
background: #CCCCCC; }
.main_tabnav a:visited {
color: #000000; }
.main_tabnav a.active:hover {
background: #FFFFFF;
color: #000000; }
.main_tabnav_content {
background: #FFFFFF;
padding: 20px;
border:1px solid #ccc;
border-top: none;
z-index: 2;
}
I'd like to be able to put some columns inside the main_tabnav_content area like this
<div class="span-5 colborder">
stuff
</div>
<div class="span-5 colborder">
stuff
</div>
<div class="span-5 colborder">
stuff
</div>
At the moment the columns are displayed but the main_tabnav_content box doesn't expand around them. Any suggestions for how to get the blueprint layout nested inside the main_tabnav_content area?
From Blueprint: screen.css:
.column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5, div.span-6, div.span-7, div.span-8, div.span-9, div.span-10, div.span-11, div.span-12, div.span-13, div.span-14, div.span-15, div.span-16, div.span-17, div.span-18, div.span-19, div.span-20, div.span-21, div.span-22, div.span-23, div.span-24 {float:left;margin-right:10px;}
.last, div.last {margin-right:0;}
.span-1 {width:30px;}
.span-2 {width:70px;}
.span-3 {width:110px;}
.span-4 {width:150px;}
.span-5 {width:190px;}
and also:
div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
I think if you add this <div class="clearfix"></div> before the end of the main_tabnav_content div it should fix the float problem.
Do you have the css for the span-5 & colborder classes? It sounds like it might be a float problem. Basically what's happening is when you add the columns to the main_tabnav_content div, the div doesn't expand, right?

Resources