pallote-css 0.0.0

package/assets/_sass/utilities/_color.scss

@@ -0,0 +1,122 @@
+// —————————————————————————————————————————————————————————————————
+// fill
+// stroke
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// fill
+// —————————————————————————————————————————————————————————————————
+
+@mixin fill($colors...) {
+
+  @each $i in $colors {
+    .fill--#{nth($i, 1)} {
+      color: nth($i, 3) !important;
+      background-color: nth($i, 2) !important;
+
+      .card__title {
+        color: nth($i, 3) !important;
+      }
+    }
+  }
+}
+
+@include fill (
+  "white" $white $text-contrast,
+  "black" $black $text,
+
+  "grey90" $grey-90 $text,
+  "grey80" $grey-80 $text,
+  "grey70" $grey-70 $text,
+  "grey60" $grey-60 $text,
+  "grey50" $grey-50 $text,
+  "grey40" $grey-40 $text-contrast,
+  "grey30" $grey-30 $text-contrast,
+  "grey20" $grey-20 $text-contrast,
+  "grey10" $grey-10 $text-contrast,
+  "grey5" $grey-5 $text-contrast,
+
+  "primaryLight" $primary-light $text-contrast,
+  "primary" $primary $primary-text,
+  "primaryDark" $primary-dark $primary-text,
+  "secondaryLight" $secondary-light $text-contrast,
+  "secondary" $secondary $secondary-text,
+  "secondaryDark" $secondary-dark $secondary-text,
+  "highlightLight" $highlight-light $text-contrast,
+  "highlight" $highlight $highlight-text,
+  "highlightDark" $highlight-dark $highlight-text,
+
+  "successLight" $success-light $text-contrast,
+  "success" $success $success-contrast,
+  "successDark" $success-dark $success-contrast,
+  "infoLight" $info-light $text-contrast,
+  "info" $info $info-contrast,
+  "infoDark" $info-dark $info-contrast,
+  "warningLight" $warning-light $text-contrast,
+  "warning" $warning $warning-contrast,
+  "warningDark" $warning-dark $warning-contrast,
+  "errorLight" $error-light $text-contrast,
+  "error" $error $error-contrast,
+  "errorDark" $error-dark $error-contrast,
+
+  "default" $background-default $text,
+  "paper" $background-paper $text,
+
+  "border" $border-color $text
+);
+
+// —————————————————————————————————————————————————————————————————
+// stroke
+// —————————————————————————————————————————————————————————————————
+
+@mixin stroke($colors...) {
+  @each $i in $colors {
+    .stroke--#{nth($i, 1)} {
+      border: 1px solid nth($i, 2) !important;
+    }
+  }
+}
+
+@include stroke (
+  "black" $black,
+  "white" $white,
+
+  "grey90" $grey-90,
+  "grey80" $grey-80,
+  "grey70" $grey-70,
+  "grey60" $grey-60,
+  "grey50" $grey-50,
+  "grey40" $grey-40,
+  "grey30" $grey-30,
+  "grey20" $grey-20,
+  "grey10" $grey-10,
+  "grey5" $grey-5 ,
+
+  "primaryLight" $primary-light,
+  "primary" $primary,
+  "primaryDark" $primary-dark,
+  "secondaryLight" $secondary-light,
+  "secondary" $secondary,
+  "secondaryDark" $secondary-dark,
+  "highlightLight" $highlight-light,
+  "highlight" $highlight,
+  "highlightDark" $highlight-dark,
+
+  "successLight" $success-light,
+  "success" $success,
+  "successDark" $success-dark,
+  "infoLight" $info-light,
+  "info" $info,
+  "infoDark" $info-dark,
+  "warningLight" $warning-light,
+  "warning" $warning,
+  "warningDark" $warning-dark,
+  "errorLight" $error-light,
+  "error" $error,
+  "errorDark" $error-dark,
+
+  "default" $background-default,
+  "paper" $background-paper,
+  
+  "border" $border-color
+);

package/assets/_sass/utilities/_global.scss

