Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add opacity and update Item-list #38

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Add opacity and update Item-list #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/codidact.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/codidact.css.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/common/common.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/common/common.css.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/dist/codidact.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/dist/codidact.css.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/dist/common/common.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/dist/common/common.css.map
View file
Open in desktop

Large diffs are not rendered by default.

90 changes: 53 additions & 37 deletions docs_src/components/item-lists.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,54 +21,70 @@ It is also possible to highlight items, for example if they match a query, by gi
{% example %}
<div class="item-list">
<div class="item-list--item">
<div class="item-list--number-value">
<div class="item-list--number">23</div>
<div class="item-list--number-label">answers</div>
</div>
<div class="item-list--number-value">
<div class="item-list--number">120</div>
<div class="item-list--number-label">votes</div>
</div>
<div class="item-list--text-value is-primary">
<div class="margin-bottom-2"><a href="#" class="has-font-size-larger">What is Codidact?</a></div>
<div class="has-padding-1">
<a href="#" class="badge is-tag is-master-tag">meta</a>
<a href="#" class="badge is-tag">support</a>
<a href="#" class="badge is-tag">codidact</a>
<a href="#"><p class="has-font-size-subheading">What is Codidact?</p></a>
<div class="has-padding-1 has-margin-bottom-2">
<a href="#" class="badge is-tag is-master-tag has-border-radius-10">meta</a>
<a href="#" class="has-border-radius-10 badge is-tag">support</a>
<a href="#" class="badge is-tag has-border-radius-10">codidact</a>
</div>
<div class="has-margin-bottom-2 has-padding-1">
<button class="button has-border-radius-10 is-small">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<span class="has-opacity-4 has-font-size-small">Last modified 20 hours ago: </span>
<a href="#"><span class="has-font-size-small">John Doe</span></a>
</div>
</div>
<div class="item-list--image-value">
<a href="#!"><img src="https://placekitten.com/100/100" alt="placeholder image"></a>
</div>
<div class="item-list--number-value">
<div class="item-list--number-label">last active</div>
<div class="item-list--number">1d</div>
<div class="item-list--number">50</div>
<div class="item-list--number-label">Votes</div>
<button class="button is-icon-only-button has-shadow-0"><i class="fa fa-thumbs-up" aria-hidden="true"></i></button>
</div>
</div>
<div class="item-list--item is-highlighted">
<div class="item-list--number-value">
<div class="item-list--number-value has-border-style-solid has-border-color-green has-border-radius-9 has-border-width-1 has-background-color-green-050 has-shadow-7">
<div class="item-list--number">23</div>
<div class="item-list--number-label">answers</div>
<div class="item-list--number-label">Answers</div>
<button class="button is-icon-only-button has-shadow-0"><i class="fa fa-comment-o" aria-hidden="true"></i></button>
</div>
<div class="item-list--number-value">
<div class="item-list--number">120</div>
<div class="item-list--number-label">votes</div>
<div class="item-list--number-label">Views</div>
<button class="button is-icon-only-button has-shadow-0"><i class="fa fa-eye"></i></button>
</div>
<div class="item-list--text-value is-primary">
<div class="margin-bottom-2"><a href="#" class="has-font-size-larger">Welcome to Codidact</a></div>
<div class="has-padding-1">
<a href="#" class="badge is-tag is-master-tag">meta</a>
<a href="#" class="badge is-tag">announcement</a>
<a href="#" class="badge is-tag">codidact</a>
</div>
<div class="item-list">
<div class="item-list--item">
<div class="item-list--text-value is-primary">
<a href="#"><p class="has-font-size-subheading">Welcome to Codidact</p></a>
<div class="has-padding-1 has-margin-bottom-2">
<a href="#" class="badge is-tag is-master-tag has-border-radius-10">meta</a>
<a href="#" class="has-border-radius-10 badge is-tag">support</a>
<a href="#" class="badge is-tag has-border-radius-10">codidact</a>
</div>
<div class="has-margin-bottom-2 has-padding-1">
<button class="button has-border-radius-10 is-small">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
<span class="has-opacity-4 has-font-size-small">Last modified 20 hours ago: </span>
<a href="#"><span class="has-font-size-small">John Doe</span></a>
</div>
</div>
<div class="item-list--number-value">
<div class="item-list--number">50</div>
<div class="item-list--number-label">Votes</div>
<button class="button is-icon-only-button has-shadow-0"><i class="fa fa-thumbs-up" aria-hidden="true"></i></button>
</div>
<div class="item-list--number-value">
<div class="item-list--number">23</div>
<div class="item-list--number-label">Answers</div>
<button class="button is-icon-only-button has-shadow-0"><i class="fa fa-comment-o" aria-hidden="true"></i></button>
</div>
<div class="item-list--number-value">
<div class="item-list--number">120</div>
<div class="item-list--number-label">Views</div>
<button class="button is-icon-only-button has-shadow-0"><i class="fa fa-eye"></i></button>
</div>
</div>
<div class="item-list--image-value">
<a href="#"><img src="https://placekitten.com/101/101" alt="placeholder image"></a>
</div>
<div class="item-list--number-value">
<div class="item-list--number-label">last active</div>
<div class="item-list--number">Dec '18</div>
</div>
</div>
</div>
{% endexample %}
{% endexample %}
16 changes: 15 additions & 1 deletion docs_src/utilities/box.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,20 @@ You can set the border radius to any integer value between 0 (no border radius)
{% endexample %}


