I'm trying to modify existing theme .css files for a Linux Desktop (Ubuntu Unity in my case), so that they suit my needs. Looking at already existing themes I was able to reverse engineer most of it, but for some widgets I was not able to theme them properly. On of it are the marked days in a GtkCalendar.
What do I need to modify in the .css files so that I can modify the font-color of the marked days (the ones bold in the Calendar, i.e. Something is happening at that day; red rectangle). It is not the color property because color: only changes the color of the non-marked days (as it can be seen in the screenshot,28th December)
For reference: This is the file I'm trying to modify. It's written in SASS but that doesn't matter https://github.com/shimmerproject/Numix/blob/master/gtk-3.0/scss/widgets/_calendar.scss
This is just a placeholder to test the functionality.
gtk/theme/Adwaita/_common.scss | 10 ++++++++--
gtk/theme/Adwaita/gtk-contained-dark.css | 9 ++++++++-
gtk/theme/Adwaita/gtk-contained.css | 9 ++++++++-
3 files changed, 24 insertions(+), 4 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 6f70d4f..bcd5f80 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
## -2761,13 +2761,19 ## GtkCalendar {
text-align: center; /* haha, dream on */
}
.day.dim-label{ color: $insensitive_fg_color; }
-.day:selected {
+.day.day:selected {
color: $selected_fg_color;
background-color: $selected_bg_color;
padding: 0.4em;
border-radius: 3px;
}
-
+.day.holiday,
+.day.weekend {
+ background-color: transparentize(red, 0.9);
+}
+.day.marked {
+ font-weight: bold;
+}
/***********
* Dialogs *
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index c46cb5a..c593cc2 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
## -3678,12 +3678,19 ## GtkCalendar {
.header-bar .day.subtitle {
color: #939695; }
-.day:selected {
+.day.day:selected {
color: #ffffff;
background-color: #215d9c;
padding: 0.4em;
border-radius: 3px; }
+.day.holiday,
+.day.weekend {
+ background-color: rgba(255, 0, 0, 0.1); }
+
+.day.marked {
+ font-weight: bold; }
+
/***********
* Dialogs *
***********/
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 050dece..aca3a5b 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
## -3848,12 +3848,19 ## GtkCalendar {
.header-bar .day.subtitle {
color: #8d9091; }
-.day:selected {
+.day.day:selected {
color: #ffffff;
background-color: #4a90d9;
padding: 0.4em;
border-radius: 3px; }
+.day.holiday,
+.day.weekend {
+ background-color: rgba(255, 0, 0, 0.1); }
+
+.day.marked {
+ font-weight: bold; }
+
/***********
* Dialogs *
***********/
Related
I'm new to SASS. I want to get the css which evaluate the value inside the CSS class using for loop SASS. In my case, i want to get ul:nth-child(1) .e-classA instead of ul:nth-child(2) .e-classA. I'm getting error when used &ul:nth-child(#{$i} - 1)
$text-indent: 12px;
$width: 14px;
#for $i from 2 through 4 {
&ul:nth-child(#{$i} - 1) {
& .e-classA {
text-indent: $text-indent * #{$i};
&.e-classB {
text-indent: ($text-indent * #{$i}) + $width;
}
}
}
}
Actual output:
Error: Invalid CSS after "...m 2 through 4 {": expected "}", was "nth-child(#{$i}..."
on line 4 of stdin
>> #for $i from 2 through 4 {
--------------------------^
Expected output:
ul:nth-child(1) .e-classA {
text-indent: 24px;
}
ul:nth-child(1) .e-classA.e-classB {
text-indent: 38px;
}
ul:nth-child(2) .e-classA {
text-indent: 36px;
}
ul:nth-child(2) .e-classA.e-classB {
text-indent: 50px;
}
ul:nth-child(3) .e-classA {
text-indent: 48px;
}
ul:nth-child(3) .e-classA.e-classB {
text-indent: 62px;
}
If you want SASS to do some math, move the calculation inside #{...}. Second problem might be the & at the beginning of &ul:..., you don't need it there to get the result.
I fixed you code:
$text-indent: 12px;
$width: 14px;
#for $i from 2 through 4 {
ul:nth-child(#{$i - 1}) {
& .e-classA {
text-indent: #{$text-indent * $i};
&.e-classB {
text-indent: #{($text-indent * $i) + $width};
}
}
}
}
And tested in sassmeister and it works.
Resolved myself by the below modification.
*&ul:nth-child(#{$i - 1}) *
I need to add border to the columns in grid.
In my webapp I have addons.scss, mytheme.scss, styles.scss and styles.css. How i can add this new borders into my grid?
My grid code -
#Override
protected void init(VaadinRequest vaadinRequest) {
Grid grid = new Grid();
IndexedContainer container = new IndexedContainer();
grid.setContainerDataSource(container);
container.addContainerProperty("September", String.class, null);
container.addContainerProperty("Person1", Integer.class, 0);
container.addContainerProperty("Person2", Integer.class, 0);
container.addContainerProperty("Person3", Integer.class, 0);
container.addContainerProperty("Person4", Integer.class, 0);
container.addContainerProperty("Person5", Integer.class, 0);
container.addContainerProperty("Person6", Integer.class, 0);
container.addContainerProperty("Person7", Integer.class, 0);
container.addContainerProperty("Person8", Integer.class, 0);
Grid.HeaderRow row = grid.addHeaderRowAt(0);
Grid.HeaderRow row2 = grid.addHeaderRowAt(1);
String[] Group1 = {"Person3", "Person4", "Person1", "Person2"};
String[] Group2 = {"Person7", "Person8", "Person5", "Person6"};
String[] Group3 = {"Person3", "Person4"};
String[] Group4 = {"Person1", "Person2"};
String[] Group5 = {"Person7", "Person8"};
String[] Group6 = {"Person5", "Person6"};
row.join(Group1).setText("Čerpacia stanica");
row.join(Group2).setText("Panos");
row2.join(Group3).setText("TPP");
row2.join(Group4).setText("Brigada");
row2.join(Group5).setText("TPP");
row2.join(Group6).setText("Brigada");
container.addItem(1);
Item item = container.getItem(1);
item.getItemProperty("September").setValue("1.9.2017 Piatok");
...
//This is from your post
grid.setCellStyleGenerator(new Grid.CellStyleGenerator() {
#Override
public String getStyle(Grid.CellReference cellReference) {
if ("TPP".equals(cellReference.getPropertyId()) ||
"Brigáda".equals(cellReference.getPropertyId())) {
return "right-and-left-border";
else {
return null;
}
}
});
}
There is class that i have in my webapp folder.
Mytheme.scss
// If you edit this file you need to compile the theme. See README.md for details.
// Global variable overrides. Must be declared before importing Valo.
// Defines the plaintext font size, weight and family. Font size affects general component sizing.
//$v-font-size: 16px;
//$v-font-weight: 300;
//$v-font-family: "Open Sans", sans-serif;
// Defines the border used by all components.
//$v-border: 1px solid (v-shade 0.7);
//$v-border-radius: 4px;
// Affects the color of some component elements, e.g Button, Panel title, etc
//$v-background-color: hsl(210, 0%, 98%);
// Affects the color of content areas, e.g Panel and Window content, TextField input etc
//$v-app-background-color: $v-background-color;
// Affects the visual appearance of all components
//$v-gradient: v-linear 8%;
//$v-bevel-depth: 30%;
//$v-shadow-opacity: 5%;
// Defines colors for indicating status (focus, success, failure)
//$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically
//$v-friendly-color: #2c9720;
//$v-error-indicator-color: #ed473b;
// For more information, see: https://vaadin.com/book/-/page/themes.valo.html
// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples
#import "../valo/valo.scss";
#mixin mytheme {
#include valo;
.mytheme .v-grid-cell
{
font-size: 5px;
overflow: visible;
}
//I insert this code here
.v-grid-cell.right-and-left-border {
border-left: solid 2px black;
border-right: solid 2px black;
}
// Insert your own theme rules here
}
There is code from styles.scss
#import "mytheme.scss";
#import "addons.scss";
// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in mytheme.scss
.mytheme {
#include addons;
#include mytheme;
}
This is class addons.scss
/* This file is automatically managed and will be overwritten from time to time. */
/* Do not manually edit this file. */
/* Import and include this mixin into your project theme to include the addon themes */
#mixin addons {
}
And styles.css have 13000 lines ...
After insert your code into mytheme.scss and grid set style method into my java code, then i recompiled the project. But when i refresh the page, all is the same.
--
Now I want update some styles in my theme. E.G
.mytheme .v-grid-row > td, .mytheme .v-grid-editor-cells > div {
font-size: 15px;
border-left: 1px solid #d4d4d4;
border-bottom: 1px solid #d4d4d4;
}
and i want have some new styles
.mytheme .v-grid-row > td, .mytheme .v-grid-editor-cells > div {
text-align: center;
font-weight: bold;
font-size: 10px;
border-left: 1px solid #d4d4d4;
border-bottom: 1px solid #d4d4d4;
}
Where do I save it? Thanks again :)
When a user 'tabs over' to an input, I want the focus effect to be normally displayed, but on click, I don't want it to be visible.
User hits tab, now focussed on toggle button, I would like the toggle button to have slight glowing outline, which I'm currently able to do.
Now,
User clicks on the toggle button or it's associated label, toggle changes as usual,
BUT, I want the glow to never appear in the first place, or to disappear as quickly as possible.
I know about .blur(), and right now I'm having to use a setTimeout for a lazy fix, but I'd like to know if there's a better way to accomplish this, or if there's possibly a CSS only solution
I think a lot of front-end developers struggle to find a balance between aesthetics and the best-practices for accessibility. This seems like a great compromise.
Here's how I do it. The idea is to toggle outlining on when the user uses the tab key and turn it back off when they click.
JS
document.addEventListener('keydown', function(e) {
if (e.keyCode === 9) {
$('body').addClass('show-focus-outlines');
}
});
document.addEventListener('click', function(e) {
$('body').removeClass('show-focus-outlines');
});
Styles
body:not(.show-focus-outlines) button:focus,
body:not(.show-focus-outlines) [tabindex]:focus {
outline: none;
}
I'm currently doing something similar for my company. Unfortunately you must use JavaScript since CSS doesn't support this use case.
Here's what I've done.
var btns = document.querySelectorAll('button');
var onMouseDown = function (evt) {
evt.target.dataset.pressed = 'true';
};
var onMouseUp = function (evt) {
evt.target.dataset.pressed = 'false';
};
var onFocus = function (evt) {
var element = evt.target;
if (element.dataset.pressed !== 'true') {
element.classList.add('focus');
}
};
var onBlur = function (evt) {
evt.target.classList.remove('focus');
};
for(var i = 0, l = btns.length; i < l; i++) {
btns[i].addEventListener('mousedown', onMouseDown);
btns[i].addEventListener('mouseup', onMouseUp);
btns[i].addEventListener('focus', onFocus);
btns[i].addEventListener('blur', onBlur);
}
* { box-sizing: border-box; }
body { background-color: white; }
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-width: 100px;
margin: 0 1px;
padding: 12px 10px;
font-size: 15px;
color: white;
background-color: #646e7c;
border: none;
border-radius: 5px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
button:focus { outline: none; }
button:active {
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
transform: translateY(1px);
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
}
button.focus {
font-weight: bold;
}
button.primary { background-color: #2093d0; }
button.success { background-color: #71a842; }
button.danger { background-color: #ef4448; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<button>Default</button>
<button class="primary">Primary</button>
<button class="success">Success</button>
<button class="danger">Danger</button>
</body>
</html>
Basically instead of relying on browser's native focus I add/remove a focus class on my button depending on the situation.
If you use the what-input.js plugin you can apply styles specifically for keyboard users. You can use the following code to highlight a button that has been tabbed to. I've found what-input to be a reliable plugin (comes bundled with Zurb Foundation) and is currently regularly maintained.
// scss
body[data-whatinput="keyboard"] {
button {
&:focus {
// other highlight code here
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
}
}
or
/* vanilla css */
body[data-whatinput="keyboard"] button:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
i am working in extjs4. i have view with ganttChart. I want to change color of splitter line which is between treecolumn and gantt. i am creating gantt as=
var gantt = Ext.create("Gnt.panel.Gantt", {
itemId :'project-list-gantt-chart',
cls : 'projectlistganttchart',
enableTaskDragDrop: false,
columnLines :true,
lockedGridConfig :{
split: false
},
viewPreset : 'customPreset',
columns : [{
xtype : 'treecolumn',
sortable: true,
dataIndex: 'Name',
}],
And i am including this gantt in my following form panel=
Ext.define('GanttChart' ,{
extend: 'Ext.form.Panel',
border: false,
})
By using panel's add method i am including it as-
afterrender : function(){
var me = this;
me.add(gantt);
}
So for changing color, i change css as-
.x-panel-default{
border-color: red;
padding: 0;
}
But its changing color of all panels within my project. So how to override this css so that it will change color of only gantt.
Use the ui cfg param for that:
// add this config line to your panel that host the gantt
ui: 'gantt'
and add this css
.x-panel-gantt{
border-color: red;
padding: 0;
}
Note that the ui is meant for exactly such things.
You might want to refer to this fiddle. Note that it may miss some css classes but I guess it should show you the trick. And please note that you will need to set the border in a correct way because based on the theme the border might be 0px. That is also done in the example. In addition here is the demo code:
Javascript
Ext.create('Ext.panel.Panel', {
title: 'test',
height: 200,
width: 200,
ui: 'custom',
renderTo: Ext.getBody()
})
CSS (just copied from developer tools)
.x-panel-body-custom {
color: black;
font-size: 13px;
font-size: normal;
}
.x-panel-custom{
border: 1px solid red;
padding: 0;
}
.x-panel-body-custom {
background: white;
border-color: #157fcc;
color: black;
font-size: 13px;
font-size: normal;
border-width: 1px;
border-style: solid;
}
.x-panel-header-custom {
background-image: none;
background-color: #157fcc;
}
.x-panel-header-custom-horizontal-noborder {
padding: 10px 10px 10px 10px;
}
.x-panel-header-custom-horizontal {
padding: 9px 9px 10px 9px;
}
You can use id of the component(panel) itself or any top level id of the component in which the panel is rendered like
#toplevelid .x-panel-default{
border-color: red;
padding: 0;
}
You should be able to get your gantt item and change the css class of it using something like:
var ganttItem = Ext.getCmp('your item id');
ganttItem.addCls('your css class for specifc color');
I haven't tested this but you can get the idea.
If you want to reset the css class for the item use .setCls() to set it up from scratch.
I am using Zurb Foundation 5 with Sass mixins and I want to change the style of the dropdown arrow. I am pretty confident that it lies somewhere inside of here but I'm not sure what it is:
// Dropdown Buttons
// $include-html-button-classes: $include-html-classes;
// We use these to set the color of the pip in dropdown buttons
// $dropdown-button-pip-color: #fff;
// $dropdown-button-pip-color-alt: #333;
// $button-pip-tny: rem-calc(6);
// $button-pip-sml: rem-calc(7);
// $button-pip-med: rem-calc(9);
// $button-pip-lrg: rem-calc(11);
// We use these to style tiny dropdown buttons
// $dropdown-button-padding-tny: $button-pip-tny * 7;
// $dropdown-button-pip-size-tny: $button-pip-tny;
// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3;
// $dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1);
// We use these to style small dropdown buttons
// $dropdown-button-padding-sml: $button-pip-sml * 7;
// $dropdown-button-pip-size-sml: $button-pip-sml;
// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3;
// $dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1);
// We use these to style medium dropdown buttons
// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3);
// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3);
// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5;
// $dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2);
// We use these to style large dropdown buttons
// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3);
// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
// $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3);
Here is what I have:
And I want the dropdown arrow to look more like this:
How can I achieve this? Thanks in advance!
===== EDIT =====
With this scss:
.dropdown.button:before{
width: 15px;
height: 15px;
border: none;
background: url("../images/dropdown.png") no-repeat;
}
And this html:
fake#emailaddress.com<br>
<ul id="drop" data-dropdown-content class="f-dropdown">
The button looks like this:
How do I move the arrow now?
Updated jsfiddle:http://jsfiddle.net/Y4jDW/
There is no default arrow фы in your example, but you can overwrite Foundation's styles. Simply add these styles:
.dropdown.button:before{
width: 10px; //width of your arrow
height: 10px; //height of your arrow
border: none;
background: url(...) no-repeat; //url for image
}
You can find the class in css/foundation.css line:1261
This is the original code :
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: rgba(168, 168, 168, 1) transparent transparent transparent;
border-top-style: solid;
margin-top: -2.5px;
top: 22.5px; }
You can try this :
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 10px;
height: 10px;
border: none;
background-image: url(img/arrow.png) no-repeat;
margin-top: -2.5px;
top: 22.5px; }
Good luck !