fotocasa-design-system
Version:
Fotocasa design system
1 lines • 6.51 kB
Source Map (JSON)
{"version":3,"sources":["../../atoms/buttons.scss","../sass/_theme.scss","../../atoms/colors.scss","../../atoms/typography.scss"],"names":[],"mappings":"AAyBA,QAEC,sBACA,gBACA,kBACA,sBACA,qBACA,mBACA,iBACA,cACA,eACA,qBACA,kCACA,eACA,oBACA,gBACA,iBACA,iBACA,kBACA,oBACA,kBACA,kBACA,qBACA,eACA,cAAgB,CAxBjB,cA0BK,mBACA,yBACA,oBAAsB,CA5B3B,eAiCE,eACA,oBACA,iBACA,mBACA,iBACA,oBAAsB,CAtCxB,eA0CE,eACA,oBACA,iBACA,mBACA,kBACA,oBACA,kBAAoB,CAhDtB,iBAqDK,mBACA,yBACA,oBAAsB,CAvD3B,iBA2DK,mBACA,qBACA,UCtF2B,CDyBhC,uBA+DM,kBCnF0B,CDoBhC,0BAoEE,kBCxF8B,CDoBhC,gBAwEK,mBACA,qBACA,UCnG2B,CDyBhC,sBA4EG,kBC7F6B,CD8F1B,aE1EJ,qBAAuB,CACxB,OC5BC,gBAAkB,CACnB","file":"patterns.css","sourcesContent":["\n/*------------------------------------*\\\n Fotocasa Button Style\n\\*------------------------------------*/\n\n\n// button (phantom)\n$button-color: $_color-main;\n$button-background: $_color-neutroLightest;\n$button-background--hover: $_color-mainLight;\n$button-background--pressed: $button-background--hover;\n\n// primary\n$button-primary-color: $_color-neutroLightest;\n$button-primary-background: $_color-main;\n$button-primary-background--hover: $_color-mainDark;\n$button-primary-background--pressed: $button-primary-background--hover;\n\n// accent\n$button-accent-color: $_color-neutroLightest;\n$button-accent-background: $_color-accent;\n$button-accent-background--hover: $_color-accentDark;\n$button-accent-background--pressed: $button-accent-background--hover;\n\n\n.button {\n\t-webkit-box-sizing: border-box;\n\tbox-sizing: border-box;\n\tbackground: $button-background;\n\tborder-radius: 1px;\n\tborder-radius: .125rem;\n\tborder-color: $button-color;\n\tborder-style: solid;\n\tborder-width: 1px;\n\tcolor: $button-color;\n\tcursor: pointer;\n\tdisplay: inline-block;\n\tfont-family: $font-family-stack;\n\tfont-size: 14px;\n\tfont-size: rem(14px);\n\tfont-weight: 300;\n\tline-height: 16px;\n\tline-height: 1rem;\n\tpadding: 12px 16px;\n\tpadding: .75rem 1rem;\n\tposition: relative;\n\ttext-align: center;\n\ttext-decoration: none;\n\tmin-width: 48px;\n\tmin-width: 3rem;\n\t&:hover {\n\t background: $button-background--hover;\n\t border-color: transparent;\n\t text-decoration: none;\n\n\t}\n\n\t&--small {\n\t\tfont-size: 12px;\n\t\tfont-size: rem(12px);\n\t\tline-height: 20px;\n\t\tline-height: .75rem;\n\t\tpadding: 12px 8px;\n\t\tpadding: .75rem .5rem;\n\t}\n\n\t&--large {\n\t\tfont-size: 20px;\n\t\tfont-size: rem(20px);\n\t\tline-height: 24px;\n\t\tline-height: 1.5rem;\n\t\tpadding: 12px 16px;\n\t\tpadding: .75rem 1rem;\n\t\twhite-space: nowrap;\n\t}\n\n\n\t&--pressed {\n\t background: $button-background--hover;\n\t border-color: transparent;\n\t text-decoration: none;\n\t}\n\n\t&--primary {\n\t background: $button-primary-background;\n\t border-color: $button-primary-background;\n\t color: $button-primary-color;\n\t &:hover {\n\t \tbackground: $button-primary-background--hover;\n\t }\n\t}\n\n\t&--primary--pressed {\n\t\tbackground: $button-primary-background--hover;\n\t}\n\n\t&--accent {\n\t background: $button-accent-background;\n\t border-color: $button-accent-background;\n\t color: $button-accent-color;\n\t &:hover {\n\t\t\tbackground: $button-accent-background--hover;\n\t }\n\t}\n}\n\n\n","$_color-neutroLightest: #ffffff;\n$_color-neutroDarker: #333333;\n\n$_color-mainLight: #b2d6ed;\n$_color-main: #3997d3;\n$_color-mainDark: #165681;\n\n$_color-accent: #ec671c;\n$_color-accentDark: #c64e17;\n\n// color scheme (private)\n$_color-black: #000;\n$_color-grey: lighten(black, 20%);\n$_color-grey--medium: darken(white, 13.2%);\n$_color-grey--light: darken(white, 8.2%);\n$_color-grey--lightest: darken(white, 4%);\n$_color-orange: $_color-accent;\n$_color-blue: $_color-main;\n$_color-babyblue: #b7e1f4;\n$_color-green: #40b31a;\n$_color-red: #b31a1a;\n\n$text-color: $_color-grey;\n$link-color: #09f;\n\n$bg-color: #fff;\n\n// base/fonts\n$font-family: \"OpenSans\";\n$font-family-stack: $font-family, sans-serif;\n$font-base-url: \"http://images.fotocasa.es/inmesp/webfonts/\";\n$font-family-light-url: $font-base-url + \"opensans-regular-webfont.woff\";\n$font-family-semibold-url: $font-base-url + \"opensans-semibold-webfont.woff\";\n\n// base/typography\n$text-size: 14px;\n$text-size-alpha: 24px;\n$text-size-beta: 20px;\n$text-size-gamma: 16px;\n$text-size-delta: 12px;\n$text-size-omega: 10px;\n\n$text-line-height: 1.5;\n\n$text-color: #333 !default;\n$text-color-muted: lighten($text-color, 60%);\n$action-color: #09f;\n\n// base/forms\n$input-border-color: #ccc;\n$input-height: 32px;\n$input-padding: 4px;\n\n$button-border-color: #ddd;\n\n// components/box\n$box-border-color: #eaeaea;\n$box-title-text-color: #fff;\n\n// components/group\n$group-item--active-color: $_color-babyblue;\n$group_item--hover-color: transparentize($group-item--active-color, 0.8);\n\n// components/buttons\n\n// button (phantom)\n$button-color: $_color-main;\n$button-background: $_color-neutroLightest;\n$button-background--hover: $_color-mainLight;\n$button-background--pressed: $button-background--hover;\n\n// primary\n$button-primary-color: $_color-neutroLightest;\n$button-primary-background: $_color-main;\n$button-primary-background--hover: $_color-mainDark;\n$button-primary-background--pressed: $button-primary-background--hover;\n\n// accent\n$button-accent-color: $_color-neutroLightest;\n$button-accent-background: $_color-accent;\n$button-accent-background--hover: $_color-accentDark;\n$button-accent-background--pressed: $button-accent-background--hover;\n\n$page-width: 960px;\n\n$panel-border-color: $_color-grey--light;\n","$_color-neutroLightest: #ffffff;\n$_color-neutroDarker: #333333;\n\n$_color-mainLight: #b2d6ed;\n$_color-main: #3997d3;\n$_color-mainDark: #165681;\n\n$_color-accent: #ec671c;\n$_color-accentDark: #c64e17;\n\n// color scheme (private)\n$_color-black: #000;\n$_color-grey: lighten(black, 20%);\n$_color-grey--medium: darken(white, 13.2%);\n$_color-grey--light: darken(white, 8.2%);\n$_color-grey--lightest: darken(white, 4%);\n$_color-orange: $_color-accent;\n$_color-blue: $_color-main;\n$_color-babyblue: #b7e1f4;\n$_color-green: #40b31a;\n$_color-red: #b31a1a;\n\n$text-color: $_color-grey;\n$link-color: #09f;\n\n$bg-color: #fff;\n\n.color-black {\n background-color: #000;\n}\n","strong {\n font-weight: bold;\n}"]}