## Opacity

You can set the opacity to any div between the integer value 10 (opacity: 1) to 0 (opactiy: 0) with the help of the class `has-opacity-x`. The number x is divided by 10.

{% example "opacity" %}
<div class="grid">
<div class="has-padding-4 has-opacity-0">opacity: 0</div>
<div class="has-padding-4 has-opacity-1">opacity: 1</div>
<div class="has-padding-4 has-opacity-4">opacity: 4</div>
<div class="has-padding-4 has-opacity-7">opacity: 7</div>
<div class="has-padding-4 has-opacity-10">opacity: 10</div>
</div>
{% endexample %}

## Box shadow

Box shadows can be given to elements. You have to give them the class `.has-shadow-X` for this, where X is a value between 1 and 10. You can use `.has-shadow-0` to reset and remove the shadow.
Expand All @@ -166,4 +180,4 @@ Box shadows can be given to elements. You have to give them the class `.has-shad
<div class="has-padding-4 has-shadow-7">shadow: 7</div>
<div class="has-padding-4 has-shadow-10">shadow: 10</div>
</div>
{% endexample %}
{% endexample %}
7 changes: 7 additions & 0 deletions src/common/_box.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,13 @@
}
}

@each $i in (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10) {
.has-opacity-#{$i},
.h-o-#{$i} {
opacity: #{$i/10};
}
}


.has-float-left, .h-f-l { float: left; }
.has-float-right, .h-f-r { float: right; }
Expand Down
8 changes: 4 additions & 4 deletions src/common/_config.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -394,10 +394,10 @@ $item-list-separator-width: 1px !default;
$item-list-separator-color: lighten($tertiary-color, 30%) !default;
$item-list-highlight: lighten($primary-color, 32.5%) !default;

$item-list-number-padding: 0.5 !default;
$item-list-number-padding: 5.0 !default;
$item-list-number-margin: 0.5 !default;
$item-list-number-width: 100px !default;
$item-list-number-font-size: 25px !default;
$item-list-number-font-size: 15px !default;
$item-list-number-font-color: #222222 !default;
$item-list-number-small-font-size: 18px !default;
$item-list-number-small-margin-y: 0 !default;
Expand All @@ -415,7 +415,7 @@ $item-list-image-height: 40px !default;
$item-list-image-width: 40px !default;
$item-list-image-border-radius: 50% !default;

$item-list-value-height: 60px !default;
$item-list-value-height: 100px !default;

$item-list-primary-small-margin-y: 0 !default;
$item-list-primary-small-margin-x: 2 !default;
Expand Down Expand Up @@ -529,4 +529,4 @@ $pagination-item-active-border-color: darken($tertiary-color, 35%) !default;
$pagination-item-active-color: white !default;
$pagination-item-active-font-weight: 600 !default;

$pagination-item-hover-box-shadow: none !default;
$pagination-item-hover-box-shadow: none !default;