@import 'colors'; $dep-nothing: #e3e3fd; // blue-france-925 $dep-small: #cacafb; // blue-france-850 $dep-medium: #8585f6; // blue-france-625 $dep-large: #313178; // blue-france-200 $dep-xlarge: #272747; // blue-france-125 #map-svg { max-width: 100%; height: auto; } #map-infos { min-width: 328px; } .departement.nothing { fill: $dep-nothing; } .departement.small { fill: $dep-small; } .departement.medium { fill: $dep-medium; } .departement.large { fill: $dep-large; } .departement.xlarge { fill: $dep-xlarge; } .legends { .legend { width: 60px; height: 10px; display: inline-block; } .nothing { background-color: $dep-nothing; } .small { background-color: $dep-small; } .medium { background-color: $dep-medium; } .large { background-color: $dep-large; } .xlarge { background-color: $dep-xlarge; } }