@@ -0,0 +1,121 @@
+// —————————————————————————————————————————————————————————————————
+// responsive
+// spacing and size
+// position
+// display
+// misc
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// responsive
+// —————————————————————————————————————————————————————————————————
+
+.hide {
+	
+	&-desktop { @include responsive(down, desktop) { display: none !important; } }
+	&-laptop { @include responsive(down, laptop) { display: none !important; } }
+	&-tablet { @include responsive(down, tablet) { display: none !important; } }
+	&-mobile { @include responsive(down, mobile) { display: none !important; } }
+	&-touch { @include responsive-touch { display: none !important; } }
+}
+
+.show {
+
+	&-desktop { @include responsive(up, desktop) { display: none !important; } }
+	&-laptop { @include responsive(up, laptop) { display: none !important; } }
+	&-tablet { @include responsive(up, tablet) { display: none !important; } }
+	&-mobile { @include responsive(up, mobile) { display: none !important; } }
+}
+
+// —————————————————————————————————————————————————————————————————
+// spacing and size
+// —————————————————————————————————————————————————————————————————
+
+// margin and padding
+
+.m-05 { margin: $spacing-sm !important; }
+.mt-05 { margin-top: $spacing-sm !important; }
+.mr-05 { margin-right: $spacing-sm !important; }
+.mb-05 { margin-bottom: $spacing-sm !important; }
+.ml-05 { margin-left: $spacing-sm !important; }
+
+.p-05 { padding: $spacing-sm !important; }
+.pt-05 { padding-top: $spacing-sm !important; }
+.pr-05 { padding-right: $spacing-sm !important; }
+.pb-05 { padding-bottom: $spacing-sm !important; }
+.pl-05 { padding-left: $spacing-sm !important; }
+
+@for $i from 1 through 20 {
+
+  .m-#{$i} { margin: $i*$spacing-sm !important; }
+  .mt-#{$i} { margin-top: $i*$spacing-sm !important; }
+  .mr-#{$i} { margin-right: $i*$spacing-sm !important; }
+  .mb-#{$i} { margin-bottom: $i*$spacing-sm !important; }
+  .ml-#{$i} { margin-left: $i*$spacing-sm !important; }
+
+  .p-#{$i} { padding: $i*$spacing-sm !important; }
+  .pt-#{$i} { padding-top: $i*$spacing-sm !important; }
+  .pr-#{$i} { padding-right: $i*$spacing-sm !important; }
+  .pb-#{$i} { padding-bottom: $i*$spacing-sm !important; }
+  .pl-#{$i} { padding-left: $i*$spacing-sm !important; }
+}
+
+// width
+
+$max: 100;
+$step: 5;
+
+@for $i from 1 through calc($max/$step) {
+  $value: $i * $step;
+
+  .w-percent-#{$value} { width: $value + 0% !important; }
+}
+
+@for $i from 1 through 40 {
+
+	.w-rem-#{$i} { width: $i*$spacing-sm !important; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// position
+// —————————————————————————————————————————————————————————————————
+
+.pos {
+
+  &-absolute { position: absolute; }
+}
+// —————————————————————————————————————————————————————————————————
+// display
+// —————————————————————————————————————————————————————————————————
+
+// general display
+
+.d-flex { display: flex; }
+.d-inlineFlex { display: inline-flex; }
+.d-block { display: block; }
+.d-inlineBlock { display: inline-block; }
+
+// flexbox
+
+.fb {
+
+  &-content { flex-basis: content !important; }
+  &-0 { flex-basis: 0 !important; }
+  &-1 { flex-basis: 1 !important; }
+}
+
+.fg {
+
+  &-0 { flex-grow: 0 !important; }
+  &-1 { flex-grow: 1 !important; }
+}
+
+.fs {
+
+  &-0 { flex-shrink: 0 !important; }
+  &-1 { flex-shrink: 1 !important; }
+}
+
+// —————————————————————————————————————————————————————————————————
+// misc
+// —————————————————————————————————————————————————————————————————

package/assets/_sass/utilities/_text.scss

@@ -0,0 +1,63 @@
+// —————————————————————————————————————————————————————————————————
+// color
+// alignement
+// style
+// weight
+// —————————————————————————————————————————————————————————————————
+
+// —————————————————————————————————————————————————————————————————
+// color
+// —————————————————————————————————————————————————————————————————
+
+@mixin color($prefix, $colors...) {
+	@each $i in $colors {
+		.#{$prefix}#{nth($i, 1)} {
+			color: nth($i, 2) !important;
+
+			.h1, .h2, .h3, .h4, .h5, .h6 {
+				color: nth($i, 2) !important;
+			}
+		}
+	}
+}
+
+@include color('text--',
+	'default' $text,
+	'alt' $text-alt,
+	'disabled' $text-disabled,
+	'contrast' $text-contrast,
+	'contrastAlt' $text-contrast-alt,
+	'contrastDisabled' $text-contrast-disabled,
+	'primary' $primary,
+	'secondary' $secondary,
+	'primary' $primary,
+	'highlight' $highlight,
+	'success' $success,
+	'info' $info,
+	'warning' $warning,
+	'error' $error,
+);
+
+// —————————————————————————————————————————————————————————————————
+// alignement
+// —————————————————————————————————————————————————————————————————
+
+.text--left, %text--left { text-align: left !important; }
+.text--center, %text--center { text-align: center !important; }
+.text--right, %text--right { text-align: right !important; }
+
+// —————————————————————————————————————————————————————————————————
+// style
+// —————————————————————————————————————————————————————————————————
+
+.text--italic, %text--italic { font-style: italic !important; }
+.text--underline, %text--underline { text-decoration: underline !important; }
+.text--strikeThrough, %text--strikeThrough { text-decoration: line-through !important; }
+
+// —————————————————————————————————————————————————————————————————
+// weight
+// —————————————————————————————————————————————————————————————————
+
+.text--regular, %text--regular { font-weight: $font-regular !important; }
+.text--bold, %text--bold { font-weight: $font-bold !important; }
+.text--black, %text--black { font-weight: $font-black !important; }

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "pallote-css",
+  "version": "0.0.0",
+  "description": "CSS component library",
+  "main": "_site/assets/css/pallote.css",
+  "files": [
+    "_site/assets/css/pallote.css",
+    "assets/_sass/*"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ArnaudDarre/pallote-css.git"
+  },
+  "keywords": [
+    "CSS library",
+    "CSS Components",
+    "SASS"
+  ],
+  "author": "Nocheke",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/ArnaudDarre/pallote-css/issues"
+  },
+  "homepage": "https://github.com/ArnaudDarre/pallote-css#readme"
+}