mekari_ui_toolkit 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 0f5ce6fc5ba375c5973b009c7ddb2ca9193572381a37319286e8330863d59b76
+  data.tar.gz: 4b454126f1875e22caf4ad3846b9c4dafa2c84e829c30b7cfb295e41872ef7ca
+SHA512:
+  metadata.gz: ba26d444c34e9bac71d778e22a44e582a8a738777df7618f6e3150dcd2b4899c0ce55a472f99a63129828dc6168dea177e031567f9ed440c06408c31e49c8645
+  data.tar.gz: d143eb2f8482465a5315e02b4024b3815c80ba17702f1b4eeaa18b00936b7ea1ba287938e00f25256c6800ee2aac6f31f6772c9256d06b23929d1419b47e837e

data/lib/css/components/mekari-ui-alert-min.css

@@ -0,0 +1,2 @@
+.close{float:right;font-size:1.3125rem;font-weight:500;line-height:1;color:#777;text-shadow:0 1px 0 #fff;opacity:.5}@media (max-width:1200px){.close{font-size:calc(1.25625rem + .075vw)}}.close:hover{color:#777;text-decoration:none}.close:not(:disabled):not(.disabled):focus,.close:not(:disabled):not(.disabled):hover{opacity:.75}button.close{padding:0;background-color:transparent;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}a.close.disabled{pointer-events:none}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{position:relative;height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:4px}.alert-heading{color:inherit}.alert-link{font-weight:500}.alert-dismissible{padding-right:3.8125rem}.alert-dismissible .close{position:absolute;top:0;right:0;padding:.75rem 1.25rem;color:inherit}.alert-danger{color:#702112;background-color:#f7d9d3;border-color:#f4cac1}.alert-danger hr{border-top-color:#f0b7ab}.alert-danger .alert-link{color:#44140b}.alert-success{color:#005332;background-color:#ccecdf;border-color:#b8e4d3}.alert-success hr{border-top-color:#a6ddc8}.alert-success .alert-link{color:#002013}.alert-info{color:#857a50;background-color:#fffbeb;border-color:#fff9e2}.alert-info hr{border-top-color:#fff4c9}.alert-info .alert-link{color:#655d3d}.alert-warning{color:#855f00;background-color:#fff1cc;border-color:#ffebb8}.alert-warning hr{border-top-color:#ffe49f}.alert-warning .alert-link{color:#523b00}.alert-primary{color:#003163;background-color:#ccdff2;border-color:#b8d2ed}.alert-primary hr{border-top-color:#a4c5e8}.alert-primary .alert-link{color:#001830}.alert-jurnal{color:#005173;background-color:#ccebf8;border-color:#b8e3f6}.alert-jurnal hr{border-top-color:#a1daf3}.alert-jurnal .alert-link{color:#002d40}.alert-talenta{color:#64161b;background-color:#f2d4d6;border-color:#edc3c6}.alert-talenta hr{border-top-color:#e7afb3}.alert-talenta .alert-link{color:#3a0d10}.alert-klikpajak{color:#813901;background-color:#fee2cc;border-color:#fdd6b8}.alert-klikpajak hr{border-top-color:#fcc89f}.alert-klikpajak .alert-link{color:#4e2301}.alert-mekari{color:#392577;background-color:#e2dafa;border-color:#d6ccf8}.alert-mekari hr{border-top-color:#c4b6f5}.alert-mekari .alert-link{color:#261950}.alert-dark{color:#111;background-color:#d3d3d3;border-color:#c1c1c1}.alert-dark hr{border-top-color:#b4b4b4}.alert-dark .alert-link{color:#000}.alert-slate{color:#3e3e3e;background-color:#e4e4e4;border-color:#d9d9d9}.alert-slate hr{border-top-color:#ccc}.alert-slate .alert-link{color:#252525}.alert-muted{color:#5e5e5e;background-color:#f0f0f0;border-color:#eaeaea}.alert-muted hr{border-top-color:#ddd}.alert-muted .alert-link{color:#454545}.alert-smoke{color:#767676;background-color:#f9f9f9;border-color:#f7f7f7}.alert-smoke hr{border-top-color:#eaeaea}.alert-smoke .alert-link{color:#5d5d5d}.alert-light{color:#838383;background-color:#fefefe;border-color:#fefefe}.alert-light hr{border-top-color:#f1f1f1}.alert-light .alert-link{color:#6a6a6a}.alert-cloud{color:#7e7f80;background-color:#fcfdfd;border-color:#fbfcfd}.alert-cloud hr{border-top-color:#eaeff5}.alert-cloud .alert-link{color:#656666}.alert-link{color:#0a2d85;background-color:#d0ddff;border-color:#bdd0ff}.alert-link hr{border-top-color:#a4beff}.alert-link .alert-link{color:#061d56}.alert-white{color:#858585;background-color:#fff;border-color:#fff}.alert-white hr{border-top-color:#f2f2f2}.alert-white .alert-link{color:#6c6c6c}.alert-danger{color:#d74022;background-color:rgba(215,64,34,.15);border:none}.alert-toast.alert-danger{border:1px solid #d74022}.alert-success{color:#009f61;background-color:rgba(0,159,97,.15);border:none}.alert-toast.alert-success{border:1px solid #009f61}.alert-info{color:#ffeb99;background-color:rgba(255,235,153,.15);border:none}.alert-toast.alert-info{border:1px solid #ffeb99}.alert-warning{color:#ffb700;background-color:rgba(255,183,0,.15);border:none}.alert-toast.alert-warning{border:1px solid #ffb700}.alert-primary{color:#005fbf;background-color:rgba(0,95,191,.15);border:none}.alert-toast.alert-primary{border:1px solid #005fbf}.alert-jurnal{color:#009bde;background-color:rgba(0,155,222,.15);border:none}.alert-toast.alert-jurnal{border:1px solid #009bde}.alert-talenta{color:#c02a34;background-color:rgba(192,42,52,.15);border:none}.alert-toast.alert-talenta{border:1px solid #c02a34}.alert-klikpajak{color:#f96d01;background-color:rgba(249,109,1,.15);border:none}.alert-toast.alert-klikpajak{border:1px solid #f96d01}.alert-mekari{color:#6d48e5;background-color:rgba(109,72,229,.15);border:none}.alert-toast.alert-mekari{border:1px solid #6d48e5}.alert-dark{color:#212121;background-color:rgba(33,33,33,.15);border:none}.alert-toast.alert-dark{border:1px solid #212121}.alert-slate{color:#777;background-color:rgba(119,119,119,.15);border:none}.alert-toast.alert-slate{border:1px solid #777}.alert-muted{color:#b4b4b4;background-color:rgba(180,180,180,.15);border:none}.alert-toast.alert-muted{border:1px solid #b4b4b4}.alert-smoke{color:#e2e2e2;background-color:rgba(226,226,226,.15);border:none}.alert-toast.alert-smoke{border:1px solid #e2e2e2}.alert-light{color:#fbfbfb;background-color:rgba(251,251,251,.15);border:none}.alert-toast.alert-light{border:1px solid #fbfbfb}.alert-cloud{color:#f2f4f7;background-color:rgba(242,244,247,.15);border:none}.alert-toast.alert-cloud{border:1px solid #f2f4f7}.alert-link{color:#1357ff;background-color:rgba(19,87,255,.15);border:none}.alert-toast.alert-link{border:1px solid #1357ff}.alert-white{color:#fff;background-color:rgba(255,255,255,.15);border:none}.alert-toast.alert-white{border:1px solid #fff}.alert-info{color:#005fbf;background-color:rgba(0,95,191,.15);border:none}.alert-toast.alert-info{border:1px solid #005fbf}.alert-error{color:#d74022;background-color:rgba(215,64,34,.15);border:none}.alert-toast.alert-error{border:1px solid #d74022}.alert{display:flex;padding:16px;font-size:0}.alert .alert-icon{flex-basis:24px;width:24px;margin-right:12px;font-size:14px;vertical-align:top}.alert .alert-icon .ic{color:inherit!important}.alert .alert-content{display:inline-block;padding-top:3px;font-size:14px;color:#212121;vertical-align:top}.alert .alert-icon+.alert-content{flex:1 1 0}.alert .alert-title{font-weight:500;line-height:20px}.alert .alert-description{line-height:20px}.alert .alert-title+.alert-description{padding-top:4px}.alert .alert-link{display:block;padding-top:16px;font-weight:400;color:#1357ff!important;background-color:transparent}.alert.alert-dismissible .close{position:relative;display:inline-block;width:24px;height:24px;padding:0;color:#777}.alert.alert-dismissible .close .ic{font-size:16px;font-weight:700;line-height:16px;vertical-align:top}.alert.alert-small .alert-description{display:inline-block}.alert.alert-small .alert-link{display:inline-block;padding:0;padding-left:16px;font-weight:400;color:#1357ff!important;background-color:transparent}.alert.alert-toast{display:inline-flex;padding:12px;font-size:0;background-color:#fff;border-radius:4px;box-shadow:0 4px 8px 0 rgba(119,119,119,.1),0 12px 20px 0 rgba(119,119,119,.2)}.alert.alert-toast .alert-icon{margin-right:8px}.alert.alert-toast .alert-description{display:inline-block}.alert.alert-toast .alert-link{display:inline-block;padding:0;padding-left:16px;font-weight:400;color:#1357ff!important;background-color:transparent}
+/*# sourceMappingURL=mekari-ui-alert-min.css.map */

data/lib/css/components/mekari-ui-alert-min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../scss/vendors/_close.scss","../../../scss/vendors/_rfs.scss","../../../scss/vendors/mixins/_hover.scss","../../../scss/vendors/_transitions.scss","../../../scss/vendors/mixins/_transition.scss","../../../scss/vendors/_alert.scss","../../../scss/vendors/mixins/_border-radius.scss","../../../scss/vendors/mixins/_alert.scss","../../../scss/vendors/mixins/_gradients.scss","../../../scss/components/config/_alert.scss"],"names":[],"mappings":"AAAA,OACE,MAAA,MCwJM,UAAA,UDtJN,YAAA,IACA,YAAA,EACA,MAAA,KACA,YAAA,EAAA,IAAA,EAAA,KACA,QAAA,GCwKM,0BD/KR,OCuLY,UAAA,2BC3KV,aFDE,MAAA,KACA,gBAAA,KEIF,2CAAA,2CFCI,QAAA,IAWN,aACE,QAAA,EACA,iBAAA,YACA,OAAA,EACA,mBAAA,KAAA,gBAAA,KAAA,WAAA,KAMF,iBACE,eAAA,KGvCF,MCMM,WAAA,QAAA,KAAA,OAKF,uCDXJ,MCYM,WAAA,MDZN,iBAII,QAAA,EAIJ,qBAEI,QAAA,KAIJ,YACE,SAAA,SACA,OAAA,EACA,SAAA,OCXI,WAAA,OAAA,KAAA,KAKF,uCDGJ,YCFM,WAAA,MCRN,OACE,SAAA,SACA,QAAA,OAAA,QACA,cAAA,KACA,OAAA,IAAA,MAAA,YCHE,cAAA,IDQJ,eAEE,MAAA,QAIF,YACE,YAAA,IAQF,mBACE,cAAA,UADF,0BAKI,SAAA,SACA,IAAA,EACA,MAAA,EACA,QAAA,OAAA,QACA,MAAA,QAUF,cE9CA,MAAA,QCKE,iBAAA,QDHF,aAAA,QAEA,iBACE,iBAAA,QAGF,0BACE,MAAA,QFqCF,eE9CA,MAAA,QCKE,iBAAA,QDHF,aAAA,QAEA,kBACE,iBAAA,QAGF,2BACE,MAAA,QFqCF,YE9CA,MAAA,QCKE,iBAAA,QDHF,aAAA,QAEA,eACE,iBAAA,QAGF,wBACE,MAAA,QFqCF,eE9CA,MAAA,QCKE,iBAAA,QDHF,aAAA,QAEA,kBACE,iBAAA,QAGF,2BACE,MAAA,QFqCF,eE9CA,MAAA,QCKE,iBAAA,QDHF,aAAA,QAEA,kBACE,iBAAA,QAGF,2BACE,MAAA,QFqCF,cE9CA,MAAA,QCKE,iBAAA,QDHF,aAAA,QAEA,iBACE,iBAAA,QAGF,0BACE,MAAA,QFqCF,eE9CA,MAAA,QCKE,iBAAA,QDHF,aAAA,QAEA,kBACE,iBAAA,QAGF,2BACE,MAAA,QFqCF,iBE9CA,MAAA,QCKE,iBAAA,QDHF,aAAA,QAEA,oBACE,iBAAA,QAGF,6BACE,MAAA,QFqCF,cE9CA,MAAA,QCKE,iBAAA,QDHF,aAAA,QAEA,iBACE,iBAAA,QAGF,0BACE,MAAA,QFqCF,YE9CA,MAAA,KCKE,iBAAA,QDHF,aAAA,QAEA,eACE,iBAAA,QAGF,wBACE,MAAA,KFqCF,aE9CA,MAAA,QCKE,iBAAA,QDHF,aAAA,QAEA,gBACE,iBAAA,KAGF,yBACE,MAAA,QFqCF,aE9CA,MAAA,QCKE,iBAAA,QDHF,aAAA,QAEA,gBACE,iBAAA,KAGF,yBACE,MAAA,QFqCF,aE9CA,MAAA,QCKE,iBAAA,QDHF,aAAA,QAEA,gBACE,iBAAA,QAGF,yBACE,MAAA,QFqCF,aE9CA,MAAA,QCKE,iBAAA,QDHF,aAAA,QAEA,gBACE,iBAAA,QAGF,yBACE,MAAA,QFqCF,aE9CA,MAAA,QCKE,iBAAA,QDHF,aAAA,QAEA,gBACE,iBAAA,QAGF,yBACE,MAAA,QFqCF,YE9CA,MAAA,QCKE,iBAAA,QDHF,aAAA,QAEA,eACE,iBAAA,QAGF,wBACE,MAAA,QFqCF,aE9CA,MAAA,QCKE,iBAAA,KDHF,aAAA,KAEA,gBACE,iBAAA,QAGF,yBACE,MAAA,QETF,cACE,MAAA,QACA,iBAAA,oBACA,OAAA,KAEF,0BACE,OAAA,IAAA,MAAA,QANF,eACE,MAAA,QACA,iBAAA,mBACA,OAAA,KAEF,2BACE,OAAA,IAAA,MAAA,QANF,YACE,MAAA,QACA,iBAAA,sBACA,OAAA,KAEF,wBACE,OAAA,IAAA,MAAA,QANF,eACE,MAAA,QACA,iBAAA,oBACA,OAAA,KAEF,2BACE,OAAA,IAAA,MAAA,QANF,eACE,MAAA,QACA,iBAAA,mBACA,OAAA,KAEF,2BACE,OAAA,IAAA,MAAA,QANF,cACE,MAAA,QACA,iBAAA,oBACA,OAAA,KAEF,0BACE,OAAA,IAAA,MAAA,QANF,eACE,MAAA,QACA,iBAAA,oBACA,OAAA,KAEF,2BACE,OAAA,IAAA,MAAA,QANF,iBACE,MAAA,QACA,iBAAA,oBACA,OAAA,KAEF,6BACE,OAAA,IAAA,MAAA,QANF,cACE,MAAA,QACA,iBAAA,qBACA,OAAA,KAEF,0BACE,OAAA,IAAA,MAAA,QANF,YACE,MAAA,QACA,iBAAA,mBACA,OAAA,KAEF,wBACE,OAAA,IAAA,MAAA,QANF,aACE,MAAA,KACA,iBAAA,sBACA,OAAA,KAEF,yBACE,OAAA,IAAA,MAAA,KANF,aACE,MAAA,QACA,iBAAA,sBACA,OAAA,KAEF,yBACE,OAAA,IAAA,MAAA,QANF,aACE,MAAA,QACA,iBAAA,sBACA,OAAA,KAEF,yBACE,OAAA,IAAA,MAAA,QANF,aACE,MAAA,QACA,iBAAA,sBACA,OAAA,KAEF,yBACE,OAAA,IAAA,MAAA,QANF,aACE,MAAA,QACA,iBAAA,sBACA,OAAA,KAEF,yBACE,OAAA,IAAA,MAAA,QANF,YACE,MAAA,QACA,iBAAA,oBACA,OAAA,KAEF,wBACE,OAAA,IAAA,MAAA,QANF,aACE,MAAA,KACA,iBAAA,sBACA,OAAA,KAEF,yBACE,OAAA,IAAA,MAAA,KAIJ,YACE,MAAA,QACA,iBAAA,mBACA,OAAA,KAGF,wBACE,OAAA,IAAA,MAAA,QAGF,aACE,MAAA,QACA,iBAAA,oBACA,OAAA,KAGF,yBACE,OAAA,IAAA,MAAA,QAGF,OACE,QAAA,KACA,QAAA,KACA,UAAA,EAHF,mBAMI,WAAA,KACA,MAAA,KACA,aAAA,KACA,UAAA,KACA,eAAA,IAVJ,uBAYM,MAAA,kBAZN,sBAiBI,QAAA,aACA,YAAA,IACA,UAAA,KACA,MAAA,QACA,eAAA,IArBJ,kCAyBI,KAAA,EAAA,EAAA,EAzBJ,oBA6BI,YAAA,IACA,YAAA,KA9BJ,0BAkCI,YAAA,KAlCJ,uCAsCI,YAAA,IAtCJ,mBA0CI,QAAA,MACA,YAAA,KACA,YAAA,IACA,MAAA,kBACA,iBAAA,YAIJ,gCAEI,SAAA,SACA,QAAA,aACA,MAAA,KACA,OAAA,KACA,QAAA,EACA,MAAA,KAPJ,oCASM,UAAA,KACA,YAAA,IACA,YAAA,KACA,eAAA,IAKN,sCAEI,QAAA,aAFJ,+BAKI,QAAA,aACA,QAAA,EACA,aAAA,KACA,YAAA,IACA,MAAA,kBACA,iBAAA,YAIJ,mBACE,QAAA,YACA,QAAA,KACA,UAAA,EACA,iBAAA,KACA,cAAA,IACA,WAAA,EAAA,IAAA,IAAA,EAAA,oBAAA,CAAA,EAAA,KAAA,KAAA,EAAA,qBANF,+BAQI,aAAA,IARJ,sCAWI,QAAA,aAXJ,+BAcI,QAAA,aACA,QAAA,EACA,aAAA,KACA,YAAA,IACA,MAAA,kBACA,iBAAA","sourcesContent":[".close {\n  float: right;\n  @include font-size($close-font-size);\n  font-weight: $close-font-weight;\n  line-height: 1;\n  color: $close-color;\n  text-shadow: $close-text-shadow;\n  opacity: .5;\n\n  // Override <a>'s hover style\n  @include hover {\n    color: $close-color;\n    text-decoration: none;\n  }\n\n  &:not(:disabled):not(.disabled) {\n    @include hover-focus {\n      opacity: .75;\n    }\n  }\n}\n\n// Additional properties for button version\n// iOS requires the button element instead of an anchor tag.\n// If you want the anchor version, it requires `href=\"#\"`.\n// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile\n\n// stylelint-disable-next-line selector-no-qualifying-type\nbutton.close {\n  padding: 0;\n  background-color: transparent;\n  border: 0;\n  appearance: none;\n}\n\n// Future-proof disabling of clicks on `<a>` elements\n\n// stylelint-disable-next-line selector-no-qualifying-type\na.close.disabled {\n  pointer-events: none;\n}\n","// stylelint-disable property-blacklist, scss/dollar-variable-default\n\n// SCSS RFS mixin\n//\n// Automated font-resizing\n//\n// See https://github.com/twbs/rfs\n\n// Configuration\n\n// Base font size\n$rfs-base-font-size: 1.25rem !default;\n$rfs-font-size-unit: rem !default;\n\n// Breakpoint at where font-size starts decreasing if screen width is smaller\n$rfs-breakpoint: 1200px !default;\n$rfs-breakpoint-unit: px !default;\n\n// Resize font-size based on screen height and width\n$rfs-two-dimensional: false !default;\n\n// Factor of decrease\n$rfs-factor: 10 !default;\n\n@if type-of($rfs-factor) != \"number\" or $rfs-factor <= 1 {\n  @error \"`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.\";\n}\n\n// Generate enable or disable classes. Possibilities: false, \"enable\" or \"disable\"\n$rfs-class: false !default;\n\n// 1 rem = $rfs-rem-value px\n$rfs-rem-value: 16 !default;\n\n// Safari iframe resize bug: https://github.com/twbs/rfs/issues/14\n$rfs-safari-iframe-resize-bug-fix: false !default;\n\n// Disable RFS by setting $enable-responsive-font-sizes to false\n$enable-responsive-font-sizes: true !default;\n\n// Cache $rfs-base-font-size unit\n$rfs-base-font-size-unit: unit($rfs-base-font-size);\n\n// Remove px-unit from $rfs-base-font-size for calculations\n@if $rfs-base-font-size-unit == \"px\" {\n  $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);\n}\n@else if $rfs-base-font-size-unit == \"rem\" {\n  $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);\n}\n\n// Cache $rfs-breakpoint unit to prevent multiple calls\n$rfs-breakpoint-unit-cache: unit($rfs-breakpoint);\n\n// Remove unit from $rfs-breakpoint for calculations\n@if $rfs-breakpoint-unit-cache == \"px\" {\n  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);\n}\n@else if $rfs-breakpoint-unit-cache == \"rem\" or $rfs-breakpoint-unit-cache == \"em\" {\n  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);\n}\n\n// Responsive font-size mixin\n@mixin rfs($fs, $important: false) {\n  // Cache $fs unit\n  $fs-unit: if(type-of($fs) == \"number\", unit($fs), false);\n\n  // Add !important suffix if needed\n  $rfs-suffix: if($important, \" !important\", \"\");\n\n  // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value\n  @if not $fs-unit or $fs-unit != \"\" and $fs-unit != \"px\" and $fs-unit != \"rem\" or $fs == 0 {\n    font-size: #{$fs}#{$rfs-suffix};\n  }\n  @else {\n    // Variables for storing static and fluid rescaling\n    $rfs-static: null;\n    $rfs-fluid: null;\n\n    // Remove px-unit from $fs for calculations\n    @if $fs-unit == \"px\" {\n      $fs: $fs / ($fs * 0 + 1);\n    }\n    @else if $fs-unit == \"rem\" {\n      $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);\n    }\n\n    // Set default font-size\n    @if $rfs-font-size-unit == rem {\n      $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};\n    }\n    @else if $rfs-font-size-unit == px {\n      $rfs-static: #{$fs}px#{$rfs-suffix};\n    }\n    @else {\n      @error \"`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.\";\n    }\n\n    // Only add media query if font-size is bigger as the minimum font-size\n    // If $rfs-factor == 1, no rescaling will take place\n    @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {\n      $min-width: null;\n      $variable-unit: null;\n\n      // Calculate minimum font-size for given font-size\n      $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;\n\n      // Calculate difference between given font-size and minimum font-size for given font-size\n      $fs-diff: $fs - $fs-min;\n\n      // Base font-size formatting\n      // No need to check if the unit is valid, because we did that before\n      $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);\n\n      // If two-dimensional, use smallest of screen width and height\n      $variable-unit: if($rfs-two-dimensional, vmin, vw);\n\n      // Calculate the variable width between 0 and $rfs-breakpoint\n      $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};\n\n      // Set the calculated font-size.\n      $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};\n    }\n\n    // Rendering\n    @if $rfs-fluid == null {\n      // Only render static font-size if no fluid font-size is available\n      font-size: $rfs-static;\n    }\n    @else {\n      $mq-value: null;\n\n      // RFS breakpoint formatting\n      @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {\n        $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};\n      }\n      @else if $rfs-breakpoint-unit == px {\n        $mq-value: #{$rfs-breakpoint}px;\n      }\n      @else {\n        @error \"`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.\";\n      }\n\n      @if $rfs-class == \"disable\" {\n        // Adding an extra class increases specificity,\n        // which prevents the media query to override the font size\n        &,\n        .disable-responsive-font-size &,\n        &.disable-responsive-font-size {\n          font-size: $rfs-static;\n        }\n      }\n      @else {\n        font-size: $rfs-static;\n      }\n\n      @if $rfs-two-dimensional {\n        @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {\n          @if $rfs-class == \"enable\" {\n            .enable-responsive-font-size &,\n            &.enable-responsive-font-size {\n              font-size: $rfs-fluid;\n            }\n          }\n          @else {\n            font-size: $rfs-fluid;\n          }\n\n          @if $rfs-safari-iframe-resize-bug-fix {\n            // stylelint-disable-next-line length-zero-no-unit\n            min-width: 0vw;\n          }\n        }\n      }\n      @else {\n        @media (max-width: #{$mq-value}) {\n          @if $rfs-class == \"enable\" {\n            .enable-responsive-font-size &,\n            &.enable-responsive-font-size {\n              font-size: $rfs-fluid;\n            }\n          }\n          @else {\n            font-size: $rfs-fluid;\n          }\n\n          @if $rfs-safari-iframe-resize-bug-fix {\n            // stylelint-disable-next-line length-zero-no-unit\n            min-width: 0vw;\n          }\n        }\n      }\n    }\n  }\n}\n\n// The font-size & responsive-font-size mixin uses RFS to rescale font sizes\n@mixin font-size($fs, $important: false) {\n  @include rfs($fs, $important);\n}\n\n@mixin responsive-font-size($fs, $important: false) {\n  @include rfs($fs, $important);\n}\n","// Hover mixin and `$enable-hover-media-query` are deprecated.\n//\n// Originally added during our alphas and maintained during betas, this mixin was\n// designed to prevent `:hover` stickiness on iOS-an issue where hover styles\n// would persist after initial touch.\n//\n// For backward compatibility, we've kept these mixins and updated them to\n// always return their regular pseudo-classes instead of a shimmed media query.\n//\n// Issue: https://github.com/twbs/bootstrap/issues/25195\n\n@mixin hover {\n  &:hover { @content; }\n}\n\n@mixin hover-focus {\n  &:hover,\n  &:focus {\n    @content;\n  }\n}\n\n@mixin plain-hover-focus {\n  &,\n  &:hover,\n  &:focus {\n    @content;\n  }\n}\n\n@mixin hover-focus-active {\n  &:hover,\n  &:focus,\n  &:active {\n    @content;\n  }\n}\n",".fade {\n  @include transition($transition-fade);\n\n  &:not(.show) {\n    opacity: 0;\n  }\n}\n\n.collapse {\n  &:not(.show) {\n    display: none;\n  }\n}\n\n.collapsing {\n  position: relative;\n  height: 0;\n  overflow: hidden;\n  @include transition($transition-collapse);\n}\n","// stylelint-disable property-blacklist\n@mixin transition($transition...) {\n  @if $enable-transitions {\n    @if length($transition) == 0 {\n      transition: $transition-base;\n    } @else {\n      transition: $transition;\n    }\n  }\n\n  @if $enable-prefers-reduced-motion-media-query {\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n}\n","//\n// Base styles\n//\n\n.alert {\n  position: relative;\n  padding: $alert-padding-y $alert-padding-x;\n  margin-bottom: $alert-margin-bottom;\n  border: $alert-border-width solid transparent;\n  @include border-radius($alert-border-radius);\n}\n\n// Headings for larger alerts\n.#{$prefix}alert-heading {\n  // Specified to prevent conflicts of changing $headings-color\n  color: inherit;\n}\n\n// Provide class for links that match alerts\n.#{$prefix}alert-link {\n  font-weight: $alert-link-font-weight;\n}\n\n\n// Dismissible alerts\n//\n// Expand the right padding and account for the close button's positioning.\n\n.#{$prefix}alert-dismissible {\n  padding-right: $close-font-size + $alert-padding-x * 2;\n\n  // Adjust close link position\n  .close {\n    position: absolute;\n    top: 0;\n    right: 0;\n    padding: $alert-padding-y $alert-padding-x;\n    color: inherit;\n  }\n}\n\n\n// Alternate styles\n//\n// Generate contextual modifier classes for colorizing the alert.\n\n@each $color, $value in $theme-colors {\n  .#{$prefix}alert-#{$color} {\n    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));\n  }\n}\n","// stylelint-disable property-blacklist\n// Single side border-radius\n\n@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {\n  @if $enable-rounded {\n    border-radius: $radius;\n  }\n  @else if $fallback-border-radius != false {\n    border-radius: $fallback-border-radius;\n  }\n}\n\n@mixin border-top-radius($radius) {\n  @if $enable-rounded {\n    border-top-left-radius: $radius;\n    border-top-right-radius: $radius;\n  }\n}\n\n@mixin border-right-radius($radius) {\n  @if $enable-rounded {\n    border-top-right-radius: $radius;\n    border-bottom-right-radius: $radius;\n  }\n}\n\n@mixin border-bottom-radius($radius) {\n  @if $enable-rounded {\n    border-bottom-right-radius: $radius;\n    border-bottom-left-radius: $radius;\n  }\n}\n\n@mixin border-left-radius($radius) {\n  @if $enable-rounded {\n    border-top-left-radius: $radius;\n    border-bottom-left-radius: $radius;\n  }\n}\n\n@mixin border-top-left-radius($radius) {\n  @if $enable-rounded {\n    border-top-left-radius: $radius;\n  }\n}\n\n@mixin border-top-right-radius($radius) {\n  @if $enable-rounded {\n    border-top-right-radius: $radius;\n  }\n}\n\n@mixin border-bottom-right-radius($radius) {\n  @if $enable-rounded {\n    border-bottom-right-radius: $radius;\n  }\n}\n\n@mixin border-bottom-left-radius($radius) {\n  @if $enable-rounded {\n    border-bottom-left-radius: $radius;\n  }\n}\n","@mixin alert-variant($background, $border, $color) {\n  color: $color;\n  @include gradient-bg($background);\n  border-color: $border;\n\n  hr {\n    border-top-color: darken($border, 5%);\n  }\n\n  .alert-link {\n    color: darken($color, 10%);\n  }\n}\n","// Gradients\n\n@mixin gradient-bg($color) {\n  @if $enable-gradients {\n    background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;\n  } @else {\n    background-color: $color;\n  }\n}\n\n// Horizontal gradient, from left to right\n//\n// Creates two color stops, start and end, by specifying a color and position for each color stop.\n@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {\n  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);\n  background-repeat: repeat-x;\n}\n\n// Vertical gradient, from top to bottom\n//\n// Creates two color stops, start and end, by specifying a color and position for each color stop.\n@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {\n  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);\n  background-repeat: repeat-x;\n}\n\n@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {\n  background-image: linear-gradient($deg, $start-color, $end-color);\n  background-repeat: repeat-x;\n}\n@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {\n  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);\n  background-repeat: no-repeat;\n}\n@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {\n  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);\n  background-repeat: no-repeat;\n}\n@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {\n  background-image: radial-gradient(circle, $inner-color, $outer-color);\n  background-repeat: no-repeat;\n}\n@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {\n  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);\n}\n","@each $color, $value in $theme-colors {\n  .#{$prefix}alert-#{$color} {\n    color: $value;\n    background-color: rgba($value, .15);\n    border: none;\n  }\n  .#{$prefix}alert-toast.#{$prefix}alert-#{$color} {\n    border: 1px solid $value;\n  }\n}\n\n.#{$prefix}alert-info {\n  color: $primary;\n  background-color: rgba($primary, .15);\n  border: none;\n}\n\n.#{$prefix}alert-toast.#{$prefix}alert-info {\n  border: 1px solid $primary;\n}\n\n.#{$prefix}alert-error {\n  color: $danger;\n  background-color: rgba($danger, .15);\n  border: none;\n}\n\n.#{$prefix}alert-toast.#{$prefix}alert-error {\n  border: 1px solid $danger;\n}\n\n.#{$prefix}alert {\n  display: flex;\n  padding: 16px;\n  font-size: 0;\n\n  .#{$prefix}alert-icon {\n    flex-basis: 24px;\n    width: 24px;\n    margin-right: 12px;\n    font-size: 14px;\n    vertical-align: top;\n    .ic {\n      color: inherit !important; // stylelint-disable-line declaration-no-important\n    }\n  }\n\n  .#{$prefix}alert-content {\n    display: inline-block;\n    padding-top: 3px;\n    font-size: 14px;\n    color: $dark;\n    vertical-align: top;\n  }\n\n  .#{$prefix}alert-icon + .#{$prefix}alert-content {\n    flex: 1 1 0;\n  }\n\n  .#{$prefix}alert-title {\n    font-weight: $font-weight-bold;\n    line-height: 20px;\n  }\n\n  .#{$prefix}alert-description {\n    line-height: 20px;\n  }\n\n  .#{$prefix}alert-title + .#{$prefix}alert-description {\n    padding-top: 4px;\n  }\n\n  .#{$prefix}alert-link {\n    display: block;\n    padding-top: 16px;\n    font-weight: 400;\n    color: $link !important; // stylelint-disable-line declaration-no-important\n    background-color: transparent;\n  }\n}\n\n.#{$prefix}alert.#{$prefix}alert-dismissible {\n  .close {\n    position: relative;\n    display: inline-block;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n    color: $slate;\n    .ic {\n      font-size: 16px;\n      font-weight: 700;\n      line-height: 16px;\n      vertical-align: top;\n    }\n  }\n}\n\n.#{$prefix}alert.#{$prefix}alert-small {\n  .#{$prefix}alert-description {\n    display: inline-block;\n  }\n  .#{$prefix}alert-link {\n    display: inline-block;\n    padding: 0;\n    padding-left: 16px;\n    font-weight: 400;\n    color: $link !important; // stylelint-disable-line declaration-no-important\n    background-color: transparent;\n  }\n}\n\n.#{$prefix}alert.#{$prefix}alert-toast {\n  display: inline-flex;\n  padding: 12px;\n  font-size: 0;\n  background-color: $white;\n  border-radius: 4px; // stylelint-disable-line property-blacklist\n  box-shadow: 0 4px 8px 0 rgba($slate, .1), 0 12px 20px 0 rgba($slate, .2);\n  .#{$prefix}alert-icon {\n    margin-right: 8px;\n  }\n  .#{$prefix}alert-description {\n    display: inline-block;\n  }\n  .#{$prefix}alert-link {\n    display: inline-block;\n    padding: 0;\n    padding-left: 16px;\n    font-weight: 400;\n    color: $link !important; // stylelint-disable-line declaration-no-important\n    background-color: transparent;\n  }\n}\n"]}

data/lib/css/components/mekari-ui-alert.css

@@ -0,0 +1,631 @@
+.close {
+  float: right;
+  font-size: 1.3125rem;
+  font-weight: 500;
+  line-height: 1;
+  color: #777;
+  text-shadow: 0 1px 0 #fff;
+  opacity: .5;
+}
+
+@media (max-width: 1200px) {
+  .close {
+    font-size: calc(1.25625rem + 0.075vw) ;
+  }
+}
+
+.close:hover {
+  color: #777;
+  text-decoration: none;
+}
+
+.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
+  opacity: .75;
+}
+
+button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+a.close.disabled {
+  pointer-events: none;
+}
+
+.fade {
+  transition: opacity 0.15s linear;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade {
+    transition: none;
+  }
+}
+
+.fade:not(.show) {
+  opacity: 0;
+}
+
+.collapse:not(.show) {
+  display: none;
+}
+
+.collapsing {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  transition: height 0.35s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .collapsing {
+    transition: none;
+  }
+}
+
+.alert {
+  position: relative;
+  padding: 0.75rem 1.25rem;
+  margin-bottom: 1rem;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+
+.alert-heading {
+  color: inherit;
+}
+
+.alert-link {
+  font-weight: 500;
+}
+
+.alert-dismissible {
+  padding-right: 3.8125rem;
+}
+
+.alert-dismissible .close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.75rem 1.25rem;
+  color: inherit;
+}
+
+.alert-danger {
+  color: #702112;
+  background-color: #f7d9d3;
+  border-color: #f4cac1;
+}
+
+.alert-danger hr {
+  border-top-color: #f0b7ab;
+}
+
+.alert-danger .alert-link {
+  color: #44140b;
+}
+
+.alert-success {
+  color: #005332;
+  background-color: #ccecdf;
+  border-color: #b8e4d3;
+}
+
+.alert-success hr {
+  border-top-color: #a6ddc8;
+}
+
+.alert-success .alert-link {
+  color: #002013;
+}
+
+.alert-info {
+  color: #857a50;
+  background-color: #fffbeb;
+  border-color: #fff9e2;
+}
+
+.alert-info hr {
+  border-top-color: #fff4c9;
+}
+
+.alert-info .alert-link {
+  color: #655d3d;
+}
+
+.alert-warning {
+  color: #855f00;
+  background-color: #fff1cc;
+  border-color: #ffebb8;
+}
+
+.alert-warning hr {
+  border-top-color: #ffe49f;
+}
+
+.alert-warning .alert-link {
+  color: #523b00;
+}
+
+.alert-primary {
+  color: #003163;
+  background-color: #ccdff2;
+  border-color: #b8d2ed;
+}
+
+.alert-primary hr {
+  border-top-color: #a4c5e8;
+}
+
+.alert-primary .alert-link {
+  color: #001830;
+}
+
+.alert-jurnal {
+  color: #005173;
+  background-color: #ccebf8;
+  border-color: #b8e3f6;
+}
+
+.alert-jurnal hr {
+  border-top-color: #a1daf3;
+}
+
+.alert-jurnal .alert-link {
+  color: #002d40;
+}
+
+.alert-talenta {
+  color: #64161b;
+  background-color: #f2d4d6;
+  border-color: #edc3c6;
+}
+
+.alert-talenta hr {
+  border-top-color: #e7afb3;
+}
+
+.alert-talenta .alert-link {
+  color: #3a0d10;
+}
+
+.alert-klikpajak {
+  color: #813901;
+  background-color: #fee2cc;
+  border-color: #fdd6b8;
+}
+
+.alert-klikpajak hr {
+  border-top-color: #fcc89f;
+}
+
+.alert-klikpajak .alert-link {
+  color: #4e2301;
+}
+
+.alert-mekari {
+  color: #392577;
+  background-color: #e2dafa;
+  border-color: #d6ccf8;
+}
+
+.alert-mekari hr {
+  border-top-color: #c4b6f5;
+}
+
+.alert-mekari .alert-link {
+  color: #261950;
+}
+
+.alert-dark {
+  color: #111111;
+  background-color: lightgray;
+  border-color: #c1c1c1;
+}
+
+.alert-dark hr {
+  border-top-color: #b4b4b4;
+}
+
+.alert-dark .alert-link {
+  color: black;
+}
+
+.alert-slate {
+  color: #3e3e3e;
+  background-color: #e4e4e4;
+  border-color: #d9d9d9;
+}
+
+.alert-slate hr {
+  border-top-color: #cccccc;
+}
+
+.alert-slate .alert-link {
+  color: #252525;
+}
+
+.alert-muted {
+  color: #5e5e5e;
+  background-color: #f0f0f0;
+  border-color: #eaeaea;
+}
+
+.alert-muted hr {
+  border-top-color: #dddddd;
+}
+
+.alert-muted .alert-link {
+  color: #454545;
+}
+
+.alert-smoke {
+  color: #767676;
+  background-color: #f9f9f9;
+  border-color: #f7f7f7;
+}
+
+.alert-smoke hr {
+  border-top-color: #eaeaea;
+}
+
+.alert-smoke .alert-link {
+  color: #5d5d5d;
+}
+
+.alert-light {
+  color: #838383;
+  background-color: #fefefe;
+  border-color: #fefefe;
+}
+
+.alert-light hr {
+  border-top-color: #f1f1f1;
+}
+
+.alert-light .alert-link {
+  color: #6a6a6a;
+}
+
+.alert-cloud {
+  color: #7e7f80;
+  background-color: #fcfdfd;
+  border-color: #fbfcfd;
+}
+
+.alert-cloud hr {
+  border-top-color: #eaeff5;
+}
+
+.alert-cloud .alert-link {
+  color: #656666;
+}
+
+.alert-link {
+  color: #0a2d85;
+  background-color: #d0ddff;
+  border-color: #bdd0ff;
+}
+
+.alert-link hr {
+  border-top-color: #a4beff;
+}
+
+.alert-link .alert-link {
+  color: #061d56;
+}
+
+.alert-white {
+  color: #858585;
+  background-color: white;
+  border-color: white;
+}
+
+.alert-white hr {
+  border-top-color: #f2f2f2;
+}
+
+.alert-white .alert-link {
+  color: #6c6c6c;
+}
+
+.alert-danger {
+  color: #d74022;
+  background-color: rgba(215, 64, 34, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-danger {
+  border: 1px solid #d74022;
+}
+
+.alert-success {
+  color: #009f61;
+  background-color: rgba(0, 159, 97, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-success {
+  border: 1px solid #009f61;
+}
+
+.alert-info {
+  color: #ffeb99;
+  background-color: rgba(255, 235, 153, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-info {
+  border: 1px solid #ffeb99;
+}
+
+.alert-warning {
+  color: #ffb700;
+  background-color: rgba(255, 183, 0, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-warning {
+  border: 1px solid #ffb700;
+}
+
+.alert-primary {
+  color: #005fbf;
+  background-color: rgba(0, 95, 191, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-primary {
+  border: 1px solid #005fbf;
+}
+
+.alert-jurnal {
+  color: #009bde;
+  background-color: rgba(0, 155, 222, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-jurnal {
+  border: 1px solid #009bde;
+}
+
+.alert-talenta {
+  color: #c02a34;
+  background-color: rgba(192, 42, 52, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-talenta {
+  border: 1px solid #c02a34;
+}
+
+.alert-klikpajak {
+  color: #f96d01;
+  background-color: rgba(249, 109, 1, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-klikpajak {
+  border: 1px solid #f96d01;
+}
+
+.alert-mekari {
+  color: #6d48e5;
+  background-color: rgba(109, 72, 229, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-mekari {
+  border: 1px solid #6d48e5;
+}
+
+.alert-dark {
+  color: #212121;
+  background-color: rgba(33, 33, 33, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-dark {
+  border: 1px solid #212121;
+}
+
+.alert-slate {
+  color: #777;
+  background-color: rgba(119, 119, 119, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-slate {
+  border: 1px solid #777;
+}
+
+.alert-muted {
+  color: #b4b4b4;
+  background-color: rgba(180, 180, 180, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-muted {
+  border: 1px solid #b4b4b4;
+}
+
+.alert-smoke {
+  color: #e2e2e2;
+  background-color: rgba(226, 226, 226, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-smoke {
+  border: 1px solid #e2e2e2;
+}
+
+.alert-light {
+  color: #fbfbfb;
+  background-color: rgba(251, 251, 251, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-light {
+  border: 1px solid #fbfbfb;
+}
+
+.alert-cloud {
+  color: #f2f4f7;
+  background-color: rgba(242, 244, 247, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-cloud {
+  border: 1px solid #f2f4f7;
+}
+
+.alert-link {
+  color: #1357ff;
+  background-color: rgba(19, 87, 255, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-link {
+  border: 1px solid #1357ff;
+}
+
+.alert-white {
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-white {
+  border: 1px solid #fff;
+}
+
+.alert-info {
+  color: #005fbf;
+  background-color: rgba(0, 95, 191, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-info {
+  border: 1px solid #005fbf;
+}
+
+.alert-error {
+  color: #d74022;
+  background-color: rgba(215, 64, 34, 0.15);
+  border: none;
+}
+
+.alert-toast.alert-error {
+  border: 1px solid #d74022;
+}
+
+.alert {
+  display: flex;
+  padding: 16px;
+  font-size: 0;
+}
+
+.alert .alert-icon {
+  flex-basis: 24px;
+  width: 24px;
+  margin-right: 12px;
+  font-size: 14px;
+  vertical-align: top;
+}
+
+.alert .alert-icon .ic {
+  color: inherit !important;
+}
+
+.alert .alert-content {
+  display: inline-block;
+  padding-top: 3px;
+  font-size: 14px;
+  color: #212121;
+  vertical-align: top;
+}
+
+.alert .alert-icon + .alert-content {
+  flex: 1 1 0;
+}
+
+.alert .alert-title {
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.alert .alert-description {
+  line-height: 20px;
+}
+
+.alert .alert-title + .alert-description {
+  padding-top: 4px;
+}
+
+.alert .alert-link {
+  display: block;
+  padding-top: 16px;
+  font-weight: 400;
+  color: #1357ff !important;
+  background-color: transparent;
+}
+
+.alert.alert-dismissible .close {
+  position: relative;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  color: #777;
+}
+
+.alert.alert-dismissible .close .ic {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 16px;
+  vertical-align: top;
+}
+
+.alert.alert-small .alert-description {
+  display: inline-block;
+}
+
+.alert.alert-small .alert-link {
+  display: inline-block;
+  padding: 0;
+  padding-left: 16px;
+  font-weight: 400;
+  color: #1357ff !important;
+  background-color: transparent;
+}
+
+.alert.alert-toast {
+  display: inline-flex;
+  padding: 12px;
+  font-size: 0;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 4px 8px 0 rgba(119, 119, 119, 0.1), 0 12px 20px 0 rgba(119, 119, 119, 0.2);
+}
+
+.alert.alert-toast .alert-icon {
+  margin-right: 8px;
+}
+
+.alert.alert-toast .alert-description {
+  display: inline-block;
+}
+
+.alert.alert-toast .alert-link {
+  display: inline-block;
+  padding: 0;
+  padding-left: 16px;
+  font-weight: 400;
+  color: #1357ff !important;
+  background-color: transparent;
+}
+/*# sourceMappingURL=mekari-ui-alert.css.map */