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
  • !22698
An error occurred while fetching the assigned milestone of the selected merge_request.

Add new mixin, and remove duplicate styles

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Administrator requested to merge github/fork/iamandrewluca/patch-1 into v3-dev 8 years ago
  • Overview 0
  • Commits 1
  • Pipelines 0
  • Changes 1

Created by: iamandrewluca

Problem

.main {
  .make-xs-column(12);
  .make-md-column(8);
  .make-lg-column(9);
}
.sidebar {
  .make-xs-column(12);
  .make-md-column(4);
  .make-lg-column(3);
}

Outputs

.main {
    position: relative;
    float: left;
    width: 100%;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

And all media queries with respective width. With new added mixin we use it this way

.main {
  .make-column();
  .make-xs-column(12);
  .make-md-column(8);
  .make-lg-column(9);
}

and we get this CSS

.main {
    position: relative;
    float: left;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

I know that this change has a low chance to be merged, but I tried. :)

Compare
  • v3-dev (base)

and
  • latest version
    b5d54046
    1 commit, 2 years ago

1 file
+ 10
- 24

    Preferences

    File browser
    Compare changes
less/mixins/grid.less
+ 10
- 24
  • View file @ b5d54046


@@ -18,15 +18,19 @@
&:extend(.clearfix all);
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
// Generate the column
.make-column(@gutter: @grid-gutter-width) {
position: relative;
float: left;
width: percentage((@columns / @grid-columns));
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
// Generate the extra small columns
.make-xs-column(@columns) {
width: percentage((@columns / @grid-columns));
}
.make-xs-column-offset(@columns) {
margin-left: percentage((@columns / @grid-columns));
}
@@ -38,14 +42,8 @@
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
.make-sm-column(@columns) {
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
@@ -66,14 +64,8 @@
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
.make-md-column(@columns) {
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
@@ -94,14 +86,8 @@
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
min-height: 1px;
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
.make-lg-column(@columns) {
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
0
None
0
None
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
0
0 participants
Reference:
Source branch: github/fork/iamandrewluca/patch-1

Menu

Explore Projects Groups Snippets