Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !2940

+Support for transparent colors in gradients "horizontal" and "vertical"

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge github/fork/grantzau/patch-2 into master 13 years ago
  • Overview 0
  • Commits 2
  • Pipelines 0
  • Changes 1

Created by: grantzau

These gradients do not work, when one of the colors are "transparent". To make it work:

The background-color needs to be transparent. The IE filter doesnt support "transparent" as a value, so "#00000000" is used instead.

I have made three conditional versions of the two gradients to do this. To aviod repeating the background-image part, which is the same for all three, I made two helpers.

Compare
  • master (base)

and
  • latest version
    b38ffc78
    2 commits, 2 years ago

1 file
+ 38
- 6

    Preferences

    File browser
    Compare changes
less/mixins.less
+ 38
- 6
  • View file @ b38ffc78


@@ -330,28 +330,60 @@
// Gradients
#gradient {
.horizontal(@startColor: #555, @endColor: #333) {
background-color: @endColor;
// Helpers
.horizontal-background-image(@startColor: #555, @endColor: #333) {
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) {
background-color: mix(@startColor, @endColor, 60%);
.vertical-background-image(@startColor: #555, @endColor: #333) {
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(top, @startColor, @endColor); // The standard
}
// The gradients
.horizontal(@startColor: #555, @endColor: #333) when (iscolor(@startColor)) and (iscolor(@endColor)) {
background-color: @endColor;
.horizontal-background-image(@startColor, @endColor);
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down
}
.horizontal(@startColor: transparent, @endColor: #333) when (@startColor = transparent) {
background-color: transparent;
.horizontal-background-image(@startColor, @endColor);
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",#00000000,@endColor)); // IE9 and down
}
.horizontal(@startColor: #555, @endColor: transparent) when (@endColor = transparent) {
background-color: transparent;
.horizontal-bacground-image(@startColor, @endColor);
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,#00000000)); // IE9 and down
}
.vertical(@startColor: #555, @endColor: #333) when (iscolor(@startColor)) and (iscolor(@endColor)) {
background-color: mix(@startColor, @endColor, 60%);
.vertical-background-image(@startColor, @endColor);
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
}
.vertical(@startColor: transparent, @endColor: #333) when (@startColor = transparent) {
background-color: transparent;
.vertical-background-image(@startColor, @endColor);
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",#00000000,@endColor)); // IE9 and down
}
.vertical(@startColor: #555, @endColor: transparent) when (@endColor = transparent) {
background-color: transparent;
.vertical-background-image(@startColor, @endColor);
background-repeat: repeat-x;
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,#00000000)); // IE9 and down
}
.directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
background-color: @endColor;
background-repeat: repeat-x;
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
1
build
1
build
    Assign labels
  • Manage project labels

Milestone
v3.2.0
v3.2.0
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
0
0 participants
Reference: twbs/bootstrap!13528
Source branch: github/fork/grantzau/patch-2

Menu

Explore Projects Groups Snippets