diff --git a/src/base/component.rs b/src/base/component.rs index fea81681..d4c7ca0f 100644 --- a/src/base/component.rs +++ b/src/base/component.rs @@ -49,7 +49,7 @@ pub(crate) fn add_base_assets(cx: &mut Context) { )) .alter(ContextOp::AddStyleSheet( StyleSheet::at("/base/css/buttons.css") - .with_version("0.0.1") + .with_version("0.0.2") .with_weight(weight), )); } @@ -89,30 +89,30 @@ impl ToString for BreakPoint { // ************************************************************************************************* #[derive(AutoDefault)] -pub enum ButtonStyle { +pub enum StyleBase { #[default] Default, - Info, Success, - Warning, Danger, + Warning, + Info, Light, Dark, Link, } #[rustfmt::skip] -impl ToString for ButtonStyle { +impl ToString for StyleBase { fn to_string(&self) -> String { String::from(match self { - ButtonStyle::Default => "button__default", - ButtonStyle::Info => "button__info", - ButtonStyle::Success => "button__success", - ButtonStyle::Warning => "button__warning", - ButtonStyle::Danger => "button__danger", - ButtonStyle::Light => "button__light", - ButtonStyle::Dark => "button__dark", - ButtonStyle::Link => "button__link", + StyleBase::Default => "style__default", + StyleBase::Success => "style__success", + StyleBase::Danger => "style__danger", + StyleBase::Warning => "style__warning", + StyleBase::Info => "style__info", + StyleBase::Light => "style__light", + StyleBase::Dark => "style__dark", + StyleBase::Link => "style__link", }) } } diff --git a/src/base/component/button.rs b/src/base/component/button.rs index d43b2ae1..a6b37dff 100644 --- a/src/base/component/button.rs +++ b/src/base/component/button.rs @@ -17,7 +17,7 @@ pub struct Button { weight : Weight, renderable : Renderable, classes : OptionClasses, - style : ButtonStyle, + style : StyleBase, font_size : FontSize, left_icon : OptionComponent, right_icon : OptionComponent, @@ -44,7 +44,14 @@ impl ComponentTrait for Button { } fn setup_before_prepare(&mut self, _cx: &mut Context) { - self.prepend_classes([self.style().to_string(), self.font_size().to_string()].join(" ")); + self.prepend_classes( + [ + "button__tap".to_string(), + self.style().to_string(), + self.font_size().to_string(), + ] + .join(" "), + ); } #[rustfmt::skip] @@ -64,7 +71,7 @@ impl ComponentTrait for Button { target=[target] { (self.left_icon().render(cx)) - " " span { (self.html().escaped(cx.langid())) } " " + span { (self.html().escaped(cx.langid())) } (self.right_icon().render(cx)) } }) @@ -97,7 +104,7 @@ impl Button { } #[fn_builder] - pub fn alter_style(&mut self, style: ButtonStyle) -> &mut Self { + pub fn alter_style(&mut self, style: StyleBase) -> &mut Self { self.style = style; self } @@ -140,7 +147,7 @@ impl Button { // Button GETTERS. - pub fn style(&self) -> &ButtonStyle { + pub fn style(&self) -> &StyleBase { &self.style } diff --git a/src/base/component/form/action_button.rs b/src/base/component/form/action_button.rs index ff974cab..768ee0d5 100644 --- a/src/base/component/form/action_button.rs +++ b/src/base/component/form/action_button.rs @@ -24,7 +24,7 @@ pub struct ActionButton { renderable : Renderable, classes : OptionClasses, button_type: ActionButtonType, - style : ButtonStyle, + style : StyleBase, font_size : FontSize, left_icon : OptionComponent, right_icon : OptionComponent, @@ -48,7 +48,14 @@ impl ComponentTrait for ActionButton { } fn setup_before_prepare(&mut self, _cx: &mut Context) { - self.prepend_classes([self.style().to_string(), self.font_size().to_string()].join(" ")); + self.prepend_classes( + [ + "button__tap".to_string(), + self.style().to_string(), + self.font_size().to_string(), + ] + .join(" "), + ); } fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { @@ -64,7 +71,7 @@ impl ComponentTrait for ActionButton { disabled=[self.disabled().get()] { (self.left_icon().render(cx)) - " " (self.value().escaped(cx.langid())) " " + span { (self.value().escaped(cx.langid())) } (self.right_icon().render(cx)) } }) @@ -75,7 +82,7 @@ impl ActionButton { pub fn submit() -> Self { ActionButton { button_type: ActionButtonType::Submit, - style: ButtonStyle::Default, + style: StyleBase::Default, value: OptionTranslated::new(L10n::l("button_submit")), ..Default::default() } @@ -84,7 +91,7 @@ impl ActionButton { pub fn reset() -> Self { ActionButton { button_type: ActionButtonType::Reset, - style: ButtonStyle::Info, + style: StyleBase::Info, value: OptionTranslated::new(L10n::l("button_reset")), ..Default::default() } @@ -105,7 +112,7 @@ impl ActionButton { } #[fn_builder] - pub fn alter_style(&mut self, style: ButtonStyle) -> &mut Self { + pub fn alter_style(&mut self, style: StyleBase) -> &mut Self { self.style = style; self } @@ -164,7 +171,7 @@ impl ActionButton { &self.button_type } - pub fn style(&self) -> &ButtonStyle { + pub fn style(&self) -> &StyleBase { &self.style } diff --git a/src/base/package/welcome.rs b/src/base/package/welcome.rs index a004da3b..df9a30ca 100644 --- a/src/base/package/welcome.rs +++ b/src/base/package/welcome.rs @@ -89,7 +89,7 @@ fn hello_world() -> Wrapper { ) .add_component( Button::anchor("#welcome-page", L10n::l("welcome")) - .with_style(ButtonStyle::Link) + .with_style(StyleBase::Link) .with_left_icon(Some(Icon::with("arrow-down-circle-fill"))) .with_classes(ClassesOp::Add, "welcome-link") .with_font_size(FontSize::Medium), diff --git a/static/base/css/buttons.css b/static/base/css/buttons.css index 88b07bee..326a4ac5 100644 --- a/static/base/css/buttons.css +++ b/static/base/css/buttons.css @@ -1,4 +1,4 @@ -[class^="button__"] { +.button__tap { cursor: pointer; text-align: center; display: inline-block; @@ -12,103 +12,103 @@ white-space: nowrap; user-select: none; } -[class^="button__"] > span { - margin: 0 var(--val-gap-0-15); +.button__tap > span { + margin: 0 var(--val-gap-0-5); } -.button__default { +.button__tap.style__default { background-color: var(--val-color--default); } -.button__default:hover { +.button__tap.style__default:hover { color: var(--val-color--white); background-color: var(--val-color--default-dark); } -.button__default:active, -.button__default:disabled { +.button__tap.style__default:active, +.button__tap.style__default:disabled { color: var(--val-color--white); background-color: var(--val-color--default-light); } -.button__info { - background-color: var(--val-color--info); -} -.button__info:hover { - color: var(--val-color--white); - background-color: var(--val-color--info-dark); -} -.button__info:active, -.button__info:disabled { - color: var(--val-color--white); - background-color: var(--val-color--info-light); -} - -.button__success { +.button__tap.style__success { background-color: var(--val-color--success); } -.button__success:hover { +.button__tap.style__success:hover { color: var(--val-color--white); background-color: var(--val-color--success-dark); } -.button__success:active, -.button__success:disabled { +.button__tap.style__success:active, +.button__tap.style__success:disabled { color: var(--val-color--white); background-color: var(--val-color--success-light); } -.button__warning { - background-color: var(--val-color--warning); -} -.button__warning:hover { - color: var(--val-color--white); - background-color: var(--val-color--warning-dark); -} -.button__warning:active, -.button__warning:disabled { - color: var(--val-color--white); - background-color: var(--val-color--warning-light); -} - -.button__danger { +.button__tap.style__danger { background-color: var(--val-color--danger); } -.button__danger:hover { +.button__tap.style__danger:hover { color: var(--val-color--white); background-color: var(--val-color--danger-dark); } -.button__danger:active, -.button__danger:disabled { +.button__tap.style__danger:active, +.button__tap.style__danger:disabled { color: var(--val-color--white); background-color: var(--val-color--danger-light); } -.button__light { +.button__tap.style__warning { + background-color: var(--val-color--warning); +} +.button__tap.style__warning:hover { + color: var(--val-color--white); + background-color: var(--val-color--warning-dark); +} +.button__tap.style__warning:active, +.button__tap.style__warning:disabled { + color: var(--val-color--white); + background-color: var(--val-color--warning-light); +} + +.button__tap.style__info { + background-color: var(--val-color--info); +} +.button__tap.style__info:hover { + color: var(--val-color--white); + background-color: var(--val-color--info-dark); +} +.button__tap.style__info:active, +.button__tap.style__info:disabled { + color: var(--val-color--white); + background-color: var(--val-color--info-light); +} + +.button__tap.style__light { color: var(--val-color--text); background-color: var(--val-color--light); } -.button__light:hover { +.button__tap.style__light:hover { color: var(--val-color--text); background-color: var(--val-color--light-dark); } -.button__light:active, -.button__light:disabled { +.button__tap.style__light:active, +.button__tap.style__light:disabled { color: var(--val-color--text); background-color: var(--val-color--light-light); } -.button__dark { +.button__tap.style__dark { background-color: var(--val-color--dark); } -.button__dark:hover { +.button__tap.style__dark:hover { color: var(--val-color--white); background-color: var(--val-color--dark-dark); } -.button__dark:active, -.button__dark:disabled { +.button__tap.style__dark:active, +.button__tap.style__dark:disabled { color: var(--val-color--white); background-color: var(--val-color--dark-light); } -.button__link { +.button__tap.style__link { color: var(--val-color--default); } @@ -137,462 +137,462 @@ margin-right: calc(-.5em - 1px) } -.button.is-hovered,.button:hover { +.button__tap.is-hovered,.button:hover { border-color: #b5b5b5; color: #363636 } -.button.is-focused,.button:focus { +.button__tap.is-focused,.button:focus { border-color: #485fc7; color: #363636 } -.button.is-focused:not(:active),.button:focus:not(:active) { +.button__tap.is-focused:not(:active),.button:focus:not(:active) { box-shadow: 0 0 0 .125em rgba(72,95,199,.25) } -.button.is-active,.button:active { +.button__tap.is-active,.button:active { border-color: #4a4a4a; color: #363636 } -.button.is-text { +.button__tap.is-text { background-color: transparent; border-color: transparent; color: #4a4a4a; text-decoration: underline } -.button.is-text.is-focused,.button.is-text.is-hovered,.button.is-text:focus,.button.is-text:hover { +.button__tap.is-text.is-focused,.button__tap.is-text.is-hovered,.button__tap.is-text:focus,.button__tap.is-text:hover { background-color: #f5f5f5; color: #363636 } -.button.is-text.is-active,.button.is-text:active { +.button__tap.is-text.is-active,.button__tap.is-text:active { background-color: #e8e8e8; color: #363636 } -.button.is-text[disabled],fieldset[disabled] .button.is-text { +.button__tap.is-text[disabled],fieldset[disabled] .button__tap.is-text { background-color: transparent; border-color: transparent; box-shadow: none } -.button.is-ghost { +.button__tap.is-ghost { background: 0 0; border-color: transparent; color: #485fc7; text-decoration: none } -.button.is-ghost.is-hovered,.button.is-ghost:hover { +.button__tap.is-ghost.is-hovered,.button__tap.is-ghost:hover { color: #485fc7; text-decoration: underline } -.button.is-white { +.button__tap.is-white { background-color: #fff; border-color: transparent; color: #0a0a0a } -.button.is-white.is-hovered,.button.is-white:hover { +.button__tap.is-white.is-hovered,.button__tap.is-white:hover { background-color: #f9f9f9; border-color: transparent; color: #0a0a0a } -.button.is-white.is-focused,.button.is-white:focus { +.button__tap.is-white.is-focused,.button__tap.is-white:focus { border-color: transparent; color: #0a0a0a } -.button.is-white.is-focused:not(:active),.button.is-white:focus:not(:active) { +.button__tap.is-white.is-focused:not(:active),.button__tap.is-white:focus:not(:active) { box-shadow: 0 0 0 .125em rgba(255,255,255,.25) } -.button.is-white.is-active,.button.is-white:active { +.button__tap.is-white.is-active,.button__tap.is-white:active { background-color: #f2f2f2; border-color: transparent; color: #0a0a0a } -.button.is-white[disabled],fieldset[disabled] .button.is-white { +.button__tap.is-white[disabled],fieldset[disabled] .button__tap.is-white { background-color: #fff; border-color: #fff; box-shadow: none } -.button.is-white.is-inverted { +.button__tap.is-white.is-inverted { background-color: #0a0a0a; color: #fff } -.button.is-white.is-inverted.is-hovered,.button.is-white.is-inverted:hover { +.button__tap.is-white.is-inverted.is-hovered,.button__tap.is-white.is-inverted:hover { background-color: #000 } -.button.is-white.is-inverted[disabled],fieldset[disabled] .button.is-white.is-inverted { +.button__tap.is-white.is-inverted[disabled],fieldset[disabled] .button__tap.is-white.is-inverted { background-color: #0a0a0a; border-color: transparent; box-shadow: none; color: #fff } -.button.is-white.is-loading::after { +.button__tap.is-white.is-loading::after { border-color: transparent transparent #0a0a0a #0a0a0a!important } -.button.is-white.is-outlined { +.button__tap.is-white.is-outlined { background-color: transparent; border-color: #fff; color: #fff } -.button.is-white.is-outlined.is-focused,.button.is-white.is-outlined.is-hovered,.button.is-white.is-outlined:focus,.button.is-white.is-outlined:hover { +.button__tap.is-white.is-outlined.is-focused,.button__tap.is-white.is-outlined.is-hovered,.button__tap.is-white.is-outlined:focus,.button__tap.is-white.is-outlined:hover { background-color: #fff; border-color: #fff; color: #0a0a0a } -.button.is-white.is-outlined.is-loading::after { +.button__tap.is-white.is-outlined.is-loading::after { border-color: transparent transparent #fff #fff!important } -.button.is-white.is-outlined.is-loading.is-focused::after,.button.is-white.is-outlined.is-loading.is-hovered::after,.button.is-white.is-outlined.is-loading:focus::after,.button.is-white.is-outlined.is-loading:hover::after { +.button__tap.is-white.is-outlined.is-loading.is-focused::after,.button__tap.is-white.is-outlined.is-loading.is-hovered::after,.button__tap.is-white.is-outlined.is-loading:focus::after,.button__tap.is-white.is-outlined.is-loading:hover::after { border-color: transparent transparent #0a0a0a #0a0a0a!important } -.button.is-white.is-outlined[disabled],fieldset[disabled] .button.is-white.is-outlined { +.button__tap.is-white.is-outlined[disabled],fieldset[disabled] .button__tap.is-white.is-outlined { background-color: transparent; border-color: #fff; box-shadow: none; color: #fff } -.button.is-white.is-inverted.is-outlined { +.button__tap.is-white.is-inverted.is-outlined { background-color: transparent; border-color: #0a0a0a; color: #0a0a0a } -.button.is-white.is-inverted.is-outlined.is-focused,.button.is-white.is-inverted.is-outlined.is-hovered,.button.is-white.is-inverted.is-outlined:focus,.button.is-white.is-inverted.is-outlined:hover { +.button__tap.is-white.is-inverted.is-outlined.is-focused,.button__tap.is-white.is-inverted.is-outlined.is-hovered,.button__tap.is-white.is-inverted.is-outlined:focus,.button__tap.is-white.is-inverted.is-outlined:hover { background-color: #0a0a0a; color: #fff } -.button.is-white.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-white.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-white.is-inverted.is-outlined.is-loading:focus::after,.button.is-white.is-inverted.is-outlined.is-loading:hover::after { +.button__tap.is-white.is-inverted.is-outlined.is-loading.is-focused::after,.button__tap.is-white.is-inverted.is-outlined.is-loading.is-hovered::after,.button__tap.is-white.is-inverted.is-outlined.is-loading:focus::after,.button__tap.is-white.is-inverted.is-outlined.is-loading:hover::after { border-color: transparent transparent #fff #fff!important } -.button.is-white.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-white.is-inverted.is-outlined { +.button__tap.is-white.is-inverted.is-outlined[disabled],fieldset[disabled] .button__tap.is-white.is-inverted.is-outlined { background-color: transparent; border-color: #0a0a0a; box-shadow: none; color: #0a0a0a } -.button.is-black { +.button__tap.is-black { background-color: #0a0a0a; border-color: transparent; color: #fff } -.button.is-black.is-hovered,.button.is-black:hover { +.button__tap.is-black.is-hovered,.button__tap.is-black:hover { background-color: #040404; border-color: transparent; color: #fff } -.button.is-black.is-focused,.button.is-black:focus { +.button__tap.is-black.is-focused,.button__tap.is-black:focus { border-color: transparent; color: #fff } -.button.is-black.is-focused:not(:active),.button.is-black:focus:not(:active) { +.button__tap.is-black.is-focused:not(:active),.button__tap.is-black:focus:not(:active) { box-shadow: 0 0 0 .125em rgba(10,10,10,.25) } -.button.is-black.is-active,.button.is-black:active { +.button__tap.is-black.is-active,.button__tap.is-black:active { background-color: #000; border-color: transparent; color: #fff } -.button.is-black[disabled],fieldset[disabled] .button.is-black { +.button__tap.is-black[disabled],fieldset[disabled] .button__tap.is-black { background-color: #0a0a0a; border-color: #0a0a0a; box-shadow: none } -.button.is-black.is-inverted { +.button__tap.is-black.is-inverted { background-color: #fff; color: #0a0a0a } -.button.is-black.is-inverted.is-hovered,.button.is-black.is-inverted:hover { +.button__tap.is-black.is-inverted.is-hovered,.button__tap.is-black.is-inverted:hover { background-color: #f2f2f2 } -.button.is-black.is-inverted[disabled],fieldset[disabled] .button.is-black.is-inverted { +.button__tap.is-black.is-inverted[disabled],fieldset[disabled] .button__tap.is-black.is-inverted { background-color: #fff; border-color: transparent; box-shadow: none; color: #0a0a0a } -.button.is-black.is-loading::after { +.button__tap.is-black.is-loading::after { border-color: transparent transparent #fff #fff!important } -.button.is-black.is-outlined { +.button__tap.is-black.is-outlined { background-color: transparent; border-color: #0a0a0a; color: #0a0a0a } -.button.is-black.is-outlined.is-focused,.button.is-black.is-outlined.is-hovered,.button.is-black.is-outlined:focus,.button.is-black.is-outlined:hover { +.button__tap.is-black.is-outlined.is-focused,.button__tap.is-black.is-outlined.is-hovered,.button__tap.is-black.is-outlined:focus,.button__tap.is-black.is-outlined:hover { background-color: #0a0a0a; border-color: #0a0a0a; color: #fff } -.button.is-black.is-outlined.is-loading::after { +.button__tap.is-black.is-outlined.is-loading::after { border-color: transparent transparent #0a0a0a #0a0a0a!important } -.button.is-black.is-outlined.is-loading.is-focused::after,.button.is-black.is-outlined.is-loading.is-hovered::after,.button.is-black.is-outlined.is-loading:focus::after,.button.is-black.is-outlined.is-loading:hover::after { +.button__tap.is-black.is-outlined.is-loading.is-focused::after,.button__tap.is-black.is-outlined.is-loading.is-hovered::after,.button__tap.is-black.is-outlined.is-loading:focus::after,.button__tap.is-black.is-outlined.is-loading:hover::after { border-color: transparent transparent #fff #fff!important } -.button.is-black.is-outlined[disabled],fieldset[disabled] .button.is-black.is-outlined { +.button__tap.is-black.is-outlined[disabled],fieldset[disabled] .button__tap.is-black.is-outlined { background-color: transparent; border-color: #0a0a0a; box-shadow: none; color: #0a0a0a } -.button.is-black.is-inverted.is-outlined { +.button__tap.is-black.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff } -.button.is-black.is-inverted.is-outlined.is-focused,.button.is-black.is-inverted.is-outlined.is-hovered,.button.is-black.is-inverted.is-outlined:focus,.button.is-black.is-inverted.is-outlined:hover { +.button__tap.is-black.is-inverted.is-outlined.is-focused,.button__tap.is-black.is-inverted.is-outlined.is-hovered,.button__tap.is-black.is-inverted.is-outlined:focus,.button__tap.is-black.is-inverted.is-outlined:hover { background-color: #fff; color: #0a0a0a } -.button.is-black.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-black.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-black.is-inverted.is-outlined.is-loading:focus::after,.button.is-black.is-inverted.is-outlined.is-loading:hover::after { +.button__tap.is-black.is-inverted.is-outlined.is-loading.is-focused::after,.button__tap.is-black.is-inverted.is-outlined.is-loading.is-hovered::after,.button__tap.is-black.is-inverted.is-outlined.is-loading:focus::after,.button__tap.is-black.is-inverted.is-outlined.is-loading:hover::after { border-color: transparent transparent #0a0a0a #0a0a0a!important } -.button.is-black.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-black.is-inverted.is-outlined { +.button__tap.is-black.is-inverted.is-outlined[disabled],fieldset[disabled] .button__tap.is-black.is-inverted.is-outlined { background-color: transparent; border-color: #fff; box-shadow: none; color: #fff } -.button.is-light { +.button__tap.is-light { background-color: #f5f5f5; border-color: transparent; color: rgba(0,0,0,.7) } -.button.is-light.is-hovered,.button.is-light:hover { +.button__tap.is-light.is-hovered,.button__tap.is-light:hover { background-color: #eee; border-color: transparent; color: rgba(0,0,0,.7) } -.button.is-light.is-focused,.button.is-light:focus { +.button__tap.is-light.is-focused,.button__tap.is-light:focus { border-color: transparent; color: rgba(0,0,0,.7) } -.button.is-light.is-focused:not(:active),.button.is-light:focus:not(:active) { +.button__tap.is-light.is-focused:not(:active),.button__tap.is-light:focus:not(:active) { box-shadow: 0 0 0 .125em rgba(245,245,245,.25) } -.button.is-light.is-active,.button.is-light:active { +.button__tap.is-light.is-active,.button__tap.is-light:active { background-color: #e8e8e8; border-color: transparent; color: rgba(0,0,0,.7) } -.button.is-light[disabled],fieldset[disabled] .button.is-light { +.button__tap.is-light[disabled],fieldset[disabled] .button__tap.is-light { background-color: #f5f5f5; border-color: #f5f5f5; box-shadow: none } -.button.is-light.is-inverted { +.button__tap.is-light.is-inverted { background-color: rgba(0,0,0,.7); color: #f5f5f5 } -.button.is-light.is-inverted.is-hovered,.button.is-light.is-inverted:hover { +.button__tap.is-light.is-inverted.is-hovered,.button__tap.is-light.is-inverted:hover { background-color: rgba(0,0,0,.7) } -.button.is-light.is-inverted[disabled],fieldset[disabled] .button.is-light.is-inverted { +.button__tap.is-light.is-inverted[disabled],fieldset[disabled] .button__tap.is-light.is-inverted { background-color: rgba(0,0,0,.7); border-color: transparent; box-shadow: none; color: #f5f5f5 } -.button.is-light.is-loading::after { +.button__tap.is-light.is-loading::after { border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important } -.button.is-light.is-outlined { +.button__tap.is-light.is-outlined { background-color: transparent; border-color: #f5f5f5; color: #f5f5f5 } -.button.is-light.is-outlined.is-focused,.button.is-light.is-outlined.is-hovered,.button.is-light.is-outlined:focus,.button.is-light.is-outlined:hover { +.button__tap.is-light.is-outlined.is-focused,.button__tap.is-light.is-outlined.is-hovered,.button__tap.is-light.is-outlined:focus,.button__tap.is-light.is-outlined:hover { background-color: #f5f5f5; border-color: #f5f5f5; color: rgba(0,0,0,.7) } -.button.is-light.is-outlined.is-loading::after { +.button__tap.is-light.is-outlined.is-loading::after { border-color: transparent transparent #f5f5f5 #f5f5f5!important } -.button.is-light.is-outlined.is-loading.is-focused::after,.button.is-light.is-outlined.is-loading.is-hovered::after,.button.is-light.is-outlined.is-loading:focus::after,.button.is-light.is-outlined.is-loading:hover::after { +.button__tap.is-light.is-outlined.is-loading.is-focused::after,.button__tap.is-light.is-outlined.is-loading.is-hovered::after,.button__tap.is-light.is-outlined.is-loading:focus::after,.button__tap.is-light.is-outlined.is-loading:hover::after { border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important } -.button.is-light.is-outlined[disabled],fieldset[disabled] .button.is-light.is-outlined { +.button__tap.is-light.is-outlined[disabled],fieldset[disabled] .button__tap.is-light.is-outlined { background-color: transparent; border-color: #f5f5f5; box-shadow: none; color: #f5f5f5 } -.button.is-light.is-inverted.is-outlined { +.button__tap.is-light.is-inverted.is-outlined { background-color: transparent; border-color: rgba(0,0,0,.7); color: rgba(0,0,0,.7) } -.button.is-light.is-inverted.is-outlined.is-focused,.button.is-light.is-inverted.is-outlined.is-hovered,.button.is-light.is-inverted.is-outlined:focus,.button.is-light.is-inverted.is-outlined:hover { +.button__tap.is-light.is-inverted.is-outlined.is-focused,.button__tap.is-light.is-inverted.is-outlined.is-hovered,.button__tap.is-light.is-inverted.is-outlined:focus,.button__tap.is-light.is-inverted.is-outlined:hover { background-color: rgba(0,0,0,.7); color: #f5f5f5 } -.button.is-light.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-light.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-light.is-inverted.is-outlined.is-loading:focus::after,.button.is-light.is-inverted.is-outlined.is-loading:hover::after { +.button__tap.is-light.is-inverted.is-outlined.is-loading.is-focused::after,.button__tap.is-light.is-inverted.is-outlined.is-loading.is-hovered::after,.button__tap.is-light.is-inverted.is-outlined.is-loading:focus::after,.button__tap.is-light.is-inverted.is-outlined.is-loading:hover::after { border-color: transparent transparent #f5f5f5 #f5f5f5!important } -.button.is-light.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-light.is-inverted.is-outlined { +.button__tap.is-light.is-inverted.is-outlined[disabled],fieldset[disabled] .button__tap.is-light.is-inverted.is-outlined { background-color: transparent; border-color: rgba(0,0,0,.7); box-shadow: none; color: rgba(0,0,0,.7) } -.button.is-dark { +.button__tap.is-dark { background-color: #363636; border-color: transparent; color: #fff } -.button.is-dark.is-hovered,.button.is-dark:hover { +.button__tap.is-dark.is-hovered,.button__tap.is-dark:hover { background-color: #2f2f2f; border-color: transparent; color: #fff } -.button.is-dark.is-focused,.button.is-dark:focus { +.button__tap.is-dark.is-focused,.button__tap.is-dark:focus { border-color: transparent; color: #fff } -.button.is-dark.is-focused:not(:active),.button.is-dark:focus:not(:active) { +.button__tap.is-dark.is-focused:not(:active),.button__tap.is-dark:focus:not(:active) { box-shadow: 0 0 0 .125em rgba(54,54,54,.25) } -.button.is-dark.is-active,.button.is-dark:active { +.button__tap.is-dark.is-active,.button__tap.is-dark:active { background-color: #292929; border-color: transparent; color: #fff } -.button.is-dark[disabled],fieldset[disabled] .button.is-dark { +.button__tap.is-dark[disabled],fieldset[disabled] .button__tap.is-dark { background-color: #363636; border-color: #363636; box-shadow: none } -.button.is-dark.is-inverted { +.button__tap.is-dark.is-inverted { background-color: #fff; color: #363636 } -.button.is-dark.is-inverted.is-hovered,.button.is-dark.is-inverted:hover { +.button__tap.is-dark.is-inverted.is-hovered,.button__tap.is-dark.is-inverted:hover { background-color: #f2f2f2 } -.button.is-dark.is-inverted[disabled],fieldset[disabled] .button.is-dark.is-inverted { +.button__tap.is-dark.is-inverted[disabled],fieldset[disabled] .button__tap.is-dark.is-inverted { background-color: #fff; border-color: transparent; box-shadow: none; color: #363636 } -.button.is-dark.is-loading::after { +.button__tap.is-dark.is-loading::after { border-color: transparent transparent #fff #fff!important } -.button.is-dark.is-outlined { +.button__tap.is-dark.is-outlined { background-color: transparent; border-color: #363636; color: #363636 } -.button.is-dark.is-outlined.is-focused,.button.is-dark.is-outlined.is-hovered,.button.is-dark.is-outlined:focus,.button.is-dark.is-outlined:hover { +.button__tap.is-dark.is-outlined.is-focused,.button__tap.is-dark.is-outlined.is-hovered,.button__tap.is-dark.is-outlined:focus,.button__tap.is-dark.is-outlined:hover { background-color: #363636; border-color: #363636; color: #fff } -.button.is-dark.is-outlined.is-loading::after { +.button__tap.is-dark.is-outlined.is-loading::after { border-color: transparent transparent #363636 #363636!important } -.button.is-dark.is-outlined.is-loading.is-focused::after,.button.is-dark.is-outlined.is-loading.is-hovered::after,.button.is-dark.is-outlined.is-loading:focus::after,.button.is-dark.is-outlined.is-loading:hover::after { +.button__tap.is-dark.is-outlined.is-loading.is-focused::after,.button__tap.is-dark.is-outlined.is-loading.is-hovered::after,.button__tap.is-dark.is-outlined.is-loading:focus::after,.button__tap.is-dark.is-outlined.is-loading:hover::after { border-color: transparent transparent #fff #fff!important } -.button.is-dark.is-outlined[disabled],fieldset[disabled] .button.is-dark.is-outlined { +.button__tap.is-dark.is-outlined[disabled],fieldset[disabled] .button__tap.is-dark.is-outlined { background-color: transparent; border-color: #363636; box-shadow: none; color: #363636 } -.button.is-dark.is-inverted.is-outlined { +.button__tap.is-dark.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff } -.button.is-dark.is-inverted.is-outlined.is-focused,.button.is-dark.is-inverted.is-outlined.is-hovered,.button.is-dark.is-inverted.is-outlined:focus,.button.is-dark.is-inverted.is-outlined:hover { +.button__tap.is-dark.is-inverted.is-outlined.is-focused,.button__tap.is-dark.is-inverted.is-outlined.is-hovered,.button__tap.is-dark.is-inverted.is-outlined:focus,.button__tap.is-dark.is-inverted.is-outlined:hover { background-color: #fff; color: #363636 } -.button.is-dark.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-dark.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-dark.is-inverted.is-outlined.is-loading:focus::after,.button.is-dark.is-inverted.is-outlined.is-loading:hover::after { +.button__tap.is-dark.is-inverted.is-outlined.is-loading.is-focused::after,.button__tap.is-dark.is-inverted.is-outlined.is-loading.is-hovered::after,.button__tap.is-dark.is-inverted.is-outlined.is-loading:focus::after,.button__tap.is-dark.is-inverted.is-outlined.is-loading:hover::after { border-color: transparent transparent #363636 #363636!important } -.button.is-dark.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-dark.is-inverted.is-outlined { +.button__tap.is-dark.is-inverted.is-outlined[disabled],fieldset[disabled] .button__tap.is-dark.is-inverted.is-outlined { background-color: transparent; border-color: #fff; box-shadow: none; @@ -600,688 +600,688 @@ } */ /* -.button__default[disabled],fieldset[disabled] .button__default { +.style__default[disabled],fieldset[disabled] .style__default { background-color: #00d1b2; border-color: #00d1b2; box-shadow: none } -.button__default.is-inverted { +.style__default.is-inverted { background-color: #fff; color: #00d1b2 } -.button__default.is-inverted.is-hovered,.button__default.is-inverted:hover { +.style__default.is-inverted.is-hovered,.style__default.is-inverted:hover { background-color: #f2f2f2 } -.button__default.is-inverted[disabled],fieldset[disabled] .button__default.is-inverted { +.style__default.is-inverted[disabled],fieldset[disabled] .style__default.is-inverted { background-color: #fff; border-color: transparent; box-shadow: none; color: #00d1b2 } -.button__default.is-loading::after { +.style__default.is-loading::after { border-color: transparent transparent #fff #fff!important } -.button__default.is-outlined { +.style__default.is-outlined { background-color: transparent; border-color: #00d1b2; color: #00d1b2 } -.button__default.is-outlined.is-focused,.button__default.is-outlined.is-hovered,.button__default.is-outlined:focus,.button__default.is-outlined:hover { +.style__default.is-outlined.is-focused,.style__default.is-outlined.is-hovered,.style__default.is-outlined:focus,.style__default.is-outlined:hover { background-color: #00d1b2; border-color: #00d1b2; color: #fff } -.button__default.is-outlined.is-loading::after { +.style__default.is-outlined.is-loading::after { border-color: transparent transparent #00d1b2 #00d1b2!important } -.button__default.is-outlined.is-loading.is-focused::after,.button__default.is-outlined.is-loading.is-hovered::after,.button__default.is-outlined.is-loading:focus::after,.button__default.is-outlined.is-loading:hover::after { +.style__default.is-outlined.is-loading.is-focused::after,.style__default.is-outlined.is-loading.is-hovered::after,.style__default.is-outlined.is-loading:focus::after,.style__default.is-outlined.is-loading:hover::after { border-color: transparent transparent #fff #fff!important } -.button__default.is-outlined[disabled],fieldset[disabled] .button__default.is-outlined { +.style__default.is-outlined[disabled],fieldset[disabled] .style__default.is-outlined { background-color: transparent; border-color: #00d1b2; box-shadow: none; color: #00d1b2 } -.button__default.is-inverted.is-outlined { +.style__default.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff } -.button__default.is-inverted.is-outlined.is-focused,.button__default.is-inverted.is-outlined.is-hovered,.button__default.is-inverted.is-outlined:focus,.button__default.is-inverted.is-outlined:hover { +.style__default.is-inverted.is-outlined.is-focused,.style__default.is-inverted.is-outlined.is-hovered,.style__default.is-inverted.is-outlined:focus,.style__default.is-inverted.is-outlined:hover { background-color: #fff; color: #00d1b2 } -.button__default.is-inverted.is-outlined.is-loading.is-focused::after,.button__default.is-inverted.is-outlined.is-loading.is-hovered::after,.button__default.is-inverted.is-outlined.is-loading:focus::after,.button__default.is-inverted.is-outlined.is-loading:hover::after { +.style__default.is-inverted.is-outlined.is-loading.is-focused::after,.style__default.is-inverted.is-outlined.is-loading.is-hovered::after,.style__default.is-inverted.is-outlined.is-loading:focus::after,.style__default.is-inverted.is-outlined.is-loading:hover::after { border-color: transparent transparent #00d1b2 #00d1b2!important } -.button__default.is-inverted.is-outlined[disabled],fieldset[disabled] .button__default.is-inverted.is-outlined { +.style__default.is-inverted.is-outlined[disabled],fieldset[disabled] .style__default.is-inverted.is-outlined { background-color: transparent; border-color: #fff; box-shadow: none; color: #fff } -.button__default.is-light { +.style__default.is-light { background-color: #ebfffc; color: #00947e } -.button__default.is-light.is-hovered,.button__default.is-light:hover { +.style__default.is-light.is-hovered,.style__default.is-light:hover { background-color: #defffa; border-color: transparent; color: #00947e } -.button__default.is-light.is-active,.button__default.is-light:active { +.style__default.is-light.is-active,.style__default.is-light:active { background-color: #d1fff8; border-color: transparent; color: #00947e } -.button.is-link { +.button__tap.is-link { background-color: #485fc7; border-color: transparent; color: #fff } -.button.is-link.is-hovered,.button.is-link:hover { +.button__tap.is-link.is-hovered,.button__tap.is-link:hover { background-color: #3e56c4; border-color: transparent; color: #fff } -.button.is-link.is-focused,.button.is-link:focus { +.button__tap.is-link.is-focused,.button__tap.is-link:focus { border-color: transparent; color: #fff } -.button.is-link.is-focused:not(:active),.button.is-link:focus:not(:active) { +.button__tap.is-link.is-focused:not(:active),.button__tap.is-link:focus:not(:active) { box-shadow: 0 0 0 .125em rgba(72,95,199,.25) } -.button.is-link.is-active,.button.is-link:active { +.button__tap.is-link.is-active,.button__tap.is-link:active { background-color: #3a51bb; border-color: transparent; color: #fff } -.button.is-link[disabled],fieldset[disabled] .button.is-link { +.button__tap.is-link[disabled],fieldset[disabled] .button__tap.is-link { background-color: #485fc7; border-color: #485fc7; box-shadow: none } -.button.is-link.is-inverted { +.button__tap.is-link.is-inverted { background-color: #fff; color: #485fc7 } -.button.is-link.is-inverted.is-hovered,.button.is-link.is-inverted:hover { +.button__tap.is-link.is-inverted.is-hovered,.button__tap.is-link.is-inverted:hover { background-color: #f2f2f2 } -.button.is-link.is-inverted[disabled],fieldset[disabled] .button.is-link.is-inverted { +.button__tap.is-link.is-inverted[disabled],fieldset[disabled] .button__tap.is-link.is-inverted { background-color: #fff; border-color: transparent; box-shadow: none; color: #485fc7 } -.button.is-link.is-loading::after { +.button__tap.is-link.is-loading::after { border-color: transparent transparent #fff #fff!important } -.button.is-link.is-outlined { +.button__tap.is-link.is-outlined { background-color: transparent; border-color: #485fc7; color: #485fc7 } -.button.is-link.is-outlined.is-focused,.button.is-link.is-outlined.is-hovered,.button.is-link.is-outlined:focus,.button.is-link.is-outlined:hover { +.button__tap.is-link.is-outlined.is-focused,.button__tap.is-link.is-outlined.is-hovered,.button__tap.is-link.is-outlined:focus,.button__tap.is-link.is-outlined:hover { background-color: #485fc7; border-color: #485fc7; color: #fff } -.button.is-link.is-outlined.is-loading::after { +.button__tap.is-link.is-outlined.is-loading::after { border-color: transparent transparent #485fc7 #485fc7!important } -.button.is-link.is-outlined.is-loading.is-focused::after,.button.is-link.is-outlined.is-loading.is-hovered::after,.button.is-link.is-outlined.is-loading:focus::after,.button.is-link.is-outlined.is-loading:hover::after { +.button__tap.is-link.is-outlined.is-loading.is-focused::after,.button__tap.is-link.is-outlined.is-loading.is-hovered::after,.button__tap.is-link.is-outlined.is-loading:focus::after,.button__tap.is-link.is-outlined.is-loading:hover::after { border-color: transparent transparent #fff #fff!important } -.button.is-link.is-outlined[disabled],fieldset[disabled] .button.is-link.is-outlined { +.button__tap.is-link.is-outlined[disabled],fieldset[disabled] .button__tap.is-link.is-outlined { background-color: transparent; border-color: #485fc7; box-shadow: none; color: #485fc7 } -.button.is-link.is-inverted.is-outlined { +.button__tap.is-link.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff } -.button.is-link.is-inverted.is-outlined.is-focused,.button.is-link.is-inverted.is-outlined.is-hovered,.button.is-link.is-inverted.is-outlined:focus,.button.is-link.is-inverted.is-outlined:hover { +.button__tap.is-link.is-inverted.is-outlined.is-focused,.button__tap.is-link.is-inverted.is-outlined.is-hovered,.button__tap.is-link.is-inverted.is-outlined:focus,.button__tap.is-link.is-inverted.is-outlined:hover { background-color: #fff; color: #485fc7 } -.button.is-link.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-link.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-link.is-inverted.is-outlined.is-loading:focus::after,.button.is-link.is-inverted.is-outlined.is-loading:hover::after { +.button__tap.is-link.is-inverted.is-outlined.is-loading.is-focused::after,.button__tap.is-link.is-inverted.is-outlined.is-loading.is-hovered::after,.button__tap.is-link.is-inverted.is-outlined.is-loading:focus::after,.button__tap.is-link.is-inverted.is-outlined.is-loading:hover::after { border-color: transparent transparent #485fc7 #485fc7!important } -.button.is-link.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-link.is-inverted.is-outlined { +.button__tap.is-link.is-inverted.is-outlined[disabled],fieldset[disabled] .button__tap.is-link.is-inverted.is-outlined { background-color: transparent; border-color: #fff; box-shadow: none; color: #fff } -.button.is-link.is-light { +.button__tap.is-link.is-light { background-color: #eff1fa; color: #3850b7 } -.button.is-link.is-light.is-hovered,.button.is-link.is-light:hover { +.button__tap.is-link.is-light.is-hovered,.button__tap.is-link.is-light:hover { background-color: #e6e9f7; border-color: transparent; color: #3850b7 } -.button.is-link.is-light.is-active,.button.is-link.is-light:active { +.button__tap.is-link.is-light.is-active,.button__tap.is-link.is-light:active { background-color: #dce0f4; border-color: transparent; color: #3850b7 } -.button.is-info { +.button__tap.is-info { background-color: #3e8ed0; border-color: transparent; color: #fff } -.button.is-info.is-hovered,.button.is-info:hover { +.button__tap.is-info.is-hovered,.button__tap.is-info:hover { background-color: #3488ce; border-color: transparent; color: #fff } -.button.is-info.is-focused,.button.is-info:focus { +.button__tap.is-info.is-focused,.button__tap.is-info:focus { border-color: transparent; color: #fff } -.button.is-info.is-focused:not(:active),.button.is-info:focus:not(:active) { +.button__tap.is-info.is-focused:not(:active),.button__tap.is-info:focus:not(:active) { box-shadow: 0 0 0 .125em rgba(62,142,208,.25) } -.button.is-info.is-active,.button.is-info:active { +.button__tap.is-info.is-active,.button__tap.is-info:active { background-color: #3082c5; border-color: transparent; color: #fff } -.button.is-info[disabled],fieldset[disabled] .button.is-info { +.button__tap.is-info[disabled],fieldset[disabled] .button__tap.is-info { background-color: #3e8ed0; border-color: #3e8ed0; box-shadow: none } -.button.is-info.is-inverted { +.button__tap.is-info.is-inverted { background-color: #fff; color: #3e8ed0 } -.button.is-info.is-inverted.is-hovered,.button.is-info.is-inverted:hover { +.button__tap.is-info.is-inverted.is-hovered,.button__tap.is-info.is-inverted:hover { background-color: #f2f2f2 } -.button.is-info.is-inverted[disabled],fieldset[disabled] .button.is-info.is-inverted { +.button__tap.is-info.is-inverted[disabled],fieldset[disabled] .button__tap.is-info.is-inverted { background-color: #fff; border-color: transparent; box-shadow: none; color: #3e8ed0 } -.button.is-info.is-loading::after { +.button__tap.is-info.is-loading::after { border-color: transparent transparent #fff #fff!important } -.button.is-info.is-outlined { +.button__tap.is-info.is-outlined { background-color: transparent; border-color: #3e8ed0; color: #3e8ed0 } -.button.is-info.is-outlined.is-focused,.button.is-info.is-outlined.is-hovered,.button.is-info.is-outlined:focus,.button.is-info.is-outlined:hover { +.button__tap.is-info.is-outlined.is-focused,.button__tap.is-info.is-outlined.is-hovered,.button__tap.is-info.is-outlined:focus,.button__tap.is-info.is-outlined:hover { background-color: #3e8ed0; border-color: #3e8ed0; color: #fff } -.button.is-info.is-outlined.is-loading::after { +.button__tap.is-info.is-outlined.is-loading::after { border-color: transparent transparent #3e8ed0 #3e8ed0!important } -.button.is-info.is-outlined.is-loading.is-focused::after,.button.is-info.is-outlined.is-loading.is-hovered::after,.button.is-info.is-outlined.is-loading:focus::after,.button.is-info.is-outlined.is-loading:hover::after { +.button__tap.is-info.is-outlined.is-loading.is-focused::after,.button__tap.is-info.is-outlined.is-loading.is-hovered::after,.button__tap.is-info.is-outlined.is-loading:focus::after,.button__tap.is-info.is-outlined.is-loading:hover::after { border-color: transparent transparent #fff #fff!important } -.button.is-info.is-outlined[disabled],fieldset[disabled] .button.is-info.is-outlined { +.button__tap.is-info.is-outlined[disabled],fieldset[disabled] .button__tap.is-info.is-outlined { background-color: transparent; border-color: #3e8ed0; box-shadow: none; color: #3e8ed0 } -.button.is-info.is-inverted.is-outlined { +.button__tap.is-info.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff } -.button.is-info.is-inverted.is-outlined.is-focused,.button.is-info.is-inverted.is-outlined.is-hovered,.button.is-info.is-inverted.is-outlined:focus,.button.is-info.is-inverted.is-outlined:hover { +.button__tap.is-info.is-inverted.is-outlined.is-focused,.button__tap.is-info.is-inverted.is-outlined.is-hovered,.button__tap.is-info.is-inverted.is-outlined:focus,.button__tap.is-info.is-inverted.is-outlined:hover { background-color: #fff; color: #3e8ed0 } -.button.is-info.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-info.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-info.is-inverted.is-outlined.is-loading:focus::after,.button.is-info.is-inverted.is-outlined.is-loading:hover::after { +.button__tap.is-info.is-inverted.is-outlined.is-loading.is-focused::after,.button__tap.is-info.is-inverted.is-outlined.is-loading.is-hovered::after,.button__tap.is-info.is-inverted.is-outlined.is-loading:focus::after,.button__tap.is-info.is-inverted.is-outlined.is-loading:hover::after { border-color: transparent transparent #3e8ed0 #3e8ed0!important } -.button.is-info.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-info.is-inverted.is-outlined { +.button__tap.is-info.is-inverted.is-outlined[disabled],fieldset[disabled] .button__tap.is-info.is-inverted.is-outlined { background-color: transparent; border-color: #fff; box-shadow: none; color: #fff } -.button.is-info.is-light { +.button__tap.is-info.is-light { background-color: #eff5fb; color: #296fa8 } -.button.is-info.is-light.is-hovered,.button.is-info.is-light:hover { +.button__tap.is-info.is-light.is-hovered,.button__tap.is-info.is-light:hover { background-color: #e4eff9; border-color: transparent; color: #296fa8 } -.button.is-info.is-light.is-active,.button.is-info.is-light:active { +.button__tap.is-info.is-light.is-active,.button__tap.is-info.is-light:active { background-color: #dae9f6; border-color: transparent; color: #296fa8 } -.button.is-success { +.button__tap.is-success { background-color: #48c78e; border-color: transparent; color: #fff } -.button.is-success.is-hovered,.button.is-success:hover { +.button__tap.is-success.is-hovered,.button__tap.is-success:hover { background-color: #3ec487; border-color: transparent; color: #fff } -.button.is-success.is-focused,.button.is-success:focus { +.button__tap.is-success.is-focused,.button__tap.is-success:focus { border-color: transparent; color: #fff } -.button.is-success.is-focused:not(:active),.button.is-success:focus:not(:active) { +.button__tap.is-success.is-focused:not(:active),.button__tap.is-success:focus:not(:active) { box-shadow: 0 0 0 .125em rgba(72,199,142,.25) } -.button.is-success.is-active,.button.is-success:active { +.button__tap.is-success.is-active,.button__tap.is-success:active { background-color: #3abb81; border-color: transparent; color: #fff } -.button.is-success[disabled],fieldset[disabled] .button.is-success { +.button__tap.is-success[disabled],fieldset[disabled] .button__tap.is-success { background-color: #48c78e; border-color: #48c78e; box-shadow: none } -.button.is-success.is-inverted { +.button__tap.is-success.is-inverted { background-color: #fff; color: #48c78e } -.button.is-success.is-inverted.is-hovered,.button.is-success.is-inverted:hover { +.button__tap.is-success.is-inverted.is-hovered,.button__tap.is-success.is-inverted:hover { background-color: #f2f2f2 } -.button.is-success.is-inverted[disabled],fieldset[disabled] .button.is-success.is-inverted { +.button__tap.is-success.is-inverted[disabled],fieldset[disabled] .button__tap.is-success.is-inverted { background-color: #fff; border-color: transparent; box-shadow: none; color: #48c78e } -.button.is-success.is-loading::after { +.button__tap.is-success.is-loading::after { border-color: transparent transparent #fff #fff!important } -.button.is-success.is-outlined { +.button__tap.is-success.is-outlined { background-color: transparent; border-color: #48c78e; color: #48c78e } -.button.is-success.is-outlined.is-focused,.button.is-success.is-outlined.is-hovered,.button.is-success.is-outlined:focus,.button.is-success.is-outlined:hover { +.button__tap.is-success.is-outlined.is-focused,.button__tap.is-success.is-outlined.is-hovered,.button__tap.is-success.is-outlined:focus,.button__tap.is-success.is-outlined:hover { background-color: #48c78e; border-color: #48c78e; color: #fff } -.button.is-success.is-outlined.is-loading::after { +.button__tap.is-success.is-outlined.is-loading::after { border-color: transparent transparent #48c78e #48c78e!important } -.button.is-success.is-outlined.is-loading.is-focused::after,.button.is-success.is-outlined.is-loading.is-hovered::after,.button.is-success.is-outlined.is-loading:focus::after,.button.is-success.is-outlined.is-loading:hover::after { +.button__tap.is-success.is-outlined.is-loading.is-focused::after,.button__tap.is-success.is-outlined.is-loading.is-hovered::after,.button__tap.is-success.is-outlined.is-loading:focus::after,.button__tap.is-success.is-outlined.is-loading:hover::after { border-color: transparent transparent #fff #fff!important } -.button.is-success.is-outlined[disabled],fieldset[disabled] .button.is-success.is-outlined { +.button__tap.is-success.is-outlined[disabled],fieldset[disabled] .button__tap.is-success.is-outlined { background-color: transparent; border-color: #48c78e; box-shadow: none; color: #48c78e } -.button.is-success.is-inverted.is-outlined { +.button__tap.is-success.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff } -.button.is-success.is-inverted.is-outlined.is-focused,.button.is-success.is-inverted.is-outlined.is-hovered,.button.is-success.is-inverted.is-outlined:focus,.button.is-success.is-inverted.is-outlined:hover { +.button__tap.is-success.is-inverted.is-outlined.is-focused,.button__tap.is-success.is-inverted.is-outlined.is-hovered,.button__tap.is-success.is-inverted.is-outlined:focus,.button__tap.is-success.is-inverted.is-outlined:hover { background-color: #fff; color: #48c78e } -.button.is-success.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-success.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-success.is-inverted.is-outlined.is-loading:focus::after,.button.is-success.is-inverted.is-outlined.is-loading:hover::after { +.button__tap.is-success.is-inverted.is-outlined.is-loading.is-focused::after,.button__tap.is-success.is-inverted.is-outlined.is-loading.is-hovered::after,.button__tap.is-success.is-inverted.is-outlined.is-loading:focus::after,.button__tap.is-success.is-inverted.is-outlined.is-loading:hover::after { border-color: transparent transparent #48c78e #48c78e!important } -.button.is-success.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-success.is-inverted.is-outlined { +.button__tap.is-success.is-inverted.is-outlined[disabled],fieldset[disabled] .button__tap.is-success.is-inverted.is-outlined { background-color: transparent; border-color: #fff; box-shadow: none; color: #fff } -.button.is-success.is-light { +.button__tap.is-success.is-light { background-color: #effaf5; color: #257953 } -.button.is-success.is-light.is-hovered,.button.is-success.is-light:hover { +.button__tap.is-success.is-light.is-hovered,.button__tap.is-success.is-light:hover { background-color: #e6f7ef; border-color: transparent; color: #257953 } -.button.is-success.is-light.is-active,.button.is-success.is-light:active { +.button__tap.is-success.is-light.is-active,.button__tap.is-success.is-light:active { background-color: #dcf4e9; border-color: transparent; color: #257953 } -.button.is-warning { +.button__tap.is-warning { background-color: #ffe08a; border-color: transparent; color: rgba(0,0,0,.7) } -.button.is-warning.is-hovered,.button.is-warning:hover { +.button__tap.is-warning.is-hovered,.button__tap.is-warning:hover { background-color: #ffdc7d; border-color: transparent; color: rgba(0,0,0,.7) } -.button.is-warning.is-focused,.button.is-warning:focus { +.button__tap.is-warning.is-focused,.button__tap.is-warning:focus { border-color: transparent; color: rgba(0,0,0,.7) } -.button.is-warning.is-focused:not(:active),.button.is-warning:focus:not(:active) { +.button__tap.is-warning.is-focused:not(:active),.button__tap.is-warning:focus:not(:active) { box-shadow: 0 0 0 .125em rgba(255,224,138,.25) } -.button.is-warning.is-active,.button.is-warning:active { +.button__tap.is-warning.is-active,.button__tap.is-warning:active { background-color: #ffd970; border-color: transparent; color: rgba(0,0,0,.7) } -.button.is-warning[disabled],fieldset[disabled] .button.is-warning { +.button__tap.is-warning[disabled],fieldset[disabled] .button__tap.is-warning { background-color: #ffe08a; border-color: #ffe08a; box-shadow: none } -.button.is-warning.is-inverted { +.button__tap.is-warning.is-inverted { background-color: rgba(0,0,0,.7); color: #ffe08a } -.button.is-warning.is-inverted.is-hovered,.button.is-warning.is-inverted:hover { +.button__tap.is-warning.is-inverted.is-hovered,.button__tap.is-warning.is-inverted:hover { background-color: rgba(0,0,0,.7) } -.button.is-warning.is-inverted[disabled],fieldset[disabled] .button.is-warning.is-inverted { +.button__tap.is-warning.is-inverted[disabled],fieldset[disabled] .button__tap.is-warning.is-inverted { background-color: rgba(0,0,0,.7); border-color: transparent; box-shadow: none; color: #ffe08a } -.button.is-warning.is-loading::after { +.button__tap.is-warning.is-loading::after { border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important } -.button.is-warning.is-outlined { +.button__tap.is-warning.is-outlined { background-color: transparent; border-color: #ffe08a; color: #ffe08a } -.button.is-warning.is-outlined.is-focused,.button.is-warning.is-outlined.is-hovered,.button.is-warning.is-outlined:focus,.button.is-warning.is-outlined:hover { +.button__tap.is-warning.is-outlined.is-focused,.button__tap.is-warning.is-outlined.is-hovered,.button__tap.is-warning.is-outlined:focus,.button__tap.is-warning.is-outlined:hover { background-color: #ffe08a; border-color: #ffe08a; color: rgba(0,0,0,.7) } -.button.is-warning.is-outlined.is-loading::after { +.button__tap.is-warning.is-outlined.is-loading::after { border-color: transparent transparent #ffe08a #ffe08a!important } -.button.is-warning.is-outlined.is-loading.is-focused::after,.button.is-warning.is-outlined.is-loading.is-hovered::after,.button.is-warning.is-outlined.is-loading:focus::after,.button.is-warning.is-outlined.is-loading:hover::after { +.button__tap.is-warning.is-outlined.is-loading.is-focused::after,.button__tap.is-warning.is-outlined.is-loading.is-hovered::after,.button__tap.is-warning.is-outlined.is-loading:focus::after,.button__tap.is-warning.is-outlined.is-loading:hover::after { border-color: transparent transparent rgba(0,0,0,.7) rgba(0,0,0,.7)!important } -.button.is-warning.is-outlined[disabled],fieldset[disabled] .button.is-warning.is-outlined { +.button__tap.is-warning.is-outlined[disabled],fieldset[disabled] .button__tap.is-warning.is-outlined { background-color: transparent; border-color: #ffe08a; box-shadow: none; color: #ffe08a } -.button.is-warning.is-inverted.is-outlined { +.button__tap.is-warning.is-inverted.is-outlined { background-color: transparent; border-color: rgba(0,0,0,.7); color: rgba(0,0,0,.7) } -.button.is-warning.is-inverted.is-outlined.is-focused,.button.is-warning.is-inverted.is-outlined.is-hovered,.button.is-warning.is-inverted.is-outlined:focus,.button.is-warning.is-inverted.is-outlined:hover { +.button__tap.is-warning.is-inverted.is-outlined.is-focused,.button__tap.is-warning.is-inverted.is-outlined.is-hovered,.button__tap.is-warning.is-inverted.is-outlined:focus,.button__tap.is-warning.is-inverted.is-outlined:hover { background-color: rgba(0,0,0,.7); color: #ffe08a } -.button.is-warning.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-warning.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-warning.is-inverted.is-outlined.is-loading:focus::after,.button.is-warning.is-inverted.is-outlined.is-loading:hover::after { +.button__tap.is-warning.is-inverted.is-outlined.is-loading.is-focused::after,.button__tap.is-warning.is-inverted.is-outlined.is-loading.is-hovered::after,.button__tap.is-warning.is-inverted.is-outlined.is-loading:focus::after,.button__tap.is-warning.is-inverted.is-outlined.is-loading:hover::after { border-color: transparent transparent #ffe08a #ffe08a!important } -.button.is-warning.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-warning.is-inverted.is-outlined { +.button__tap.is-warning.is-inverted.is-outlined[disabled],fieldset[disabled] .button__tap.is-warning.is-inverted.is-outlined { background-color: transparent; border-color: rgba(0,0,0,.7); box-shadow: none; color: rgba(0,0,0,.7) } -.button.is-warning.is-light { +.button__tap.is-warning.is-light { background-color: #fffaeb; color: #946c00 } -.button.is-warning.is-light.is-hovered,.button.is-warning.is-light:hover { +.button__tap.is-warning.is-light.is-hovered,.button__tap.is-warning.is-light:hover { background-color: #fff6de; border-color: transparent; color: #946c00 } -.button.is-warning.is-light.is-active,.button.is-warning.is-light:active { +.button__tap.is-warning.is-light.is-active,.button__tap.is-warning.is-light:active { background-color: #fff3d1; border-color: transparent; color: #946c00 } -.button.is-danger { +.button__tap.is-danger { background-color: #f14668; border-color: transparent; color: #fff } -.button.is-danger.is-hovered,.button.is-danger:hover { +.button__tap.is-danger.is-hovered,.button__tap.is-danger:hover { background-color: #f03a5f; border-color: transparent; color: #fff } -.button.is-danger.is-focused,.button.is-danger:focus { +.button__tap.is-danger.is-focused,.button__tap.is-danger:focus { border-color: transparent; color: #fff } -.button.is-danger.is-focused:not(:active),.button.is-danger:focus:not(:active) { +.button__tap.is-danger.is-focused:not(:active),.button__tap.is-danger:focus:not(:active) { box-shadow: 0 0 0 .125em rgba(241,70,104,.25) } -.button.is-danger.is-active,.button.is-danger:active { +.button__tap.is-danger.is-active,.button__tap.is-danger:active { background-color: #ef2e55; border-color: transparent; color: #fff } -.button.is-danger[disabled],fieldset[disabled] .button.is-danger { +.button__tap.is-danger[disabled],fieldset[disabled] .button__tap.is-danger { background-color: #f14668; border-color: #f14668; box-shadow: none } -.button.is-danger.is-inverted { +.button__tap.is-danger.is-inverted { background-color: #fff; color: #f14668 } -.button.is-danger.is-inverted.is-hovered,.button.is-danger.is-inverted:hover { +.button__tap.is-danger.is-inverted.is-hovered,.button__tap.is-danger.is-inverted:hover { background-color: #f2f2f2 } -.button.is-danger.is-inverted[disabled],fieldset[disabled] .button.is-danger.is-inverted { +.button__tap.is-danger.is-inverted[disabled],fieldset[disabled] .button__tap.is-danger.is-inverted { background-color: #fff; border-color: transparent; box-shadow: none; color: #f14668 } -.button.is-danger.is-loading::after { +.button__tap.is-danger.is-loading::after { border-color: transparent transparent #fff #fff!important } -.button.is-danger.is-outlined { +.button__tap.is-danger.is-outlined { background-color: transparent; border-color: #f14668; color: #f14668 } -.button.is-danger.is-outlined.is-focused,.button.is-danger.is-outlined.is-hovered,.button.is-danger.is-outlined:focus,.button.is-danger.is-outlined:hover { +.button__tap.is-danger.is-outlined.is-focused,.button__tap.is-danger.is-outlined.is-hovered,.button__tap.is-danger.is-outlined:focus,.button__tap.is-danger.is-outlined:hover { background-color: #f14668; border-color: #f14668; color: #fff } -.button.is-danger.is-outlined.is-loading::after { +.button__tap.is-danger.is-outlined.is-loading::after { border-color: transparent transparent #f14668 #f14668!important } -.button.is-danger.is-outlined.is-loading.is-focused::after,.button.is-danger.is-outlined.is-loading.is-hovered::after,.button.is-danger.is-outlined.is-loading:focus::after,.button.is-danger.is-outlined.is-loading:hover::after { +.button__tap.is-danger.is-outlined.is-loading.is-focused::after,.button__tap.is-danger.is-outlined.is-loading.is-hovered::after,.button__tap.is-danger.is-outlined.is-loading:focus::after,.button__tap.is-danger.is-outlined.is-loading:hover::after { border-color: transparent transparent #fff #fff!important } -.button.is-danger.is-outlined[disabled],fieldset[disabled] .button.is-danger.is-outlined { +.button__tap.is-danger.is-outlined[disabled],fieldset[disabled] .button__tap.is-danger.is-outlined { background-color: transparent; border-color: #f14668; box-shadow: none; color: #f14668 } -.button.is-danger.is-inverted.is-outlined { +.button__tap.is-danger.is-inverted.is-outlined { background-color: transparent; border-color: #fff; color: #fff } -.button.is-danger.is-inverted.is-outlined.is-focused,.button.is-danger.is-inverted.is-outlined.is-hovered,.button.is-danger.is-inverted.is-outlined:focus,.button.is-danger.is-inverted.is-outlined:hover { +.button__tap.is-danger.is-inverted.is-outlined.is-focused,.button__tap.is-danger.is-inverted.is-outlined.is-hovered,.button__tap.is-danger.is-inverted.is-outlined:focus,.button__tap.is-danger.is-inverted.is-outlined:hover { background-color: #fff; color: #f14668 } -.button.is-danger.is-inverted.is-outlined.is-loading.is-focused::after,.button.is-danger.is-inverted.is-outlined.is-loading.is-hovered::after,.button.is-danger.is-inverted.is-outlined.is-loading:focus::after,.button.is-danger.is-inverted.is-outlined.is-loading:hover::after { +.button__tap.is-danger.is-inverted.is-outlined.is-loading.is-focused::after,.button__tap.is-danger.is-inverted.is-outlined.is-loading.is-hovered::after,.button__tap.is-danger.is-inverted.is-outlined.is-loading:focus::after,.button__tap.is-danger.is-inverted.is-outlined.is-loading:hover::after { border-color: transparent transparent #f14668 #f14668!important } -.button.is-danger.is-inverted.is-outlined[disabled],fieldset[disabled] .button.is-danger.is-inverted.is-outlined { +.button__tap.is-danger.is-inverted.is-outlined[disabled],fieldset[disabled] .button__tap.is-danger.is-inverted.is-outlined { background-color: transparent; border-color: #fff; box-shadow: none; color: #fff } -.button.is-danger.is-light { +.button__tap.is-danger.is-light { background-color: #feecf0; color: #cc0f35 } -.button.is-danger.is-light.is-hovered,.button.is-danger.is-light:hover { +.button__tap.is-danger.is-light.is-hovered,.button__tap.is-danger.is-light:hover { background-color: #fde0e6; border-color: transparent; color: #cc0f35 } -.button.is-danger.is-light.is-active,.button.is-danger.is-light:active { +.button__tap.is-danger.is-light.is-active,.button__tap.is-danger.is-light:active { background-color: #fcd4dc; border-color: transparent; color: #cc0f35