Skip to content

Commit

Permalink
✨ feat(spacing.css): Added new util classes for margin and padding
Browse files Browse the repository at this point in the history
  • Loading branch information
@Spiderpig86
Spiderpig86 committed Mar 24, 2020
1 parent e33e129 commit 79ab814
Show file tree
Hide file tree
Showing 7 changed files with 4,439 additions and 4,386 deletions.
5 changes: 2 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,17 +75,16 @@ Framework components are now broken down into `core` and `ext` packages. The `co
* [Links](https://github.com/Spiderpig86/Cirrus/blob/master/src/core/links.css "Links") - Link styles with different effects.
* [Lists](https://github.com/Spiderpig86/Cirrus/blob/master/src/core/lists.css "Lists") - A simple stylesheet to simplify list UI.
* [Media](https://github.com/Spiderpig86/Cirrus/blob/master/src/core/media.css "Media") - Rules for styling images, videos, figures, avatars, and other media components.
* [Modal](https://github.com/Spiderpig86/Cirrus/blob/master/src/core/modal.css "Modal") - Styles for a pop up modal dialog.
* [Placeholder](https://github.com/Spiderpig86/Cirrus/blob/master/src/core/placeholder.css "Placeholder") - A padded generic container to display additional information.
* [Tables](https://github.com/Spiderpig86/Cirrus/blob/master/src/core/table.css "Tables") - Clean designs for tables.
* [Theme](https://github.com/Spiderpig86/Cirrus/blob/master/src/core/theme.css "Theme") - Default colors of the framework.
* [Util](https://github.com/Spiderpig86/Cirrus/blob/master/src/core/util.css "Utils") - Designed to solve many common headaches with CSS.

#### Ext
* [Animations](https://github.com/Spiderpig86/Cirrus/blob/master/src/ext/animations.css "Animations") - Consists of animations that will work with the controls.
* [Avatar](https://github.com/Spiderpig86/Cirrus/blob/master/src/ext/avatar.css "Avatar") - Styles for user avatars.
* [Cards](https://github.com/Spiderpig86/Cirrus/blob/master/src/ext/card.css "Cards") - Base for card controls.
* [Grid](https://github.com/Spiderpig86/Cirrus/blob/master/src/ext/card.css "Grid") - Experimental implementation of CSS Grid standard.
* [Modal](https://github.com/Spiderpig86/Cirrus/blob/master/src/core/modal.css "Modal") - Styles for a pop up modal dialog.
* [Modifiers](https://github.com/Spiderpig86/Cirrus/blob/master/src/ext/modifiers.css "Modifiers") - Classes designed for modifying text and backgrounds.
* [Pagination](https://github.com/Spiderpig86/Cirrus/blob/master/src/ext/pagination.css "Pagination") - Design for pagination and pagination navigation links.
* [Placeholder](https://github.com/Spiderpig86/Cirrus/blob/master/src/ext/placeholder.css "Placeholder") - Styles for a control designed to be a placeholder such as "Coming Soon" panels and so on.
Expand Down
240 changes: 73 additions & 167 deletions dist/cirrus-core.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3033,174 +3033,78 @@ video.video-fullscreen {
.img-contain {
object-fit: contain;
}
/* Margin */
.m-0 { margin: 0; }
.m-1 { margin: calc(var(--space-size) * 1); }
.m-2 { margin: calc(var(--space-size) * 2); }
.m-3 { margin: calc(var(--space-size) * 3); }
.m-4 { margin: calc(var(--space-size) * 4); }
.m-5 { margin: calc(var(--space-size) * 5); }

.mt-0, .my-0 { margin-top: 0; }
.mt-1, .my-1 { margin-top: calc(var(--space-size) * 1); }
.mt-2, .my-2 { margin-top: calc(var(--space-size) * 2); }
.mt-3, .my-3 { margin-top: calc(var(--space-size) * 3); }
.mt-4, .my-4 { margin-top: calc(var(--space-size) * 4); }
.mt-5, .my-5 { margin-top: calc(var(--space-size) * 5); }

.mb-0, .my-0 { margin-bottom: 0; }
.mb-1, .my-1 { margin-bottom: calc(var(--space-size) * 1); }
.mb-2, .my-2 { margin-bottom: calc(var(--space-size) * 2); }
.mb-3, .my-3 { margin-bottom: calc(var(--space-size) * 3); }
.mb-4, .my-4 { margin-bottom: calc(var(--space-size) * 4); }
.mb-5, .my-5 { margin-bottom: calc(var(--space-size) * 5); }

.ml-0, .mx-0 { margin-left: 0; }
.ml-1, .mx-1 { margin-left: calc(var(--space-size) * 1); }
.ml-2, .mx-2 { margin-left: calc(var(--space-size) * 2); }
.ml-3, .mx-3 { margin-left: calc(var(--space-size) * 3); }
.ml-4, .mx-4 { margin-left: calc(var(--space-size) * 4); }
.ml-5, .mx-5 { margin-left: calc(var(--space-size) * 5); }

.mr-0, .mx-0 { margin-right: 0; }
.mr-1, .mx-1 { margin-right: calc(var(--space-size) * 1); }
.mr-2, .mx-2 { margin-right: calc(var(--space-size) * 2); }
.mr-3, .mx-3 { margin-right: calc(var(--space-size) * 3); }
.mr-4, .mx-4 { margin-right: calc(var(--space-size) * 4); }
.mr-5, .mx-5 { margin-right: calc(var(--space-size) * 5); }

/* Padding */
.p-0 { padding: 0; }
.p-1 { padding: calc(var(--space-size) * 1); }
.p-2 { padding: calc(var(--space-size) * 2); }
.p-3 { padding: calc(var(--space-size) * 3); }
.p-4 { padding: calc(var(--space-size) * 4); }
.p-5 { padding: calc(var(--space-size) * 5); }

.pt-0, .py-0 { padding-top: 0; }
.pt-1, .py-1 { padding-top: calc(var(--space-size) * 1); }
.pt-2, .py-2 { padding-top: calc(var(--space-size) * 2); }
.pt-3, .py-3 { padding-top: calc(var(--space-size) * 3); }
.pt-4, .py-4 { padding-top: calc(var(--space-size) * 4); }
.pt-5, .py-5 { padding-top: calc(var(--space-size) * 5); }

.pb-0, .py-0 { padding-bottom: 0; }
.pb-1, .py-1 { padding-bottom: calc(var(--space-size) * 1); }
.pb-2, .py-2 { padding-bottom: calc(var(--space-size) * 2); }
.pb-3, .py-3 { padding-bottom: calc(var(--space-size) * 3); }
.pb-4, .py-4 { padding-bottom: calc(var(--space-size) * 4); }
.pb-5, .py-5 { padding-bottom: calc(var(--space-size) * 5); }

.pl-0, .px-0 { padding-left: 0; }
.pl-1, .px-1 { padding-left: calc(var(--space-size) * 1); }
.pl-2, .px-2 { padding-left: calc(var(--space-size) * 2); }
.pl-3, .px-3 { padding-left: calc(var(--space-size) * 3); }
.pl-4, .px-4 { padding-left: calc(var(--space-size) * 4); }
.pl-5, .px-5 { padding-left: calc(var(--space-size) * 5); }

.pr-0, .px-0 { padding-right: 0; }
.pr-1, .px-1 { padding-right: calc(var(--space-size) * 1); }
.pr-2, .px-2 { padding-right: calc(var(--space-size) * 2); }
.pr-3, .px-3 { padding-right: calc(var(--space-size) * 3); }
.pr-4, .px-4 { padding-right: calc(var(--space-size) * 4); }
.pr-5, .px-5 { padding-right: calc(var(--space-size) * 5); }

/* The base of the modal dialog, which is an overlay of the webpage */
.modal {
position: fixed; /* Scrolls with the user */
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0; /* Initially hidden */
padding: 1rem;
display: none; /* Doesn't block the elements underneath */
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; /* Vertical centering */
pointer-events: none; /* Prevent any pointer events made to modal while hidden */
}

/* When the modal dialog is visible */
.modal:target, .modal.shown {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
opacity: 1;
z-index: 999;
pointer-events: auto; /* Re-enable pointer events */
}

/* The div in the modal dialpog used to create the translucent background */
.modal:target .modal-overlay,
.modal.shown .modal-overlay {
position: absolute; /* Absolute inside of the modal container */
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
background-color: rgba(54, 59, 68, 0.5);
}

/* The modal dialog body with the text itself */
.modal-content {
background-color: var(--cirrus-bg);
padding: 0;
display: block;
border-radius: 3px;
box-shadow: 0 .4rem 1rem rgba(54, 59, 68, .3);
z-index: 1;
color: var(--cirrus-fg);
max-width: 40rem; /* 640px */
}

/* Different size modals */
.modal.modal-small .modal-content {
max-width: 20rem; /* 320px */
}

.modal.modal-large .modal-content {
max-width: 60rem; /* 960px */
}

.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5,
.modal-content h6 {
color: var(--cirrus-fg);
}

.modal:target .modal-container,
.modal.shown .modal-container {
-webkit-animation: slide-down var(--animation-duration) ease 1;
animation: slide-down var(--animation-duration) ease 1;
z-index: 1;
}

/* Restrict width */
.modal-content.small {
max-width: 32rem;
}

.modal-content .modal-header {
padding: 1rem 3rem;
}

.modal-content .modal-header .modal-title {
font-weight: bolder;
font-size: 1.4rem;
}

.modal-content .modal-body {
padding: 1rem 3rem;
overflow-y: auto;
max-height: 50vh; /* Max height is 50% of viewport height which prevents dialog from extetnding past screen */
position: relative;
}

.modal-content .modal-footer {
padding: 1rem 3rem;
text-align: right;
}

/* MODAL ANIMATIONS */
.modal.modal-animated--dropdown {
-webkit-animation: slide-down var(--animation-duration) ease 1;
animation: slide-down var(--animation-duration) ease 1;
}

/* Visible state */
.modal.modal-animated--zoom-in, .modal.modal-animated--zoom-out {
display: -webkit-box; /* Force dialog to appear in the center */
display: -ms-flexbox;
display: flex;
opacity: 0;
transition: 300ms all ease;
}
.modal:target.modal-animated--zoom-in, .modal:target.modal-animated--zoom-out {
opacity: 1;
transition: 300ms all ease;
}
.modal.modal-animated--zoom-in .modal-content {
transform: scale(0.8);
transition: 300ms all ease;
}
.modal:target.modal-animated--zoom-in .modal-content, .modal:target.modal-animated--zoom-out .modal-content {
transform: scale(1);
transition: 300ms all ease;
}

.modal.modal-animated--zoom-out .modal-content {
transform: scale(1.2);
transition: 300ms all ease;
}

/* Keyframes for slide down animation */
@-webkit-keyframes slide-down{
0%{
opacity:0;
-webkit-transform:translateY(-3rem);
transform:translateY(-3rem)
}
100%{
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
}
@keyframes slide-down{
0%{
opacity:0;
-webkit-transform:translateY(-3rem);
transform:translateY(-3rem)
}
100%{
opacity:1;
-webkit-transform:translateY(0);
transform:translateY(0)
}
}

@media only screen and (max-width: 768px) {
.modal-content {
max-width: 90%;
}
}
/* TABLE */

.table {
Expand Down Expand Up @@ -3355,6 +3259,8 @@ video.video-fullscreen {

--animation-duration: .2s;
--focus-opacity: 0.4;

--space-size: 0.5rem;
}
/* UTILS */
/* Utility classes to help solve some very annoying issues */
Expand Down
2 changes: 1 addition & 1 deletion dist/cirrus-core.min.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 79ab814

Please sign in to comment.