I want to use foundicon inside foundations button like this.
(I'm using button small radius and foundicon-refresh.)
But as a default the icon is aligned 1 pixel above than a text.
If I set vertical-align: top for .button, then icon and text are go along with good, but I want set it middle of button.
So I want to drag down 1 pixel icon and text like third picture below.
To to this I must change .button.small { padding-top: 0.625em; padding-bottom: 0.5625em; } to .button.small { padding-top: 0.725em; padding-bottom: 0.4625em; }.
In scss file for foundations padding size are defined by calculation. Even if I write the values foundation_and_overrides.scss, that is overrided by default setting. (It seems, Override are only allowed by variables.)
How can I override default value? I don't want to use !important if possible.
Or is there better way to do this?
<i class='general foundicon-refresh'></i> Reload
Related
The title says it all. How do you go about doing this? For example, editing the width of a file upload button results in this: http://i.imgur.com/jacnps2.png For comparison, here's an ordinary file upload button: http://i.imgur.com/tIy05HA.png
The red rectangle represents the area the button normally takes up. In addition, when you hover your cursor over that spot (except for where the red and blue rectangles overlap), your cursor will transform into a hand icon, indicating that something will happen when you click that area. However, nothing happens.
The blue rectangle represents what portion of the screen you can click (which is mostly invisible, and much smaller than usual) to make the file upload form appear.
Trying to edit the file upload button's height yields similar results, only vertically instead of horizontally.
For the sake of explaining what my goal is: I'd like to overly a transparent or invisible file upload button on top of user avatars on my website. So far I've pulled off the easy parts, making the file upload button transparent and overlaying it on top of a user's avatar, but I haven't figured out how to edit the usable dimensions of the file upload button. For a working example of this, if you have a facebook profile, go to your profile and hover your mouse over your avatar. The words "Update Profile Picture" will appear and you can click them to edit your avatar directly from your profile instead of having to go to a separate settings page.
You can't style the file upload buttons, they are native to the browser and rendered differently in different browsers. All those styles file upload buttons are not actual file upload buttons but are simulating the file upload button's behaviour.
There are different approaches to this using CSS and Javascript. Most of them involve hiding the native button and placing a custom button on top it using position: absolute and opacity CSS properties and simulating the click on native button when clicked on the custom button.
As there are quite some solutions on the web to this, I will refer you to those instead of posting a solution here.
See below:
http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
Cross-browser custom styling for file upload button
I did it with an after element and an icon from FontAwesome
# your-page.html.erb
<div>
<label class="button-image">
<%= f.file_field :attachment, value: "", class: "active-storage-button" %>
</label>
</div>
# app/assets/stylesheets/your-page.scss
.button-image:hover::after {
content: "\f196";
font: normal normal normal 100px/1 FontAwesome;
color: #778899;
padding: 10%;
right: 10%;
position: relative;
}
.active-storage-button{
display: none;
}
# for hover effect
.button-image:hover::after {
color: #5a5a5a;
cursor: pointer;
}
I'm learning Polymer. Currently, I have a paper-toggle-button element in my app defined like this:
<paper-toggle-button checked="{{ isEnabled }}">enable?</paper-toggle-button>
When this is rendered, it renders is like this:
[switch] enable?
My question is, is there a way to put the label to the left of the switch? In other words, I want to show the control like this:
enable? [switch]
How can someone do that?
Err can't you just put your label text before the toggle button?
<span>enable?</span><paper-toggle-button checked="{{isEnabled}}"></paper-toggle-button>
Thats currently not supported. You can create a feature request to add another insertion point for the label on the left, wrap the element in a custom element and add that feature or fork the paper-toggle-button and customize it.
This answer makes some assumptions about the relative size and positioning of your toggle button, but I've tried to defer to the Polymer & flex models.
The idea here is to put your left-adjusted label in a <span> and offset its right side by the width of the toggle button. The toggle button also needs to be padded left; I chose to pad at 33% because I was actually centering labels around the toggle.
Local CSS:
paper-toggle-button.date-toggle {
padding-left: calc(33% + 1em);
}
/* position the left label outside the containing box */
span.toggle-left-label {
position: absolute;
right: 7em; /* Based on a relatively safe render width of the toggle button */
/*right: 200%;*/ /* Depending on your use case, you might find percentages friendlier than ems */
}
Usage in a paper element:
(here I'm centering the toggle button between 2 labels, but you can just use the toggle-left-label span)
<paper-menu class="app-menu" attr-for-selected="" selected="">
<iron-icon icon="date-range"></iron-icon>
<span>Sort by date:</span><br />
<paper-toggle-button class="date-toggle">
<span class="toggle-left-label toggle-label">Newest</span>
<span>Oldest</span>
</paper-toggle-button>
</paper-menu>
The results maintain good positioning over media/query breakpoints and don't break any responsive views. The results:
I want to style using QSS the line edit that appears when I edit a QTreeView/QTreeWidget item.
Here is an example:
This is a standard QTreeWidget with QTreeView::item { min-height: 25px; } style applied to it.
My question is: Is it possible to have the line edit that appears when I double click the item the same size as the item itself? Or maybe of a certain height in pixels?
Note: I wouldn't want to use a custom delegate for this, I would like to do it in QSS only.
I have a Qt window with a toolbar. I have several actions in it, with their icons set to some of qt standard icons.
However, they are rather small. I want to enlarge toolbar and the buttons inside, so that their icons would stretch accordingly. How should i go about it?
As of now, toolbar was filled using QtCreatir's designer.
You can add a stylesheet. There are several ways to do that (http://qt-project.org/doc/qt-4.8/stylesheet.html). I use an external stylesheet and increase the toolbar size with following code:
QToolButton
{
height: 64px;
width: 64px;
}
I have a ASP:Menü in vertical style.
The MainItem is only 1 Button, deisgned by a Image (no text, pure image).
The ChildItems are normal Text.
Here is a very high zoomed screenshot: http://s2.imgimg.de/uploads/UnbenanntesBild661673a8png.png
Now, beacuse of the image, the childItems look very... strange, because the ChilItems begin, where the button is not there (very hard to explain, sorry).
I want to have the child menü begins at the pixel the button beginns after the white seperator in the image.
So, I want to move the whole childItems 2-4px to the right, how I can do this?
You need to add a left rule to the style of the sub-item, similar to the following:
.subitem
{
...
left: 1px;
...
}
You will need to figure out the exact spacing for yourself, as you have not included the actually styling for me to test with.