How I can add solarized-dark colors to coderay ?
I'm thinking about tweaking the alpha.rb file, but not sure which css class definitions substitute with which color code.
Any better ideas ?
Maybe there exist some out of the box solution ?
Found also this but not sure how to make usage of it.
The results of what follows are very close to the look of solarized but not perfect. Basically, I used this this stylesheet for solarize and went through selector by selector and did my best to translate it into the styles used by Coderay.
Here is the original solarized example for ruby:
Here is the results I am able to produce with coderay:
SO: it's not perfect, but will get anyone that wants to use a Solarized-like 'theme' for Coderay on their way.
Here is what you need to do (for a Rails 3 app):
First you will need to override the module within the coderay gem that it uses to generate inline styles. Create a file called coderay.rb within config/initializers.
Next paste in the following into the config/intializers/coderay.rb file you've just created:
module CodeRay
module Styles
# A colorful theme using CSS 3 colors (with alpha channel).
class Alpha < Style
register_for :alpha
code_background = '#073642'
numbers_background = 'hsl(180,65%,90%)'
border_color = '#c0c0c0'
normal_color = '#d5f6f6'
CSS_MAIN_STYLES = <<-MAIN # :nodoc:
.CodeRay {
background-color:##073642;
border:1px solid #c0c0c0;
background: #002B36;
color:#eee8d5;
}
.CodeRay pre {
margin: 0px;
}
span.CodeRay { white-space: pre; border: 0px; padding: 2px; }
table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px; }
table.CodeRay td { padding: 2px 4px; vertical-align: top; }
.CodeRay .line-numbers {
background-color:#d5f6f6;
color:#808080;
text-align:right;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
}
.CodeRay .line-numbers a {
background-color:#d5f6f6;
color:#808080;
text-decoration:none
}
.CodeRay .line-numbers a:target { color:#00f !important; }
.CodeRay .line-numbers .highlighted { color: red !important; }
.CodeRay .line-numbers .highlighted a { color: red !important; }
.CodeRay span.line-numbers { padding: 0px 4px; }
.CodeRay .line { display: block; float: left; width: 100%; }
.CodeRay .code { width: 100%; }
MAIN
TOKEN_COLORS = <<-'TOKENS'
.debug{color:#fff;background:#00f}
.annotation{color:#586E75}
.attribute-name{color:#93A1A1}
.attribute-value{color:#93A1A1}
.binary{color:#509}
.char .content{color:#d20}
.char .delimiter{color:#710}
.char{color:#2AA198}
.class{color:#268BD2;font-weight:bold}
.class-variable{color:#268BD2}
.color{color:#eee8d5}
.comment{color:#586E75}
.comment .char{color:#859900}
.comment .delimiter{color:#859900}
.complex{color:#a08}
.constant{color:#B58900;font-weight:bold}
.decorator{color:#268BD2}
.definition{color:#099;font-weight:bold}
.delimiter{color:#000}
.directive{color:#088;font-weight:bold}
.doc{color:#93A1A1}
.doc-string{color:#93A1A1;font-weight:bold}
.doctype{color:#DC322F}
.entity{color:#CB4B16;font-weight:bold}
.error{color:#93A1A1;background-color:#faa}
.escape{color:#CB4B16}
.exception{color:#CB4B16;font-weight:bold}
.float{color:#2AA198}
.function{color:#268BD2;font-weight:bold}
.global-variable{color:#268BD2}
.hex{color:#2AA198}
.imaginary{color:#f00}
.include{color:#b44;font-weight:bold}
.inline{background-color:transparent;color:#93A1A1!important}
.inline-delimiter{font-weight:bold;color:#DC322F}
.instance-variable{color:#268BD2}
.integer{color:#2AA198}
.key .char{color:#DC322F}
.key .delimiter{color:#268BD2}
.key{color:#859900}
.keyword{color:#859900;font-weight:bold}
.label{color:#93A1A1;font-weight:bold}
.local-variable{color:#268BD2}
.namespace{color:#859900;font-weight:bold}
.octal{color:#2AA198}
.operator, .predefined{color:#859900;font-weight:bold}
.predefined-constant{color:#2AA198}
.predefined-type{color:#DC322F;font-weight:bold}
.preprocessor{color:#859900}
.pseudo-class{color:#859900;font-weight:bold}
.regexp .content{color:#2AA198}
.regexp .delimiter{color:#DC322F}
.regexp .modifier{color:#CB4B16}
.regexp{background-color:transparent}
.reserved{color:#268BD2;font-weight:bold}
.shell .content{color:#2b2}
.shell .delimiter{color:#161}
.shell{background-color:transparent}
.string .char{color:#2AA198}
.string .content{color:#2AA198}
.string .delimiter{color:#DC322F}
.string .modifier{color:#2AA198}
.string{background-color:transparent}
.symbol .content{color:#2AA198}
.symbol .delimiter{color:#2AA198}
.symbol{color:#2AA198}
.tag{color: #268BD2}
.type{color:#DC322F;font-weight:bold}
.value{color:#268BD2}
.variable{color:#268BD2}
.insert{background:transparent}
.delete{background:transparent}
.change{color:#CB4B16;background:transparent}
.head{color:#CB4B16;background:transparent}
.head .filename{color:#CB4B16}
.delete .eyecatcher{background-color:rgba(255,0,0,0.2);border:1px solid rgba(230,0,0,0.5);margin:-1px;border-bottom:none;border-top-left-radius:5px;border-top-right-radius:5px}
.insert .eyecatcher{background-color:rgba(0,255,0,0.2);border:1px solid rgba(0,128,0,0.5);margin:-1px;border-top:none;border-bottom-left-radius:5px;border-bottom-right-radius:5px}
.insert .insert{color:#CB4B16;background:transparent;font-weight:bold}
.delete .delete{color:##2AA198;background:transparent;font-weight:bold}
.change .change{color:#CB4B16}
.head .head{color:#CB4B16}
TOKENS
end
end
end
You'll also add the following CSS to your application (or, if you want, make a file in assets/stylesheets called coderay.css for it):
pre {
background: #002A35!important;
color: #93A1A1!important;
}
The above will set your code background to the dark background used by solarize and any code not annotated by codeway to the fallback color used in solarize.
Now just restart your app.
** Again, this isn't perfect and youll probably want to crack open that coderay.rb file again at some point and refine things. You can use this to help with that: http://jsfiddle.net/bradleygriffith/CNTw4/ **
Related
I saw this code, when i was checking Drupal Omega 4 theme
%container {
#include container;
#include grid-background;
}
what does the '%container' mean?
what is the '%' for?
https://sass-lang.com/documentation/style-rules/placeholder-selectors
Placeholder Selectors: %foo
Sass supports a special type of selector called a “placeholder
selector”. These look like class and id selectors, except the # or .
is replaced by %. They’re meant to be used with the #extend directive;
for more information see #extend-Only Selectors.
On their own, without any use of #extend, rulesets that use
placeholder selectors will not be rendered to CSS.
Example
SCSS SYNTAX
%toolbelt {
box-sizing: border-box;
border-top: 1px rgba(#000, .12) solid;
padding: 16px 0;
width: 100%;
&:hover { border: 2px rgba(#000, .5) solid; }
}
.action-buttons {
#extend %toolbelt;
color: #4285f4;
}
.reset-buttons {
#extend %toolbelt;
color: #cddc39;
}
CSS Output
.action-buttons, .reset-buttons {
box-sizing: border-box;
border-top: 1px rgba(0, 0, 0, 0.12) solid;
padding: 16px 0;
width: 100%;
}
.action-buttons:hover, .reset-buttons:hover {
border: 2px rgba(0, 0, 0, 0.5) solid;
}
.action-buttons {
color: #4285f4;
}
.reset-buttons {
color: #cddc39;
}
SASS
%icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
#extend %icon;
/* error specific styles... */
}
.info-icon {
#extend %icon;
/* info specific styles... */
}
Output
.error-icon, .info-icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
/* error specific styles... */
}
.info-icon {
/* info specific styles... */
}
Note
Placeholder selectors have the additional property that they will not show up in the generated CSS, only the selectors that extend them will be included in the output.
More info
http://thesassway.com/intermediate/understanding-placeholder-selectors
Tools
If you want to play around Sass please use - http://sassmeister.com/
It's a placeholder selector. It doesn't do anything on its own but can be extended, like an abstract base class.
Is it be possible to use some sort of #directive creation syntax, similar to creating #mixins? Secondly, is it possible to create a SASS-only pseudo class?
I'd like to declare my own SASS directive,although I'd prefer not to have to force my teammates to install an extra ruby gem to use it so I'd want to store it in a scss partial. I do understand that they are orders of levels in complexity, so perhaps it just isn't possible.
In addition to perhaps creating a new scss-only pseudo class (such as :parent, :clicked, :unchecked, etc) I'd be interested in a custom-made directive that assists with using checkboxes to direct css animations ("css checkbox hack"). Here is my scss pseudocode to generalize what I'm trying to do:
// this code monitors when a checkbox (#someinput) is checked,
// then applies style to div #target div. Basically an 'onClick' event in scss.
body {
#wrapper {
#targetdiv {
#spotcheck(#someinput) { #
color: red; border: 2px solid blue; # <-- move this ...
} #
color: blue; border: 0;
#someinput {
width: 20px; height: 20px;
}
}
}
}
// ... the above scss should be converted to this pre-compiled state, also scss
body {
#someinput:checked ~ #targetdiv { #
color: red; border: 2px solid blue; # <-- ..to here. it needs to be
} # above the #targetdiv
#wrapper {
#targetdiv {
color: blue; border: 0;
#someinput {
width: 20px; height: 20px;
}
}
}
}
Make your selectors only as specific as they absolutely need to be and no more. A mixin would only be more verbose with no real benefit.
#targetdiv {
color: blue; border: 0;
#someinput:checked ~ & {
color: red; border: 2px solid blue;
}
}
#someinput {
width: 20px; height: 20px;
}
Output:
#targetdiv {
color: blue;
border: 0;
}
#someinput:checked ~ #targetdiv {
color: red;
border: 2px solid blue;
}
#someinput {
width: 20px;
height: 20px;
}
Alternately, this would give the same result with the ability to overqualify as much as you want:
#targetdiv {
color: blue; border: 0;
}
#someinput {
width: 20px; height: 20px;
~ #targetdiv {
color: red; border: 2px solid blue;
}
}
I was reviewing UiKit, a frontend framework built with LESS, and noticed a rather interesting feature: hooks. Look at the following in the base framework:
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
.hook-panel-badge;
}
.hook-panel-badge() {}
If you want to override that in a theme let's say you are building outside of the core files (files that come later in compilation), then you would do the following:
.hook-panel-badge() {
right:auto;
}
So, in essence it looks like you are able to override/customize selectors without adding in additional selectors, so it keeps your markup as small as possible.
Is anything like this available in SASS? This looks like an awesome feature that I'd love to use as a primarily SASS user, but I haven't found #extend to be the same. Thanks!
Update
The placeholder feature seems to be the closest thing I've found:
.panel {
background:red;
#extend %hook-panel;
}
%hook-panel {
color:blue;
}
Which renders as:
.panel {
background: red; }
.panel {
color: blue; }
and can be defined after (which is awesome), but this still duplicates the selector. Is there anyway to only render the value of the placeholder in the original selector it is included in?
SASS has a similar facility called mixins:
// Define the mixin
#mixin large-text
font-family: Arial
color: #ff0000
// Use it
.page-title
#include large-text
padding: 10px
// Compiled CSS
.page-title {
font-family: Arial;
color: #ff0000;
padding: 10px;
}
The beauty of mix-ins is that they can take arguments, so you don't need to override commonly-changed selectors:
// Define
#mixin sexy-border($color, $width)
border-color: $color
border-width: $width
border-style: dashed
// Paragraphs in general will have a sexy blue 10px dashed border
p
#include sexy-border(blue, 10px)
// Paragraphs of class "plain" will have a plain old black 1px solid border
p.plain
#include sexy-border(black, 1px)
border-style: solid
// Compiled CSS
p {
border-color: blue;
border-width: 10px;
border-style: dashed;
}
p.plain {
border-color: black;
border-width: 1px;
border-style: solid;
}
SASS mixin documentation.
As far as I can see, there's no exact mapping of the LESS behaviour to a SASS equivalent.
You have the following options:
#extend
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
#extend .hook-panel-badge;
}
.hook-panel-badge{
right:auto;
}
Resulting in:
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
.hook-panel-badge, .uk-panel-badge {
right: auto;
}
This produces slightly more CSS than the LESS equivalent does, because the original (unhooked) class is preserved.
#mixin
//theme.scss:
#mixin hook-panel-badge(){
}
#import "hooks";
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
#include hook-panel-badge;
}
_hooks.scss:
//theme creator can override hooks in here.
#mixin hook-panel-badge(){
right:auto;
}
This creates the exact same code as your SASS, but the downside is that you need to define a blank mixin for every hookable class, which is a bit of effort. (You could of course put these all in the _hooks.scss file, but that would make the override code harder to read.
EDIT:
I guess there is one more option as below, which saves a little bit of typing on the extendee's side, but moves away from standard CSS syntax for the extender a bit too much for my liking. You could of course use a partial file as in 2.
#mixin hook($class){
//generic override.
#if($class == "uk-panel-badge"){
right:auto;
}
#else if($class== "selector2"){
//override other classes in this way.
}
}
.uk-panel-badge {
position: absolute;
top: 0;
right: 0;
z-index: 1;
#include hook("uk-panel-badge");
}
Overall I still feel 1 is the best approach.
I am creating a custom pie chart using jqPlot's PieRenderer. My only problem is that I can either show the label or the percentage on the dataLabels. I want to do a mix and show both like <label>\n<percentage>. Explanation:
By setting this.dataLabels = 'percent', I can do this:
By setting this.dataLabels = 'label', I can do this:
I want to do this:
Do you have any ideas?
According to the source code, dataLabels doesn't support rendering label together with percent at the same time.
I think you can easily create a list of labels using JavaScript and make sure you use <br/> instead of \n if you want to render 2 lines for each part.
#sza's solution is tidier, so I will have to accept it. I wanted to post my own though, because it is easier and it may help someone.
What I did is, put two pieCharts on each other, where the first one is visible and has the percentage values and the second one has no fill and is invisible except for the labels.
My XHTML code:
<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="true" showDataLabels="true"
title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
diameter="300" dataFormat="percent" shadow="false" extender="pieChartExtender"
seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="mainPieChart" />
<p:pieChart value="#{chartBean.pieModel}" legendPosition="" fill="false" showDataLabels="true"
title="MyPieChart" style="width:100%; height:350px" sliceMargin="2"
diameter="300" dataFormat="label" shadow="false" extender="pieChartLabelExtender"
seriesColors="7eb75b,c2715e,6367c2,9b6ece,5cc2c1,c0c216" styleClass="pieLabels" />
extender.js:
function pieChartExtender() {
this.cfg.seriesDefaults.rendererOptions.dataLabelFormatString = '%#.2f%%';
this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
this.cfg.seriesDefaults.rendererOptions.startAngle = -90;
}
function pieChartLabelExtender() {
this.cfg.seriesDefaults.rendererOptions.dataLabelThreshold = 5;
this.cfg.seriesDefaults.rendererOptions.dataLabelPositionFactor = 0.8;
this.cfg.seriesDefaults.rendererOptions.startAngle = -90;
}
CSS file:
.chartContainer {
position:relative;
margin: 0 auto;
top: 10px;
width: 350px;
height: 350px;
}
.chartLegend {
border: 1px solid #d7d7d8;
margin: 40px 40px;
width: 80%;
}
.pieExtra {
position:absolute;
left: 17px;
top: 13.5px;
}
.pieLabels { position:absolute !important; }
.mainPieChart { position:absolute !important; }
.jqplot-title { display:none !important; }
.jqplot-grid-canvas { display:none !important; }
.jqplot-series-shadowCanvas { display:none !important; }
.mainPieChart .jqplot-event-canvas { z-index: 10 !important; }
.jqplot-data-label { color: #fff; font-weight: bold; font-size: 14px; }
.pieLabels .jqplot-data-label { margin-top: -9px !important; }
.mainPieChart .jqplot-data-label { margin-top: 8px !important; }
.pieLabels .jqplot-series-canvas { display:none !important; }
Notice that:
both pieCharts (called pieLabels and mainPieChart) are absolutely positioned, in order to be placed on each other
jqplot-data-label of pieLabels is placed 9px above and jqplot-data-label of mainPieChart is placed 8px below to create the label-percentage label
jqplot-series-canvas for pieLabels is not displayed, in order to make it invisible.
I am used to coding in SCSS but pretty new to LESS.
I have the following code in SCSS but would like to know how to write this in LESS.
Here is the SCSS code...
#mixin posL($property, $value) {
{$property}: $value;
}
.box {
width:200px;
height:200px;
background:red;
position:absolute;
#include posL(left, 100px);
}
So far I have something like this in LESS but I have to declare selectors...
.posL(#property: 100px, #value: 2px) {
left: #property;
-rtl-left: #value;
}
.box {
width:200px;
height:200px;
background:red;
position:absolute;
.posL(200px);
}
Is there a better way to write my LESS code so the selectors in the mixin remain generic (not specified)?
Update for LESS 1.6+
It is almost a direct mapping now with the 1.6 update, like so:
LESS
.posL(#property, #value) {
#{property}: #value;
}
.box {
width:200px;
height:200px;
background:red;
position:absolute;
.posL(left, 100px);
}
CSS Output
.box {
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 100px;
}
Original Answer (pre 1.6)
There is currently no real way to do dynamic property names in LESS (whether for prefixing or for full property names ,like you want), though there is discussion about it.
I recommend a generic mixin with a nested, guarded mixin for the logic. This still gives you selection to specific properties, but does require some more explicit code to set it up. Something like:
.posL(#property, #value) {
.getProp(left) {
left: #value;
}
.getProp(-rtl-left) {
-rtl-left: #value;
}
.getProp(#property);
}
Then use it very similar to how you do the SASS version:
.box {
width:200px;
height:200px;
background:red;
position:absolute;
.posL(left, 100px);
}
Compiles to:
.box {
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 100px;
}