I've been looking at custom scss styling of Bootstrap 5 buttons using mixins.
User ZIM's answer on the "How to change btn color in Bootstrap" post is very useful and clearly shows how the syntax for button-variant works.
However, I can't find any clear explanation on how the gradient inside that mixin works (as per the Bootstrap 5 docs).
There is an #include gradient-bg($background) in the mixin example on the buttons page and I can't seem to figure out how to pass a linear gradient to this or how to include it in a hypothetical ".btn-custom" class? Furthermore, how would a hover class with a different gradient background be defined using button-variant?
#mixin button-variant(
$background,
$border,
$color: color-contrast($background),
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
$hover-color: color-contrast($hover-background),
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
$active-color: color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background)
) {
color: $color;
#include gradient-bg($background);
border-color: $border;
#include box-shadow($btn-box-shadow);
&:hover {
color: $hover-color;
#include gradient-bg($hover-background);
border-color: $hover-border;
}
Could someone explain this part of the mixin please?
Thanks in advance.
Related
I'm changing the color of a dropdown's caret with
.myclass .ui.dropdown {
color:transparent!important;
}
This hides the caret, as expected, however not when I send the prop 'search' to the Dropdown component.
Has anyone faced this?
I've tried these alternatives
.myclass .ui.dropdown.search
.myclass .ui.search.dropdown
.myclass .ui.search
I also need to change it this way, rather than with icon=null, because I want to show the caret on hover with
.myclass .ui.dropdown:hover {
color: white!important;
}
Thanks in advance.
Answering my own question, shouldn't have given up so quickly. Leaving the post up for others:
SOLUTION:
.myclass .ui.dropdown i {
color:transparent!important;
}
.myclass .ui.dropdown:hover i {
color:white!important;
}
Although this doesn't explain why the search prop changes things, it works.
Wondering if someone might help with another pair of eyes - as I am trying to work out why some of my Famo.us 'Views' are being displayed despite having an opacity StateModifier set to '0'.
Here is my code - My apologies for it not being standard - I have "Panels" instead of "Views" and a few other things..but happy to expand on the code if needed.
function _buildSidePanel() {
this._sidePanel = _createPanel.call(this);
this._sidePanel.setOptions(this.constructor.DEFAULT_OPTIONS.sideMenu);
this._sidePanel.position = this.cm(this.constructor.DEFAULT_OPTIONS.sideMenu.position);
this._container.add(this._sidePanel.position).add(this._sidePanel);
this._menuHolder = _createPanel.call(this); //My version of a View
this._menuHolder.setOptions(this.constructor.DEFAULT_OPTIONS.sideMenu.menuHolder);
// Create StateModifiers
this._menuHolder.position = this.cm({ align: [.5,.6], origin: [.5,.6], proportions: [.9,.8] });
this._menuHolder.fadeState = this.cm({ opacity: 0 });
this._menuHolder.sizeState = this.cm();
this._menuHolder.mC = new ModifierChain();
this._menuHolder.mC.addModifier(this._menuHolder.fadeState);
this._menuHolder.mC.addModifier(this._menuHolder.sizeState);
this._menuHolder.mC.addModifier(this._menuHolder.position);
/* Tried splitting it to just modifiers but getting the same thing
this._sidePanel._container.add(this._menuHolder.fadeState)
.add(this._menuHolder.sizeState)
.add(this._menuHolder.position)
.add(this._menuHolder);
*/
this._sidePanel._container.add(this._menuHolder.mC).add(this._menuHolder);
// this._menuHolder.fadeState.setOpacity(1,this.constructor.DEFAULT_OPTIONS.sideMenu.menuHolder.transition.in);
}
I have created a ModifierChain and added among other things an Opacity State of 0. When I add this and then add the modifier and 'View' to the container it displays the View even though the View has a StateModifier of '0' so should not be displayed.
The 'fadeState.setOpacity' command is meant to transition the fadeState to display the View but it is commented out, so the View should not be displayed.
I have this working in other areas so know the approach works. I am also (hopefully) not using the same variable names, so not using a StateModifier more than once. But still stuck as to why this is being displayed.
Any help or thoughts would be gratefully appreciated.
Thanks.
I wonder what's the purpose of having media queries for XLarge and XXLarge devices in Foundation 5 if row width is only 62.5rem, anyone can obviously change that size, but what's the purpose of having that as a default if in huge screens it will look tiny?
I think that those media queries are used for building the visibility classes (hidden-for-xlarge-only, visible-for-xxlarge-up etc). Maybe someone at some point would use an 100rem row and need those classes but I must agree that this looks like an edge case.
xlarge and xxlarge media queries are disabled by default on Foundation 5. For enabling them you have to overwrite the variable $include-xl-html-grid-classes: true; in your config settings.
I've overwritten the default config with the following values and it works fine for me:
...
$include-xl-html-grid-classes: true;
// Media Query Ranges
$small-range: (0px, 428px);
$medium-range: (429px, 591px);
$large-range: (592px, 784px);
$xlarge-range: (785px, 980px);
$xxlarge-range: (981px, 99999999px);
...
Cheers!
Now these media queries have been changed in foundation 5 .
// XLarge screens
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
Please check official website http://foundation.zurb.com/docs/media-queries.html
Thanks ,
Lakin
I tried setting all possible styles to something other than grey, just to try and get rid of the grey overlay as shown in the "Hello item 1" in the attached image of a list. Nothing worked. I examined the ListSkin class too and didn't fins anything that would draw these. How to get rid of these overlays?
<s:List id="list" width="100%" height="100%"
dataProvider="{dp}"
focusAlpha="0"
contentBackgroundAlpha="0"
contentBackgroundColor="0xFFFFFF"
selectionColor="0xFFFFFF"
downColor="0xFFFFFF"
borderVisible="false"
>
</s:List>
I just helped a client with this same thing. You, basically, have to extend the LabelItemRemderer class to not draw the rectangle. It is not exposed via styles or colors for you to change.
Look at this code (Starting at line 853 in the LabelItemRemderer):
// Selected and down states have a gradient overlay as well
// as different separators colors/alphas
if (selected || down)
{
var colors:Array = [0x000000, 0x000000 ];
var alphas:Array = [.2, .1];
var ratios:Array = [0, 255];
var matrix:Matrix = new Matrix();
// gradient overlay
matrix.createGradientBox(unscaledWidth, unscaledHeight, Math.PI / 2, 0, 0 );
graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, matrix);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.endFill();
}
You basically need some way to force this code to not run. You can do this by creating your own itemRenderer from scratch. Or you can extend the LabelItemRenderer, override the drawBackground() method and copy all the parent drawBackground() code into your extended child; minus the block above.
I'd love to see the color exposed as a style or something. I'd love to see a magic property (or style) we could use to make the overlay vanish altogether. Feel free to log this as a bug into the Apache Flex Jira.
I am using C++ and QML to create a nice interface.
I would like to have a "console view", where plenty to text is printed through time.
However, when the text of a text item or webview content grows, the view does not "scroll down".
How can I make the text on the bottom of the text/webview item always stay visible ?
I have tried playing with flickable and the_webview.evaluateJavaScript + window.scrollTo , but I could not get them to do what I want.
This seems a fairly simple piece of UI, but I am having serious troubles to do it with QML.
Thanks for you answer.
Yeah I'd use a Flickable containing a Text object. Whenever you add text to the Text, check its paintedHeight, and adjust the Flickable's contentY if it's got any bigger.
Maybe you should consider using a ListView and have the messages as items in the view. Then you could use ListView::positionViewAtEnd.
funkybro answers inspired my final solution:
function scroll_to_bottom() {
flickabe_item.contentY =
Math.max(0, webview_item.height - flickabe_item.height);
return;
}
Thanks !
My solution to this was to vertically flip both the content and Flickable. This way the text ends the right way up and is naturally anchored to the bottom of the flickable area.
It might be more efficient too since the transform is handled by OpenGL behind the scenes.
Flickable {
id: flick
anchors.fill: parent
contentHeight: text.height
Text {
id: text
width: parent.width
transform: Scale { yScale: -1; origin.y: text.height/2 }
}
transform: Scale { yScale: -1; origin.y: flick.height/2 }
}